Merge branch 'GraphQLIntegration' of https://gitea.callysta-engineering.com/APKT/eis into dev/bagus

package.json

@@ -15,7 +15,8 @@
     "prepare": "tw-patch install"
   },
   "dependencies": {
-    "@apollo/client": "^3.8.8",
+    "@apollo/client": "^3.8.10",
+    "@apollo/link-context": "^2.0.0-beta.3",
     "@headlessui/tailwindcss": "^0.2.0",
     "@headlessui/vue": "^1.7.16",
     "@heroicons/vue": "^2.0.18",
@@ -23,7 +24,10 @@
     "@phosphor-icons/vue": "^2.1.6",
     "@types/qs": "^6.9.9",
     "@types/uuid": "^9.0.2",
-    "@vue/apollo-option": "^4.0.0-beta.12",
+    "@vue/apollo-components": "^4.0.0",
+    "@vue/apollo-composable": "^4.0.1",
+    "@vue/apollo-option": "^4.0.0",
+    "axios": "^1.6.7",
     "devextreme": "23.1.5",
     "devextreme-vue": "23.1.5",
     "dotenv": "^16.3.1",
@@ -35,6 +39,8 @@
     "jspdf": "^2.5.1",
     "pinia": "^2.1.3",
     "qs": "^6.11.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "uuid": "^9.0.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2",

src/components/DatePicker.vue

@@ -1,38 +1,31 @@
 <script setup lang="ts">
-  import { PhCalendarBlank } from '@phosphor-icons/vue';
+import { useDateStore } from '@/stores/date';
-  import { ref } from 'vue'
+import { PhCalendarBlank } from '@phosphor-icons/vue';
-  import VueTailwindDatepicker from 'vue-tailwind-datepicker'
+import { ref, watch } from 'vue'
-  
+import VueTailwindDatepicker from 'vue-tailwind-datepicker'
-
 const dateValue = ref('')
 const formatter = ref({
-  date: 'DD MMM YYYY',
+  date: 'DD-MM-YYYY',
-  month: 'MMM'
+  month: 'MMMM'
+})
+watch(dateValue, (newValue) => {
+  useDateStore().setDateValue(newValue);
+
 })
 </script>
 
 <template>
   <div class="flex">
-    <vue-tailwind-datepicker 
+    <vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" separator=" s/d " :shortcuts="false"
-      v-model="dateValue"
+      :auto-apply="false" as-single use-range v-slot="{ value, placeholder }">
-      :formatter="formatter"
-      separator="   s/d   "
-      :shortcuts="false"
-      :auto-apply="false"
-      as-single 
-      use-range
-      v-slot="{ value, placeholder }"
-    >
       <div class="flex">
         <div class="flex-1">
-          <button
+          <button type="button"
-            type="button"
+            class="w-full flex items-center justify-between px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
-            class="w-full flex items-center justify-between px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
-          >
             <span class="text-gray-900">
               {{ value || placeholder }}
             </span>
-            <PhCalendarBlank size="18" weight="regular"/>
+            <PhCalendarBlank size="18" weight="regular" />
           </button>
         </div>
       </div>

src/components/Form/Filters.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
   // components
   import Button from '@/components/Button.vue';
-
+  import { useSearchStore } from '@/stores/filtersAction';
    // icons
   import {
     PhArrowsCounterClockwise, 
     PhFileText,
     PhMagnifyingGlass 
   } from '@phosphor-icons/vue';
-
+  const cariButton = useSearchStore()
   defineProps({
     reportButton: {
       type: Boolean,
@@ -26,7 +26,7 @@
     
     <div class="filter-footer rounded-b-2xl px-4 py-3 bg-primary-50 flex justify-end">
       <div class="filter-buttons flex gap-3 flex-wrap">
-        <Button label="Ulangi" style-type="outline" class-name="bg-white">
+        <Button @click="()=>cariButton.isTriggerChange = !cariButton.isTriggerChange" label="Ulangi" style-type="outline" class-name="bg-white">
           <PhArrowsCounterClockwise size="18" class="ml-1" weight="regular" />
         </Button>
 
@@ -34,7 +34,7 @@
           <PhFileText size="18" class="ml-1" weight="regular" />
         </Button>
 
-        <Button label="Cari Data">
+        <Button @click="()=>cariButton.isTriggerChange = !cariButton.isTriggerChange" label="Cari Data">
           <PhMagnifyingGlass  size="18" class="ml-1" weight="regular" />
         </Button>
       </div>

src/components/Form/FiltersType/Type1.vue

@@ -1,32 +1,58 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
+import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
+import { ref } from 'vue';
+fetchData();
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const poskoPlaceholder = 'Semua Posko';
+const uppp = ref({ id: 0, name: uppPlaceholder });
+const uid = ref({ id: 0, name:uidPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder });
+
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: uppPlaceholder };
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Posko(value);
+  posko.value = { id: 0, name: poskoPlaceholder };
+};
+
+const setPosko = (value: any) => {
+  posko.value = value;
+  selectedPosko(value);
+};
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select @update:selected="setUid($event)" :data="items" 
+    :placeholder="uidPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp"
+      :placeholder="uppPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select placeholder="Semua Posko" />
+    <Select @update:selected="setPosko($event)" 
+    :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
-
     <DatePicker  />
   </div>
 </template>

src/components/Form/FiltersType/Type18.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import Select from '@/components/Select.vue'
+import SelectMulti from '@/components/SelectMulti.vue'
+
+import DatePicker from '@/components/DatePicker.vue'
+import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
+fetchData();
+
+const departments = [
+    { id: 1, name: 'Marketing', contact: 'Durward Reynolds' },
+    { id: 2, name: 'HR', contact: 'Kenton Towne' },
+    { id: 3, name: 'Sales', contact: 'Therese Wunsch' },
+    { id: 4, name: 'Finance', contact: 'Benedict Kessler' },
+    { id: 5, name: 'Customer service', contact: 'Katelyn Rohan' },
+  ]
+
+</script>
+
+<template>
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+
+    <Select @update:selected="selectedUid($event)" :data="items" placeholder="Semua Unit Induk Distribusi/Wilayah" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
+
+    <Select @update:selected="selectedUppp($event)" :data="itemsUp3"
+      placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
+
+    <Select @update:selected="selectedPosko($event)" :data="itemsPosko" placeholder="Semua Posko" />
+  </div>
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Jenis Transaksi:</label>
+
+    <SelectMulti :data="departments" placeholder="Semua Jenis Transaksi" />
+  </div>
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <DatePicker  />
+  </div>
+</template>

src/components/Form/FiltersType/Type2.vue

@@ -1,42 +1,71 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
+import Select from '@/components/Select.vue'
+import { selectedUid,  selectedUp3Ulp, fetchData, items, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
+import { ref } from 'vue';
+fetchData();
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const regionalPlaceholder = 'Semua Regional';
+const uppp = ref({ id: 0, name: up3Placholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: 0, name: ulpPlaceholder });
+const regional = ref({ id: 0, name: regionalPlaceholder });
+
+const setRegional = (value: any) => {
+  regional.value = value;
+  selectedUid(value);
+  uid.value = { id: 0, name: uidPlaceholder };
+};
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placholder };
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: 0, name: ulpPlaceholder };
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUp3Ulp(value);
+};
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Regional:</label>
 
-    <Select placeholder="Semua Regional"/>
+    <Select @update:selected="setRegional($event)" :data="itemsRegional"  :placeholder="regionalPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select @update:selected="setUid($event)" :data="items" :placeholder="uidPlaceholder"  />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="setUp3($event)"  :data="itemsUp3" :placeholder="up3Placholder"  />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
-      >Unit Layanan Pelanggan:</label
-    >
 
-    <Select placeholder="Semua Unit Layanan Pelanggan" />
+    <Select @update:selected="setUlp($event)"  :data="itemsUlp" :placeholder="ulpPlaceholder"  />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode</label>
 
     <div class="grid grid-cols-2 gap-x-2">
-      <Select placeholder="Juli" />
+      <Select :data="months" placeholder="Pilih Bulan" />
-      <Select placeholder="2023" />
+      <Select :data="years" placeholder="Pilih Tahun" />
     </div>
   </div>
 </template>

src/components/Form/FiltersType/Type3.vue

@@ -1,29 +1,51 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
+import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import { selectedUid, selectedUp3Ulp,selectedUlp, fetchData, items, itemsUp3, itemsUlp } from './reference';
+import { ref } from 'vue';
+fetchData();
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const uppp = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: 0, name: ulpPlaceholder });
+
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: 0, name: ulpPlaceholder };
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(value);
+};
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select @update:selected="setUid($event)" :data="items" :placeholder="uidPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
-      >Unit Layanan Pelanggan:</label
-    >
 
-    <Select placeholder="Semua Unit Layanan Pelanggan" />
+    <Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type6.vue

@@ -1,13 +1,23 @@
 <script setup lang="ts">
+  import InputNumber from '@/components/Form/InputNumber.vue'
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
+  import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
+import { useTotalReport } from '@/stores/totalReport';
+  fetchData();
+  const changeMinReport = (value: any) => {
+    useTotalReport().setDataMin(value)
+  }
+  const changeMaxReport = (value: any) => {
+    useTotalReport().setDataMax(value)
+  }
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select @update:selected="selectedUid($event)" :data="items"  placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -15,13 +25,13 @@
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="selectedUppp($event)" :data="itemsUp3"  placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select placeholder="Semua Posko" />
+    <Select @update:selected="selectedPosko($event)" :data="itemsPosko" placeholder="Semua Posko" />
   </div>
   
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -34,9 +44,9 @@
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
 
     <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-      <Select placeholder="1" />
+      <InputNumber :value="1" @change="changeMinReport($event.target.value)" />
       <small class="flex items-center">s/d</small>
-      <Select placeholder="2" />
+      <InputNumber :value="1" @change="changeMaxReport($event.target.value)"/>
     </div>
   </div>
 </template>

src/components/Form/FiltersType/Type7.vue

@@ -2,6 +2,39 @@
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
   import InputWithSuffix from '../InputWithSuffix.vue';
+import { useTotalDuration } from '@/stores/totalDuration';
+import { ref } from 'vue';
+  const data = [
+   
+    {
+      id : 1,
+      name : 'Dibawah  / Sesuai SLA (<= 45 menit)'
+    },
+    {
+      id : 2,
+      name : 'Melebihi SLA (> 45 menit)'
+    }
+  
+  ]
+  const triggerInput = ref(false)
+  const changeDuration = (value: any) => {
+    if(value.id === 0 ){
+      console.log('Durasi Menit')
+      useTotalDuration().setDataMin(0)
+      useTotalDuration().setDataMax(5)
+      triggerInput.value = false
+    }else if(value.id === 1){
+      useTotalDuration().setDataMin(0)
+      useTotalDuration().setDataMax(45)
+      console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
+      triggerInput.value = true
+    }else{
+      useTotalDuration().setDataMin(46)
+      useTotalDuration().setDataMax(7*60*24)
+      triggerInput.value = true
+      console.log('Melebihi SLA (> 45 menit)')
+    }
+  }
 </script>
 
 <template>
@@ -35,12 +68,12 @@
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
-      <Select placeholder="Durasi Menit" />
+      <Select @update:selected="changeDuration($event)" :data="data" placeholder="Durasi Menit" />
 
       <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-        <InputWithSuffix />
+        <InputWithSuffix :value="useTotalDuration().getDataMin()" :disabled=triggerInput />
         <small class="flex items-center">s/d</small>
