Add new GraphQL queries for monthly KPI details

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

@@ -96,7 +96,7 @@
           caption="Keluhan"
           css-class="custom-table-column"
           name="keluhanBulanLalu"
-          cell-template="formatNumber"
+          cell-template="formatNumberKeluhanCurrentMonthLastYear"
         />
         <DxColumn
           :width="120"
@@ -105,7 +105,7 @@
           data-type="number"
           caption="Gangguan"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberGangguanCurrentMonthLastYear"
         />
         <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
           <DxColumn
@@ -158,7 +158,7 @@
           data-type="number"
           caption="Keluhan"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberKeluhanCurrentMonthCurrentYear"
         />
         <DxColumn
           :width="120"
@@ -167,7 +167,7 @@
           data-type="number"
           caption="Gangguan"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberGangguanCurrentMonthCurrentYear"
         />
         <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
           <DxColumn
@@ -627,7 +627,100 @@
       </DxSummary>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              type: null,
+              tahun: lastYear,
+              bulan: currentMonth
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberKeluhanCurrentMonthLastYear="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              type: 'keluhan',
+              tahun: lastYear,
+              bulan: currentMonth
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberGangguanCurrentMonthLastYear="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              type: 'gangguan',
+              tahun: lastYear,
+              bulan: currentMonth
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberKeluhanCurrentMonthCurrentYear="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              type: 'keluhan',
+              tahun: lastYear,
+              bulan: currentMonth
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberGangguanCurrentMonthCurrentYear="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              type: 'gangguan',
+              tahun: lastYear,
+              bulan: currentMonth
+            })
+          "
+        >
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -639,13 +732,31 @@
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer">
+        <p
+          class="text-right"
+          @click="
+            setParameterRequest({
+              type: null,
+              tahun: lastYear,
+              bulan: currentMonth
+            })
+          "
+        >
           {{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p
+          class="text-left"
+          @click="
+            setParameterRequest({
+              type: null,
+              tahun: lastYear,
+              bulan: currentMonth
+            })
+          "
+        >
           {{ data.text }}
         </p>
       </template>
@@ -714,7 +825,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_uid"
             caption="UID/UIW"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -723,7 +834,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_up3"
             caption="UP3"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -732,7 +843,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_ulp"
             caption="ULP"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -765,7 +876,7 @@
           />
           <DxColumn
             :width="150"
-            data-field=""
+            data-field="alamat_pelapor"
             caption="Alamat Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -773,7 +884,7 @@
           />
           <DxColumn
             :width="150"
-            data-field=""
+            data-field="no_telp_pelapor"
             caption="No Telp Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -781,7 +892,7 @@
           />
           <DxColumn
             :width="150"
-            data-field=""
+            data-field="keterangan_pelapor"
             caption="Keterangan Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -789,7 +900,7 @@
           />
           <DxColumn
             :width="150"
-            data-field=""
+            data-field="penyebab"
             caption="Penyebab"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -807,7 +918,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_issuetype"
             caption="Jenis Gangguan"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -816,25 +927,25 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="durasi_response_time"
             caption="Durasi Response Time"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="durasi_recovery_time"
             caption="Durasi Recovery Time"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_lapor"
             caption="Tgl Lapor"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -864,6 +975,12 @@
               {{ data.text }}
             </p>
           </template>
+
+          <template #formatTime="{ data }">
+            <p class="!text-right cursor-pointer">
+              {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+            </p>
+          </template>
         </DxDataGrid>
       </div>
     </div>
@@ -876,17 +993,17 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">UID/UIW:</h3>
-          <InputText :readonly="true" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_uid" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">UP3:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_up3" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">ULP:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -906,22 +1023,41 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
-          <InputText :readonly="true" value="" type="textarea" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.alamat_pelapor"
+            type="textarea"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.no_telp_pelapor"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
-          <InputText :readonly="true" value="" type="textarea" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.keterangan_pelapor"
+            type="textarea"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
-          <InputText :readonly="true" type="textarea" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            type="textarea"
+            :value="dataSubSelected?.penyebab"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -931,22 +1067,42 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Jenis Gangguan:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.nama_issuetype"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_response_time)
+                ? formatWaktu(dataSubSelected?.durasi_response_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_recovery_time)
+                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" class-name="flex-1" />
         </div>
       </div>
     </div>
@@ -990,6 +1146,7 @@ import {
   exportDetailToPDF,
   exportDetailToXLSX
 } from '@/report/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -1009,6 +1166,7 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
 const reportMeta = ref({
   regional: { id: 0, name: 'Semua Regional' },
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -1021,6 +1179,21 @@ const reportMeta = ref({
   currentYear: currentYear.value,
   lastYear: lastYear.value
 })
+const parameterRequest = ref<any>({
+  type: null,
+  tahun: new Date().getFullYear(),
+  bulan: new Date().getMonth()
+})
+
+const setParameterRequest = (data: any) => {
+  parameterRequest.value = data
+  const parameter = parameterRequest.value
+  if (parameter.type != null) {
+    agreeToShowDialog.value = true
+  } else {
+    agreeToShowDialog.value = false
+  }
+}
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -1041,26 +1214,31 @@ const onExportingDetail = (e: any) => {
 }
 
 const getDetail = async () => {
-  const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
   const query = {
-    dateFrom: dateValue[0]
+    bulan: parameterRequest.value.bulan,
-      ? dateValue[0].split('-').reverse().join('-')
+    tahun: parameterRequest.value.tahun,
-      : new Date().toISOString().slice(0, 10),
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
-    dateTo: dateValue[1]
-      ? dateValue[1].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
   loadingSubData.value = true
-  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+  await requestGraphQl(
+    parameterRequest.value.type == 'gangguan'
+      ? queries.monalisa.laporan.bulanan.kpiBulananGangguanDetail
+      : queries.monalisa.laporan.bulanan.kpiBulananKeluhanDetail,
+    query
+  )
     .then((result) => {
       if (result.data.data != undefined) {
-        dataSub.value = result.data.data.detailKeluhanAll
+        if (parameterRequest.value.type == 'gangguan') {
+          dataSub.value = result.data.data.detailKpiBulananGangguan
+        } else {
+          dataSub.value = result.data.data.detailKpiBulananKeluhan
+        }
       } else {
         dataSub.value = []
       }
@@ -1082,8 +1260,10 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
+  if (agreeToShowDialog.value) {
     getDetail()
   }
+}
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue

@@ -142,70 +142,7 @@
 
       <DxColumn
         alignment="center"
-        :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
+        :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
-        css-class="custom-table-column"
-      >
-        <DxColumn
-          :width="120"
-          alignment="center"
-          data-field="total_keluhan_tahun_sebelumnya"
-          data-type="number"
-          caption="Keluhan"
-          css-class="custom-table-column"
-          name="keluhanBulanLalu"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="120"
-          alignment="center"
-          data-field="total_gangguan_tahun_sebelumnya"
-          data-type="number"
-          caption="Gangguan"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_keluhan_informasi_tahun_sebelumnya"
-            data-type="number"
-            caption="Keluhan"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_gangguan_informasi_tahun_sebelumnya"
-            data-type="number"
-            caption="Gangguan"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_informasi_tahun_sebelumnya"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-        </DxColumn>
-        <DxColumn
-          alignment="center"
-          caption="Total Komplain"
-          css-class="custom-table-column"
-          data-field="total_tahun_sebelumnya"
-          data-type="number"
-          cell-template="formatNumber"
-        />
-      </DxColumn>
-
-      <DxColumn
-        alignment="center"
-        :caption="`s.d ${getMonthName(currentMonth - 1)} ${currentYear}`"
         css-class="custom-table-column"
       >
         <DxColumn

src/utils/api/api.graphql.ts

@@ -2903,6 +2903,82 @@ export const queries = {
               komplain_pelanggan
             }
           }
+        `,
+        kpiBulananGangguanDetail: gql`
+          query detailKpiBulananGangguan(
+            $bulan: Int!
+            $tahun: Int!
+            $namaRegional: String!
+            $idUlp: Int!
+            $idUid: Int!
+            $idUp3: Int!
+          ) {
+            detailKpiBulananGangguan(
+              bulan: $bulan
+              tahun: $tahun
+              namaRegional: $namaRegional
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
+            ) {
+              id
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              no_laporan
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              penyebab
+              kode_gangguan
+              jenis_gangguan
+              durasi_response_time
+              durasi_recovery_time
+              waktu_lapor
+            }
+          }
+        `,
+        kpiBulananKeluhanDetail: gql`
+          query detailKpiBulananKeluhan(
+            $bulan: Int!
+            $tahun: Int!
+            $namaRegional: String!
+            $idUlp: Int!
+            $idUid: Int!
+            $idUp3: Int!
+          ) {
+            detailKpiBulananKeluhan(
+              bulan: $bulan
+              tahun: $tahun
+              namaRegional: $namaRegional
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
+            ) {
+              id
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              no_laporan
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              penyebab
+              nama_issuetype
+              nama_subissuetype
+              durasi_response_time
+              durasi_recovery_time
+              waktu_lapor
+            }
+          }
         `
       },
       kumulatif: {