Fix bug in login functionality

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue

@@ -3,175 +3,72 @@
     <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" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      :show-column-lines="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
       <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="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
-        :width="200"
+        css-class="custom-table-column" />
-        alignment="center"
+      <DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Keluhan" css-class="custom-table-column">
-        data-field="nama_posko"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        alignment="center"
-        caption="Jumlah dan Durasi RPT & RCT Keluhan"
-        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
+            <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
-              :width="150"
+              css-class="custom-table-column" />
-              alignment="center"
-              caption="a"
-              data-type="number"
-              data-field=""
-              css-class="custom-table-column"
-            />
           </DxColumn>
           <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
-            <DxColumn
+            <DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
-              :width="150"
+              css-class="custom-table-column" />
-              alignment="center"
-              caption="b"
-              data-type="number"
-              data-field=""
-              css-class="custom-table-column"
-            />
           </DxColumn>
           <DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
-            <DxColumn
+            <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
-              :width="150"
+              css-class="custom-table-column" />
-              alignment="center"
-              caption="c=a/b"
-              data-type="number"
-              data-field=""
-              css-class="custom-table-column"
-            />
           </DxColumn>
           <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
-            <DxColumn
+            <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
-              :width="150"
+              css-class="custom-table-column" />
-              alignment="center"
-              caption="d"
-              data-type="number"
-              data-field=""
-              css-class="custom-table-column"
-            />
           </DxColumn>
           <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
-            <DxColumn
+            <DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
-              :width="150"
+              css-class="custom-table-column" />
-              alignment="center"
-              caption="e"
-              data-type="number"
-              data-field=""
-              css-class="custom-table-column"
-            />
           </DxColumn>
           <DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
-            <DxColumn
+            <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
-              :width="150"
+              css-class="custom-table-column" />
-              alignment="center"
-              caption="f=d/e"
-              data-type="number"
-              data-field=""
-              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
+            <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
-              :width="150"
+              css-class="custom-table-column" />
-              alignment="center"
-              caption="a"
-              data-type="number"
-              data-field=""
-              css-class="custom-table-column"
-            />
           </DxColumn>
           <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
-            <DxColumn
+            <DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
-              :width="150"
+              css-class="custom-table-column" />
-              alignment="center"
-              caption="b"
-              data-type="number"
-              data-field=""
-              css-class="custom-table-column"
-            />
           </DxColumn>
           <DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
-            <DxColumn
+            <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
-              :width="150"
+              css-class="custom-table-column" />
-              alignment="center"
-              caption="c=a/b"
-              data-type="number"
-              data-field=""
-              css-class="custom-table-column"
-            />
           </DxColumn>
           <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
-            <DxColumn
+            <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
-              :width="150"
+              css-class="custom-table-column" />
-              alignment="center"
-              caption="d"
-              data-type="number"
-              data-field=""
-              css-class="custom-table-column"
-            />
           </DxColumn>
           <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
-            <DxColumn
+            <DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
-              :width="150"
+              css-class="custom-table-column" />
-              alignment="center"
-              caption="e"
-              data-type="number"
-              data-field=""
-              css-class="custom-table-column"
-            />
           </DxColumn>
           <DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
-            <DxColumn
+            <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
-              :width="150"
+              css-class="custom-table-column" />
-              alignment="center"
-              caption="f=d/e"
-              data-type="number"
-              data-field=""
-              css-class="custom-table-column"
-            />
           </DxColumn>
         </DxColumn>
       </DxColumn>
@@ -244,34 +141,39 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 const monalisaJumlahDurasiRptRctKeluhan = gql`
   query DaftarmonalisaJumlahDurasiRptRctKeluhan(
-    $regional: String
+    #$regional: String
-    $posko: Int
+    $idUlp: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
     $tahun: Int
   ) {
     monalisaJumlahDurasiRptRctKeluhan(
-      regional: $regional
+      #regional: $regional
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
       bulan: $bulan
       tahun: $tahun
     ) {
-      jumlah_keluhan_rct_bulan
+      id_uid
-      jumlah_keluhan_rct_sampai_bulan
+      nama_uid
-      jumlah_keluhan_rpt_bulan
+      id_up3
-      jumlah_keluhan_rpt_sampai_bulan
+      nama_up3
-      nama_posko
+      id_ulp
-      rct_keluhan_bulan
+      nama_ulp
-      rct_keluhan_sampai_bulan
+      total_durasi_response_time_bulan_ini
-      rpt_keluhan_bulan
+      count_durasi_response_time_bulan_ini
-      rpt_keluhan_sampai_bulan
+      avg_durasi_response_time_bulan_ini
-      total_rct_bulan
+      total_durasi_recovery_time_bulan_ini
-      total_rct_sampai_bulan
+      count_durasi_recovery_time_bulan_ini
-      total_rpt_bulan
+      avg_durasi_recovery_time_bulan_ini
-      total_rpt_sampai_bulan
+      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
     }
   }
 `
@@ -279,31 +181,24 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRpt
   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
 
   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.monalisaJumlahDurasiRptRctKeluhan.forEach((item: any) => {
+      data.value = queryResult.data.monalisaJumlahDurasiRptRctKeluhan
-        data.value = [
-          ...data.value,
-          {
-            ...item
-          }
-        ]
-      })
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue

@@ -3,104 +3,42 @@
     <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="200" alignment="center" data-field="nama_ulp" caption="Nama Unit"
-        alignment="center"
+        css-class="custom-table-column" />
-        data-field="nama_posko"
+      <DxColumn alignment="center" caption="Jumlah RPT Kali Keluhan" css-class="custom-table-column">
-        caption="Nama Unit"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        alignment="center"
-        caption="Jumlah RPT Kali Keluhan"
-        css-class="custom-table-column"
-      >
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
-            :width="150"
+            :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            data-field="jumlah_bulan"
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-            data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column" cell-template="percent" />
-            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="yoy_tahun_kemarin" data-type="number"
-            :width="150"
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            data-field="jumlah_tahun"
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-            data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column" cell-template="percent" />
-            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>
+      <template #percent="{ data }">
+        {{ data.text }}%
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -135,9 +73,9 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const tahunSekarang = ref(new Date().getFullYear())
+const currentYear = ref(new Date().getFullYear())
-const bulanSekarang = ref(new Date().getMonth())
+const currentMonth = ref(new Date().getMonth())
-const tahunLalu = ref(tahunSekarang.value - 1)
+const lastYear = ref(currentYear.value - 1)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -166,64 +104,63 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const monalisaRecoveryTimeKeluhan = gql`
+const monalisaResponseTimeKeluhan = gql`
-  query DaftarmonalisaRecoveryTimeKeluhan(
+  query DaftarmonalisaResponseTimeKeluhan(
-    $regional: regional
+    #$regional: regional
-    $posko: Int
+    $idUlp: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
     $tahun: Int
   ) {
-    monalisaRecoveryTimeKeluhan(
+    monalisaResponseTimeKeluhan(
-      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
     }
   }
 `
-const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
+const { onResult, onError, loading, refetch } = useQuery(monalisaResponseTimeKeluhan, {
   regional: 0,
-  posko: 0,
+  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
+  currentMonth.value = bulan.id
-  tahunSekarang.value = tahun.id
+  currentYear.value = tahun.id
-  tahunLalu.value = tahun.id - 1
+  lastYear.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.monalisaRecoveryTimeKeluhan.forEach((item: any) => {
+      data.value = queryResult.data.monalisaResponseTimeKeluhan
-        data.value = [
-          ...data.value,
-          {
-            ...item
-          }
-        ]
-      })
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)