Merge branch 'IntegrationTableWithFilter' of https://github.com/defuj/eis into development

.github/workflows/docker-image-development.yml

@@ -11,7 +11,7 @@ jobs:
   build:
 
     runs-on: ubuntu-latest
-    if: contains(github.event.head_commit.message, 'build image')
+    if: ${{github.event.head_commit.message}} == *'build image'*
 
     steps:
 
@@ -24,5 +24,5 @@ jobs:
     - uses: actions/checkout@v3
     - name: Build the Docker image
       run: | 
-          docker build . -t defuj/apkt-eis:v1.0.0-dev
-          docker push defuj/apkt-eis:v1.0.0-dev
+          docker build . -t defuj/apkt-eis:v1.0.1-dev
+          docker push defuj/apkt-eis:v1.0.1-dev

.github/workflows/docker-image-release.yml

@@ -11,7 +11,7 @@ jobs:
   build:
 
     runs-on: ubuntu-latest
-    if: contains(github.event.head_commit.message, 'build image')
+    if: ${{github.event.head_commit.message}} == *'build image'*
 
     steps:
     - uses: actions/checkout@v3
@@ -24,7 +24,7 @@ jobs:
     - name: Build the Docker image
       run: | 
           docker build . -t defuj/apkt-eis
-          docker image tag defuj/apkt-eis defuj/apkt-eis:v1.0.0-release
-          docker push defuj/apkt-eis:v1.0.0-release
+          docker image tag defuj/apkt-eis defuj/apkt-eis:v1.0.1-release
+          docker push defuj/apkt-eis:v1.0.1-release
 
     

deployment.yaml

@@ -14,7 +14,7 @@ spec:
    spec:
      containers:
      - name: apkt-eis
-       image: defuj/apkt-eis:v1.0.0-dev
+       image: defuj/apkt-eis:v0.0.22-dev
        ports:
        - containerPort: 80
 ---

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",
@@ -71,4 +77,4 @@
     "vitest": "^0.34.6",
     "vue-tsc": "^1.6.5"
   }
-}
+}

src/assets/css/style.css

@@ -1502,6 +1502,10 @@ body {
   gap: 0.25rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .gap-3 {
   gap: 0.75rem;
 }
@@ -1719,6 +1723,11 @@ body {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.bg-blue-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1894,6 +1903,14 @@ body {
      object-fit: contain;
 }
 
+.p-0 {
+  padding: 0px;
+}
+
+.p-0\.5 {
+  padding: 0.125rem;
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -2191,6 +2208,11 @@ body {
   color: rgb(96 165 250 / var(--tw-text-opacity));
 }
 
+.text-blue-700 {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity));
+}
+
 .text-dark {
   --tw-text-opacity: 1;
   color: rgb(21 22 23 / var(--tw-text-opacity));
@@ -2433,6 +2455,10 @@ body {
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
 }
 
+.ring-blue-700\/10 {
+  --tw-ring-color: rgb(29 78 216 / 0.1);
+}
+
 .ring-gray-300 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));

src/components/Button.vue

@@ -6,10 +6,6 @@ const props = defineProps({
     type: String as () => 'button' | 'submit' | 'reset',
     default: 'button'
   },
-  onClick: {
-    type: Function as unknown as () => (payload: MouseEvent) => void,
-    default: () => {}
-  },
   label: {
     type: String,
     default: ''
@@ -47,12 +43,14 @@ const buttonStyle = computed(() => {
       return 'bg-none text-primary-500 border border-transparent hover:border-primary-500 rounded-lg disabled:border-primary-300 disabled:text-primary-300'
   }
 })
+
+const emit = defineEmits(['on:click'])
 </script>
 
 <template>
   <button
     :type="type"
-    @click="onClick"
+    @click="emit('on:click')"
     :disabled="isLoading ? true : disabled"
     :class="['px-3 py-2 text-sm font-semibold', buttonStyle, className]"
   >

src/components/DatePicker.vue

@@ -1,25 +1,32 @@
 <script setup lang="ts">
-  import { PhCalendarBlank } from '@phosphor-icons/vue';
-  import { ref } from 'vue'
-  import VueTailwindDatepicker from 'vue-tailwind-datepicker'
-  
+// import { useDateStore } from '@/stores/date';
+import { PhCalendarBlank } from '@phosphor-icons/vue'
+import { ref, watch } from 'vue'
+
+import VueTailwindDatepicker from 'vue-tailwind-datepicker'
 
 const dateValue = ref('')
 const formatter = ref({
-  date: 'DD MMM YYYY',
-  month: 'MMM'
+  date: 'DD-MM-YYYY',
+  month: 'MMMM'
+})
+
+const emit = defineEmits(['update:dateValue'])
+
+watch(dateValue, (newValue) => {
+  emit('update:dateValue', newValue)
 })
 </script>
 
 <template>
   <div class="flex">
-    <vue-tailwind-datepicker 
+    <vue-tailwind-datepicker
       v-model="dateValue"
       :formatter="formatter"
-      separator="   s/d   "
+      separator=" s/d "
       :shortcuts="false"
       :auto-apply="false"
-      as-single 
+      as-single
       use-range
       v-slot="{ value, placeholder }"
     >
@@ -32,10 +39,10 @@ const formatter = ref({
             <span class="text-gray-900">
               {{ value || placeholder }}
             </span>
-            <PhCalendarBlank size="18" weight="regular"/>
+            <PhCalendarBlank size="18" weight="regular" />
           </button>
         </div>
       </div>
     </vue-tailwind-datepicker>
   </div>
-</template>
+</template>

src/components/Form/Filters.vue

@@ -1,44 +1,52 @@
+<!-- ss -->
 <script setup lang="ts">
-  // components
-  import Button from '@/components/Button.vue';
+// components
+import Button from '@/components/Button.vue'
+import { useSearchStore } from '@/stores/filtersAction'
 
-  // icons
-  import {
-    PhArrowsCounterClockwise, 
-    PhFileText,
-    PhMagnifyingGlass 
-  } from '@phosphor-icons/vue';
+// icons
+import { PhArrowsCounterClockwise, PhFileText, PhMagnifyingGlass } from '@phosphor-icons/vue'
+const cariButton = useSearchStore()
+defineProps({
+  reportButton: {
+    type: Boolean,
+    default: false
+  }
+})
 
-  defineProps({
-    reportButton: {
-      type: Boolean,
-      default: false
-    }
-  })
+const emit = defineEmits(['runSearch'])
 </script>
 
 <template>
   <div class="filters rounded-2xl">
-
     <form class="filter-body bg-gray-50 mx-auto space-y-3 p-4 rounded-t-2xl">
       <slot></slot>
     </form>
-    
+
     <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>
 
-        <Button v-if="reportButton" label="Lihat Laporan" style-type="outline" class-name="bg-white">
+        <Button
+          v-if="reportButton"
+          label="Lihat Laporan"
+          style-type="outline"
+          class-name="bg-white"
+        >
           <PhFileText size="18" class="ml-1" weight="regular" />
         </Button>
 
-        <Button label="Cari Data">
+        <Button @on:click="() => emit('runSearch')" label="Cari Data">
           <PhMagnifyingGlass size="18" class="ml-1" weight="regular" />
         </Button>
       </div>
     </div>
-    
   </div>
-</template>
+</template>

src/components/Form/FiltersType/Type1.vue

@@ -1,13 +1,68 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import { onMounted, ref, watch } from 'vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsPosko
+} from './reference'
+
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+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 emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: posko.value,
+  periode: ''
+})
+
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
+
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  uppp.value = { id: 0, name: uppPlaceholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  uppp.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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>
+    <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 :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -15,18 +70,20 @@
       >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 />
+    <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type10.vue

@@ -1,13 +1,73 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+ 
+import { onMounted, ref, watch } from 'vue'
+import {
+  selectedUid,
+  selectedUp3Ulp,
+  selectedUlp,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsUlp
+} from './reference'
+
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InputNumber from '@/components/Form/InputNumber.vue'
+
+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 emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  minJmlLapor: 1,
+  maxJmlLapor: 1
+})
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: 0, name: ulpPlaceholder };
+  data.value.up3 = value;
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(value);
+  data.value.posko = value;
+};
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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="itemsUid"
+      :placeholder="uidPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -15,7 +75,11 @@
       >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">
@@ -23,22 +87,33 @@
       >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 Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </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">Lapor Ulang:</label>
 
     <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-      <Select placeholder="1" />
+      <InputNumber @update:time-value="(value) => {
+        data.minJmlLapor = value
+      }" />
       <small class="flex items-center">s/d</small>
-      <Select placeholder="2" />
+      <InputNumber  @update:time-value="(value) => {
+        data.maxJmlLapor = value
+      }" />
     </div>
   </div>
 </template>

src/components/Form/FiltersType/Type11.vue

@@ -1,13 +1,99 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+  
+import { onMounted, ref, watch } from 'vue'
+import {
+  selectedUid,
+  selectedUp3Ulp,
+  selectedUlp,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsUlp
+} from './reference'
+
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InputNumber from '@/components/Form/InputNumber.vue'
+
+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 emit = defineEmits(['update:filters'])
+const sla = [
+  {
+    id: 1,
+    name: 'Dibawah  / Sesuai SLA (<= 45 menit)'
+  },
+  {
+    id: 2,
+    name: 'Melebihi SLA (> 45 menit)'
+  }
+];
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  minDurasiRecoveryTime: 1,
+  maxDurasiRecoveryTime: 1
+})
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: 0, name: ulpPlaceholder };
+  data.value.up3 = value;
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(value);
+  data.value.posko = value;
+};
+const triggerInput = ref(false)
+const changeDuration = (value: any) => {
+  if (value.id === 0) {
+    console.log('Durasi Menit')
+    data.value.minDurasiRecoveryTime = 0
+    data.value.maxDurasiRecoveryTime = 5
+    triggerInput.value = false
+  } else if (value.id === 1) {
+    data.value.minDurasiRecoveryTime = 0
+    data.value.maxDurasiRecoveryTime = 45
+    console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
+    triggerInput.value = true
+  } else {
+    data.value.minDurasiRecoveryTime = 46
+    data.value.maxDurasiRecoveryTime = 99999 * 60 * 24
+    triggerInput.value = true
+    console.log('Melebihi SLA (> 45 menit)')
+  }
+
+}
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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="itemsUid" 
+      :placeholder="uidPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -15,7 +101,11 @@
       >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">
@@ -23,25 +113,50 @@
       >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 Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </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">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
-      <Select placeholder="Durasi Menit" />
+      <Select 
+        @update:selected="changeDuration($event)" 
+        :data="sla" 
+        placeholder="Durasi Menit"
+      />
 
       <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-        <Select placeholder="1" />
+        <InputWithSuffix 
+          @update:minute-value="
+          (value :any)=> {
+            data.minDurasiRecoveryTime =value
+          }
+          "
+        @value="data.minDurasiRecoveryTime"
+        :disabled=triggerInput />
         <small class="flex items-center">s/d</small>
-        <Select placeholder="2" />
+        <InputWithSuffix 
+          @update:minute-value="
+          (value :any)=> {
+            data.maxDurasiRecoveryTime = value
+          }
+          "
+        @value="data.maxDurasiRecoveryTime"
+        :disabled="triggerInput" />
       </div>
     </div>
   </div>

src/components/Form/FiltersType/Type12.vue

@@ -2,13 +2,55 @@
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
   import InputWithSuffix from '../InputWithSuffix.vue';
+  import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
+import { onMounted, ref } from 'vue';
+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 emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: ''
+})
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: 0, name: ulpPlaceholder };
+  data.value.up3 = value;
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(value);
+  data.value.posko = value;
+};
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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="itemsUid"
+      :placeholder="uidPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -16,7 +58,11 @@
       >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">
@@ -24,13 +70,20 @@
       >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 Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type13.vue

@@ -1,41 +1,82 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
-  import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+import { selectedUid, selectedUp3Ulp, selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
+import { onMounted, ref } from 'vue';
+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 emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  group: 1
+})
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: 0, name: ulpPlaceholder };
+  data.value.up3 = value;
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(value);
+  data.value.posko = value;
+};
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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="itemsUid" :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"
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">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"
-      >Unit Layanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">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 Tanggal:</label>
 
-    <DatePicker />
+    <DatePicker @update:date-value="(value) => {
+      data.periode = value
+    }
+      " />
   </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">Group By Kode Unit Distribusi:</label>
 