-        <InputWithSuffix />
+        <InputWithSuffix :value="useTotalDuration().getDataMax()" :disabled="triggerInput" />
       </div>
     </div>
   </div>

src/components/Form/FiltersType/index.ts

@@ -15,3 +15,4 @@ export { default as Type14 } from '@/components/Form/FiltersType/Type14.vue'
 export { default as Type15 } from '@/components/Form/FiltersType/Type15.vue' 
 export { default as Type16 } from '@/components/Form/FiltersType/Type16.vue' 
 export { default as Type17 } from '@/components/Form/FiltersType/Type17.vue' 
+export { default as Type18 } from '@/components/Form/FiltersType/Type18.vue' 

src/components/Form/FiltersType/reference.ts

@@ -0,0 +1,121 @@
+
+import { getUid, getUp3, getPosko ,getUlp} from '@/utils/network';
+import { ref } from 'vue'
+import { usePostsStore } from '@/stores/posts';
+import { useUp3Store } from '@/stores/up3';
+import { useRegionStore } from '@/stores/region';
+import { useUlpStore } from '@/stores/ulp';
+
+interface Item {
+  id: number;
+  name: any;
+}
+const months =[
+  {id:1, name: 'Januari'},
+  {id:2, name: 'Februari'},
+  {id:3, name: 'Maret'},
+  {id:4, name: 'April'},
+  {id:5, name: 'Mei'},
+  {id:6, name: 'Juni'},
+  {id:7, name: 'Juli'},
+  {id:8, name: 'Agustus'},
+  {id:9, name: 'September'},
+  {id:10, name: 'Oktober'},
+  {id:11, name: 'November'},
+  {id:12, name: 'Desember'},
+]
+// create 4 year back array
+const year = new Date().getFullYear();
+const years =ref<Item[]>([]);
+for (let i = 0; i < 5; i++) {
+  years.value.push({id:year-i, name: year-i})
+}
+const timeout = ref()
+const items = ref<Item[]>([]);
+const itemsUp3 = ref<Item[]>([]);
+const itemsPosko = ref<Item[]>([]);
+const itemsUlp =  ref<Item[]>([]);
+const itemsRegional = ref<Item[]>([]);
+const itemsMedia = ref<Item[]>([]);
+// Fetch data from the API using Axios
+const fetchData = async () => {
+    try {
+      const res = await getUid()
+      items.value = res.data.map((item: any) => (
+        {
+          id: item.id,
+          name: item.nama,
+        }
+      ));
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+};
+
+const fetchDataUp3 = async (uid: number) => {
+
+  try {
+    const res = await getUp3(uid)
+    itemsUp3.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama,
+      }
+    ));
+
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+
+};
+const fetchDataUlp = async (up3: number) => {
+  try {
+    const res = await getUlp(up3)
+    itemsUlp.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama,
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+}
+const fetchDataPosko = async (up3: number) => {
+  clearTimeout(timeout.value)
+  timeout.value = setTimeout(async () => {
+  try {
+    const res = await getPosko(up3)
+    itemsPosko.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama,
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+},300);
+};
+const selectedUid = (value: any) => {
+  useRegionStore().setData(value.id);
+  fetchDataUp3(value.id);
+}
+const selectedUp3Posko = (value: any) => {
+  useUp3Store().setData(value.id);
+  fetchDataPosko(value.id);
+}
+const selectedUp3Ulp = (value: any) => {
+  useUp3Store().setData(value.id);
+  fetchDataUlp(value.id);
+}
+const selectedPosko = (value: any) => {
+  usePostsStore().setData(value.id);
+}
+const selectedUlp = (value: any) => {
+  useUlpStore().setData(value.id);
+}
+
+
+
+export { selectedUid, selectedUp3Posko ,selectedUp3Ulp, selectedPosko,selectedUlp, fetchData, items, itemsUp3, itemsPosko,itemsRegional,itemsMedia,itemsUlp ,months ,years};

src/components/Form/InputNumber.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+  const props = defineProps({
+    placeholder: {
+        type: String,
+        default: "",
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    readonly: {
+        type: Boolean,
+        default: false,
+    },
+    value: {
+        type: Number,
+        default: "",
+    },
+  })
+</script>
+
+<template>
+  <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
+    <input
+      autocomplete="off"
+      type="number"
+      :value ="props.value"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      inputmode="numeric"
+      pattern="[0-9.]*"
+      
+      oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
+      onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
+      class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
+    />
+  </div>
+</template>

src/components/Form/InputWithSuffix.vue

@@ -11,7 +11,11 @@
     readonly: {
         type: Boolean,
         default: false,
-    }
+    },
+    value: {
+        type: Number,
+        default: "",
+    },
   })
 </script>
 
@@ -20,6 +24,7 @@
     <input
       autocomplete="off"
       type="text"
+      :value ="props.value"
       :placeholder="placeholder"
       :disabled="disabled"
       :readonly="readonly"

src/components/Pages/Gangguan/Table_1.vue

@@ -1,20 +1,23 @@
 <template>
-    <div>
+    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data" key-expr="no_laporan"
-            :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :hover-state-enabled="true" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :allow-column-resizing="true" column-resizing-mode="widget">
             <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" />
             <DxSelection mode="single" />
             <!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
-            <DxLoadPanel :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" />
 
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="number" data-type="number"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-                caption="No" />
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
                 caption="No Laporan" cell-template="data" />
 
@@ -28,17 +31,17 @@
                 caption="Tgl Response" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_recovery"
                 caption="Tgl Recovery" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon"
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon_time"
                 caption="Durasi Response Time" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery"
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
                 caption="Durasi Recovery Time" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_awal"
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_asal"
                 caption="Posko Awal" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan"
                 caption="Posko Tujuan" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status" caption="Status"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-                cell-template="data" />
+                caption="Status" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="id_pelanggan"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
                 caption="IDPEL/NO METER" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
                 caption="Nama Pelapor" cell-template="data" />
@@ -48,7 +51,7 @@
                 caption="No Telp Pelapor" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
                 caption="Keterangan Pelapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="sumber_laporan"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
                 caption="Sumber Lapor" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko"
                 cell-template="data" />
@@ -194,29 +197,39 @@
 </template>
 
 <script setup lang="ts">
+
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import type { Data1 } from '@/types/gangguan'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { writeDataJson } from '@/utils/storage'
+
 import { useDialogStore } from '@/stores/dialog'
 import { useFiltersStore } from '@/stores/filters'
+import { useDateStore } from '@/stores/date'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
-
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { useSearchStore } from '@/stores/filtersAction';
+import { usePostsStore } from '@/stores/posts';
+import { useUp3Store } from '@/stores/up3';
+import { useRegionStore } from '@/stores/region';
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const dialog = useDialogStore()
-const data = ref<Data1[]>([])
+const data = ref<any[]>([])
-const dataDetail = ref<Data1>()
+const dataDetail = ref<any>()
 const showDetail = ref(false)
+
 const closeDetail = () => {
     showDetail.value = false
 }
-
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -246,33 +259,72 @@ const onExporting = (e: any) => {
     }
 }
 
