Merge pull request #2 from defuj/dev-eko-vm

Dev eko vm

package.json

@@ -17,16 +17,20 @@
   "dependencies": {
     "@apollo/client": "^3.8.10",
     "@apollo/link-context": "^2.0.0-beta.3",
+    "@flavorly/vanilla-components": "^0.7.65",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@headlessui/vue": "^1.7.16",
+    "@headlessui/vue": "^1.7.19",
     "@heroicons/vue": "^2.0.18",
     "@lottiefiles/lottie-player": "^2.0.2",
     "@phosphor-icons/vue": "^2.1.6",
+    "@popperjs/core": "^2.11.8",
     "@types/qs": "^6.9.9",
     "@types/uuid": "^9.0.2",
+    "@types/vue-select": "^3.16.8",
     "@vue/apollo-components": "^4.0.0",
     "@vue/apollo-composable": "^4.0.1",
     "@vue/apollo-option": "^4.0.0",
+    "@vueform/multiselect": "^2.6.6",
     "axios": "^1.6.7",
     "devextreme": "23.1.5",
     "devextreme-vue": "23.1.5",
@@ -37,6 +41,7 @@
     "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
     "jspdf": "^2.5.1",
+    "jspdf-autotable": "^3.8.2",
     "nvm": "^0.0.4",
     "pinia": "^2.1.3",
     "qs": "^6.11.2",
@@ -51,7 +56,7 @@
     "@rushstack/eslint-patch": "^1.5.1",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.6",
+    "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@tsconfig/node18": "^2.0.1",
     "@types/file-saver": "^2.0.6",

src/components/Button.vue

@@ -45,6 +45,7 @@ const buttonStyle = computed(() => {
 })
 
 const emit = defineEmits(['on:click'])
+
 </script>
 
 <template>

src/components/DatePicker.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// import { useDateStore } from '@/stores/date';
 import { PhCalendarBlank } from '@phosphor-icons/vue'
 import { ref, watch } from 'vue'
 
@@ -12,7 +11,25 @@ const formatter = ref({
 })
 
 const emit = defineEmits(['update:dateValue'])
-
+const customShortcuts = () => {
+  return [
+    {
+      label: "Last 15 Days",
+      atClick: () => {
+        const date = new Date();
+        return [new Date(date.setDate(date.getDate() + 1)), date];
+      },
+    },
+    {
+      label: "Last Years",
+      atClick: () => {
+        const date = new Date();
+        return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()];
+      },
+    },
+   
+  ];
+};
 watch(dateValue, (newValue) => {
   emit('update:dateValue', newValue)
 })