-    <InlineRadioGroup :radio-items="[{id: 1, title: 'Tidak', checked: true}, {id: 2, title: 'Ya, Grupkan'}]" />
+    <InlineRadioGroup @update:group-value="(value) => {
+      data.group = value
+      console.log('data.group', value)
+    }" :radio-items="[{ id: 1, title: 'Tidak', checked: true }, { id: 2, title: 'Ya, Grupkan' }]" />
   </div>
 </template>

src/components/Form/FiltersType/Type14.vue

@@ -29,6 +29,9 @@
   <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 />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type15.vue

@@ -20,6 +20,9 @@
   <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 />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type16.vue

@@ -1,13 +1,81 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  fetchMedia,
+  itemsUid,
+  itemsUp3,
+  itemsPosko,
+  itemsMedia
+} from './reference'
+import { onMounted, ref, watch } from 'vue'
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const poskoPlaceholder = 'Semua Posko'
+const mediaPlaceholder = 'Semua Media'
+const up3 = ref({ id: 0, name: up3Placeholder })
+const uid = ref({ id: 0, name: uidPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
+const media = ref({ id: 0, name: mediaPlaceholder })
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: up3.value,
+  posko: posko.value,
+  media: media.value,
+  periode: ''
+})
+
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
+
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  up3.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+const setMedia = (value: any) => {
+  media.value = value
+  data.value.media = value
+}
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+  fetchMedia()
+})
 </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>
+    <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
+      :data="itemsUid"
+      @update:selected="setUid($event)"
+      :placeholder="uidPlaceholder"
+      :selected="uid"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -15,24 +83,45 @@
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select
+      :data="itemsUp3"
+      @update:selected="setUp3($event)"
+      :placeholder="up3Placeholder"
+      :selected="up3"
+    />
   </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
+      :data="itemsPosko"
+      @update:selected="setPosko($event)"
+      :placeholder="poskoPlaceholder"
+      :selected="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">Media:</label>
 
-    <Select placeholder="Semua Media" />
+    <Select
+      :selected="media"
+      @update:selected="setMedia($event)"
+      :placeholder="mediaPlaceholder"
+      :data="itemsMedia"
+    />
   </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 />
+    <DatePicker
+      @update:date-value="
+        (value) => {
+          data.periode = value
+        }
+      "
+    />
   </div>
 </template>

src/components/Form/FiltersType/Type17.vue

@@ -2,13 +2,20 @@
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
   import InputWithFilter from '../InputWithFilter.vue'
+  import { ref } from 'vue'
+  const data = ref({
+    periode: '',
+  })
 </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">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type18.vue

@@ -0,0 +1,49 @@
+<!-- <script setup lang="ts">
+import Select from '@/components/Select.vue'
+import SelectMulti from '@/components/SelectMulti.vue'
+
+import DatePicker from '@/components/DatePicker.vue'
+import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,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="itemsUid" 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="selectedUp3Posko($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> -->
+
+<template></template>

src/components/Form/FiltersType/Type2.vue

@@ -1,42 +1,119 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
+import Select from '@/components/Select.vue'
+import { selectedUid,  selectedUp3Ulp,fetchRegional, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
+import { onMounted, ref } from 'vue';
+import { getMonthName } from '@/utils/texts';
+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 bulanPlaceholder = getMonthName(new Date().getMonth());
+const tahunPlaceholder = new Date().getFullYear().toString();
+const bulanSelected = new Date().getMonth();
+const tahunSelected = new Date().getFullYear();
+const uppp = ref({ id: 0, name: up3Placholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: 0, name: ulpPlaceholder });
+const bulan = ref({ id: bulanSelected, name: bulanPlaceholder });
+const tahun = ref({ id: tahunSelected, name: tahunPlaceholder });
+const regional = ref({ id: 0, name: regionalPlaceholder });
+const emit = defineEmits(['update:filters'])
+// Find index of January
+const bulanIndex = months.findIndex(month => month.id === bulan.value.id);
+
+// Remove January if found
+if (bulanIndex !== -1) {
+  months.splice(bulanIndex, 1);
+}
+// Find index of current year
+const tahunIndex = years.value.findIndex(year => year.id === tahun.value.id);
+if (tahunIndex !== -1) {
+  years.value.splice(tahunIndex, 1);
+}
+const data = ref({
+  regional: regional.value,
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  bulan : bulan.value,
+  tahun : tahun.value
+})
+
+const setRegional = (value: any) => {
+  regional.value = value;
+  selectedUid(value);
+  uid.value = { id: 0, name: uidPlaceholder };
+  data.value.regional = value;
+  
+};
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value); 
+  uppp.value = { id: 0, name: up3Placholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: 0, name: ulpPlaceholder };
+  data.value.up3 = value;
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUp3Ulp(value);
+  data.value.posko = value;
+};
+const setMonth = (value: any) => {
+  bulan.value = value;
+  data.value.bulan = value;
+  console.log(data.value)
+
+};
+const setYear = (value: any) => {
+  tahun.value = value;
+  data.value.tahun = value;
+};
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchRegional()
+})
 </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="itemsUid" :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"
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">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"
-      >Unit Layanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">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 placeholder="2023" />
+      <Select @update:selected="setMonth($event)" :data="months" :placeholder="bulanPlaceholder" />
+      <Select @update:selected="setYear($event)" :data="years" :placeholder="tahunPlaceholder" />
     </div>
   </div>
 </template>
+

src/components/Form/FiltersType/Type3.vue

@@ -1,34 +1,71 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
+import { onMounted, ref } from 'vue';
+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 emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: ''
+})
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: 0, name: ulpPlaceholder };
+  data.value.up3 = value;
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(value);
+  data.value.posko = value;
+};
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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="itemsUid" :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"
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">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"
-      >Unit Layanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">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 Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type4.vue

@@ -1,13 +1,56 @@
 <script setup lang="ts">
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
+  import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
+import { onMounted, ref } from 'vue';
+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 emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  jenisLaporan : ''
+})
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: 0, name: ulpPlaceholder };
+  data.value.up3 = value;
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(value);
+  data.value.posko = value;
+};
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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="itemsUid" 
+      :placeholder="uidPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -15,7 +58,11 @@
       >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">
@@ -23,7 +70,11 @@
       >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">
@@ -31,12 +82,25 @@
       >Jenis Laporan:</label
     >
 
-    <Select placeholder="Laporan Berulang Unit" />
+    <Select
+      @update:selected="(value) => {
+        data.jenisLaporan = value
+      }"
+      :data="[
+        { id: 1, name: 'Laporan Berulang Unit' },
+        { id: 2, name: 'Laporan Berulang Pelanggan' },
+        { id: 3, name: 'Laporan Berulang Pelanggan dan Unit' },
+      ]"
+      :placeholder="'Semua Jenis Laporan'"
+    />
   </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 />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type5.vue

@@ -1,13 +1,68 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import { onMounted, ref, watch } from 'vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsPosko
+} from './reference'
+
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+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 emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: posko.value,
+  periode: ''
+})
+
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
+
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  uppp.value = { id: 0, name: uppPlaceholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  uppp.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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>
+    <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 :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -15,18 +70,20 @@
       >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 />
+    <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type6.vue

@@ -1,42 +1,90 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import InputNumber from '@/components/Form/InputNumber.vue'
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
+import { onMounted, ref } from 'vue';
+const emit = defineEmits(['update:filters'])
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
+const up3 = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder });
+const data = ref({
+  uid: uid.value,
+  up3: up3.value,
+  posko: posko.value,
+  periode: '',
+  minJmlLapor: 1,
+  maxJmlLapor: 1
+})
+
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  up3.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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="itemsUid" :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"
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">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">Posko:</label>
 
-    <Select placeholder="Semua Posko" />
+    <Select @update:selected="setPosko($event)" :data="itemsPosko" :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 />
+    <DatePicker @update:date-value="(value) => {
+      data.periode = value
+    }" />
   </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">Lapor Ulang:</label>
 
     <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-      <Select placeholder="1" />
+      <InputNumber :value="data.minJmlLapor" @update:time-value="(value) => {
+        data.minJmlLapor = value
+      }" />
       <small class="flex items-center">s/d</small>
-      <Select placeholder="2" />
+      <InputNumber :value="data.maxJmlLapor" @update:time-value="(value) => {
+        data.maxJmlLapor = value
+      }" />
     </div>
   </div>
 </template>
+

src/components/Form/FiltersType/Type7.vue

@@ -1,46 +1,163 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
-  import InputWithSuffix from '../InputWithSuffix.vue';
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InputWithSuffix from '../InputWithSuffix.vue';
+import { useTotalDuration } from '@/stores/totalDuration';
+
+import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
+import { onMounted, ref, watch } from 'vue';
+const emit = defineEmits(['update:filters'])
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
+const up3 = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder });
+const data = ref({
+  uid: uid.value,
+  up3: up3.value,
+  posko: posko.value,
+  periode: '',
+  minTime: 1,
+  maxTime: 1
+})
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  up3.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+
+
+const sla = [
+  {
+    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')
+    data.value.minTime = 0
+    data.value.maxTime = 5
+    triggerInput.value = false
+  } else if (value.id === 1) {
+    data.value.minTime = 0
+    data.value.maxTime = 45
+    console.log(data.value)
+    console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
+    triggerInput.value = true
+  } else {
+    data.value.minTime = 46
+    data.value.maxTime = 99999 * 60 * 24
+    triggerInput.value = true
+    console.log('Melebihi SLA (> 45 menit)')
+  }
+
+  console.log('value', data.value);
+  
+}
+watch(data, (newValue) => {
+  console.log('newValue', newValue.maxTime)
+
+  emit('update:filters', newValue)
+})
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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="itemsUid" 
+      :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"
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">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">Posko:</label>
 
-    <Select placeholder="Semua Posko" />
+    <Select 
+      @update:selected="setPosko($event)" 
+      :data="itemsPosko" 
+      :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 />
+    <DatePicker @update:date-value="(value) => {
+      data.periode = value
+    }
+      " />
   </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">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
-      <Select placeholder="Durasi Menit" />
+      <Select 
+      @update:selected="changeDuration($event)" 
+        
+      :data="sla" placeholder="Durasi Menit" />
 
-      <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-        <InputWithSuffix />
+      <div class="grid grid-flow-col auto-cols-auto gap-x-1.5"  >
+        <InputWithSuffix 
+        :default-value="`${data.minTime} Menit`"
+        :disabled="triggerInput"
+          @update:minuteValue="
+          (value :any)=> {
+            data.minTime =value
+          }
+          "
+         
+       />
         <small class="flex items-center">s/d</small>
-        <InputWithSuffix />
+        <InputWithSuffix 
+        :default-value="`${data.maxTime} Menit`"
+          @update:minuteValue="
+          (value :any)=> {
+            data.maxTime = value
+          }
+          "
+        :disabled="triggerInput"
+            />
       </div>
     </div>
   </div>

src/components/Form/FiltersType/Type8.vue

@@ -1,26 +1,82 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+
+import { onMounted, ref, watch } from 'vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+} from './reference'
+
+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 emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: posko.value,
+  periode: ''
+})
+
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
+
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  uppp.value = { id: 0, name: uppPlaceholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  uppp.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
+
 </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="itemsUid"
+      :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"
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
+      :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">Periode Tanggal:</label>
 
-    <DatePicker />
+    <DatePicker @update:date-value="(value) => {
+      data.periode = value
+    }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type9.vue

@@ -2,13 +2,71 @@
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
   import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+
