Update file permissions for multiple files

src/components/Pages/Anomali/Table_61.vue

@@ -101,7 +101,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'
@@ -111,7 +111,11 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable2 } from '.'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()

src/components/Pages/Anomali/Table_62.vue

@@ -42,6 +42,12 @@ 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 { ref } from 'vue'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(true)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {

src/components/Pages/Anomali/Table_63.vue

@@ -69,7 +69,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'
@@ -79,6 +79,11 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable4 } from '.'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(true)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {

src/components/Pages/Anomali/Table_64.vue

@@ -66,7 +66,12 @@ 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 { ref } from 'vue'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(true)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()

src/components/Pages/Anomali/Table_65.vue

@@ -77,7 +77,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'
@@ -87,6 +87,11 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable6 } from '.'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(true)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {

src/components/Pages/Anomali/Table_66.vue

@@ -42,6 +42,12 @@ 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 { ref } from 'vue'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(false)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {

src/components/Pages/Cico/Table_60.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+      <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -34,7 +40,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'
@@ -43,7 +49,15 @@ 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 { Type1 } from '@/components/Form/FiltersType'
+import Filters from '@/components/Form/Filters.vue'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -78,12 +92,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+const filters = ref();
+const filterData = (filters: any) => {
+    console.log(filters)
+}
 </script>

src/components/Pages/Ctt/Table_67.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+   <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type3 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -56,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -65,7 +71,15 @@ 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 Filters from '@/components/Form/Filters.vue'
+import { Type3 } from '@/components/Form/FiltersType'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -100,12 +114,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-3',
-        reportButton: true
-    })
-})
+const filters = ref()
+const filterData = (filters: any) => {
+    console.log(filters)
+}
 </script>

src/components/Pages/Gangguan/Table_1.vue

@@ -1,12 +1,12 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
     <Type1 @update:filters="(value) => {
-        filters = value
-      }
+      filters = value
+    }
       " />
   </Filters>
 
-  <div id="data">
+  <div id="dataTable">
     <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data" key-expr="no_laporan"
       :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"
@@ -97,7 +97,7 @@
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Tanggal Respon:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.waktu_respon" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -111,21 +111,21 @@
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Durasi Response Time:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.durasi_respon" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Durasi Recovery Time:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.durasi_recovery" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Posko Awal:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.posko_awal" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.posko_asal" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -139,14 +139,14 @@
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Status:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           IDPEL/NO METER:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.id_pelanggan" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -181,14 +181,14 @@
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Sumber Laporan:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.sumber_laporan" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Posko:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.posko" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.posko_asal" class-name="flex-1" />
       </div>
     </div>
 
@@ -221,7 +221,8 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' }
+import { fetchStatus } from '@/components/Form/FiltersType/reference'
+const position = { of: '#dataTable' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
@@ -293,16 +294,14 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
   }
 `
 const filterData = (params: any) => {
+  const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
-  const posko = params.posko ? params.posko.id : ''
-  const uid = params.uid ? params.uid.id : 0
-  const up3 = params.up3 ? params.up3.id : 0
   refetch({
     dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-    posko: posko,
-    idUid: uid,
-    idUp3: up3
+    dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : "",
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
@@ -313,6 +312,8 @@ const filterData = (params: any) => {
             ...item,
             pembuat_laporan: '-',
             waktu_lapor: '-',
+            status_akhir: fetchStatus(item.status_akhir),
+            posko: item.posko_asal
           }
         ]
       })

src/components/Pages/Gangguan/Table_10.vue

@@ -188,16 +188,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUA
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
 

src/components/Pages/Gangguan/Table_11.vue

@@ -257,15 +257,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {

src/components/Pages/Gangguan/Table_12.vue

@@ -184,15 +184,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
     })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {

src/components/Pages/Gangguan/Table_13.vue

@@ -186,15 +186,13 @@ query rekapitulasiGangguanPerTanggal(
     })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {

src/components/Pages/Gangguan/Table_14.vue

@@ -1,10 +1,10 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1 @update:filters="(value) => {
-        filters = value
-      }
-      " />
-  </Filters>
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -145,24 +145,22 @@ const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
   }
 `
 
