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

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'
 

src/components/Form/Filters.vue

@@ -1,3 +1,4 @@
+<!-- ss -->
 <script setup lang="ts">
 // components
 import Button from '@/components/Button.vue'

src/components/Form/FiltersType/Type1.vue

@@ -1,27 +1,23 @@
 <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 poskoPlaceholder = 'Semua Posko'
 const uppp = ref({ id: 0, name: uppPlaceholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
 const posko = ref({ id: 0, name: poskoPlaceholder })
-
 const emit = defineEmits(['update:filters'])
-
 const data = ref({
   uid: uid.value,
   up3: uppp.value,
@@ -54,8 +50,8 @@ const setPosko = (value: any) => {
 }
 
 onMounted(() => {
-  emit('update:filters', data.value)
   fetchUid()
+  emit('update:filters', data.value)
 })
 </script>
 
@@ -65,12 +61,7 @@ onMounted(() => {
       >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">

src/components/Form/FiltersType/Type10.vue

@@ -29,7 +29,10 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type11.vue

@@ -29,7 +29,10 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type12.vue

@@ -30,7 +30,10 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type13.vue

@@ -30,7 +30,10 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type14.vue

@@ -29,6 +29,9 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type15.vue

@@ -20,6 +20,9 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type16.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
+  import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData,fetchMedia, items,itemsUp3, itemsPosko,itemsMedia} from './reference';
+fetchMedia();
 </script>
 
 <template>
@@ -27,12 +29,15 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Media:</label>
 
-    <Select placeholder="Semua Media" />
+    <Select placeholder="Semua Media" :data="itemsMedia" />
   </div>
   
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type17.vue

@@ -8,7 +8,10 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type18.vue

@@ -3,7 +3,7 @@ import Select from '@/components/Select.vue'
 import SelectMulti from '@/components/SelectMulti.vue'
 
 import DatePicker from '@/components/DatePicker.vue'
-import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
+import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
 fetchData();
 
 const departments = [
@@ -20,13 +20,13 @@ 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 Induk Distribusi/Wilayah:</label>
 
-    <Select @update:selected="selectedUid($event)" :data="items" placeholder="Semua Unit Induk Distribusi/Wilayah" />
+    <Select @update:selected="selectedUid($event)" :data="itemsUid" placeholder="Semua Unit Induk Distribusi/Wilayah" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select @update:selected="selectedUppp($event)" :data="itemsUp3"
+    <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3"
       placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
   </div>
 

src/components/Form/FiltersType/Type2.vue

@@ -1,8 +1,7 @@
 <!-- <script setup lang="ts">
 import Select from '@/components/Select.vue'
-import { selectedUid,  selectedUp3Ulp, fetchData, items, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
+import { selectedUid,  selectedUp3Ulp, fetchUid, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
 import { ref } from 'vue';
-fetchData();
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
@@ -19,7 +18,7 @@ const setRegional = (value: any) => {
 };
 const setUid = (value: any) => {
   uid.value = value;
-  selectedUid(value);
+  selectedUid(value); 
   uppp.value = { id: 0, name: up3Placholder };
 };
 
@@ -33,6 +32,7 @@ const setUlp = (value: any) => {
   ulp.value = value;
   selectedUp3Ulp(value);
 };
+
 </script>
 
 <template>
@@ -45,7 +45,7 @@ const setUlp = (value: any) => {
   <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="items" :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">

src/components/Form/FiltersType/Type3.vue

@@ -1,7 +1,7 @@
 <!-- <script setup lang="ts">
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-import { selectedUid, selectedUp3Ulp,selectedUlp, fetchData, items, itemsUp3, itemsUlp } from './reference';
+import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
 import { ref } from 'vue';
 fetchData();
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
@@ -33,7 +33,7 @@ const setUlp = (value: any) => {
   <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="items" :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">
@@ -51,7 +51,10 @@ const setUlp = (value: any) => {
   <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>

src/components/Form/FiltersType/Type4.vue

@@ -37,6 +37,9 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type5.vue

@@ -27,6 +27,9 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type6.vue

@@ -2,7 +2,7 @@
   import InputNumber from '@/components/Form/InputNumber.vue'
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
-  import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
+  import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
 import { useTotalReport } from '@/stores/totalReport';
   fetchData();
   const changeMinReport = (value: any) => {
@@ -17,7 +17,7 @@ import { useTotalReport } from '@/stores/totalReport';
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select @update:selected="selectedUid($event)" :data="items"  placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select @update:selected="selectedUid($event)" :data="itemsUid"  placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -25,7 +25,7 @@ import { useTotalReport } from '@/stores/totalReport';
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select @update:selected="selectedUppp($event)" :data="itemsUp3"  placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3"  placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -37,7 +37,10 @@ import { useTotalReport } from '@/stores/totalReport';
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type7.vue

@@ -61,7 +61,10 @@ import { ref } from 'vue';
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type8.vue

@@ -21,6 +21,9 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type9.vue

@@ -28,7 +28,10 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/reference.ts

@@ -1,12 +1,11 @@
-import { getUid, getUp3, getPosko, getUlp } from '@/utils/network'
-import { ref } from 'vue'
 import { usePostsStore } from '@/stores/posts'
-import { useUp3Store } from '@/stores/up3'
 import { useRegionStore } from '@/stores/region'
 import { useUlpStore } from '@/stores/ulp'
-
+import { useUp3Store } from '@/stores/up3'
+import { getUid, getUp3, getPosko, getUlp } from '@/utils/network'
+import { ref } from 'vue'
 interface Item {
-  id: number
+  id: any
   name: any
 }
 const months = [
@@ -29,15 +28,30 @@ const years = ref<Item[]>([])
 for (let i = 0; i < 5; i++) {
   years.value.push({ id: year - i, name: year - i })
 }
-
-// Create a ref to store the items
 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' }
+  ]
+}
 // Fetch data from the API using Axios
 const fetchUid = async () => {
   try {
@@ -84,6 +98,31 @@ const fetchDataPosko = async (up3: number) => {
     console.error('Error fetching data:', error)
   }
 }
+const fetchRegional = () => {
+  itemsRegional.value = [
+    { id: '1', name: 'Wilayah Sumatera' },
+    { id: '2', name: 'Wilayah Jawa Bali' },
+    { id: '3', name: 'Wilayah Kalimantan' },
+    { id: '4', name: 'Wilayah Sulawesi' },
+    { id: '5', name: 'Wilayah Nusa Tenggara' },
+    { id: '6', name: 'Wilayah Maluku Papua' }
+  ]
+}
+const fetchStatus = (data: any) => {
+  const status = [
+    { id: '8', name: 'Selesai' },
+    { id: '7', name: 'Nyala' },
+    { id: '6', name: 'Pengalihan' },
+    { id: '5', name: 'Dialihkan' },
+    { id: '4', name: 'Dalam Pengerjaan' },
+    { id: '3', name: 'Dalam Perjalanan' },
+    { id: '2', name: 'Penugasan Regu' },
+    { id: '1', name: 'lapor' }
+  ]
+  const filteredStatus = status.find((item) => item.id == data)
+  const name = filteredStatus ? filteredStatus.name : null
+  return name
+}
 const selectedUid = (value: any) => {
   useRegionStore().setData(value.id)
   fetchDataUp3(value.id)
@@ -111,7 +150,10 @@ export {
   selectedUp3Ulp,
   selectedPosko,
   selectedUlp,
+  fetchRegional,
   fetchUid,
+  fetchMedia,
+  fetchStatus,
   itemsUid,
   itemsUp3,
   itemsPosko,

src/components/Pages/Gangguan/Table_1.vue

@@ -1,5 +1,13 @@
 <template>
-  <Filters @run-search="() => console.log(filters)" class="mb-4">
+  <Filters
+    @run-search="
+      () => {
+        console.log(filters)
+        filterData(filters)
+      }
+    "
+    class="mb-4"
+  >
     <Type1
       @update:filters="
         (value) => {
@@ -53,23 +61,6 @@
         :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"
@@ -82,7 +73,7 @@
         css-class="custom-table-column"
         :width="150"
         alignment="center"
-        data-field="tanggal_laporan"
+        data-field="waktu_lapor"
         caption="Tgl Lapor"
         cell-template="data"
       />
@@ -90,7 +81,7 @@
         css-class="custom-table-column"
         :width="150"
         alignment="center"
-        data-field="tanggal_dialihkan"
+        data-field="waktu_dialihkan"
         caption="Tgl Dialihkan"
         cell-template="data"
       />
@@ -98,7 +89,7 @@
         css-class="custom-table-column"
         :width="150"
         alignment="center"
-        data-field="tanggal_respon"
+        data-field="waktu_response"
         caption="Tgl Response"
         cell-template="data"
       />
@@ -106,7 +97,7 @@
         css-class="custom-table-column"
         :width="150"
         alignment="center"
-        data-field="tanggal_recovery"
+        data-field="waktu_recovery"
         caption="Tgl Recovery"
         cell-template="data"
       />
@@ -232,22 +223,22 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Laporan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.tanggal_laporan" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Dialihkan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.tanggal_dialihkan" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.waktu_dialihkan" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Respon:</h3>
-        <InputText :readonly="true" :value="dataDetail?.tanggal_respon" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.waktu_respon" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
-        <InputText :readonly="true" :value="dataDetail?.tanggal_recovery" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -319,10 +310,8 @@
 </template>
 
 <script setup lang="ts">
-// filters components
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -341,21 +330,15 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 
-import { useDialogStore } from '@/stores/dialog'
-import { useDateStore } from '@/stores/date'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useUp3Store } from '@/stores/up3'
-import { useRegionStore } from '@/stores/region'
+import { fetchStatus } from '@/components/Form/FiltersType/reference'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dialog = useDialogStore()
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
@@ -404,6 +387,9 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
       alamat_pelapor
       durasi_recovery_time
       durasi_response_time
+      waktu_dialihkan
+      waktu_recovery
+      waktu_response
       id_gangguan
       idpel_nometer
       keterangan_pelapor
@@ -429,50 +415,47 @@ const { onResult, onError, loading, refetch } = useQuery(
     idUp3: 0
   }
 )
-// const reportButton = useSearchStore()
 // const detected = computed(() => reportButton.isTriggerChange)
-// watch(detected, () => {
-//   const dateValue = useDateStore().getDateValue().split(' s/d ')
-//   const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
-//   const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-//   const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
-//   refetch({
-//     dateFrom: dateValue[0].split('-').reverse().join('-'),
-//     dateTo: dateValue[1].split('-').reverse().join('-'),
-//     posko: posko,
-//     idUid: uid,
-//     idUp3: up3
-//   })
-//   onResult((queryResult) => {
-//     if (queryResult.data != undefined) {
-//       queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-//         data.value = [
-//           ...data.value,
-//           {
-//             ...item,
-//             pembuat_laporan: '-'
-//           }
-//         ]
-//       })
-//     }
-//     console.log(queryResult.data)
-//     console.log(queryResult.loading)
-//     console.log(queryResult.networkStatus)
-//   })
-//   onError((error) => {
-//     console.log(error)
-//   })
-// })
+const filterData = (filters: any) => {
+  console.log(filters)
+  const dateValue = filters().periode.split(' s/d ')
+  const posko = filters().posko ? filters().posko : ''
+  const up3 = filters().up3 ? filters().up3 : 0
+  const uid = filters().uid ? filters().uid : 0
+  refetch({
+    dateFrom: dateValue[0].split('-').reverse().join('-'),
+    dateTo: dateValue[1].split('-').reverse().join('-'),
+    posko: posko,
+    idUid: uid,
+    idUp3: up3
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item,
+            status_akhir: fetchStatus(item.status_akhir)
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataDetail.value = data
   console.log(data)
 }
-
 const showData = () => {
   showDetail.value = true
 }
-
-// filters handler
 const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_10.vue

@@ -1,10 +1,10 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @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" />
@@ -15,63 +15,61 @@
             <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="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="sub_kelompok" caption="Sub Kelompok (Equipment)"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="120" alignment="center" data-field="selesai" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="120" alignment="center" data-field="in_process" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="120" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
+                        caption="Total" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="avg_waktu_response_time" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="di_atas_sla_durasi_response" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="dibawah_sla_durasi_response" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
+                        caption="Total" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="avg_waktu_recovery_time" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="diatas_sla_durasi_recovery" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="dibawah_sla_durasi_recovery" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
         </DxDataGrid>
@@ -82,56 +80,69 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import gql from 'graphql-tag';
+import gql from 'graphql-tag'
 import { useDateStore } from '@/stores/date'
 import { useSearchStore } from '@/stores/filtersAction'
 import { usePostsStore } from '@/stores/posts'
 import { useRegionStore } from '@/stores/region'
 import { useUp3Store } from '@/stores/up3'
 import { useQuery } from '@vue/apollo-composable'
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
 const GET_REKAP_JENIS_GANGGUAN_SE004 = gql`
-query daftarGangguanRecoveryTime(
+  query rekapitulasiJenisGangguanSE004(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
-) {
-    daftarKeluhanRecoveryTime(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    rekapitulasiJenisGangguanSE004(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        alamat_pelapor
-        durasi_recovery_time
-        durasi_response_time
-        id_gangguan
-        idpel_nometer
-        keterangan_pelapor
-        media
-        nama_pelapor
-        no_laporan
-        no_telp_pelapor
-        posko
-        status_akhir
-        waktu_recovery
-        waktu_response
-        }
-}`;
-const loadingVisible = ref<boolean>(true)
+      sub_kelompok
+      total
+      selesai
+      persen_selesai
+      in_process
+      persen_in_process
+      total_durasi_response
+      avg_waktu_response_time
+      max_durasi_response
+      min_durasi_response
+      diatas_sla_durasi_response
+      dibawah_sla_durasi_response
+      total_durasi_recovery
+      avg_waktu_recovery_time
+      max_durasi_recovery
+      min_durasi_recovery
+      diatas_sla_durasi_recovery
+      dibawah_sla_durasi_recovery
+    }
+  }
+`
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -139,7 +150,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -150,7 +161,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -163,15 +174,15 @@ 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: '',
     idUid: 0,
-    idUp3: 0,
+    idUp3: 0
 })
 const reportButton = useSearchStore()
 const detected = computed(() => reportButton.isTriggerChange)
 watch(detected, () => {
-    const dateValue = useDateStore().getDateValue().split(' s/d ');
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const dateValue = useDateStore().getDateValue().split(' s/d ')
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
     const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
     const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
     refetch({
@@ -179,22 +190,17 @@ watch(detected, () => {
         dateTo: dateValue[1].split('-').reverse().join('-'),
         posko,
         idUid: uid,
-        idUp3: up3,
+        idUp3: up3
     })
-    onResult(queryResult => {
+    onResult((queryResult) => {
         if (queryResult.data != undefined) {
-            queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
-                data.value = [...data.value, {
-                    ...item,
-                    kode: 'Kode'
-                }];
 
-            })
+            data.value = queryResult.data.rekapitulasiJenisGangguanSE004;
+            console.log(queryResult.loading)
+            console.log(queryResult.networkStatus)
         }
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
     })
-    onError(queryError => {
+    onError((queryError) => {
         console.log(queryError)
     })
 })
@@ -212,4 +218,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
+</script>

src/components/Pages/Gangguan/Table_14.vue

@@ -12,17 +12,14 @@
             <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="media" caption="Nama Media"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
                 <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
                     :caption="i" css-class="custom-table-column" />
             </DxColumn>
-
         </DxDataGrid>
     </div>
 </template>
@@ -31,18 +28,27 @@
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag';
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+import gql from 'graphql-tag'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -50,7 +56,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -61,7 +67,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -77,71 +83,71 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-
 const data = ref<any[]>([])
 const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
-query rekapitulasiGangguanBerdasarkanMedia(
+  query rekapitulasiGangguanBerdasarkanMedia(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
-) {
+  ) {
     rekapitulasiGangguanBerdasarkanMedia(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-                media
-            tgl1
-            tgl10
-            tgl11
-            tgl12
-            tgl13
-            tgl14
-            tgl15
-            tgl16
-            tgl17
-            tgl18
-            tgl19
-            tgl2
-            tgl20
-            tgl21
-            tgl22
-            tgl23
-            tgl24
-            tgl25
-            tgl26
-            tgl27
-            tgl28
-            tgl29
-            tgl3
-            tgl30
-            tgl31
-            tgl4
-            tgl5
-            tgl6
-            tgl7
-            tgl8
-            tgl9
-        }
-}`;
+      media
+      tgl1
+      tgl10
+      tgl11
+      tgl12
+      tgl13
+      tgl14
+      tgl15
+      tgl16
+      tgl17
+      tgl18
+      tgl19
+      tgl2
+      tgl20
+      tgl21
+      tgl22
+      tgl23
+      tgl24
+      tgl25
+      tgl26
+      tgl27
+      tgl28
+      tgl29
+      tgl3
+      tgl30
+      tgl31
+      tgl4
+      tgl5
+      tgl6
+      tgl7
+      tgl8
+      tgl9
+    }
+  }
+`
 const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
     const { onResult, onError } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
+        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,
+        idUp3: 0
     })
 
-    onResult(queryResult => {
+    onResult((queryResult) => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia;
+            data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
             loadingVisible.value = false
         }
         console.log(queryResult.data)
@@ -156,4 +162,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
+</script>

src/components/Pages/Gangguan/Table_2.vue

@@ -23,11 +23,11 @@
                 caption="No" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
                 caption="No Laporan" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
                 caption="Tgl Lapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
                 caption="Tgl Response" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
                 caption="Tgl Recovery" cell-template="data" />
             <DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
                 cell-template="data" />
@@ -73,21 +73,21 @@
                 <h3 class="text-sm font-medium w-[170px] text-gray-800">
                     Tanggal Lapor:
                 </h3>
-                <InputText :readonly="true" :value="dataDetail?.tgl_lapor" class-name="flex-1" />
+                <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
             </div>
 
             <div class="flex flex-row items-center justify-between w-full">
                 <h3 class="text-sm font-medium w-[170px] text-gray-800">
                     Tanggal Response:
                 </h3>
-                <InputText :readonly="true" :value="dataDetail?.tgl_response" class-name="flex-1" />
+                <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
             </div>
 
             <div class="flex flex-row items-center justify-between w-full">
                 <h3 class="text-sm font-medium w-[170px] text-gray-800">
                     Tanggal Recovery:
                 </h3>
-                <InputText :readonly="true" :value="dataDetail?.tgl_recovery" class-name="flex-1" />
+                <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
             </div>
 
             <div class="flex flex-row items-center justify-between w-full">
@@ -272,7 +272,6 @@ watch(detected, () => {
 })
 onMounted(() => {
     const filters = useFiltersStore()
-   
     filters.setConfig({
         type: 'type-6',
     })

src/components/Pages/Gangguan/Table_3.vue

@@ -16,11 +16,11 @@
 
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
                 caption="No Laporan" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
                 caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
                 caption="Tgl Response" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
                 caption="Tgl Recovery" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
                 caption="Durasi Response Time" />

src/components/Pages/Gangguan/Table_4.vue

@@ -16,11 +16,11 @@
 
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
                 caption="No Laporan" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
                 caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
                 caption="Tgl Response" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
                 caption="Tgl Recovery" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
                 caption="Durasi Response Time" />

src/components/Pages/Gangguan/Table_5.vue

@@ -16,11 +16,11 @@
 
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
                 caption="No Laporan" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
                 caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
                 caption="Tgl Response" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
                 caption="Tgl Recovery" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
                 caption="Durasi Response Time" />

src/components/Pages/Gangguan/Table_6.vue

@@ -21,16 +21,16 @@
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
                 caption="Keterangan Pelapor" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor" caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
                 caption="Tgl Response" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
                 caption="Tgl Recovery" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
                 caption="Durasi Response Time" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
                 caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_media" caption="Tgl Media" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media" />
 
         </DxDataGrid>

src/components/Pages/Gangguan/Table_7.vue

@@ -16,11 +16,11 @@
 
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
                 caption="No Laporan" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
                 caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
                 caption="Tgl Response" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
                 caption="Tgl Recovery" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
                 caption="Durasi Response Time" />

src/components/Pages/Keluhan/Table_21.vue

@@ -20,7 +20,7 @@
             <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="tgl_laporan" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"

src/components/Pages/Keluhan/Table_22.vue

@@ -18,7 +18,7 @@
             <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="tgl_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"

src/components/Pages/Keluhan/Table_23.vue

@@ -17,32 +17,32 @@
             :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
              data-type="number"
                 caption="No" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
+            <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="" caption="Tgl Response"
+            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
+            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
+            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP" css-class="custom-table-column" />
         </DxDataGrid>
     </div>
 </template>

src/components/Pages/Keluhan/Table_24.vue

@@ -17,33 +17,33 @@
             :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
              data-type="number"
                 caption="No" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
+            <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="" caption="Tgl Response"
+            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Jml Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
+            <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="" caption="Durasi Recovery Time"
+            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP" css-class="custom-table-column" />
         </DxDataGrid>
     </div>
 </template>

src/components/Pages/Keluhan/Table_25.vue

@@ -1,9 +1,9 @@
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
@@ -13,41 +13,42 @@
             <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="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
+            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Jml Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
+            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
+            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+            <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor"
+            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Nama ULP"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
-
-
         </DxDataGrid>
     </div>
 </template>
@@ -56,7 +57,17 @@
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPager,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -72,7 +83,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -83,7 +94,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -101,55 +112,51 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
-query daftarKeluhanSelesaiTanpaIdPelanggan
-(
+  query daftarKeluhanSelesaiTanpaIdPelanggan(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
-) {
-    daftarKeluhanSelesaiTanpaIdPelanggan
-(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    daftarKeluhanSelesaiTanpaIdPelanggan(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        in_process 
-        indeks_rating 
-        jumlah_non_rating 
-        jumlah_rating 
-        nama_posko      
-        persen_in_process 
-        persen_non_rating 
-        persen_rating 
-        persen_selesai 
-        rating_1 
-        rating_2 
-        rating_3 
-        rating_4 
-        rating_5 
-        regu        
-        selesai 
-        total 
-        }
-}`;
+      alamat_pelapor
+      durasi_recovery_time
+      durasi_response_time
+      id_keluhan
+      idpel_nometer
+      keterangan_pelapor
+      media
+      nama_pelapor
+      no_laporan
+      no_telp_pelapor
+      posko
+      status_akhir
+      waktu_recovery
+      waktu_response
+    }
+  }
+`
 const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
     const { onResult, onError } = useQuery(GET_DATA, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
+        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,
+        idUp3: 0
     })
 
-    onResult(queryResult => {
+    onResult((queryResult) => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan;
+            data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
             loadingVisible.value = false
         }
         console.log(queryResult.data)
@@ -163,4 +170,4 @@ onMounted(() => {
         type: 'type-3'
     })
 })
-</script>
+</script>

src/components/Pages/Keluhan/Table_26.vue

@@ -17,31 +17,31 @@
             :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
              data-type="number"
                 caption="No" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Response Time"
+            <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Response Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Recovery Time"
+            <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor"
+            <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Media" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Media"
+            <DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
                 css-class="custom-table-column" />
         </DxDataGrid>
     </div>

src/components/Pages/Keluhan/Table_27.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]"  :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
@@ -17,29 +17,29 @@
             :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
              data-type="number"
                 caption="No" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Contact Center"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="UI Dist." css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="ULP" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
                 css-class="custom-table-column" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
                 css-class="custom-table-column" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="No Tlp Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Tlp Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="APKT Status" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Created By" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Penyelesaian"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Lapor Ulang" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Sumber Lapor"
+            <DxColumn :width="170" alignment="center" data-field="media" caption="Sumber Lapor"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Issue Type" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Sub Issue Type"
@@ -126,7 +126,7 @@ const GET_DATA = gql`
         alamat_pelapor
         durasi_recovery_time
         durasi_response_time
-        id_keluhan!
+        id_keluhan
         idpel_nometer
         keterangan_pelapor
         media
@@ -134,7 +134,7 @@ const GET_DATA = gql`
         no_laporan
         no_telp_pelapor
         posko
-        status_akhir!
+        status_akhir
         waktu_recovery
         waktu_response
         }

src/components/Pages/Keluhan/Table_28.vue

@@ -14,15 +14,15 @@
 
       <DxColumn :width="170" alignment="center" data-field="posko" caption="Nama Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Selesai"
+        <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Selesai"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+        <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="InProgress"
+        <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="InProgress"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+        <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
           css-class="custom-table-column" />
         <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
           css-class="custom-table-column" />
@@ -36,15 +36,15 @@
           css-class="custom-table-column" />
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> SLA"
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_recovery" data-type="number" caption="> SLA"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA"
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number" caption="≤ SLA"
           css-class="custom-table-column" />
       </DxColumn>
     </DxDataGrid>

src/components/Pages/Keluhan/Table_29.vue

@@ -1,9 +1,9 @@
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @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" />
@@ -12,61 +12,59 @@
             <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="170" alignment="center" data-field="" caption="Fungsi Bidang"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="fungsiBidang" caption="Fungsi Bidang"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="totalSelesai" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persenSelesai" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="totalInProcess" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persenInProcess" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    <DxColumn :width="150" alignment="center" data-field="avgDurasiResponse" data-type="number" caption="Rata-Rata"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                    <DxColumn :width="150" alignment="center" data-field="maxDurasiResponse" data-type="number" caption="Max"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="150" alignment="center" data-field="minDurasiResponse" data-type="number" caption="Min"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                    <DxColumn :width="150" alignment="center" data-field="totalDiatasSlaResponse" data-type="number" caption=">SLA"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="150" alignment="center" data-field="totalDibawahSlaResponse" data-type="number" caption="≤SLA"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    <DxColumn :width="150" alignment="center" data-field="avgDurasiPenyelesaian" data-type="number" caption="Rata-Rata"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                    <DxColumn :width="150" alignment="center" data-field="maxDurasiPenyelesaian" data-type="number" caption="Max"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="150" alignment="center" data-field="minDurasiPenyelesaian" data-type="number" caption="Min"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                    <DxColumn :width="150" alignment="center" data-field="totalDiatasSlaPenyelesaian" data-type="number" caption=">SLA"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="150" alignment="center" data-field="totalDibawahSlaPenyelesaian" data-type="number" caption="≤SLA"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -132,47 +130,41 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
-query rekapitulasiKeluhanPerFungsiBidang
-(
+  query rekapitulasiKeluhanPerFungsiBidang(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
-) {
-    rekapitulasiKeluhanPerFungsiBidang
-(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    rekapitulasiKeluhanPerFungsiBidang(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        avg_durasi_dispatch
-        avg_durasi_recovery
-        avg_durasi_response
-        id_uid
-        id_up3
-        max_durasi_dispatch
-        max_durasi_recovery
-        max_durasi_response
-        min_durasi_dispatch
-        min_durasi_recovery
-        min_durasi_response
-        persen_inproses
-        persen_selesai
-        posko
-        total
-        total_diatas_sla_dispatch
-        total_diatas_sla_recovery
-        total_diatas_sla_response
-        total_dibawah_sla_dispatch
-        total_dibawah_sla_recovery
-        total_dibawah_sla_response
-        total_inproses
-        total_selesai
-        }
-}`
+      avgDurasiPenyelesaian
+      avgDurasiResponse
+      fungsiBidang
+      maxDurasiPenyelesaian
+      maxDurasiResponse
+      minDurasiPenyelesaian
+      minDurasiResponse
+      persenInProcess
+      persenSelesai
+      total
+      totalDiatasSlaPenyelesaian
+      totalDiatasSlaResponse
+      totalDibawahSlaPenyelesaian
+      totalDibawahSlaResponse
+      totalDurasiPenyelesaian
+      totalDurasiResponse
+      totalInProcess
+      totalSelesai
+    }
+  }
+`
 const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()

src/components/Pages/Keluhan/Table_30.vue

@@ -19,54 +19,54 @@
             <DxColumn :width="170" alignment="center" data-field="tipe_permasalahan" caption="Jenis Keluhan"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                    <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                    <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                    <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                    <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number" caption="≤SLA"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>

src/components/Pages/Keluhan/Table_33.vue

@@ -1,197 +1,70 @@
 <template>
   <div>
-    <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        :width="50"
-        alignment="center"
-        :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-        caption="NO"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field=""
-        caption="Unit"
-        css-class="custom-table-column"
-      />
+      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO" css-class="custom-table-column" />
+      <DxColumn :width="170" alignment="center" data-field="posko" caption="Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-        />
+        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
+          css-class="custom-table-column" />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+            css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+            css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
+            css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
+            css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
+            css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
+            css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
     </DxDataGrid>

src/components/Pages/Keluhan/Table_34.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+    <DxDataGrid class="max-h-[calc(100vh-140px)]"  :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
       :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
       :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
       :word-wrap-enabled="true">
@@ -14,18 +14,10 @@
 
       <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO" css-class="custom-table-column" />
-      <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+      <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
-          css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
-          css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
-          css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
-          css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
-          css-class="custom-table-column" />
+        <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
+                    :caption="i" css-class="custom-table-column" />
       </DxColumn>
     </DxDataGrid>
   </div>

src/components/Pages/Keluhan/Table_35.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]"  :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
@@ -14,48 +14,48 @@
 
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="regu" caption="Kode Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="in_process" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="selesai" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_rating" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_rating" data-type="number" caption="%"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="1"
+                    <DxColumn :width="150" alignment="center" data-field="rating_1" data-type="number" caption="1"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="2"
+                    <DxColumn :width="150" alignment="center" data-field="rating_2" data-type="number" caption="2"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="3"
+                    <DxColumn :width="150" alignment="center" data-field="rating_3" data-type="number" caption="3"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="4"
+                    <DxColumn :width="150" alignment="center" data-field="rating_4" data-type="number" caption="4"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="5"
+                    <DxColumn :width="150" alignment="center" data-field="rating_5" data-type="number" caption="5"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Indeks"
+                    <DxColumn :width="150" alignment="center" data-field="indeks_rating" data-type="number" caption="Indeks"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                <DxColumn :width="150" alignment="center" data-field="jumlah_non_rating" data-type="number" caption="Jml"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                <DxColumn :width="150" alignment="center" data-field="persen_non_rating" data-type="number" caption="%"
                     css-class="custom-table-column" />
             </DxColumn>
 

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_36.vue

@@ -1,33 +1,35 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data"
+            :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
+            :hover-state-enabled="true" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible.sync="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-type="text" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        caption="Des 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        caption="Des 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        caption="Jan 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,15 +38,41 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { fetchData, fetchStatus } from '@/components/Form/FiltersType/reference'
+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'
+import gql from 'graphql-tag'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+
+const dataDetail = ref<any>()
+const showDetail = ref(false)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -53,7 +81,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -64,7 +92,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -74,7 +102,68 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
+const MONALISAJUMLAHKALIGANGGUAN = gql`
+  query DaftarMonalisaJumlahKaliGangguan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaJumlahKaliGangguan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGGUAN, {
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023
+})
 
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        regional: '',
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+        bulan: 10,
+        tahun: 2023,
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.monalisaJumlahKaliGangguan;
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+})
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
@@ -82,10 +171,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 onMounted(() => {
     const filters = useFiltersStore()
-
     filters.setConfig({
         type: 'type-2',
         reportButton: true
     })
 })
-</script>
+</script>

src/components/Pages/Monalisa/Table_37.vue

@@ -1,33 +1,37 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position"  
+            :show-indicator="showIndicator"
+            :show-pane="showPane" :shading="shading" 
+            v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah Dispatching Time Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        caption="Des 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        caption="Des 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        caption="Jan 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,16 +40,37 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -53,7 +78,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -64,7 +89,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -74,7 +99,74 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
-
+const monalisaDispatchingTimeGangguan = gql`
+  query DaftarmonalisaDispatchingTimeGangguan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaDispatchingTimeGangguan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTimeGangguan, {
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        regional: '',
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+        bulan: 10,
+        tahun: 2023
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaDispatchingTimeGangguan.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+})
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
@@ -88,4 +180,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
+</script>

src/components/Pages/Monalisa/Table_38.vue

@@ -1,33 +1,37 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position"  
+            :show-indicator="showIndicator"
+            :show-pane="showPane" :shading="shading" 
+            v-if="loading" v-model:visible="loading" :enabled="true"  />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RCT Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        caption="Des 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        caption="Des 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        caption="Jan 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -45,6 +49,79 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+
+const monalisaRecoveryTimeKeluhan = gql`
+  query DaftarmonalisaRecoveryTimeKeluhan($regional:regional, $posko: String, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
+    monalisaRecoveryTimeKeluhan(
+      regional:$regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        jumlah_bulan
+        jumlah_bulan_n_1
+        jumlah_tahun
+        jumlah_tahun_n_1
+        nama_posko
+        persen_bulan
+        persen_tahun
+    }
+  }
+`;
+const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
+    regional: "",
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023,
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        bulan: 10,
+        tahun: 2023,
+        regional: "",
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaRecoveryTimeKeluhan.forEach((item: any) => {
+                data.value = [...data.value, {
+                    ...item,
+                }];
+            });
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+})
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {

src/components/Pages/Monalisa/Table_39.vue

@@ -1,33 +1,37 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position"  
+            :show-indicator="showIndicator"
+            :show-pane="showPane" :shading="shading" 
+            v-if="loading" v-model:visible="loading" :enabled="true"  />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RPT Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        caption="Des 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        caption="Des 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        caption="Jan 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,15 +40,105 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import gql from 'graphql-tag'
+import { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+import { useQuery } from '@vue/apollo-composable'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const monalisaResponseTimeKeluhan = gql`
+  query DaftarmonalisaResponseTimeKeluhan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaResponseTimeKeluhan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaResponseTimeKeluhan, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        bulan: 10,
+        tahun: 2023,
+        regional: '',
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaResponseTimeKeluhan.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+})
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -53,7 +147,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -64,7 +158,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -88,4 +182,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
+</script>

src/components/Pages/Monalisa/Table_40.vue

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

src/components/Pages/Monalisa/Table_41.vue

@@ -1,37 +1,125 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="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" @exporting="onExporting" :allow-column-resizing="true"
+            column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="" caption="ID Gangguan" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="" caption="Jenis Gangguan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Jumlah" css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="%" css-class="custom-table-column" />
-
+            <DxColumn :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="id_gangguan" caption="ID Gangguan" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="tipe_permasalahan" caption="Jenis Gangguan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="persen_gangguan" caption="%" css-class="custom-table-column" />
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const monalisaGangguanPerJenisGangguan = gql`
+  query DaftarmonalisaGangguanPerJenisGangguan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaGangguanPerJenisGangguan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      id_gangguan
+      jumlah
+      persen_gangguan
+      tipe_permasalahan
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanPerJenisGangguan, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        bulan: 10,
+        tahun: 2023,
+        regional: '',
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaGangguanPerJenisGangguan.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+})
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -39,7 +127,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -50,7 +138,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -74,4 +162,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
+</script>

src/components/Pages/Monalisa/Table_42.vue

@@ -1,9 +1,9 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :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">
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -12,22 +12,23 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        caption="Des 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        caption="Des 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        caption="Jan 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,16 +37,105 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const monalisaRekapitulasiLaporUlangGangguan = gql`
+  query DaftarmonalisaRekapitulasiLaporUlangGangguan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaRekapitulasiLaporUlangGangguan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLaporUlangGangguan, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        bulan: 10,
+        tahun: 2023,
+        regional: '',
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaRekapitulasiLaporUlangGangguan.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+})
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -53,7 +143,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -64,7 +154,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -88,4 +178,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
+</script>