-const createDummy = () => {
+const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
-    for (let i = 0; i < 100; i++) {
+  query DaftarGangguan($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
-        data.value.push({
+    daftarGangguanDialihkanKePoskoLain(
-            number: i + 1,
+      dateFrom: $dateFrom
-            no_laporan: 'G5223091' + (900002 + i),
+      dateTo: $dateTo
-            pembuat_laporan: 'agentjateng',
+      posko: $posko
-            tanggal_laporan: '19/09/2023 12:26:42',
+      idUid: $idUid
-            tanggal_dialihkan: '19/09/2023 12:33:46',
+      idUp3: $idUp3
-            tanggal_respon: '19/09/2023 13:14:15',
+    ) {
-            tanggal_recovery: '19/09/2023 13:14:15',
+      alamat_pelapor
-            durasi_respon: '0-0:47:32',
+      durasi_recovery_time
-            durasi_recovery: '0-0:49:35',
+      durasi_response_time
-            posko_awal: 'POSKO ULP UNGARAN.',
+      id_gangguan
-            posko_tujuan: 'POSKO ULP UNGARAN.',
+      idpel_nometer
-            status: 'Selesai',
+      keterangan_pelapor
-            id_pelanggan: '-',
+      media
-            nama_pelapor: 'Moegy',
+      nama_pelapor
-            alamat_pelapor: '-',
+      no_laporan
-            no_telp_pelapor: '085136661313',
+      no_telp_pelapor
-            keterangan_pelapor: '-',
+      posko_asal
-            sumber_laporan: 'Contact Center',
+      posko_tujuan
-            posko: 'POSKO ULP UNGGARAN'
+      status_akhir
+      waktu_recovery
+      waktu_response
+    }
+  }
+`;
+const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN, {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+                data.value = [...data.value, {
+                    ...item,
+                    pembuat_laporan: '-'
+                }];
             });
         }
-    writeDataJson('data-daftar-1', data.value)
+        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]
     dataDetail.value = data
@@ -282,14 +334,10 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 const showData = () => {
     showDetail.value = true
 }
-
 onMounted(() => {
     const filters = useFiltersStore()
-
-    createDummy()
     filters.setConfig({
         type: 'type-1',
-    })
+    });
 })
-
 </script>

src/components/Pages/Gangguan/Table_10.vue

@@ -1,20 +1,26 @@
+<!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            <DxColumn :width="120" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-            <DxColumn :width="150" alignment="center" data-field="" caption="Sub Kelompok (Equipment)"
+             data-type="number"
+                caption="No" />
+            <DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="sub_kelompok" caption="Sub Kelompok (Equipment)"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                 <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
@@ -73,7 +79,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -82,7 +88,50 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import gql from 'graphql-tag';
+import { useDateStore } from '@/stores/date'
+import { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+import { useQuery } from '@vue/apollo-composable'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const data = ref<any[]>([])
+const GET_REKAP_JENIS_GANGGUAN_SE004 = gql`
+query daftarGangguanRecoveryTime(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    daftarKeluhanRecoveryTime(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        id_gangguan
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        no_laporan
+        no_telp_pelapor
+        posko
+        status_akhir
+        waktu_recovery
+        waktu_response
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -111,6 +160,44 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN_SE004, {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
+                data.value = [...data.value, {
+                    ...item,
+                    kode: 'Kode'
+                }];
+
+            })
+        }
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError(queryError => {
+        console.log(queryError)
+    })
+})
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]

src/components/Pages/Gangguan/Table_11.vue

@@ -1,5 +1,6 @@
+<!-- Rekapitulasi Gangguan Per Posko -->
 <template>
-    <div>
+    <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" :column-width="100" @exporting="onExporting"
@@ -156,6 +157,54 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import gql from 'graphql-tag';
+import { useQuery } from '@vue/apollo-composable'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_PER_POSKO = gql`
+query rekapitulasiGangguanPerPosko(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiGangguanPerPosko(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        avg_durasi_dispatch
+        avg_durasi_recovery
+        avg_durasi_response
+        id_uid
+        id_up3
+        max_durasi_dispatch
+        max_durasi_recovery
+        max_durasi_response
+        min_durasi_dispatch
+        min_durasi_recovery
+        min_durasi_response
+        persen_inproses
+        persen_selesai
+        posko
+        total
+        total_diatas_sla_dispatch
+        total_diatas_sla_recovery
+        total_diatas_sla_response
+        total_dibawah_sla_dispatch
+        total_dibawah_sla_recovery
+        total_dibawah_sla_response
+        total_inproses
+        total_selesai
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -263,15 +312,81 @@ const createDummy = () => {
     data.value = dummy;
 }
 
-const data = ref<any[]>([])
 
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
+        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
           
+            var i = 1;
+            queryResult.data.rekapitulasiGangguanPerPosko.forEach((item: any) => {
+                const entry = {
+                    no : Number(i++),
+                    posko: item.posko,
+                    laporan: {
+                        total: item.total,
+                        sudahSelesai: {
+                            jml: item.total_selesai,
+                            persen: item.persen_selesai,
+                        },
+                        belumSelesai: {
+                            jml: item.total_inproses,
+                            persen:item.persen_inproses,
+                        },
+                    },
+                    responseTime: {
+                        menit: {
+                            total: 0,
+                            rataRata: item.avg_durasi_response,
+                            max: item.max_durasi_response,
+                            min: item.min_durasi_response,
+                        },
+                        laporan: {
+                            lebihSla: item.total_diatas_sla_response,
+                            kurangSla: item.total_dibawah_sla_response,
+                        },
+                    },
+                    recoveryTime: {
+                        menit: {
+                            total: 0,
+                            rataRata: item.avg_durasi_recovery,
+                            max: item.max_durasi_recovery,
+                            min: item.min_durasi_recovery,
+                        },
+                        laporan: {
+                            lebihSla: item.total_diatas_sla_recovery,
+                            kurangSla: item.total_dibawah_sla_recovery,
+                        },
+
+                    }
+                };
+                data.value = [...data.value, entry];
+
+
+            })
+
+            data.value = [...data.value];
+            console.log(data.value)
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-8',
         reportButton: true
     })
-    createDummy()
+    // createDummy()
 })
 </script>

src/components/Pages/Gangguan/Table_12.vue

@@ -1,6 +1,6 @@
 <template>
-    <div>
+    <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">
@@ -12,58 +12,61 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            <DxColumn :width="120" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column" />
+             data-type="number"
+                caption="No" />
+            <DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="120" alignment="center" data-field="total_reponse" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
+                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
+                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -72,7 +75,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted ,ref} from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -81,7 +84,54 @@ 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);
+const showPane = ref(true);
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_PER_REGU = gql`
+query rekapitulasiGangguanPerRegu(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiGangguanPerRegu(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        nama_regu
+        avg_durasi_dispatch
+        avg_durasi_recovery
+        avg_durasi_response
+        id_uid
+        id_up3
+        max_durasi_dispatch
+        max_durasi_recovery
+        max_durasi_response
+        min_durasi_dispatch
+        min_durasi_recovery
+        min_durasi_response
+        persen_inproses
+        persen_selesai
+        posko
+        total
+        total_diatas_sla_dispatch
+        total_diatas_sla_recovery
+        total_diatas_sla_response
+        total_dibawah_sla_dispatch
+        total_dibawah_sla_recovery
+        total_dibawah_sla_response
+        total_inproses
+        total_selesai
+        }
+}`;
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -115,10 +165,29 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
+const loadingVisible = ref<boolean>(true)
 
 onMounted(() => {
     const filters = useFiltersStore()
-
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
+        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanPerRegu;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-9'
     })

src/components/Pages/Gangguan/Table_13.vue

@@ -1,6 +1,6 @@
 <template>
-    <div>
+    <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">
@@ -12,58 +12,61 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tanggal Lapor"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="120" alignment="center" data-field="total_response" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
+                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                    <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
+                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -72,7 +75,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -81,7 +84,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 { 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()
@@ -116,9 +124,70 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_PER_TANGGAL = gql`
+query rekapitulasiGangguanPerTanggal(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiGangguanPerTanggal(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        avg_durasi_dispatch
+        avg_durasi_recovery
+        avg_durasi_response
+        id_uid
+        id_up3
+        max_durasi_dispatch
+        max_durasi_recovery
+        max_durasi_response
+        min_durasi_dispatch
+        min_durasi_recovery
+        min_durasi_response
+        persen_inproses
+        persen_selesai
+        tanggal
+        total
+        total_diatas_sla_dispatch
+        total_diatas_sla_recovery
+        total_diatas_sla_response
+        total_dibawah_sla_dispatch
+        total_dibawah_sla_recovery
+        total_dibawah_sla_response
+        total_inproses
+        total_selesai
+        }
+}`;
+const  loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
-
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_TANGGAL, {
+        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanPerTanggal;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-9'
     })

src/components/Pages/Gangguan/Table_14.vue

@@ -1,9 +1,9 @@
 <template>
-    <div>
+    <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"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :word-wrap-enabled="true">
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -12,19 +12,15 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
+                <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
-                    css-class="custom-table-column" />
+                    :caption="i" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
-                    css-class="custom-table-column" />
             </DxColumn>
 
         </DxDataGrid>
@@ -32,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -41,7 +37,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 { 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()
@@ -76,9 +77,80 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+
+const data = ref<any[]>([])
+const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
+query rekapitulasiGangguanBerdasarkanMedia(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiGangguanBerdasarkanMedia(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+                media
+            tgl1
+            tgl10
+            tgl11
+            tgl12
+            tgl13
+            tgl14
+            tgl15
+            tgl16
+            tgl17
+            tgl18
+            tgl19
+            tgl2
+            tgl20
+            tgl21
+            tgl22
+            tgl23
+            tgl24
+            tgl25
+            tgl26
+            tgl27
+            tgl28
+            tgl29
+            tgl3
+            tgl30
+            tgl31
+            tgl4
+            tgl5
+            tgl6
+            tgl7
+            tgl8
+            tgl9
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
+        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+    })
 
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-1',
         reportButton: true

src/components/Pages/Gangguan/Table_15.vue

@@ -1,6 +1,6 @@
 <template>
-    <div>
+    <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" />
@@ -11,18 +11,21 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            <DxColumn alignment="center" data-field="" caption="Nama UP3" css-class="custom-table-column" />
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-            <DxColumn alignment="center" data-field="" caption="Nama Posko" css-class="custom-table-column" />
+             data-type="number"
-            <DxColumn :width="100" alignment="center" data-field="" caption="Posko IN" css-class="custom-table-column" />
+                caption="No" />
-            <DxColumn :width="100" alignment="center" data-field="" caption="Posko OUT" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="id_uid" caption="Nama UP3" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="id_up3" caption="Nama Posko" css-class="custom-table-column" />
+            <DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN" css-class="custom-table-column" />
+            <DxColumn :width="100" alignment="center" data-field="posko_out" caption="Posko OUT" css-class="custom-table-column" />
 
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -31,7 +34,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 { 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()
@@ -65,10 +73,55 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
+query rekapitulasiGangguanAlihPosko
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiGangguanAlihPosko
+(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        id_uid
+        id_up3
+        posko
+        posko_in
+        posko_out
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
+        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+    })
 
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanAlihPosko
+                ;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-1',
         reportButton: true

src/components/Pages/Gangguan/Table_16.vue

@@ -1,6 +1,6 @@
 <template>
-    <div>
+    <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" />
@@ -12,33 +12,35 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="50" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2">
-                <DxColumn :width="50" alignment="center" data-field="" caption="a" css-class="custom-table-column" />
+                <DxColumn :width="50" alignment="center" 
+                :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+                caption="a" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" caption="b" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="regu" caption="b" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" caption="c" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="kode_regu" caption="c" css-class="custom-table-column" />
             </DxColumn>
 
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" caption="d=(e+g)" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_laporan" caption="d=(e+g)" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
                     <DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="e" css-class="custom-table-column" />
+                        <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="e" css-class="custom-table-column" />
                     </DxColumn>
                     <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="f=(e/d)*100" css-class="custom-table-column" />
+                        <DxColumn :width="150" alignment="center" data-field="persen_selesai" caption="f=(e/d)*100" css-class="custom-table-column" />
                     </DxColumn>
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
                     <DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="g" css-class="custom-table-column" />
+                        <DxColumn :width="150" alignment="center" data-field="total_belum_selesai" caption="g" css-class="custom-table-column" />
                     </DxColumn>
                     <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="h=(g/d)*100" css-class="custom-table-column" />
+                        <DxColumn :width="150" alignment="center" data-field="persen_belum_selesai" caption="h=(g/d)*100" css-class="custom-table-column" />
                     </DxColumn>
                 </DxColumn>
             </DxColumn>
@@ -48,20 +50,20 @@
                     <DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
                         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="i" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_nonmarking" caption="i" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="j=(i/d)*100"
+                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_nonmarking" caption="j=(i/d)*100"
                                     css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
 
                         <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="k" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_nonmarking" caption="k" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="l" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center"  data-field="avg_waktu_recovery_mobile_nonmarking" caption="l" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
                     </DxColumn>
@@ -69,20 +71,20 @@
                     <DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
                         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="m" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_marking"  caption="m" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="n=(m/d)*100"
+                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_marking" caption="n=(m/d)*100"
                                     css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
 
                         <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="o" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_marking" caption="o" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="p" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_marking" caption="p" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
                     </DxColumn>
@@ -92,20 +94,20 @@
                     <DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
                         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="q" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_nonmarking" caption="q" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="r=(q/d)*100"
+                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_nonmarking" caption="r=(q/d)*100"
                                     css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
 
                         <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="s" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_nonmarking" caption="s" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="t" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_nonmarking" caption="t" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
                     </DxColumn>
@@ -113,20 +115,20 @@
                     <DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
                         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="u" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_marking" caption="u" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="v=(u/d)*100"
+                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_marking" caption="v=(u/d)*100"
                                     css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
 
                         <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="w" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_marking" caption="w" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" caption="x" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_marking" caption="x" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
                     </DxColumn>
@@ -138,7 +140,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -147,7 +149,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 { 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,10 +188,73 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT = gql`
+query rekapitulasiGangguanDiselesaikanMobileAPKT
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiGangguanDiselesaikanMobileAPKT
+(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        avg_waktu_recovery_mobile_marking
+        avg_waktu_recovery_mobile_nonmarking
+        avg_waktu_recovery_nonmobile_marking
+        avg_waktu_recovery_nonmobile_nonmarking
+        avg_waktu_response_mobile_marking
+        avg_waktu_response_mobile_nonmarking
+        avg_waktu_response_nonmobile_marking
+        avg_waktu_response_nonmobile_nonmarking
+        kode_regu
+        persen_belum_selesai
+        persen_laporan_mobile_marking
+        persen_laporan_mobile_nonmarking
+        persen_laporan_nonmobile_marking
+        persen_laporan_nonmobile_nonmarking
+        persen_selesai
+        regu
+        total_belum_selesai
+        total_laporan
+        total_laporan_mobile_marking
+        total_laporan_mobile_nonmarking
+        total_laporan_nonmobile_marking
+        total_laporan_nonmobile_nonmarking
+        total_selesai
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT, {
+        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+    })
 
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanDiselesaikanMobileAPKT
+                ;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-1',
         reportButton: true

src/components/Pages/Gangguan/Table_17.vue

@@ -1,8 +1,9 @@
 <template>
-    <div>
+    <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"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -11,7 +12,9 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" data-type="number"
+            <DxColumn :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+            caption="NO" data-type="number"
                 css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
@@ -72,9 +75,12 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import type { Rekap1 } from '@/types/gangguan'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { useQuery } from '@vue/apollo-composable'
-const data = ref<Rekap1[]>([])
+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,10 +145,67 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO = gql`
+query rekapitulasiGangguanRatingPerPosko
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiGangguanRatingPerPosko
+(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        in_process 
+        indeks_rating 
+        jumlah_non_rating 
+        jumlah_rating 
+        nama_posko      
+        persen_in_process 
+        persen_non_rating 
+        persen_rating 
+        persen_selesai 
+        rating_1 
+        rating_2 
+        rating_3 
+        rating_4 
+        rating_5 
+        regu        
+        selesai 
+        total 
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
-    createDummy()
-    
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO, {
+        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+    })
+
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
+                ;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
 
     filters.setConfig({
         type: 'type-1',

src/components/Pages/Gangguan/Table_18.vue

@@ -1,8 +1,9 @@
 <template>
-    <div>
+    <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"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -11,7 +12,8 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" data-type="number"
+            <DxColumn :width="50" alignment="center" 
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" caption="NO" data-type="number"
                 css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column" />
@@ -56,22 +58,35 @@
                 <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
                     css-class="custom-table-column" />
             </DxColumn>
-
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+const 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()
@@ -79,7 +94,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -90,7 +105,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -101,15 +116,70 @@ const onExporting = (e: any) => {
     }
 }
 
-
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
+  query rekapitulasiGangguanRatingPerRegu(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+  ) {
+    rekapitulasiGangguanRatingPerRegu(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+      in_process
+      indeks_rating
+      jumlah_non_rating
+      jumlah_rating
+      nama_posko
+      persen_in_process
+      persen_non_rating
+      persen_rating
+      persen_selesai
+      rating_1
+      rating_2
+      rating_3
+      rating_4
+      rating_5
+      regu
+      selesai
+      total
+    }
+  }
+`
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
+        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    })
 
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-1',
         reportButton: true