+import { onMounted, ref, watch } from 'vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsPosko
+} from './reference'
+
+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 emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: posko.value,
+  periode: ''
+})
+
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
+
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  uppp.value = { id: 0, name: uppPlaceholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  uppp.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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="itemsUid"
+      :placeholder="uidPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -16,19 +74,30 @@
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
+      :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" 
+      :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 />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

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,173 @@
+import { getUid, getUp3, getPosko, getUlp,getUidRegional } 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: any;
+  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();
+let years = ref<Item[]>([]);
+for (let i = 0; i < 5; i++) {
+  years.value.push({ id: year - i, name: year - i })
+}
+
+const timeout = ref()
+const itemsUid = ref<Item[]>([]);
+const itemsUp3 = ref<Item[]>([]);
+const itemsPosko = ref<Item[]>([]);
+const itemsUlp = ref<Item[]>([]);
+const itemsRegional = ref<Item[]>([]);
+const itemsMedia = ref<Item[]>([]);
+const fetchRegional = () => {
+  itemsRegional.value = [
+    { id: "1", name: "Wilayah Sumatera" },
+    { id: "2", name: "Wilayah Jawa Bali" },
+    { id: "3", name: "Wilayah Kalimantan" },
+    { id: "4", name: "Wilayah Sulawesi" },
+    { id: "5", name: "Wilayah Nusa Tenggara" },
+    { id: "6", name: "Wilayah Maluku Papua" },
+  ]
+}
+const fetchStatus = (data : any) => {
+
+  const status  = [
+    {"id": "8", "name": "Selesai"},
+    {"id": "7", "name": "Nyala"},
+    {"id": "6", "name": "Pengalihan"},
+    {"id": "5", "name": "Dialihkan"},
+    {"id": "4", "name": "Dalam Pengerjaan"},
+    {"id": "3", "name": "Dalam Perjalanan"},
+    {"id": "2", "name": "Penugasan Regu"},
+    {"id": "1", "name": "lapor"}
+  ]
+  const filteredStatus = status.find(item => item.id == data);
+  const name = filteredStatus ? filteredStatus.name : null;
+  return name;
+}
+const fetchMedia = () => {
+  itemsMedia.value = [
+    { id: "Ulasan Aplikasi PLN Mobile", name: "Ulasan Aplikasi PLN Mobile" },
+    { id: "Twitter", name: "Twitter" },
+    { id: "PLN Mobile", name: "PLN Mobile" },
+    { id: "Media Massa", name: "Media Massa" },
+    { id: "Live Chat Website", name: "Live Chat Website" },
+    { id: "Live Chat PLN Mobile", name: "Live Chat PLN Mobile" },
+    { id: "Instagram", name: "Instagram" },
+    { id: "Facebook", name: "Facebook" },
+    { id: "Email", name: "Email" },
+    { id: "EMS", name: "EMS" },
+    { id: "Datang ke Kantor", name: "Datang ke Kantor" },
+    { id: "Call ke Kantor Unit", name: "Call ke Kantor Unit" },
+    { id: "Call PLN 123", name: "Call PLN 123" },
+  ]
+
+}
+// Fetch data from the API using Axios
+const fetchUid = async () => {
+  try {
+    const res = await getUid()
+    itemsUid.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama,
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+};
+const fetchUidWithRegional = async (regional: number) => {
+  try {
+    const res = await getUidRegional(regional)
+    itemsUid.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) => {
+  if (value.id != 0) {
+    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, fetchMedia,fetchStatus,fetchRegional, fetchUid, itemsUid, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };

src/components/Form/InlineRadioGroup.vue

@@ -3,8 +3,9 @@
     <fieldset>
       <div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
         <div v-for="item in radioItems" :key="item.id" class="flex items-center">
-          <input :id="`${item.id}`" type="radio" name="radio"
-            :checked="item.hasOwnProperty('checked') && item.checked === true"
+          <input v-model="groupValue" 
+            type="radio" name="radio"
+            :checked="item.checked" @change="onChange(item)"
             class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500" />
           <label :for="`${item.id}`" class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500">{{
             item.title }}</label>
@@ -15,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { type PropType } from 'vue'
+import { ref, watch, type PropType, onMounted } from 'vue'
 
 interface Item {
   id: number;
@@ -23,10 +24,24 @@ interface Item {
   checked?: boolean;
 }
 
-defineProps({
+const onChange= (e:Item) => {
+  itemSelected.value = e
+  emit('update:groupValue', e)
+}
+
+const props = defineProps({
   radioItems: {
     type: Array as PropType<Item[]>,
     required: true
   }
 })
+
+const itemSelected = ref(props.radioItems[0])
+const emit = defineEmits(['update:groupValue'])
+const groupValue = ref(1)
+
+onMounted(() => {
+  itemSelected.value = props.radioItems[0]
+})
+
 </script>

src/components/Form/InputNumber.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: Number,
+    default: ''
+  }
+})
+const emit = defineEmits(['update:timeValue'])
+const timeValue = ref(1)
+watch(timeValue, (newValue) => {
+  console.log('newValue', newValue)
+  emit('update:timeValue', newValue)
+})
+
+</script>
+
+<template>
+  <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
+    <input
+      v-model="timeValue"
+      autocomplete="off"
+      type="number"
+      :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

@@ -1,34 +1,55 @@
 <script setup lang="ts">
-  const props = defineProps({
-    placeholder: {
-        type: String,
-        default: "",
-    },
-    disabled: {
-        type: Boolean,
-        default: false,
-    },
-    readonly: {
-        type: Boolean,
-        default: false,
-    }
-  })
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  defaultValue: {
+    type: String,
+    default: '1 Menit'
+  }
+ 
+})
+const emit = defineEmits(['update:menitValue'])
+const menitValue = ref<any>(props.defaultValue)
+watch(menitValue, (newValue) => {
+  console.log('newValue', newValue)
+  emit('update:menitValue', newValue)
+})
+
+watch(() => props.defaultValue, (newValue) => {
+  menitValue.value = newValue
+})
 </script>
 
 <template>
-  <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
+  <div 
+ 
+  class="relative w-full overflow-hidden rounded-lg bg-gray-200">
     <input
+      v-model="menitValue"
       autocomplete="off"
       type="text"
       :placeholder="placeholder"
-      :disabled="disabled"
       :readonly="readonly"
       inputmode="numeric"
       pattern="[0-9.]*"
+      :disabled="disabled"
       oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
       onblur="this.value = this.value ? this.value + ' Menit' : ''"
       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"
+      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/Pages/Anomali/Table_61.vue

@@ -11,7 +11,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-if="loading" v-model:visible="loading" :enabled="true" />
         <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
         <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
         <DxColumnFixing :enabled="true" />

src/components/Pages/Anomali/Table_62.vue

@@ -10,7 +10,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-if="loading" v-model:visible="loading" :enabled="true" />
         <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
         <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
         <DxColumnFixing :enabled="true" />

src/components/Pages/Anomali/Table_63.vue

@@ -11,7 +11,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-if="loading" v-model:visible="loading" :enabled="true" />
         <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
         <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
         <DxColumnFixing :enabled="true" />

src/components/Pages/Anomali/Table_64.vue

@@ -11,7 +11,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-if="loading" v-model:visible="loading" :enabled="true" />
         <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
         <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
         <DxColumnFixing :enabled="true" />

src/components/Pages/Anomali/Table_65.vue

@@ -11,7 +11,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-if="loading" v-model:visible="loading" :enabled="true" />
         <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
         <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
         <DxColumnFixing :enabled="true" />

src/components/Pages/Anomali/Table_66.vue

@@ -10,7 +10,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-if="loading" v-model:visible="loading" :enabled="true" />
         <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
         <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
         <DxColumnFixing :enabled="true" />

src/components/Pages/Cico/Table_60.vue

@@ -7,7 +7,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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />

src/components/Pages/Ctt/Table_67.vue

@@ -7,7 +7,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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />

src/components/Pages/Gangguan/Table_1.vue

@@ -1,295 +1,348 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
-            :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :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" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type1 @update:filters="(value) => {
+        filters = value
+      }
+      " />
+  </Filters>
 
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="number" 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" />
+  <div id="data">
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data" key-expr="no_laporan"
+      :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
+      :hover-state-enabled="true" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :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 :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="150" alignment="center" data-field="pembuat_laporan"
-                caption="Pembuat Laporan" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_laporan"
-                caption="Tgl Lapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_dialihkan"
-                caption="Tgl Dialihkan" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_respon"
-                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"
-                caption="Durasi Response Time" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery"
-                caption="Durasi Recovery Time" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_awal"
-                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"
-                cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="id_pelanggan"
-                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" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-                caption="Alamat Pelapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-                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"
-                caption="Sumber Lapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko"
-                cell-template="data" />
-            <template #data="{ data }">
-                <span class="cursor-pointer" @click="showData()">
-                    {{ data.text }}
-                </span>
-            </template>
-        </DxDataGrid>
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
+        caption="Pembuat Laporan" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
+        caption="Tgl Lapor" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_dialihkan"
+        caption="Tgl Dialihkan" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
+        caption="Tgl Response" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
+        caption="Tgl Recovery" cell-template="data" />
+      <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_time"
+        caption="Durasi Recovery Time" cell-template="data" />
+      <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_akhir" caption="Status"
+        cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
+        caption="IDPEL/NO METER" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
+        caption="Nama Pelapor" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
+        caption="Alamat Pelapor" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
+        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="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" />
+      <template #data="{ data }">
+        <span class="cursor-pointer" @click="showData()">
+          {{ data.text }}
+        </span>
+      </template>
+    </DxDataGrid>
+  </div>
+
+  <DetailDialog :open="showDetail" title="Daftar Gangguan Dialihkan ke Posko Lain" @on-close="closeDetail">
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          No Laporan:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Pembuat Laporan:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Tanggal Laporan:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Tanggal Dialihkan:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_dialihkan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Tanggal Respon:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_respon" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Tanggal Recovery:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Durasi Response Time:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_respon" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Durasi Recovery Time:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Posko Awal:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.posko_awal" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Posko Tujuan:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.posko_tujuan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Status:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          IDPEL/NO METER:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.id_pelanggan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Nama Pelapor:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Alamat Pelapor:
+        </h3>
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Pembuat Laporan:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Keterangan Pelapor:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Sumber Laporan:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.sumber_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Posko:
+        </h3>
+        <InputText :readonly="true" :value="dataDetail?.posko" class-name="flex-1" />
+      </div>
     </div>
 
