Merge branch 'dev-defuj' of github.com:defuj/eis into dev-bagus

src/components/Form/FiltersType/Type2.vue

@@ -26,7 +26,7 @@ const bulanSelected = new Date().getMonth()
 const tahunSelected = new Date().getFullYear()
 const uppp = ref({ id: 0, name: up3Placholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
-const ulp = ref({ id: '', name: ulpPlaceholder })
+const ulp = ref({ id: 0, name: ulpPlaceholder })
 const bulan = ref({ id: bulanSelected, name: bulanPlaceholder })
 const tahun = ref({ id: tahunSelected, name: tahunPlaceholder })
 const regional = ref({ id: 0, name: regionalPlaceholder })
@@ -73,7 +73,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Ulp(value)
-  ulp.value = { id: '', name: ulpPlaceholder }
+  ulp.value = { id: 0, name: ulpPlaceholder }
   data.value.up3 = value
 }
 
@@ -104,48 +104,25 @@ onMounted(() => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Regional:</label>
 
-    <Select
+    <Select @update:selected="setRegional($event)" :data="itemsRegional" :placeholder="regionalPlaceholder" />
-      @update:selected="setRegional($event)"
-      :data="itemsRegional"
-      :placeholder="regionalPlaceholder"
-    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 font-semibold text-gray-800 sm:mb-0"
+    <label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Unit Induk Distribusi/Wilayah:</label>
-      >Unit Induk Distribusi/Wilayah:</label
-    >
 
-    <Select
+    <Select @update:selected="setUid($event)" :data="itemsUid" :selected="uid" :placeholder="uidPlaceholder" />
-      @update:selected="setUid($event)"
-      :data="itemsUid"
-      :selected="uid"
-      :placeholder="uidPlaceholder"
-    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 font-semibold text-gray-800 sm:mb-0"
+    <label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Unit Pelaksanaan Pelayanan Pelanggan:</label>
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
 
-    <Select
+    <Select @update:selected="setUp3($event)" :selected="uppp" :data="itemsUp3" :placeholder="up3Placholder" />
-      @update:selected="setUp3($event)"
-      :selected="uppp"
-      :data="itemsUp3"
-      :placeholder="up3Placholder"
-    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Unit Layanan Pelanggan:</label>
 
-    <Select
+    <Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :placeholder="ulpPlaceholder" />
-      @update:selected="setUlp($event)"
-      :data="itemsUlp"
-      :selected="ulp"
-      :placeholder="ulpPlaceholder"
-    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/reference.ts

@@ -1,7 +1,5 @@
 import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
 import { useUlpStore } from '@/stores/ulp'
-import { useUp3Store } from '@/stores/up3'
 import { getUid, getUp3, getPosko, getUlp, getRegional, getUidRegional } from '@/utils/network'
 import { ref } from 'vue'
 interface Item {
@@ -132,7 +130,7 @@ const fetchRegional = async () => {
     const res = await getRegional()
     itemsRegional.value = res.data.map((item: any) => ({
       id: item.id,
-      name: item.nama.toUpperCase()
+      name: String(item.nama).toUpperCase()
     }))
   } catch (error) {
     console.error('Error fetching data:', error)

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue

@@ -18,7 +18,7 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
-        css-class="custom-table-column" :group-index="0" />
+        css-class="custom-table-column" :group-index="0" name="namaUlp" />
       <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
         css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Jumlah Dispatching Time Gangguan" css-class="custom-table-column">
@@ -169,23 +169,21 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTime
 })
 
 const filterData = (params: any) => {
-  const { regional, idUlp, idUid, idUp3, bulan, tahun } = params
+  const { regional, ulp, uid, up3, bulan, tahun } = params
   bulanSekarang.value = bulan.id
   tahunSekarang.value = tahun.id
   tahunLalu.value = tahun.id - 1
   refetch({
     // regional: regional,
-    idUid: idUid ? idUid.id : 0,
+    idUid: uid ? uid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
+    idUp3: up3 ? up3.id : 0,
     idUlp: ulp ? ulp.id : 0,
     bulan: bulan ? bulan.id : bulanSekarang.value,
     tahun: bulan ? tahun.id : tahunSekarang.value
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      queryResult.data.monalisaDispatchingTimeGangguan.forEach((item: any) => {
+      data.value = queryResult.data.monalisaDispatchingTimeGangguan
-        data.value = [...data.value, { ...item }]
-      })
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue

@@ -3,98 +3,36 @@
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      :data-source="data"
+      @selection-changed="onSelectionChanged" @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"
-      @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
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        :position="position"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
+      <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-        alignment="center"
-        data-field="nama_posko"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-      />
       <DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-            :width="150"
+            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-            data-field="jumlah_bulan"
+            :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
-            data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column" />
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="jumlah_bulan_n_1"
-            data-type="number"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="persen_bulan"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-            :width="150"
+            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-            data-field="jumlah_tahun"
+            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
-            data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column" />
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="jumlah_tahun_n_1"
-            data-type="number"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="persen_tahun"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
         </DxColumn>
       </DxColumn>
     </DxDataGrid>
@@ -137,28 +75,34 @@ const dataDetail = ref<any>()
 const showDetail = ref(false)
 const monalisaRekapitulasiEnsGangguan = gql`
   query DaftarmonalisaRekapitulasiEnsGangguan(
-    $regional: String
+    #$regional: String
-    $posko: Int
+    $idUlp: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
     $tahun: Int
   ) {
     monalisaRekapitulasiEnsGangguan(
-      regional: $regional
+      #regional: $regional
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
       bulan: $bulan
       tahun: $tahun
     ) {
-      jumlah_bulan
+      nama_regional
-      jumlah_bulan_n_1
+      id_uid
-      jumlah_tahun
+      nama_uid
-      jumlah_tahun_n_1
+      id_up3
-      nama_posko
+      nama_up3
-      persen_bulan
+      id_ulp
-      persen_tahun
+      nama_ulp
+      mom_bulan_ini
+      mom_bulan_kemarin
+      persen_mom
+      yoy_tahun_ini
+      yoy_tahun_kemarin
+      persen_yoy
     }
   }
 `
@@ -166,18 +110,18 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEns
   bulan: 10,
   tahun: 2023,
   regional: '',
-  posko: '',
+  idUlp: 0,
   idUid: 0,
   idUp3: 0
 })
 const filterData = (params: any) => {
-  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+  const { regional, ulp, idUid, idUp3, bulan, tahun } = params
   bulanSekarang.value = bulan.id
   tahunSekarang.value = tahun.id
   tahunLalu.value = tahun.id - 1
   refetch({
     regional: regional,
-    posko: posko ? posko.id : 0,
+    idUlp: ulp ? ulp.id : 0,
     idUid: idUid ? idUid.id : 0,
     idUp3: idUp3 ? idUp3.id : 0,
     bulan: bulan ? bulan.id : 10,
@@ -185,14 +129,7 @@ const filterData = (params: any) => {
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      queryResult.data.monalisaRekapitulasiEnsGangguan.forEach((item: any) => {
+      data.value = queryResult.data.monalisaRekapitulasiEnsGangguan
-        data.value = [
-          ...data.value,
-          {
-            ...item
-          }
-        ]
-      })
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue

@@ -3,71 +3,27 @@
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      :data-source="data"
+      @selection-changed="onSelectionChanged" @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"
-      @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
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        :position="position"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
+      <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-        alignment="center"
-        data-field="nama_posko"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-      />
       <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="gangguan" data-type="number" caption="Gangguan"
-          :width="150"
+          css-class="custom-table-column" />
-          alignment="center"
+        <DxColumn :width="150" alignment="center" data-field="informasi" data-type="number" caption="Informasi"
-          data-field="gangguan"
+          css-class="custom-table-column" />
-          data-type="number"
+        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
-          caption="Gangguan"
+          css-class="custom-table-column" />
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="informasi"
-          data-type="number"
-          caption="Informasi"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total"
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-        />
       </DxColumn>
     </DxDataGrid>
   </div>
@@ -108,59 +64,58 @@ const dataDetail = ref<any>()
 const showDetail = ref(false)
 const monalisaGangguanBelumSelesai = gql`
   query DaftarmonalisaGangguanBelumSelesai(
-    $regional: String
+    #$regional: String
-    $posko: Int
+    $idUlp: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
     $tahun: Int
   ) {
     monalisaGangguanBelumSelesai(
-      regional: $regional
+      #regional: $regional
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
       bulan: $bulan
       tahun: $tahun
     ) {
-      gangguan
+      nama_regional
-      informasi
+      id_uid
-      nama_posko
+      nama_uid
+      id_up3
+      nama_up3
+      id_ulp
+      nama_ulp
+      jumlah_gangguan
+      jumlah_informasi
       total
     }
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSelesai, {
   regional: '',
-  posko: '',
+  idUlp: 0,
   idUid: 0,
   idUp3: 0,
   bulan: 10,
   tahun: 2023
 })
 const filterData = (params: any) => {
-  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+  const { regional, ulp, uid, up3, bulan, tahun } = params
   bulanSekarang.value = bulan.id
   tahunSekarang.value = tahun.id
   tahunLalu.value = tahun.id - 1
   refetch({
     regional: regional,
-    posko: posko ? posko.id : 0,
+    idUlp: ulp ? ulp.id : 0,
-    idUid: idUid ? idUid.id : 0,
+    idUid: uid ? uid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
+    idUp3: up3 ? up3.id : 0,
     bulan: bulan ? bulan.id : 10,
     tahun: bulan ? tahun.id : 2023
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      queryResult.data.monalisaGangguanBelumSelesai.forEach((item: any) => {
+      data.value = queryResult.data.monalisaGangguanBelumSelesai
-        data.value = [
-          ...data.value,
-          {
-            ...item
-          }
-        ]
-      })
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue

@@ -3,73 +3,31 @@
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      :data-source="data"
+      @selection-changed="onSelectionChanged" @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"
-      @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
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        :position="position"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
+      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-        :width="50"
+        caption="NO" css-class="custom-table-column" />
-        alignment="center"
+      <DxColumn alignment="center" data-field="id_jenis_gangguan" caption="ID Gangguan" css-class="custom-table-column" />
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+      <DxColumn alignment="center" data-field="nama_jenis_gangguan" caption="Jenis Gangguan"
-        caption="NO"
+        css-class="custom-table-column" />
-        css-class="custom-table-column"
+      <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah" css-class="custom-table-column" />
-      />
+      <DxColumn :width="120" alignment="center" data-field="persen" caption="%" css-class="custom-table-column"
-      <DxColumn
+        cell-template="percent" />
-        alignment="center"
+
-        data-field="id_gangguan"
+      <template #percent="data">
-        caption="ID Gangguan"
+        {{ data.text }}%
-        css-class="custom-table-column"
+      </template>
-      />
-      <DxColumn
-        alignment="center"
-        data-field="tipe_permasalahan"
-        caption="Jenis Gangguan"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="jumlah"
-        caption="Jumlah"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field="persen_gangguan"
-        caption="%"
-        css-class="custom-table-column"
-      />
     </DxDataGrid>
   </div>
 </template>
@@ -108,25 +66,25 @@ const dataDetail = ref<any>()
 const showDetail = ref(false)
 const monalisaGangguanPerJenisGangguan = gql`
   query DaftarmonalisaGangguanPerJenisGangguan(
-    $regional: String
+    #$nama_regional: String
-    $posko: Int
     $idUid: Int
     $idUp3: Int
+    $idUlp: Int
     $bulan: Int
     $tahun: Int
   ) {
     monalisaGangguanPerJenisGangguan(
-      regional: $regional
+      #nama_regional: $regional
-      posko: $posko
       idUid: $idUid
       idUp3: $idUp3
+      idUlp: $idUlp
       bulan: $bulan
       tahun: $tahun
     ) {
-      id_gangguan
+      id_jenis_gangguan
+      nama_jenis_gangguan
       jumlah
-      persen_gangguan
+      persen
-      tipe_permasalahan
     }
   }
 `
@@ -134,31 +92,24 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanPerJeni
   bulan: 10,
   tahun: 2023,
   regional: '',
-  posko: '',
   idUid: 0,
-  idUp3: 0
+  idUp3: 0,
+  idUlp: 0
 })
 const filterData = (params: any) => {
-  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+  const { regional, ulp, uid, up3, bulan, tahun } = params
 
   refetch({
     regional: regional,
-    posko: posko ? posko.id : 0,
+    idUlp: ulp ? ulp.id : 0,
-    idUid: idUid ? idUid.id : 0,
+    idUid: uid ? uid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
+    idUp3: up3 ? up3.id : 0,
     bulan: bulan ? bulan.id : 10,
     tahun: bulan ? tahun.id : 2023
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      queryResult.data.monalisaGangguanPerJenisGangguan.forEach((item: any) => {
+      data.value = queryResult.data.monalisaGangguanPerJenisGangguan
-        data.value = [
-          ...data.value,
-          {
-            ...item
-          }
-        ]
-      })
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue

@@ -0,0 +1,239 @@
+<template>
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type2 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div>
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxColumnFixing :enabled="true" />
+
+      <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
+      <DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Gangguan" css-class="custom-table-column">
+        <DxColumn alignment="center" :caption="`${getMonthName(currentMonth)} ${currentYear}`"
+          css-class="custom-table-column">
+          <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="a" data-type="number"
+              data-field="total_durasi_response_time_bulan_ini" css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="b" data-type="number"
+              data-field="jumlah_gangguan_rpt_bulan" css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field="rpt_gangguan_bulan"
+              css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_bulan"
+              css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="e" data-type="number"
+              data-field="jumlah_gangguan_rct_bulan" css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field="rct_gangguan_bulan"
+              css-class="custom-table-column" />
+          </DxColumn>
+        </DxColumn>
+        <DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth)} ${currentYear} `"
+          css-class="custom-table-column">
+          <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="total_rpt_sampai_bulan"
+              css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="b" data-type="number"
+              data-field="jumlah_gangguan_rpt_sampai_bulan" css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number"
+              data-field="rpt_gangguan_sampai_bulan" css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_sampai_bulan"
+              css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="e" data-type="number"
+              data-field="jumlah_gangguan_rct_sampai_bulan" css-class="custom-table-column" />
+          </DxColumn>
+          <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
+            <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number"
+              data-field="rch_gangguan_sampai_bulan" css-class="custom-table-column" />
+          </DxColumn>
+        </DxColumn>
+      </DxColumn>
+    </DxDataGrid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
+import { onMounted, ref } from 'vue'
+import { DxDataGrid } from 'devextreme-vue'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
+import { jsPDF } from 'jspdf'
+import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import { saveAs } from 'file-saver'
+import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
+
+const currentYear = ref(new Date().getFullYear())
+const currentMonth = ref(new Date().getMonth())
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const monalisaJumlahDurasiRptRctGangguan = gql`
+  query DaftarmonalisaJumlahDurasiRptRctGangguan(
+    #$regional: String
+    $idUlp: Int
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaJumlahDurasiRptRctGangguan(
+      #regional: $regional
+      idUlp: $idUlp
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      id_uid
+      nama_uid
+      id_up3
+      nama_up3
+      id_ulp
+      nama_ulp
+      total_durasi_response_time_bulan_ini
+      count_durasi_response_time_bulan_ini
+      avg_durasi_response_time_bulan_ini
+      total_durasi_recovery_time_bulan_ini
+      count_durasi_recovery_time_bulan_ini
+      avg_durasi_recovery_time_bulan_ini
+      total_durasi_response_time_tahun_ini
+      count_durasi_response_time_tahun_ini
+      avg_durasi_response_time_tahun_ini
+      total_durasi_recovery_time_tahun_ini
+      count_durasi_recovery_time_tahun_ini
+      avg_durasi_recovery_time_tahun_ini
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRptRctGangguan, {
+  bulan: 10,
+  tahun: 2023,
+  // regional: '',
+  idUlp: 0,
+  idUid: 0,
+  idUp3: 0
+})
+const filterData = (params: any) => {
+  const {
+    // regional, 
+    ulp,
+    uid,
+    up3,
+    bulan,
+    tahun
+  } = params
+
+  currentMonth.value = bulan.id
+  currentYear.value = tahun.id
+
+  refetch({
+    // regional: regional,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.monalisaJumlahDurasiRptRctGangguan
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
+}
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
+
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
+
+    e.cancel = true
+  }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  console.log(data)
+}
+
+const filters = ref<any>({
+  // regional: '',
+  // posko: '',
+  uid: 0,
+  up3: 0,
+  bulan: 2,
+  tahun: 2024
+})
+
+
+onMounted(() => {
+  getMonthName(filters.value.bulan.id)
+})
+</script>

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue

@@ -1,6 +1,6 @@
 <template>
-  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters :report-button="true" @reset-form="data = []" @run-search="filterData(filters)" class="mb-4">
-    <Type2 @update:filters="(value) => (filters = value)" />
+    <Type2 @update:filters="(value) => filters = value" />
   </Filters>
 
   <div id="data">
@@ -18,7 +18,7 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
-        css-class="custom-table-column" />
+        css-class="custom-table-column" name="namaULP" />
       <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
         css-class="custom-table-column" :group-index="0" />
       <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
@@ -196,14 +196,14 @@ const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGG
 })
 
 const filterData = (params: any) => {
-  const { regional, idUlp, idUid, idUp3, bulan, tahun } = params
+  const { regional, ulp, uid, up3, bulan, tahun } = params
   bulanSekarang.value = bulan.id
   tahunSekarang.value = tahun.id
   tahunLalu.value = tahun.id - 1
   refetch({
     // regional: regional,
-    idUid: idUid ? idUid.id : 0,
+    idUid: uid ? uid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
+    idUp3: up3 ? up3.id : 0,
     idUlp: ulp ? ulp.id : 0,
     bulan: bulan ? bulan.id : bulanSekarang.value,
     tahun: bulan ? tahun.id : tahunSekarang.value

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue

@@ -3,98 +3,36 @@
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      :data-source="data"
+      @selection-changed="onSelectionChanged" @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"
-      @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
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        :position="position"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
+      <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-        alignment="center"
-        data-field="nama_posko"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-      />
       <DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-            :width="150"
+            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-            data-field="jumlah_bulan"
+            :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
-            data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column" />
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="jumlah_bulan_n_1"
-            data-type="number"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="persen_bulan"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-            :width="150"
+            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-            data-field="jumlah_tahun"
+            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
-            data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column" />
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="jumlah_tahun_n_1"
-            data-type="number"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="persen_tahun"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
         </DxColumn>
       </DxColumn>
     </DxDataGrid>
@@ -137,28 +75,34 @@ const dataDetail = ref<any>()
 const showDetail = ref(false)
 const monalisaRekapitulasiLaporUlangGangguan = gql`
   query DaftarmonalisaRekapitulasiLaporUlangGangguan(
-    $regional: String
+    #$regional: String
-    $posko: Int
+    $idUlp: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
     $tahun: Int
   ) {
     monalisaRekapitulasiLaporUlangGangguan(
-      regional: $regional
+      #regional: $regional
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
       bulan: $bulan
       tahun: $tahun
     ) {
-      jumlah_bulan
+      nama_regional
-      jumlah_bulan_n_1
+      id_uid
-      jumlah_tahun
+      nama_uid
-      jumlah_tahun_n_1
+      id_up3
-      nama_posko
+      nama_up3
-      persen_bulan
+      id_ulp
-      persen_tahun
+      nama_ulp
+      mom_bulan_ini
+      mom_bulan_kemarin
+      persen_mom
+      yoy_tahun_ini
+      yoy_tahun_kemarin
+      persen_yoy
     }
   }
 `
@@ -166,33 +110,26 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLap
   bulan: 10,
   tahun: 2023,
   regional: '',
-  posko: '',
+  idUlp: 0,
   idUid: 0,
   idUp3: 0
 })
 const filterData = (params: any) => {
-  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+  const { regional, ulp, uid, up3, bulan, tahun } = params
   bulanSekarang.value = bulan.id
   tahunSekarang.value = tahun.id
   tahunLalu.value = tahun.id - 1
   refetch({
     regional: regional,
-    posko: posko ? posko.id : 0,
+    idUlp: ulp ? ulp.id : 0,
-    idUid: idUid ? idUid.id : 0,
+    idUid: uid ? uid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
+    idUp3: up3 ? up3.id : 0,
     bulan: bulan ? bulan.id : 10,
     tahun: bulan ? tahun.id : 2023
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      queryResult.data.monalisaRekapitulasiLaporUlangGangguan.forEach((item: any) => {
+      data.value = queryResult.data.monalisaRekapitulasiLaporUlangGangguan
-        data.value = [
-          ...data.value,
-          {
-            ...item
-          }
-        ]
-      })
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue

@@ -18,7 +18,7 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
-        css-class="custom-table-column" :group-index="0" />
+        css-class="custom-table-column" :group-index="0" name="namaUlp" />
       <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
         css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Jumlah RCT Kali Gangguan" css-class="custom-table-column">
@@ -140,28 +140,21 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeGan
 })
 
 const filterData = (params: any) => {
-  const { regional, idUlp, idUid, idUp3, bulan, tahun } = params
+  const { regional, ulp, uid, up3, bulan, tahun } = params
   bulanSekarang.value = bulan.id
   tahunSekarang.value = tahun.id
   tahunLalu.value = tahun.id - 1
   refetch({
     // regional: regional,
-    idUid: idUid ? idUid.id : 0,
+    idUid: uid ? uid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
+    idUp3: up3 ? up3.id : 0,
     idUlp: ulp ? ulp.id : 0,
     bulan: bulan ? bulan.id : bulanSekarang.value,
     tahun: bulan ? tahun.id : tahunSekarang.value
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      queryResult.data.monalisaRecoveryTimeGangguan.forEach((item: any) => {
+      data.value = queryResult.data.monalisaRecoveryTimeGangguan
-        data.value = [
-          ...data.value,
-          {
-            ...item
-          }
-        ]
-      })
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue

@@ -18,7 +18,7 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
-        css-class="custom-table-column" :group-index="0" />
+        css-class="custom-table-column" :group-index="0" name="namaUlp" />
       <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
         css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Jumlah RPT Kali Gangguan" css-class="custom-table-column">
@@ -140,28 +140,21 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaResponseTimeKel
 })
 
 const filterData = (params: any) => {
-  const { regional, idUlp, idUid, idUp3, bulan, tahun } = params
+  const { regional, ulp, uid, up3, bulan, tahun } = params
   bulanSekarang.value = bulan.id
   tahunSekarang.value = tahun.id
   tahunLalu.value = tahun.id - 1
   refetch({
     // regional: regional,
-    idUid: idUid ? idUid.id : 0,
+    idUid: uid ? uid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
+    idUp3: up3 ? up3.id : 0,
     idUlp: ulp ? ulp.id : 0,
     bulan: bulan ? bulan.id : bulanSekarang.value,
     tahun: bulan ? tahun.id : tahunSekarang.value
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      queryResult.data.monalisaResponseTimeKeluhan.forEach((item: any) => {
+      data.value = queryResult.data.monalisaResponseTimeKeluhan
-        data.value = [
-          ...data.value,
-          {
-            ...item
-          }
-        ]
-      })
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue

@@ -0,0 +1,239 @@
+<template>
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type2 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxColumnFixing :enabled="true" />
+
+      <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
+        css-class="custom-table-column" />
+      <DxColumn alignment="center" :caption="`${getMonthName(bulanSekarang - 1)} ${tahunSekarang}`"
+        css-class="custom-table-column">
+        <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number" caption="Keluhan"
+          css-class="custom-table-column" name="keluhanBulanLalu" />
+        <DxColumn :width="120" alignment="center" data-field="gangguan_bulan_lalu" data-type="number" caption="Gangguan"
+          css-class="custom-table-column" />
+        <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
+          <DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_lalu" data-type="number"
+            caption="Keluhan" css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_lalu" data-type="number"
+            caption="Gangguan" css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="total_bulan_lalu" data-type="number" caption="Total"
+            css-class="custom-table-column" />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+            css-class="custom-table-column" />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
+          data-field="total_komplain_bulan_lalu" data-type="number" />
+      </DxColumn>
+
+      <DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column">
+        <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_ini" data-type="number" caption="Keluhan"
+          css-class="custom-table-column" />
+        <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number" caption="Gangguan"
+          css-class="custom-table-column" />
+        <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
+          <DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_ini" data-type="number"
+            caption="Keluhan" css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_ini" data-type="number"
+            caption="Gangguan" css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="total_bulan_ini" data-type="number" caption="Total"
+            css-class="custom-table-column" />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+            css-class="custom-table-column" />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
+          data-field="total_komplain_bulan_ini" data-type="number" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="delta_penurunan_keluhan" data-type="number"
+          caption="Keluhan" css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="delta_penurunan_gangguan" data-type="number"
+          caption="Gangguan" css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="delta_penurunan_informasi" data-type="number"
+          caption="Informasi" css-class="custom-table-column" />
+      </DxColumn>
+      <DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="persen_penurunan_keluhan" data-type="number"
+          caption="Keluhan" css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="persen_penurunan_gangguan" data-type="number"
+          caption="Gangguan" css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="persen_penurunan_informasi" data-type="number"
+          caption="Informasi" css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="persen_penurunan_total" data-type="number" caption="% Total"
+          css-class="custom-table-column" />
+      </DxColumn>
+    </DxDataGrid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
+import { DxDataGrid } from 'devextreme-vue'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
+import { jsPDF } from 'jspdf'
+import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import { saveAs } from 'file-saver'
+import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+if (bulanSekarang.value - 1 == 0) {
+  let bulanLalu = 12
+  let tahunLalu = tahunSekarang.value - 1
+} else {
+  let bulanLalu = bulanSekarang.value - 1
+  let tahunLalu = tahunSekarang.value
+}
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
+
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
+
+    e.cancel = true
+  }
+}
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  console.log(data)
+}
+const penurunanJumlahKomplainBulanan = gql`
+  query DaftarpenurunanJumlahKomplainBulanan(
+    $regional: String
+    $posko: Int
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    penurunanJumlahKomplainBulanan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      delta_penurunan_gangguan
+      delta_penurunan_informasi
+      delta_penurunan_keluhan
+      gangguan_bulan_ini
+      gangguan_bulan_lalu
+      informasi_gangguan_bulan_ini
+      informasi_gangguan_bulan_lalu
+      informasi_keluhan_bulan_ini
+      informasi_keluhan_bulan_lalu
+      keluhan_bulan_ini
+      keluhan_bulan_lalu
+      nama_posko
+      persen_penurunan_gangguan
+      persen_penurunan_informasi
+      persen_penurunan_keluhan
+      persen_penurunan_total
+      total_bulan_ini
+      total_bulan_lalu
+      total_komplain_bulan_ini
+      total_komplain_bulan_lalu
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(penurunanJumlahKomplainBulanan, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : 0,
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.penurunanJumlahKomplainBulanan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
+}
+const filters = ref()
+</script>

src/components/Pages/Monalisa/Table_40.vue

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

src/components/Pages/Monalisa/Table_52.vue

@@ -1,405 +0,0 @@
-<template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type2 @update:filters="(value) => (filters = value)" />
-  </Filters>
-  <div id="data">
-    <DxDataGrid
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
-      <DxSelection mode="single" />
-      <DxPaging :enabled="false" />
-      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
-      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
-      <DxColumnFixing :enabled="true" />
-
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="nama_posko"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        alignment="center"
-        :caption="`${getMonthName(bulanSekarang - 1)} ${tahunSekarang}`"
-        css-class="custom-table-column"
-      >
-        <DxColumn
-          :width="120"
-          alignment="center"
-          data-field="keluhan_bulan_lalu"
-          data-type="number"
-          caption="Keluhan"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="120"
-          alignment="center"
-          data-field="gangguan_bulan_lalu"
-          data-type="number"
-          caption="Gangguan"
-          css-class="custom-table-column"
-        />
-        <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="informasi_keluhan_bulan_lalu"
-            data-type="number"
-            caption="Keluhan"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="informasi_gangguan_bulan_lalu"
-            data-type="number"
-            caption="Gangguan"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_bulan_lalu"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-          />
-        </DxColumn>
-        <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
-        </DxColumn>
-        <DxColumn
-          alignment="center"
-          caption="Total Komplain"
-          css-class="custom-table-column"
-          data-field="total_komplain_bulan_lalu"
-          data-type="number"
-        />
-      </DxColumn>
-
-      <DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column">
-        <DxColumn
-          :width="120"
-          alignment="center"
-          data-field="keluhan_bulan_ini"
-          data-type="number"
-          caption="Keluhan"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="120"
-          alignment="center"
-          data-field="keluhan_bulan_lalu"
-          data-type="number"
-          caption="Gangguan"
-          css-class="custom-table-column"
-        />
-        <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="informasi_keluhan_bulan_ini"
-            data-type="number"
-            caption="Keluhan"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="informasi_gangguan_bulan_ini"
-            data-type="number"
-            caption="Gangguan"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_bulan_ini"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-          />
-        </DxColumn>
-        <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
-        </DxColumn>
-        <DxColumn
-          alignment="center"
-          caption="Total Komplain"
-          css-class="custom-table-column"
-          data-field="total_komplain_bulan_ini"
-          data-type="number"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="delta_penurunan_keluhan"
-          data-type="number"
-          caption="Keluhan"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="delta_penurunan_gangguan"
-          data-type="number"
-          caption="Gangguan"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="delta_penurunan_informasi"
-          data-type="number"
-          caption="Informasi"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-      <DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="persen_penurunan_keluhan"
-          data-type="number"
-          caption="Keluhan"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="persen_penurunan_gangguan"
-          data-type="number"
-          caption="Gangguan"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="persen_penurunan_informasi"
-          data-type="number"
-          caption="Informasi"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="persen_penurunan_total"
-          data-type="number"
-          caption="% Total"
-          css-class="custom-table-column"
-        />
-      </DxColumn>
-    </DxDataGrid>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import Filters from '@/components/Form/Filters.vue'
-import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { DxDataGrid } from 'devextreme-vue'
-import {
-  DxColumn,
-  DxColumnFixing,
-  DxExport,
-  DxLoadPanel,
-  DxPaging,
-  DxScrolling,
-  DxSearchPanel,
-  DxSelection
-} from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
-import { getMonthName } from '@/utils/texts'
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const data = ref<any[]>([])
-const dataDetail = ref<any>()
-const showDetail = ref(false)
-const tahunSekarang = ref(new Date().getFullYear())
-const bulanSekarang = ref(new Date().getMonth())
-if (bulanSekarang.value - 1 == 0) {
-  let bulanLalu = 12
-  let tahunLalu = tahunSekarang.value - 1
-} else {
-  let bulanLalu = bulanSekarang.value - 1
-  let tahunLalu = tahunSekarang.value
-}
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    const doc = new jsPDF()
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
-  } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
-  }
-}
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  console.log(data)
-}
-const penurunanJumlahKomplainBulanan = gql`
-  query DaftarpenurunanJumlahKomplainBulanan(
-    $regional: String
-    $posko: Int
-    $idUid: Int
-    $idUp3: Int
-    $bulan: Int
-    $tahun: Int
-  ) {
-    penurunanJumlahKomplainBulanan(
-      regional: $regional
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-      bulan: $bulan
-      tahun: $tahun
-    ) {
-      delta_penurunan_gangguan
-      delta_penurunan_informasi
-      delta_penurunan_keluhan
-      gangguan_bulan_ini
-      gangguan_bulan_lalu
-      informasi_gangguan_bulan_ini
-      informasi_gangguan_bulan_lalu
-      informasi_keluhan_bulan_ini
-      informasi_keluhan_bulan_lalu
-      keluhan_bulan_ini
-      keluhan_bulan_lalu
-      nama_posko
-      persen_penurunan_gangguan
-      persen_penurunan_informasi
-      persen_penurunan_keluhan
-      persen_penurunan_total
-      total_bulan_ini
-      total_bulan_lalu
-      total_komplain_bulan_ini
-      total_komplain_bulan_lalu
-    }
-  }
-`
-const { onResult, onError, loading, refetch } = useQuery(penurunanJumlahKomplainBulanan, {
-  regional: '',
-  posko: '',
-  idUid: 0,
-  idUp3: 0,
-  bulan: 10,
-  tahun: 2023
-})
-const filterData = (params: any) => {
-  const { regional, posko, idUid, idUp3, bulan, tahun } = params
-
-  refetch({
-    regional: regional,
-    posko: posko ? posko.id : 0,
-    idUid: idUid ? idUid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
-    bulan: bulan ? bulan.id : 10,
-    tahun: bulan ? tahun.id : 2023
-  })
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      queryResult.data.penurunanJumlahKomplainBulanan.forEach((item: any) => {
-        data.value = [
-          ...data.value,
-          {
-            ...item
-          }
-        ]
-      })
-    }
-    console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
-  })
-  onError((error) => {
-    console.log(error)
-  })
-}
-const filters = ref()
-</script>

src/components/Pages/Monalisa/index.ts

@@ -1,24 +1,27 @@
-export { default as MonalisaTable1 } from '@/components/Pages/Monalisa/Table_36.vue'
+export { default as MonalisaGRJumlahKaliGangguan } from '@/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue'
-export { default as MonalisaTable2 } from '@/components/Pages/Monalisa/Table_37.vue'
+export { default as MonalisaGRDispatchingTimeGangguan } from '@/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue'
-export { default as MonalisaTable3 } from '@/components/Pages/Monalisa/Table_38.vue'
+export { default as MonalisaGRRecoveryTimeGangguan } from '@/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue'
-export { default as MonalisaTable4 } from '@/components/Pages/Monalisa/Table_39.vue'
+export { default as MonalisaGRResponseTimeGangguan } from '@/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue'
-export { default as MonalisaTable5 } from '@/components/Pages/Monalisa/Table_40.vue'
+export { default as MonalisaGRJumlahDDRPTRCTGangguan } from '@/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue'
-export { default as MonalisaTable6 } from '@/components/Pages/Monalisa/Table_41.vue'
+export { default as MonalisaGRGangguanPerJenisGangguan } from '@/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue'
-export { default as MonalisaTable7 } from '@/components/Pages/Monalisa/Table_42.vue'
+export { default as MonalisaGRLaporUlang } from '@/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue'
-export { default as MonalisaTable8 } from '@/components/Pages/Monalisa/Table_43.vue'
+export { default as MonalisaGRENSGangguan } from '@/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue'
-export { default as MonalisaTable9 } from '@/components/Pages/Monalisa/Table_44.vue'
+export { default as MonalisaGRGangguanBelumSelesai } from '@/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue'
-export { default as MonalisaTable10 } from '@/components/Pages/Monalisa/Table_45.vue'
+
-export { default as MonalisaTable11 } from '@/components/Pages/Monalisa/Table_46.vue'
+export { default as MonalisaKRJumlahKaliKeluhan } from '@/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue'
-export { default as MonalisaTable12 } from '@/components/Pages/Monalisa/Table_47.vue'
+export { default as MonalisaKRRecoveryTimeKeluhan } from '@/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue'
-export { default as MonalisaTable13 } from '@/components/Pages/Monalisa/Table_48.vue'
+export { default as MonalisaKRResponseTimeKeluhan } from '@/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue'
-export { default as MonalisaTable14 } from '@/components/Pages/Monalisa/Table_49.vue'
+export { default as MonalisaKRJumlahDDRPTRCTKeluhan } from '@/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue'
-export { default as MonalisaTable15 } from '@/components/Pages/Monalisa/Table_50.vue'
+export { default as MonalisaKRGangguanPerJenisKeluhan } from '@/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue'
-export { default as MonalisaTable16 } from '@/components/Pages/Monalisa/Table_51.vue'
+export { default as MonalisaKRLaporUlangKeluhan } from '@/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue'
-export { default as MonalisaTable17 } from '@/components/Pages/Monalisa/Table_52.vue'
+export { default as MonalisaKRKeluhanBelumSelesai } from '@/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue'
-export { default as MonalisaTable18 } from '@/components/Pages/Monalisa/Table_53.vue'
+
-export { default as MonalisaTable19 } from '@/components/Pages/Monalisa/Table_54.vue'
+export { default as MonalisaLBPenurunanJumlahKomplain } from '@/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue'
-export { default as MonalisaTable20 } from '@/components/Pages/Monalisa/Table_55.vue'
+export { default as MonalisaLBAgingComplaint } from '@/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue'
-export { default as MonalisaTable21 } from '@/components/Pages/Monalisa/Table_56.vue'
+export { default as MonalisaLBEnergyNotSales } from '@/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue'
-export { default as MonalisaTable22 } from '@/components/Pages/Monalisa/Table_57.vue'
+export { default as MonalisaLBKADDalamPelaporan } from '@/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue'
-export { default as MonalisaTable23 } from '@/components/Pages/Monalisa/Table_58.vue'
+
-export { default as MonalisaTable24 } from '@/components/Pages/Monalisa/Table_59.vue'
+export { default as MonalisaLKPenurunanJumlahKomplain } from '@/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue'
+export { default as MonalisaLKAgingComplaint } from '@/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue'
+export { default as MonalisaLKEnergyNotSales } from '@/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue'
+export { default as MonalisaLKKDADPelaporan } from '@/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue'

src/router/index.ts

@@ -46,30 +46,30 @@ import {
   RekapKeluhanRatingPerUnit
 } from '@/components/Pages/Keluhan'
 import {
-  MonalisaTable1,
+  MonalisaGRDispatchingTimeGangguan,
-  MonalisaTable10,
+  MonalisaLBKADDalamPelaporan,
-  MonalisaTable11,
+  MonalisaLKPenurunanJumlahKomplain,
-  MonalisaTable12,
+  MonalisaLKAgingComplaint,
-  MonalisaTable13,
+  MonalisaLKEnergyNotSales,
-  MonalisaTable14,
+  MonalisaLKKDADPelaporan,
-  MonalisaTable15,
+  MonalisaGRRecoveryTimeGangguan,
-  MonalisaTable16,
+  MonalisaGRResponseTimeGangguan,
-  MonalisaTable17,
+  MonalisaGRJumlahDDRPTRCTGangguan,
-  MonalisaTable18,
+  MonalisaGRGangguanPerJenisGangguan,
-  MonalisaTable19,
+  MonalisaGRLaporUlang,
-  MonalisaTable2,
+  MonalisaGRENSGangguan,
-  MonalisaTable20,
+  MonalisaGRGangguanBelumSelesai,
-  MonalisaTable21,
+  MonalisaGRJumlahKaliGangguan,
-  MonalisaTable22,
+  MonalisaLBEnergyNotSales,
-  MonalisaTable23,
+  MonalisaLBAgingComplaint,
-  MonalisaTable24,
+  MonalisaLBPenurunanJumlahKomplain,
-  MonalisaTable3,
+  MonalisaKRKeluhanBelumSelesai,
-  MonalisaTable4,
+  MonalisaKRLaporUlangKeluhan,
-  MonalisaTable5,
+  MonalisaKRGangguanPerJenisKeluhan,
-  MonalisaTable6,
+  MonalisaKRJumlahDDRPTRCTKeluhan,
-  MonalisaTable7,
+  MonalisaKRResponseTimeKeluhan,
-  MonalisaTable8,
+  MonalisaKRRecoveryTimeKeluhan,
-  MonalisaTable9
+  MonalisaKRJumlahKaliKeluhan
 } from '@/components/Pages/Monalisa'
 import { LaporanCICO } from '@/components/Pages/Cico'
 import { Anomali_LAPPGU, Anomali_LAPPKU, Anomali_LAPPGP } from '@/components/Pages/Anomali'
@@ -338,48 +338,48 @@ export const routes: RouteRecordRaw[] = [
                 children: [
                   {
                     path: '1',
-                    name: 'Jumlah Kali  Gangguan',
+                    name: 'Jumlah Kali Gangguan',
-                    component: MonalisaTable1
+                    component: MonalisaGRJumlahKaliGangguan
                   },
                   {
                     path: '2',
                     name: 'Dispacthing Time (DT) Gangguan',
-                    component: MonalisaTable2
+                    component: MonalisaGRDispatchingTimeGangguan
                   },
                   {
                     path: '3',
                     name: 'Recovery Time (RCT) Gangguan',
-                    component: MonalisaTable3
+                    component: MonalisaGRRecoveryTimeGangguan
                   },
                   {
                     path: '4',
                     name: 'Response Time (RPT) Gangguan',
-                    component: MonalisaTable4
+                    component: MonalisaGRResponseTimeGangguan
                   },
                   {
                     path: '5',
                     name: 'Jumlah dan Durasi RPT RCT Gangguan',
-                    component: MonalisaTable5
+                    component: MonalisaGRJumlahDDRPTRCTGangguan
                   },
                   {
                     path: '6',
                     name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
-                    component: MonalisaTable6
+                    component: MonalisaGRGangguanPerJenisGangguan
                   },
                   {
                     path: '7',
                     name: 'Rekapitulasi Lapor Ulang Gangguan',
-                    component: MonalisaTable7
+                    component: MonalisaGRLaporUlang
                   },
                   {
                     path: '8',
                     name: 'Rekapitulasi ENS Gangguan',
-                    component: MonalisaTable8
+                    component: MonalisaGRENSGangguan
                   },
                   {
                     path: '9',
                     name: 'Rekapitulasi Gangguan Belum Selesai',
-                    component: MonalisaTable9
+                    component: MonalisaGRGangguanBelumSelesai
                   },
                   {
                     path: ':pathMatch(.*)*',
@@ -404,37 +404,37 @@ export const routes: RouteRecordRaw[] = [
                   {
                     path: '1',
                     name: 'Jumlah Kali Keluhan',
-                    component: MonalisaTable10
+                    component: MonalisaKRJumlahKaliKeluhan
                   },
                   {
                     path: '2',
                     name: 'Recovery Time (RCT) Keluhan',
-                    component: MonalisaTable11
+                    component: MonalisaKRRecoveryTimeKeluhan
                   },
                   {
                     path: '3',
                     name: 'Response Time (RPT) Keluhan',
-                    component: MonalisaTable12
+                    component: MonalisaKRResponseTimeKeluhan
                   },
                   {
                     path: '4',
                     name: 'Jumlah dan Durasi RPT RCT Keluhan',
-                    component: MonalisaTable13
+                    component: MonalisaKRJumlahDDRPTRCTKeluhan
                   },
                   {
                     path: '5',
                     name: 'Rekapitulasi Gangguan Per Jenis Keluhan',
-                    component: MonalisaTable14
+                    component: MonalisaKRGangguanPerJenisKeluhan
                   },
                   {
                     path: '6',
                     name: 'Rekapitulasi Lapor Ulang Keluhan',
-                    component: MonalisaTable15
+                    component: MonalisaKRLaporUlangKeluhan
                   },
                   {
                     path: '7',
                     name: 'Rekapitulasi Keluhan Belum Selesai',
-                    component: MonalisaTable16
+                    component: MonalisaKRKeluhanBelumSelesai
                   },
                   {
                     path: ':pathMatch(.*)*',
@@ -459,22 +459,22 @@ export const routes: RouteRecordRaw[] = [
                   {
                     path: '1',
                     name: '(Monalisa) Penurunan Jumlah Komplain',
-                    component: MonalisaTable17
+                    component: MonalisaLBPenurunanJumlahKomplain
                   },
                   {
                     path: '2',
                     name: '(Monalisa) Aging Complaint',
-                    component: MonalisaTable18
+                    component: MonalisaLBAgingComplaint
                   },
                   {
                     path: '3',
                     name: '(Monalisa) Energy Not Sales (ENS)',
-                    component: MonalisaTable19
+                    component: MonalisaLBEnergyNotSales
                   },
                   {
                     path: '4',
                     name: '(Monalisa) Kepatuhan dan Akurasi Dalam Pelaporan',
-                    component: MonalisaTable20
+                    component: MonalisaLBKADDalamPelaporan
                   },
                   {
                     path: ':pathMatch(.*)*',
@@ -489,22 +489,22 @@ export const routes: RouteRecordRaw[] = [
                   {
                     path: '1',
                     name: 'Penurunan Jumlah Komplain',
-                    component: MonalisaTable21
+                    component: MonalisaLKPenurunanJumlahKomplain
                   },
                   {
                     path: '2',
                     name: 'Aging Complaint',
-                    component: MonalisaTable22
+                    component: MonalisaLKAgingComplaint
                   },
                   {
                     path: '3',
                     name: 'Energy Not Sales (ENS)',
-                    component: MonalisaTable23
+                    component: MonalisaLKEnergyNotSales
                   },
                   {
                     path: '4',
-                    name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
+                    name: 'Kepatuhan dan Akurasi Dalam Pelaporan',
-                    component: MonalisaTable24
+                    component: MonalisaLKKDADPelaporan
                   },
                   {
                     path: ':pathMatch(.*)*',

src/utils/numbers.ts

@@ -12,6 +12,11 @@ const splitRoutePath = (routePath: string): string[] => {
     return routeArray
 }
 
+const formatNumber = (number: number): string => {
+    return new Intl.NumberFormat('en-US').format(number)
+}
+
 export {
-    splitRoutePath
+    splitRoutePath,
+    formatNumber
 }