src/components/Pages/Monalisa/Table_43.vue

@@ -1,9 +1,9 @@
 <template>
-    <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :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">
+    <div id="data">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -12,22 +12,23 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        caption="Des 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        caption="Des 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        caption="Jan 2019" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -36,16 +37,105 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const monalisaRekapitulasiEnsGangguan = gql`
+  query DaftarmonalisaRekapitulasiEnsGangguan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaRekapitulasiEnsGangguan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEnsGangguan, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        bulan: 10,
+        tahun: 2023,
+        regional: '',
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaRekapitulasiEnsGangguan.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+})
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -53,7 +143,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -64,7 +154,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -88,4 +178,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
+</script>

src/components/Pages/Monalisa/Table_44.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
@@ -25,16 +25,105 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useRegionStore } from '@/stores/region'
+import { useUp3Store } from '@/stores/up3'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const monalisaGangguanBelumSelesai = gql`
+  query DaftarmonalisaGangguanBelumSelesai(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaGangguanBelumSelesai(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSelesai, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const reportButton = useSearchStore()
+const detected = computed(() => reportButton.isTriggerChange)
+watch(detected, () => {
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
+    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    refetch({
+        bulan: 10,
+        tahun: 2023,
+        regional: '',
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaGangguanBelumSelesai.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+})
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -42,7 +131,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -53,7 +142,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -77,4 +166,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
+</script>

src/components/Pages/Monalisa/Table_45.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -12,22 +12,22 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>

src/components/Pages/Monalisa/Table_46.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -12,22 +12,22 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RCT Kali Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>

src/components/Pages/Monalisa/Table_47.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -12,22 +12,22 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RPT Kali Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>

src/components/Pages/Monalisa/Table_48.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -12,7 +12,7 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
                     <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">

src/components/Pages/Monalisa/Table_49.vue

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

src/components/Pages/Monalisa/Table_50.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -12,22 +12,22 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>

src/components/Pages/Monalisa/Table_51.vue

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

src/components/Pages/Monalisa/Table_52.vue

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

src/components/Pages/Monalisa/Table_53.vue

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

src/components/Pages/Monalisa/Table_54.vue

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

src/components/Pages/Monalisa/Table_55.vue

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

src/components/Pages/Monalisa/Table_56.vue

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

src/components/Pages/Monalisa/Table_57.vue

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

src/components/Pages/Monalisa/Table_58.vue

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

src/components/Pages/Monalisa/Table_59.vue

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

src/components/Select.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 interface DataItem {
-  id: number
-  name: string
+  id: any
+  name: any
 }
 
 import { ref, computed, watch } from 'vue'

src/components/SelectMulti.vue

@@ -53,7 +53,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <Combobox @update:modelValue="value => emit('update:selected', value)" v-model="selected" v-slot="{ open }" multiple="">
+  <Combobox @update:modelValue="value => emit('update:selected', value)" v-model="selected" v-slot="{ open }" multiple>
     <div class="relative mt-1">
       
       <div
@@ -66,7 +66,7 @@ onMounted(() => {
           <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
         </ComboboxButton>
       </div>
-      <span class="block flex flex-wrap gap-2">
+      <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>