-    <DetailDialog :open="showDetail" title="Daftar Gangguan Dialihkan ke Posko Lain" @on-close="closeDetail">
-        <div class="w-full p-4 space-y-2 bg-white rounded-xl">
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    No Laporan:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Pembuat Laporan:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tanggal Laporan:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.tanggal_laporan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tanggal Dialihkan:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.tanggal_dialihkan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tanggal Respon:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.tanggal_respon" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tanggal Recovery:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.tanggal_recovery" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Durasi Response Time:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.durasi_respon" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Durasi Recovery Time:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.durasi_recovery" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Posko Awal:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.posko_awal" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Posko Tujuan:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.posko_tujuan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Status:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    IDPEL/NO METER:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.id_pelanggan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Nama Pelapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Alamat Pelapor:
-                </h3>
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
-                    class-name="flex-1 h-[56px]" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Pembuat Laporan:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Keterangan Pelapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Sumber Laporan:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.sumber_laporan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Posko:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.posko" class-name="flex-1" />
-            </div>
-        </div>
-
-    </DetailDialog>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 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 {
+  DxColumn,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
+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 DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
-
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const dialog = useDialogStore()
-const data = ref<Data1[]>([])
-const dataDetail = ref<Data1>()
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
 const showDetail = ref(false)
+
 const closeDetail = () => {
-    showDetail.value = false
+  showDetail.value = false
 }
-
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
-const createDummy = () => {
-    for (let i = 0; i < 100; i++) {
-        data.value.push({
-            number: i + 1,
-            no_laporan: 'G5223091' + (900002 + i),
-            pembuat_laporan: 'agentjateng',
-            tanggal_laporan: '19/09/2023 12:26:42',
-            tanggal_dialihkan: '19/09/2023 12:33:46',
-            tanggal_respon: '19/09/2023 13:14:15',
-            tanggal_recovery: '19/09/2023 13:14:15',
-            durasi_respon: '0-0:47:32',
-            durasi_recovery: '0-0:49:35',
-            posko_awal: 'POSKO ULP UNGARAN.',
-            posko_tujuan: 'POSKO ULP UNGARAN.',
-            status: 'Selesai',
-            id_pelanggan: '-',
-            nama_pelapor: 'Moegy',
-            alamat_pelapor: '-',
-            no_telp_pelapor: '085136661313',
-            keterangan_pelapor: '-',
-            sumber_laporan: 'Contact Center',
-            posko: 'POSKO ULP UNGGARAN'
-        });
+const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
+  query DaftarGangguan($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+    daftarGangguanDialihkanKePoskoLain(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+      alamat_pelapor
+      durasi_recovery_time
+      durasi_response_time
+      waktu_dialihkan
+      waktu_recovery
+      waktu_response
+      id_gangguan
+      idpel_nometer
+      keterangan_pelapor
+      media
+      nama_pelapor
+      no_laporan
+      no_telp_pelapor
+      posko_asal
+      posko_tujuan
+      status_akhir
+      waktu_recovery
+      waktu_response
     }
-    writeDataJson('data-daftar-1', data.value)
+  }
+`
+const filterData = (params: any) => {
+  const dateValue = params.periode.split(' s/d ')
+  const posko = params.posko ? params.posko.id : ''
+  const uid = params.uid ? params.uid.id : 0
+  const up3 = params.up3 ? params.up3.id : 0
+  refetch({
+    dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    posko: posko,
+    idUid: uid,
+    idUp3: up3
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item,
+            pembuat_laporan: '-',
+            waktu_lapor: '-',
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
+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 onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    dataDetail.value = data
-    console.log(data)
+  const data = selectedRowsData[0]
+  dataDetail.value = data
+  console.log(data)
 }
-
 const showData = () => {
-    showDetail.value = true
+  showDetail.value = true
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    createDummy()
-    filters.setConfig({
-        type: 'type-1',
-    })
-})
-
-</script>
+const filters = ref()
+</script>

src/components/Pages/Gangguan/Table_10.vue

@@ -1,71 +1,81 @@
+<!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type1 @update:filters="(value) => {
+        filters = value
+      }
+      " />
+  </Filters>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :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 :width="120" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Sub Kelompok (Equipment)"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+            <DxColumn :width="120" alignment="center" data-field="kode" 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"
+                <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="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="in_process" 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_in_process" 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"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
+                        caption="Total" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="avg_waktu_response_time" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <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="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"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="di_atas_sla_durasi_response" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="dibawah_sla_durasi_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"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
+                        caption="Total" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="avg_waktu_recovery_time" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <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="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"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="diatas_sla_durasi_recovery" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="dibawah_sla_durasi_recovery" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
         </DxDataGrid>
@@ -73,16 +83,74 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
+import { computed, onMounted, ref, watch } from 'vue'
+
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import 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 rekapitulasiJenisGangguanSE004(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+  ) {
+    rekapitulasiJenisGangguanSE004(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+      sub_kelompok
+      total
+      selesai
+      persen_selesai
+      in_process
+      persen_in_process
+      total_durasi_response
+      avg_waktu_response_time
+      max_durasi_response
+      min_durasi_response
+      diatas_sla_durasi_response
+      dibawah_sla_durasi_response
+      total_durasi_recovery
+      avg_waktu_recovery_time
+      max_durasi_recovery
+      min_durasi_recovery
+      diatas_sla_durasi_recovery
+      dibawah_sla_durasi_recovery
+    }
+  }
+`
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -90,7 +158,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -101,7 +169,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')
@@ -111,18 +179,43 @@ 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 filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+
+            data.value = queryResult.data.rekapitulasiJenisGangguanSE004;
+            console.log(queryResult.loading)
+            console.log(queryResult.networkStatus)
+        }
+    })
+    onError((queryError) => {
+        console.log(queryError)
+    })
+}
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
+const filters= ref();
 
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
-</script>
+</script>

src/components/Pages/Gangguan/Table_11.vue

@@ -1,5 +1,12 @@
+<!-- Rekapitulasi Gangguan Per Posko -->
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type8 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
@@ -7,7 +14,9 @@
             <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" />
@@ -147,8 +156,9 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type8 from '@/components/Form/FiltersType/Type8.vue'
 import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary, DxTotalItem } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -156,6 +166,53 @@ 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 onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -191,87 +248,86 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-const poskoOptions = ['POSKO A', 'POSKO B', 'POSKO C', 'POSKO D', 'POSKO E'];
-
-const createDummy = () => {
-    var dummy = data.value;
-    for (let i = 1; i <= 50; i++) {
-        const randomPosko = poskoOptions[Math.floor(Math.random() * poskoOptions.length)];
-
-        const totalLaporan = Math.floor(Math.random() * 21);
-        const laporanSelesai = Math.floor(Math.random() * (totalLaporan + 1));
-        const laporanBelumSelesai = totalLaporan - laporanSelesai;
-
-        const responseTimeTotal = Math.floor(Math.random() * 31);
-        const responseTimeRataRata = (Math.random() * 21) + 10;
-        const responseTimeMax = responseTimeRataRata + Math.floor(Math.random() * 11);
-        const responseTimeMin = responseTimeRataRata - Math.floor(Math.random() * 11);
-
-        const responseTimeLebihSla = Math.floor(Math.random() * (laporanSelesai + 1));
-        const responseTimeKurangSla = laporanSelesai - responseTimeLebihSla;
-
-        const recoveryTimeTotal = Math.floor(Math.random() * 31);
-        const recoveryTimeRataRata = (Math.random() * 21) + 10;
-        const recoveryTimeMax = recoveryTimeRataRata + Math.floor(Math.random() * 11);
-        const recoveryTimeMin = recoveryTimeRataRata - Math.floor(Math.random() * 11);
-
-        const recoveryTimeLebihSla = Math.floor(Math.random() * (laporanSelesai + 1));
-        const recoveryTimeKurangSla = laporanSelesai - recoveryTimeLebihSla;
-
-        const entry = {
-            no: i,
-            posko: randomPosko,
-            laporan: {
-                total: totalLaporan,
-                sudahSelesai: {
-                    jml: laporanSelesai,
-                    persen: (laporanSelesai / totalLaporan) * 100,
-                },
-                belumSelesai: {
-                    jml: laporanBelumSelesai,
-                    persen: (laporanBelumSelesai / totalLaporan) * 100,
-                },
-            },
-            responseTime: {
-                menit: {
-                    total: responseTimeTotal,
-                    rataRata: responseTimeRataRata,
-                    max: responseTimeMax,
-                    min: responseTimeMin,
-                },
-                laporan: {
-                    lebihSla: responseTimeLebihSla,
-                    kurangSla: responseTimeKurangSla,
-                },
-            },
-            recoveryTime: {
-                menit: {
-                    total: recoveryTimeTotal,
-                    rataRata: recoveryTimeRataRata,
-                    max: recoveryTimeMax,
-                    min: recoveryTimeMin,
-                },
-                laporan: {
-                    lebihSla: recoveryTimeLebihSla,
-                    kurangSla: recoveryTimeKurangSla,
-                },
-            }
-        };
-
-        dummy.push(entry);
-    }
-    data.value = dummy;
-}
-
-const data = ref<any[]>([])
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-8',
-        reportButton: true
-    })
-    createDummy()
+const { onResult, onError,loading,refetch } = 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,
 })
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+    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(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+
+}
+const filters = ref();
 </script>

src/components/Pages/Gangguan/Table_12.vue

@@ -1,69 +1,80 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+   <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type9 @update:filters="(value) => {
+        filters = value
+      }
+      " />
+  </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @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 :width="120" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column" />
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
+            <DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <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 +83,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type9 from '@/components/Form/FiltersType/Type9.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 +94,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,12 +175,37 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-9'
+const { onResult, onError,loading,refetch } = 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,
     })
-})
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanPerRegu;
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+   
+}
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_13.vue

@@ -1,69 +1,80 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type9 @update:filters="(value) => {
+        filters = value
+      }
+      " />
+  </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @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 :width="170" alignment="center" data-field="" caption="Tanggal Lapor"
+             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
+                caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <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 +83,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type9 from '@/components/Form/FiltersType/Type9.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 +94,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,11 +134,80 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
 
-    filters.setConfig({
-        type: 'type-9'
+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 { onResult, onError,loading,refetch } = 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,
     })
-})
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanPerTanggal;
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+   
+}
+const filters = ref();
 </script>

src/components/Pages/Gangguan/Table_14.vue

@@ -1,47 +1,64 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type1 @update:filters="(value) => {
+        filters = value
+      }
+      " />
+  </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :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 :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
-                    css-class="custom-table-column" />
+                <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
+                    :caption="i" css-class="custom-table-column" />
             </DxColumn>
-
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.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()
@@ -49,7 +66,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -60,7 +77,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,12 +93,91 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
+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
+    }
+  }
+`
 
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
+const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
+        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
     })
-})
-</script>
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+
+
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+    
+}
+const filters = ref();
+</script>

src/components/Pages/Gangguan/Table_15.vue

@@ -1,28 +1,42 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
+            column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :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 alignment="center" data-field="" caption="Nama UP3" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="" caption="Nama Posko" css-class="custom-table-column" />
-            <DxColumn :width="100" alignment="center" data-field="" caption="Posko IN" css-class="custom-table-column" />
-            <DxColumn :width="100" alignment="center" data-field="" caption="Posko OUT" css-class="custom-table-column" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+            <DxColumn alignment="center" data-field="id_uid" caption="Nama UP3" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="id_up3" caption="Nama Posko" css-class="custom-table-column" />
+            <DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN"
+                css-class="custom-table-column" />
+            <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 Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.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 +45,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,13 +84,66 @@ 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
+        }
+}`;
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
+const { onResult, onError,loading,refetch } = 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,
 })
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+
+
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanAlihPosko;
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+
+}
+const filters = ref();
 </script>

src/components/Pages/Gangguan/Table_16.vue

@@ -1,44 +1,61 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
+            column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :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" 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 +65,23 @@
                     <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"
-                                    css-class="custom-table-column" />
+                                <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 +89,23 @@
                     <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"
-                                    css-class="custom-table-column" />
+                                <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 +115,25 @@
                     <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"
-                                    css-class="custom-table-column" />
+                                <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 +141,23 @@
                     <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"
-                                    css-class="custom-table-column" />
+                                <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 +169,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.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 +180,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,13 +219,85 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
+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 { onResult, onError, loading, refetch } = 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,
+})
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+    })
     const filters = useFiltersStore()
 
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
+
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanDiselesaikanMobileAPKT
+                ;
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
     })
-})
+    onError((error) => {
+        console.log(error)
+    })
+
+}
+const filters = ref();
+
 </script>

src/components/Pages/Gangguan/Table_17.vue

