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

src/components/Form/FiltersType/Type1.vue

@@ -58,13 +58,17 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Induk Distribusi/Wilayah:</label
+    >
 
     <Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
 
     <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp" :placeholder="uppPlaceholder" />
   </div>

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

@@ -35,6 +35,9 @@ fetchMedia();
   <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, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
+import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
 fetchData();
 
 const departments = [
@@ -20,7 +20,7 @@ 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">

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, selectedUp3Posko, 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">
@@ -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/Pages/Gangguan/Table_1.vue

@@ -53,276 +53,184 @@
         :allow-export-selected-data="false"
       />
 
-      <DxColumn
-        css-class="custom-table-column"
-        :width="50"
-        alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-        data-type="number"
-        caption="No"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="no_laporan"
-        caption="No Laporan"
-        cell-template="data"
-      />
-
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="pembuat_laporan"
-        caption="Pembuat Laporan"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="tanggal_laporan"
-        caption="Tgl Lapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="tanggal_dialihkan"
-        caption="Tgl Dialihkan"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="tanggal_respon"
-        caption="Tgl Response"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="tanggal_recovery"
-        caption="Tgl Recovery"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="durasi_respon_time"
-        caption="Durasi Response Time"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="durasi_recovery_time"
-        caption="Durasi Recovery Time"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="posko_asal"
-        caption="Posko Awal"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="posko_tujuan"
-        caption="Posko Tujuan"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="status_akhir"
-        caption="Status"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="idpel_nometer"
-        caption="IDPEL/NO METER"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="nama_pelapor"
-        caption="Nama Pelapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="alamat_pelapor"
-        caption="Alamat Pelapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="no_telp_pelapor"
-        caption="No Telp Pelapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="media"
-        caption="Sumber Lapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="posko"
-        caption="Posko"
-        cell-template="data"
-      />
-      <template #data="{ data }">
-        <span class="cursor-pointer" @click="showData()">
-          {{ data.text }}
-        </span>
-      </template>
-    </DxDataGrid>
-  </div>
-
-  <DetailDialog
-    :open="showDetail"
-    title="Daftar Gangguan Dialihkan ke Posko Lain"
-    @on-close="closeDetail"
-  >
-    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Laporan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.tanggal_laporan" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Dialihkan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.tanggal_dialihkan" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Respon:</h3>
-        <InputText :readonly="true" :value="dataDetail?.tanggal_respon" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
-        <InputText :readonly="true" :value="dataDetail?.tanggal_recovery" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Response Time:</h3>
-        <InputText :readonly="true" :value="dataDetail?.durasi_respon" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Recovery Time:</h3>
-        <InputText :readonly="true" :value="dataDetail?.durasi_recovery" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Awal:</h3>
-        <InputText :readonly="true" :value="dataDetail?.posko_awal" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Tujuan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.posko_tujuan" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
-        <InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
-        <InputText :readonly="true" :value="dataDetail?.id_pelanggan" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
-        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataDetail?.alamat_pelapor"
-          class-name="flex-1 h-[56px]"
-        />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Laporan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.sumber_laporan" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko:</h3>
-        <InputText :readonly="true" :value="dataDetail?.posko" class-name="flex-1" />
-      </div>
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
+                caption="Pembuat Laporan" cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
+                caption="Tgl Lapor" cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_dialihkan"
+                caption="Tgl Dialihkan" cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
+                caption="Tgl Response" cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
+                caption="Tgl Recovery" cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon_time"
+                caption="Durasi Response Time" cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
+                caption="Durasi Recovery Time" cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_asal"
+                caption="Posko Awal" cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan"
+                caption="Posko Tujuan" cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
+                caption="Status" cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
+                caption="IDPEL/NO METER" cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
+                caption="Nama Pelapor" cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
+                caption="Alamat Pelapor" cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
+                caption="No Telp Pelapor" cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
+                caption="Keterangan Pelapor" cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
+                caption="Sumber Lapor" cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko"
+                cell-template="data" />
+            <template #data="{ data }">
+                <span class="cursor-pointer" @click="showData()">
+                    {{ data.text }}
+                </span>
+            </template>
+        </DxDataGrid>
     </div>
-  </DetailDialog>
+
+    <DetailDialog :open="showDetail" title="Daftar Gangguan Dialihkan ke Posko Lain" @on-close="closeDetail">
+        <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    No Laporan:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Pembuat Laporan:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Tanggal Laporan:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Tanggal Dialihkan:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.waktu_dialihkan" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Tanggal Respon:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.waktu_respon" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Tanggal Recovery:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Durasi Response Time:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.durasi_respon" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Durasi Recovery Time:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.durasi_recovery" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Posko Awal:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.posko_awal" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Posko Tujuan:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.posko_tujuan" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Status:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    IDPEL/NO METER:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.id_pelanggan" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Nama Pelapor:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Alamat Pelapor:
+                </h3>
+                <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
+                    class-name="flex-1 h-[56px]" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Pembuat Laporan:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Keterangan Pelapor:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Sumber Laporan:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.sumber_laporan" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Posko:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.posko" class-name="flex-1" />
+            </div>
+        </div>
+
+    </DetailDialog>
 </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,
@@ -471,7 +379,6 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   dataDetail.value = data
   console.log(data)
 }
-
 const showData = () => {
   showDetail.value = true
 }

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

@@ -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,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" />
@@ -14,56 +14,56 @@
 
       <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="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"
+        <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_sla_recovery" data-type="number" caption="≤SLA"
             css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>

src/components/Pages/Keluhan/Table_34.vue

@@ -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

@@ -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/Monalisa/Table_36.vue

@@ -2,16 +2,13 @@
     <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"
+            :hover-state-enabled="true" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel  :position="position"  
-            :show-indicator="showIndicator"
-            :show-pane="showPane" :shading="shading" 
-            v-if="loading" v-model:visible="loading" :enabled="true"  />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible.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" />
@@ -60,7 +57,7 @@ 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 { fetchStatus } from '@/components/Form/FiltersType/reference'
+import { fetchData, fetchStatus } from '@/components/Form/FiltersType/reference'
 import { useDateStore } from '@/stores/date'
 import { useSearchStore } from '@/stores/filtersAction'
 import { usePostsStore } from '@/stores/posts'
@@ -73,6 +70,7 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
+
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 
@@ -139,6 +137,7 @@ const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGG
     bulan: 10,
     tahun: 2023
 })
+
 const reportButton = useSearchStore()
 const detected = computed(() => reportButton.isTriggerChange)
 watch(detected, () => {
@@ -155,7 +154,7 @@ watch(detected, () => {
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
-           data.value = queryResult.data.monalisaJumlahKaliGangguan
+            data.value = queryResult.data.monalisaJumlahKaliGangguan;
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)

src/components/Select.vue

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