src/components/Pages/Gangguan/Table_19.vue

@@ -1,6 +1,6 @@
 <template>
-    <div>
+    <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">
             <DxSelection mode="single" />
@@ -11,31 +11,31 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Januari"
+                <DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Februari"
+                <DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Maret"
+                <DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="April"
+                <DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Mei"
+                <DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juni"
+                <DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juli"
+                <DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Agustus"
+                <DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="September"
+                <DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Oktober"
+                <DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="November"
+                <DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Desember"
+                <DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
                     css-class="custom-table-column" />
             </DxColumn>
         </DxDataGrid>
@@ -43,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -52,7 +52,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 { 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()
@@ -88,11 +93,67 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL = gql`
+query rekapitulasiGangguanKoreksiTransaksiIndividual
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiGangguanKoreksiTransaksiIndividual
+(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        agustus
+        april
+        desember
+        februari
+        januari
+        juli
+        juni
+        maret
+        mei
+        november
+        oktober
+        september
+        uid
+        ulp
+        up3
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL, {
+        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+    })
 
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
+                ;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
-        type: 'type-1',
+        type: 'type-18',
         reportButton: true
     })
 })

src/components/Pages/Gangguan/Table_2.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <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" :column-width="100" @exporting="" :allow-column-resizing="true"
@@ -8,12 +8,19 @@
             <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 :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" />
-
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="no" data-type="number"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-                caption="No" cell-template="data" />
+             data-type="number"
+                caption="No" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
                 caption="No Laporan" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor"
@@ -22,15 +29,15 @@
                 caption="Tgl Response" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
                 caption="Tgl Recovery" cell-template="data" />
-            <DxColumn css-class="custom-table-column" alignment="center" data-field="jml_lapor" caption="Jml Lapor"
+            <DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
                 cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
                 caption="Durasi Response Time" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
                 caption="Durasi Recovery Time" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status" caption="Status"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
                 cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_no_meter"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
                 caption="IDPEL/NO METER" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
                 caption="Nama Pelapor" cell-template="data" />
@@ -40,7 +47,7 @@
                 caption="No Telp Pelapor" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
                 caption="Keterangan Pelapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="sumber_lapor"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
                 caption="Sumber Lapor" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko"
                 cell-template="data" />
@@ -115,7 +122,7 @@
                 <h3 class="text-sm font-medium w-[170px] text-gray-800">
                     IDPEL/NO METER:
                 </h3>
-                <InputText :readonly="true" :value="dataDetail?.idpel_no_meter" 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">
@@ -158,13 +165,25 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue';
 import InputText from '@/components/InputText.vue';
-
+import { useQuery } from '@vue/apollo-composable';
+import gql from 'graphql-tag';
+import { useDateStore } from '@/stores/date';
+import { useSearchStore } from '@/stores/filtersAction';
+import { usePostsStore } from '@/stores/posts';
+import { useRegionStore } from '@/stores/region';
+import { useUp3Store } from '@/stores/up3';
+import { useTotalReport } from '@/stores/totalReport';
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const data = ref<any[]>([])
 const dataDetail = ref<any>({})
 const showDetail = ref(false)
 
@@ -180,46 +199,77 @@ const showData = () => {
 const closeDetail = () => {
     showDetail.value = false
 }
-
+const loadingVisible = ref(true)
-const data = [
+const GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI =gql`
-    {
+query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateTo: Date!, $posko: String!, $idUid: Int!, $idUp3: Int!) {
-        no: 1,
+  daftarGangguanMelaporLebihDariSatuKali(
-        no_laporan: 'G5223091900003',
+    minJmlLapor: $minJmlLapor
-        tgl_lapor: '31/01/2023 15:33:19',
+    maxJmlLapor: $maxJmlLapor
-        tgl_response: '31/01/2023 16:56:25',
+    dateFrom: $dateFrom
-        tgl_recovery: '31/01/2023 17:08:28',
+    dateTo: $dateTo
-        jml_lapor: 1,
+    posko: $posko
-        durasi_response_time: '0-01:23:06',
+    idUid: $idUid
-        durasi_recovery_time: '0-01:35:08',
+    idUp3: $idUp3
-        status: 'Selesai',
+  ) {
-        idpel_no_meter: '523013252126 / 1731807',
+    alamat_pelapor
-        nama_pelapor: 'IBU FELISIA',
+    durasi_response_time
-        alamat_pelapor: 'JL KWS INDUSTRI CIPT GINA KAV 5 BLOK B1',
+    id_gangguan
-        no_telp_pelapor: '082229870235',
+    idpel_nometer
-        keterangan_pelapor: '-',
+    jumlah_lapor
-        sumber_lapor: '-',
+    keterangan_pelapor
-        posko: 'POSKO ULP SEMARANG',
+    media
-    },
+    nama_pelapor
-    {
+    no_laporan
-        no: 2,
+    no_telp_pelapor
-        no_laporan: 'G5223091900673',
+    posko
-        tgl_lapor: '31/01/2023 12:35:37',
+    status_akhir
-        tgl_response: '31/01/2023 13:39:01',
+    waktu_recovery
-        tgl_recovery: '31/01/2023 14:10:53',
+    waktu_response
-        jml_lapor: 1,
-        durasi_response_time: '0-01:03:24',
-        durasi_recovery_time: '0-01:35:16',
-        status: 'Selesai',
-        idpel_no_meter: '523013252126 / 1731807',
-        nama_pelapor: 'BP TUPANDIYO',
-        alamat_pelapor: 'JL TAMBAKA RT-4 / RW-12 NO.24 GG ABU',
-        no_telp_pelapor: '0248660457',
-        keterangan_pelapor: '-',
-        sumber_lapor: '-',
-        posko: 'POSKO ULP SEMARANG',
   }
-]
+}`;
+ const { onResult, onError, loading, refetch  } = useQuery(GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI, {
+        minJmlLapor: 1,
+        maxJmlLapor: 1,
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+    })
 
+
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    const minJmlLapor = useTotalReport().getDataMin()
+    const maxJmlLapor = useTotalReport().getDataMax()
+
+    refetch({
+        minJmlLapor,
+        maxJmlLapor,
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    onResult(queryResult => {
+        if(queryResult.data != undefined){
+            data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError(error => {
+        console.log(error)
+    })
+})
 onMounted(() => {
     const filters = useFiltersStore()
    

src/components/Pages/Gangguan/Table_20.vue

@@ -1,8 +1,9 @@
 <template>
-    <div>
+    <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"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -11,31 +12,31 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Januari"
+                <DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Februari"
+                <DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Maret"
+                <DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="April"
+                <DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Mei"
+                <DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juni"
+                <DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juli"
+                <DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Agustus"
+                <DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="September"
+                <DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Oktober"
+                <DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="November"
+                <DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
                     css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Desember"
+                <DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
                     css-class="custom-table-column" />
             </DxColumn>
         </DxDataGrid>
@@ -43,16 +44,30 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+const 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()
@@ -60,7 +75,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -71,7 +86,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -82,15 +97,68 @@ const onExporting = (e: any) => {
     }
 }
 
-
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
+  query rekapitulasiGangguanCleansingTransaksiTM(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+  ) {
+    rekapitulasiGangguanCleansingTransaksiTM(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+      agustus
+      april
+      desember
+      februari
+      januari
+      juli
+      juni
+      maret
+      mei
+      november
+      oktober
+      september
+      uid
+      ulp
+      up3
+    }
+  }
+`
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
+        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    })
 
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-1',
         reportButton: true

src/components/Pages/Gangguan/Table_3.vue

@@ -1,56 +1,155 @@
 <template>
-    <div>
+    <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"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
-            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
+            :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <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 :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
 
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-                caption="No" />
+                caption="No Laporan" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
+                caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
                 caption="Tgl Response" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
                 caption="Tgl Recovery" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
                 caption="Durasi Response Time" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
                 caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
                 caption="Referensi Marking" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
                 caption="IDPEL/NO METER" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
                 caption="Nama Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
                 caption="Alamat Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
                 caption="No Telp Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
                 caption="Keterangan Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { useQuery } from '@vue/apollo-composable';