@@ -1,18 +1,27 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <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" data-type="number"
-                css-class="custom-table-column" />
+            <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" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -62,6 +71,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.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,9 +83,12 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import type { Rekap1 } from '@/types/gangguan'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
-const data = ref<Rekap1[]>([])
-
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+const 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,15 +153,78 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    createDummy()
-    
-    const filters = useFiltersStore()
+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 
+        }
+}`;
 
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
+
+const { onResult, onError,loading,refetch } = 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,
 })
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
+                ;
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+
+}
+const filters = ref();
 
 </script>

src/components/Pages/Gangguan/Table_18.vue

@@ -1,17 +1,27 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type1 @update:filters="(value) => {
+        filters = value
+      }
+      " />
+  </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <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" 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 +66,37 @@
                 <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 Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.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 +104,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -90,7 +115,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,18 +126,79 @@ const onExporting = (e: any) => {
     }
 }
 
-
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
+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 { onResult, onError,loading,refetch } = 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
     })
-})
-</script>
+const filterData = (params: any) => {
+  
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+   
+}
+const filters = ref()
+</script>

src/components/Pages/Gangguan/Table_19.vue

@@ -1,41 +1,51 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type18 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @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" />
-            <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="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 +53,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type18 from '@/components/Form/FiltersType/Type18.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 +64,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { 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,12 +105,75 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
+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 { onResult, onError, loading, refetch } = 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,
 })
+const filterData = (params: any) => {
+
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
+                ;
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+
+}
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_2.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type6 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="" :allow-column-resizing="true"
@@ -8,29 +14,29 @@
             <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" data-field="no" data-type="number"
-                caption="No" cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
                 caption="No Laporan" cell-template="data" />
-            <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="waktu_lapor"
                 caption="Tgl Lapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
                 caption="Tgl Response" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_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"
-                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="status_akhir"
+                caption="Status" cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
                 caption="IDPEL/NO METER" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
                 caption="Nama Pelapor" cell-template="data" />
@@ -40,7 +46,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" />
@@ -66,21 +72,21 @@
                 <h3 class="text-sm font-medium w-[170px] text-gray-800">
                     Tanggal Lapor:
                 </h3>
-                <InputText :readonly="true" :value="dataDetail?.tgl_lapor" class-name="flex-1" />
+                <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
             </div>
 
             <div class="flex flex-row items-center justify-between w-full">
                 <h3 class="text-sm font-medium w-[170px] text-gray-800">
                     Tanggal Response:
                 </h3>
-                <InputText :readonly="true" :value="dataDetail?.tgl_response" class-name="flex-1" />
+                <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
             </div>
 
             <div class="flex flex-row items-center justify-between w-full">
                 <h3 class="text-sm font-medium w-[170px] text-gray-800">
                     Tanggal Recovery:
                 </h3>
-                <InputText :readonly="true" :value="dataDetail?.tgl_recovery" class-name="flex-1" />
+                <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
             </div>
 
             <div class="flex flex-row items-center justify-between w-full">
@@ -115,7 +121,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 +164,21 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type6 from '@/components/Form/FiltersType/Type6.vue'
+import { ref } 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';
 
+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)
 
@@ -181,50 +195,67 @@ const closeDetail = () => {
     showDetail.value = false
 }
 
-const data = [
-    {
-        no: 1,
-        no_laporan: 'G5223091900003',
-        tgl_lapor: '31/01/2023 15:33:19',
-        tgl_response: '31/01/2023 16:56:25',
-        tgl_recovery: '31/01/2023 17:08:28',
-        jml_lapor: 1,
-        durasi_response_time: '0-01:23:06',
-        durasi_recovery_time: '0-01:35:08',
-        status: 'Selesai',
-        idpel_no_meter: '523013252126 / 1731807',
-        nama_pelapor: 'IBU FELISIA',
-        alamat_pelapor: 'JL KWS INDUSTRI CIPT GINA KAV 5 BLOK B1',
-        no_telp_pelapor: '082229870235',
-        keterangan_pelapor: '-',
-        sumber_lapor: '-',
-        posko: 'POSKO ULP SEMARANG',
-    },
-    {
-        no: 2,
-        no_laporan: 'G5223091900673',
-        tgl_lapor: '31/01/2023 12:35:37',
-        tgl_response: '31/01/2023 13:39:01',
-        tgl_recovery: '31/01/2023 14:10:53',
-        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',
-    }
-]
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-6',
-    })
+const GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI = gql`
+query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateTo: Date!, $posko: String!, $idUid: Int!, $idUp3: Int!) {
+  daftarGangguanMelaporLebihDariSatuKali(
+    minJmlLapor: $minJmlLapor
+    maxJmlLapor: $maxJmlLapor
+    dateFrom: $dateFrom
+    dateTo: $dateTo
+    posko: $posko
+    idUid: $idUid
+    idUp3: $idUp3
+  ) {
+    alamat_pelapor
+    durasi_response_time
+    id_gangguan
+    idpel_nometer
+    jumlah_lapor
+    keterangan_pelapor
+    media
+    nama_pelapor
+    no_laporan
+    no_telp_pelapor
+    posko
+    status_akhir
+    waktu_recovery
+    waktu_response
+  }
+}`;
+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 filterData = (params: any) => {
+    const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params;
+    const dateValue = params.periode.split(' s/d ');
+    refetch({
+        minJmlLapor: minJmlLapor ? minJmlLapor : 1,
+        maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError(error => {
+        console.log(error)
+    })
+}
+
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_20.vue

@@ -1,41 +1,51 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <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="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 +53,31 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
+import {  ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -60,7 +85,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -71,7 +96,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,18 +107,76 @@ const onExporting = (e: any) => {
     }
 }
 
-
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
+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 { onResult, onError, loading, refetch } = 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
 })
-</script>
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+
+}
+const filters = ref(); 
+</script>

src/components/Pages/Gangguan/Table_3.vue

@@ -1,58 +1,147 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
-            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type7 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
+            :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"
-                caption="No" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
+                caption="No Laporan" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
+                caption="Tgl Lapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_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="waktu_recovery"
                 caption="Tgl Recovery" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
                 caption="Durasi Response Time" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
                 caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
+                caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="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 Filters from '@/components/Form/Filters.vue'
+import Type7 from '@/components/Form/FiltersType/Type7.vue'
+import { ref } 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';
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-7',
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const data = ref<any[]>([])
+const filterData = (params: any) => {
+    const { minTime, maxTime, posko, uid, up3 } = params;
+    const dateValue = params.periode.split(' s/d ') 
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        minDurasiResponseTime : minTime ? minTime : 0,
+        maxDurasiResponseTime : maxTime ? maxTime : 1,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
+    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)
+    })
+}
+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 filters = ref()
 </script>

src/components/Pages/Gangguan/Table_4.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type7 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
@@ -7,54 +13,130 @@
             <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"
-                caption="No" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
+                caption="No Laporan" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
+                caption="Tgl Lapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_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="waktu_recovery"
                 caption="Tgl Recovery" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
                 caption="Durasi Response Time" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
                 caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
+                caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="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 { useFiltersStore } from '@/stores/filters'
+import Filters from '@/components/Form/Filters.vue'
+import Type7 from '@/components/Form/FiltersType/Type7.vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-7',
+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 filterData = (params: any) => {
+    const { minDurasiRecoveryTime, maxDurasiRecoveryTime, posko, uid, up3 } = params;
+    const dateValue = params.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        minDurasiRecoveryTime: minDurasiRecoveryTime ? minDurasiRecoveryTime : 1,
+        maxDurasiRecoveryTime: maxDurasiRecoveryTime ? maxDurasiRecoveryTime : 1,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
+    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)
+    })
+}
+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 filters = ref()
+
 </script>

src/components/Pages/Gangguan/Table_5.vue

@@ -1,58 +1,128 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
-            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
+      <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+                filters = value
+            }
+            " />
+    </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :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">
             <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"
-                caption="No" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
+                caption="No Laporan" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
+                caption="Tgl Lapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_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="waktu_recovery"
                 caption="Tgl Recovery" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
                 caption="Durasi Response Time" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
                 caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
+                caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
                 caption="IDPEL/NO METER" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
                 caption="Nama Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
                 caption="Alamat Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
                 caption="No Telp Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
                 caption="Keterangan Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
                 caption="Sumber Lapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
 </template>
-
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-1',
-    })
+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_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 filterData = (params: any) => {
+    const {  posko, uid, up3 } = params;
+    const dateValue = params.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarGangguanSelesaiTanpaIdPelanggan;
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError(error => {
+        console.log(error)
+    })
+}
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_6.vue

@@ -1,56 +1,125 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
-            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
+      <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type16 @update:filters="(value) => {
+                filters = value
+            }
+            " />
+    </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
+            :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"
-                caption="No" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
-                caption="Nama 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=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" />
+            <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="no_telp_pelapor" caption="No Telp Pelapor" />
+            <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="" 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=""
+            <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="waktu_lapor" caption="Tgl Lapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_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="waktu_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="170" alignment="center" data-field=""
-                caption="Keterangan Media" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media" />
 
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import Filters from '@/components/Form/Filters.vue'
+import Type16 from '@/components/Form/FiltersType/Type16.vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-16',
+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_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 filterData = (params: any) => {
+    const { posko, uid, up3, media } = params;
+    const dateValue = params.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
+        media : media ? media.id : "Twitter"
+    })
+    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)
+    })
+}
+const filters = ref()
+
 </script>

src/components/Pages/Gangguan/Table_7.vue

@@ -1,58 +1,134 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
-            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :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">
             <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"
-                caption="No" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
+                caption="No Laporan" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
+                caption="Tgl Lapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_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="waktu_recovery"
                 caption="Tgl Recovery" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
                 caption="Durasi Response Time" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
                 caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
+                caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
                 caption="IDPEL/NO METER" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
                 caption="Nama Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
                 caption="Alamat Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
                 caption="No Telp Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
                 caption="Keterangan Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
                 caption="Sumber Lapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-1',
-    })
+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_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 filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    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)
+    })
+
+}
+
+const filters = ref();
+
 </script>

src/components/Pages/Gangguan/Table_8.vue

@@ -1,82 +1,180 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :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" />
-            <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="" data-type="number" caption="Total"
+            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama Unit"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                 :allow-resizing="false" css-class="custom-table-column" />
-            <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"
-                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="persen_selesai" data-type="number" caption="%"
+                :allow-resizing="false" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="In Progress"
+                :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"
-                    :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"
+                <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="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"
-                    :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"
+                <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="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"
-                    :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"
+                <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="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>
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.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 { 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 filterData = (param: any) => {
+    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] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+    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,49 +204,11 @@ 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]
     console.log(data)
 }
 
-onMounted(() => {
-    createDummy()
-
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+const filters = ref();
 </script>

src/components/Pages/Gangguan/Table_9.vue

@@ -1,13 +1,21 @@
+<!-- Rekapitulasi Gangguan/Jenis Gangguan -->
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+   <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type1 @update:filters="(value) => {
+        filters = value
+      }
+      " />
+  </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="dataReal" :show-column-lines="true"
+            :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <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,16 +122,88 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxGroupPanel, DxGrouping, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxGroupItem,
+    DxGroupPanel,
+    DxGrouping,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection,
+    DxSummary
+} 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 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_REKAP_JENIS_GANGGUAN = gql`
+  query daftarGangguanRecoveryTime(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+  ) {
+    rekapitulasiJenisGangguan(
+      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_recovery
+      total_dibawah_sla_response
+      total_dibawah_sla_dispatch
+      total_inproses
+      total_selesai
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN, {
+    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()
@@ -131,7 +211,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -142,7 +222,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')
@@ -158,735 +238,74 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-const data = [
-    {
-        no: 1,
-        kode: 'A',
-        jenisGangguan: 'Gangguan A',
-        laporan: {
-            total: 10,
-            sudahSelesai: {
-                jml: 5,
-                persen: 50,
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 50,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10,
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10,
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5,
-            },
-        }
-    },
-    {
-        no: 2,
-        kode: 'A',
-        jenisGangguan: 'Gangguan A',
-        laporan: {
-            total: 10,
-            sudahSelesai: {
-                jml: 5,
-                persen: 50,
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 50,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10,
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10,
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5,
-            },
-        }
-    },
-    {
-        no: 3,
-        kode: 'B',
-        jenisGangguan: 'Gangguan B',
-        laporan: {
-            total: 10,
-            sudahSelesai: {
-                jml: 5,
-                persen: 50,
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 50,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10,
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10,
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5,
-            },
-        }
-    },
-    {
-        no: 4,
-        kode: 'B',
-        jenisGangguan: 'Gangguan B',
-        laporan: {
-            total: 12,
-            sudahSelesai: {
-                jml: 6,
-                persen: 50,
-            },
-            belumSelesai: {
-                jml: 6,
-                persen: 50,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 15,
-                rataRata: 12.5,
-                max: 18,
-                min: 10,
-            },
-            laporan: {
-                lebihSla: 7,
-                kurangSla: 5,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 18,
-                rataRata: 15,
-                max: 20,
-                min: 12,
-            },
-            laporan: {
-                lebihSla: 8,
-                kurangSla: 4,
-            },
-        }
-    },
-    {
-        no: 5,
-        kode: 'C',
-        jenisGangguan: 'Gangguan C',
-        laporan: {
-            total: 8,
-            sudahSelesai: {
-                jml: 4,
-                persen: 50,
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 50,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 14,
-                rataRata: 14,
-                max: 16,
-                min: 12,
-            },
-            laporan: {
-                lebihSla: 6,
-                kurangSla: 2,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 22,
-                rataRata: 16,
-                max: 26,
-                min: 14,
-            },
-            laporan: {
-                lebihSla: 9,
-                kurangSla: 3,
-            },
-        }
-    },
-    {
-        no: 6,
-        kode: 'A',
-        jenisGangguan: 'Gangguan A',
-        laporan: {
-            total: 8,
-            sudahSelesai: {
-                jml: 4,
-                persen: 50,
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 50,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 12,
-                rataRata: 15,
-                max: 18,
-                min: 10,
-            },
-            laporan: {
-                lebihSla: 6,
-                kurangSla: 2,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 16,
-                rataRata: 18,
-                max: 22,
-                min: 14,
-            },
-            laporan: {
-                lebihSla: 8,
-                kurangSla: 0,
-            },
-        }
-    },
-    {
-        no: 7,
-        kode: 'C',
-        jenisGangguan: 'Gangguan C',
-        laporan: {
-            total: 15,
-            sudahSelesai: {
-                jml: 10,
-                persen: 66.67,
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 33.33,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 20,
-                rataRata: 13.33,
-                max: 24,
-                min: 10,
-            },
-            laporan: {
-                lebihSla: 9,
-                kurangSla: 6,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 25,
-                rataRata: 16.67,
-                max: 30,
-                min: 14,
-            },
-            laporan: {
-                lebihSla: 12,
-                kurangSla: 3,
-            },
-        }
-    },
-    {
-        no: 8,
-        kode: 'D',
-        jenisGangguan: 'Gangguan D',
-        laporan: {
-            total: 7,
-            sudahSelesai: {
-                jml: 2,
-                persen: 28.57,
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 71.43,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 18,
-                rataRata: 9,
-                max: 20,
-                min: 6,
-            },
-            laporan: {
-                lebihSla: 1,
-                kurangSla: 6,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 28,
-                rataRata: 14,
-                max: 30,
-                min: 10,
-            },
-            laporan: {
-                lebihSla: 4,
-                kurangSla: 3,
-            },
-        }
-    },
-    {
-        no: 9,
-        kode: 'D',
-        jenisGangguan: 'Gangguan D',
-        laporan: {
-            total: 12,
-            sudahSelesai: {
-                jml: 8,
-                persen: 66.67,
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 33.33,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 24,
-                rataRata: 20,
-                max: 28,
-                min: 16,
-            },
-            laporan: {
-                lebihSla: 9,
-                kurangSla: 3,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 32,
-                rataRata: 26,
-                max: 36,
-                min: 22,
-            },
-            laporan: {
-                lebihSla: 11,
-                kurangSla: 1,
-            },
-        }
-    },
-    {
-        no: 10,
-        kode: 'E',
-        jenisGangguan: 'Gangguan E',
-        laporan: {
-            total: 15,
-            sudahSelesai: {
-                jml: 12,
-                persen: 80,
-            },
-            belumSelesai: {
-                jml: 3,
-                persen: 20,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 22,
-                rataRata: 14.67,
-                max: 26,
-                min: 10,
-            },
-            laporan: {
-                lebihSla: 11,
-                kurangSla: 4,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 30,
-                rataRata: 20,
-                max: 36,
-                min: 16,
-            },
-            laporan: {
-                lebihSla: 13,
-                kurangSla: 2,
-            },
-        }
-    },
-    {
-        no: 11,
-        kode: 'F',
-        jenisGangguan: 'Gangguan F',
-        laporan: {
-            total: 9,
-            sudahSelesai: {
-                jml: 6,
-                persen: 66.67,
-            },
-            belumSelesai: {
-                jml: 3,
-                persen: 33.33,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 18,
-                rataRata: 12,
-                max: 22,
-                min: 10,
-            },
-            laporan: {
-                lebihSla: 8,
-                kurangSla: 1,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 28,
-                rataRata: 18.67,
-                max: 34,
-                min: 16,
-            },
-            laporan: {
-                lebihSla: 10,
-                kurangSla: 2,
-            },
-        }
-    },
-    {
-        no: 12,
-        kode: 'G',
-        jenisGangguan: 'Gangguan G',
-        laporan: {
-            total: 11,
-            sudahSelesai: {
-                jml: 7,
-                persen: 63.64,
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 36.36,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 20,
-                rataRata: 14.29,
-                max: 24,
-                min: 12,
-            },
-            laporan: {
-                lebihSla: 8,
-                kurangSla: 3,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 32,
-                rataRata: 22.86,
-                max: 36,
-                min: 18,
-            },
-            laporan: {
-                lebihSla: 11,
-                kurangSla: 1,
-            },
-        }
-    },
-    {
-        no: 13,
-        kode: 'H',
-        jenisGangguan: 'Gangguan H',
-        laporan: {
-            total: 7,
-            sudahSelesai: {
-                jml: 5,
-                persen: 71.43,
-            },
-            belumSelesai: {
-                jml: 2,
-                persen: 28.57,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 16,
-                rataRata: 12.8,
-                max: 20,
-                min: 10,
-            },
-            laporan: {
-                lebihSla: 4,
-                kurangSla: 3,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 26,
-                rataRata: 20.8,
-                max: 30,
-                min: 18,
-            },
-            laporan: {
-                lebihSla: 7,
-                kurangSla: 0,
-            },
-        }
-    },
-    {
-        no: 14,
-        kode: 'I',
-        jenisGangguan: 'Gangguan I',
-        laporan: {
-            total: 14,
-            sudahSelesai: {
-                jml: 10,
-                persen: 71.43,
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 28.57,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 22,
-                rataRata: 15.71,
-                max: 28,
-                min: 10,
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 6,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 32,
-                rataRata: 22.86,
-                max: 36,
-                min: 18,
-            },
-            laporan: {
-                lebihSla: 7,
-                kurangSla: 7,
-            },
-        }
-    },
-    {
-        no: 15,
-        kode: 'J',
-        jenisGangguan: 'Gangguan J',
-        laporan: {
-            total: 10,
-            sudahSelesai: {
-                jml: 8,
-                persen: 80,
-            },
-            belumSelesai: {
-                jml: 2,
-                persen: 20,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 20,
-                rataRata: 16,
-                max: 26,
-                min: 12,
-            },
-            laporan: {
-                lebihSla: 6,
-                kurangSla: 4,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 30,
-                rataRata: 23,
-                max: 36,
-                min: 18,
-            },
-            laporan: {
-                lebihSla: 8,
-                kurangSla: 2,
-            },
-        }
-    },
-    {
-        no: 16,
-        kode: 'K',
-        jenisGangguan: 'Gangguan K',
-        laporan: {
-            total: 13,
-            sudahSelesai: {
-                jml: 9,
-                persen: 69.23,
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 30.77,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 24,
-                rataRata: 18.46,
-                max: 28,
-                min: 16,
-            },
-            laporan: {
-                lebihSla: 6,
-                kurangSla: 7,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 34,
-                rataRata: 25.38,
-                max: 40,
-                min: 20,
-            },
-            laporan: {
-                lebihSla: 9,
-                kurangSla: 4,
-            },
-        }
-    },
-    {
-        no: 17,
-        kode: 'L',
-        jenisGangguan: 'Gangguan L',
-        laporan: {
-            total: 16,
-            sudahSelesai: {
-                jml: 11,
-                persen: 68.75,
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 31.25,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 26,
-                rataRata: 19.38,
-                max: 32,
-                min: 16,
-            },
-            laporan: {
-                lebihSla: 7,
-                kurangSla: 4,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 36,
-                rataRata: 24,
-                max: 42,
-                min: 20,
-            },
-            laporan: {
-                lebihSla: 8,
-                kurangSla: 5,
-            },
-        }
-    },
-    {
-        no: 18,
-        kode: 'M',
-        jenisGangguan: 'Gangguan M',
-        laporan: {
-            total: 12,
-            sudahSelesai: {
-                jml: 8,
-                persen: 66.67,
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 33.33,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 22,
-                rataRata: 18.33,
-                max: 28,
-                min: 14,
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 7,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 32,
-                rataRata: 24,
-                max: 36,
-                min: 18,
-            },
-            laporan: {
-                lebihSla: 6,
-                kurangSla: 6,
-            },
-        }
-    },
-]
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
     })
-})
-</script>
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            let no = 0
+            queryResult.data.rekapitulasiJenisGangguan.forEach((item: any) => {
+                dataReal.value = [
+                    ...dataReal.value,
+                    {
+                        no: ++no,
+                        kode: item.tipe_permasalahan,
+                        jenisGangguan: item.tipe_permasalahan,
+                        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: item.avg_durasi_response,
+                                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: item.avg_durasi_recovery,
+                                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
+                            }
+                        }
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((queryError) => {
+        console.log(queryError)
+    })
+}
+
+const filters= ref();
+</script>

src/components/Pages/Keluhan/Table_21.vue

@@ -1,61 +1,86 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type3 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :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" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" 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="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+            <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="Durasi Response Time"
+            <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="Durasi Recovery Time"
+            <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="Unit Asal" css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+            <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="Alamat Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="posko_asal" caption="Unit Asal"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+            <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="nama_pelapor" caption="Nama Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+                css-class="custom-table-column" />
+            <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="keterangan_pelapor" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
-
-
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type3 from '@/components/Form/FiltersType/Type3.vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, 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 +89,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -75,7 +100,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,11 +116,75 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-3'
-    })
+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 { onResult, onError, loading, refetch } = 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
 })