@@ -24,8 +41,8 @@ watch(dateValue, (newValue) => {
       v-model="dateValue"
       :formatter="formatter"
       separator=" s/d "
-      :shortcuts="false"
-      :auto-apply="false"
+      :shortcuts="customShortcuts"
+      :auto-apply="true"
       as-single
       use-range
       v-slot="{ value, placeholder }"

src/components/Form/Filters.vue

@@ -2,19 +2,10 @@
 <script setup lang="ts">
 // components
 import Button from '@/components/Button.vue'
-import { useSearchStore } from '@/stores/filtersAction'
-
 // icons
 import { PhArrowsCounterClockwise, PhFileText, PhMagnifyingGlass } from '@phosphor-icons/vue'
-const cariButton = useSearchStore()
-defineProps({
-  reportButton: {
-    type: Boolean,
-    default: false
-  }
-})
 
-const emit = defineEmits(['runSearch'])
+const emit = defineEmits(['runSearch','resetForm'])
 </script>
 
 <template>
@@ -26,7 +17,7 @@ const emit = defineEmits(['runSearch'])
     <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
-          @click="() => (cariButton.isTriggerChange = !cariButton.isTriggerChange)"
+          @on:click="() => emit('resetForm')"
           label="Ulangi"
           style-type="outline"
           class-name="bg-white"
@@ -35,11 +26,10 @@ const emit = defineEmits(['runSearch'])
         </Button>
 
         <Button
-          v-if="reportButton"
           label="Lihat Laporan"
           style-type="outline"
           class-name="bg-white"
-        >
+        > 
           <PhFileText size="18" class="ml-1" weight="regular" />
         </Button>
 

src/components/Form/FiltersType/Type1.vue

@@ -1,27 +1,26 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
 import {
   selectedUid,
   selectedUp3Posko,
   selectedPosko,
-  fetchUid,
   itemsUid,
   itemsUp3,
-  itemsPosko
+  itemsPosko,
+  fetchUid
 } from './reference'
-
-import Select from '@/components/Select.vue'
-import DatePicker from '@/components/DatePicker.vue'
+import { onMounted, ref, watch } from 'vue'
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
-const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const up3placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
-const uppp = ref({ id: 0, name: uppPlaceholder })
+const up3 = ref({ id: 0, name: up3placeholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
-const posko = ref({ id: "", name: poskoPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
-  up3: uppp.value,
+  up3: up3.value,
   posko: posko.value,
   periode: ''
 })
@@ -33,14 +32,14 @@ watch(data.value, (value) => {
 const setUid = (value: any) => {
   uid.value = value
   selectedUid(value)
-  uppp.value = { id: 0, name: uppPlaceholder }
+  up3.value = { id: 0, name: up3placeholder }
   data.value.uid = value
 }
 
 const setUp3 = (value: any) => {
-  uppp.value = value
+  up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: "", name: poskoPlaceholder }
+  posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
 }
 
@@ -51,26 +50,22 @@ const setPosko = (value: any) => {
 }
 
 onMounted(() => {
-  emit('update:filters', data.value)
   fetchUid()
+  emit('update:filters', data.value)
 })
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
-      >Unit Induk Distribusi/Wilayah:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
+    <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 @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp" :placeholder="uppPlaceholder" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3placeholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type10.vue

@@ -18,13 +18,13 @@ 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 up3 = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
 const ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
-  up3: uppp.value,
+  up3: up3.value,
   posko: ulp.value,
   periode: '',
   minJmlLapor: 1,
@@ -33,12 +33,12 @@ const data = ref({
 const setUid = (value: any) => {
   uid.value = value;
   selectedUid(value);
-  uppp.value = { id: 0, name: up3Placeholder };
+  up3.value = { id: 0, name: up3Placeholder };
   data.value.uid = value;
 };
 
 const setUp3 = (value: any) => {
-  uppp.value = value;
+  up3.value = value;
   selectedUp3Ulp(value);
   ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
@@ -78,6 +78,7 @@ onMounted(() => {
     <Select 
       @update:selected="setUp3($event)" 
       :data="itemsUp3" 
+      :selected="up3"
       :placeholder="up3Placeholder"
     />
   </div>
@@ -90,6 +91,7 @@ onMounted(() => {
     <Select
       @update:selected="setUlp($event)"
       :data="itemsUlp"
+      :selected="ulp"
       :placeholder="ulpPlaceholder"
     />
   </div>

src/components/Form/FiltersType/Type11.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-  
+
 import { onMounted, ref, watch } from 'vue'
+import { useTotalDuration } from '@/stores/totalDuration';
+
 import {
   selectedUid,
   selectedUp3Ulp,
@@ -13,14 +15,15 @@ import {
 
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-
+import InputWithSuffix from '@/components/Form/InputWithSuffix.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 up3 = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
 const ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
+
 const sla = [
   {
     id: 1,
@@ -33,21 +36,21 @@ const sla = [
 ];
 const data = ref({
   uid: uid.value,
-  up3: uppp.value,
+  up3: up3.value,
   posko: ulp.value,
   periode: '',
-  minDurasiRecoveryTime: 1,
-  maxDurasiRecoveryTime: 1
+  minTime: 1,
+  maxTime: 1
 })
 const setUid = (value: any) => {
   uid.value = value;
   selectedUid(value);
-  uppp.value = { id: 0, name: up3Placeholder };
+  up3.value = { id: 0, name: up3Placeholder };
   data.value.uid = value;
 };
 
 const setUp3 = (value: any) => {
-  uppp.value = value;
+  up3.value = value;
   selectedUp3Ulp(value);
   ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
@@ -58,25 +61,34 @@ const setUlp = (value: any) => {
   selectedUlp(value);
   data.value.posko = value;
 };
+const setMin = (value: any) => {
+  console.log(value)
+  data.value.minTime = value
+  useTotalDuration().setDataMin(value)
+
+}
+const setMax = (value: any) => {
+  data.value.maxTime = value
+  useTotalDuration().setDataMax(value)
+}
 const triggerInput = ref(false)
 const changeDuration = (value: any) => {
   if (value.id === 0) {
+    setMin("1")
+    setMax("5")
     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
+    setMin("1")
+    setMax("45")
     console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
     triggerInput.value = true
   } else {
-    data.value.minDurasiRecoveryTime = 46
-    data.value.maxDurasiRecoveryTime = 99999 * 60 * 24
+    setMin("45")
+    setMax(99999 * 60 * 24)
     triggerInput.value = true
     console.log('Melebihi SLA (> 45 menit)')
   }
-
 }
 onMounted(() => {
   emit('update:filters', data.value)
@@ -88,43 +100,27 @@ onMounted(() => {
   <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="setUid($event)" 
-      :data="itemsUid" 
-      :placeholder="uidPlaceholder"
-    />
+    <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
-      @update:selected="setUp3($event)"
-      :data="itemsUp3"
-      :placeholder="up3Placeholder"
-    />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :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
-      @update:selected="setUlp($event)"
-      :data="itemsUlp"
-      :placeholder="ulpPlaceholder"
-    />
+    <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 @update:date-value="(value) => {
-        data.periode = value
-      }
+    <DatePicker @update:date-value="(value) => {
+      data.periode = value
+    }
       " />
   </div>
 
@@ -132,31 +128,13 @@ onMounted(() => {
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
-      <Select 
-        @update:selected="changeDuration($event)" 
-        :data="sla" 
-        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 
-          @update:minute-value="
-          (value :any)=> {
-            data.minDurasiRecoveryTime =value
-          }
-          "
-        @value="data.minDurasiRecoveryTime"
-        :disabled=triggerInput />
+        <InputWithSuffix :value="`${data.minTime} Menit`" />
         <small class="flex items-center">s/d</small>
-        <InputWithSuffix 
-          @update:minute-value="
-          (value :any)=> {
-            data.maxDurasiRecoveryTime = value
-          }
-          "
-        @value="data.maxDurasiRecoveryTime"
-        :disabled="triggerInput" />
+        <InputWithSuffix :value="`${data.maxTime} Menit`" />
       </div>
     </div>
   </div>
+
 </template>

src/components/Form/FiltersType/Type13.vue

@@ -53,7 +53,7 @@ onMounted(() => {
   <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="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -77,6 +77,6 @@ onMounted(() => {
     <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' }]" />
+    }" :radio-items="[{ id: 1, title: 'Tidak' }, { id: 2, title: 'Ya, Grupkan' }]" />
   </div>
 </template>

src/components/Form/FiltersType/Type14.vue

@@ -1,41 +1,63 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-import { 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 });
+import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
+import { onMounted, ref } from 'vue';
+const uidPlaceholder = 'Semua Distribusi/Wilayah';
+const up3Placeholder = 'Semua Area';
+const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
+const up3 = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: "", name: ulpPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
-  up3: uppp.value,
-  posko: ulp.value,
+  up3: up3.value,
+  posko: posko.value,
   periode: '',
-  group: 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">Distribusi/Wilayah:</label>
-
-    <Select placeholder="Semua 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">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Area:</label>
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
 
-    <Select placeholder="Semua Area" />
   </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="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
 
-    <Select placeholder="Semua Posko" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type16.vue

@@ -19,8 +19,8 @@ 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: "", name: poskoPlaceholder })
-const media = ref({ id: 0, name: mediaPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
+const media = ref({ id: "", name: mediaPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -44,7 +44,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: "", name: poskoPlaceholder }
+  posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
 }
 

src/components/Form/FiltersType/Type18.vue

@@ -1,19 +1,36 @@
-<!-- <script setup lang="ts">
+<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();
+import { onMounted, ref } from 'vue';
 
-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' },
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const poskoPlaceholder = 'Semua Posko';
+const up3 = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const posko = ref({ id: "", name: poskoPlaceholder });
+const emit = defineEmits(['update:filters'])
+const jenisTransakasi = [
+    { id: 1, value: 'Koreksi Transaksi Individual',label: 'Koreksi Transaksi Individual' },
+    { id: 2, value: 'Cleansing Traksaksi TM',label: 'Cleansing Traksaksi TM',  }, 
+    { id: 3, value: 'Koreksi Transaksi TM',label: 'Koreksi Transaksi TM',  },  
+    { id: 4, value: 'Koreksi Kode Gangguan dan Anev',label: 'Koreksi Kode Gangguan dan Anev'  },
   ]
-
+  const data = ref({
+  uid: uid.value,
+  up3: up3.value,
+  posko: posko.value,
+  periode: '',
+  jenisTransaksi: [],
+  group: 1
+})
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </script>
 
 <template>
@@ -26,24 +43,29 @@ const departments = [
   <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" />
+    <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3" :selected="up3" 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" />
+    <Select @update:selected="selectedPosko($event)" :data="itemsPosko" :selected="posko" 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" />
+    <SelectMulti 
+      :tags="jenisTransakasi" 
+      placeholder="Semua Jenis Transaksi" 
+      useLabel 
+      label="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  />
+    <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
-</template> -->
-
-<template></template>
+</template>

src/components/Form/FiltersType/Type3.vue

@@ -1,43 +1,48 @@
 <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';
+import { selectedUid, selectedUp3Ulp, selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
+import { onMounted, ref, watch } 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 up3 = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: "", name: ulpPlaceholder });
+const ulp = ref({ id: 0, name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
+
 const data = ref({
   uid: uid.value,
-  up3: uppp.value,
-  posko: ulp.value,
+  up3: up3.value,
+  ulp: ulp.value,
   periode: ''
 })
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
+
 const setUid = (value: any) => {
   uid.value = value;
   selectedUid(value);
-  uppp.value = { id: 0, name: up3Placeholder };
+  up3.value = { id: 0, name: up3Placeholder };
   data.value.uid = value;
 };
 
 const setUp3 = (value: any) => {
-  uppp.value = value;
+  up3.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: "", name: ulpPlaceholder };
+  ulp.value = { id: 0, name: ulpPlaceholder };
   data.value.up3 = value;
 };
 
 const setUlp = (value: any) => {
   ulp.value = value;
   selectedUlp(value);
-  data.value.posko = value;
+  data.value.ulp = value;
 };
 onMounted(() => {
-  emit('update:filters', data.value)
   fetchUid()
+  emit('update:filters', data.value)
 })
 </script>
 
@@ -51,21 +56,21 @@ onMounted(() => {
   <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="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :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>
 
-    <Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
+    <Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :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 @update:date-value="(value) => {
-        data.periode = value
-      }
+    <DatePicker @update:date-value="(value) => {
+      data.periode = value
+    }
       " />
   </div>
 </template>

src/components/Form/FiltersType/Type4.vue

@@ -38,7 +38,7 @@ const setUlp = (value: any) => {
 };
 onMounted(() => {
   emit('update:filters', data.value)
-  fetchUid()
+  // fetchUid()
 })
 </script>
 

src/components/Form/FiltersType/Type5.vue

@@ -17,7 +17,7 @@ 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: "", name: poskoPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -40,7 +40,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: "", name: poskoPlaceholder }
+  posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
 }
 

src/components/Form/FiltersType/Type6.vue

@@ -10,7 +10,7 @@ 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: "", name: poskoPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder });
 const data = ref({
   uid: uid.value,
   up3: up3.value,
@@ -30,7 +30,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: "", name: poskoPlaceholder }
+  posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
 }
 
@@ -56,13 +56,13 @@ onMounted(() => {
   <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="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :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 @update:selected="setPosko($event)" :data="itemsPosko" :placeholder="poskoPlaceholder" />
+    <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">

src/components/Form/FiltersType/Type7.vue

@@ -12,14 +12,14 @@ 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: "", name: poskoPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder });
 const data = ref({
   uid: uid.value,
   up3: up3.value,
   posko: posko.value,
   periode: '',
-  minTime: 1,
-  maxTime: 1
+  minTime: useTotalDuration().getDataMin().split(' ')[0],
+  maxTime: useTotalDuration().getDataMax().split(' ')[0]
 })
 const setUid = (value: any) => {
   uid.value = value
@@ -31,7 +31,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: "", name: poskoPlaceholder }
+  posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
 }
 
@@ -40,8 +40,6 @@ const setPosko = (value: any) => {
   selectedPosko(value)
   data.value.posko = value
 }
-
-
 const sla = [
   {
     id: 1,
@@ -53,28 +51,32 @@ const sla = [
   }
 
 ]
+
 const setMin = (value: any) => {
   console.log(value)
   data.value.minTime = value
+  useTotalDuration().setDataMin(value)
+
 }
 const setMax = (value: any) => {
   data.value.maxTime = value
+  useTotalDuration().setDataMax(value)
 }
 const triggerInput = ref(false)
 const changeDuration = (value: any) => {
   if (value.id === 0) {
+    setMin("1")
+    setMax("5")
     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
+    setMin("1")
+    setMax("45")
     console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
     triggerInput.value = true
   } else {
-    data.value.minTime = 46
-    data.value.maxTime = 99999 * 60 * 24
+    setMin("45")
+    setMax(99999 * 60 * 24)
     triggerInput.value = true
     console.log('Melebihi SLA (> 45 menit)')
   }
@@ -98,13 +100,13 @@ onMounted(() => {
   <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="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :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 @update:selected="setPosko($event)" :data="itemsPosko" :placeholder="poskoPlaceholder" />
+    <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">
@@ -123,9 +125,12 @@ onMounted(() => {
       <Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
 
       <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-        <InputWithSuffix @default-value="data.minTime" @update:menit-value="setMin($event)" />
+        <InputWithSuffix 
+        :value="`${data.minTime} Menit`"
+         />
         <small class="flex items-center">s/d</small>
-        <InputWithSuffix @default-value="data.maxTime" @update:menit-value="setMax($event)" />
+        <InputWithSuffix 
+        :value="`${data.maxTime} Menit`"/>
       </div>
     </div>
   </div>

src/components/Form/FiltersType/Type8.vue

@@ -16,7 +16,7 @@ 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: "", name: poskoPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -39,7 +39,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: "", name: poskoPlaceholder }
+  posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
 }
 

src/components/Form/FiltersType/Type9.vue

@@ -19,7 +19,7 @@ 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: "" ,name: poskoPlaceholder })
+const posko = ref({ id: 0 ,name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -42,7 +42,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: "", name: poskoPlaceholder }
+  posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
 }
 

src/components/Form/FiltersType/reference.ts

@@ -1,13 +1,12 @@
-import { getUid, getUp3, getPosko, getUlp,getUidRegional, getRegional } 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'
-
+import { useUp3Store } from '@/stores/up3'
+import { getUid, getUp3, getPosko, getUlp, getRegional, getUidRegional } from '@/utils/network'
+import { ref } from 'vue'
 interface Item {
-  id: any;
-  name: any;
+  id: any
+  name: any
 }
 const months = [
   { id: 1, name: 'Januari' },
@@ -21,69 +20,54 @@ const months = [
   { id: 9, name: 'September' },
   { id: 10, name: 'Oktober' },
   { id: 11, name: 'November' },
-  { id: 12, name: 'Desember' },
+  { id: 12, name: 'Desember' }
 ]
-
 // create 4 year back array
-const year = new Date().getFullYear();
-let years = ref<Item[]>([]);
+const year = new Date().getFullYear()
+const years = ref<Item[]>([])
 for (let i = 0; i < 5; i++) {
   years.value.push({ id: year - i, name: year - i })
 }
-
-const timeout = ref()
-const 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 =async () => {
-  try {
-  const res = await getRegional()
-    itemsRegional.value = res.data.map((item: any) => (
-      {
-        id: item.id,
-        name: item.nama.toUpperCase(),
-      }
-    ));
-  } catch (error) {
-    console.error('Error fetching data:', error);
-  }
-}
-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 itemsUid = ref<Item[]>([])
+const itemsUp3 = ref<Item[]>([])
+const itemsPosko = ref<Item[]>([])
+const itemsUlp = ref<Item[]>([])
+const itemsRegional = ref<Item[]>([])
+const itemsMedia = ref<Item[]>([])
+// Fetch data from the API using Axios
 const 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" },
+    { 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' }
   ]
-
+}
+const fetchUidByRegional = async (regional: number) => {
+  if (regional == 0) {
+    itemsUid.value = [];
+  } else {
+    try {
+      const res = await getUidRegional(regional)
+      itemsUid.value = res.data.map((item: any) => (
+        {
+          id: item.id,
+          name: item.nama.toUpperCase(),
+        }
+      ));
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+  }
 }
 // Fetch data from the API using Axios
 const fetchUid = async () => {
@@ -98,73 +82,82 @@ const fetchUid = async () => {
   } catch (error) {
     console.error('Error fetching data:', error);
   }
-};
-const fetchUidWithRegional = async (regional: number) => {
+}
+
+const fetchDataUp3 = async (uid: number) => {
+  if (uid == 0) {
+    itemsUp3.value = [];
+    itemsUlp.value = [];
+    itemsPosko.value = [];
+  } else {
+    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) => {
+
+  if (up3 == 0) {
+    itemsUlp.value = []
+  } else {
+    try {
+      const res = await getUlp(up3)
+      itemsUlp.value = res.data.map((item: any) => ({
+        id: item.id,
+        name: item.name
+      }))
+    } catch (error) {
+      console.error('Error fetching data:', error)
+    }
+  }
+}
+const fetchDataPosko = async (up3: number) => {
+  if (up3 == 0) {
+    itemsPosko.value = []
+  } else {
+    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)
+    }
+  }
+}
+const fetchRegional = async () => {
   try {
-    const res = await getUidRegional(regional)
-    itemsUid.value = res.data.map((item: any) => (
+    const res = await getRegional()
+    itemsRegional.value = res.data.map((item: any) => (
       {
         id: item.id,
-        name: item.nama,
+        name: item.nama.toUpperCase(),
       }
     ));
   } 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)
+  if (value.id != 0) {
+    fetchDataUlp(value.id)
+  }
 }
 const selectedPosko = (value: any) => {
   usePostsStore().setData(value.id)
@@ -173,4 +166,23 @@ const selectedUlp = (value: any) => {
   useUlpStore().setData(value.id)
 }
 
-export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchMedia,fetchStatus,fetchUidWithRegional,fetchRegional, fetchUid, itemsUid, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };
+export {
+
+  selectedUid,
+  selectedUp3Posko,
+  selectedUp3Ulp,
+  selectedPosko,
+  selectedUlp,
+  fetchRegional,
+  fetchUidByRegional,
+  fetchUid,
+  fetchMedia,
+  itemsUid,
+  itemsUp3,
+  itemsPosko,
+  itemsRegional,
+  itemsMedia,
+  itemsUlp,
+  months,
+  years
+}

src/components/Form/InlineRadioGroup.vue

@@ -5,7 +5,8 @@
         <div v-for="item in radioItems" :key="item.id" class="flex items-center">
           <input v-model="groupValue" 
             type="radio" name="radio"
-            :checked="item.checked" @change="onChange(item)"
+            :checked="itemSelected.id === item.id ? true : false"
+            @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>

src/components/Form/InputWithSuffix.vue

@@ -14,17 +14,21 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
-  defaultValue: {
+  value: {
     type: String,
     default: '1 Menit'
   }
  
 })
-const emit = defineEmits(['update:menitValue'])
-const menitValue = ref(props.defaultValue)
-watch(menitValue, (newValue) => {
-  emit('update:menitValue', newValue)
-})
+const handleInput = (e :any) => {
+  e.value = e.value.replace(/[^0-9.]/g, '')
+}
+const handleBlur = (e :any) => {
+  e.value = e.value ? e.value + ' Menit' : ''
+}
+const handleFocus = (e:any) => {
+  e.value = e.value.replace(/[^0-9.]/g, '')
+}
 </script>
 
 <template>
@@ -32,7 +36,7 @@ watch(menitValue, (newValue) => {
  
   class="relative w-full overflow-hidden rounded-lg bg-gray-200">
     <input
-      v-model="menitValue"
+     :value="props.value"
       autocomplete="off"
       type="text"
       :placeholder="placeholder"
@@ -40,12 +44,10 @@ watch(menitValue, (newValue) => {
       inputmode="numeric"
       pattern="[0-9.]*"
       :disabled="disabled"
-      :defaultValue="props.defaultValue"
-      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
-      "
+      @oninput="handleInput($event)"
+      @onblur="handleBlur($event)"
+      @onfocus="handleFocus($event)"
+      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

@@ -1,18 +1,24 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type4 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div class="mt-4 lg:mt-6 max-w-7xl">
         <h1 class="text-xl font-medium md:text-2xl text-dark">
             Laporan Pengaduan Total
         </h1>
     </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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+        <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            v-if="loading" v-model:visible="loading" :enabled="true" />
         <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
         <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
         <DxColumnFixing :enabled="true" />
@@ -111,11 +117,16 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable2 } from '.'
+import { Type4 } from '@/components/Form/FiltersType'
+import Filters from '@/components/Form/Filters.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 loading = ref(false)
+const data = ref<any[]>([])
+
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -150,11 +161,70 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-4'
+const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
+  query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+    laporanAnomaliPenangananPengaduanGangguanPetugas(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+        nama_posko
+        persen_penyelesaian_petugas_anomali_cc_123_marking
+        persen_penyelesaian_petugas_anomali_cc_123_non_marking
+        persen_penyelesaian_petugas_anomali_marking
+        persen_penyelesaian_petugas_anomali_non_marking
+        persen_penyelesaian_petugas_anomali_pln_mobile_marking
+        persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
+        total_penyelesaian_petugas_anomali_cc_123_marking
+        total_penyelesaian_petugas_anomali_cc_123_non_marking
+        total_penyelesaian_petugas_anomali_marking
+        total_penyelesaian_petugas_anomali_non_marking
+        total_penyelesaian_petugas_anomali_pln_mobile_marking
+        total_penyelesaian_petugas_anomali_pln_mobile_non_marking
+        total_petugas
+    }
+  }
+`
+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) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.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 { onResult, onError, loading, refetch } = useQuery(
+    GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
+const filters = ref()
 </script>

src/components/Pages/Anomali/Table_62.vue

@@ -4,7 +4,7 @@
             Laporan Pengaduan PLN Mobile
         </h1>
     </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"
         @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
         <DxSelection mode="single" />
@@ -48,6 +48,7 @@ const showIndicator = ref(true);
 const shading = ref(true);
 const showPane = ref(true);
 const loading = ref(true)
+const data = ref<any[]>([])
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {

src/components/Pages/Anomali/Table_63.vue

@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type4 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div class="mt-4 lg:mt-6 max-w-7xl">
         <h1 class="text-xl font-medium md:text-2xl text-dark">
             Laporan Pengaduan Total
@@ -11,66 +17,70 @@
         <DxSelection mode="single" />
         <DxPaging :enabled="false" />
         <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-           <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+        <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            v-if="loading" v-model:visible="loading" :enabled="true" />
         <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
         <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
         <DxColumnFixing :enabled="true" />
 
-        <DxColumn :width="170" alignment="center" data-field="" caption="Nama 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="Total Petugas" css-class="custom-table-column">
-            <DxColumn :width="170" alignment="center" data-field="" caption="a" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="total_petugas" caption="a"
+                css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Total Petugas Yang Pengaduan Diselesaikan Secara Anomali"
             css-class="custom-table-column">
             <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
+                    data-type="number" caption="b" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
+                    data-type="number" caption="c" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
+                    caption="d=b+c" css-class="custom-table-column" />
             </DxColumn>
         </DxColumn>
         <DxColumn alignment="center" caption="% Petugas Yang Pengaduan Diselesaikan Secara Anomali"
             css-class="custom-table-column">
             <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="e=b/a" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center"
+                        data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking" data-type="number"
+                        caption="Marking" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center"
+                        data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking" data-type="number"
+                        caption="Non Marking" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="f=c/a" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123_marking"
+                        data-type="number" caption="Marking" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center"
+                        data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking" data-type="number"
+                        caption="Non Marking" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="g=e+f" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_marking"
+                        data-type="number" caption="Marking" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_non_marking"
+                        data-type="number" caption="Non Marking" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
         </DxColumn>
     </DxDataGrid>
 
-    <AnomaliTable4 />
+    <AnomaliTable4 :filters-detail="filters" />
 </template>
 
 <script setup lang="ts">
 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 { jsPDF } from 'jspdf'
@@ -79,11 +89,16 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable4 } from '.'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { Type4 } from '@/components/Form/FiltersType'
+import Filters from '@/components/Form/Filters.vue'
+
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
 const showPane = ref(true);
-const loading = ref(true)
+const data = ref<any[]>([])
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -118,12 +133,76 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
+const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
+  query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, 
+  $dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
+    laporanAnomaliPenangananPengaduanGangguanPetugas(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      jenisLaporan :$jenisLaporan
+      idUid: $idUid
+      idUp3: $idUp3
+      posko: $posko
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-4'
+    ) {
+        nama_posko
+        persen_penyelesaian_petugas_anomali_cc_123_marking
+        persen_penyelesaian_petugas_anomali_cc_123_non_marking
+        persen_penyelesaian_petugas_anomali_marking
+        persen_penyelesaian_petugas_anomali_non_marking
+        persen_penyelesaian_petugas_anomali_pln_mobile_marking
+        persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
+        total_penyelesaian_petugas_anomali_cc_123_marking
+        total_penyelesaian_petugas_anomali_cc_123_non_marking
+        total_penyelesaian_petugas_anomali_marking
+        total_penyelesaian_petugas_anomali_non_marking
+        total_penyelesaian_petugas_anomali_pln_mobile_marking
+        total_penyelesaian_petugas_anomali_pln_mobile_non_marking
+        total_petugas
+    }
+  }
+`
+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) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item,
+                        total_penyelesaian_petugas_anomali_cc_123: item.total_penyelesaian_petugas_anomali_cc_123_marking + item.total_penyelesaian_petugas_anomali_cc_123_non_marking,
+                        total_penyelesaian_petugas_anomali_pln_mobile: item.total_penyelesaian_petugas_anomali_pln_mobile_marking + item.total_penyelesaian_petugas_anomali_pln_mobile_non_marking,
+                        total_penyelesaian_petugas_anomali: item.total_penyelesaian_petugas_anomali_marking + item.total_penyelesaian_petugas_anomali_non_marking,
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const { onResult, onError, loading, refetch } = useQuery(
+    GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
+const filters = ref()
 </script>

src/components/Pages/Anomali/Table_64.vue

@@ -4,54 +4,56 @@
             Laporan Pengaduan PLN Mobile
         </h1>
     </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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+        <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            v-if="loading" v-model:visible="loading" :enabled="true" />
         <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
         <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
         <DxColumnFixing :enabled="true" />
 
-        <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-        <DxColumn :width="170" alignment="center" data-field="" caption="Nama Petugas" css-class="custom-table-column" />
+        <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
+            css-class="custom-table-column" />
+        <DxColumn :width="170" alignment="center" data-field="nama_petugas" caption="Nama Petugas"
+            css-class="custom-table-column" />
         <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
             <DxColumn alignment="center" caption="(PLN Mobile, CC123, DLL)" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
+                <DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="a"
                     css-class="custom-table-column" />
             </DxColumn>
         </DxColumn>
         <DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
             css-class="custom-table-column">
             <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
+                    data-type="number" caption="b" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
+                    data-type="number" caption="c" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
+                    caption="d=b+c" css-class="custom-table-column" />
             </DxColumn>
         </DxColumn>
         <DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
             <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e=b/a"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_pln_mobile"
+                    data-type="number" caption="e=b/a" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f=c/a"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_cc_123"
+                    data-type="number" caption="f=c/a" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g=e+f"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali"
+                    data-type="number" caption="g=e+f" css-class="custom-table-column" />
             </DxColumn>
         </DxColumn>
 
@@ -59,6 +61,12 @@
 </template>
 
 <script setup lang="ts">
+defineProps({
+    filtersDetail: {
+        type: Object as PropType<any>,
+        required: true
+    }
+})
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -66,12 +74,18 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { ref } from 'vue'
+import { ref, watch, type PropType } from '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 loading = ref(true)
+const data = ref<any[]>([])
+const filtersDetail = ref({}); // Declare the 'filters' variable
+watch(() => filtersDetail.value, (newValue) => { // Access the 'value' property of the 'filters' ref
+    filterData(newValue)
+}, { immediate: true })
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -105,5 +119,68 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
+const laporanAnomaliDetailPetugasPenangananPengaduanGangguan = gql`
+  query laporanAnomaliDetailPetugasPenangananPengaduanGangguan($dateFrom: Date!, 
+  $dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
+    laporanAnomaliDetailPetugasPenangananPengaduanGangguan(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      jenisLaporan :$jenisLaporan
+      idUid: $idUid
+      idUp3: $idUp3
+      posko: $posko
+
+    ) {
+        nama_petugas
+        nama_posko
+        persen_penyelesaian_petugas_anomali
+        persen_penyelesaian_petugas_anomali_cc_123
+        persen_penyelesaian_petugas_anomali_pln_mobile
+        total_penyelesaian_petugas_anomali
+        total_penyelesaian_petugas_anomali_cc_123
+        total_penyelesaian_petugas_anomali_pln_mobile
+        total_wo
+    }
+  }
+`
+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) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.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 { onResult, onError, loading, refetch } = useQuery(
+    laporanAnomaliDetailPetugasPenangananPengaduanGangguan,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
 
 </script>

src/components/Pages/Anomali/Table_65.vue

@@ -1,4 +1,10 @@
 <template>
+      <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type4 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div class="mt-4 lg:mt-6 max-w-7xl">
         <h1 class="text-xl font-medium md:text-2xl text-dark">
             Laporan Pengaduan Total
@@ -77,6 +83,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
@@ -87,11 +95,14 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable6 } from '.'
+import { Type4 } from '@/components/Form/FiltersType'
+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 loading = ref(true)
+const data = ref<any[]>([])
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -127,11 +138,64 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-4'
+const GET_laporanCheckInCheckOut = gql`
+  query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+    laporanCheckInCheckOut(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+    avg_durasi_wo_gangguan_individual
+    avg_durasi_wo_penugasan_khusus
+    avg_rct_wo_gangguan_individual
+    avg_rpt_wo_gangguan_individual
+    jumlah_wo_gangguan_individual
+    jumlah_wo_penugasan_khusus
+    personil_yantek
+    user_regu
+    }
+  }
+`
+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) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.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 { onResult, onError, loading, refetch } = useQuery(
+    GET_laporanCheckInCheckOut,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
+const filters = ref()
 </script>

src/components/Pages/Anomali/Table_66.vue

@@ -35,6 +35,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -47,6 +49,7 @@ const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
 const showPane = ref(true);
+const data = ref<any[]>([])
 const loading = ref(false)
 
 const onExporting = (e: any) => {

src/components/Pages/Cico/Table_60.vue

@@ -1,45 +1,47 @@
 <template>
-      <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
         <Type1 @update:filters="(value) => {
             filters = value
         }
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="User Regu" css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" caption="Personil Yantek"
+            <DxColumn :width="200" alignment="center" data-field="user_regu" caption="User Regu" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="personil_yantek" caption="Personil Yantek"
                 css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" data-type="number"
+            <DxColumn :width="200" alignment="center" data-field="jumlah_wo_gangguan_individual" data-type="number"
                 caption="Jumlah WO Gangguan Individual" css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" data-type="number"
+            <DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_gangguan_individual" data-type="number"
                 caption="Rata-rata Durasi WO Gangguan" css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Rata-rata RPT WO Gangguan"
+            <DxColumn :width="200" alignment="center" data-field="avg_rpt_wo_gangguan_individual" data-type="number" 
+            caption="Rata-rata RPT WO Gangguan"
                 css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Rata-rata RCT WO Gangguan"
+            <DxColumn :width="200" alignment="center" data-field="avg_rct_wo_gangguan_individual" data-type="number" caption="Rata-rata RCT WO Gangguan"
                 css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Jumlah Wo Penugasan Khusus"
+            <DxColumn :width="200" alignment="center" data-field="jumlah_wo_penugasan_khusus" data-type="number" caption="Jumlah Wo Penugasan Khusus"
                 css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" data-type="number"
-                caption="Rata-rata Duarasi WO Penugasan" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_penugasan_khusus" data-type="number"
+                caption="Rata-rata Durasi WO Penugasan" css-class="custom-table-column" />
 
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
+
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
@@ -51,13 +53,18 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { Type1 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.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 dataDetail = ref<any>()
+const data = ref<any[]>([])
 const showDetail = ref(false)
-const loading = ref(false)
+const showData = () => {
+    showDetail.value = true
+}
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -86,14 +93,72 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
-
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
+    dataDetail.value = data
     console.log(data)
 }
 
-const filters = ref();
-const filterData = (filters: any) => {
-    console.log(filters)
+const GET_laporanCheckInCheckOut = gql`
+  query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+    laporanCheckInCheckOut(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+    avg_durasi_wo_gangguan_individual
+    avg_durasi_wo_penugasan_khusus
+    avg_rct_wo_gangguan_individual
+    avg_rpt_wo_gangguan_individual
+    jumlah_wo_gangguan_individual
+    jumlah_wo_penugasan_khusus
+    personil_yantek
+    user_regu
+    }
+  }
+`
+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) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.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 { onResult, onError, loading, refetch } = useQuery(
+    GET_laporanCheckInCheckOut,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
+
+
+const filters = ref()
 </script>

src/components/Pages/Ctt/Table_67.vue

@@ -1,5 +1,5 @@
 <template>
-   <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
         <Type3 @update:filters="(value) => {
             filters = value
         }
@@ -13,47 +13,47 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama 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="Total WO" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
+                <DxColumn alignment="center"  caption="CC 123" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="total_wo_cc123" data-type="number" caption="a"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
+                    <DxColumn :width="150" alignment="center" data-field="total_wo_pln_mobile" data-type="number" caption="b"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
+                    <DxColumn :width="150" alignment="center" data-field="total_wo_comcen" data-type="number" caption="c"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
+                    <DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="d=b+c"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Rekomendasi sistem" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Mendatangkan Petugas" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e"
+                    <DxColumn :width="150" alignment="center" data-field="rekomendasi_sistem_mendatangkan_petugas" data-type="number" caption="e"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Diberikan ke Pelanggan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f"
+                    <DxColumn :width="150" alignment="center" data-field="total_wo_loket" data-type="number" caption="f"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="DLPD" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g"
+                <DxColumn :width="150" alignment="center" data-field="dlpd" data-type="number" caption="g"
                     css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="h"
+                <DxColumn :width="150" alignment="center" data-field="history_p2ti" data-type="number" caption="h"
                     css-class="custom-table-column" />
             </DxColumn>
 
@@ -73,13 +73,14 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import Filters from '@/components/Form/Filters.vue'
 import { Type3 } from '@/components/Form/FiltersType'
+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 loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -109,13 +110,74 @@ const onExporting = (e: any) => {
     }
 }
 
+const GET_laporanCttKwhPeriksa = gql`
+  query laporanCttKwhPeriksa($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+    laporanCttKwhPeriksa(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+        dlpd
+history_p2ti
+nama_posko
+rekomendasi_sistem_mendatangkan_petugas
+total_wo
+total_wo_cc123
+total_wo_comcen
+total_wo_loket
+total_wo_pln_mobile
+    }
+  }
+`
+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) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.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 { onResult, onError, loading, refetch } = useQuery(
+    GET_laporanCttKwhPeriksa,
+    {
+        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 filters = ref()
-const filterData = (filters: any) => {
-    console.log(filters)
+const showData = () => {
+    showDetail.value = true
 }
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_1.vue

@@ -1,5 +1,7 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => {
+    filterData(filters)
+  }" class="mb-4">
     <Type1 @update:filters="(value) => {
       filters = value
     }
@@ -12,15 +14,18 @@
       :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" />
+      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" 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="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="pembuat_laporan"
         caption="Pembuat Laporan" cell-template="data" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
@@ -31,13 +36,13 @@
         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"
+      <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="170" alignment="center" data-field="posko_asal"
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
         caption="Posko Awal" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan"
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_baru"
         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" />
@@ -125,14 +130,14 @@
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Posko Awal:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.posko_asal" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" 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" />
+        <InputText :readonly="true" :value="dataDetail?.nama_posko_baru" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -188,7 +193,7 @@
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Posko:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.posko_asal" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
       </div>
     </div>
 
@@ -211,17 +216,17 @@ import {
 } from 'devextreme-vue/data-grid'
 import { computed, onMounted, ref, watch } from 'vue'
 import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+
 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 { useDialogStore } from '@/stores/dialog'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-import { fetchStatus } from '@/components/Form/FiltersType/reference'
 const position = { of: '#dataTable' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -230,24 +235,53 @@ const dialog = useDialogStore()
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-
+const runReset = ref(false)
 const closeDetail = () => {
   showDetail.value = false
 }
 const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    const doc = new jsPDF()
 
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
+  if (e.format === 'pdf') {
+    const doc = new jsPDF({
+      orientation: 'landscape',
+      unit: 'mm',
+      format: 'F4',
     })
+    // Add title on each page
+    const title = "Daftar Gangguan Dialihkan Ke Posko Lain";
+
+    // Initialize page number
+    const pageNumber = ref(1);
+    autoTable(doc, {
+      head: [['No Laporan', 'Pembuat Laporan', 'Tgl Lapor', 'Tgl Dialihkan', 'Tgl Response', 'Tgl Recovery', 'Durasi Response Time', 'Durasi Recovery Time', 'Posko Awal', 'Posko Tujuan', 'Status', 'IDPEL/NO METER', 'Nama Pelapor', 'Alamat Pelapor', 'No Telp Pelapor', 'Keterangan Pelapor', 'Sumber Lapor', 'Posko']],
+      startY: 10,
+      body: data.value.map((item) =>
+        [item.no_laporan, item.pembuat_laporan, item.waktu_lapor, item.waktu_dialihkan, item.waktu_response, item.waktu_recovery, item.durasi_response_time, item.durasi_recovery_time, item.nama_posko_lama, item.nama_posko_baru, item.status_akhir, item.idpel_nometer, item.nama_pelapor, item.alamat_pelapor, item.no_telp_pelapor, item.keterangan_pelapor, item.media, item.posko]),
+      styles: {
+        fontSize: 6,
+        cellWidth: 'wrap'
+      },
+
+
+    })
+    doc.setProperties({
+      title: 'Daftar Gangguan Dialihkan Ke Posko Lain',
+      subject: 'Daftar Gangguan Dialihkan Ke Posko Lain',
+    });
+    
+    pageNumber.value++; // Increment the pageNumber
+    doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
+
+    // exportToPdf({
+    //   jsPDFDocument: doc,
+    //   component: e.component,
+    // }).then(() => {
+    // doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
+
+    // })
   } else {
     const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+    const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain')
 
     exportToExcel({
       component: e.component,
@@ -255,7 +289,7 @@ const onExporting = (e: any) => {
       autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DaftarGangguanDialihkanKePoskoLain.xlsx')
       })
     })
 
@@ -264,7 +298,7 @@ const onExporting = (e: any) => {
 }
 
 const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
-  query DaftarGangguan($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+  query DaftarGangguan($dateFrom: Date!, $dateTo: Date!, $posko: Int, $idUid: Int, $idUp3: Int) {
     daftarGangguanDialihkanKePoskoLain(
       dateFrom: $dateFrom
       dateTo: $dateTo
@@ -273,20 +307,21 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
       idUp3: $idUp3
     ) {
       alamat_pelapor
+      pembuat_laporan
       durasi_recovery_time
       durasi_response_time
+      waktu_lapor
       waktu_dialihkan
       waktu_recovery
       waktu_response
-      id_gangguan
       idpel_nometer
       keterangan_pelapor
       media
       nama_pelapor
       no_laporan
       no_telp_pelapor
-      posko_asal
-      posko_tujuan
+      nama_posko_lama
+      nama_posko_baru
       status_akhir
       waktu_recovery
       waktu_response
@@ -299,24 +334,13 @@ const filterData = (params: any) => {
   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 : "",
+    posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-        data.value = [
-          ...data.value,
-          {
-            ...item,
-            pembuat_laporan: '-',
-            waktu_lapor: '-',
-            status_akhir: fetchStatus(item.status_akhir),
-            posko: item.posko_asal
-          }
-        ]
-      })
+        data.value =  queryResult.data.daftarGangguanDialihkanKePoskoLain
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -331,12 +355,11 @@ const { onResult, onError, loading, refetch } = useQuery(
   {
     dateFrom: new Date().toISOString().slice(0, 10),
     dateTo: new Date().toISOString().slice(0, 10),
-    posko: '',
+    posko: 0,
     idUid: 0,
     idUp3: 0
   }
 )
-
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataDetail.value = data

src/components/Pages/Gangguan/Table_10.vue

@@ -1,12 +1,12 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1 @update:filters="(value) => {
-        filters = value
-      }
-      " />
-  </Filters>
-    <div>
+        <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"
@@ -15,8 +15,7 @@
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
-
+                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" />
@@ -104,11 +103,7 @@ 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)
@@ -119,7 +114,7 @@ const GET_REKAP_JENIS_GANGGUAN_SE004 = gql`
   query rekapitulasiJenisGangguanSE004(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
@@ -182,19 +177,20 @@ const onExporting = (e: any) => {
 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: '',
+    posko: 0,
     idUid: 0,
     idUp3: 0
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+    const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko,
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0})
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
 
@@ -213,6 +209,6 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-const filters= ref();
+const filters = ref();
 
 </script>

src/components/Pages/Gangguan/Table_11.vue

@@ -15,16 +15,15 @@
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
-
+                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="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="150" name="poskoGroup" alignment="center" data-field="posko" caption="Posko"
+            <DxColumn :width="150" name="poskoGroup" alignment="center" data-field="nama_posko" caption="Posko"
                 css-class="custom-table-column" :group-index="0" />
-            <DxColumn :width="150" alignment="center" data-field="posko" caption="Posko" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                 <DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
@@ -177,7 +176,7 @@ const GET_REKAPITULASI_GANGGUAN_PER_POSKO = gql`
 query rekapitulasiGangguanPerPosko(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -188,25 +187,19 @@ query rekapitulasiGangguanPerPosko(
         idUid: $idUid
         idUp3: $idUp3
     ) {
-        avg_durasi_dispatch
         avg_durasi_recovery
         avg_durasi_response
-        id_uid
-        id_up3
-        max_durasi_dispatch
+        id_posko
         max_durasi_recovery
         max_durasi_response
-        min_durasi_dispatch
         min_durasi_recovery
         min_durasi_response
+        nama_posko
         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
@@ -248,22 +241,22 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
+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: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+    const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0,
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
@@ -272,7 +265,7 @@ const filterData = (params: any) => {
             queryResult.data.rekapitulasiGangguanPerPosko.forEach((item: any) => {
                 const entry = {
                     no: Number(i++),
-                    posko: item.posko,
+                    nama_posko: item.nama_posko,
                     laporan: {
                         total: item.total,
                         sudahSelesai: {

src/components/Pages/Gangguan/Table_12.vue

@@ -1,31 +1,31 @@
 <template>
-   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type9 @update:filters="(value) => {
-        filters = value
-      }
-      " />
-  </Filters>
+    <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">
+        <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-model:visible.sync="loading" :enabled="true" />
+                v-if="loading" v-model:visible="loading" :enabled="true" />
 
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-             data-type="number"
-                caption="No" />
-            <DxColumn :width="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 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="id_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="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
@@ -46,36 +46,36 @@
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
                     <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="avg_durasi_response" 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 :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="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="total_diatas_sla_response" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <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="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="total_recovery" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <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="max_durasi_response" 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 :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="max_durasi_response" 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="total_diatas_sla_recovery" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <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="total_dibawah_sla_recovery" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
         </DxDataGrid>
@@ -85,7 +85,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type9 from '@/components/Form/FiltersType/Type9.vue'
-import { onMounted ,ref} from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -105,7 +105,7 @@ const GET_REKAPITULASI_GANGGUAN_PER_REGU = gql`
 query rekapitulasiGangguanPerRegu(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -116,26 +116,20 @@ query rekapitulasiGangguanPerRegu(
         idUid: $idUid
         idUp3: $idUp3
     ) {
+        id_regu
         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
+        nama_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
@@ -175,22 +169,22 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-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 { 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: 0,
+    idUid: 0,
+    idUp3: 0,
+})
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+    const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0,
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
@@ -203,7 +197,7 @@ const filterData = (params: any) => {
     onError((error) => {
         console.log(error)
     })
-   
+
 }
 const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_13.vue

@@ -1,29 +1,27 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type9 @update:filters="(value) => {
-        filters = value
-      }
-      " />
-  </Filters>
+        <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">
+        <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-model:visible.sync="loading" :enabled="true" />
+                v-if="loading" v-model:visible="loading" :enabled="true" />
 
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-             data-type="number"
-                caption="No" />
+            <DxColumn 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">
@@ -46,36 +44,36 @@
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
                     <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="avg_durasi_response" 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 :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="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="total_diatas_sla_response" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <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="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="total_recovery" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <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="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 :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="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="total_diatas_sla_recovery" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <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="total_dibawah_sla_recovery" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
         </DxDataGrid>
@@ -140,7 +138,7 @@ const GET_REKAPITULASI_GANGGUAN_PER_TANGGAL = gql`
 query rekapitulasiGangguanPerTanggal(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -151,25 +149,19 @@ query rekapitulasiGangguanPerTanggal(
         idUid: $idUid
         idUp3: $idUp3
     ) {
-        avg_durasi_dispatch
+        nama_posko
         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
@@ -177,22 +169,22 @@ query rekapitulasiGangguanPerTanggal(
         }
 }`;
 
-    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 { 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: 0,
+    idUid: 0,
+    idUp3: 0,
+})
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+    const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0,
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
@@ -205,7 +197,7 @@ const filterData = (params: any) => {
     onError((error) => {
         console.log(error)
     })
-   
+
 }
 const filters = ref();
 </script>

src/components/Pages/Gangguan/Table_14.vue

@@ -13,8 +13,8 @@
             <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-model:visible.sync="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
+                v-model:visible="loading" :enabled="true" />
 
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@@ -28,6 +28,8 @@
                 <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>
+            <DxColumn :width="170" alignment="center" data-field="total" caption="Total"
+                css-class="custom-table-column" />
         </DxDataGrid>
     </div>
 </template>
@@ -35,8 +37,7 @@
 <script setup lang="ts">
 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 {  ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -98,7 +99,7 @@ const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
   query rekapitulasiGangguanBerdasarkanMedia(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
@@ -110,6 +111,7 @@ const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
       idUp3: $idUp3
     ) {
       media
+      total
       tgl1
       tgl10
       tgl11
@@ -148,7 +150,7 @@ const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: '',
+    posko: 0,
     idUid: 0,
     idUp3: 0
 })
@@ -158,7 +160,7 @@ const filterData = (params: any) => {
     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 : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0,
     })

src/components/Pages/Gangguan/Table_15.vue

@@ -13,8 +13,8 @@
             <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-model:visible.sync="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
+                v-model:visible="loading" :enabled="true" />
 
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@@ -22,8 +22,8 @@
 
             <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 alignment="center" data-field="nama_up3" caption="Nama UP3" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="nama_posko" 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"
@@ -37,7 +37,6 @@
 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 { jsPDF } from 'jspdf'
@@ -90,7 +89,7 @@ query rekapitulasiGangguanAlihPosko
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -102,18 +101,21 @@ query rekapitulasiGangguanAlihPosko
         idUid: $idUid
         idUp3: $idUp3
     ) {
-        id_uid
-        id_up3
-        posko
-        posko_in
-        posko_out
+        id_posko
+id_uid
+id_up3
+nama_posko
+nama_uid
+nama_up3
+posko_in
+posko_out
         }
 }`;
 
 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: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
@@ -124,7 +126,7 @@ const filterData = (params: any) => {
     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 : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0,
     })

src/components/Pages/Gangguan/Table_16.vue

@@ -13,8 +13,8 @@
             <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-model:visible.sync="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
+                v-model:visible="loading" :enabled="true" />
 
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@@ -225,7 +225,7 @@ query rekapitulasiGangguanDiselesaikanMobileAPKT
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -265,7 +265,7 @@ query rekapitulasiGangguanDiselesaikanMobileAPKT
 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: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
@@ -275,7 +275,7 @@ const filterData = (params: any) => {
     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 : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0,
     })

src/components/Pages/Gangguan/Table_17.vue

@@ -13,8 +13,8 @@
             <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-model:visible.sync="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
+                v-model:visible="loading" :enabled="true" />
 
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@@ -159,7 +159,7 @@ query rekapitulasiGangguanRatingPerPosko
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -195,7 +195,7 @@ query rekapitulasiGangguanRatingPerPosko
 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: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
@@ -205,7 +205,7 @@ const filterData = (params: any) => {
     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 : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0,
     })

src/components/Pages/Gangguan/Table_18.vue

@@ -13,8 +13,8 @@
             <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-model:visible.sync="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
+                v-model:visible="loading" :enabled="true" />
 
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@@ -136,7 +136,7 @@ const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
   query rekapitulasiGangguanRatingPerRegu(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
@@ -181,7 +181,7 @@ const filterData = (params: any) => {
     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 : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0,
     })

src/components/Pages/Gangguan/Table_19.vue

@@ -13,8 +13,8 @@
             <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-model:visible.sync="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
+                v-model:visible="loading" :enabled="true" />
 
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@@ -111,7 +111,7 @@ query rekapitulasiGangguanKoreksiTransaksiIndividual
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -143,7 +143,7 @@ query rekapitulasiGangguanKoreksiTransaksiIndividual
 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: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
@@ -154,7 +154,7 @@ const filterData = (params: any) => {
     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 : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0,
     })

src/components/Pages/Gangguan/Table_2.vue

@@ -12,10 +12,10 @@
             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"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+                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" />
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
@@ -48,7 +48,7 @@
                 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"
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
                 cell-template="data" />
 
             <template #data="{ data }">
@@ -196,7 +196,7 @@ const closeDetail = () => {
 }
 
 const GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI = gql`
-query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateTo: Date!, $posko: String!, $idUid: Int!, $idUp3: Int!) {
+query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateTo: Date!, $posko: Int!, $idUid: Int!, $idUp3: Int!) {
   daftarGangguanMelaporLebihDariSatuKali(
     minJmlLapor: $minJmlLapor
     maxJmlLapor: $maxJmlLapor
@@ -207,8 +207,9 @@ query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateT
     idUp3: $idUp3
   ) {
     alamat_pelapor
+    pembuat_laporan
     durasi_response_time
-    id_gangguan
+    durasi_recovery_time
     idpel_nometer
     jumlah_lapor
     keterangan_pelapor
@@ -216,10 +217,11 @@ query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateT
     nama_pelapor
     no_laporan
     no_telp_pelapor
-    posko
     status_akhir
+    waktu_lapor
     waktu_recovery
     waktu_response
+    nama_posko
   }
 }`;
 const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI, {
@@ -227,7 +229,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LE
     maxJmlLapor: 1,
     dateFrom: new Date().toISOString().slice(0, 10),
     dateTo: new Date().toISOString().slice(0, 10),
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
@@ -240,7 +242,7 @@ const filterData = (params: any) => {
         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 : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0
     })

src/components/Pages/Gangguan/Table_20.vue

@@ -13,8 +13,8 @@
             <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-model:visible.sync="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
+                v-model:visible="loading" :enabled="true" />
 
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@@ -117,7 +117,7 @@ const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
   query rekapitulasiGangguanCleansingTransaksiTM(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
@@ -159,7 +159,7 @@ const filterData = (params: any) => {
     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 : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0,
     })

src/components/Pages/Gangguan/Table_3.vue

@@ -11,10 +11,10 @@
             :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"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            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"
@@ -46,7 +46,7 @@
                 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="170" alignment="center" data-field="posko" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
@@ -68,22 +68,20 @@ const showPane = ref(true);
 const data = ref<any[]>([])
 const filterData = (params: any) => {
     const { minTime, maxTime, posko, uid, up3 } = params;
-    console.log(params)
     const dateValue = params.periode.split(' s/d ') 
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         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 : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
+            data.value = queryResult.data.daftarGangguanResponseTime;
         }
-        console.log(queryResult.data)
         console.log(queryResult.loading)
         console.log(queryResult.networkStatus)
     })
@@ -97,7 +95,7 @@ query daftarGangguanResponseTime(
     $dateTo: Date!
     $minDurasiResponseTime: Int!
     $maxDurasiResponseTime: Int!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -113,15 +111,16 @@ query daftarGangguanResponseTime(
         alamat_pelapor
         durasi_recovery_time
         durasi_response_time
-        id_gangguan
         idpel_nometer
         keterangan_pelapor
         media
         nama_pelapor
+        is_marking
         no_laporan
         no_telp_pelapor
-        posko
+        nama_posko
         status_akhir
+        waktu_lapor
         waktu_recovery
         waktu_response
     }
@@ -131,18 +130,10 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RES
     dateTo: new Date().toISOString().slice(0, 10),
     minDurasiResponseTime: 1, //menit
     maxDurasiResponseTime: 1,// menit
-    posko: "",
+    posko: 0,
     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

@@ -6,15 +6,15 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :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"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            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"
@@ -34,7 +34,7 @@
                 caption="Durasi Recovery Time" />
             <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"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="is_marking"
                 caption="Referensi Marking" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
                 caption="IDPEL/NO METER" />
@@ -48,7 +48,7 @@
                 caption="Keterangan Pelapor" />
             <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="posko" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
@@ -67,6 +67,7 @@ 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 ')
@@ -75,7 +76,7 @@ const filterData = (params: any) => {
         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 : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0
     })
@@ -83,7 +84,6 @@ const filterData = (params: any) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarGangguanRecoveryTime;
         }
-        console.log(queryResult.data)
         console.log(queryResult.loading)
         console.log(queryResult.networkStatus)
     })
@@ -97,7 +97,7 @@ query daftarGangguanRecoveryTime(
     $dateTo: Date!
     $minDurasiRecoveryTime: Int!
     $maxDurasiRecoveryTime: Int!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -113,15 +113,16 @@ query daftarGangguanRecoveryTime(
         alamat_pelapor
         durasi_recovery_time
         durasi_response_time
-        id_gangguan
         idpel_nometer
         keterangan_pelapor
         media
         nama_pelapor
         no_laporan
+        is_marking
         no_telp_pelapor
-        posko
+        nama_posko
         status_akhir
+        waktu_lapor
         waktu_recovery
         waktu_response
         }
@@ -132,7 +133,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_REC
     dateTo: new Date().toISOString().slice(0, 10),
     minDurasiRecoveryTime: 1, //menit
     maxDurasiRecoveryTime: 1,// menit
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })

src/components/Pages/Gangguan/Table_5.vue

@@ -11,10 +11,10 @@
             :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"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            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"
@@ -46,7 +46,7 @@
                 caption="Keterangan Pelapor" />
             <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="posko" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
@@ -54,7 +54,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import gql from 'graphql-tag';
@@ -68,7 +68,7 @@ const GET_SELESAI_TANPA_ID_PELANGGAN = gql`
 query daftarGangguanSelesaiTanpaIdPelanggan(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -82,15 +82,15 @@ query daftarGangguanSelesaiTanpaIdPelanggan(
         alamat_pelapor
         durasi_recovery_time
         durasi_response_time
-        id_gangguan
         idpel_nometer
         keterangan_pelapor
         media
         nama_pelapor
         no_laporan
         no_telp_pelapor
-        posko
+        nama_posko
         status_akhir
+        waktu_lapor
         waktu_recovery
         waktu_response
         }
@@ -98,17 +98,17 @@ query daftarGangguanSelesaiTanpaIdPelanggan(
 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: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
 const filterData = (params: any) => {
-    const {  posko, uid, up3 } = params;
+    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 : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0
     })

src/components/Pages/Gangguan/Table_6.vue

@@ -11,10 +11,10 @@
             :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"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel  :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true"/>
+            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"
@@ -60,7 +60,7 @@ const GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA = gql`
 query daftarGangguanBerdasarkanMedia(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
     $media : String!
@@ -76,23 +76,25 @@ query daftarGangguanBerdasarkanMedia(
         alamat_pelapor
         durasi_recovery_time
         durasi_response_time
-        id_gangguan
         idpel_nometer
         keterangan_pelapor
         media
         nama_pelapor
         no_laporan
         no_telp_pelapor
-        posko
+        nama_posko
         status_akhir
+        waktu_media
+        waktu_lapor
         waktu_recovery
         waktu_response
+        keterangan_media
         }
 }`;
 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: "",
+        posko: 0,
         idUid: 0,
         idUp3: 0,
         media : "Twitter"
@@ -103,14 +105,15 @@ const filterData = (params: any) => {
     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 : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0,
-        media : media ? media.id : "Twitter"
+        media : media ? media.id : ""
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarGangguanBerdasarkanMedia;
+            
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)

src/components/Pages/Gangguan/Table_7.vue

@@ -11,10 +11,10 @@
             :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"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+                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"
@@ -46,7 +46,7 @@
                 caption="Keterangan Pelapor" />
             <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="posko" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
@@ -69,7 +69,7 @@ const GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT = gql`
 query daftarGangguanDiselesaikanMobileAPKT(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -83,15 +83,15 @@ query daftarGangguanDiselesaikanMobileAPKT(
         alamat_pelapor
         durasi_recovery_time
         durasi_response_time
-        id_gangguan
         idpel_nometer
         keterangan_pelapor
         media
         nama_pelapor
         no_laporan
         no_telp_pelapor
-        posko
+        nama_posko
         status_akhir
+        waktu_lapor
         waktu_recovery
         waktu_response
         }
@@ -99,7 +99,7 @@ query daftarGangguanDiselesaikanMobileAPKT(
 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: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
@@ -110,7 +110,7 @@ const filterData = (params: any) => {
     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 : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3?.id ? up3.id : 0,
     })

src/components/Pages/Gangguan/Table_8.vue

@@ -12,16 +12,16 @@
             :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" />
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+                :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+                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"
                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
 
-            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama Unit"
+            <DxColumn :width="150" alignment="center" data-field="nama_posko" 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" />
@@ -52,7 +52,7 @@
                     :allow-resizing="false" css-class="custom-table-column" />
                 <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"
+                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" 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" />
@@ -88,11 +88,6 @@ import { Workbook } from 'exceljs'
 
 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);
@@ -102,7 +97,7 @@ const GET_REKAPITULASI_GANGGUAN_ALL = gql`
 query rekapitulasiAllGangguan(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -116,8 +111,6 @@ query rekapitulasiAllGangguan(
         avg_durasi_dispatch
         avg_durasi_recovery
         avg_durasi_response
-        id_uid
-        id_up3
         max_durasi_dispatch
         max_durasi_recovery
         max_durasi_response
@@ -126,7 +119,7 @@ query rekapitulasiAllGangguan(
         min_durasi_response
         persen_inproses
         persen_selesai
-        posko
+        nama_posko
         total
         total_diatas_sla_dispatch
         total_diatas_sla_recovery
@@ -141,29 +134,26 @@ query rekapitulasiAllGangguan(
 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: "",
+    posko: 0,
     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
+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,
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0,
+        posko: posko ? posko.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
                 data.value = [...data.value, {
                     ...item,
-                    nama_unit: 'UNIT'
                 }];
 
             })

src/components/Pages/Gangguan/Table_9.vue

@@ -1,11 +1,11 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan -->
 <template>
-   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1 @update:filters="(value) => {
-        filters = value
-      }
-      " />
-  </Filters>
+    <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"
@@ -15,7 +15,7 @@
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+                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" />
@@ -146,11 +146,6 @@ 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)
@@ -159,14 +154,14 @@ const showPane = ref(true)
 const dataReal = ref<any[]>([])
 
 const GET_REKAP_JENIS_GANGGUAN = gql`
-  query daftarGangguanRecoveryTime(
+  query rekapitulasiPerJenisGangguan(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
-    rekapitulasiJenisGangguan(
+    rekapitulasiPerJenisGangguan(
       dateFrom: $dateFrom
       dateTo: $dateTo
       posko: $posko
@@ -245,14 +240,14 @@ const filterData = (params: any) => {
     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 : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             let no = 0
-            queryResult.data.rekapitulasiJenisGangguan.forEach((item: any) => {
+            queryResult.data.rekapitulasiPerJenisGangguan.forEach((item: any) => {
                 dataReal.value = [
                     ...dataReal.value,
                     {
@@ -306,5 +301,5 @@ const filterData = (params: any) => {
     })
 }
 
-const filters= ref();
+const filters = ref();
 </script>

src/components/Pages/Keluhan/Table_21.vue

@@ -5,18 +5,17 @@
         }
             " />
     </Filters>
-
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+                :show-info="true" :show-navigation-buttons="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -39,7 +38,7 @@
                 css-class="custom-table-column" />
             <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="posko_asal" caption="Unit Asal"
+            <DxColumn :width="170" alignment="center" data-field="nama_unit_lama" caption="Unit Asal"
                 css-class="custom-table-column" />
             <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
                 css-class="custom-table-column" />
@@ -60,8 +59,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
-import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import {  ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -120,46 +118,47 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_POSKO_LAIN = gql`
-  query daftarKeluhanDipindahkanKePoskoLain(
+const GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN = gql`
+  query daftarKeluhanDialihkanKeUnitLain(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
-    daftarKeluhanDipindahkanKePoskoLain(
+    daftarKeluhanDialihkanKeUnitLain(
       dateFrom: $dateFrom
       dateTo: $dateTo
-      posko: $posko
+      idUlp: $idUlp
       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
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        id_unit_baru
+        id_unit_lama
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        nama_unit_baru
+        nama_unit_lama
+        no_laporan
+        no_telp_pelapor
+        pembuat_laporan
+        status_akhir
+        waktu_dialihkan
+        waktu_lapor
+        waktu_recovery
+        waktu_response
     }
   }
 `
-const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_POSKO_LAIN, {
+const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN, {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
 })
@@ -167,16 +166,17 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_KELUHAN_DIPI
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+    const { ulp, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0})
+        idUlp: ulp ? ulp.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarKeluhanDipindahkanKePoskoLain
+            data.value = queryResult.data.daftarKeluhanDialihkanKeUnitLain
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)

src/components/Pages/Keluhan/Table_22.vue

@@ -5,17 +5,17 @@
         }
             " />
     </Filters>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+                :show-info="true" :show-navigation-buttons="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -54,7 +54,7 @@
                 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"
+            <DxColumn :width="150" alignment="center" data-field="idUlp" caption="Nama ULP"
                 css-class="custom-table-column" />
         </DxDataGrid>
     </div>
@@ -129,7 +129,7 @@ const GET_DATA = gql`
     $maxJmlLapor: Int!
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
@@ -138,24 +138,27 @@ const GET_DATA = gql`
       dateTo: $dateTo
       minJmlLapor: $minJmlLapor
       maxJmlLapor: $maxJmlLapor
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
     ) {
-      alamat_pelapor
-      durasi_recovery_time
-      durasi_response_time
-      id_keluhan
-      idpel_nometer
-      keterangan_pelapor
-      media
-      nama_pelapor
-      no_laporan
-      no_telp_pelapor
-      posko
-      status_akhir
-      waktu_recovery
-      waktu_response
+        alamat_pelapor
+durasi_recovery_time
+durasi_response_time
+idpel_nometer
+jumlah_lapor
+keterangan_pelapor
+media
+nama_pelapor
+nama_unit
+no_laporan
+no_telp_pelapor
+status_akhir
+waktu_lapor
+
+waktu_recovery
+
+waktu_response
     }
   }
 `
@@ -165,7 +168,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
     maxJmlLapor: 100,
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
 })
@@ -173,7 +176,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+    const { ulp, uid, up3 } = params
     const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1;
     const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100;
     refetch({
@@ -181,9 +184,10 @@ const filterData = (params: any) => {
         maxJmlLapor: maxJmlLapor,
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0})
+        idUlp: ulp ? ulp.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali

src/components/Pages/Keluhan/Table_23.vue

@@ -5,14 +5,14 @@
         }
             " />
     </Filters>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :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"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
                <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
         v-if="loading" v-model:visible="loading" :enabled="true" />
@@ -24,12 +24,9 @@
                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
             <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
-                css-class="custom-table-column" />
+           
             <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
-                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
@@ -50,7 +47,7 @@
                 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"
+            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama ULP"
                 css-class="custom-table-column" />
         </DxDataGrid>
     </div>
@@ -125,7 +122,7 @@ const GET_DATA = gql`
     $dateTo: Date!
     $minDurasiResponseTime: Int!
     $maxDurasiResponseTime: Int!
-    $posko: String!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
@@ -134,24 +131,24 @@ const GET_DATA = gql`
       dateTo: $dateTo
       minDurasiResponseTime: $minDurasiResponseTime
       maxDurasiResponseTime: $maxDurasiResponseTime
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
     ) {
-      alamat_pelapor
-      durasi_recovery_time
-      durasi_response_time
-      id_keluhan
-      idpel_nometer
-      keterangan_pelapor
-      media
-      nama_pelapor
-      no_laporan
-      no_telp_pelapor
-      posko
-      status_akhir
-      waktu_recovery
-      waktu_response
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        nama_unit
+        no_laporan
+        no_telp_pelapor
+        status_akhir
+        waktu_lapor
+        waktu_recovery
+        waktu_response
     }
   }
 `
@@ -160,21 +157,19 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     minDurasiResponseTime: 0,
     maxDurasiResponseTime: 0,
-    posko: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
-    const minDurasiResponseTime = params.minDurasiResponseTime ? params.minDurasiResponseTime : 0
-    const maxDurasiResponseTime = params.maxDurasiResponseTime ? params.maxDurasiResponseTime : 0
+      const { ulp, uid, up3,maxTime,minTime } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        minDurasiResponseTime: minDurasiResponseTime,
-        maxDurasiResponseTime: maxDurasiResponseTime,
-        posko: posko ? posko.id : "",
+        minDurasiResponseTime: minTime,
+        maxDurasiResponseTime:maxTime,
+        idUlp: ulp ? ulp.id :0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0})
 

src/components/Pages/Keluhan/Table_24.vue

@@ -5,17 +5,17 @@
         }
             " />
     </Filters>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+                :show-info="true" :show-navigation-buttons="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -24,18 +24,13 @@
                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
             <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
-                css-class="custom-table-column" />
+            
             <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
-                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
-                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
@@ -52,7 +47,7 @@
                 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"
+            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama ULP"
                 css-class="custom-table-column" />
         </DxDataGrid>
     </div>
@@ -127,33 +122,33 @@ const GET_DATA = gql`
     $dateTo: Date!
     $minDurasiRecoveryTime: Int!
     $maxDurasiRecoveryTime: Int!
-    $posko: String!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
     daftarKeluhanRecoveryTime(
       dateFrom: $dateFrom
       dateTo: $dateTo
-      posko: $posko
+      idUlp: $idUlp
       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
+        alamat_pelapor
+durasi_recovery_time
+durasi_response_time
+idpel_nometer
+keterangan_pelapor
+media
+nama_pelapor
+nama_unit
+no_laporan
+no_telp_pelapor
+status_akhir
+waktu_lapor
+waktu_recovery
+waktu_response
     }
   }
 `
@@ -163,28 +158,27 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     minDurasiRecoveryTime: 0,
     maxDurasiRecoveryTime: 0,
-    posko: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
 })
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
-    const minDurasiRecoveryTime = params.minDurasiRecoveryTime ? params.minDurasiRecoveryTime : 0
-    const maxDurasiRecoveryTime = params.maxDurasiRecoveryTime ? params.maxDurasiRecoveryTime : 0
+    const { ulp, uid, up3,minTime,maxTime } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        minDurasiRecoveryTime: minDurasiRecoveryTime,
-        maxDurasiRecoveryTime: maxDurasiRecoveryTime,
-        posko: posko ? posko.id : "",
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0})
+        minDurasiRecoveryTime: minTime,
+        maxDurasiRecoveryTime: maxTime,
+        idUlp: ulp ? ulp.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanRecoveryTime
-    
+
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -193,7 +187,7 @@ const filterData = (params: any) => {
     onError((error) => {
         console.log(error)
     })
-    
+
 }
 const filters = ref();
 </script>

src/components/Pages/Keluhan/Table_25.vue

@@ -5,14 +5,14 @@
         }
             " />
     </Filters>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :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"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
                <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
         v-if="loading" v-model:visible="loading" :enabled="true" />
@@ -54,7 +54,7 @@
                 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"
+            <DxColumn :width="150" alignment="center" data-field="nama_idUlp" caption="Nama ULP"
                 css-class="custom-table-column" />
         </DxDataGrid>
     </div>
@@ -127,14 +127,14 @@ const GET_DATA = gql`
   query daftarKeluhanSelesaiTanpaIdPelanggan(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
     daftarKeluhanSelesaiTanpaIdPelanggan(
       dateFrom: $dateFrom
       dateTo: $dateTo
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
     ) {
@@ -148,7 +148,7 @@ const GET_DATA = gql`
       nama_pelapor
       no_laporan
       no_telp_pelapor
-      posko
+      idUlp
       status_akhir
       waktu_recovery
       waktu_response
@@ -159,18 +159,18 @@ const GET_DATA = gql`
 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: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
 })
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+      const { idUlp, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        idUlp: idUlp ? idUlp.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0})
 

src/components/Pages/Keluhan/Table_26.vue

@@ -5,17 +5,17 @@
         }
             " />
     </Filters>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+    <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 :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+                :show-info="true" :show-navigation-buttons="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -123,7 +123,7 @@ const GET_DATA = gql`
   query daftarKeluhanBerdasarkanMedia(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
     $media: String!
@@ -131,7 +131,7 @@ const GET_DATA = gql`
     daftarKeluhanBerdasarkanMedia(
       dateFrom: $dateFrom
       dateTo: $dateTo
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
       media: $media
@@ -146,7 +146,7 @@ const GET_DATA = gql`
       nama_pelapor
       no_laporan
       no_telp_pelapor
-      posko
+      idUlp
       status_akhir
       waktu_recovery
       waktu_response
@@ -157,25 +157,26 @@ const GET_DATA = gql`
 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: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
 })
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+    const { idUlp, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0})
+        idUlp: idUlp ? idUlp.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
-    
+
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)

src/components/Pages/Keluhan/Table_27.vue

@@ -5,14 +5,14 @@
         }
             " />
     </Filters>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :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"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
                 v-if="loading" v-model:visible="loading" :enabled="true" />
@@ -121,7 +121,7 @@ const GET_DATA = gql`
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -129,7 +129,7 @@ const GET_DATA = gql`
 (
         dateFrom: $dateFrom
         dateTo: $dateTo
-        posko: $posko
+        idUlp: $idUlp
         idUid: $idUid
         idUp3: $idUp3
     ) {
@@ -143,7 +143,7 @@ const GET_DATA = gql`
         nama_pelapor
         no_laporan
         no_telp_pelapor
-        posko
+        idUlp
         status_akhir
         waktu_recovery
         waktu_response
@@ -154,7 +154,7 @@ const GET_DATA = gql`
 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: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0,
     media: 'Twitter'
@@ -163,12 +163,12 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const { posko, uid, up3 } = params
+    const { idUlp, uid, up3 } = params
     const media = params.media ? params.media.id : ''
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        idUlp: idUlp ? idUlp.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0,
         media: media

src/components/Pages/Keluhan/Table_28.vue

@@ -19,7 +19,7 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="170" alignment="center" data-field="posko" caption="Nama Unit" css-class="custom-table-column" />
+      <DxColumn :width="170" alignment="center" data-field="idUlp" 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" />
@@ -126,7 +126,7 @@ query rekapitulasiKeluhanAll
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -134,7 +134,7 @@ query rekapitulasiKeluhanAll
 (
         dateFrom: $dateFrom
         dateTo: $dateTo
-        posko: $posko
+        idUlp: $idUlp
         idUid: $idUid
         idUp3: $idUp3
     ) {
@@ -151,7 +151,7 @@ query rekapitulasiKeluhanAll
         min_durasi_response
         persen_inproses
         persen_selesai
-        posko
+        idUlp
         total
         total_diatas_sla_dispatch
         total_diatas_sla_recovery
@@ -167,7 +167,7 @@ query rekapitulasiKeluhanAll
   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: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
   })
@@ -175,11 +175,11 @@ query rekapitulasiKeluhanAll
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+      const { idUlp, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        idUlp: idUlp ? idUlp.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0})
 

src/components/Pages/Keluhan/Table_29.vue

@@ -147,14 +147,14 @@ const GET_DATA = gql`
   query rekapitulasiKeluhanPenyelesaianPerFungsiBidang(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
     rekapitulasiKeluhanPenyelesaianPerFungsiBidang(
       dateFrom: $dateFrom
       dateTo: $dateTo
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
     ) {
@@ -182,7 +182,7 @@ const GET_DATA = gql`
 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: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
 })
@@ -190,11 +190,11 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+      const { idUlp, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        idUlp: idUlp ? idUlp.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0})
 

src/components/Pages/Keluhan/Table_30.vue

@@ -5,7 +5,7 @@
             }
             " />
     </Filters>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
@@ -138,7 +138,7 @@ query rekapitulasiKeluhanPerJenisKeluhan
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -146,7 +146,7 @@ query rekapitulasiKeluhanPerJenisKeluhan
 (
         dateFrom: $dateFrom
         dateTo: $dateTo
-        posko: $posko
+        idUlp: $idUlp
         idUid: $idUid
         idUp3: $idUp3
     ) {
@@ -176,7 +176,7 @@ query rekapitulasiKeluhanPerJenisKeluhan
 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: "",
+    idUlp: 0,
     idUid: 0,
     idUp3: 0,
 })
@@ -184,11 +184,11 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+      const { idUlp, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        idUlp: idUlp ? idUlp.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0})
 

src/components/Pages/Keluhan/Table_31.vue

@@ -5,7 +5,7 @@
         }
             " />
     </Filters>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
@@ -138,7 +138,7 @@ query rekapitulasiKeluhanPerKelompokKeluhan
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -146,7 +146,7 @@ query rekapitulasiKeluhanPerKelompokKeluhan
 (
         dateFrom: $dateFrom
         dateTo: $dateTo
-        posko: $posko
+        idUlp: $idUlp
         idUid: $idUid
         idUp3: $idUp3
     ) {
@@ -176,7 +176,7 @@ query rekapitulasiKeluhanPerKelompokKeluhan
 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: "",
+    idUlp: 0,
     idUid: 0,
     idUp3: 0,
 })
@@ -184,11 +184,11 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+      const { idUlp, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        idUlp: idUlp ? idUlp.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0})
 

src/components/Pages/Keluhan/Table_32.vue

@@ -145,14 +145,14 @@ const GET_DATA = gql`
   query rekapitulasiKeluhanPerTanggal(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
     rekapitulasiKeluhanPerTanggal(
       dateFrom: $dateFrom
       dateTo: $dateTo
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
     ) {
@@ -185,7 +185,7 @@ const GET_DATA = gql`
 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: '',
+  idUlp: '',
   idUid: 0,
   idUp3: 0
 })
@@ -193,11 +193,11 @@ const filters = ref();
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-  const { posko, uid, up3 } = params
+  const { idUlp, uid, up3 } = params
   refetch({
     dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
     dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-    posko: posko ? posko.id : "",
+    idUlp: idUlp ? idUlp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })

src/components/Pages/Keluhan/Table_33.vue

@@ -21,7 +21,7 @@
 
       <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 :width="170" alignment="center" data-field="idUlp" 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" />
@@ -144,14 +144,14 @@ const GET_DATA = gql`
   query rekapitulasiKeluhanPerUnit(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
     rekapitulasiKeluhanPerUnit(
       dateFrom: $dateFrom
       dateTo: $dateTo
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
     ) {
@@ -168,7 +168,7 @@ const GET_DATA = gql`
       min_durasi_response
       persen_inproses
       persen_selesai
-      posko
+      idUlp
       total
       total_diatas_sla_dispatch
       total_diatas_sla_recovery
@@ -184,7 +184,7 @@ const GET_DATA = gql`
 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: '',
+  idUlp: 0,
   idUid: 0,
   idUp3: 0
 })
@@ -192,11 +192,11 @@ const filters = ref();
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-  const { posko, uid, up3 } = params
+  const { idUlp, uid, up3 } = params
   refetch({
     dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
     dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-    posko: posko ? posko.id : "",
+    idUlp: idUlp ? idUlp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })

src/components/Pages/Keluhan/Table_34.vue

@@ -96,14 +96,14 @@ const GET_DATA = gql`
   query rekapitulasiKeluhanBerdasarkanMedia(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
     rekapitulasiKeluhanBerdasarkanMedia(
       dateFrom: $dateFrom
       dateTo: $dateTo
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
     ) {
@@ -145,7 +145,7 @@ const GET_DATA = gql`
 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: '',
+  idUlp: 0,
   idUid: 0,
   idUp3: 0
 })
@@ -153,11 +153,11 @@ const filters = ref();
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-  const { posko, uid, up3 } = params
+  const { idUlp, uid, up3 } = params
   refetch({
     dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
     dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-    posko: posko ? posko.id : "",
+    idUlp: idUlp ? idUlp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })

src/components/Pages/Keluhan/Table_35.vue

@@ -5,7 +5,7 @@
         }
             " />
     </Filters>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
@@ -23,7 +23,7 @@
                 :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"
+            <DxColumn :width="170" alignment="center" data-field="nama_idUlp" caption="Nama Unit"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                 <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
@@ -131,7 +131,7 @@ query rekapitulasiKeluhanRatingPerUnit
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -139,7 +139,7 @@ query rekapitulasiKeluhanRatingPerUnit
 (
         dateFrom: $dateFrom
         dateTo: $dateTo
-        posko: $posko
+        idUlp: $idUlp
         idUid: $idUid
         idUp3: $idUp3
     ) {
@@ -147,7 +147,7 @@ query rekapitulasiKeluhanRatingPerUnit
         indeks_rating 
         jumlah_non_rating 
         jumlah_rating 
-        nama_posko      
+        nama_idUlp      
         persen_in_process 
         persen_non_rating 
         persen_rating 
@@ -165,7 +165,7 @@ query rekapitulasiKeluhanRatingPerUnit
 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: "",
+    idUlp: 0,
     idUid: 0,
     idUp3: 0,
 })
@@ -173,11 +173,11 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const { posko, uid, up3 } = params
+    const { idUlp, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        idUlp: idUlp ? idUlp.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0
     })

src/components/Pages/Material/Table_68.vue

@@ -11,30 +11,35 @@
             @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"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+            <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="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nomo_gangguan"
                 caption="Nomor Gangguan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_pelanggan"
                 caption="Nama Pelanggan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Isi Laporan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="isi_laporan"
+                caption="Isi Laporan" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="penyebab_gangguan"
                 caption="Penyebab Gangguan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Padam" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="waktu_padam"
+                caption="Tgl Padam" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Nyala" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Regu" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="regu" caption="Regu" />
             <DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
-                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Sumber" />
+                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber"
+                    caption="Sumber" />
                 <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Nama" />
-                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Satuan" />
-                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Vol" />
+                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="satuan"
+                    caption="Satuan" />
+                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="volume"
+                    caption="Vol" />
             </DxColumn>
 
         </DxDataGrid>
@@ -42,19 +47,81 @@
 </template>
 
 <script setup lang="ts">
+
 import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import Filters from '@/components/Form/Filters.vue';
 import { Type14 } from '@/components/Form/FiltersType';
+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 loading = ref(false)
-const filters = ref()
-const filterData = (filters: any) => {
-    console.log(filters)
+const data = ref<any[]>([])
+
+const daftarGangguanDanMaterialDipakai = gql`
+  query DaftardaftarGangguanDanMaterialDipakai(
+    $dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
+  ) {
+    daftarGangguanDanMaterialDipakai(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        distribusi: $idUid
+        area: $idUp3
+        posko: $posko
+    ) {
+        isi_laporan
+        nama_material
+        nama_pelanggan
+        nomor_gangguan
+        penyebab_gangguan
+        regu
+        satuan
+        sumber
+        volume
+        waktu_padam
+
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(daftarGangguanDanMaterialDipakai, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    idUid: 0,
+    idUp3: 0,
+    posko: ''
+})
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const { posko, idUid, idUp3 } = params
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        posko: posko ? posko.id : "",
+
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDanMaterialDipakai.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
 }
+const filters = ref()
 </script>

src/components/Pages/Material/Table_69.vue

@@ -1,29 +1,35 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type14 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+            <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="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="kode_material"
                 caption="Kode Material" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_material"
                 caption="Nama Material" />
-            <DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="" caption="Satuan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="satuan" caption="Satuan" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber_material"
                 caption="Sumber Material" />
             <DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
-                <DxColumn v-for="i in 31" css-class="custom-table-column" :width="150" alignment="center" data-field=""
-                    :caption="i" />
+                <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>
@@ -31,21 +37,106 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { Type14 } from '@/components/Form/FiltersType';
+import Filters from '@/components/Form/Filters.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 loading = ref(false)
+const data = ref<any[]>([])
 
-onMounted(() => {
-    const filters = useFiltersStore()
+const rekapitulasiPemakaianMaterial = gql`
+  query DaftarrekapitulasiPemakaianMaterial(
+    $dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
+  ) {
+    rekapitulasiPemakaianMaterial(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        distribusi: $idUid
+        area: $idUp3
+        posko: $posko
+    ) {
+        kode_material
+nama_material
+satuan
+sumber_material
+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-14'
-    })
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(rekapitulasiPemakaianMaterial, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    idUid: 0,
+    idUp3: 0,
+    posko: ''
 })
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+
+    const { posko, idUid, idUp3 } = params
+
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        posko: posko ? posko.id : "",
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.rekapitulasiPemakaianMaterial.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const filters = ref()
 </script>

src/components/Pages/MenuProvider.vue

@@ -14,12 +14,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { useFiltersStore } from '@/stores/filters'
 
 // Dapatkan objek route dari vue-router
 const route = useRoute()
 
 // Dapatkan nama rute menggunakan computed property
 const pageTitle = computed(() => route.name)
-const filters = useFiltersStore()
 </script>

src/components/Pages/Monalisa/Table_38.vue

@@ -91,7 +91,7 @@ const monalisaRecoveryTimeGangguan = gql`
 `;
 const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeGangguan, {
     regional: "",
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
     bulan: 10,

src/components/Pages/Monalisa/Table_44.vue

@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />

src/components/Pages/Monalisa/Table_47.vue

@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
@@ -116,7 +116,7 @@ const monalisaRecoveryTimeKeluhan = gql`
 `;
 const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
     regional: "",
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
     bulan: 10,

src/components/Pages/Monalisa/Table_48.vue

@@ -6,7 +6,7 @@
             " />
     </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"
+        <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">

src/components/Pages/Monalisa/Table_50.vue

@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">

src/components/Pages/Monalisa/Table_52.vue

@@ -6,32 +6,34 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Januari 2019" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                    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="`${getMonthName(bulanSekarang - 1)} ${tahunSekarang}`"
+                css-class="custom-table-column">
+                <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number"
+                    caption="Keluhan" css-class="custom-table-column" />
+                <DxColumn :width="120" alignment="center" data-field="gangguan_bulan_lalu" data-type="number"
+                    caption="Gangguan" css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                        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="informasi_keluhan_bulan_lalu" data-type="number"
+                        caption="Keluhan" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_lalu" data-type="number"
+                        caption="Gangguan" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_bulan_lalu" data-type="number"
+                        caption="Total" 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"
@@ -39,22 +41,22 @@
                     <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
-                <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field=""
-                    data-type="number" />
+                <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
+                    data-field="total_komplain_bulan_lalu" data-type="number" />
             </DxColumn>
 
             <DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
+                <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_ini" data-type="number"
+                    caption="Keluhan" css-class="custom-table-column" />
+                <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number"
+                    caption="Gangguan" css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                        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="informasi_keluhan_bulan_ini" data-type="number"
+                        caption="Keluhan" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_ini" data-type="number"
+                        caption="Gangguan" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_bulan_ini" data-type="number"
+                        caption="Total" 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"
@@ -62,26 +64,26 @@
                     <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
-                <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field=""
-                    data-type="number" />
+                <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
+                    data-field="total_komplain_bulan_ini" data-type="number" />
             </DxColumn>
             <DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="delta_penurunan_keluhan" data-type="number"
+                    caption="Keluhan" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="delta_penurunan_gangguan" data-type="number"
+                    caption="Gangguan" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="delta_penurunan_informasi" data-type="number"
+                    caption="Informasi" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="% Total"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_keluhan" data-type="number"
+                    caption="Keluhan" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_gangguan" data-type="number"
+                    caption="Gangguan" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_informasi" data-type="number"
+                    caption="Informasi" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_total" data-type="number"
+                    caption="% Total" css-class="custom-table-column" />
             </DxColumn>
 
         </DxDataGrid>
@@ -99,6 +101,9 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -106,7 +111,15 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+if (bulanSekarang.value - 1 == 0) {
+    let bulanLalu = 12
+    let tahunLalu = tahunSekarang.value - 1
+} else {
+    let bulanLalu = bulanSekarang.value - 1
+    let tahunLalu = tahunSekarang.value
+}
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -135,14 +148,87 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
-
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const penurunanJumlahKomplainBulanan = gql`
+  query DaftarpenurunanJumlahKomplainBulanan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    penurunanJumlahKomplainBulanan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        delta_penurunan_gangguan
+        delta_penurunan_informasi
+        delta_penurunan_keluhan
+        gangguan_bulan_ini
+        gangguan_bulan_lalu
+        informasi_gangguan_bulan_ini
+        informasi_gangguan_bulan_lalu
+        informasi_keluhan_bulan_ini
+        informasi_keluhan_bulan_lalu
+        keluhan_bulan_ini
+        keluhan_bulan_lalu
+        nama_posko
+        persen_penurunan_gangguan
+        persen_penurunan_informasi
+        persen_penurunan_keluhan
+        persen_penurunan_total
+        total_bulan_ini
+        total_bulan_lalu
+        total_komplain_bulan_ini
+        total_komplain_bulan_lalu
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(penurunanJumlahKomplainBulanan, {
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023
+})
+const filterData = (params: any) => {
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+    refetch({
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.penurunanJumlahKomplainBulanan.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
 }
 const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_53.vue

@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
@@ -20,30 +20,30 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
-                <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit"
+                <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
                     css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Feb 2020"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Menit)"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Feb 2020"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Jam)"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="G"
+                <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="K"
+                <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
                     css-class="custom-table-column" />
             </DxColumn>
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="% Rata-Rata Aging Complains"
+            <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
                 css-class="custom-table-column" />
 
         </DxDataGrid>
@@ -62,6 +62,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -69,7 +71,9 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -100,12 +104,74 @@ const onExporting = (e: any) => {
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const agingComplaintBulanan = gql`
+  query DaftaragingComplaintBulanan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    agingComplaintBulanan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        aging_komplain_gangguan
+        aging_komplain_keluhan
+        nama_posko
+        persen_rata_aging_komplain
+        rata_rct_gangguan_bulan
+        rata_rct_gangguan_sla
+        rata_rct_keluhan_bulan
+        rata_rct_keluhan_sla
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(agingComplaintBulanan, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.agingComplaintBulanan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_54.vue

@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
@@ -20,20 +20,20 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
-                <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit"
+                <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
                     css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Terencana"
+                <DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Tidak Terencana"
+                <DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number" caption="Tidak Terencana"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Bencana Alam"
+                <DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
                     css-class="custom-table-column" />
             </DxColumn>
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="Total"
+            <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="KPI ENS"
+            <DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
                 css-class="custom-table-column" />
 
         </DxDataGrid>
@@ -51,6 +51,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -58,7 +60,6 @@ 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()
@@ -92,9 +93,69 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const agingComplaintBulanan = gql`
+  query DaftaragingComplaintBulanan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    agingComplaintBulanan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        ens_bencana_alam
+ens_terencana
+ens_tidak_terencana
+kpi_ens
+nama_posko
+total
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(agingComplaintBulanan, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.agingComplaintBulanan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_55.vue

@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
@@ -19,23 +19,23 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :min-width="250" alignment="center" data-field="" caption="Nama Unit"
+            <DxColumn :min-width="250" alignment="center" data-field="nama_posko" caption="Nama Unit"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2020"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan" data-type="number" caption="Jan 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Gangguan"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total" data-type="number" caption="Total Gangguan"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2020"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan" data-type="number" caption="Jan 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Keluhan"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total" data-type="number" caption="Total Keluhan"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
-            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Komplain Pelanggan %"
+            <DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number" caption="Komplain Pelanggan %"
                 css-class="custom-table-column" />
 
         </DxDataGrid>
@@ -53,6 +53,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -60,7 +62,6 @@ 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()
@@ -94,9 +95,69 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const kepatuhandanAkurasiDalamPelaporanBulanan = gql`
+  query DaftarkepatuhandanAkurasiDalamPelaporanBulanan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    kepatuhandanAkurasiDalamPelaporanBulanan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        kepatuhan_akurasi_gangguan_berulang_bulan
+        kepatuhan_akurasi_gangguan_berulang_total
+        kepatuhan_akurasi_keluhan_berulang_bulan
+        kepatuhan_akurasi_keluhan_berulang_total
+        nama_posko
+        persen_komplain_pelanggan
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(kepatuhandanAkurasiDalamPelaporanBulanan, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.kepatuhandanAkurasiDalamPelaporanBulanan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_56.vue

@@ -18,58 +18,32 @@
             <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="s.d Januari 2019" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
+            <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
+                <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
                     css-class="custom-table-column" />
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
+            </DxColumn>
+            <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
                         css-class="custom-table-column" />
                 </DxColumn>
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Komplain"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="s.d Januari 2020" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
                         css-class="custom-table-column" />
                 </DxColumn>
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Komplain"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="% Total"
+            </DxColumn>
+            <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
                     css-class="custom-table-column" />
             </DxColumn>
+            <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
+                css-class="custom-table-column" />
 
         </DxDataGrid>
     </div>
@@ -86,6 +60,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -93,7 +69,6 @@ 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()
@@ -124,12 +99,86 @@ const onExporting = (e: any) => {
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const penurunanJumlahKomplainKumulatif = gql`
+  query DaftarpenurunanJumlahKomplainKumulatif(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    penurunanJumlahKomplainKumulatif(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        delta_penurunan_gangguan
+        delta_penurunan_informasi
+        delta_penurunan_keluhan
+        gangguan_bulan_ini
+        gangguan_bulan_lalu
+        informasi_gangguan_bulan_ini
+        informasi_gangguan_bulan_lalu
+        informasi_keluhan_bulan_ini
+        informasi_keluhan_bulan_lalu
+        keluhan_bulan_ini
+        keluhan_bulan_lalu
+        nama_posko
+        persen_penurunan_gangguan
+        persen_penurunan_informasi
+        persen_penurunan_keluhan
+        persen_penurunan_total
+        total_bulan_ini
+        total_bulan_lalu
+        total_komplain_bulan_ini
+        total_komplain_bulan_lalu
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(penurunanJumlahKomplainKumulatif, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.penurunanJumlahKomplainKumulatif.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_57.vue

@@ -19,31 +19,31 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" caption="Periode: s.d Januari, 2020" css-class="custom-table-column">
-                <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit"
+            <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
+                <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
                     css-class="custom-table-column" />
             </DxColumn>
-            <DxColumn alignment="center" caption="Aging Complains(Kum)" css-class="custom-table-column">
+            <DxColumn alignment="center" caption="Aging Complains (Kums)" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2020"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Menit)"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2020"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Jam)"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="G"
+                <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="K"
+                <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
                     css-class="custom-table-column" />
             </DxColumn>
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="% Rata-Rata Aging Complains"
+            <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
                 css-class="custom-table-column" />
 
         </DxDataGrid>
@@ -61,6 +61,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -68,7 +70,6 @@ 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()
@@ -102,9 +103,71 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const agingComplaintKumulatif = gql`
+  query DaftaragingComplaintKumulatif(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    agingComplaintKumulatif(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        aging_komplain_gangguan
+        aging_komplain_keluhan
+        nama_posko
+        persen_rata_aging_komplain
+        rata_rct_gangguan_bulan
+        rata_rct_gangguan_sla
+        rata_rct_keluhan_bulan
+        rata_rct_keluhan_sla
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(agingComplaintKumulatif, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.agingComplaintKumulatif.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_58.vue

@@ -19,21 +19,21 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" caption="Periode: s.d Januari, 2020" css-class="custom-table-column">
-                <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit"
+            <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
+                <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
                     css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Terencana"
+                <DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Tidak Terencana"
+                <DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number" caption="Tidak Terencana"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Bencana Alam"
+                <DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
                     css-class="custom-table-column" />
             </DxColumn>
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="Total"
+            <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="KPI ENS"
+            <DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
                 css-class="custom-table-column" />
 
         </DxDataGrid>
@@ -51,6 +51,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -58,7 +60,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
+
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -92,9 +94,69 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const kepatuhandanAkurasiDalamPelaporanKumulatif = gql`
+  query DaftarkepatuhandanAkurasiDalamPelaporanKumulatif(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    kepatuhandanAkurasiDalamPelaporanKumulatif(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        kepatuhan_akurasi_gangguan_berulang_bulan
+        kepatuhan_akurasi_gangguan_berulang_total
+        kepatuhan_akurasi_keluhan_berulang_bulan
+        kepatuhan_akurasi_keluhan_berulang_total
+        nama_posko
+        persen_komplain_pelanggan
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(kepatuhandanAkurasiDalamPelaporanKumulatif, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.kepatuhandanAkurasiDalamPelaporanKumulatif.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>

src/components/Pages/Monalisa/Table_59.vue

@@ -19,24 +19,23 @@
             <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 :min-width="250" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" 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="Gangguan Berulang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2020"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan" data-type="number" caption="Jan 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Gangguan"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total" data-type="number" caption="Total Gangguan"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2020"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan" data-type="number" caption="Jan 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Keluhan"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total" data-type="number" caption="Total Keluhan"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
-            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Komplain Pelanggan %"
+            <DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number" caption="Komplain Pelanggan %"
                 css-class="custom-table-column" />
 
         </DxDataGrid>
@@ -54,13 +53,16 @@ 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 loading = ref(false)
+const data = ref<any[]>([])
+
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -94,9 +96,69 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const kepatuhandanAkurasiDalamPelaporanBulanan = gql`
+  query DaftarkepatuhandanAkurasiDalamPelaporanBulanan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    kepatuhandanAkurasiDalamPelaporanBulanan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        kepatuhan_akurasi_gangguan_berulang_bulan
+        kepatuhan_akurasi_gangguan_berulang_total
+        kepatuhan_akurasi_keluhan_berulang_bulan
+        kepatuhan_akurasi_keluhan_berulang_total
+        nama_posko
+        persen_komplain_pelanggan
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(kepatuhandanAkurasiDalamPelaporanBulanan, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.kepatuhandanAkurasiDalamPelaporanBulanan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>

src/components/Pages/PencarianData/Table_71.vue

@@ -11,7 +11,7 @@
             @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"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
                <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
         v-if="loading" v-model:visible="loading" :enabled="true" />

src/components/Select.vue

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

src/components/SelectMulti.vue

@@ -1,107 +1,115 @@
 <script setup lang="ts">
-interface DataItem {
-  id: number;
-  name: string;
+
+import { type PropType } from 'vue'
+import Multiselect from '@vueform/multiselect'
+interface Tags {
+  id: number
+  value: string,
+  label: string
 }
 
-import { ref, computed, onMounted } from 'vue'
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxButton,
-  ComboboxOptions,
-  ComboboxOption,
-  TransitionRoot
-} from '@headlessui/vue'
-import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
-
-const props = defineProps({
+defineProps({
   placeholder: {
     type: String,
     default: ''
   },
-  data: {
-    type: Array as () => DataItem[],
-    default: []
+  tags: {
+    type: Array as PropType<Tags[]>,
+    required: true
+  },
+  useLabel: {
+    type: Boolean,
+    default: false
+  },
+  label: {
+    type: String,
+    default: ''
   }
 })
-const emit = defineEmits(["update:selected"])
-
-const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data]);
-
-let selected = ref<DataItem[]>([data.value[0]])
-let query = ref('')
-let filteredData = computed(() =>
-  query.value === ''
-    ? data.value
-    : data.value.filter((item: DataItem) =>
-      item.name
-        .toLowerCase()
-        .replace(/\s+/g, '')
-        .includes(query.value.toLowerCase().replace(/\s+/g, ''))
-    )
-)
-
-const show = ref(false)
- const removeJenis = (item: DataItem) => {
-    selected.value = selected.value.filter((i) => i.id !== item.id)
-  }
-onMounted(() => {
-})
-
-
 </script>
 
 <template>
-  <Combobox @update:modelValue="value => emit('update:selected', value)" v-model="selected" v-slot="{ open }" multiple>
-    <div class="relative mt-1">
-      
-      <div
-        class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
-        <ComboboxInput class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
-          :displayValue="(item: any) => (show || open ? '' : item.name)" @change="query = $event.target.value"
-          @click="show = true" @blur="show = false" defaultValue="" />
-
-        <ComboboxButton id="Test" class="absolute inset-y-0 right-0 flex items-center pr-2">
-          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
-        </ComboboxButton>
-      </div>
-      <span class="flex flex-wrap gap-2">
-        <span v-if="selected.length == 0" class="p-0.5">Empty</span>
-        <span v-for="item in selected" :key="item.id" class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
-          <span>{{ item.name }}</span>
-          <svg class="h-4 w-4 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg" @click.stop.prevent="removeJenis(item)">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </span>
-      </span>
-      <TransitionRoot :show="show || open" leave="transition ease-in duration-100" leaveFrom="opacity-100"
-        leaveTo="opacity-0" @after-leave="query = ''">
-        <ComboboxOptions static
-          class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-          <div v-if="filteredData.length === 0 && query !== ''"
-            class="relative cursor-default select-none py-2 px-4 text-gray-700">
-            Nothing found.
-          </div>
-
-          <ComboboxOption v-for="item in filteredData" as="template" :key="item.id" :value="item"
-            v-slot="{ selected, active }">
-            <li class="relative cursor-default select-none py-2 pl-10 pr-4" :class="{
-              'bg-teal-600 text-white': active,
-              'text-gray-900': !active
-            }">
-              <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
-                {{ item.name }}
-              </span>
-              <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3"
-                :class="{ 'text-white': active, 'text-teal-600': !active }">
-                <CheckIcon class="h-5 w-5" aria-hidden="true" />
-              </span>
-            </li>
-          </ComboboxOption>
-        </ComboboxOptions>
-      </TransitionRoot>
-    </div>
-  </Combobox>
-</template>
+  <div class="flex flex-col">
+    <Multiselect
+      mode="tags"
+      :placeholder="placeholder"
+      :close-on-select="false"
+      :searchable="true"
+      :create-option="true"
+      :options="tags"
+      :classes="{
+        container:
+          'relative py-[5px] mx-auto w-full flex items-center justify-end cursor-pointer rounded-lg  bg-gray-200 text-left text-base leading-snug outline-none',
+        containerDisabled: 'cursor-default bg-gray-50',
+        containerOpen: 'rounded-b-none',
+        containerOpenTop: 'rounded-t-none',
+        containerActive: '',
+        wrapper:
+          'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-none',
+        singleLabel:
+          'flex items-center h-full max-w-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 pr-16 box-border rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
+        singleLabelText: 'overflow-ellipsis overflow-hidden block whitespace-nowrap max-w-full',
+        multipleLabel:
+          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
+        search:
+          'w-full absolute inset-0 outline-none focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5 rtl:pl-0 rtl:pr-3.5',
+        tags: 'flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2',
+        tag: 'bg-primary-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap min-w-0 rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1',
+        tagDisabled: 'pr-2 opacity-50 rtl:pl-2',
+        tagWrapper: 'whitespace-nowrap overflow-hidden overflow-ellipsis',
+        tagWrapperBreak: 'whitespace-normal break-all',
+        tagRemove:
+          'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group',
+        tagRemoveIcon:
+          'bg-multiselect-remove bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
+        tagsSearchWrapper: 'inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full',
+        tagsSearch:
+          ' bg-gray-200  absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full',
+        tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
+        placeholder:
+          'flex items-center text-sm h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
+        caret:
+          'bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5',
+        caretOpen: 'rotate-180 pointer-events-auto',
+        clear:
+          'pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5',
+        clearIcon:
+          'bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block',
+        spinner:
+          'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin flex-shrink-0 flex-grow-0 rtl:mr-0 rtl:ml-3.5',
+        infinite: 'flex items-center justify-center w-full',
+        infiniteSpinner:
+          'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin flex-shrink-0 flex-grow-0 m-3.5',
+        dropdown:
+          'max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b',
+        dropdownTop: '-translate-y-full top-px bottom-auto rounded-b-none rounded-t',
+        dropdownHidden: 'hidden',
+        options: 'flex flex-col p-0 m-0 list-none',
+        optionsTop: '',
+        group: 'p-0 m-0',
+        groupLabel:
+          'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
+        groupLabelPointable: 'cursor-pointer',
+        groupLabelPointed: 'bg-gray-300 text-gray-700',
+        groupLabelSelected: 'bg-green-600 text-white',
+        groupLabelDisabled: 'bg-gray-100 text-gray-300 cursor-not-allowed',
+        groupLabelSelectedPointed: 'bg-green-600 text-white opacity-90',
+        groupLabelSelectedDisabled: 'text-green-100 bg-green-600 bg-opacity-50 cursor-not-allowed',
+        groupOptions: 'p-0 m-0',
+        option:
+          'flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3',
+        optionPointed: 'text-gray-800 bg-gray-100',
+        optionSelected: 'text-white bg-green-500',
+        optionDisabled: 'text-gray-300 cursor-not-allowed',
+        optionSelectedPointed: 'text-white bg-green-500 opacity-90',
+        optionSelectedDisabled: 'text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed',
+        noOptions: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
+        noResults: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
+        fakeInput:
+          'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent',
+        assist: 'absolute -m-px w-px h-px overflow-hidden',
+        spacer: 'box-content'
+      }"
+    />
+  </div>
+</template>

src/main.ts

@@ -7,14 +7,30 @@ import router from './router'
 import { createApp, provide, h } from 'vue'
 import { DefaultApolloClient } from '@vue/apollo-composable'
 import { apolloClient } from './utils/graphql'
+import { VanillaComponents, defineConfiguration } from '@flavorly/vanilla-components'
 
 const app = createApp({
   setup() {
     provide(DefaultApolloClient, apolloClient())
   },
-  render: () => h(App),
+  render: () => h(App)
 })
 
+app.use(
+  VanillaComponents,
+  defineConfiguration({
+    RichSelect: {
+      classes: {
+        trigger:
+          'bg-gray-200 border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 relative flex items-center justify-between w-full focus:z-10 cursor-pointer text-sm transition duration-100 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed px-4 py-3',
+        searchInput:
+          'inline-block focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 w-full  text-sm px-4 py-2.5 text-gray-700 placeholder-gray-500/60 border-0 rounded-lg bg-gray-200',
+        selectedHighlightedOption: 'font-semibold bg-teal-600 focus:outline-none text-white'
+      }
+    }
+  })
+)
+
 app.use(createPinia())
 app.use(router)
-app.mount('#app')
+app.mount('#app')

src/stores/totalDuration.ts

@@ -2,8 +2,8 @@ import { ref } from 'vue'
 import { defineStore } from 'pinia'
 
 export const useTotalDuration = defineStore('totalDuration', () => {
-    const totalMin = ref(1)
-    const totalMax = ref(1)
+    const totalMin = ref("1 Menit")
+    const totalMax = ref("5 Menit")
     const setDataMin = (value: any) => {
         totalMin.value = value
     }

src/types/flavorly-vanilla-components.d.ts

@@ -0,0 +1 @@
+declare module '@flavorly/vanilla-components'

src/utils/graphql.ts

@@ -3,7 +3,7 @@ import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core
 export const apolloClient = () => {
 
   const httpLink =  createHttpLink({
-    uri: 'http://192.168.1.84:32180/graphql', //api dev server
+    uri: 'http://10.1.50.173:32180/graphql',
     credentials: 'include', // Include credentials for cross-origin requests
   });
 

src/utils/network.ts

@@ -1,7 +1,8 @@
 import axios from 'axios'
-
+const url = 'http://10.1.50.173:32181'
 const instance = axios.create({
-  baseURL: 'http://192.168.1.84:32181'
+  // baseURL: 'http://192.168.1.84:32180'
+  baseURL: url
 })
 
 const getUid = async () => await instance.get('/uid')
@@ -12,4 +13,4 @@ const getJenisTransaksi = async () => await instance.get('/jenisTransaksi')
 const getUp3 = async (uid: number) => await instance.get('/up3?uid=' + uid)
 const getUlp = async (up3: number) => await instance.get('/ulp?up3=' + up3)
 const getPosko = async (uppp: number) => await instance.get('/posko?up3=' + uppp)
-export { getUid, getUp3, getPosko, getUlp, getMedia, getJenisTransaksi, getUidRegional,getRegional}
+export { getUid, getUp3, getPosko, getUlp, getMedia, getJenisTransaksi, getUidRegional, getRegional }

src/views/TestView.vue

@@ -1,31 +1,33 @@
+<script setup lang="ts">
+import { RichSelect } from '@flavorly/vanilla-components'
+import { ref } from 'vue'
+const value = ref('Option 1')
+
+const options = [
+  { value: 'Option 1', text: 'One Option' },
+  { value: 'Option 2', text: 'Two Options' },
+  { value: [{ anotherObject: true, nested: 'deep' }], text: 'Complex Object' },
+  {
+    value: 'seprator',
+    text: 'A sperator can be usefull',
+    children: [
+      { value: 'Option 4', text: '4th Option' },
+      { value: 'Option 5', text: '5th Option' }
+    ]
+  }
+]
+</script>
+
 <template>
-  <div>
-    <fieldset>
-      <div class="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
-        <div
-          v-for="item in radioItems"
-          :key="item.id"
-          class="flex items-center"
-        >
-          <input
-            :id="item.id"
-            type="radio"
-            name="radio"
-            class="h-4 w-4 border-gray-300 text-primary-500 peer focus:ring-primary-500"
-          />
-          <label
-            :for="item.id"
-            class="ml-3 block text-sm font-medium text-gray-700 peer-checked:text-primary-500"
-            >{{ item.title }}</label
-          >
-        </div>
-      </div>
-    </fieldset>
+  <div class="container bg-red-300 m-auto p-5">
+    <div class="w-full">
+      <RichSelect
+        v-model="value"
+        name="test"
+        :options="options"
+        :clearable="true"
+        placeholder="Please select an option"
+      />
+    </div>
   </div>
 </template>
-
-<script setup lang="ts">
-defineProps({
-  radioItems: Object
-})
-</script>

tailwind.config.js

@@ -1,102 +1,119 @@
 /** @type {import('tailwindcss').Config} */
-const colors = require("tailwindcss/colors")
+const svgToDataUri = require('mini-svg-data-uri')
+const colors = require('tailwindcss/colors')
 export default {
   content: [
-    "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
-    "./src/**/**/*.{vue,js,ts,jsx,tsx}",
-    "./node_modules/vue-tailwind-datepicker/**/*.js"
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+    './src/**/**/*.{vue,js,ts,jsx,tsx}',
+    './node_modules/vue-tailwind-datepicker/**/*.js',
+    './node_modules/@flavorly/vanilla-components/dist/presets/tailwind/all.json'
   ],
+  mode: 'jit',
+  darkMode: 'class',
   theme: {
     extend: {
+      backgroundImage: (theme) => ({
+        'multiselect-caret': `url("${svgToDataUri(
+          `<svg viewBox="0 0 320 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg>`
+        )}")`,
+        'multiselect-spinner': `url("${svgToDataUri(
+          `<svg viewBox="0 0 512 512" fill="${theme(
+            'colors.green.500'
+          )}" xmlns="http://www.w3.org/2000/svg"><path d="M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z"></path></svg>`
+        )}")`,
+        'multiselect-remove': `url("${svgToDataUri(
+          `<svg viewBox="0 0 320 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path></svg>`
+        )}")`
+      }),
       fontFamily: {
-        sans: ['Plus Jakarta Sans', 'sans-serif'],
+        sans: ['Plus Jakarta Sans', 'sans-serif']
       },
       width: {
-        '266': '266px',
-        '320': '320px',
+        266: '266px',
+        320: '320px'
       },
       height: {
         'screen-80': '80vh'
       },
       colors: {
-        "vtd-primary": {
-          '50': '#e6eff1',
-          '100': '#cddee3',
-          '200': '#9abdc6',
-          '300': '#689daa',
-          '400': '#357c8d',
-          '500': '#035b71',
-          '600': '#02495a',
-          '700': '#02495a',
-          '800': '#01242d',
-          '900': '#011217',
+        'vtd-primary': {
+          50: '#e6eff1',
+          100: '#cddee3',
+          200: '#9abdc6',
+          300: '#689daa',
+          400: '#357c8d',
+          500: '#035b71',
+          600: '#02495a',
+          700: '#02495a',
+          800: '#01242d',
+          900: '#011217'
         },
-        'layout': '#F3F7F9',
-        'dark': '#151617',
-        'aside': '#2E3536',
-        'primary': {
-          '50': '#e6eff1',
-          '100': '#cddee3',
-          '200': '#9abdc6',
-          '300': '#689daa',
-          '400': '#357c8d',
-          '500': '#035b71',
-          '600': '#02495a',
-          '700': '#02495a',
-          '800': '#01242d',
-          '900': '#011217',
+        layout: '#F3F7F9',
+        dark: '#151617',
+        aside: '#2E3536',
+        primary: {
+          50: '#e6eff1',
+          100: '#cddee3',
+          200: '#9abdc6',
+          300: '#689daa',
+          400: '#357c8d',
+          500: '#035b71',
+          600: '#02495a',
+          700: '#02495a',
+          800: '#01242d',
+          900: '#011217'
         },
-        'secondary': {
-          '50': '#e5eef7',
-          '100': '#ccebef',
-          '200': '#99d7df',
-          '300': '#66c2d0',
-          '400': '#33aec0',
-          '500': '#00a2b9',
-          '600': '#007b8d',
-          '700': '#005c6a',
-          '800': '#003e46',
-          '900': '#001f23',
+        secondary: {
+          50: '#e5eef7',
+          100: '#ccebef',
+          200: '#99d7df',
+          300: '#66c2d0',
+          400: '#33aec0',
+          500: '#00a2b9',
+          600: '#007b8d',
+          700: '#005c6a',
+          800: '#003e46',
+          900: '#001f23'
         },
-        'red': {
-          '50': '#ffe5e5',
-          '100': '#ffcccc',
-          '200': '#ff9999',
-          '300': '#ff6666',
-          '400': '#ff3333',
-          '500': '#ff0000',
-          '600': '#cc0000',
-          '700': '#990000',
-          '800': '#660000',
-          '900': '#330000',
+        red: {
+          50: '#ffe5e5',
+          100: '#ffcccc',
+          200: '#ff9999',
+          300: '#ff6666',
+          400: '#ff3333',
+          500: '#ff0000',
+          600: '#cc0000',
+          700: '#990000',
+          800: '#660000',
+          900: '#330000'
         },
-        'yellow': {
-          '50': '#ffffe5',
-          '100': '#ffffcc',
-          '200': '#ffff99',
-          '300': '#ffff66',
-          '400': '#ffff33',
-          '500': '#ffff00',
-          '600': '#cccc00',
-          '700': '#999900',
-          '800': '#666600',
-          '900': '#333300',
+        yellow: {
+          50: '#ffffe5',
+          100: '#ffffcc',
+          200: '#ffff99',
+          300: '#ffff66',
+          400: '#ffff33',
+          500: '#ffff00',
+          600: '#cccc00',
+          700: '#999900',
+          800: '#666600',
+          900: '#333300'
         },
-        'gray': {
-          '50': '#f9fafb',
-          '100': '#f3f4f6',
-          '200': '#e5e7eb',
-          '300': '#d1d5db',
-          '400': '#9ca3af',
-          '500': '#6b7280',
-          '600': '#4b5563',
-          '700': '#374151',
-          '800': '#1f2937',
-          '900': '#111827',
-        },
-      },
-    },
+        gray: {
+          50: '#f9fafb',
+          100: '#f3f4f6',
+          200: '#e5e7eb',
+          300: '#d1d5db',
+          400: '#9ca3af',
+          500: '#6b7280',
+          600: '#4b5563',
+          700: '#374151',
+          800: '#1f2937',
+          900: '#111827'
+        }
+      }
+    }
   },
   plugins: [
     require('@tailwindcss/typography'),
@@ -104,6 +121,6 @@ export default {
     require('@tailwindcss/aspect-ratio'),
     require('@tailwindcss/container-queries'),
     require('@headlessui/tailwindcss'),
-    require('@headlessui/tailwindcss')({ prefix: 'ui' }),
-  ],
-}
+    require('@headlessui/tailwindcss')({ prefix: 'ui' })
+  ]
+}

tsconfig.json

@@ -13,6 +13,7 @@
   ],
   "compilerOptions": {
     "strict": true,
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "typeRoots": ["./src/types", "./node_modules/@types"]
   }
-}
+}