+import gql from 'graphql-tag';
+import { useDateStore } from '@/stores/date';
+import { useSearchStore } from '@/stores/filtersAction';
+import { usePostsStore } from '@/stores/posts';
+import { useRegionStore } from '@/stores/region';
+import { useUp3Store } from '@/stores/up3';
+import { useTotalDuration } from '@/stores/totalDuration';
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 
+const data = ref<any[]>([])
+
+const GET_DAFTAR_GANGGUAN_RESPONSE_TIME = gql`
+query daftarGangguanResponseTime(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $minDurasiResponseTime: Int!
+    $maxDurasiResponseTime: Int!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    daftarGangguanResponseTime(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        minDurasiResponseTime: $minDurasiResponseTime
+        maxDurasiResponseTime: $maxDurasiResponseTime
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        id_gangguan
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        no_laporan
+        no_telp_pelapor
+        posko
+        status_akhir
+        waktu_recovery
+        waktu_response
+    }
+}`;
+const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RESPONSE_TIME, {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    minDurasiResponseTime: 1, //menit
+    maxDurasiResponseTime: 1,// menit
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
+onResult(queryResult => {
+    if (queryResult.data != undefined) {
+        data.value = queryResult.data.daftarGangguanResponseTime;
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    const minDurasiResponseTime = useTotalDuration().getDataMin();
+    const maxDurasiResponseTime = useTotalDuration().getDataMax();
+    refetch({
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        minDurasiResponseTime,
+        maxDurasiResponseTime,
+        posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError(error => {
+        console.log(error)
+    })
+})
 onMounted(() => {
     const filters = useFiltersStore()
-
     filters.setConfig({
         type: 'type-7',
     })

src/components/Pages/Gangguan/Table_4.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <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">
@@ -7,52 +7,142 @@
             <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 :enabled="true" />
+            <DxLoadPanel  :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
 
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-                caption="No" />
+                caption="No Laporan" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
+                caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
                 caption="Tgl Response" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
                 caption="Tgl Recovery" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
                 caption="Durasi Response Time" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
                 caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
                 caption="Referensi Marking" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
                 caption="IDPEL/NO METER" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
                 caption="Nama Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
                 caption="Alamat Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
                 caption="No Telp Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
                 caption="Keterangan Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
                 caption="Sumber Lapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } 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'
+import { useQuery } from '@vue/apollo-composable';
+import gql from 'graphql-tag';
+import { useDateStore } from '@/stores/date';
+import { usePostsStore } from '@/stores/posts';
+import { useRegionStore } from '@/stores/region';
+import { useTotalDuration } from '@/stores/totalDuration';
+import { useUp3Store } from '@/stores/up3';
+import { useSearchStore } from '@/stores/filtersAction';
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const data = ref<any[]>([])
+const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
+query daftarGangguanRecoveryTime(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $minDurasiRecoveryTime: Int!
+    $maxDurasiRecoveryTime: Int!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    daftarGangguanRecoveryTime(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        minDurasiRecoveryTime: $minDurasiRecoveryTime
+        maxDurasiRecoveryTime: $maxDurasiRecoveryTime
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        id_gangguan
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        no_laporan
+        no_telp_pelapor
+        posko
+        status_akhir
+        waktu_recovery
+        waktu_response
+        }
+}`;
 
+const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RECOVERY_TIME, {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    minDurasiRecoveryTime: 1, //menit
+    maxDurasiRecoveryTime: 1,// menit
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    const minDurasiRecoveryTime = useTotalDuration().getDataMin();
+    const maxDurasiRecoveryTime = useTotalDuration().getDataMax();
+    refetch({
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        minDurasiRecoveryTime,
+        maxDurasiRecoveryTime,
+        posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarGangguanRecoveryTime;
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError(error => {
+        console.log(error)
+    })
+})
 onMounted(() => {
     const filters = useFiltersStore()
-
     filters.setConfig({
         type: 'type-7',
     })

src/components/Pages/Gangguan/Table_5.vue

@@ -1,56 +1,135 @@
 <template>
-    <div>
+    <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"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
-            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
+            :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <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 :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
 
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-                caption="No" />
+                caption="No Laporan" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
+                caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
                 caption="Tgl Response" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
                 caption="Tgl Recovery" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
                 caption="Durasi Response Time" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
                 caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
                 caption="IDPEL/NO METER" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
                 caption="Nama Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
                 caption="Alamat Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
                 caption="No Telp Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
                 caption="Keterangan Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
                 caption="Sumber Lapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } 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'
+import gql from 'graphql-tag';
+import { useQuery } from '@vue/apollo-composable';
+import { useDateStore } from '@/stores/date';
+import { useSearchStore } from '@/stores/filtersAction';
+import { usePostsStore } from '@/stores/posts';
+import { useRegionStore } from '@/stores/region';
+import { useUp3Store } from '@/stores/up3';
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const data = ref<any[]>([])
+const GET_SELESAI_TANPA_ID_PELANGGAN = gql`
+query daftarGangguanSelesaiTanpaIdPelanggan(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    daftarGangguanSelesaiTanpaIdPelanggan(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        id_gangguan
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        no_laporan
+        no_telp_pelapor
+        posko
+        status_akhir
+        waktu_recovery
+        waktu_response
+        }
+}`;
+const { onResult, onError, loading, refetch } = useQuery(GET_SELESAI_TANPA_ID_PELANGGAN, {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
 
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarGangguanSelesaiTanpaIdPelanggan;
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError(error => {
+        console.log(error)
+    })
+})
 onMounted(() => {
     const filters = useFiltersStore()
-
     filters.setConfig({
         type: 'type-1',
     })

src/components/Pages/Gangguan/Table_6.vue

@@ -1,51 +1,130 @@
 <template>
-    <div>
+    <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"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
-            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
+            :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <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 :enabled="true" />
+            <DxLoadPanel  :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true"/>
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
 
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" />
-                caption="No" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" />
-                caption="Nama Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
-                caption="Alamat Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
-                caption="No Telp Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
                 caption="Keterangan Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor" caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
                 caption="Tgl Response" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
                 caption="Tgl Recovery" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
                 caption="Durasi Response Time" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
                 caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Media" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_media" caption="Tgl Media" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media" />
-                caption="Keterangan Media" />
 
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } 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'
+import gql from 'graphql-tag';
+import { useQuery } from '@vue/apollo-composable';
+import { useDateStore } from '@/stores/date';
+import { useSearchStore } from '@/stores/filtersAction';
+import { usePostsStore } from '@/stores/posts';
+import { useRegionStore } from '@/stores/region';
+import { useUp3Store } from '@/stores/up3';
+import { useMediaStore } from '@/stores/media';
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const data = ref<any[]>([])
+const GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA = gql`
+query daftarGangguanBerdasarkanMedia(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+    $media : String!
+) {
+    daftarGangguanBerdasarkanMedia(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+        media: $media
+    ) {
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        id_gangguan
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        no_laporan
+        no_telp_pelapor
+        posko
+        status_akhir
+        waktu_recovery
+        waktu_response
+        }
+}`;
+const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA, {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+        media : "Twitter"
+    })
    
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    const media = useMediaStore().getData() ? useMediaStore().getData() : "Twitter"
+    refetch({
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        posko,
+        idUid: uid,
+        idUp3: up3,
+        media
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarGangguanBerdasarkanMedia;
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+})
 onMounted(() => {
     const filters = useFiltersStore()
     

src/components/Pages/Gangguan/Table_7.vue

@@ -1,53 +1,133 @@
 <template>
-    <div>
+    <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"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
-            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
+            :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <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 :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
 
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-                caption="No" />
+                caption="No Laporan" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
+                caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
                 caption="Tgl Response" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
                 caption="Tgl Recovery" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
                 caption="Durasi Response Time" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
                 caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
                 caption="IDPEL/NO METER" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
                 caption="Nama Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
                 caption="Alamat Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
                 caption="No Telp Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
                 caption="Keterangan Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
                 caption="Sumber Lapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } 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'
+import gql from 'graphql-tag';
+import { useQuery } from '@vue/apollo-composable';
+import { useDateStore } from '@/stores/date';
+import { useSearchStore } from '@/stores/filtersAction';
+import { usePostsStore } from '@/stores/posts';
+import { useRegionStore } from '@/stores/region';
+import { useUp3Store } from '@/stores/up3';
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const data = ref<any[]>([])
+const GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT = gql`
+query daftarGangguanDiselesaikanMobileAPKT(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    daftarGangguanDiselesaikanMobileAPKT(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        id_gangguan
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        no_laporan
+        no_telp_pelapor
+        posko
+        status_akhir
+        waktu_recovery
+        waktu_response
+        }
+}`;
+const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
 
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarGangguanDiselesaikanMobileAPKT;
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+})
 onMounted(() => {
     const filters = useFiltersStore()
 

src/components/Pages/Gangguan/Table_8.vue

@@ -1,63 +1,66 @@
 <template>
-    <div>
+    <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"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <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 :enabled="true" />
+            <DxLoadPanel v-model:visible.sync="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
 
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama Unit"
-            <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"
                 :allow-resizing="false" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Selesai" :allow-resizing="false"
+            <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="Selesai" :allow-resizing="false"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" :allow-resizing="false"
+            <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-                css-class="custom-table-column" />
+                :allow-resizing="false" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="In Progress"
+            <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="In Progress"
+                :allow-resizing="false" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
                 :allow-resizing="false" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" :allow-resizing="false"
-                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                <DxColumn :width="150" alignment="center" data-field="avg_durasi_dispatch" data-type="number"
+                    caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="max_durasi_dispatch" data-type="number" caption="Max"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                <DxColumn :width="150" alignment="center" data-field="min_durasi_dispatch" data-type="number" caption="Min"
-                    :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
-                    :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
-                    :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
                     :allow-resizing="false" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_dispatch" data-type="number"
+                    caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_dispatch" data-type="number"
+                    caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
+                    caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-                    :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
-                    :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
-                    :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
                     :allow-resizing="false" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_repsonse" data-type="number"
+                    caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+                    caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+                    caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-                    :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
-                    :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
-                    :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
                     :allow-resizing="false" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+                    caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+                    caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
             </DxColumn>
         </DxDataGrid>
     </div>
@@ -67,16 +70,104 @@
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import type { Rekap1 } from '@/types/gangguan'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 
-const data = ref<Rekap1[]>([])
+import gql from 'graphql-tag';
+import { useQuery } from '@vue/apollo-composable'
+import { useSearchStore } from '@/stores/filtersAction'
+import { useDateStore } from '@/stores/date'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_ALL = gql`
+query rekapitulasiAllGangguan(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiAllGangguan(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        avg_durasi_dispatch
+        avg_durasi_recovery
+        avg_durasi_response
+        id_uid
+        id_up3
+        max_durasi_dispatch
+        max_durasi_recovery
+        max_durasi_response
+        min_durasi_dispatch
+        min_durasi_recovery
+        min_durasi_response
+        persen_inproses
+        persen_selesai
+        posko
+        total
+        total_diatas_sla_dispatch
+        total_diatas_sla_recovery
+        total_diatas_sla_response
+        total_dibawah_sla_dispatch
+        total_dibawah_sla_recovery
+        total_dibawah_sla_response
+        total_inproses
+        total_selesai
+        }
+}`;
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALL, {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
 
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+    onResult(queryResult => {
+    if (queryResult.data != undefined) {
+        queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
+            data.value = [...data.value, {
+                ...item,
+                nama_unit: 'UNIT'
+            }];
+
+        })
+    }
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+})
+onError((error) => {
+    console.log(error)
+})
+})
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -106,35 +197,6 @@ const onExporting = (e: any) => {
     }
 }
 
-const createDummy = () => {
-    for (let i = 0; i < 100; i++) {
-        data.value.push({
-            id: i,
-            nama_unit: '-',
-            total: 0,
-            selesai: '-',
-            in_progress: 0,
-            avg: 0,
-            max: 0,
-            min: 0,
-            dt_avg: 0,
-            dt_max: 0,
-            dt_min: 0,
-            dt_more_sla: 0,
-            dt_less_sla: 0,
-            rt_avg: 0,
-            rt_max: 0,
-            rt_min: 0,
-            rt_more_sla: 0,
-            rt_less_sla: 0,
-            ret_avg: 0,
-            ret_max: 0,
-            ret_min: 0,
-            ret_more_sla: 0,
-            ret_less_sla: 0,
-        });
-    }
-}
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
@@ -142,10 +204,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 onMounted(() => {
-    createDummy()
-
     const filters = useFiltersStore()
-
     filters.setConfig({
         type: 'type-1',
         reportButton: true

src/components/Pages/Gangguan/Table_9.vue

@@ -1,5 +1,6 @@
+<!-- Rekapitulasi Gangguan/Jenis Gangguan -->
 <template>
-    <div>
+    <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" :column-width="100" @exporting="onExporting"
@@ -7,7 +8,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel  :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -114,7 +116,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxGroupPanel, DxGrouping, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary } from 'devextreme-vue/data-grid'
@@ -123,7 +125,59 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import gql from 'graphql-tag';
+import { useDateStore } from '@/stores/date'
+import { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+import { useQuery } from '@vue/apollo-composable'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const dataReal = ref<any[]>([])
 
+const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
+query daftarGangguanRecoveryTime(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    daftarKeluhanRecoveryTime(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        minDurasiRecoveryTime: $minDurasiRecoveryTime
+        maxDurasiRecoveryTime: $maxDurasiRecoveryTime
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        id_gangguan
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        no_laporan
+        no_telp_pelapor
+        posko
+        status_akhir
+        waktu_recovery
+        waktu_response
+        }
+}`;
+const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RECOVERY_TIME, {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -880,10 +934,40 @@ const data = [
         }
     },
 ]
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const dateValue = useDateStore().getDateValue().split(' s/d ');
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        dateFrom: dateValue[0].split('-').reverse().join('-'),
+        dateTo: dateValue[1].split('-').reverse().join('-'),
+        posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
+                dataReal.value = [...dataReal.value, {
+                    ...item,
+                    nama_unit: 'UNIT'
+                }];
+
+            })
+        }
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError(queryError => {
+        console.log(queryError)
+    })
+})
 
 onMounted(() => {
     const filters = useFiltersStore()
-
     filters.setConfig({
         type: 'type-1',
         reportButton: true

src/components/Pages/Keluhan/Table_21.vue

@@ -1,9 +1,9 @@
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :word-wrap-enabled="true">
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
@@ -13,49 +13,62 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+             data-type="number"
+                caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="tgl_laporan" caption="Tgl Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
+            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
+            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
+            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Unit Asal" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="posko_asal" caption="Unit Asal" css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
-
-
         </DxDataGrid>
     </div>
 </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, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPager,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -64,7 +77,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -75,7 +88,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -91,9 +104,66 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_POSKO_LAIN = gql`
+  query daftarKeluhanDipindahkanKePoskoLain(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+  ) {
+    daftarKeluhanDipindahkanKePoskoLain(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+      alamat_pelapor
+      durasi_recovery_time
+      durasi_response_time
+      id_keluhan
+      id_uid
+      id_up3
+      idpel_nometer
+      keterangan_pelapor
+      media
+      nama_pelapor
+      no_laporan
+      no_telp_pelapor
+      posko_asal
+      posko_tujuan
+      status_akhir
+      waktu_dialihkan
+      waktu_recovery
+      waktu_response
+    }
+  }
+`
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_POSKO_LAIN, {
+        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    })
 
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarKeluhanDipindahkanKePoskoLain
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-3'
     })

src/components/Pages/Keluhan/Table_22.vue

@@ -1,9 +1,9 @@
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :word-wrap-enabled="true">
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
@@ -13,52 +13,63 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="tgl_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
+            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Jml Lapor" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="jml_lapor" caption="Jml Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
+            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
+            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor"
+            <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP" css-class="custom-table-column" />
-
-
         </DxDataGrid>
     </div>
 </template>
 
 <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, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPager,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -67,7 +78,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -78,7 +89,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -94,9 +105,68 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_DATA = gql`
+  query daftarKeluhanMelaporLebihDariSatuKali(
+    $minJmlLapor: Int!
+    $maxJmlLapor: Int!
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+  ) {
+    daftarKeluhanMelaporLebihDariSatuKali(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      minJmlLapor: $minJmlLapor
+      maxJmlLapor: $maxJmlLapor
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+      alamat_pelapor
+      durasi_recovery_time
+      durasi_response_time
+      id_keluhan
+      idpel_nometer
+      keterangan_pelapor
+      media
+      nama_pelapor
+      no_laporan
+      no_telp_pelapor
+      posko
+      status_akhir
+      waktu_recovery
+      waktu_response
+    }
+  }
+`
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_DATA, {
+        minJmlLapor: 1,
+        maxJmlLapor: 100,
+        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    })
 
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-10'
     })

