fix: daftar keluhan

src/assets/css/style.css

@@ -1408,10 +1408,6 @@ body {
   display: inline-flex;
 }
 
-.table {
-  display: table;
-}
-
 .grid {
   display: grid;
 }
@@ -4288,11 +4284,6 @@ body {
   border-color: rgb(104 157 170 / var(--tw-border-opacity));
 }
 
-.focus\:border-indigo-500:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(99 102 241 / var(--tw-border-opacity));
-}
-
 .focus\:bg-gray-300\/10:focus {
   background-color: rgb(209 213 219 / 0.1);
 }
@@ -5503,6 +5494,10 @@ body {
     width: 100%;
   }
 
+  .sm\:max-w-\[90\%\] {
+    max-width: 90%;
+  }
+
   .sm\:max-w-lg {
     max-width: 32rem;
   }
@@ -5519,10 +5514,6 @@ body {
     max-width: 20rem;
   }
 
-  .sm\:max-w-\[90\%\] {
-    max-width: 90%;
-  }
-
   .sm\:flex-1 {
     flex: 1 1 0%;
   }

src/components/Form/FiltersType/Type10.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
- 
+import { onMounted, ref } from 'vue'
-import { onMounted, ref, watch } from 'vue'
 import {
   selectedUid,
   selectedUp3Ulp,
@@ -10,17 +9,16 @@ import {
   itemsUp3,
   itemsUlp
 } from './reference'
-
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import InputNumber from '@/components/Form/InputNumber.vue'
 
-const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
-const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
-const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
-const up3 = ref({ id: 0, name: up3Placeholder });
+const up3 = ref({ id: 0, name: up3Placeholder })
-const uid = ref({ id: 0, name: uidPlaceholder });
+const uid = ref({ id: 0, name: uidPlaceholder })
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+const ulp = ref({ id: 0, name: ulpPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -30,29 +28,26 @@ const data = ref({
   minJmlLapor: 1,
   maxJmlLapor: 1
 })
+
 const setUid = (value: any) => {
-  uid.value = value;
+  uid.value = value
-  selectedUid(value);
+  selectedUid(value)
-  up3.value = { id: 0, name: up3Placeholder };
+  up3.value = { id: 0, name: up3Placeholder }
-  data.value.uid = value;
+  data.value.uid = value
-};
+}
 
 const setUp3 = (value: any) => {
-  up3.value = value;
+  up3.value = value
-  selectedUp3Ulp(value);
+  selectedUp3Ulp(value)
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: 0, name: ulpPlaceholder }
-  data.value.up3 = value;
+  data.value.up3 = value
-};
+}
 
 const setUlp = (value: any) => {
-  ulp.value = value;
+  ulp.value = value
-  selectedUlp(value);
+  selectedUlp(value)
-  data.value.ulp = value;
+  data.value.ulp = value
-};
+}
-onMounted(() => {
-  emit('update:filters', data.value)
-  fetchUid()
-})
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -61,13 +56,11 @@ 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
+    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
-      @update:selected="setUid($event)"
-      :data="itemsUid"
-      :placeholder="uidPlaceholder"
-    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -84,9 +77,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
-      >Unit Layanan Pelanggan:</label
-    >
 
     <Select
       @update:selected="setUlp($event)"
@@ -99,23 +90,16 @@ onMounted(() => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-     <DatePicker @update:date-value="(value) => {
+    <DatePicker @update:date-value="(value) => (data.periode = value)" />
-        data.periode = value
-      }
-      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
 
     <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-      <InputNumber @update:time-value="(value) => {
+      <InputNumber @update:time-value="(value) => (data.minJmlLapor = value)" />
-        data.minJmlLapor = value
-      }" />
       <small class="flex items-center">s/d</small>
-      <InputNumber  @update:time-value="(value) => {
+      <InputNumber @update:time-value="(value) => (data.maxJmlLapor = value)" />
-        data.maxJmlLapor = value
-      }" />
     </div>
   </div>
 </template>