-const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
-        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
-    })
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+    const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
     })
 
 
@@ -177,7 +175,7 @@ const filterData = (params: any) => {
     onError((error) => {
         console.log(error)
     })
-    
+
 }
 const filters = ref();
 </script>

src/components/Pages/Gangguan/Table_15.vue

@@ -120,15 +120,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
 
 

src/components/Pages/Gangguan/Table_16.vue

@@ -271,15 +271,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGU
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     const filters = useFiltersStore()
 

src/components/Pages/Gangguan/Table_17.vue

@@ -201,15 +201,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {

src/components/Pages/Gangguan/Table_18.vue

@@ -177,15 +177,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
 const filterData = (params: any) => {
   
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {

src/components/Pages/Gangguan/Table_19.vue

@@ -150,15 +150,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGU
 const filterData = (params: any) => {
 
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
 
     onResult(queryResult => {

src/components/Pages/Gangguan/Table_20.vue

@@ -155,15 +155,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGU
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {

src/components/Pages/Gangguan/Table_3.vue

@@ -68,6 +68,7 @@ const showPane = ref(true);
 const data = ref<any[]>([])
 const filterData = (params: any) => {
     const { minTime, maxTime, posko, uid, up3 } = params;
+    console.log(params)
     const dateValue = params.periode.split(' s/d ') 
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),

src/components/Pages/Gangguan/Table_7.vue

@@ -105,15 +105,14 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_DI_
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+    const { posko, uid, up3 } = params
+
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3?.id ? up3.id : 0,
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {

src/components/Pages/Gangguan/Table_8.vue

@@ -155,8 +155,8 @@ const filterData = (param: any) => {
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         posko,
-        idUid: uid,
-        idUp3: up3,
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {

src/components/Pages/Gangguan/Table_9.vue

@@ -240,15 +240,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+    const { posko, uid, up3 } = params
+
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {

src/components/Pages/Keluhan/Table_21.vue

@@ -81,7 +81,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -164,16 +167,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_KELUHAN_DIPI
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanDipindahkanKePoskoLain

src/components/Pages/Keluhan/Table_22.vue

@@ -84,7 +84,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -170,9 +173,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1;
     const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100;
     refetch({
@@ -180,10 +181,9 @@ const filterData = (params: any) => {
         maxJmlLapor: maxJmlLapor,
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali

src/components/Pages/Keluhan/Table_23.vue

@@ -80,7 +80,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -163,9 +166,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     const minDurasiResponseTime = params.minDurasiResponseTime ? params.minDurasiResponseTime : 0
     const maxDurasiResponseTime = params.maxDurasiResponseTime ? params.maxDurasiResponseTime : 0
     refetch({
@@ -173,10 +174,9 @@ const filterData = (params: any) => {
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         minDurasiResponseTime: minDurasiResponseTime,
         maxDurasiResponseTime: maxDurasiResponseTime,
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {

src/components/Pages/Keluhan/Table_24.vue

@@ -82,7 +82,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -167,9 +170,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     const minDurasiRecoveryTime = params.minDurasiRecoveryTime ? params.minDurasiRecoveryTime : 0
     const maxDurasiRecoveryTime = params.maxDurasiRecoveryTime ? params.maxDurasiRecoveryTime : 0
     refetch({
@@ -177,10 +178,9 @@ const filterData = (params: any) => {
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         minDurasiRecoveryTime: minDurasiRecoveryTime,
         maxDurasiRecoveryTime: maxDurasiRecoveryTime,
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanRecoveryTime

src/components/Pages/Keluhan/Table_25.vue

@@ -84,7 +84,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -163,16 +166,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {

src/components/Pages/Keluhan/Table_26.vue

@@ -80,7 +80,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -161,16 +164,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {

src/components/Pages/Keluhan/Table_27.vue

@@ -14,8 +14,8 @@
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -58,7 +58,6 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -78,7 +77,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -149,7 +151,7 @@ const GET_DATA = gql`
         }
 `
 
-const { onResult, onError ,loading,refetch} = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     posko: '',
@@ -161,16 +163,14 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+    const { posko, uid, up3 } = params
     const media = params.media ? params.media.id : ''
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
         media: media
     })
 

src/components/Pages/Keluhan/Table_28.vue

@@ -62,7 +62,6 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -176,16 +175,13 @@ query rekapitulasiKeluhanAll
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {

src/components/Pages/Keluhan/Table_29.vue

@@ -144,14 +144,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
-  query rekapitulasiKeluhanPerFungsiBidang(
+  query rekapitulasiKeluhanPenyelesaianPerFungsiBidang(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
   ) {
-    rekapitulasiKeluhanPerFungsiBidang(
+    rekapitulasiKeluhanPenyelesaianPerFungsiBidang(
       dateFrom: $dateFrom
       dateTo: $dateTo
       posko: $posko
@@ -190,21 +190,18 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiKeluhanPerFungsiBidang
+            data.value = queryResult.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
 
         }
         console.log(queryResult.data)

src/components/Pages/Keluhan/Table_30.vue

@@ -93,7 +93,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -181,16 +184,13 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
 
     onResult(queryResult => {

src/components/Pages/Keluhan/Table_31.vue

@@ -83,8 +83,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type13 from '@/components/Form/FiltersType/Type13.vue'
-import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import {  ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -94,7 +93,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -182,16 +184,13 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
 
     onResult(queryResult => {

src/components/Pages/Keluhan/Table_32.vue

@@ -1,205 +1,78 @@
 <template>
-<Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type13 @update:filters="(value) => {
-            filters = value
-        }
-            " />
-    </Filters>
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type13 @update:filters="(value) => {
+      filters = value
+    }
+      " />
+  </Filters>
   <div>
-    <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
-      :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"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :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" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-         <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
         v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        :width="50"
-        alignment="center"
-        :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-        caption="NO"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="tanggal"
-        caption="Tanggal Lapor"
-        css-class="custom-table-column"
-      />
+      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO" css-class="custom-table-column" />
+      <DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
+        css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-        />
+        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
+          css-class="custom-table-column" />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+            css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+            css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Total"
+            css-class="custom-table-column" />
+          <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="max_durasi_response" data-type="number" caption="Max"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
+            css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+            caption=">SLA" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Total"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
+            css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+            caption=">SLA" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
     </DxDataGrid>
@@ -229,7 +102,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -306,7 +182,7 @@ const GET_DATA = gql`
     }
   }
 `
-const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: '',
@@ -317,19 +193,17 @@ const filters = ref();
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+  const { posko, uid, up3 } = params
+  refetch({
+    dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : "",
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
 
   onResult((queryResult) => {
-    
+
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
 
@@ -341,5 +215,5 @@ const filterData = (params: any) => {
   onError((error) => {
     console.log(error)
   })
- }
+}
 </script>

src/components/Pages/Keluhan/Table_33.vue

@@ -1,10 +1,10 @@
 <template>
-<Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type8 @update:filters="(value) => {
-            filters = value
-        }
-            " />
-    </Filters>
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type8 @update:filters="(value) => {
+      filters = value
+    }
+      " />
+  </Filters>
   <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"
@@ -13,7 +13,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-         <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
         v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@@ -42,36 +42,36 @@
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
             css-class="custom-table-column" />
-          <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="avg_durasi_response" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" />
           <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="min_durasi_response" data-type="number" caption="Min"
             css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="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="total_dibawah_sla_response" data-type="number" caption="≤SLA"
-            css-class="custom-table-column" />
+          <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="total_dibawah_sla_response" 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="total" data-type="number" caption="Total"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
-            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
             css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
             css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
-            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+            caption=">SLA" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
     </DxDataGrid>
@@ -101,7 +101,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -178,7 +181,7 @@ const GET_DATA = gql`
     }
   }
 `
-const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: '',
@@ -189,21 +192,19 @@ const filters = ref();
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+  const { posko, uid, up3 } = params
+  refetch({
+    dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : "",
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanPerUnit
-     
+
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -212,6 +213,6 @@ const filterData = (params: any) => {
   onError((error) => {
     console.log(error)
   })
-  
+
 }
 </script>

src/components/Pages/Keluhan/Table_34.vue

@@ -1,19 +1,19 @@
 <template>
-<Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => {
-            filters = value
-        }
-            " />
-    </Filters>
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type3 @update:filters="(value) => {
+      filters = value
+    }
+      " />
+  </Filters>
   <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" />
-         <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
         v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@@ -23,8 +23,8 @@
         caption="NO" css-class="custom-table-column" />
       <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-        <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
-                    :caption="i" css-class="custom-table-column" />
+        <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number" :caption="i"
+          css-class="custom-table-column" />
       </DxColumn>
     </DxDataGrid>
   </div>
@@ -33,8 +33,8 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
-import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -53,7 +53,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -139,7 +142,7 @@ const GET_DATA = gql`
     }
   }
 `
-const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: '',
@@ -150,21 +153,19 @@ const filters = ref();
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+  const { posko, uid, up3 } = params
+  refetch({
+    dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : "",
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
-  
+
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)

src/components/Pages/Keluhan/Table_35.vue

@@ -1,28 +1,30 @@
 <template>
-<Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
         <Type8 @update:filters="(value) => {
             filters = value
         }
             " />
     </Filters>
     <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" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
             <DxColumn 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="regu" caption="Kode Unit" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="regu" caption="Kode Unit"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                 <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
@@ -84,7 +86,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -157,34 +162,32 @@ query rekapitulasiKeluhanRatingPerUnit
         total 
         }
 }`;
-const { onResult, onError ,loading,refetch} = 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,
-    })
+const { onResult, onError, loading, refetch } = 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,
+})
 const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+    const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
 
-    
+
 
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit;
-          
+
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -193,6 +196,6 @@ const filterData = (params: any) => {
     onError((error) => {
         console.log(error)
     })
-  
+
 }
 </script>

src/components/Pages/Material/Table_68.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type14 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
@@ -36,16 +42,19 @@
 </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, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-14'
-    })
-})
+import Filters from '@/components/Form/Filters.vue';
+import { Type14 } from '@/components/Form/FiltersType';
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const loading = ref(false)
+const filters = ref()
+const filterData = (filters: any) => {
+    console.log(filters)
+}
 </script>

src/components/Pages/Material/Table_69.vue

@@ -31,10 +31,15 @@
 </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, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const loading = ref(false)
 
 onMounted(() => {
     const filters = useFiltersStore()

src/components/Pages/Monalisa/Table_36.vue

@@ -150,11 +150,11 @@ const filterData = (params: any) => {
     tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid  ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : bulanSekarang.value,
-        tahun: bulan ? tahun : tahunSekarang.value
+        posko: posko ? posko.id : "",
+        idUid: idUid  ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : bulanSekarang.value,
+        tahun: bulan ? tahun.id : tahunSekarang.value
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {

src/components/Pages/Monalisa/Table_37.vue

@@ -24,17 +24,17 @@
             <DxColumn alignment="center" caption="Jumlah Dispatching Time Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        caption="Des 2018" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        caption="Des 2019" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        caption="Jan 2019" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -64,12 +64,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -77,6 +77,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
+
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -142,14 +143,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTime
 })
 const filterData = (params: any) => {
     const { regional, posko, idUid, idUp3, bulan, tahun } = params;
-
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {

src/components/Pages/Monalisa/Table_38.vue

@@ -24,17 +24,17 @@
             <DxColumn alignment="center" caption="Jumlah RCT Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        caption="Des 2018" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        caption="Des 2019" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        caption="Jan 2019" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -55,12 +55,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
@@ -69,9 +69,9 @@ const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 
-const monalisaRecoveryTimeKeluhan = gql`
-  query DaftarmonalisaRecoveryTimeKeluhan($regional:regional, $posko: String, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
-    monalisaRecoveryTimeKeluhan(
+const monalisaRecoveryTimeGangguan = gql`
+  query DaftarmonalisaRecoveryTimeGangguan($regional:regional, $posko: String, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
+    monalisaRecoveryTimeGangguan(
       regional:$regional
       posko: $posko
       idUid: $idUid
@@ -89,7 +89,7 @@ const monalisaRecoveryTimeKeluhan = gql`
     }
   }
 `;
-const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
+const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeGangguan, {
     regional: "",
     posko: "",
     idUid: 0,
@@ -100,18 +100,20 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKel
 const filterData = (params: any) => {
 
     const { regional, posko, idUid, idUp3, bulan, tahun } = params;
-
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
-            queryResult.data.monalisaRecoveryTimeKeluhan.forEach((item: any) => {
+            queryResult.data.monalisaRecoveryTimeGangguan.forEach((item: any) => {
                 data.value = [...data.value, {
                     ...item,
                 }];

src/components/Pages/Monalisa/Table_39.vue

@@ -24,17 +24,17 @@
             <DxColumn alignment="center" caption="Jumlah RPT Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        caption="Des 2018" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        caption="Des 2019" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        caption="Jan 2019" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -65,11 +65,11 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import gql from 'graphql-tag'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -114,14 +114,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaResponseTimeKel
 })
 const filterData = (params: any) => {
     const { regional, posko, idUid, idUp3, bulan, tahun } = params;
-
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {

src/components/Pages/Monalisa/Table_40.vue

@@ -100,10 +100,9 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 const position = { of: '#data' }
@@ -159,11 +158,11 @@ const filterData = (params: any) => {
 
   refetch({
     regional: regional,
-    posko: posko,
-    idUid: idUid ? idUid : 0,
-    idUp3: idUp3 ? idUp3 : 0,
-    bulan: bulan ? bulan : 10,
-    tahun: bulan ? tahun : 2023
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {

src/components/Pages/Monalisa/Table_41.vue

@@ -54,10 +54,9 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 const position = { of: '#data' }
@@ -104,11 +103,11 @@ const filterData = (params: any) => {
 
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {

src/components/Pages/Monalisa/Table_42.vue

@@ -24,17 +24,17 @@
             <DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        caption="Des 2018" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        caption="Des 2019" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        caption="Jan 2019" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -64,12 +64,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -114,14 +114,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLap
 })
 const filterData = (params: any) => {
     const { regional, posko, idUid, idUp3, bulan, tahun } = params;
-
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {

src/components/Pages/Monalisa/Table_43.vue

@@ -24,17 +24,17 @@
             <DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        caption="Des 2018" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        caption="Des 2019" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        caption="Jan 2019" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -64,12 +64,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -114,14 +114,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEns
 })
 const filterData = (params: any) => {
     const {regional, posko, idUid, idUp3, bulan, tahun} = params;
-
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid  ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        posko: posko ? posko.id : "",
+        idUid: idUid  ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {

src/components/Pages/Monalisa/Table_44.vue

@@ -12,19 +12,19 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                <DxColumn :width="150" alignment="center" data-field="gangguan" data-type="number" caption="Gangguan"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
+                <DxColumn :width="150" alignment="center" data-field="informasi" data-type="number" caption="Informasi"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
             </DxColumn>
         </DxDataGrid>
@@ -34,8 +34,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { computed, onMounted, ref, watch } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import {ref} from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -52,10 +51,9 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 const position = { of: '#data' }
@@ -82,35 +80,34 @@ const monalisaGangguanBelumSelesai = gql`
       bulan: $bulan
       tahun: $tahun
     ) {
-      jumlah_bulan
-      jumlah_bulan_n_1
-      jumlah_tahun
-      jumlah_tahun_n_1
-      nama_posko
-      persen_bulan
-      persen_tahun
+        gangguan
+informasi
+nama_posko
+total
     }
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSelesai, {
-    bulan: 10,
-    tahun: 2023,
+
     regional: '',
     posko: '',
     idUid: 0,
-    idUp3: 0
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023,
 })
 const filterData = (params: any) => {
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
-        bulan: 10,
-        tahun: 2023,
-        regional: '',
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {

src/components/Pages/Monalisa/Table_45.vue

@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <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">
@@ -22,18 +22,18 @@
             <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -45,7 +45,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { ref } 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'
@@ -54,7 +54,14 @@ 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'
+import { getMonthName } from '@/utils/texts'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -84,12 +91,77 @@ const onExporting = (e: any) => {
     }
 }
 
+
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
+const MONALISAJUMLAHKALIKELUHAN = gql`
+  query DaftarMonalisaJumlahKaliKeluhan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaJumlahKaliKeluhan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIKELUHAN, {
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0,
+    bulan: bulanSekarang.value,
+    tahun: tahunSekarang.value
+})
+
+const filterData = (params: any) => {
+    const {regional, posko, idUid, idUp3, bulan, tahun} = params;
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
+    refetch({
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid  ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : bulanSekarang.value,
+        tahun: bulan ? tahun.id : tahunSekarang.value
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.monalisaJumlahKaliKeluhan;
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params: any) => {
-    console.log(params)
-}
-const filters = ref()
+onMounted(() => {
+    console.log(bulanSekarang.value)
+});
+const filters= ref();
 </script>

src/components/Pages/Monalisa/Table_46.vue

@@ -6,34 +6,35 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RCT Kali Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -46,7 +47,6 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { 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 { jsPDF } from 'jspdf'
@@ -54,14 +54,19 @@ 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'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -90,14 +95,77 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
-
+const monalisaDispatchingTimeKeluhan = gql`
+  query DaftarmonalisaDispatchingTimeKeluhan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaDispatchingTimeKeluhan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTimeKeluhan, {
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023
+})
+const filterData = (params: any) => {
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
+    refetch({
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaDispatchingTimeKeluhan.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
-}
+
 const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_47.vue

@@ -22,18 +22,18 @@
             <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RPT Kali Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -53,6 +53,9 @@ 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'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -60,7 +63,9 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -89,14 +94,69 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
+const monalisaRecoveryTimeKeluhan = gql`
+  query DaftarmonalisaRecoveryTimeKeluhan($regional:regional, $posko: String, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
+    monalisaRecoveryTimeKeluhan(
+      regional:$regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        jumlah_bulan
+        jumlah_bulan_n_1
+        jumlah_tahun
+        jumlah_tahun_n_1
+        nama_posko
+        persen_bulan
+        persen_tahun
+    }
+  }
+`;
+const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
+    regional: "",
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023,
+})
+const filterData = (params: any) => {
+
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
+    refetch({
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaRecoveryTimeKeluhan.forEach((item: any) => {
+                data.value = [...data.value, {
+                    ...item,
+                }];
+            });
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
-}
+
 const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_48.vue

@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <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">
@@ -26,11 +26,11 @@
                         <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
@@ -38,11 +38,11 @@
                         <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
@@ -52,11 +52,11 @@
                         <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
@@ -64,11 +64,11 @@
                         <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
@@ -89,6 +89,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 position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -96,7 +98,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
+
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -130,9 +132,77 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const monalisaJumlahDurasiRptRctKeluhan = gql`
+  query DaftarmonalisaJumlahDurasiRptRctKeluhan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaJumlahDurasiRptRctKeluhan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_keluhan_rct_bulan
+      jumlah_keluhan_rct_sampai_bulan
+      jumlah_keluhan_rpt_bulan
+      jumlah_keluhan_rpt_sampai_bulan
+      nama_posko
+      rct_keluhan_bulan
+      rct_keluhan_sampai_bulan
+      rpt_keluhan_bulan
+      rpt_keluhan_sampai_bulan
+      total_rct_bulan
+      total_rct_sampai_bulan
+      total_rpt_bulan
+      total_rpt_sampai_bulan
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRptRctKeluhan, {
+  bulan: 10,
+  tahun: 2023,
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.monalisaJumlahDurasiRptRctKeluhan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+onError((error) => {
+  console.log(error)
+})
 }
+
 const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_49.vue

@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
@@ -18,11 +18,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 alignment="center" data-field="" caption="ID Keluhan" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="" caption="Jenis Keluhan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Jumlah" css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="%" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center"  :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"  caption="NO" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="id_keluhan" caption="ID Keluhan" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="jenis_keluhan" caption="Jenis Keluhan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="persen_keluhan" caption="%" css-class="custom-table-column" />
 
         </DxDataGrid>
     </div>
@@ -39,6 +39,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 position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -46,7 +48,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
+
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -80,9 +82,67 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const monalisaKeluhanPerJenisKeluhan = gql`
+  query DaftarmonalisaKeluhanPerJenisKeluhan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaKeluhanPerJenisKeluhan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      id_keluhan
+      jumlah
+      persen_keluhan
+      tipe_permasalahan
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaKeluhanPerJenisKeluhan, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const filterData = (params: any) => {
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+
+    refetch({
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaKeluhanPerJenisKeluhan.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
 }
 const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_50.vue

@@ -22,18 +22,18 @@
             <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -53,6 +53,9 @@ 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'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -60,7 +63,9 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -94,9 +99,72 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const monalisaRekapitulasiLaporUlangKeluhan = gql`
+  query DaftarmonalisaRekapitulasiLaporUlangKeluhan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaRekapitulasiLaporUlangKeluhan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLaporUlangKeluhan, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const filterData = (params: any) => {
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
+    refetch({
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaRekapitulasiLaporUlangKeluhan.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
 }
 const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_51.vue

@@ -1,34 +1,82 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
-            filters = value
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type2
+      @update:filters="
+        (value) => {
+          filters = value
         }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+      "
+    />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                    css-class="custom-table-column" />
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="keluhan"
+          data-type="number"
+          caption="Keluhan"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="informasi"
+          data-type="number"
+          caption="Informasi"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -36,12 +84,23 @@ import { ref } from 'vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 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 position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -49,43 +108,100 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
 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 filterData = (params:any) => 
-{   
-    console.log(params)
+const monalisaRekapitulasiKeluhanBelumSelesai = gql`
+  query DaftarmonalisaRekapitulasiKeluhanBelumSelesai(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaRekapitulasiKeluhanBelumSelesai(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      keluhan
+      informasi
+      nama_posko
+      total
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiKeluhanBelumSelesai, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.monalisaRekapitulasiKeluhanBelumSelesai.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
-</script>
+</script>

src/components/Pages/Monalisa/Table_59.vue

@@ -60,6 +60,7 @@ const shading = ref(true)
 const showPane = ref(true)
 const dataDetail = ref<any>()
 const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()

src/components/Pages/PencarianData/Table_71.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+      <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type15 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
@@ -37,10 +43,11 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted,ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { Type15 } from '@/components/Form/FiltersType';
+import Filters from '@/components/Form/Filters.vue';
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -49,11 +56,10 @@ const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 const loading = ref(false)
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-15'
-    })
-})
+const filters = ref();
+const filterData = async (filters: any) => {
+    loading.value = true
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    loading.value = false
+}
 </script>

src/components/Pages/Transaksi/Table_70.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+     <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type17 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -41,6 +47,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 { Type17 } from '@/components/Form/FiltersType'
+import Filters from '@/components/Form/Filters.vue'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -139,11 +147,8 @@ const data = [
     }
 ]
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-17'
-    })
-})
+const filters = ref();
+const filterData = (filters: any) => {
+    console.log(filters)
+}
 </script>