src/components/Pages/Keluhan/Table_23.vue

@@ -1,9 +1,9 @@
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :word-wrap-enabled="true">
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
@@ -13,7 +13,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
             <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
@@ -40,22 +43,32 @@
             <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
-
-
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPager,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -64,7 +77,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -75,7 +88,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -91,9 +104,68 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_DATA = gql`
+  query daftarKeluhanResponseTime(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $minDurasiResponseTime: Int!
+    $maxDurasiResponseTime: Int!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+  ) {
+    daftarKeluhanResponseTime(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      minDurasiResponseTime: $minDurasiResponseTime
+      maxDurasiResponseTime: $maxDurasiResponseTime
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+      alamat_pelapor
+      durasi_recovery_time
+      durasi_response_time
+      id_keluhan
+      idpel_nometer
+      keterangan_pelapor
+      media
+      nama_pelapor
+      no_laporan
+      no_telp_pelapor
+      posko
+      status_akhir
+      waktu_recovery
+      waktu_response
+    }
+  }
+`
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_DATA, {
+        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+        minDurasiResponseTime: 0,
+        maxDurasiResponseTime: 0,
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    })
 
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarKeluhanResponseTime
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-11'
     })

src/components/Pages/Keluhan/Table_24.vue

@@ -1,9 +1,9 @@
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :word-wrap-enabled="true">
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
@@ -13,7 +13,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
             <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
@@ -41,22 +44,32 @@
             <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
-
-
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPager,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -65,7 +78,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -76,7 +89,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -92,9 +105,68 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_DATA = gql`
+  query daftarKeluhanRecoveryTime(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $minDurasiRecoveryTime: Int!
+    $maxDurasiRecoveryTime: Int!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+  ) {
+    daftarKeluhanRecoveryTime(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      minDurasiRecoveryTime: $minDurasiRecoveryTime
+      maxDurasiRecoveryTime: $maxDurasiRecoveryTime
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+      alamat_pelapor
+      durasi_recovery_time
+      durasi_response_time
+      id_keluhan
+      idpel_nometer
+      keterangan_pelapor
+      media
+      nama_pelapor
+      no_laporan
+      no_telp_pelapor
+      posko
+      status_akhir
+      waktu_recovery
+      waktu_response
+    }
+  }
+`
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_DATA, {
+        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+        minDurasiRecoveryTime: 0,
+        maxDurasiRecoveryTime: 0,
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    })
 
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarKeluhanRecoveryTime
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-11'
     })

src/components/Pages/Keluhan/Table_25.vue

@@ -13,7 +13,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
             <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
@@ -50,7 +53,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, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -59,6 +62,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -94,9 +99,66 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_DATA = gql`
+query daftarKeluhanSelesaiTanpaIdPelanggan
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    daftarKeluhanSelesaiTanpaIdPelanggan
+(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        in_process 
+        indeks_rating 
+        jumlah_non_rating 
+        jumlah_rating 
+        nama_posko      
+        persen_in_process 
+        persen_non_rating 
+        persen_rating 
+        persen_selesai 
+        rating_1 
+        rating_2 
+        rating_3 
+        rating_4 
+        rating_5 
+        regu        
+        selesai 
+        total 
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_DATA, {
+        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+    })
 
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-3'
     })

src/components/Pages/Keluhan/Table_26.vue

@@ -13,7 +13,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
             <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
                 css-class="custom-table-column" />
@@ -45,15 +48,27 @@
 </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, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPager,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -62,7 +77,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -73,7 +88,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -89,9 +104,64 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_DATA = gql`
+  query daftarKeluhanBerdasarkanMedia(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+    $media: String!
+  ) {
+    daftarKeluhanBerdasarkanMedia(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      media: $media
+    ) {
+      alamat_pelapor
+      durasi_recovery_time
+      durasi_response_time
+      id_keluhan
+      idpel_nometer
+      keterangan_pelapor
+      media
+      nama_pelapor
+      no_laporan
+      no_telp_pelapor
+      posko
+      status_akhir
+      waktu_recovery
+      waktu_response
+    }
+  }
+`
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_DATA, {
+        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    })
 
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-3'
     })

src/components/Pages/Keluhan/Table_27.vue

@@ -13,7 +13,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
             <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Contact Center"
                 css-class="custom-table-column" />
@@ -46,15 +49,27 @@
 </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, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPager,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -63,7 +78,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -74,7 +89,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -90,9 +105,65 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_DATA = gql`
+ query daftarKeluhanDiselesaikanCC123
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    daftarKeluhanDiselesaikanCC123
+(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        id_keluhan!
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        no_laporan
+        no_telp_pelapor
+        posko
+        status_akhir!
+        waktu_recovery
+        waktu_response
+        }
+        }
+`
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_DATA, {
+        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0,
+        media: 'Twitter'
+    })
 
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-3'
     })

src/components/Pages/Keluhan/Table_28.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-            :word-wrap-enabled="true">
+      column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -12,7 +12,7 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+      <DxColumn :width="170" alignment="center" data-field="posko" caption="Nama Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
           css-class="custom-table-column" />
@@ -24,15 +24,15 @@
           css-class="custom-table-column" />
         <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
           css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
           css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
           css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
           css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> SLA"
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption="> SLA"
           css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA"
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤ SLA"
           css-class="custom-table-column" />
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
@@ -47,21 +47,31 @@
         <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA"
           css-class="custom-table-column" />
       </DxColumn>
-
     </DxDataGrid>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -70,7 +80,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-            indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -81,7 +91,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -97,9 +107,72 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_DATA = gql`
+query rekapitulasiKeluhanAll
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+  rekapitulasiKeluhanAll
+(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        avg_durasi_dispatch
+        avg_durasi_recovery
+        avg_durasi_response
+        id_uid
+        id_up3
+        max_durasi_dispatch
+        max_durasi_recovery
+        max_durasi_response
+        min_durasi_dispatch
+        min_durasi_recovery
+        min_durasi_response
+        persen_inproses
+        persen_selesai
+        posko
+        total
+        total_diatas_sla_dispatch
+        total_diatas_sla_recovery
+        total_diatas_sla_response
+        total_dibawah_sla_dispatch
+        total_dibawah_sla_recovery
+        total_dibawah_sla_response
+        total_inproses
+        total_selesai
+        }
+}`
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
   const filters = useFiltersStore()
+  const { onResult, onError } = useQuery(GET_DATA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+  })
 
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiKeluhanAll
+      loadingVisible.value = false
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
   filters.setConfig({
     type: 'type-3',
     reportButton: true

src/components/Pages/Keluhan/Table_29.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
@@ -12,7 +12,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Fungsi Bidang"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -67,21 +70,31 @@
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
-
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -90,7 +103,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -101,7 +114,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -117,9 +130,72 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_DATA = gql`
+query rekapitulasiKeluhanPerFungsiBidang
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiKeluhanPerFungsiBidang
+(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        avg_durasi_dispatch
+        avg_durasi_recovery
+        avg_durasi_response
+        id_uid
+        id_up3
+        max_durasi_dispatch
+        max_durasi_recovery
+        max_durasi_response
+        min_durasi_dispatch
+        min_durasi_recovery
+        min_durasi_response
+        persen_inproses
+        persen_selesai
+        posko
+        total
+        total_diatas_sla_dispatch
+        total_diatas_sla_recovery
+        total_diatas_sla_response
+        total_dibawah_sla_dispatch
+        total_dibawah_sla_recovery
+        total_dibawah_sla_response
+        total_inproses
+        total_selesai
+        }
+}`
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_DATA, {
+        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    })
 
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiKeluhanPerFungsiBidang
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-13',
         reportButton: true

src/components/Pages/Keluhan/Table_30.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
@@ -12,8 +12,11 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="" caption="Jenis Keluhan"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="tipe_permasalahan" caption="Jenis Keluhan"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                 <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
@@ -73,7 +76,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'
@@ -82,6 +85,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -117,9 +122,72 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+
+const data = ref<any[]>([])
+const GET_DATA = gql`
+query rekapitulasiKeluhanPerJenisKeluhan
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiKeluhanPerJenisKeluhan
+(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+            avg_durasi_dispatch
+            avg_durasi_recovery
+            avg_durasi_response
+            max_durasi_dispatch
+            max_durasi_recovery
+            max_durasi_response
+            min_durasi_dispatch
+            min_durasi_recovery
+            min_durasi_response
+            persen_inproses
+            persen_selesai
+            tipe_permasalahan
+            total
+            total_diatas_sla_dispatch
+            total_diatas_sla_recovery
+            total_diatas_sla_response
+            total_dibawah_sla_dispatch
+            total_dibawah_sla_recovery
+            total_dibawah_sla_response
+            total_inproses
+            total_selesai
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_DATA, {
+        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+    })
 
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
+                ;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-3'
     })