src/components/Form/FiltersType/Type11.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-
+import { onMounted, ref } from 'vue'
-import { onMounted, ref, watch } from 'vue'
+import { useTotalDuration } from '@/stores/totalDuration'
-import { useTotalDuration } from '@/stores/totalDuration';
-
 import {
   selectedUid,
   selectedUp3Ulp,
@@ -12,16 +10,16 @@ import {
   itemsUp3,
   itemsUlp
 } from './reference'
-
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import InputWithSuffix from '@/components/Form/InputWithSuffix.vue'
-const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+
-const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
-const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
-const up3 = ref({ id: 0, name: up3Placeholder });
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
-const uid = ref({ id: 0, name: uidPlaceholder });
+const up3 = ref({ id: 0, name: up3Placeholder })
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+const uid = ref({ id: 0, name: uidPlaceholder })
+const ulp = ref({ id: 0, name: ulpPlaceholder })
 const emit = defineEmits(['update:filters'])
 
 const sla = [
@@ -33,7 +31,8 @@ const sla = [
     id: 2,
     name: 'Melebihi SLA (> 45 menit)'
   }
-];
+]
+
 const data = ref({
   uid: uid.value,
   up3: up3.value,
@@ -42,54 +41,58 @@ const data = ref({
   minTime: 1,
   maxTime: 1
 })
+
 const setUid = (value: any) => {
-  uid.value = value;
+  uid.value = value
-  selectedUid(value);
+  selectedUid(value)
-  up3.value = { id: 0, name: up3Placeholder };
+  up3.value = { id: 0, name: up3Placeholder }
-  data.value.uid = value;
+  data.value.uid = value
-};
+}
 
 const setUp3 = (value: any) => {
-  up3.value = value;
+  up3.value = value
-  selectedUp3Ulp(value);
+  selectedUp3Ulp(value)
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: 0, name: ulpPlaceholder }
-  data.value.up3 = value;
+  data.value.up3 = value
-};
+}
 
 const setUlp = (value: any) => {
-  ulp.value = value;
+  ulp.value = value
-  selectedUlp(value);
+  selectedUlp(value)
-  data.value.ulp = value;
+  data.value.ulp = value
-};
+}
+
 const setMin = (value: any) => {
   console.log(value)
   data.value.minTime = value
   useTotalDuration().setDataMin(value)
-
 }
+
 const setMax = (value: any) => {
   data.value.maxTime = value
   useTotalDuration().setDataMax(value)
 }
+
 const triggerInput = ref(false)
 const changeDuration = (value: any) => {
   if (value.id === 0) {
-    setMin("1")
+    setMin('1')
-    setMax("5")
+    setMax('5')
     console.log('Durasi Menit')
     triggerInput.value = false
   } else if (value.id === 1) {
-    setMin("1")
+    setMin('1')
-    setMax("45")
+    setMax('45')
     console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
     triggerInput.value = true
   } else {
-    setMin("45")
+    setMin('45')
     setMax(99999 * 60 * 24)
     triggerInput.value = true
     console.log('Melebihi SLA (> 45 menit)')
   }
 }
+
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -98,30 +101,41 @@ 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 @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
 
-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
+      :selected="up3"
+      :placeholder="up3Placeholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
 