-</script>
+
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarKeluhanDipindahkanKePoskoLain
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const filters = ref();
+</script>

src/components/Pages/Keluhan/Table_22.vue

@@ -1,64 +1,89 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type10 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :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" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" 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="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Jml Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
+            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
+            <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="Status" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+            <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="Nama Pelapor"
+            <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="Alamat Pelapor"
+            <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="No Telp Pelapor"
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor"
+            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+                css-class="custom-table-column" />
+            <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="keterangan_pelapor" caption="Keterangan Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP"
                 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 Filters from '@/components/Form/Filters.vue'
+import Type10 from '@/components/Form/FiltersType/Type10.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 +92,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -78,7 +103,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,11 +119,82 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
+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
+    }
+  }
+`
 
-    filters.setConfig({
-        type: 'type-10'
-    })
+const { onResult, onError, loading, refetch } = 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
 })
-</script>
+
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1;
+    const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100;
+    refetch({
+        minJmlLapor: minJmlLapor,
+        maxJmlLapor: maxJmlLapor,
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const filters = ref();
+</script>

src/components/Pages/Keluhan/Table_23.vue

@@ -1,61 +1,85 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type11 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :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" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" 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="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+            <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="Durasi Response Time"
+            <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="Durasi Recovery Time"
+            <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="Status" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+            <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="Nama Pelapor"
+            <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="Alamat Pelapor"
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+            <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="Keterangan 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="alamat_pelapor" caption="Alamat Pelapor"
+                css-class="custom-table-column" />
+            <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="keterangan_pelapor" caption="Keterangan Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP"
                 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 { useFiltersStore } from '@/stores/filters'
+import Filters from '@/components/Form/Filters.vue'
+import Type11 from '@/components/Form/FiltersType/Type11.vue'
+import { ref } from 'vue'
+
 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 +88,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -75,7 +99,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,11 +115,80 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-11'
-    })
+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 { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    minDurasiResponseTime: 0,
+    maxDurasiResponseTime: 0,
+    posko: '',
+    idUid: 0,
+    idUp3: 0
 })
-</script>
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    const minDurasiResponseTime = params.minDurasiResponseTime ? params.minDurasiResponseTime : 0
+    const maxDurasiResponseTime = params.maxDurasiResponseTime ? params.maxDurasiResponseTime : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        minDurasiResponseTime: minDurasiResponseTime,
+        maxDurasiResponseTime: maxDurasiResponseTime,
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarKeluhanResponseTime
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const filters = ref();
+</script>

src/components/Pages/Keluhan/Table_24.vue

@@ -1,62 +1,87 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type11 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :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" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" 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="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Jml Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
+            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
+            <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="Status" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+            <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+            <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="Alamat Pelapor"
+            <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="No Telp Pelapor"
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+            <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="nama_pelapor" caption="Nama Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+                css-class="custom-table-column" />
+            <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="keterangan_pelapor" caption="Keterangan Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP"
                 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 Filters from '@/components/Form/Filters.vue'
+import Type11 from '@/components/Form/FiltersType/Type11.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 +90,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -76,7 +101,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,11 +117,83 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
+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
+    }
+  }
+`
 
-    filters.setConfig({
-        type: 'type-11'
-    })
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    minDurasiRecoveryTime: 0,
+    maxDurasiRecoveryTime: 0,
+    posko: '',
+    idUid: 0,
+    idUp3: 0
 })
-</script>
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    const minDurasiRecoveryTime = params.minDurasiRecoveryTime ? params.minDurasiRecoveryTime : 0
+    const maxDurasiRecoveryTime = params.maxDurasiRecoveryTime ? params.maxDurasiRecoveryTime : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        minDurasiRecoveryTime: minDurasiRecoveryTime,
+        maxDurasiRecoveryTime: maxDurasiRecoveryTime,
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarKeluhanRecoveryTime
+    
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+    
+}
+const filters = ref();
+</script>

src/components/Pages/Keluhan/Table_25.vue