src/components/Pages/Keluhan/Table_31.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
@@ -12,7 +12,10 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Kelompok Keluhan"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -73,7 +76,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'
@@ -82,6 +85,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -117,9 +122,72 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+
+const data = ref<any[]>([])
+const GET_DATA = gql`
+query rekapitulasiKeluhanPerKelompokKeluhan
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiKeluhanPerKelompokKeluhan
+(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+            avg_durasi_dispatch
+            avg_durasi_recovery
+            avg_durasi_response
+            max_durasi_dispatch
+            max_durasi_recovery
+            max_durasi_response
+            min_durasi_dispatch
+            min_durasi_recovery
+            min_durasi_response
+            persen_inproses
+            persen_selesai
+            tipe_permasalahan
+            total
+            total_diatas_sla_dispatch
+            total_diatas_sla_recovery
+            total_diatas_sla_response
+            total_dibawah_sla_dispatch
+            total_dibawah_sla_recovery
+            total_dibawah_sla_response
+            total_inproses
+            total_selesai
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_DATA, {
+        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+    })
 
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
+                ;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-13',
         reportButton: true

src/components/Pages/Keluhan/Table_32.vue

@@ -1,87 +1,225 @@
 <template>
   <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+    <DxDataGrid
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      class="max-h-[calc(100vh-140px)]"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      :show-column-lines="true"
-            :word-wrap-enabled="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 :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" data-field="" caption="NO" css-class="custom-table-column" />
+      <DxColumn
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tanggal Lapor"
+        :width="50"
-                css-class="custom-table-column" />
+        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"
+        <DxColumn
-                    css-class="custom-table-column" />
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="150"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field=""
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="150"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field=""
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="150"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field=""
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+            data-type="number"
-                        css-class="custom-table-column" />
+            caption="Total"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+            css-class="custom-table-column"
-                        css-class="custom-table-column" />
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="150"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field=""
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="150"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field=""
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+            data-type="number"
-                        css-class="custom-table-column" />
+            caption="Total"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+            css-class="custom-table-column"
-                        css-class="custom-table-column" />
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="150"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field=""
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
-
     </DxDataGrid>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -90,7 +228,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-            indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -101,7 +239,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -117,9 +255,71 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_DATA = gql`
+  query rekapitulasiKeluhanPerTanggal(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+  ) {
+    rekapitulasiKeluhanPerTanggal(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+      avg_durasi_dispatch
+      avg_durasi_recovery
+      avg_durasi_response
+      id_uid
+      id_up3
+      max_durasi_dispatch
+      max_durasi_recovery
+      max_durasi_response
+      min_durasi_dispatch
+      min_durasi_recovery
+      min_durasi_response
+      persen_inproses
+      persen_selesai
+      tanggal
+      total
+      total_diatas_sla_dispatch
+      total_diatas_sla_recovery
+      total_diatas_sla_response
+      total_dibawah_sla_dispatch
+      total_dibawah_sla_recovery
+      total_dibawah_sla_response
+      total_inproses
+      total_selesai
+    }
+  }
+`
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
   const filters = useFiltersStore()
+  const { onResult, onError } = useQuery(GET_DATA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+  })
 
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
+      loadingVisible.value = false
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
   filters.setConfig({
     type: 'type-13',
     reportButton: true

src/components/Pages/Keluhan/Table_33.vue

@@ -1,86 +1,224 @@
 <template>
   <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+    <DxDataGrid
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      class="max-h-[calc(100vh-140px)]"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      :show-column-lines="true"
-            :word-wrap-enabled="true">
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <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
-            <DxColumn :width="170" alignment="center" data-field="" caption="Unit" css-class="custom-table-column" />
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+        caption="NO"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Unit"
+        css-class="custom-table-column"
+      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+        <DxColumn
-                    css-class="custom-table-column" />
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="150"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field=""
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="150"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field=""
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="150"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field=""
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+            data-type="number"
-                        css-class="custom-table-column" />
+            caption="Total"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+            css-class="custom-table-column"
-                        css-class="custom-table-column" />
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="150"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field=""
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="150"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field=""
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+            data-type="number"
-                        css-class="custom-table-column" />
+            caption="Total"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+            css-class="custom-table-column"
-                        css-class="custom-table-column" />
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="150"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field=""
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
-
     </DxDataGrid>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -89,7 +227,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-            indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -100,7 +238,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -116,9 +254,71 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_DATA = gql`
+  query rekapitulasiKeluhanPerUnit(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+  ) {
+    rekapitulasiKeluhanPerUnit(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+      avg_durasi_dispatch
+      avg_durasi_recovery
+      avg_durasi_response
+      id_uid
+      id_up3
+      max_durasi_dispatch
+      max_durasi_recovery
+      max_durasi_response
+      min_durasi_dispatch
+      min_durasi_recovery
+      min_durasi_response
+      persen_inproses
+      persen_selesai
+      posko
+      total
+      total_diatas_sla_dispatch
+      total_diatas_sla_recovery
+      total_diatas_sla_response
+      total_dibawah_sla_dispatch
+      total_dibawah_sla_recovery
+      total_dibawah_sla_response
+      total_inproses
+      total_selesai
+    }
+  }
+`
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
   const filters = useFiltersStore()
+  const { onResult, onError } = useQuery(GET_DATA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+  })
 
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiKeluhanPerUnit
+      loadingVisible.value = false
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
   filters.setConfig({
     type: 'type-8',
     reportButton: true

src/components/Pages/Keluhan/Table_34.vue

@@ -12,7 +12,8 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO" css-class="custom-table-column" />
       <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
         <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
@@ -26,21 +27,31 @@
         <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
           css-class="custom-table-column" />
       </DxColumn>
-
     </DxDataGrid>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -49,7 +60,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-            indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -60,7 +71,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -76,9 +87,80 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_DATA = gql`
+  query rekapitulasiKeluhanBerdasarkanMedia(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+  ) {
+    rekapitulasiKeluhanBerdasarkanMedia(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+      media
+      tgl1
+      tgl10
+      tgl11
+      tgl12
+      tgl13
+      tgl14
+      tgl15
+      tgl16
+      tgl17
+      tgl18
+      tgl19
+      tgl2
+      tgl20
+      tgl21
+      tgl22
+      tgl23
+      tgl24
+      tgl25
+      tgl26
+      tgl27
+      tgl28
+      tgl29
+      tgl3
+      tgl30
+      tgl31
+      tgl4
+      tgl5
+      tgl6
+      tgl7
+      tgl8
+      tgl9
+    }
+  }
+`
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
   const filters = useFiltersStore()
+  const { onResult, onError } = useQuery(GET_DATA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+  })
 
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
+      loadingVisible.value = false
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
   filters.setConfig({
     type: 'type-3'
   })

src/components/Pages/Keluhan/Table_35.vue

@@ -12,7 +12,8 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -63,7 +64,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -72,6 +73,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -107,9 +110,67 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+
+const data = ref<any[]>([])
+const GET_DATA = gql`
+query rekapitulasiKeluhanRatingPerUnit
+(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiKeluhanRatingPerUnit
+(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        in_process 
+        indeks_rating 
+        jumlah_non_rating 
+        jumlah_rating 
+        nama_posko      
+        persen_in_process 
+        persen_non_rating 
+        persen_rating 
+        persen_selesai 
+        rating_1 
+        rating_2 
+        rating_3 
+        rating_4 
+        rating_5 
+        regu        
+        selesai 
+        total 
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_DATA, {
+        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+    })
 
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-8',
         reportButton: true

src/components/Select.vue

@@ -1,114 +1,110 @@
 <script setup lang="ts">
-  interface DataItem {
+interface DataItem {
   id: number;
-    value: string;
+  name: string;
-  }
+}
 
-  import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
-  import {
+import {
   Combobox,
   ComboboxInput,
   ComboboxButton,
   ComboboxOptions,
   ComboboxOption,
   TransitionRoot
-  } from '@headlessui/vue'
+} from '@headlessui/vue'
-  import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
+import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
 
-  const props = defineProps({
+const props = defineProps({
   placeholder: {
     type: String,
-      default: ''
+    default: '0'
   },
   data: {
     type: Array as () => DataItem[],
     default: []
+  },
+  selected: {
+    type: Object as () => DataItem,
+    default: () => ({ id: 0, name: '' })
   }
-  })
+})
+const emit = defineEmits(["update:selected"])
 
-  const data: DataItem[] = [
+const data = computed(() => [{ id:0, name: props.placeholder }, ...props.data]);
-    {id: 0, value: props.placeholder},
-    ...props.data
-  ]
 
-  let selected = ref(data[0])
+computed(() => {
-  let query = ref('')
+  if (props.selected.id === 0) {
+    selected.value = { id:0, name: props.placeholder }
+  }
 
-  let filteredData = computed(() =>
+  console.log('selected', selected.value.name);
+  
+})
+
+watch(() => props.selected, (value) => {
+  if (value.id === 0) {
+    selected.value = { id:0, name: props.placeholder }
+  }
+})
+
+
+let selected = ref<DataItem>(data.value[0])
+let query = ref('')
+let filteredData = computed(() =>
   query.value === ''
-      ? data
+    ? data.value
-      : data.filter((item: DataItem) =>
+    : data.value.filter((item: DataItem) =>
-          item.value
+      item.name
         .toLowerCase()
         .replace(/\s+/g, '')
         .includes(query.value.toLowerCase().replace(/\s+/g, ''))
     )
-  )
+)
+
+const show = ref(false)
+
 
-  const show = ref(false)
 </script>
 
 <template>
-  <Combobox v-model="selected" v-slot="{ open }">
+  <Combobox  
+  @update:modelValue="value => emit('update:selected', value)"
+  v-model="selected" v-slot="{ open }">
     <div class="relative mt-1">
       <div
-        class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm"
+        class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
-      >
+        <ComboboxInput class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
-        <ComboboxInput
+          :displayValue="(item: any) => (show || open ? '' : item.name)" @change="query = $event.target.value"
-          class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
+          @click="show = true" @blur="show = false" defaultValue="" />
-          :displayValue="(item: any) => (show || open ? '' : item.value)"
-          @change="query = $event.target.value"
-          @click="show = true"
-          @blur="show = false"
-          defaultValue="sasa"
-        />
 
-        <ComboboxButton id="Test" class="absolute inset-y-0 right-0 flex items-center pr-2">
+        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
           <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
         </ComboboxButton>
       </div>
-      <TransitionRoot
+      <TransitionRoot :show="show || open" 
-        :show="show || open"
+      
-        leave="transition ease-in duration-100"
+      leave="transition ease-in duration-100" leaveFrom="opacity-100"
-        leaveFrom="opacity-100"
+        leaveTo="opacity-0" @after-leave="query = ''">
-        leaveTo="opacity-0"
+        <ComboboxOptions static
-        @after-leave="query = ''"
+          class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-      >
+          <div v-if="filteredData.length === 0 && query !== ''"
-        <ComboboxOptions
+            class="relative cursor-default select-none py-2 px-4 text-gray-700">
-          class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
-        >
-          <div
-            v-if="filteredData.length === 0 && query !== ''"
-            class="relative cursor-default select-none py-2 px-4 text-gray-700"
-          >
             Nothing found.
           </div>
         
-          <ComboboxOption
+          <ComboboxOption v-for="item in filteredData" 
-            v-for="item in filteredData"
+          as="template" :key="item.id" :value="item"
-            as="template"
+            v-slot="{ selected, active }">
-            :key="item.id"
+            <li class="relative cursor-default select-none py-2 pl-10 pr-4" :class="{
-            :value="item"
-            v-slot="{ selected, active }"
-          >
-            <li
-              class="relative cursor-default select-none py-2 pl-10 pr-4"
-              :class="{
               'bg-teal-600 text-white': active,
               'text-gray-900': !active
-              }"
+            }">
-            >
+              <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
-              <span
+                {{ item.name }}
-                class="block truncate"
-                :class="{ 'font-medium': selected, 'font-normal': !selected }"
-              >
-                {{ item.value }}
               </span>