-    <Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
+    <Select
+      @update:selected="setUlp($event)"
+      :data="itemsUlp"
+      :placeholder="ulpPlaceholder"
+      :selected="ulp"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker @update:date-value="(value) => {
+    <DatePicker @update:date-value="(value) => (data.periode = value)" />
-      data.periode = value
-    }
-      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -136,5 +150,4 @@ onMounted(() => {
       </div>
     </div>
   </div>
-
 </template>

src/components/Form/FiltersType/Type3.vue

@@ -11,6 +11,7 @@ import {
   itemsUlp
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
+
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
@@ -25,6 +26,7 @@ const data = ref({
   ulp: ulp.value,
   periode: ''
 })
+
 watch(data.value, (value) => {
   emit('update:filters', value)
 })
@@ -41,6 +43,7 @@ const setUp3 = (value: any) => {
   selectedUp3Ulp(value)
   ulp.value = { id: 0, name: ulpPlaceholder }
   data.value.up3 = value
+  console.log(itemsUlp)
 }
 
 const setUlp = (value: any) => {
@@ -48,6 +51,7 @@ const setUlp = (value: any) => {
   selectedUlp(value)
   data.value.ulp = value
 }
+
 onMounted(() => {
   fetchUid()
   emit('update:filters', data.value)
@@ -90,12 +94,6 @@ onMounted(() => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker
+    <DatePicker @update:date-value="(value) => (data.periode = value)" />
-      @update:date-value="
-        (value) => {
-          data.periode = value
-        }
-      "
-    />
   </div>
 </template>

src/components/Form/FiltersType/reference.ts

@@ -105,7 +105,7 @@ const fetchDataUlp = async (up3: number) => {
       const res = await getUlp(up3)
       itemsUlp.value = res.data.map((item: any) => ({
         id: item.id,
-        name: item.name
+        name: item.nama
       }))
     } catch (error) {
       console.error('Error fetching data:', error)

src/components/InputText.vue

@@ -42,7 +42,7 @@ const switchInputType = () => {
 </script>
 
 <template>
-  <div :class="['relative w-full overflow-hidden rounded-lg bg-gray-50 ', className]">
+  <div :class="['relative w-full overflow-hidden rounded-lg ', className]">
     <input
       autocomplete="off"
       :type="inputType"

src/components/Pages/Gangguan/Table_9.vue

@@ -388,25 +388,20 @@ const GET_REKAP_JENIS_GANGGUAN = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-      avg_durasi_dispatch
       avg_durasi_recovery
       avg_durasi_response
-      max_durasi_dispatch
       max_durasi_recovery
       max_durasi_response
-      min_durasi_dispatch
       min_durasi_recovery
       min_durasi_response
       persen_inproses
       persen_selesai
       tipe_permasalahan
       total
-      total_diatas_sla_dispatch
       total_diatas_sla_recovery
       total_diatas_sla_response
       total_dibawah_sla_recovery
       total_dibawah_sla_response
-      total_dibawah_sla_dispatch
       total_inproses
       total_selesai
     }

src/components/Pages/Keluhan/Table_21.vue

@@ -1,54 +1,164 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => filters = value" />
+    <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="data"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+      <DxPager
-                :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <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"
+      <DxColumn
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+        :width="50"
-                css-class="custom-table-column" />
+        alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                css-class="custom-table-column" />
+        data-type="number"
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+        caption="No"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="no_laporan"
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+        caption="No Laporan"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+      />
-                css-class="custom-table-column" />
+      <DxColumn
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+        :width="170"
-                css-class="custom-table-column" />
+        alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="nama_unit_lama" caption="Unit Asal"
+        data-field="pembuat_laporan"
-                css-class="custom-table-column" />
+        caption="Pembuat Laporan"
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+        css-class="custom-table-column"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="waktu_lapor"
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+        caption="Tgl Lapor"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+      />
-                css-class="custom-table-column" />
+      <DxColumn
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        :width="170"
-                css-class="custom-table-column" />
+        alignment="center"
+        data-field="waktu_dialihkan"
+        caption="Tgl Dialihkan"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_unit_lama"
+        caption="Unit Asal"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+      />
     </DxDataGrid>
   </div>
 </template>
@@ -65,7 +175,6 @@ import {
   DxLoadPanel,
   DxPager,
   DxPaging,
-    DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
@@ -76,10 +185,12 @@ 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 position = { of: '#data' }
-const shading = ref(true);
+const showIndicator = ref(true)
-const showPane = ref(true);
+const shading = ref(true)
+const showPane = ref(true)
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -152,25 +263,33 @@ const GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN = gql`
     }
   }
 `
-const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN, {
+const { onResult, onError, loading, refetch } = useQuery(
+  GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN,
+  {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     idUlp: 0,
     idUid: 0,
     idUp3: 0
-})
+  }
-
+)
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
+
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
+
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarKeluhanDialihkanKeUnitLain
@@ -179,9 +298,11 @@ const filterData = (params: any) => {
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
+
   onError((error) => {
     console.log(error)
   })
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Keluhan/Table_22.vue

@@ -1,58 +1,179 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type10 @update:filters="(value) => filters = value" />
+    <Type10 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="data"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+      <DxPager
-                :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <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"
+      <DxColumn
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+        :width="50"
-                css-class="custom-table-column" cell-template="data" />
+        alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                css-class="custom-table-column" cell-template="data" />
+        data-type="number"
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+        caption="No"
-                css-class="custom-table-column" cell-template="data" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
+      <DxColumn
-                css-class="custom-table-column" cell-template="data" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+        alignment="center"
-                css-class="custom-table-column" cell-template="data" />
+        data-field="no_laporan"
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+        caption="No Laporan"
-                css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column"
-            <DxColumn :width="120" alignment="center" data-field="jml_lapor" caption="Jml Lapor"
+        cell-template="data"
-                css-class="custom-table-column" cell-template="data" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+      <DxColumn
-                css-class="custom-table-column" cell-template="data" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+        alignment="center"
-                css-class="custom-table-column" cell-template="data" />
+        data-field="waktu_lapor"
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+        caption="Tgl Lapor"
-                css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+        cell-template="data"
-                css-class="custom-table-column" cell-template="data" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+      <DxColumn
-                css-class="custom-table-column" cell-template="data" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+        alignment="center"
-                css-class="custom-table-column" cell-template="data" />
+        data-field="waktu_response"
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+        caption="Tgl Response"
-                css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        cell-template="data"
-                css-class="custom-table-column" cell-template="data" />
+      />
-            <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
+      <DxColumn
-                css-class="custom-table-column" cell-template="data" />
+        :width="170"
-            <DxColumn :width="150" alignment="center" data-field="idUlp" caption="Nama ULP" css-class="custom-table-column"
+        alignment="center"
-                cell-template="data" />
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="jumlah_lapor"
+        caption="Jml Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
 
       <template #data="{ data }">
         <span class="cursor-pointer" @click="showData()">
@@ -65,110 +186,88 @@
   <DetailDialog :open="showDetail" title="Detail Keluhan" @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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
-                    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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
-                    Tgl Lapor:
-                </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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
-                    Tanggal Response:
-                </h3>
         <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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
-                    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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Jml Lapor:</h3>
-                    Jml Lapor:
+        <InputText :readonly="true" :value="dataDetail?.jumlah_lapor" class-name="flex-1" />
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.jml_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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
-                    Response Time:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.durasi_response_time" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
-                    Recovery Time:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
-                    Status:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.status_akhir" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
-                    IDPEL/NO METER:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.idpel_nometer" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
-                    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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-                    Alamat Pelapor:
+        <InputText
-                </h3>
+          :readonly="true"
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
+          type="textarea"
-                    class-name="flex-1 h-[56px]" />
+          :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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
-                    No Telp Pelapor:
-                </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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-                    Keterangan Pelapor:
+        <InputText
-                </h3>
+          :readonly="true"
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
+          type="textarea"
-                    class-name="flex-1 h-[56px]" />
+          :value="dataDetail?.keterangan_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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
-                    Sumber Lapor:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.media" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
-                    Nama ULP:
+        <InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.idUlp" class-name="flex-1" />
       </div>
     </div>
   </DetailDialog>
@@ -179,8 +278,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type10 from '@/components/Form/FiltersType/Type10.vue'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -199,6 +297,7 @@ 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)
@@ -269,22 +368,20 @@ const GET_DATA = gql`
       idUp3: $idUp3
     ) {
       alamat_pelapor
-durasi_recovery_time
+      durasi_recovery_time
-durasi_response_time
+      durasi_response_time
-idpel_nometer
+      idpel_nometer
-jumlah_lapor
+      jumlah_lapor
-keterangan_pelapor
+      keterangan_pelapor
-media
+      media
-nama_pelapor
+      nama_pelapor
-nama_unit
+      nama_ulp
-no_laporan
+      no_laporan
-no_telp_pelapor
+      no_telp_pelapor
-status_akhir
+      status_akhir
-waktu_lapor
+      waktu_lapor
-
+      waktu_recovery
-waktu_recovery
+      waktu_response
-
-waktu_response
     }
   }
 `
@@ -299,17 +396,20 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   idUp3: 0
 })
 
-
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
-    const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1;
+  const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1
-    const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100;
+  const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100
   refetch({
     minJmlLapor: minJmlLapor,
     maxJmlLapor: maxJmlLapor,
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
@@ -317,6 +417,7 @@ const filterData = (params: any) => {
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
+      console.log(data.value[0])
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -327,5 +428,5 @@ const filterData = (params: any) => {
   })
 }
 
-const filters = ref();
+const filters = ref()
 </script>

src/components/Pages/Keluhan/Table_23.vue

@@ -1,51 +1,164 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type11 @update:filters="(value) => filters = value" />
+    <Type11 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="data"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+      <DxPager
-                :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <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"
+      <DxColumn
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+        :width="50"
-                css-class="custom-table-column" cell-template="data" />
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
 
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+      <DxColumn
-                css-class="custom-table-column" cell-template="data" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+        alignment="center"
-                css-class="custom-table-column" cell-template="data" />
+        data-field="waktu_lapor"
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+        caption="Tgl Lapor"
-                css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+        cell-template="data"
-                css-class="custom-table-column" cell-template="data" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+      <DxColumn
-                css-class="custom-table-column" cell-template="data" />
+        :width="170"
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+        alignment="center"
-                css-class="custom-table-column" cell-template="data" />
+        data-field="waktu_response"
-            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+        caption="Tgl Response"
-                css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+        cell-template="data"
-                css-class="custom-table-column" cell-template="data" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+      <DxColumn
-                css-class="custom-table-column" cell-template="data" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+        alignment="center"
-                css-class="custom-table-column" cell-template="data" />
+        data-field="waktu_recovery"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        caption="Tgl Recovery"
-                css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column"
-            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama ULP"
+        cell-template="data"
-                css-class="custom-table-column" cell-template="data" />
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
       <template #data="{ data }">
         <span class="cursor-pointer" @click="showData()">
           {{ data.text }}
@@ -56,110 +169,83 @@
   <DetailDialog :open="showDetail" title="Detail Keluhan" @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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
-                    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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
-                    Tgl Lapor:
-                </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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
-                    Tanggal Response:
-                </h3>
         <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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
-                    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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
-                    Jml Lapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.jml_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">
-                    Response Time:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.durasi_response_time" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
-                    Recovery Time:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
-                    Status:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.status_akhir" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
-                    IDPEL/NO METER:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.idpel_nometer" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
-                    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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-                    Alamat Pelapor:
+        <InputText
-                </h3>
+          :readonly="true"
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
+          type="textarea"
-                    class-name="flex-1 h-[56px]" />
+          :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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
-                    No Telp Pelapor:
-                </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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-                    Keterangan Pelapor:
+        <InputText
-                </h3>
+          :readonly="true"
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
+          type="textarea"
-                    class-name="flex-1 h-[56px]" />
+          :value="dataDetail?.keterangan_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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
-                    Sumber Lapor:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.media" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
-                    Nama ULP:
+        <InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.idUlp" class-name="flex-1" />
       </div>
     </div>
   </DetailDialog>
@@ -171,7 +257,6 @@ import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type11 from '@/components/Form/FiltersType/Type11.vue'
 import { ref } from 'vue'
-
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -180,7 +265,6 @@ import {
   DxLoadPanel,
   DxPager,
   DxPaging,
-    DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
@@ -191,10 +275,11 @@ 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 position = { of: '#data' }
-const shading = ref(true);
+const showIndicator = ref(true)
-const showPane = ref(true);
+const shading = ref(true)
+const showPane = ref(true)
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 
@@ -267,7 +352,7 @@ const GET_DATA = gql`
       keterangan_pelapor
       media
       nama_pelapor
-        nama_unit
+      nama_ulp
       no_laporan
       no_telp_pelapor
       status_akhir
@@ -277,6 +362,7 @@ const GET_DATA = gql`
     }
   }
 `
+
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
@@ -286,12 +372,17 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   idUid: 0,
   idUp3: 0
 })
+
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3, maxTime, minTime } = params
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     minDurasiResponseTime: minTime,
     maxDurasiResponseTime: maxTime,
     idUlp: ulp ? ulp.id : 0,
@@ -311,5 +402,6 @@ const filterData = (params: any) => {
     console.log(error)
   })
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Keluhan/Table_24.vue

@@ -1,51 +1,164 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type11 @update:filters="(value) => filters = value" />
+    <Type11 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="data"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+      <DxPager
-                :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <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"
+      <DxColumn
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+        :width="50"
-                css-class="custom-table-column" cell-template="data" />
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
 
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+      <DxColumn
-                css-class="custom-table-column" cell-template="data" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+        alignment="center"
-                css-class="custom-table-column" cell-template="data" />
+        data-field="waktu_lapor"
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+        caption="Tgl Lapor"
-                css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+        cell-template="data"
-                css-class="custom-table-column" cell-template="data" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+      <DxColumn
-                css-class="custom-table-column" cell-template="data" />
+        :width="170"
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+        alignment="center"
-                css-class="custom-table-column" cell-template="data" />
+        data-field="waktu_response"
-            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+        caption="Tgl Response"
-                css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+        cell-template="data"
-                css-class="custom-table-column" cell-template="data" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+      <DxColumn
-                css-class="custom-table-column" cell-template="data" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+        alignment="center"
-                css-class="custom-table-column" cell-template="data" />
+        data-field="waktu_recovery"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        caption="Tgl Recovery"
-                css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column"
-            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama ULP"
+        cell-template="data"
-                css-class="custom-table-column" cell-template="data" />
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
       <template #data="{ data }">
         <span class="cursor-pointer" @click="showData()">
           {{ data.text }}
@@ -57,110 +170,83 @@
   <DetailDialog :open="showDetail" title="Detail Keluhan" @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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
-                    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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
-                    Tgl Lapor:
-                </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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
-                    Tanggal Response:
-                </h3>
         <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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
-                    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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
-                    Jml Lapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.jml_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">
-                    Response Time:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.durasi_response_time" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
-                    Recovery Time:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
-                    Status:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.status_akhir" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
-                    IDPEL/NO METER:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.idpel_nometer" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
-                    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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-                    Alamat Pelapor:
+        <InputText
-                </h3>
+          :readonly="true"
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
+          type="textarea"
-                    class-name="flex-1 h-[56px]" />
+          :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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
-                    No Telp Pelapor:
-                </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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-                    Keterangan Pelapor:
+        <InputText
-                </h3>
+          :readonly="true"
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
+          type="textarea"
-                    class-name="flex-1 h-[56px]" />
+          :value="dataDetail?.keterangan_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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
-                    Sumber Lapor:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.media" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
-                    Nama ULP:
+        <InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.idUlp" class-name="flex-1" />
       </div>
     </div>
   </DetailDialog>
@@ -171,8 +257,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type11 from '@/components/Form/FiltersType/Type11.vue'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -181,7 +266,6 @@ import {
   DxLoadPanel,
   DxPager,
   DxPaging,
-    DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
@@ -192,6 +276,7 @@ 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)
@@ -262,19 +347,19 @@ const GET_DATA = gql`
       idUp3: $idUp3
     ) {
       alamat_pelapor
-durasi_recovery_time
+      durasi_recovery_time
-durasi_response_time
+      durasi_response_time
-idpel_nometer
+      idpel_nometer
-keterangan_pelapor
+      keterangan_pelapor
-media
+      media
-nama_pelapor
+      nama_pelapor
-nama_unit
+      nama_ulp
-no_laporan
+      no_laporan
-no_telp_pelapor
+      no_telp_pelapor
-status_akhir
+      status_akhir
-waktu_lapor
+      waktu_lapor
-waktu_recovery
+      waktu_recovery
-waktu_response
+      waktu_response
     }
   }
 `
@@ -293,8 +378,12 @@ const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3, minTime, maxTime } = params
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     minDurasiRecoveryTime: minTime,
     maxDurasiRecoveryTime: maxTime,
     idUlp: ulp ? ulp.id : 0,
@@ -304,7 +393,6 @@ const filterData = (params: any) => {
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarKeluhanRecoveryTime
-
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -313,7 +401,7 @@ const filterData = (params: any) => {
   onError((error) => {
     console.log(error)
   })
-
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Keluhan/Table_25.vue

@@ -1,174 +1,259 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => filters = value" />
+    <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="data"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+      <DxPager
-                :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <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"
+      <DxColumn
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+        :width="50"
-                css-class="custom-table-column" cell-template="data" />
+        alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                css-class="custom-table-column" cell-template="data" />
+        data-type="number"
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+        caption="No"
-                css-class="custom-table-column" cell-template="data" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
+      <DxColumn
-                css-class="custom-table-column" cell-template="data" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+        alignment="center"
-                css-class="custom-table-column" cell-template="data" />
+        data-field="no_laporan"
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+        caption="No Laporan"
-                css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column"
-            <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
+        cell-template="data"
-                css-class="custom-table-column" cell-template="data" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+      <DxColumn
-                css-class="custom-table-column" cell-template="data" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+        alignment="center"
-                css-class="custom-table-column" cell-template="data" />
+        data-field="waktu_lapor"
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+        caption="Tgl Lapor"
-                css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+        cell-template="data"
-                css-class="custom-table-column" cell-template="data" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+      <DxColumn
-                css-class="custom-table-column" cell-template="data" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+        alignment="center"
-                css-class="custom-table-column" cell-template="data" />
+        data-field="waktu_response"
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+        caption="Tgl Response"
-                css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        cell-template="data"
-                css-class="custom-table-column" cell-template="data" />
+      />
-            <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
+      <DxColumn
-                css-class="custom-table-column" cell-template="data" />
+        :width="170"
-            <DxColumn :width="150" alignment="center" data-field="nama_idUlp" caption="Nama ULP"
+        alignment="center"
-                css-class="custom-table-column" cell-template="data" />
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
       <template #data="{ data }">
         <span class="cursor-pointer" @click="showData()">
           {{ data.text }}
         </span>
       </template>
-
     </DxDataGrid>
   </div>
 
   <DetailDialog :open="showDetail" title="Detail Keluhan" @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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
-                    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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
-                    Tgl Lapor:
-                </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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
-                    Tanggal Response:
-                </h3>
         <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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
-                    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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
-                    Jml Lapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.jml_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">
-                    Response Time:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.durasi_response_time" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
-                    Recovery Time:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
-                    Status:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.status_akhir" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
-                    IDPEL/NO METER:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.idpel_nometer" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
-                    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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-                    Alamat Pelapor:
+        <InputText
-                </h3>
+          :readonly="true"
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
+          type="textarea"
-                    class-name="flex-1 h-[56px]" />
+          :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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
-                    No Telp Pelapor:
-                </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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-                    Keterangan Pelapor:
+        <InputText
-                </h3>
+          :readonly="true"
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
+          type="textarea"
-                    class-name="flex-1 h-[56px]" />
+          :value="dataDetail?.keterangan_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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
-                    Sumber Lapor:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.media" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
-                    Nama ULP:
+        <InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.idUlp" class-name="flex-1" />
       </div>
     </div>
   </DetailDialog>
@@ -179,8 +264,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -189,7 +273,6 @@ import {
   DxLoadPanel,
   DxPager,
   DxPaging,
-    DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
@@ -200,6 +283,7 @@ 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)
@@ -268,15 +352,15 @@ const GET_DATA = gql`
       alamat_pelapor
       durasi_recovery_time
       durasi_response_time
-      id_keluhan
       idpel_nometer
       keterangan_pelapor
       media
+      nama_ulp
       nama_pelapor
       no_laporan
       no_telp_pelapor
-      idUlp
       status_akhir
+      waktu_lapor
       waktu_recovery
       waktu_response
     }
@@ -295,8 +379,12 @@ const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { idUlp, uid, up3 } = params
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     idUlp: idUlp ? idUlp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
@@ -305,7 +393,6 @@ const filterData = (params: any) => {
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
-
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -315,5 +402,6 @@ const filterData = (params: any) => {
     console.log(error)
   })
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Keluhan/Table_26.vue

@@ -1,54 +1,173 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => filters = value" />
+    <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="data"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+      <DxPager
-                :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <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"
+      <DxColumn
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+        :width="50"
-                css-class="custom-table-column" cell-template="data" />
+        alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                css-class="custom-table-column" cell-template="data" />
+        data-type="number"
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+        caption="No"
-                css-class="custom-table-column" cell-template="data" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+      <DxColumn
-                css-class="custom-table-column" cell-template="data" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        alignment="center"
-                css-class="custom-table-column" cell-template="data" />
+        data-field="no_laporan"
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+        caption="No Laporan"
-                css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
 
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+      <DxColumn
-                css-class="custom-table-column" cell-template="data" />
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
 
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+      <DxColumn
-                css-class="custom-table-column" cell-template="data" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+        alignment="center"
-                css-class="custom-table-column" cell-template="data" />
+        data-field="waktu_response"
-            <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Response Time"
+        caption="Tgl Response"
-                css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column"
-            <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
+        cell-template="data"
-                css-class="custom-table-column" cell-template="data" />
+      />
-            <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
+      <DxColumn
-                css-class="custom-table-column" cell-template="data" />
+        :width="170"
-            <DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
+        alignment="center"
-                css-class="custom-table-column" cell-template="data" />
+        data-field="waktu_recovery"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
+        caption="Tgl Recovery"
-                css-class="custom-table-column" cell-template="data" />
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="waktu_media"
+        caption="Tgl Media"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_media"
+        caption="Keterangan Media"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
       <template #data="{ data }">
         <span class="cursor-pointer" @click="showData()">
           {{ data.text }}
@@ -60,104 +179,88 @@
   <DetailDialog :open="showDetail" title="Detail Keluhan" @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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
-                    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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
-                    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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
-                    No Telp Pelapor:
-                </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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-                    Alamat Pelapor:
+        <InputText
-                </h3>
+          :readonly="true"
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
+          type="textarea"
-                    class-name="flex-1 h-[56px]" />
+          :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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-                    Keterangan Pelapor:
+        <InputText
-                </h3>
+          :readonly="true"
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
+          type="textarea"
-                    class-name="flex-1 h-[56px]" />
+          :value="dataDetail?.keterangan_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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
-                    Status:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.status_akhir" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
-                    Tgl Lapor:
-                </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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
-                    Tgl Response:
-                </h3>
         <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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
-                    Tgl 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
-                    Response Time:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.durasi_response_time" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
-                    Recovery Time:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
-                    Sumber Lapor:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.media" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Media:</h3>
-                    Tgl Media:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.waktu_media" 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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
-                    Keterangan Media:
+        <InputText
-                </h3>
+          :readonly="true"
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_media"
+          type="textarea"
-                    class-name="flex-1 h-[56px]" />
+          :value="dataDetail?.keterangan_media"
+          class-name="flex-1 h-[56px]"
+        />
       </div>
     </div>
   </DetailDialog>
@@ -168,8 +271,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -178,7 +280,6 @@ import {
   DxLoadPanel,
   DxPager,
   DxPaging,
-    DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
@@ -189,6 +290,7 @@ 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)
@@ -246,7 +348,6 @@ const GET_DATA = gql`
     $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
-    $media: String!
   ) {
     daftarKeluhanBerdasarkanMedia(
       dateFrom: $dateFrom
@@ -254,19 +355,19 @@ const GET_DATA = gql`
       idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
-      media: $media
     ) {
       alamat_pelapor
       durasi_recovery_time
       durasi_response_time
-      id_keluhan
-      idpel_nometer
       keterangan_pelapor
       media
+      waktu_media
+      keterangan_media
+      waktu_lapor
       nama_pelapor
       no_laporan
       no_telp_pelapor
-      idUlp
+      nama_ulp
       status_akhir
       waktu_recovery
       waktu_response
@@ -286,8 +387,12 @@ const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { idUlp, uid, up3 } = params
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     idUlp: idUlp ? idUlp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
@@ -296,7 +401,6 @@ const filterData = (params: any) => {
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
-
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -306,5 +410,6 @@ const filterData = (params: any) => {
     console.log(error)
   })
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Keluhan/Table_27.vue

@@ -1,52 +1,173 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => filters = value" />
+    <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="data"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+      <DxPager
-                :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <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"
+      <DxColumn
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+        :width="50"
-                css-class="custom-table-column" />
+        alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="" caption="Contact Center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                css-class="custom-table-column" />
+        data-type="number"
-            <DxColumn :width="170" alignment="center" data-field="" caption="UI Dist." css-class="custom-table-column" />
+        caption="No"
-            <DxColumn :width="170" alignment="center" data-field="" caption="ULP" css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Contact Center"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="UI Dist."
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="ULP"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+      />
 
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+      />
 
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Tlp Pelapor"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="no_telp_pelapor"
-            <DxColumn :width="150" alignment="center" data-field="" caption="APKT Status" css-class="custom-table-column" />
+        caption="No Tlp Pelapor"
-            <DxColumn :width="150" alignment="center" data-field="" caption="Created By" css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Penyelesaian"
+      />
-                css-class="custom-table-column" />
+      <DxColumn
-            <DxColumn :width="170" alignment="center" data-field="" caption="Lapor Ulang" css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="media" caption="Sumber Lapor"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="keterangan_pelapor"
-            <DxColumn :width="170" alignment="center" data-field="" caption="Issue Type" css-class="custom-table-column" />
+        caption="Keterangan Pelapor"
-            <DxColumn :width="170" alignment="center" data-field="" caption="Sub Issue Type"
+        css-class="custom-table-column"
-                css-class="custom-table-column" />
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field=""
+        caption="APKT Status"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field=""
+        caption="Created By"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Tgl Penyelesaian"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Lapor Ulang"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Issue Type"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Sub Issue Type"
+        css-class="custom-table-column"
+      />
     </DxDataGrid>
   </div>
 </template>
@@ -54,7 +175,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -63,7 +184,6 @@ import {
   DxLoadPanel,
   DxPager,
   DxPaging,
-    DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
@@ -74,10 +194,11 @@ 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 position = { of: '#data' }
-const shading = ref(true);
+const showIndicator = ref(true)
-const showPane = ref(true);
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -114,16 +235,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
- query daftarKeluhanDiselesaikanCC123
+  query daftarKeluhanDiselesaikanCC123(
-(
     $dateFrom: Date!
     $dateTo: Date!
     $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
+  ) {
-    daftarKeluhanDiselesaikanCC123
+    daftarKeluhanDiselesaikanCC123(
-(
       dateFrom: $dateFrom
       dateTo: $dateTo
       idUlp: $idUlp
@@ -156,15 +275,19 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   idUp3: 0,
   media: 'Twitter'
 })
-const filters = ref();
+const filters = ref()
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { idUlp, uid, up3 } = params
   const media = params.media ? params.media.id : ''
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     idUlp: idUlp ? idUlp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,