@@ -1,64 +1,89 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type3 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :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" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" 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="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Jml Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
+            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
+            <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="Status" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+            <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+            <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="Alamat Pelapor"
+            <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="No Telp Pelapor"
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor"
+            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+                css-class="custom-table-column" />
+            <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="keterangan_pelapor" caption="Keterangan Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Nama ULP"
                 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 Filters from '@/components/Form/Filters.vue'
+import Type3 from '@/components/Form/FiltersType/Type3.vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, 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 +92,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -78,7 +103,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,11 +119,73 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
+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
+    ) {
+      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
+    }
+  }
+`
 
-    filters.setConfig({
-        type: 'type-3'
-    })
+const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
 })
-</script>
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
+    
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const filters = ref();
+</script>

src/components/Pages/Keluhan/Table_26.vue

@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type3 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -8,52 +14,72 @@
             <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" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat 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="No Telp 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="Keterangan 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="keterangan_pelapor" caption="Keterangan Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+                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="150" alignment="center" data-field="" caption="Response Time"
+            <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Response Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Recovery Time"
+            <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
                 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="Tgl Media" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Media"
+            <DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
                 css-class="custom-table-column" />
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type3 from '@/components/Form/FiltersType/Type3.vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, 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 +88,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -73,7 +99,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,11 +115,75 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
+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
+    }
+  }
+`
 
-    filters.setConfig({
-        type: 'type-3'
-    })
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
 })
-</script>
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
+    
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const filters = ref();
+</script>

src/components/Pages/Keluhan/Table_27.vue

@@ -1,42 +1,51 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type3 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :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" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Contact Center"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="UI Dist." css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="ULP" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" 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 Tlp Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Tlp 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="APKT Status" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Created By" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Penyelesaian"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Lapor Ulang" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Sumber Lapor"
+            <DxColumn :width="170" alignment="center" data-field="media" caption="Sumber Lapor"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Issue Type" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Sub Issue Type"
@@ -46,15 +55,29 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type3 from '@/components/Form/FiltersType/Type3.vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, 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 +86,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -74,7 +97,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,11 +113,77 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
+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
+        }
+        }
+`
 
-    filters.setConfig({
-        type: 'type-3'
-    })
+const { onResult, onError ,loading,refetch} = useQuery(GET_DATA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0,
+    media: 'Twitter'
 })
-</script>
+const filters = ref();
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    const media = params.media ? params.media.id : ''
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+        media: media
+    })
+
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+</script>

src/components/Pages/Keluhan/Table_28.vue

@@ -1,108 +1,203 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+<Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type3 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+  <div>
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+         <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Selesai"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="InProgress"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> SLA"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> SLA"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA"
-                    css-class="custom-table-column" />
-            </DxColumn>
-
-        </DxDataGrid>
-    </div>
+      <DxColumn :width="170" alignment="center" data-field="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="total" data-type="number" caption="Total"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Selesai"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="InProgress"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption="> SLA"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤ SLA"
+          css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_recovery" data-type="number" caption="> SLA"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number" caption="≤ SLA"
+          css-class="custom-table-column" />
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type3 from '@/components/Form/FiltersType/Type3.vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, 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 dataDetail = ref<any>()
+const showDetail = ref(false)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
+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
+        }
+}`
 
-    filters.setConfig({
-        type: 'type-3',
-        reportButton: true
+  const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+  })
+  const filters = ref();
+
+const filterData = (params: any) => {
+  const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
     })
-})
-</script>
+
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiKeluhanAll
+     
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
+}
+</script>

src/components/Pages/Keluhan/Table_29.vue

@@ -1,88 +1,113 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type13 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Fungsi Bidang"
+            <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="fungsiBidang" caption="Fungsi Bidang"
                 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 :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="totalSelesai" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persenSelesai" 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 :width="150" alignment="center" data-field="totalInProcess" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persenInProcess" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                         css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="avgDurasiResponse" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="maxDurasiResponse" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="minDurasiResponse" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="totalDiatasSlaResponse" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="totalDibawahSlaResponse" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                         css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="avgDurasiPenyelesaian" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="maxDurasiPenyelesaian" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="minDurasiPenyelesaian" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="totalDiatasSlaPenyelesaian" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="totalDibawahSlaPenyelesaian" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
-
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type13 from '@/components/Form/FiltersType/Type13.vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { 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 dataDetail = ref<any>()
+const showDetail = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -90,7 +115,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -101,7 +126,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -117,12 +142,78 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-13',
-        reportButton: true
-    })
+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
+    ) {
+      avgDurasiPenyelesaian
+      avgDurasiResponse
+      fungsiBidang
+      maxDurasiPenyelesaian
+      maxDurasiResponse
+      minDurasiPenyelesaian
+      minDurasiResponse
+      persenInProcess
+      persenSelesai
+      total
+      totalDiatasSlaPenyelesaian
+      totalDiatasSlaResponse
+      totalDibawahSlaPenyelesaian
+      totalDibawahSlaResponse
+      totalDurasiPenyelesaian
+      totalDurasiResponse
+      totalInProcess
+      totalSelesai
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
 })
-</script>
+const filters = ref();
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+
+
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiKeluhanPerFungsiBidang
+
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+
+}
+</script>

src/components/Pages/Keluhan/Table_30.vue

@@ -1,80 +1,89 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type3 @update:filters="(value) => {
+                filters = value
+            }
+            " />
+    </Filters>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Jenis Keluhan"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="tipe_permasalahan" caption="Jenis Keluhan"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                         css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                         css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
-
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import Filters from '@/components/Form/Filters.vue'
+import Type3 from '@/components/Form/FiltersType/Type3.vue'
+import { ref } from 'vue'
+
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -82,6 +91,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,11 +128,84 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
 
-    filters.setConfig({
-        type: 'type-3'
-    })
+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 { onResult, onError, loading,refetch } = useQuery(GET_DATA, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
 })
-</script>
+const filters = ref();
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+
+
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
+                ;
+
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+
+}
+</script>

src/components/Pages/Keluhan/Table_31.vue

@@ -1,18 +1,26 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type13 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="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 +81,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type13 from '@/components/Form/FiltersType/Type13.vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -82,6 +92,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,12 +129,83 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
 
-    filters.setConfig({
-        type: 'type-13',
-        reportButton: true
-    })
+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 { onResult, onError ,loading,refetch} = useQuery(GET_DATA, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
 })
+const filters = ref();
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+
+
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
+                ;
+        
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
 </script>

src/components/Pages/Keluhan/Table_32.vue

@@ -1,128 +1,345 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+<Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type13 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+  <div>
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :data-source="data"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+         <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tanggal Lapor"
-                css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                    css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+        caption="NO"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="tanggal"
+        caption="Tanggal Lapor"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
+        <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type13 from '@/components/Form/FiltersType/Type13.vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-13',
-        reportButton: true
-    })
+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 { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  posko: '',
+  idUid: 0,
+  idUp3: 0
 })
-</script>
+const filters = ref();
+
+const filterData = (params: any) => {
+  const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+
+  onResult((queryResult) => {
+    
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
+
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
+ }
+</script>

src/components/Pages/Keluhan/Table_33.vue

@@ -1,127 +1,217 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+<Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type8 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+  <div>
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+         <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                    css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-
-        </DxDataGrid>
-    </div>
+      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO" css-class="custom-table-column" />
+      <DxColumn :width="170" alignment="center" data-field="posko" caption="Unit" css-class="custom-table-column" />
+      <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
+          css-class="custom-table-column" />
+        <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+            css-class="custom-table-column" />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+            css-class="custom-table-column" />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
+            css-class="custom-table-column" />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
+            css-class="custom-table-column" />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
+            css-class="custom-table-column" />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
+            css-class="custom-table-column" />
+        </DxColumn>
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type8 from '@/components/Form/FiltersType/Type8.vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-8',
-        reportButton: true
-    })
+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 { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  posko: '',
+  idUid: 0,
+  idUp3: 0
 })
-</script>
+const filters = ref();
+
+const filterData = (params: any) => {
+  const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiKeluhanPerUnit
+     
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
+  
+}
+</script>

src/components/Pages/Keluhan/Table_34.vue

@@ -1,86 +1,177 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+<Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type3 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+  <div>
+    <DxDataGrid class="max-h-[calc(100vh-140px)]"  :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      :word-wrap-enabled="true">
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+         <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
-                    css-class="custom-table-column" />
-            </DxColumn>
-
-        </DxDataGrid>
-    </div>
+      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO" css-class="custom-table-column" />
+      <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media" css-class="custom-table-column" />
+      <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
+        <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
+                    :caption="i" css-class="custom-table-column" />
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type3 from '@/components/Form/FiltersType/Type3.vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-3'
-    })
+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 { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  posko: '',
+  idUid: 0,
+  idUp3: 0
 })
-</script>
+const filters = ref();
+
+const filterData = (params: any) => {
+  const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
+  
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
+}
+</script>

src/components/Pages/Keluhan/Table_35.vue

@@ -1,60 +1,68 @@
 <template>
+<Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type8 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <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 css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+            <DxColumn :width="150" alignment="center" data-field="regu" caption="Kode Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="in_process" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="selesai" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_rating" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_rating" data-type="number" caption="%"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="1"
+                    <DxColumn :width="150" alignment="center" data-field="rating_1" data-type="number" caption="1"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="2"
+                    <DxColumn :width="150" alignment="center" data-field="rating_2" data-type="number" caption="2"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="3"
+                    <DxColumn :width="150" alignment="center" data-field="rating_3" data-type="number" caption="3"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="4"
+                    <DxColumn :width="150" alignment="center" data-field="rating_4" data-type="number" caption="4"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="5"
+                    <DxColumn :width="150" alignment="center" data-field="rating_5" data-type="number" caption="5"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Indeks"
+                    <DxColumn :width="150" alignment="center" data-field="indeks_rating" data-type="number" caption="Indeks"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                <DxColumn :width="150" alignment="center" data-field="jumlah_non_rating" data-type="number" caption="Jml"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                <DxColumn :width="150" alignment="center" data-field="persen_non_rating" data-type="number" caption="%"
                     css-class="custom-table-column" />
             </DxColumn>
 
@@ -63,7 +71,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type8 from '@/components/Form/FiltersType/Type8.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 +82,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,12 +119,80 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
 
-    filters.setConfig({
-        type: 'type-8',
-        reportButton: true
+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 { onResult, onError ,loading,refetch} = useQuery(GET_DATA, {
+        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
     })
-})
+const filters = ref();
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+
+    
+
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit;
+          
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+  
+}
 </script>

src/components/Pages/Material/Table_68.vue

@@ -7,7 +7,8 @@
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :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" />
 

src/components/Pages/Material/Table_69.vue

@@ -7,7 +7,8 @@
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :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" />
 

src/components/Pages/MenuProvider.vue

@@ -1,25 +1,20 @@
 <template>
-    <main
-        class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
-        <div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
-            <h1 class="text-xl font-semibold md:text-3xl text-dark">{{ pageTitle }}</h1>
-        </div>
-        <div class="flex-1 mt-2 sm:mt-4 dx-viewport">
-            <Filters :report-button="filters.config.reportButton" class="mb-4" v-if="filters.config.component">
-                <component :is="filters.config.component" />
-            </Filters>
-
-            <slot></slot>
-        </div>
-    </main>
+  <main
+    class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar"
+  >
+    <div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
+      <h1 class="text-xl font-semibold md:text-3xl text-dark">{{ pageTitle }}</h1>
+    </div>
+    <div class="flex-1 mt-2 sm:mt-4 dx-viewport">
+      <slot></slot>
+    </div>
+  </main>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { useFiltersStore } from '@/stores/filters';
-
-import Filters from '../Form/Filters.vue'
+import { useFiltersStore } from '@/stores/filters'
 
 // Dapatkan objek route dari vue-router
 const route = useRoute()
@@ -27,4 +22,4 @@ const route = useRoute()
 // Dapatkan nama rute menggunakan computed property
 const pageTitle = computed(() => route.name)
 const filters = useFiltersStore()
-</script>
+</script>

src/components/Pages/Monalisa/Table_36.vue