-              <span
+              <span v-if="selected"  class="absolute inset-y-0 left-0 flex items-center pl-3"
-                v-if="selected"
+                :class="{ 'text-white': active, 'text-teal-600': !active }">
-                class="absolute inset-y-0 left-0 flex items-center pl-3"
-                :class="{ 'text-white': active, 'text-teal-600': !active }"
-              >
                 <CheckIcon class="h-5 w-5" aria-hidden="true" />
               </span>
             </li>

src/components/SelectMulti.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+interface DataItem {
+  id: number;
+  name: string;
+}
+
+import { ref, computed, onMounted } from 'vue'
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot
+} from '@headlessui/vue'
+import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  data: {
+    type: Array as () => DataItem[],
+    default: []
+  }
+})
+const emit = defineEmits(["update:selected"])
+
+const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data]);
+
+let selected = ref<DataItem[]>([data.value[0]])
+let query = ref('')
+let filteredData = computed(() =>
+  query.value === ''
+    ? data.value
+    : data.value.filter((item: DataItem) =>
+      item.name
+        .toLowerCase()
+        .replace(/\s+/g, '')
+        .includes(query.value.toLowerCase().replace(/\s+/g, ''))
+    )
+)
+
+const show = ref(false)
+ const removeJenis = (item: DataItem) => {
+    selected.value = selected.value.filter((i) => i.id !== item.id)
+  }
+onMounted(() => {
+})
+
+
+</script>
+
+<template>
+  <Combobox @update:modelValue="value => emit('update:selected', value)" v-model="selected" v-slot="{ open }" multiple="">
+    <div class="relative mt-1">
+      
+      <div
+        class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
+        <ComboboxInput class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
+          :displayValue="(item: any) => (show || open ? '' : item.name)" @change="query = $event.target.value"
+          @click="show = true" @blur="show = false" defaultValue="" />
+
+        <ComboboxButton id="Test" class="absolute inset-y-0 right-0 flex items-center pr-2">
+          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+        </ComboboxButton>
+      </div>
+      <span class="block flex flex-wrap gap-2">
+        <span v-if="selected.length == 0" class="p-0.5">Empty</span>
+        <span v-for="item in selected" :key="item.id" class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
+          <span>{{ item.name }}</span>
+          <svg class="h-4 w-4 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg" @click.stop.prevent="removeJenis(item)">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </span>
+      </span>
+      <TransitionRoot :show="show || open" leave="transition ease-in duration-100" leaveFrom="opacity-100"
+        leaveTo="opacity-0" @after-leave="query = ''">
+        <ComboboxOptions static
+          class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+          <div v-if="filteredData.length === 0 && query !== ''"
+            class="relative cursor-default select-none py-2 px-4 text-gray-700">
+            Nothing found.
+          </div>
+
+          <ComboboxOption v-for="item in filteredData" as="template" :key="item.id" :value="item"
+            v-slot="{ selected, active }">
+            <li class="relative cursor-default select-none py-2 pl-10 pr-4" :class="{
+              'bg-teal-600 text-white': active,
+              'text-gray-900': !active
+            }">
+              <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                {{ item.name }}
+              </span>
+              <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3"
+                :class="{ 'text-white': active, 'text-teal-600': !active }">
+                <CheckIcon class="h-5 w-5" aria-hidden="true" />
+              </span>
+            </li>
+          </ComboboxOption>
+        </ComboboxOptions>
+      </TransitionRoot>
+    </div>
+  </Combobox>
+</template>

src/main.ts

@@ -1,20 +1,20 @@
 // import 'devextreme/dist/css/dx.material.blue.light.compact.css'
 import '@lottiefiles/lottie-player'
 import '@/assets/css/main.css'
-import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import { createApolloProvider } from '@vue/apollo-option'
-import { apolloClient } from './utils/graphql'
 import App from './App.vue'
 import router from './router'
+import { createApp, provide, h } from 'vue'
+import { DefaultApolloClient } from '@vue/apollo-composable'
+import { apolloClient } from './utils/graphql'
 
-const app = createApp(App)
+const app = createApp({
-
+  setup() {
-const apolloProvider = createApolloProvider({
+    provide(DefaultApolloClient, apolloClient())
-    defaultClient: apolloClient,
+  },
-});
+  render: () => h(App),
+})
 
 app.use(createPinia())
-app.use(apolloProvider)
 app.use(router)
 app.mount('#app')

src/stores/date.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useDateStore = defineStore('date', () => {
+    const dateValue = ref('')
+    const setDateValue = (value: string) => {
+        dateValue.value = value
+    }
+    const getDateValue = () => {
+        return dateValue.value;
+    }
+    return {
+        setDateValue,
+        getDateValue,
+    }
+})

src/stores/filters.ts

@@ -19,6 +19,7 @@ import {
   Type15,
   Type16,
   Type17,
+  Type18
 } from '@/components/Form/FiltersType'
 
 const test1: { [key: string]: any } = {
@@ -38,7 +39,8 @@ const test1: { [key: string]: any } = {
   'type-14': Type14,
   'type-15': Type15,
   'type-16': Type16,
-  'type-17': Type17
+  'type-17': Type17,
+  'type-18': Type18
 }
 
 const getFilters = (type: string): VueElement => {

src/stores/filtersAction.ts

@@ -0,0 +1,9 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+
+export const useSearchStore = defineStore('dateTest', () => {
+    return {
+       isTriggerChange: ref(false),
+    }
+})

src/stores/media.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useMediaStore = defineStore('media', () => {
+    const media = ref('')
+    const setData = (value: string) => {
+        media.value = value
+    }
+    const getData = () => {
+        return media.value
+    }
+    return {
+        setData,
+        getData,
+    }
+})

src/stores/posts.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const usePostsStore = defineStore('posts', () => {
+    const posts = ref('')
+    const setData = (value: string) => {
+        posts.value = value
+    }
+    const getData = () => {
+        return posts.value
+    }
+    return {
+        setData,
+        getData,
+    }
+})

src/stores/queries.ts

@@ -1,7 +1,7 @@
 import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 import gql from 'graphql-tag'
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@vue/apollo-composable'
 
 export const useQueryStore = defineStore('query', () => {
     const getUser = useQuery(gql`

src/stores/region.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useRegionStore = defineStore('region', () => {
+    const region = ref()
+    const setData = (value: Number) => {
+        region.value = value
+    }
+    const getData = () => {
+        return region.value
+    }
+    return {
+        setData,
+        getData,
+    }
+})

src/stores/totalDuration.ts

@@ -0,0 +1,25 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useTotalDuration = defineStore('totalDuration', () => {
+    const totalMin = ref(1)
+    const totalMax = ref(1)
+    const setDataMin = (value: any) => {
+        totalMin.value = value
+    }
+    const getDataMin = () => {
+        return totalMin.value
+    }
+    const setDataMax = (value: any) => {
+        totalMax.value = value
+    }
+    const getDataMax = () => {
+        return totalMax.value
+    }
+    return {
+        setDataMin,
+        getDataMin,
+        setDataMax,
+        getDataMax,
+    }
+})

src/stores/totalReport.ts

@@ -0,0 +1,25 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useTotalReport = defineStore('totalReport', () => {
+    const totalMin = ref(1)
+    const totalMax = ref(1)
+    const setDataMin = (value: any) => {
+        totalMin.value = value
+    }
+    const getDataMin = () => {
+        return totalMin.value
+    }
+    const setDataMax = (value: any) => {
+        totalMax.value = value
+    }
+    const getDataMax = () => {
+        return totalMax.value
+    }
+    return {
+        setDataMin,
+        getDataMin,
+        setDataMax,
+        getDataMax,
+    }
+})

src/stores/ulp.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useUlpStore = defineStore('ulp', () => {
+    const ulp = ref()
+    const setData = (value: number) => {
+        ulp.value = value
+    }
+    const getData = () => {
+        return ulp.value
+    }
+    return {
+        setData,
+        getData,
+    }
+})

src/stores/up3.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useUp3Store = defineStore('up3', () => {
+    const up3 = ref()
+    const setData = (value: number) => {
+        up3.value = value
+    }
+    const getData = () => {
+        return up3.value
+    }
+    return {
+        setData,
+        getData,
+    }
+})

src/utils/graphql.ts

@@ -1,16 +1,24 @@
 import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
 
-// HTTP connection to the API
+export const apolloClient = () => {
-const httpLink = createHttpLink({
-    // You should use an absolute URL here
-    uri: 'http://localhost:3020/graphql',
-})
 
-// Cache implementation
+  const httpLink =  createHttpLink({
-const cache = new InMemoryCache()
+    uri: 'http://10.8.0.13:8080/graphql',
+    credentials: 'include', // Include credentials for cross-origin requests
+  });
 
-// Create the apollo client
+
-export const apolloClient = new ApolloClient({
+  const apolloClient = new ApolloClient({
+    cache: new InMemoryCache(),
     link: httpLink,
-    cache,
+    headers: {
-})
+      Accept: 'application/json',
+      'Accept-Encoding': 'gzip, deflate',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+      'Content-Type': 'application/json',
+      // Add other headers as needed
+    },
+  });
+  return apolloClient;
+}

src/utils/network.ts

@@ -0,0 +1,16 @@
+import axios from "axios";
+
+const instance = axios.create({
+    baseURL: 'http://localhost:8443'
+});
+
+
+const getUid = async () => await instance.get('/uid');
+const getMedia = async() => await instance.get('/media');
+const getJenisTransaksi = async() => await instance.get('/jenisTransaksi');
+const getUp3 = async (
+    uid: number,
+) => await instance.get('/up3?uid=' + uid);
+const getUlp = async (up3: number) => await instance.get('/ulp?up3=' + up3);
+const getPosko = async (uppp: number) => await instance.get('/posko?up3=' + uppp);
+export { getUid, getUp3, getPosko,getUlp,getMedia,getJenisTransaksi };