Refactor Type4.vue component

src/components/Form/FiltersType/Type4.vue

@@ -1,15 +1,27 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue';
+import Select from '@/components/Select.vue'
-import DatePicker from '@/components/DatePicker.vue';
+import DatePicker from '@/components/DatePicker.vue'
-import { selectedUid, selectedUp3Ulp, selectedUlp, itemsUid, itemsUp3, itemsUlp } from './reference';
+import { selectedUid, selectedUp3Ulp, selectedUlp, itemsUid, itemsUp3, itemsUlp } from './reference'
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from '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 uppp = ref({ id: 0, name: up3Placeholder });
+const uppp = 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 props = defineProps({
+  jenisLaporan: {
+    type: Array as () => any[],
+    default: () => [
+      { id: 1, name: 'Laporan Berulang Unit' },
+      { id: 2, name: 'Laporan Berulang Pelanggan' },
+      { id: 3, name: 'Laporan Berulang Pelanggan dan Unit' }
+    ]
+  }
+})
+
+const jenisLaporan = ref(computed(() => props.jenisLaporan))
 const data = ref({
   uid: uid.value,
   up3: uppp.value,
@@ -18,24 +30,25 @@ const data = ref({
   jenisLaporan: ''
 })
 const setUid = (value: any) => {
-  uid.value = value;
+  uid.value = value
-  selectedUid(value);
+  selectedUid(value)
-  uppp.value = { id: 0, name: up3Placeholder };
+  uppp.value = { id: 0, name: up3Placeholder }
-  data.value.uid = value;
+  data.value.uid = value
-};
+}
 
 const setUp3 = (value: any) => {
-  uppp.value = value;
+  uppp.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()
@@ -65,17 +78,17 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Jenis Laporan:</label>
 
-      <Select @update:selected="(value) => data.jenisLaporan = value" :data="[
+      <Select
-        { id: 1, name: 'Laporan Berulang Unit' },
+        @update:selected="(value) => (data.jenisLaporan = value)"
-        { id: 2, name: 'Laporan Berulang Pelanggan' },
+        :data="jenisLaporan"
-        { id: 3, name: 'Laporan Berulang Pelanggan dan Unit' },
+        :placeholder="'Semua Jenis Laporan'"
-      ]" :placeholder="'Semua Jenis Laporan'" />
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Periode Tanggal:</label>
 
-      <DatePicker @update:date-value="(value) => data.periode = value" />
+      <DatePicker @update:date-value="(value) => (data.periode = value)" />
     </div>
   </div>
 </template>

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue

@@ -1,10 +1,10 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type4 @update:filters="(value) => filters = value" />
+    <Type4 @update:filters="(value) => (filters = value)" />
-    </Filters>
+  </Filters>
 
-    <Anomali_LAPPGP_LPT :data="data" />
+  <Anomali_LAPPGP_LPT :data="data" :loading="loading" />
-    <Anomali_LAPPGP_LPP :filters-detail="filters" />
+  <Anomali_LAPPGP_LPP :data="data" />
 </template>
 
 <script setup lang="ts">
@@ -17,75 +17,92 @@ import Filters from '@/components/Form/Filters.vue'
 const data = ref<any[]>([])
 
 const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
-  query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, 
+  query laporanAnomaliPenangananPengaduanGangguanPetugas(
-  $dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
+    $dateFrom: Date!
+    $dateTo: Date!
+    $jenisLaporan: Int
+    $idUid: Int
+    $idUp3: Int
+    $posko: String
+  ) {
     laporanAnomaliPenangananPengaduanGangguanPetugas(
       dateFrom: $dateFrom
       dateTo: $dateTo
-      jenisLaporan :$jenisLaporan
+      jenisLaporan: $jenisLaporan
       idUid: $idUid
       idUp3: $idUp3
       posko: $posko
-
     ) {
-        nama_posko
+      nama_posko
-        persen_penyelesaian_petugas_anomali_cc_123_marking
+      persen_penyelesaian_petugas_anomali_cc_123_marking
-        persen_penyelesaian_petugas_anomali_cc_123_non_marking
+      persen_penyelesaian_petugas_anomali_cc_123_non_marking
-        persen_penyelesaian_petugas_anomali_marking
+      persen_penyelesaian_petugas_anomali_marking
-        persen_penyelesaian_petugas_anomali_non_marking
+      persen_penyelesaian_petugas_anomali_non_marking
-        persen_penyelesaian_petugas_anomali_pln_mobile_marking
+      persen_penyelesaian_petugas_anomali_pln_mobile_marking
-        persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
+      persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
-        total_penyelesaian_petugas_anomali_cc_123_marking
+      total_penyelesaian_petugas_anomali_cc_123_marking
-        total_penyelesaian_petugas_anomali_cc_123_non_marking
+      total_penyelesaian_petugas_anomali_cc_123_non_marking
-        total_penyelesaian_petugas_anomali_marking
+      total_penyelesaian_petugas_anomali_marking
-        total_penyelesaian_petugas_anomali_non_marking
+      total_penyelesaian_petugas_anomali_non_marking
-        total_penyelesaian_petugas_anomali_pln_mobile_marking
+      total_penyelesaian_petugas_anomali_pln_mobile_marking
-        total_penyelesaian_petugas_anomali_pln_mobile_non_marking
+      total_penyelesaian_petugas_anomali_pln_mobile_non_marking
-        total_petugas
+      total_petugas
     }
   }
 `
 const filterData = (params: any) => {
-    const { posko, uid, up3 } = params
+  console.table(params)
-    const dateValue = params.periode.split(' s/d ')
+
-    refetch({
+  const { posko, uid, up3 } = params
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+  const dateValue = params.periode.split(' s/d ')
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+  refetch({
-        posko: posko ? posko.id : "",
+    dateFrom: dateValue[0]
-        idUid: uid ? uid.id : 0,
+      ? dateValue[0].split('-').reverse().join('-')
-        idUp3: up3 ? up3.id : 0
+      : new Date().toISOString().slice(0, 10),
-    })
+    dateTo: dateValue[1]
-    onResult((queryResult) => {
+      ? dateValue[1].split('-').reverse().join('-')
-        if (queryResult.data != undefined) {
+      : new Date().toISOString().slice(0, 10),
-            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+    posko: posko ? posko.id : '',
-                data.value = [
+    idUid: uid ? uid.id : 0,
-                    ...data.value,
+    idUp3: up3 ? up3.id : 0
-                    {
+  })
-                        ...item,
+  onResult((queryResult) => {
-                        total_penyelesaian_petugas_anomali_cc_123: item.total_penyelesaian_petugas_anomali_cc_123_marking + item.total_penyelesaian_petugas_anomali_cc_123_non_marking,
+    if (queryResult.data != undefined) {
-                        total_penyelesaian_petugas_anomali_pln_mobile: item.total_penyelesaian_petugas_anomali_pln_mobile_marking + item.total_penyelesaian_petugas_anomali_pln_mobile_non_marking,
+      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-                        total_penyelesaian_petugas_anomali: item.total_penyelesaian_petugas_anomali_marking + item.total_penyelesaian_petugas_anomali_non_marking,
+        data.value = [
-                    }
+          ...data.value,
-                ]
+          {
-            })
+            ...item,
-        }
+            total_penyelesaian_petugas_anomali_cc_123:
-        console.log(queryResult.data)
+              item.total_penyelesaian_petugas_anomali_cc_123_marking +
-        console.log(queryResult.loading)
+              item.total_penyelesaian_petugas_anomali_cc_123_non_marking,
-        console.log(queryResult.networkStatus)
+            total_penyelesaian_petugas_anomali_pln_mobile:
-    })
+              item.total_penyelesaian_petugas_anomali_pln_mobile_marking +
-    onError((error) => {
+              item.total_penyelesaian_petugas_anomali_pln_mobile_non_marking,
-        console.log(error)
+            total_penyelesaian_petugas_anomali:
-    })
+              item.total_penyelesaian_petugas_anomali_marking +
+              item.total_penyelesaian_petugas_anomali_non_marking
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const { onResult, onError, loading, refetch } = useQuery(
-    GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
+  GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
-    {
+  {
-        dateFrom: new Date().toISOString().slice(0, 10),
+    dateFrom: new Date().toISOString().slice(0, 10),
-        dateTo: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
-        posko: '',
+    posko: '',
-        idUid: 0,
+    idUid: 0,
-        idUp3: 0
+    idUp3: 0
-    }
+  }
 )
 const filters = ref()
 </script>

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue

@@ -1,92 +1,159 @@
 <template>
   <div class="mt-4 lg:mt-6 max-w-7xl">
-    <h1 class="text-xl font-medium md:text-2xl text-dark">
+    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
-      Laporan Pengaduan PLN Mobile
-    </h1>
   </div>
-  <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
+  <DxDataGrid
-    :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+    class="max-h-[calc(100vh-140px)] mb-10"
-    @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
+    :data-source="data"
-    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 :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-    <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-      v-if="loading" v-model:visible="loading" :enabled="true" />
     <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-    <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+    <DxExport
+      :enabled="true"
+      :formats="['pdf', 'xlsx', 'document']"
+      :allow-export-selected-data="false"
+    />
     <DxColumnFixing :enabled="true" />
 
-    <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
+    <DxColumn
-      css-class="custom-table-column" />
+      :width="170"
-    <DxColumn :width="170" alignment="center" data-field="nama_petugas" caption="Nama Petugas"
+      alignment="center"
-      css-class="custom-table-column" />
+      data-field="nama_posko"
+      caption="Nama Unit"
+      css-class="custom-table-column"
+    />
+    <DxColumn
+      :width="170"
+      alignment="center"
+      data-field="nama_petugas"
+      caption="Nama Petugas"
+      css-class="custom-table-column"
+    />
     <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
-      <DxColumn alignment="center" caption="(PLN Mobile, CC123, DLL)" css-class="custom-table-column">
+      <DxColumn
-        <DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="a"
+        alignment="center"
-          css-class="custom-table-column" />
+        caption="(PLN Mobile, CC123, DLL)"
+        css-class="custom-table-column"
+      >
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_wo"
+          data-type="number"
+          caption="a"
+          css-class="custom-table-column"
+        />
       </DxColumn>
     </DxColumn>
-    <DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
+    <DxColumn
-      css-class="custom-table-column">
+      alignment="center"
+      caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
       <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
+        <DxColumn
-          data-type="number" caption="b" css-class="custom-table-column" />
+          :width="150"
+          alignment="center"
+          data-field="total_penyelesaian_petugas_anomali_pln_mobile"
+          data-type="number"
+          caption="b"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
+        <DxColumn
-          data-type="number" caption="c" css-class="custom-table-column" />
+          :width="150"
+          alignment="center"
+          data-field="total_penyelesaian_petugas_anomali_cc_123"
+          data-type="number"
+          caption="c"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
+        <DxColumn
-          caption="d=b+c" css-class="custom-table-column" />
+          :width="150"
+          alignment="center"
+          data-field="total_penyelesaian_petugas_anomali"
+          data-type="number"
+          caption="d=b+c"
+          css-class="custom-table-column"
+        />
       </DxColumn>
     </DxColumn>
-    <DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
+    <DxColumn
+      alignment="center"
+      caption="% Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
       <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_pln_mobile"
+        <DxColumn
-          data-type="number" caption="e=b/a" css-class="custom-table-column" />
+          :width="150"
+          alignment="center"
+          data-field="persen_penyelesaian_petugas_anomali_pln_mobile"
+          data-type="number"
+          caption="e=b/a"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_cc_123"
+        <DxColumn
-          data-type="number" caption="f=c/a" css-class="custom-table-column" />
+          :width="150"
+          alignment="center"
+          data-field="persen_penyelesaian_petugas_anomali_cc_123"
+          data-type="number"
+          caption="f=c/a"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali" data-type="number"
+        <DxColumn
-          caption="g=e+f" css-class="custom-table-column" />
+          :width="150"
+          alignment="center"
+          data-field="persen_penyelesaian_petugas_anomali"
+          data-type="number"
+          caption="g=e+f"
+          css-class="custom-table-column"
+        />
       </DxColumn>
     </DxColumn>
-
   </DxDataGrid>
 </template>
 
 <script setup lang="ts">
-defineProps({
-  filtersDetail: {
-    type: Object as PropType<any>,
-    required: true
-  }
-})
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { ref, watch, type PropType } from 'vue'
+import { computed } from 'vue'
-import { useQuery } from '@vue/apollo-composable'
+const props = defineProps({
-import gql from 'graphql-tag'
+  data: Array as () => any[]
-const position = { of: '#data' };
+})
-const showIndicator = ref(true);
+const data = computed(() => props.data)
-const shading = ref(true);
-const showPane = ref(true);
-const data = ref<any[]>([])
-const filtersDetail = ref({}); // Declare the 'filters' variable
-
-// watch(() => filtersDetail.value, (newValue) => { // Access the 'value' property of the 'filters' ref
-//     filterData(newValue)
-// }, { immediate: true })
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -95,7 +162,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-      indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -106,7 +173,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-      autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -121,69 +188,4 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   console.log(data)
 }
-
-const laporanAnomaliDetailPetugasPenangananPengaduanGangguan = gql`
-  query laporanAnomaliDetailPetugasPenangananPengaduanGangguan($dateFrom: Date!, 
-  $dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
-    laporanAnomaliDetailPetugasPenangananPengaduanGangguan(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      jenisLaporan :$jenisLaporan
-      idUid: $idUid
-      idUp3: $idUp3
-      posko: $posko
-
-    ) {
-        nama_petugas
-        nama_posko
-        persen_penyelesaian_petugas_anomali
-        persen_penyelesaian_petugas_anomali_cc_123
-        persen_penyelesaian_petugas_anomali_pln_mobile
-        total_penyelesaian_petugas_anomali
-        total_penyelesaian_petugas_anomali_cc_123
-        total_penyelesaian_petugas_anomali_pln_mobile
-        total_wo
-    }
-  }
-`
-const filterData = (params: any) => {
-  const { posko, uid, up3 } = params
-  const dateValue = params.periode.split(' s/d ')
-  refetch({
-    dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-    dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-    posko: posko ? posko.id : "",
-    idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
-  })
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-        data.value = [
-          ...data.value,
-          {
-            ...item,
-          }
-        ]
-      })
-    }
-    console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
-  })
-  onError((error) => {
-    console.log(error)
-  })
-}
-const { onResult, onError, loading, refetch } = useQuery(
-  laporanAnomaliDetailPetugasPenangananPengaduanGangguan,
-  {
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    posko: '',
-    idUid: 0,
-    idUp3: 0
-  }
-)
-
 </script>

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue

@@ -1,66 +1,157 @@
 <template>
   <div class="mt-4 lg:mt-6 max-w-7xl">
-    <h1 class="text-xl font-medium md:text-2xl text-dark">
+    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
-      Laporan Pengaduan Total
-    </h1>
   </div>
-  <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :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)] mb-10"
-    @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
+    :show-column-lines="true"
-    column-resizing-mode="widget" :word-wrap-enabled="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"
+    :data-source="data"
+  >
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-    <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+    <DxLoadPanel
-      v-if="loading" v-model:visible="loading" :enabled="true" />
+      :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 :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
+    <DxColumn
-      css-class="custom-table-column" />
+      :width="170"
+      alignment="center"
+      data-field="nama_posko"
+      caption="Nama Unit"
+      css-class="custom-table-column"
+    />
     <DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
-      <DxColumn :width="170" alignment="center" data-field="total_petugas" caption="a" css-class="custom-table-column" />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="total_petugas"
+        caption="a"
+        css-class="custom-table-column"
+      />
     </DxColumn>
-    <DxColumn alignment="center" caption="Total Petugas Yang Pengaduan Diselesaikan Secara Anomali"
+    <DxColumn
-      css-class="custom-table-column">
+      alignment="center"
+      caption="Total Petugas Yang Pengaduan Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
       <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
+        <DxColumn
-          data-type="number" caption="b" css-class="custom-table-column" />
+          :width="150"
+          alignment="center"
+          data-field="total_penyelesaian_petugas_anomali_pln_mobile"
+          data-type="number"
+          caption="b"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
+        <DxColumn
-          data-type="number" caption="c" css-class="custom-table-column" />
+          :width="150"
+          alignment="center"
+          data-field="total_penyelesaian_petugas_anomali_cc_123"
+          data-type="number"
+          caption="c"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
+        <DxColumn
-          caption="d=b+c" css-class="custom-table-column" />
+          :width="150"
+          alignment="center"
+          data-field="total_penyelesaian_petugas_anomali"
+          data-type="number"
+          caption="d=b+c"
+          css-class="custom-table-column"
+        />
       </DxColumn>
     </DxColumn>
-    <DxColumn alignment="center" caption="% Petugas Yang Pengaduan Diselesaikan Secara Anomali"
+    <DxColumn
-      css-class="custom-table-column">
+      alignment="center"
+      caption="% Petugas Yang Pengaduan Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
       <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
         <DxColumn alignment="center" caption="e=b/a" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking"
+          <DxColumn
-            data-type="number" caption="Marking" css-class="custom-table-column" />
+            :width="150"
-          <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking"
+            alignment="center"
-            data-type="number" caption="Non Marking" css-class="custom-table-column" />
+            data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking"
+            data-type="number"
+            caption="Marking"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking"
+            data-type="number"
+            caption="Non Marking"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
         <DxColumn alignment="center" caption="f=c/a" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123_marking"
+          <DxColumn
-            data-type="number" caption="Marking" css-class="custom-table-column" />
+            :width="150"
-          <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking"
+            alignment="center"
-            data-type="number" caption="Non Marking" css-class="custom-table-column" />
+            data-field="total_penyelesaian_petugas_anomali_cc_123_marking"
+            data-type="number"
+            caption="Marking"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking"
+            data-type="number"
+            caption="Non Marking"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
         <DxColumn alignment="center" caption="g=e+f" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_marking"
+          <DxColumn
-            data-type="number" caption="Marking" css-class="custom-table-column" />
+            :width="150"
-          <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_non_marking"
+            alignment="center"
-            data-type="number" caption="Non Marking" css-class="custom-table-column" />
+            data-field="total_penyelesaian_petugas_anomali_marking"
+            data-type="number"
+            caption="Marking"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_penyelesaian_petugas_anomali_non_marking"
+            data-type="number"
+            caption="Non Marking"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
     </DxColumn>
@@ -70,7 +161,16 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -81,11 +181,15 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const loading = ref(false)
 const props = defineProps({
   data: Array as () => any[],
+  loading: {
+    type: Boolean,
+    default: false
+  }
 })
 const data = computed(() => props.data)
+const loading = ref(computed(() => props.loading))
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -94,7 +198,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-      indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -105,7 +209,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-      autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -120,5 +224,4 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   console.log(data)
 }
-
 </script>

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue

@@ -1,10 +1,17 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type4 @update:filters="(value) => filters = value" />
+    <Type4
-    </Filters>
+      @update:filters="(value) => (filters = value)"
+      :jenis-laporan="[
+        { id: 1, name: 'Laporan Berulang Unit' },
+        { id: 2, name: 'Laporan Rating Negatif' },
+        { id: 3, name: 'Laporan Skip Step' }
+      ]"
+    />
+  </Filters>
 
-    <Anomali_LAPPGU_LPT :data="data" />
+  <Anomali_LAPPGU_LPT :data="data" :loading="loading" />
-    <Anomali_LAPPGU_LPP :data="data" />
+  <Anomali_LAPPGU_LPP :data="data" />
 </template>
 
 <script setup lang="ts">
@@ -18,11 +25,12 @@ const data = ref<any[]>([])
 
 const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
   query anomaliPenangananPengaduanGangguanUnitBerulang(
-    $dateFrom: Date!, 
+    $dateFrom: Date!
-    $dateTo: Date!, 
+    $dateTo: Date!
-    $posko: String, 
+    $posko: String
-    $idUid: Int, 
+    $idUid: Int
-    $idUp3: Int) {
+    $idUp3: Int
+  ) {
     anomaliPenangananPengaduanGangguanUnitBerulang(
       dateFrom: $dateFrom
       dateTo: $dateTo
@@ -30,71 +38,70 @@ const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-        id_uid
+      id_uid
-        nama_uid
+      nama_uid
-        id_up3
+      id_up3
-        nama_up3
+      nama_up3
-        id_ulp
+      id_ulp
-        nama_ulp
+      nama_ulp
-        wo_cc123
+      wo_cc123
-        wo_pln_mobile
+      wo_pln_mobile
-        wo_loket
+      wo_loket
-        wo_lainnya
+      wo_lainnya
-        wo_total
+      wo_total
-        anomali_pln_mobile_marking
+      anomali_pln_mobile_marking
-        anomali_pln_mobile_non_marking
+      anomali_pln_mobile_non_marking
-        anomali_cc123_marking
+      anomali_cc123_marking
-        anomali_cc123_non_marking
+      anomali_cc123_non_marking
-        total_anomali_marking
+      total_anomali_marking
-        total_anomali_non_marking
+      total_anomali_non_marking
-        persen_anomali_pln_mobile_marking
+      persen_anomali_pln_mobile_marking
-        persen_anomali_pln_mobile_non_marking
+      persen_anomali_pln_mobile_non_marking
-        persen_anomali_cc123_marking
+      persen_anomali_cc123_marking
-        persen_anomali_cc123_non_marking
+      persen_anomali_cc123_non_marking
-        persen_anomali_marking
+      persen_anomali_marking
-        persen_anomali_non_marking
+      persen_anomali_non_marking
     }
   }
 `
 
 const filterData = (params: any) => {
-    const { posko, uid, up3 } = params
+  console.table(params)
-    const dateValue = params.periode.split(' s/d ')
+
-    refetch({
+  const { posko, uid, up3 } = params
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+  const dateValue = params.periode.split(' s/d ')
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+  refetch({
-        posko: posko ? posko.id : "",
+    dateFrom: dateValue[0]
-        idUid: uid ? uid.id : 0,
+      ? dateValue[0].split('-').reverse().join('-')
-        idUp3: up3 ? up3.id : 0
+      : new Date().toISOString().slice(0, 10),
-    })
+    dateTo: dateValue[1]
-    onResult((queryResult) => {
+      ? dateValue[1].split('-').reverse().join('-')
-        if (queryResult.data != undefined) {
+      : new Date().toISOString().slice(0, 10),
-            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+    posko: posko ? posko.id : '',
-                data.value = [
+    idUid: uid ? uid.id : 0,
-                    ...data.value,
+    idUp3: up3 ? up3.id : 0
-                    {
+  })
-                        ...item,
+  onResult((queryResult) => {
-                    }
+    if (queryResult.data != undefined) {
-                ]
+      data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
-            })
+    }
-        }
+    console.log(queryResult.data)
-        console.log(queryResult.data)
+    console.log(queryResult.loading)
-        console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
-        console.log(queryResult.networkStatus)
+  })
-    })
+  onError((error) => {
-    onError((error) => {
+    console.log(error)
-        console.log(error)
+  })
-    })
 }
 const { onResult, onError, loading, refetch } = useQuery(
-    GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
+  GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
-    {
+  {
-        dateFrom: new Date().toISOString().slice(0, 10),
+    dateFrom: new Date().toISOString().slice(0, 10),
-        dateTo: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
-        posko: '',
+    posko: '',
-        idUid: 0,
+    idUid: 0,
-        idUp3: 0
+    idUp3: 0
-    }
+  }
 )
 const filters = ref()
 </script>

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue

@@ -1,60 +1,98 @@
 <template>
   <div class="mt-4 lg:mt-6 max-w-7xl">
-    <h1 class="text-xl font-medium md:text-2xl text-dark">
+    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
-      Laporan Pengaduan PLN Mobile
-    </h1>
   </div>
-  <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
+  <DxDataGrid
-    :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+    class="max-h-[calc(100vh-140px)] mb-10"
-    @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
+    :data-source="data"
-    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"
+    @exporting="onExporting"
+    :allow-column-resizing="true"
+    column-resizing-mode="widget"
+    :word-wrap-enabled="true"
+  >
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-    <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-      v-if="loading" v-model:visible="loading" :enabled="true" />
     <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-    <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+    <DxExport
+      :enabled="true"
+      :formats="['pdf', 'xlsx', 'document']"
+      :allow-export-selected-data="false"
+    />
     <DxColumnFixing :enabled="true" />
 
-    <DxColumn alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+    <DxColumn
+      alignment="center"
+      data-field=""
+      caption="Nama Unit"
+      css-class="custom-table-column"
+    />
     <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
-      <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="a"
+      <DxColumn
-        css-class="custom-table-column" />
+        :width="170"
+        alignment="center"
+        data-field=""
+        data-type="number"
+        caption="a"
+        css-class="custom-table-column"
+      />
     </DxColumn>
-    <DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
+    <DxColumn
-      css-class="custom-table-column">
+      alignment="center"
-      <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="b"
+      caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
-        css-class="custom-table-column" />
+      css-class="custom-table-column"
+    >
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        data-type="number"
+        caption="b"
+        css-class="custom-table-column"
+      />
     </DxColumn>
-    <DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
+    <DxColumn
-      <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="c=b/a"
+      alignment="center"
-        css-class="custom-table-column" />
+      caption="% Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        data-type="number"
+        caption="c=b/a"
+        css-class="custom-table-column"
+      />
     </DxColumn>
-
   </DxDataGrid>
 </template>
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const loading = ref(computed(() => props.loading))
 const props = defineProps({
-  data: Array as () => any[],
+  data: Array as () => any[]
-  loading: {
-    type: Boolean,
-    default: false
-  }
 })
 const data = computed(() => props.data)
 
@@ -65,7 +103,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-      indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -76,7 +114,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-      autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -91,5 +129,4 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   console.log(data)
 }
-
 </script>