@@ -1,33 +1,41 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :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-if="loading" 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="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-type="text" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,16 +44,38 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
+import { onMounted, ref, } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { getMonthName } from '@/utils/texts'
+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 data = ref<any[]>([])
+
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -53,7 +83,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -64,7 +94,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')
@@ -74,18 +104,76 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
+const MONALISAJUMLAHKALIGANGGUAN = gql`
+  query DaftarMonalisaJumlahKaliGangguan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaJumlahKaliGangguan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGGUAN, {
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0,
+    bulan: bulanSekarang.value,
+    tahun: tahunSekarang.value
+})
 
+const filterData = (params: any) => {
+    const {regional, posko, idUid, idUp3, bulan, tahun} = params;
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
+    refetch({
+        regional: regional,
+        posko: posko,
+        idUid: idUid  ? idUid : 0,
+        idUp3: idUp3 ? idUp3 : 0,
+        bulan: bulan ? bulan : bulanSekarang.value,
+        tahun: bulan ? tahun : tahunSekarang.value
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.monalisaJumlahKaliGangguan;
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
 onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
-</script>
+    console.log(bulanSekarang.value)
+});
+const filters= ref();
+</script>

src/components/Pages/Monalisa/Table_37.vue

@@ -1,33 +1,41 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah Dispatching Time Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        caption="Des 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        caption="Des 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        caption="Jan 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,16 +44,39 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { 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 { 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'
+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 dataDetail = ref<any>()
+const showDetail = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -53,7 +84,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -64,7 +95,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')
@@ -74,18 +105,75 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
+const monalisaDispatchingTimeGangguan = gql`
+  query DaftarmonalisaDispatchingTimeGangguan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaDispatchingTimeGangguan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTimeGangguan, {
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023
+})
+const filterData = (params: any) => {
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
 
+    refetch({
+        regional: regional,
+        posko: posko,
+        idUid: idUid ? idUid : 0,
+        idUp3: idUp3 ? idUp3 : 0,
+        bulan: bulan ? bulan : 10,
+        tahun: bulan ? tahun : 2023
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaDispatchingTimeGangguan.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
-</script>
+const filters = ref()
+</script>

src/components/Pages/Monalisa/Table_38.vue

@@ -1,33 +1,41 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RCT Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        caption="Des 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        caption="Des 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        caption="Jan 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,7 +44,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -45,6 +55,76 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+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 dataDetail = ref<any>()
+const showDetail = ref(false)
+
+const monalisaRecoveryTimeKeluhan = gql`
+  query DaftarmonalisaRecoveryTimeKeluhan($regional:regional, $posko: String, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
+    monalisaRecoveryTimeKeluhan(
+      regional:$regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        jumlah_bulan
+        jumlah_bulan_n_1
+        jumlah_tahun
+        jumlah_tahun_n_1
+        nama_posko
+        persen_bulan
+        persen_tahun
+    }
+  }
+`;
+const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
+    regional: "",
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023,
+})
+const filterData = (params: any) => {
+
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+
+    refetch({
+        regional: regional,
+        posko: posko,
+        idUid: idUid ? idUid : 0,
+        idUp3: idUp3 ? idUp3 : 0,
+        bulan: bulan ? bulan : 10,
+        tahun: bulan ? tahun : 2023
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaRecoveryTimeKeluhan.forEach((item: any) => {
+                data.value = [...data.value, {
+                    ...item,
+                }];
+            });
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -80,12 +160,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_39.vue

@@ -1,33 +1,41 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RPT Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        caption="Des 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        caption="Des 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        caption="Jan 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,15 +44,104 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { 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 gql from 'graphql-tag'
+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 dataDetail = ref<any>()
+const showDetail = ref(false)
+const monalisaResponseTimeKeluhan = gql`
+  query DaftarmonalisaResponseTimeKeluhan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaResponseTimeKeluhan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaResponseTimeKeluhan, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const filterData = (params: any) => {
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+
+    refetch({
+        regional: regional,
+        posko: posko,
+        idUid: idUid ? idUid : 0,
+        idUp3: idUp3 ? idUp3 : 0,
+        bulan: bulan ? bulan : 10,
+        tahun: bulan ? tahun : 2023
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaResponseTimeKeluhan.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -53,7 +150,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -64,7 +161,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')
@@ -80,12 +177,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
-</script>
+const filters = ref()
+</script>

src/components/Pages/Monalisa/Table_40.vue

@@ -1,127 +1,223 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type2 @update:filters="(value) => {
+      filters = value
+    }
+      " />
+  </Filters>
+  <div>
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Gangguan" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
-                    <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                </DxColumn>
-                <DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
-                    <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                </DxColumn>
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+        css-class="custom-table-column" />
+      <DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Gangguan" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
+          <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="total_rpt_bulan"
+              css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="b" data-type="number"
+              data-field="jumlah_gangguan_rpt_bulan" css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field="rpt_gangguan_bulan"
+              css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_bulan"
+              css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="e" data-type="number"
+              data-field="jumlah_gangguan_rct_bulan" css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field="rct_gangguan_bulan"
+              css-class="custom-table-column" />
+          </DxColumn>
+        </DxColumn>
+        <DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
+          <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="total_rpt_sampai_bulan"
+              css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="b" data-type="number"
+              data-field="jumlah_gangguan_rpt_sampai_bulan" css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number"
+              data-field="rpt_gangguan_sampai_bulan" css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_sampai_bulan"
+              css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="e" data-type="number"
+              data-field="jumlah_gangguan_rct_sampai_bulan" css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number"
+              data-field="rch_gangguan_sampai_bulan" css-class="custom-table-column" />
+          </DxColumn>
+        </DxColumn>
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { 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'
-
-const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
-
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
-
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
-
-        e.cancel = true
+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'
+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 dataDetail = ref<any>()
+const showDetail = ref(false)
+const monalisaJumlahDurasiRptRctGangguan = gql`
+  query DaftarmonalisaJumlahDurasiRptRctGangguan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaJumlahDurasiRptRctGangguan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_gangguan_rct_bulan
+      jumlah_gangguan_rct_sampai_bulan
+      jumlah_gangguan_rpt_bulan
+      jumlah_gangguan_rpt_sampai_bulan
+      nama_posko
+      rct_gangguan_bulan
+      rct_gangguan_sampai_bulan
+      rpt_gangguan_bulan
+      rpt_gangguan_sampai_bulan
+      total_rct_bulan
+      total_rct_sampai_bulan
+      total_rpt_bulan
+      total_rpt_sampai_bulan
     }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRptRctGangguan, {
+  bulan: 10,
+  tahun: 2023,
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+
+  refetch({
+    regional: regional,
+    posko: posko,
+    idUid: idUid ? idUid : 0,
+    idUp3: idUp3 ? idUp3 : 0,
+    bulan: bulan ? bulan : 10,
+    tahun: bulan ? tahun : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.monalisaJumlahDurasiRptRctGangguan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+onError((error) => {
+  console.log(error)
+})
+}
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
+
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
+
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
+const filters = ref()
 
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
-</script>
+</script>

src/components/Pages/Monalisa/Table_41.vue

@@ -1,37 +1,134 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
+            column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="" caption="ID Gangguan" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="" caption="Jenis Gangguan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Jumlah" css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="%" css-class="custom-table-column" />
-
+            <DxColumn :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO"
+                css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="id_gangguan" caption="ID Gangguan" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="tipe_permasalahan" caption="Jenis Gangguan"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah"
+                css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="persen_gangguan" caption="%"
+                css-class="custom-table-column" />
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { 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 { 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'
+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 dataDetail = ref<any>()
+const showDetail = ref(false)
+const monalisaGangguanPerJenisGangguan = gql`
+  query DaftarmonalisaGangguanPerJenisGangguan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaGangguanPerJenisGangguan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      id_gangguan
+      jumlah
+      persen_gangguan
+      tipe_permasalahan
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanPerJenisGangguan, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const filterData = (params: any) => {
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
 
+    refetch({
+        regional: regional,
+        posko: posko,
+        idUid: idUid ? idUid : 0,
+        idUp3: idUp3 ? idUp3 : 0,
+        bulan: bulan ? bulan : 10,
+        tahun: bulan ? tahun : 2023
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaGangguanPerJenisGangguan.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -39,7 +136,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -50,7 +147,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')
@@ -66,12 +163,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
-</script>
+const filters = ref()
+</script>

src/components/Pages/Monalisa/Table_42.vue

@@ -1,33 +1,41 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        caption="Des 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        caption="Des 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        caption="Jan 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,16 +44,104 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { 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 { 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'
+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 dataDetail = ref<any>()
+const showDetail = ref(false)
+const monalisaRekapitulasiLaporUlangGangguan = gql`
+  query DaftarmonalisaRekapitulasiLaporUlangGangguan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaRekapitulasiLaporUlangGangguan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLaporUlangGangguan, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const filterData = (params: any) => {
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
 
+    refetch({
+        regional: regional,
+        posko: posko,
+        idUid: idUid ? idUid : 0,
+        idUp3: idUp3 ? idUp3 : 0,
+        bulan: bulan ? bulan : 10,
+        tahun: bulan ? tahun : 2023
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaRekapitulasiLaporUlangGangguan.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -53,7 +149,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -64,7 +160,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')
@@ -80,12 +176,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
-</script>
+const filters = ref()
+</script>

src/components/Pages/Monalisa/Table_43.vue

@@ -1,33 +1,41 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        caption="Des 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        caption="Des 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        caption="Jan 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,16 +44,104 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { 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 { 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'
+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 dataDetail = ref<any>()
+const showDetail = ref(false)
+const monalisaRekapitulasiEnsGangguan = gql`
+  query DaftarmonalisaRekapitulasiEnsGangguan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaRekapitulasiEnsGangguan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEnsGangguan, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const filterData = (params: any) => {
+    const {regional, posko, idUid, idUp3, bulan, tahun} = params;
 
+    refetch({
+        regional: regional,
+        posko: posko,
+        idUid: idUid  ? idUid : 0,
+        idUp3: idUp3 ? idUp3 : 0,
+        bulan: bulan ? bulan : 10,
+        tahun: bulan ? tahun : 2023
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaRekapitulasiEnsGangguan.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -53,7 +149,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -64,7 +160,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')
@@ -80,12 +176,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
-</script>
+const filters = ref()
+</script>

src/components/Pages/Monalisa/Table_44.vue

@@ -1,12 +1,19 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -25,16 +32,105 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { 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 { 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'
+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 dataDetail = ref<any>()
+const showDetail = ref(false)
+const monalisaGangguanBelumSelesai = gql`
+  query DaftarmonalisaGangguanBelumSelesai(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaGangguanBelumSelesai(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSelesai, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const filterData = (params: any) => {
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        bulan: 10,
+        tahun: 2023,
+        regional: '',
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaGangguanBelumSelesai.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -42,7 +138,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -53,7 +149,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')
@@ -69,12 +165,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
-</script>
+const filters = ref()
+</script>

src/components/Pages/Monalisa/Table_45.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -7,27 +13,28 @@
             <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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,7 +43,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
+import { ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -79,13 +88,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params: any) => {
+    console.log(params)
+}
+const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_46.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -7,27 +13,28 @@
             <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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RCT Kali Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,7 +43,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
+import { ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -45,7 +54,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+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)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -79,13 +95,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_47.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -7,27 +13,28 @@
             <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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RPT Kali Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,8 +43,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -45,7 +53,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+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)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -79,13 +94,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_48.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -7,12 +13,13 @@
             <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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
                     <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
@@ -72,8 +79,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -81,7 +89,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+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)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -115,13 +130,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_49.vue

@@ -1,12 +1,19 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -22,8 +29,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -31,7 +39,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+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)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -65,13 +80,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_50.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -7,27 +13,28 @@
             <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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,8 +43,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -45,7 +53,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+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)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -79,13 +94,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_51.vue

@@ -1,12 +1,19 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -25,8 +32,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -34,7 +42,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+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)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -68,13 +83,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_52.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -7,7 +13,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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -82,8 +89,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -91,7 +99,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+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)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -125,13 +140,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_53.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -7,7 +13,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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -44,8 +51,10 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
+
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -53,7 +62,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+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)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -87,13 +103,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_54.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -7,7 +13,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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -34,8 +41,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -43,7 +51,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+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)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -77,13 +92,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_55.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -7,7 +13,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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -36,8 +43,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -45,7 +53,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+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)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -79,13 +94,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_56.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -7,7 +13,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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -69,8 +76,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -78,7 +86,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+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)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -112,13 +127,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_57.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -7,7 +13,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-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -44,8 +51,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -53,7 +61,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+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)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -87,13 +102,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>