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

src/components/Form/FiltersType/Type4.vue

@@ -1,7 +1,15 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-import { selectedUid, selectedUp3Ulp, selectedUlp, itemsUid, itemsUp3, itemsUlp } from './reference'
+import {
+  selectedUid,
+  selectedUp3Ulp,
+  selectedUlp,
+  itemsUid,
+  itemsUp3,
+  itemsUlp,
+  fetchUid
+} from './reference'
 import { computed, onMounted, ref } from 'vue'
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -27,7 +35,7 @@ const data = ref({
   up3: uppp.value,
   ulp: ulp.value,
   periode: '',
-  jenisLaporan: ''
+  jenisLaporan: jenisLaporan.value[0]
 })
 const setUid = (value: any) => {
   uid.value = value
@@ -51,7 +59,7 @@ const setUlp = (value: any) => {
 
 onMounted(() => {
   emit('update:filters', data.value)
-  // fetchUid()
+  fetchUid()
 })
 </script>
 
@@ -78,11 +86,7 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Jenis Laporan:</label>
 
-      <Select
+      <Select @update:selected="(value) => (data.jenisLaporan = value)" :data="jenisLaporan" />
-        @update:selected="(value) => (data.jenisLaporan = value)"
-        :data="jenisLaporan"
-        :placeholder="'Semua Jenis Laporan'"
-      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">

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

@@ -20,7 +20,7 @@ import { Anomali_LAPPGP_LPT, Anomali_LAPPGP_LPP } from '../.'
 import { useQuery } from '@vue/apollo-composable'
 import { Type4 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 
@@ -44,50 +44,58 @@ const filters = ref({
   up3: 0
 })
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { ulp, uid, up3, jenisLaporan } = params
+  console.table('LAPPGP', jenisLaporan)
 
   const dateValue = params.periode.split(' s/d ')
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    namaRegional: ''
+  }
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  loadingData.value = true
-    filters.value.jenisLaporan.name == 'Laporan Berulang Unit'
+  await requestGraphQl(
-      ? queries.anomali.gangguan.petugasBerulang
+    jenisLaporan.name == 'Laporan Berulang Unit'
-      : filters.value.jenisLaporan.name == 'Laporan Rating Negatif'
+      ? queries.anomali.gangguan.unitBerulang
-        ? queries.anomali.gangguan.petugasRatingNegatif
+      : jenisLaporan.name == 'Laporan Rating Negatif'
-        : queries.anomali.gangguan.petugasSkipStep,
+        ? queries.anomali.gangguan.unitRatingNegatif
-    {
+        : queries.anomali.gangguan.unitSkipStep,
-      namaRegional: '',
+    query
-      // dateFrom: dateValue[0]
-      //   ? dateValue[0].split('-').reverse().join('-')
-      //   : new Date().toISOString().slice(0, 10),
-      // dateTo: dateValue[1]
-      //   ? dateValue[1].split('-').reverse().join('-')
-      //   : new Date().toISOString().slice(0, 10),
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
   )
-
+    .then((result) => {
-  onResult((queryResult) => {
+      if (result.data.data != undefined) {
-    if (queryResult.data != undefined) {
+        if (jenisLaporan.name == 'Laporan Berulang Unit') {
-      if (jenisLaporan.name == 'Laporan Berulang Unit') {
+          data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitBerulang
-        data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasBerulang
+        } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
-      } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
+          data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitRatingNegatif
-        data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasRatingNegatif
+        } else {
+          data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitSkipStep
+        }
       } else {
-        data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasSkipStep
+        data.value = []
       }
-    }
+    })
-    console.log(queryResult.data)
+    .catch((err) => {
-  })
+      console.error(err)
-  onError((error) => {
+    })
-    console.log(error)
+    .finally(() => {
-  })
+      loadingData.value = false
-
+    })
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
 }
 
 onMounted(() => {

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

@@ -18,6 +18,7 @@
     column-resizing-mode="widget"
     :word-wrap-enabled="true"
   >
+    <DxGrouping auto-expand-all="false" expand-mode="rowClick" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -36,6 +37,37 @@
       css-class="custom-table-column"
       cell-template="formatText"
     />
+    <!-- <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field=""
+      caption="Semua Unit"
+      css-class="custom-table-column"
+      :group-index="0"
+    />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_uid"
+      caption="UID"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_uid"
+    />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_up3"
+      caption="UP3"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_up3"
+    /> -->
     <DxColumn
       :width="170"
       alignment="center"
@@ -178,6 +210,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGrouping,
   DxPaging,
   DxScrolling,
   DxSearchPanel,

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

@@ -19,7 +19,7 @@
     :word-wrap-enabled="true"
     :data-source="data"
   >
-    <DxGrouping expand-mode="rowClick" />
+    <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -50,15 +50,36 @@
       cell-template="formatText"
     />
     <DxColumn
-      :width="170"
       alignment="center"
-      data-field="nama_ulp"
+      :min-width="170"
-      caption="Nama Unit"
+      data-type="text"
+      data-field=""
+      caption="Semua Unit"
       css-class="custom-table-column"
-      cell-template="formatText"
-      name="namaUnit"
       :group-index="0"
     />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_uid"
+      caption="UID"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_uid"
+    />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_up3"
+      caption="UP3"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_up3"
+    />
     <DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
       <DxColumn
         :width="170"

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

@@ -20,7 +20,7 @@ import Filters from '@/components/Form/Filters.vue'
 import { Anomali_LAPPGU_LPP, Anomali_LAPPGU_LPT } from '../.'
 import { useQuery } from '@vue/apollo-composable'
 import { onMounted, ref, watch } from 'vue'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 
@@ -44,50 +44,58 @@ const filters = ref({
   up3: 0
 })
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { ulp, uid, up3, jenisLaporan } = params
+  console.table('LAPPGU', jenisLaporan)
 
   const dateValue = params.periode.split(' s/d ')
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    namaRegional: ''
+  }
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  loadingData.value = true
-    filters.value.jenisLaporan.name == 'Laporan Berulang Unit'
+  await requestGraphQl(
+    jenisLaporan.name == 'Laporan Berulang Unit'
       ? queries.anomali.gangguan.unitBerulang
-      : filters.value.jenisLaporan.name == 'Laporan Rating Negatif'
+      : jenisLaporan.name == 'Laporan Rating Negatif'
         ? queries.anomali.gangguan.unitRatingNegatif
         : queries.anomali.gangguan.unitSkipStep,
-    {
+    query
-      namaRegional: '',
-      // dateFrom: dateValue[0]
-      //   ? dateValue[0].split('-').reverse().join('-')
-      //   : new Date().toISOString().slice(0, 10),
-      // dateTo: dateValue[1]
-      //   ? dateValue[1].split('-').reverse().join('-')
-      //   : new Date().toISOString().slice(0, 10),
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
   )
-
+    .then((result) => {
-  onResult((queryResult) => {
+      if (result.data.data != undefined) {
-    if (queryResult.data != undefined) {
+        if (jenisLaporan.name == 'Laporan Berulang Unit') {
-      if (jenisLaporan.name == 'Laporan Berulang Unit') {
+          data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitBerulang
-        data.value = queryResult.data.anomaliPenangananPengaduanGangguanUnitBerulang
+        } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
-      } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
+          data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitRatingNegatif
-        data.value = queryResult.data.anomaliPenangananPengaduanGangguanUnitRatingNegatif
+        } else {
+          data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitSkipStep
+        }
       } else {
-        data.value = queryResult.data.anomaliPenangananPengaduanGangguanUnitSkipStep
+        data.value = []
       }
-    }
+    })
-  })
+    .catch((err) => {
-
+      console.error(err)
-  onError((error) => {
+    })
-    console.log(error)
+    .finally(() => {
-  })
+      loadingData.value = false
-
+    })
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
 }
 
 onMounted(() => {

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

@@ -18,6 +18,7 @@
     column-resizing-mode="widget"
     :word-wrap-enabled="true"
   >
+    <DxGrouping auto-expand-all="false" expand-mode="rowClick" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -36,6 +37,37 @@
       css-class="custom-table-column"
       cell-template="formatText"
     />
+    <!-- <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field=""
+      caption="Semua Unit"
+      css-class="custom-table-column"
+      :group-index="0"
+    />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_uid"
+      caption="UID"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_uid"
+    />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_up3"
+      caption="UP3"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_up3"
+    /> -->
     <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
       <DxColumn
         :width="170"
@@ -116,6 +148,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGrouping,
   DxPaging,
   DxScrolling,
   DxSearchPanel,

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

@@ -19,7 +19,7 @@
     column-resizing-mode="widget"
     :word-wrap-enabled="true"
   >
-    <DxGrouping expand-mode="rowClick" />
+    <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -29,7 +29,6 @@
       :show-indicator="showIndicator"
       :show-pane="showPane"
       :shading="shading"
-      v-if="loading"
       v-model:visible="loading"
       :enabled="true"
     />
@@ -49,16 +48,38 @@
       css-class="custom-table-column"
       cell-template="formatText"
     />
+
     <DxColumn
-      :width="170"
       alignment="center"
-      data-field="nama_ulp"
+      :min-width="170"
-      caption="Nama Unit"
+      data-type="text"
-      name="namaUnit"
+      data-field=""
+      caption="Semua Unit"
       css-class="custom-table-column"
-      cell-template="formatText"
       :group-index="0"
     />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_uid"
+      caption="UID"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_uid"
+    />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_up3"
+      caption="UP3"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_up3"
+    />
     <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
         <DxColumn

src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue

@@ -1,10 +1,17 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type4 @update:filters="(value) => filters = value" />
+    <Type4
-    </Filters>
+      @update:filters="(value) => (filters = value)"
+      :jenis-laporan="[
+        { id: 1, name: 'Laporan Berulang Unit' },
+        { id: 2, name: 'Laporan Rating Negatif' },
+        { id: 3, name: 'Laporan Skip Step' }
+      ]"
+    />
+  </Filters>
 
-    <Anomali_LAPPKU_LPT :data="data" />
+  <Anomali_LAPPKU_LPT :data="data" :loading="loadingData" />
-    <Anomali_LAPPKU_LPP :data="data" />
+  <Anomali_LAPPKU_LPP :data="data" />
 </template>
 
 <script setup lang="ts">
@@ -14,66 +21,76 @@ import { Anomali_LAPPKU_LPT, Anomali_LAPPKU_LPP } from '../.'
 import { Type4 } from '@/components/Form/FiltersType'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 const data = ref<any[]>([])
+const dataSub = ref<any[]>([])
+const dataSelected = ref<any>()
+const dataSubSelected = ref<any>()
+const dialogDetail = ref(false)
+const closedialogDetail = () => (dialogDetail.value = false)
+const loadingData = ref(false)
+const loadingSubData = ref(false)
 
-const GET_laporanCheckInCheckOut = gql`
+const filters = ref({
-  query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+  jenisLaporan: {
-    laporanCheckInCheckOut(
+    id: 1,
-      dateFrom: $dateFrom
+    name: 'Laporan Berulang Unit'
-      dateTo: $dateTo
+  },
-      posko: $posko
+  ulp: 0,
-      idUid: $idUid
+  uid: 0,
-      idUp3: $idUp3
+  up3: 0
-    ) {
+})
-    avg_durasi_wo_gangguan_individual
+
-    avg_durasi_wo_penugasan_khusus
+const resetData = () => {
-    avg_rct_wo_gangguan_individual
+  data.value = []
-    avg_rpt_wo_gangguan_individual
+  dataSub.value = []
-    jumlah_wo_gangguan_individual
+}
-    jumlah_wo_penugasan_khusus
+
-    personil_yantek
+const filterData = async (params: any) => {
-    user_regu
+  resetData()
-    }
+  const { ulp, uid, up3, jenisLaporan } = params
+  console.table('LAPPKU', jenisLaporan)
+  const dateValue = params.periode.split(' s/d ')
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    namaRegional: ''
   }
-`
+
-const filterData = (params: any) => {
+  loadingData.value = true
-    const { posko, uid, up3 } = params
+  await requestGraphQl(
-    const dateValue = params.periode.split(' s/d ')
+    jenisLaporan.name == 'Laporan Berulang Unit'
-    refetch({
+      ? queries.anomali.keluhan.unitBerulang
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      : jenisLaporan.name == 'Laporan Rating Negatif'
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        ? queries.anomali.keluhan.unitRatingNegatif
-        posko: posko ? posko.id : "",
+        : queries.anomali.keluhan.unitSkipStep,
-        idUid: uid ? uid.id : 0,
+    query
-        idUp3: up3 ? up3.id : 0
+  )
-    })
+    .then((result) => {
-    onResult((queryResult) => {
+      if (result.data.data != undefined) {
-        if (queryResult.data != undefined) {
+        if (jenisLaporan.name == 'Laporan Berulang Unit') {
-            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+          data.value = result.data.data.anomaliLaporanPenangananPengaduanKeluhanUnitBerulang
-                data.value = [
+        } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
-                    ...data.value,
+          data.value = result.data.data.anomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif
-                    {
+        } else {
-                        ...item,
+          data.value = result.data.data.anomaliLaporanPenangananPengaduanKeluhanUnitSkipStep
-                    }
-                ]
-            })
         }
-        console.log(queryResult.data)
+      } else {
-        console.log(queryResult.loading)
+        data.value = []
-        console.log(queryResult.networkStatus)
+      }
     })
-    onError((error) => {
+    .catch((err) => {
-        console.log(error)
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
     })
 }
-const { onResult, onError, loading, refetch } = useQuery(
-    GET_laporanCheckInCheckOut,
-    {
-        dateFrom: new Date().toISOString().slice(0, 10),
-        dateTo: new Date().toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
-    }
-)
-const filters = ref()
 </script>

src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue

@@ -4,6 +4,7 @@
   </div>
   <DxDataGrid
     ref="dataGridRef"
+    :data-source="data"
     :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :show-column-lines="true"
@@ -17,6 +18,7 @@
     column-resizing-mode="widget"
     :word-wrap-enabled="true"
   >
+    <DxGrouping auto-expand-all="false" expand-mode="rowClick" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -26,7 +28,6 @@
       :show-indicator="showIndicator"
       :show-pane="showPane"
       :shading="shading"
-      v-if="loading"
       v-model:visible="loading"
       :enabled="true"
     />
@@ -40,18 +41,20 @@
 
     <DxColumn
       alignment="center"
-      data-field=""
+      data-field="nama_ulp"
       caption="Nama Unit"
       css-class="custom-table-column"
+      cell-template="formatText"
     />
     <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="wo_total"
         data-type="number"
         caption="a"
         css-class="custom-table-column"
+        cell-template="formatNumber"
       />
     </DxColumn>
     <DxColumn
@@ -62,10 +65,11 @@
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="total_anomali"
         data-type="number"
         caption="b"
         css-class="custom-table-column"
+        cell-template="formatNumber"
       />
     </DxColumn>
     <DxColumn
@@ -76,12 +80,45 @@
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="persen_anomali_pln_mobile_marking"
         data-type="number"
         caption="c=b/a"
         css-class="custom-table-column"
+        :calculate-display-value="
+          (rowData: any) => (rowData.total_anomali / rowData.wo_total) * 100
+        "
+        cell-template="formatPercentage"
       />
     </DxColumn>
+    <template #formatNumber="{ data }">
+      <p class="text-right cursor-pointer">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatPercentage="{ data }">
+      <p class="text-right cursor-pointer">
+        {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
+      </p>
+    </template>
+
+    <template #formatText="{ data }">
+      <p class="text-left cursor-pointer">
+        {{ data.text }}
+      </p>
+    </template>
+
+    <template #formatTime="{ data }">
+      <p class="!text-right">
+        {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+      </p>
+    </template>
   </DxDataGrid>
 </template>
 
@@ -91,6 +128,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
@@ -103,12 +141,18 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { computed, ref } from 'vue'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const props = defineProps({
-  data: Array as () => any[]
+  data: Array as () => any[],
+  loading: {
+    type: Boolean,
+    default: false
+  }
 })
 const data = computed(() => props.data)
 const loading = ref(false)

src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue

@@ -4,6 +4,7 @@
   </div>
   <DxDataGrid
     ref="dataGridRef"
+    :data-source="data"
     :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :show-column-lines="true"
@@ -18,6 +19,7 @@
     column-resizing-mode="widget"
     :word-wrap-enabled="true"
   >
+    <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -27,7 +29,6 @@
       :show-indicator="showIndicator"
       :show-pane="showPane"
       :shading="shading"
-      v-if="loading"
       v-model:visible="loading"
       :enabled="true"
     />
@@ -42,59 +43,96 @@
     <DxColumn
       :width="170"
       alignment="center"
-      data-field=""
+      data-field="nama_ulp"
       caption="Nama Unit"
       css-class="custom-table-column"
+      cell-template="formatText"
+    />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field=""
+      caption="Semua Unit"
+      css-class="custom-table-column"
+      :group-index="0"
+    />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_uid"
+      caption="UID"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_uid"
+    />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_up3"
+      caption="UP3"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_up3"
     />
     <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="wo_cc123"
           data-type="number"
           caption="a"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="wo_pln_mobile"
           data-type="number"
           caption="b"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="wo_loket"
           data-type="number"
           caption="c"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="wo_lainnya"
           data-type="number"
           caption="d"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="wo_total"
           data-type="number"
           caption="e=a+b+c+d"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
     </DxColumn>
@@ -107,30 +145,33 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="total_anomali"
           data-type="number"
           caption="f"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="anomali_cc123"
           data-type="number"
           caption="g"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="total_anomali"
           data-type="number"
           caption="h=f+g"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
     </DxColumn>
@@ -144,33 +185,180 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="persen_anomali_pln_mobile"
           data-type="number"
           caption="i=f/e"
           css-class="custom-table-column"
+          cell-template="formatPercentage"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="persen_anomali_cc123"
           data-type="number"
           caption="j=g/e"
           css-class="custom-table-column"
+          cell-template="formatPercentage"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="persen_anomali_total"
           data-type="number"
           caption="k=i+j"
           css-class="custom-table-column"
+          :calculate-display-value="
+            (rowData: any) => rowData.persen_anomali_pln_mobile + rowData.persen_anomali_cc123
+          "
+          cell-template="formatPercentage"
         />
       </DxColumn>
     </DxColumn>
+
+    <template #formatNumber="{ data }">
+      <p class="text-right cursor-pointer">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatPercentage="{ data }">
+      <p class="text-right cursor-pointer">
+        {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
+      </p>
+    </template>
+
+    <template #formatText="{ data }">
+      <p class="text-left cursor-pointer">
+        {{ data.text }}
+      </p>
+    </template>
+
+    <template #formatTime="{ data }">
+      <p class="!text-right">
+        {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+      </p>
+    </template>
+
+    <DxSummary>
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="wo_cc123"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="wo_pln_mobile"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="wo_loket"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="wo_lainnya"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="wo_total"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="anomali_pln_mobile_marking"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="anomali_cc123_marking"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="total_anomali_marking"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="persen_anomali_cc123_marking"
+        summary-type="avg"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatPercentage(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="persen_anomali_pln_mobile"
+        summary-type="avg"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatPercentage(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="persen_anomali_total"
+        summary-type="avg"
+        css-class="!text-right"
+        :calculate-custom-summary="
+          (options: any) => {
+            if (options.summaryProcess === 'start') {
+              options.totalValue = 0
+              options.count = 0
+            }
+            if (options.summaryProcess === 'calculate') {
+              if (options.value) {
+                options.totalValue += options.value
+                options.count++
+              }
+            }
+            if (options.summaryProcess === 'finalize') {
+              return options.totalValue / options.count
+            }
+          }
+        "
+        :calculate-display-value="
+          (rowData: any) => rowData.persen_anomali_pln_mobile + rowData.persen_anomali_cc123
+        "
+        :customize-text="(e: any) => formatPercentage(e.value)"
+      />
+    </DxSummary>
   </DxDataGrid>
 </template>
 
@@ -181,25 +369,34 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxSummary
 } 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 { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const loading = ref(false)
 const props = defineProps({
-  data: Array as () => any[]
+  data: Array as () => any[],
+  loading: {
+    type: Boolean,
+    default: false
+  }
 })
+const loading = computed(() => props.loading)
 const data = computed(() => props.data)
 
 const onExporting = (e: any) => {

src/components/Pages/Cico/LaporanCICO.vue

@@ -184,7 +184,7 @@
 
   <DetailDialog
     :open="dialogDetail"
-    title="Daftar Detail Jumlah WO Gangguan Individu"
+    title="Daftar Detail Penugasan Khusus"
     @on-close="closedialogDetail"
     :full-width="true"
   >
@@ -243,7 +243,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_uid"
             caption="UID/UIW"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -251,7 +251,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_up3"
             caption="UP3"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -259,7 +259,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_posko"
             caption="Posko"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -267,7 +267,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="media"
             caption="Sumber Lapor"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -275,7 +275,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="pembuat_laporan"
             caption="Created By"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -283,7 +283,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="dispatch_by"
             caption="Dispatch By"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -291,15 +291,15 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_dispatch"
             caption="Dispatch Time"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="user_regu"
             caption="User Regu"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -307,7 +307,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_regu"
             caption="Nama Regu"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -315,7 +315,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="personil_yantek"
             caption="Nama Petugas"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -323,7 +323,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="shift"
             caption="Shif"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -331,7 +331,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="check_in_petugas"
             caption="Check In Petugas"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -339,7 +339,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="no_laporan"
             caption="No Laporan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -347,7 +347,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_lapor"
             caption="Tgl Lapor"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -355,7 +355,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_dispatch"
             caption="Tgl Penugasan Baru"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -363,7 +363,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_perjalanan"
             caption="Tgl Dalam Perjalanan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -371,7 +371,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_response"
             caption="Tgl Pengerjaan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -379,7 +379,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_nyala_sementara"
             caption="Tgl Nyala Sementara"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -387,7 +387,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_nyala"
             caption="Tgl Nyala"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -395,7 +395,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_selesai"
             caption="Tgl Selesai"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -403,7 +403,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="durasi_waktu_response"
             caption="Durasi Perjalanan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -411,7 +411,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="durasi_wo"
             caption="Durasi WO"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -419,7 +419,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="check_out_petugas"
             caption="Check Out Petugas"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -427,39 +427,39 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="durasi_menit_response"
             caption="RPT"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="durasi_menit_recovery"
             caption="RCT"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="rating"
             caption="Rating"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="jml_pelanggan_padam"
             caption="Jml Pelanggan Padam"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="fasilitas"
             caption="Fasilitas"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -467,7 +467,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="sub_fasilitas"
             caption="Sub Fasilitas"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -475,7 +475,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="peralatan"
             caption="Peralatan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -483,7 +483,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="dampak_kerusakan"
             caption="Dampak Kerusakan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -491,7 +491,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="penyebab"
             caption="Penyebab"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -499,7 +499,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="kelompok_penyebab"
             caption="Kelompok Penyebab"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -507,7 +507,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="cuaca"
             caption="Cuaca"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -515,7 +515,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="keterangan_pelapor"
             caption="Keterangan Pelapor"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -523,7 +523,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="keterangan"
             caption="Keterangan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -531,15 +531,16 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="penyebab_padam"
             caption="Penyebab Padam"
             css-class="custom-table-column"
             cell-template="formatText"
+            :calculate-display-value="(item: any) => `${item.penyebab} - ${item.kelompok_penyebab}`"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tindakan"
             caption="Tindakan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -547,7 +548,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="status_akhir"
             caption="APKT Status"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -555,7 +556,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="referensi_marking"
             caption="Referensi Marking"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -563,10 +564,10 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="blth"
             caption="BLTH"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatNumber"
           />
 
           <template #formatText="{ data }">
@@ -587,202 +588,279 @@
       <div class="p-4 space-y-2 bg-white rounded-xl">
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">UID/UIW:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" 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="dataSubSelected" 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">Posko:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_posko" 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">Sumber Lapor:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.media" 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">Created By:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.pembuat_laporan"
+            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">Dispatch By:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.dispatch_by" 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">Dispatch Time:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.durasi_waktu_dispatch"
+            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">User Regu:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.user_regu" 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">Nama Regu:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_regu" 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">Nama Petugas:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.personil_yantek"
+            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">Shif:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.shift" 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">Check In Petugas:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.check_in_petugas"
+            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 Laporan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.no_laporan" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Penugasan Regu:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_dispatch"
+            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 Dalam Perjalanan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_perjalanan"
+            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 Pengerjaan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_perjalanan"
+            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 Nyala Sementara:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_nyala_sementara"
+            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 Nyala:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_nyala" 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 Selesai:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_selesai" 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 Perjalanan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.durasi_waktu_response"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi WO:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.durasi_wo" 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">Check Out Petugas:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.check_out_petugas"
+            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">RPT</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.durasi_menit_response"
+            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">RCT</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.durasi_menit_recovery"
+            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">Rating</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.rating" 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">Jml Pelanggan Padam:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.jml_pelanggan_padam"
+            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">Fasilitas:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.fasilitas" 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">Sub Fasilitas:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.sub_fasilitas" 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">Peralatan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.peralatan" 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">Dampak Kerusakan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.dampak_kerusakan"
+            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" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.penyebab" 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">Kelompok Penyebab:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.kelompok_penyebab"
+            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">Cuaca:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.cuaca" 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="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.keterangan_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:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.keterangan" 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 Padam:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="`${dataSubSelected?.penyebab} - ${dataSubSelected?.kelompok_penyebab}`"
+            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">Tindakan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.tindakan" 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">PKT Status:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">APKT Status:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.status_akhir" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.referensi_marking"
+            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">BLTH</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.blth" class-name="flex-1" />
         </div>
       </div>
     </div>
@@ -813,7 +891,7 @@ import { Workbook } from 'exceljs'
 import Filters from '@/components/Form/Filters.vue'
 import { Type1 } from '@/components/Form/FiltersType'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
@@ -838,10 +916,9 @@ const loadingSubData = ref(false)
 
 const closedialogDetail = () => (dialogDetail.value = false)
 
-const getDetail = () => {
+const getDetail = async () => {
-  loadingSubData.value = true
   const dateValue = filters.value.periode.split(' s/d ')
-  const ref = dataSelected.value
+  const selected = dataSelected.value
 
   const query = {
     dateFrom: dateValue[0]
@@ -850,29 +927,27 @@ const getDetail = () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    posko: ref.id_posko,
+    idPosko: selected?.id_posko ? selected?.id_posko : 0,
-    idUid: ref.id_uid,
+    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: ref.id_up3
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    personilYantek: selected?.personil_yantek ? selected?.personil_yantek : ''
   }
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  loadingSubData.value = true
-    queries.gangguan.rekap.gangguanAllDetail,
+  await requestGraphQl(queries.cico.laporanCheckInCheckOutDetail, query)
-    query
+    .then((result) => {
-  )
+      if (result.data.data != undefined) {
-
+        dataSub.value = result.data.data.detailCheckInCheckOut
-  onResult((queryResult) => {
+      } else {
-    if (queryResult.data != undefined) {
+        dataSub.value = []
-      dataSub.value = queryResult.data.detailGangguan
+      }
-    }
+    })
-  })
+    .catch((err) => {
-
+      console.error(err)
-  onError((error) => {
+    })
-    console.log(error)
+    .finally(() => {
-  })
+      loadingSubData.value = false
-
+    })
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -920,23 +995,27 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
+    showDetail()
   }
-  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSubSelected.value = selectedRowsData[0]
   }
-  dataSubSelected.value = data
-  console.log(data)
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const { onResult, onError, loading, refetch } = useQuery(queries.cico.laporanCheckInCheckOut, {
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -946,20 +1025,23 @@ const filterData = (params: any) => {
     idPosko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
+  loadingData.value = true
-    if (queryResult.data != undefined) {
+  await requestGraphQl(queries.cico.laporanCheckInCheckOut, query)
-      data.value = queryResult.data.laporanCheckInCheckOut
+    .then((result) => {
-    }
+      if (result.data.data != undefined) {
-    console.log(queryResult.data)
+        data.value = result.data.data.laporanCheckInCheckOut
-  })
+      } else {
-  onError((error) => {
+        data.value = []
-    console.log(error)
+      }
-  })
+    })
-  watch(loading, (value) => {
+    .catch((err) => {
-    loadingData.value = value
+      console.error(err)
-  })
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const filters = ref()

src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue

@@ -19,6 +19,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping auto-expand-all="false" expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -171,6 +172,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,

src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue

@@ -69,7 +69,6 @@
         css-class="custom-table-column"
         cell-template="formatText"
         :group-index="0"
-        v-if="filters?.uid ? filters?.uid.id == 0 : 0"
       />
       <DxColumn
         :width="150"
@@ -78,7 +77,7 @@
         caption="Regional"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="filters?.uid.id != 0 ? 0 : 1"
+        :group-index="1"
       />
       <DxColumn
         :width="150"
@@ -87,7 +86,7 @@
         caption="UID"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="filters?.uid.id != 0 ? 0 : 2"
+        :group-index="2"
       />
       <DxColumn
         :width="150"
@@ -96,7 +95,7 @@
         caption="UP3"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="filters?.uid.id != 0 ? 0 : 3"
+        :group-index="3"
       />
       <!-- <DxColumn
         :width="150"
@@ -1082,6 +1081,7 @@ import {
   exportDetailToPDF,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_ALL'
+import { getDataRowGroup } from '@/utils/data'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -1109,59 +1109,44 @@ const reportMeta = ref({
   periode: ''
 })
 
-const getDataRowGroup = (data: any): any => {
-  if (data.items) {
-    if (Array.isArray(data.items)) {
-      return getDataRowGroup(data.items)
-    } else {
-      if (data.items.collapsedItems) {
-      }
-    }
-  } else if (data.collapsedItems) {
-    return {}
-  } else {
-    return {}
-  }
-}
-
 const onCellClicked = (e: any) => {
-  console.log('cell clicked', e)
-  //   console.log('group cell clicked', e.column.caption)
-  //   console.log('value', e.values[e.row.groupIndex])
   if (e.rowType == 'group') {
     groupDialog.value = true
     groupIndex.value = e.row.groupIndex
+
     setAgreementDialog(e.column.caption)
     const data = getDataRowGroup(e.data)
-    console.log('data', data)
+    console.table(data)
-    if (e.row.groupIndex == 0) {
+    groupData.value = data
-      //
-    } else if (e.row.groupIndex == 1) {
-      if (e.row.isExpanded) {
-        const data = e.data.items[0].collapsedItems[0].items[0]
-        groupData.value = data
-      } else {
-        const data = e.data.collapsedItems[0].items[0].items[0]
-        groupData.value = data
-      }
-    } else if (e.row.groupIndex == 2) {
-      if (e.row.isExpanded) {
-        const data = e.data.items[0].collapsedItems[0]
-        groupData.value = data
-      } else {
-        const data = e.data.collapsedItems[0].items[0]
-        groupData.value = data
-      }
-    } else if (e.row.groupIndex == 3) {
-      if (e.row.isExpanded) {
-        const data = e.data.items[0]
-        groupData.value = data
-      } else {
-        const data = e.data.collapsedItems[0]
-        groupData.value = data
-      }
-    }
     showDetail()
+    // if (e.row.groupIndex == 0) {
+    //   //
+    // } else if (e.row.groupIndex == 1) {
+    //   if (e.row.isExpanded) {
+    //     const data = e.data.items[0].collapsedItems[0].items[0]
+    //     groupData.value = data
+    //   } else {
+    //     const data = e.data.collapsedItems[0].items[0].items[0]
+    //     groupData.value = data
+    //   }
+    // } else if (e.row.groupIndex == 2) {
+    //   if (e.row.isExpanded) {
+    //     const data = e.data.items[0].collapsedItems[0]
+    //     groupData.value = data
+    //   } else {
+    //     const data = e.data.collapsedItems[0].items[0]
+    //     groupData.value = data
+    //   }
+    // } else if (e.row.groupIndex == 3) {
+    //   if (e.row.isExpanded) {
+    //     const data = e.data.items[0]
+    //     groupData.value = data
+    //   } else {
+    //     const data = e.data.collapsedItems[0]
+    //     groupData.value = data
+    //   }
+    // }
+    // showDetail()
   } else {
     groupDialog.value = false
   }
@@ -1267,12 +1252,28 @@ const getDetail = async () => {
     tanggal: ''
   }
   if (groupDialog.value) {
-    if (groupIndex.value == 0) {
+    // if (groupColumnCaption.value != 'Semua Unit') {
-      query = {
+    //   if (groupColumnCaption.value == 'Regional') {
-        ...query,
+    //     query = {
-        isSelesai: progressSelected.value
+    //       ...query,
-      }
+    //       namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
-    } else if (groupIndex.value == 1) {
+    //     }
+    //   } else if (groupColumnCaption.value == 'UID') {
+    //     query = {
+    //       ...query,
+    //       idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+    //       namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+    //     }
+    //   } else if (groupColumnCaption.value == 'UP3') {
+    //     query = {
+    //       ...query,
+    //       idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+    //       idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
+    //       namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+    //     }
+    //   }
+    // }
+    if (groupIndex.value == 1) {
       query = {
         ...query,
         namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''

src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue

@@ -1134,7 +1134,7 @@ import {
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_KTI'
 import { getMonthNumber } from '@/utils/texts'
-
+import { getDataRowGroup } from '@/utils/data'
 const client = apolloClient()
 provideApolloClient(client)
 const position = { of: '#data' }
@@ -1155,53 +1155,30 @@ const reportMeta = ref({
   posko: { id: 0, name: 'Semua Posko' },
   periode: ''
 })
-const groupIndex = ref(0)
 const groupDialog = ref(false)
 const groupData = ref<any>(null)
 
 const onCellClicked = (e: any) => {
-  console.log('cell clicked', e)
+  // if (e.rowType == 'group') {
-  //   console.log('group cell clicked', e.column.caption)
+  //   groupDialog.value = true
-  //   console.log('value', e.values[e.row.groupIndex])
+  //   if (e.row.groupIndex != 0) {
-  if (e.rowType == 'group') {
+  //     const data = getDataRowGroup(e.data)
-    groupDialog.value = true
+  //     console.table(data)
-    groupIndex.value = e.row.groupIndex
+  //     groupData.value = data
-    if (e.row.groupIndex == 0) {
+  //   }
-      //
+  //   showDetail()
-    } else if (e.row.groupIndex == 1) {
+  // } else {
-      if (e.row.isExpanded) {
+  //   groupDialog.value = false
-        const data = e.data.items[0].collapsedItems[0].items[0]
+  // }
-        groupData.value = data
-      } else {
-        const data = e.data.collapsedItems[0].items[0].items[0]
-        groupData.value = data
-      }
-    } else if (e.row.groupIndex == 2) {
-      if (e.row.isExpanded) {
-        const data = e.data.items[0].collapsedItems[0]
-        groupData.value = data
-      } else {
-        const data = e.data.collapsedItems[0].items[0]
-        groupData.value = data
-      }
-    } else if (e.row.groupIndex == 3) {
-      if (e.row.isExpanded) {
-        const data = e.data.items[0]
-        groupData.value = data
-      } else {
-        const data = e.data.collapsedItems[0]
-        groupData.value = data
-      }
-    }
-    showDetail()
-  } else {
-    groupDialog.value = false
-  }
 }
 
 const setMonth = (month: any) => {
   if (month != '') {
-    monthSelected.value = getMonthNumber(month)
+    if (getMonthNumber(month) == 0) {
+      monthSelected.value = null
+    } else {
+      monthSelected.value = getMonthNumber(month)
+    }
   } else {
     monthSelected.value = null
   }
@@ -1316,17 +1293,25 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
     is_transaksi_individual:
-      jenisTransaksi.length == 4
+      jenisTransaksi.length == 4 || jenisTransaksi.length == 0
         ? 0
         : jenisTransaksi.includes('Koreksi Transaksi Individual')
           ? 1
           : 2,
     is_cleansing_transaksi_tm:
-      jenisTransaksi.length == 4 ? 0 : jenisTransaksi.includes('Cleansing Traksaksi TM') ? 1 : 2,
+      jenisTransaksi.length == 4 || jenisTransaksi.length == 0
+        ? 0
+        : jenisTransaksi.includes('Cleansing Traksaksi TM')
+          ? 1
+          : 2,
     is_koreksi_transaksi_tm:
-      jenisTransaksi.length == 4 ? 0 : jenisTransaksi.includes('Koreksi Transaksi TM') ? 1 : 2,
+      jenisTransaksi.length == 4 || jenisTransaksi.length == 0
+        ? 0
+        : jenisTransaksi.includes('Koreksi Transaksi TM')
+          ? 1
+          : 2,
     is_koreksi_gangguan_dan_anev:
-      jenisTransaksi.length == 4
+      jenisTransaksi.length == 4 || jenisTransaksi.length == 0
         ? 0
         : jenisTransaksi.includes('Koreksi Kode Gangguan dan Anev')
           ? 1

src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue

@@ -195,7 +195,7 @@
       <DxColumn
         :width="170"
         alignment="center"
-        data-field="nama_ulp"
+        data-field="nama_unit_baru"
         caption="Nama ULP"
         css-class="custom-table-column !align-top"
         cell-template="formatText"

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

@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -46,16 +46,38 @@
       />
       <DxColumnFixing :enabled="true" />
 
-      <!-- <DxColumn
+      <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_ulp"
+        data-field="nama_regional"
-        caption="Nama Unit"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
-        name="namaUlp"
+        name="namaRegional"
-      /> -->
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_uid"
+        caption="UID"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
+      />
       <DxColumn
         alignment="center"
         :min-width="170"
@@ -179,6 +201,62 @@
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
+
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="mom_bulan_kemarin"
+          column="mom_bulan_kemarin"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="mom_bulan_ini"
+          column="mom_bulan_ini"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="persen_mom"
+          column="persen_mom"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="yoy_tahun_kemarin"
+          column="yoy_tahun_kemarin"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="yoy_tahun_ini"
+          column="yoy_tahun_ini"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="persen_yoy"
+          column="persen_yoy"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -211,6 +289,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
   DxGrouping,
   DxLoadPanel,
   DxPaging,

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

@@ -25,6 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping :context-menu-enabled="true" expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -44,7 +45,38 @@
         :allow-export-selected-data="false"
       />
       <DxColumnFixing :enabled="true" />
-
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="nama_regional"
+        caption="Regional"
+        css-class="custom-table-column"
+        :group-index="0"
+        name="namaRegional"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_uid"
+        caption="UIW"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
+      />
       <DxColumn
         alignment="center"
         data-field="nama_ulp"
@@ -180,6 +212,62 @@
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
+
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="mom_bulan_kemarin"
+          column="mom_bulan_kemarin"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="mom_bulan_ini"
+          column="mom_bulan_ini"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="persen_mom"
+          column="persen_mom"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="yoy_tahun_kemarin"
+          column="yoy_tahun_kemarin"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="yoy_tahun_ini"
+          column="yoy_tahun_ini"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="persen_yoy"
+          column="persen_yoy"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
       </DxSummary>
     </DxDataGrid>
   </div>
@@ -194,6 +282,8 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,

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

@@ -54,27 +54,35 @@
       />
       <DxColumn
         alignment="center"
+        :min-width="170"
+        data-type="text"
         data-field="nama_regional"
         caption="Regional"
         css-class="custom-table-column"
-        cell-template="formatText"
         :group-index="0"
+        name="namaRegional"
       />
       <DxColumn
         alignment="center"
-        data-field="nama_uid"
+        :min-width="170"
+        data-type="text"
+        data-field="id_uid"
         caption="UIW"
         css-class="custom-table-column"
-        cell-template="formatText"
         :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
       />
       <DxColumn
         alignment="center"
-        data-field="nama_up3"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
         caption="UP3"
         css-class="custom-table-column"
-        cell-template="formatText"
+        :group-index="1"
-        :group-index="2"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
         <DxColumn
@@ -151,6 +159,35 @@
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
+
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="jumlah_gangguan"
+          column="jumlah_gangguan"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="jumlah_informasi"
+          column="jumlah_informasi"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="total"
+          column="total"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
       </DxSummary>
     </DxDataGrid>
   </div>
@@ -463,6 +500,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
   DxGrouping,
   DxLoadPanel,
   DxPager,

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

@@ -24,7 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -53,6 +53,14 @@
         css-class="custom-table-column"
         cell-template="formatText"
       />
+      <DxColumn
+        alignment="center"
+        data-field=""
+        caption="NASIONAL"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        :group-index="0"
+      />
       <DxColumn
         alignment="center"
         data-field="nama_regional"
@@ -104,7 +112,7 @@
               alignment="center"
               caption="b"
               data-type="number"
-              data-field="jumlah_gangguan_rpt_bulan"
+              data-field="count_durasi_response_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -115,7 +123,7 @@
               alignment="center"
               caption="c=a/b"
               data-type="number"
-              data-field="rpt_gangguan_bulan"
+              data-field="avg_durasi_response_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -126,7 +134,7 @@
               alignment="center"
               caption="d"
               data-type="number"
-              data-field="total_rct_bulan"
+              data-field="total_durasi_recovery_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -137,7 +145,7 @@
               alignment="center"
               caption="e"
               data-type="number"
-              data-field="jumlah_gangguan_rct_bulan"
+              data-field="count_durasi_recovery_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -148,7 +156,7 @@
               alignment="center"
               caption="f=d/e"
               data-type="number"
-              data-field="rct_gangguan_bulan"
+              data-field="avg_durasi_recovery_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -176,7 +184,7 @@
               alignment="center"
               caption="b"
               data-type="number"
-              data-field="jumlah_gangguan_rpt_sampai_bulan"
+              data-field="count_durasi_response_time_tahun_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -187,7 +195,7 @@
               alignment="center"
               caption="c=a/b"
               data-type="number"
-              data-field="rpt_gangguan_sampai_bulan"
+              data-field="avg_durasi_response_time_tahun_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -209,7 +217,7 @@
               alignment="center"
               caption="e"
               data-type="number"
-              data-field="jumlah_gangguan_rct_sampai_bulan"
+              data-field="count_durasi_recovery_time_tahun_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -220,7 +228,7 @@
               alignment="center"
               caption="f=d/e"
               data-type="number"
-              data-field="rch_gangguan_sampai_bulan"
+              data-field="avg_durasi_recovery_time_tahun_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -242,8 +250,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="jumlah_gangguan_rpt_bulan"
+          show-in-column="count_durasi_response_time_bulan_ini"
-          column="jumlah_gangguan_rpt_bulan"
+          column="count_durasi_response_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -251,8 +259,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="rpt_gangguan_bulan"
+          show-in-column="avg_durasi_response_time_bulan_ini"
-          column="rpt_gangguan_bulan"
+          column="avg_durasi_response_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -260,8 +268,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="total_rct_bulan"
+          show-in-column="total_durasi_recovery_time_bulan_ini"
-          column="total_rct_bulan"
+          column="total_durasi_recovery_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -269,8 +277,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="jumlah_gangguan_rct_bulan"
+          show-in-column="count_durasi_recovery_time_bulan_ini"
-          column="jumlah_gangguan_rct_bulan"
+          column="count_durasi_recovery_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -278,8 +286,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="rct_gangguan_bulan"
+          show-in-column="avg_durasi_recovery_time_bulan_ini"
-          column="rct_gangguan_bulan"
+          column="avg_durasi_recovery_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -296,8 +304,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="jumlah_gangguan_rpt_sampai_bulan"
+          show-in-column="count_durasi_response_time_tahun_ini"
-          column="jumlah_gangguan_rpt_sampai_bulan"
+          column="count_durasi_response_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -305,8 +313,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="rpt_gangguan_sampai_bulan"
+          show-in-column="avg_durasi_response_time_tahun_ini"
-          column="rpt_gangguan_sampai_bulan"
+          column="avg_durasi_response_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -323,8 +331,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="jumlah_gangguan_rct_sampai_bulan"
+          show-in-column="count_durasi_recovery_time_tahun_ini"
-          column="jumlah_gangguan_rct_sampai_bulan"
+          column="count_durasi_recovery_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -332,8 +340,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="rch_gangguan_sampai_bulan"
+          show-in-column="avg_durasi_recovery_time_tahun_ini"
-          column="rch_gangguan_sampai_bulan"
+          column="avg_durasi_recovery_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -538,337 +546,5 @@ const filters = ref<any>({
 
 onMounted(() => {
   getMonthName(filters.value.bulan.id)
-  data.value = [
-    {
-      id: 0,
-      nama_regional: 'REGIONAL SUMKAL',
-      id_uid: 120,
-      nama_uid: 'WILAYAH SUMATERA UTARA',
-      id_up3: 12100,
-      nama_up3: 'UP3 PEMATANG SIANTAR',
-      id_ulp: 12102,
-      nama_ulp: 'ULP LIMA PULUH',
-      total_durasi_response_time_bulan_ini: 15239,
-      count_durasi_response_time_bulan_ini: 26,
-      avg_durasi_response_time_bulan_ini: 586.1153846153846,
-      total_durasi_recovery_time_bulan_ini: 31425,
-      count_durasi_recovery_time_bulan_ini: 26,
-      avg_durasi_recovery_time_bulan_ini: 1208.6538461538462,
-      total_durasi_response_time_tahun_ini: 353812,
-      count_durasi_response_time_tahun_ini: 746,
-      avg_durasi_response_time_tahun_ini: 474.2788203753351,
-      total_durasi_recovery_time_tahun_ini: 708488,
-      count_durasi_recovery_time_tahun_ini: 746,
-      avg_durasi_recovery_time_tahun_ini: 474.2788203753351
-    },
-    {
-      id: 1,
-      nama_regional: 'REGIONAL SULMAPANA',
-      id_uid: 41,
-      nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
-      id_up3: 412,
-      nama_up3: 'UP3 TERNATE',
-      id_ulp: 41230,
-      nama_ulp: 'ULP BACAN',
-      total_durasi_response_time_bulan_ini: 475280,
-      count_durasi_response_time_bulan_ini: 378,
-      avg_durasi_response_time_bulan_ini: 1257.3544973544974,
-      total_durasi_recovery_time_bulan_ini: 834379,
-      count_durasi_recovery_time_bulan_ini: 378,
-      avg_durasi_recovery_time_bulan_ini: 2207.3518518518517,
-      total_durasi_response_time_tahun_ini: 2353207,
-      count_durasi_response_time_tahun_ini: 2185,
-      avg_durasi_response_time_tahun_ini: 1076.982608695652,
-      total_durasi_recovery_time_tahun_ini: 3773486,
-      count_durasi_recovery_time_tahun_ini: 2034,
-      avg_durasi_recovery_time_tahun_ini: 1076.982608695652
-    },
-    {
-      id: 2,
-      nama_regional: 'REGIONAL JMB',
-      id_uid: 101,
-      nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
-      id_up3: 52150,
-      nama_up3: 'UP3 MAGELANG',
-      id_ulp: 52156,
-      nama_ulp: 'ULP PARAKAN',
-      total_durasi_response_time_bulan_ini: 1149446,
-      count_durasi_response_time_bulan_ini: 991,
-      avg_durasi_response_time_bulan_ini: 1159.8849646821393,
-      total_durasi_recovery_time_bulan_ini: 2064288,
-      count_durasi_recovery_time_bulan_ini: 991,
-      avg_durasi_recovery_time_bulan_ini: 2083.0353178607465,
-      total_durasi_response_time_tahun_ini: 11820004,
-      count_durasi_response_time_tahun_ini: 10220,
-      avg_durasi_response_time_tahun_ini: 1156.5561643835617,
-      total_durasi_recovery_time_tahun_ini: 19879614,
-      count_durasi_recovery_time_tahun_ini: 10215,
-      avg_durasi_recovery_time_tahun_ini: 1156.5561643835617
-    },
-    {
-      id: 3,
-      nama_regional: 'REGIONAL SULMAPANA',
-      id_uid: 31,
-      nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
-      id_up3: 31500,
-      nama_up3: 'UP3 TOLITOLI',
-      id_ulp: 31530,
-      nama_ulp: 'ULP BANGKIR',
-      total_durasi_response_time_bulan_ini: 52509,
-      count_durasi_response_time_bulan_ini: 52,
-      avg_durasi_response_time_bulan_ini: 1009.7884615384615,
-      total_durasi_recovery_time_bulan_ini: 96349,
-      count_durasi_recovery_time_bulan_ini: 52,
-      avg_durasi_recovery_time_bulan_ini: 1852.8653846153845,
-      total_durasi_response_time_tahun_ini: 13888593,
-      count_durasi_response_time_tahun_ini: 2300,
-      avg_durasi_response_time_tahun_ini: 6038.518695652174,
-      total_durasi_recovery_time_tahun_ini: 2188450,
-      count_durasi_recovery_time_tahun_ini: 2291,
-      avg_durasi_recovery_time_tahun_ini: 6038.518695652174
-    },
-    {
-      id: 4,
-      nama_regional: 'REGIONAL JMB',
-      id_uid: 103,
-      nama_uid: 'DISTRIBUSI JAWA TIMUR',
-      id_up3: 154,
-      nama_up3: 'UP3 SITUBONDO',
-      id_ulp: 51654,
-      nama_ulp: 'ULP WONOSARI',
-      total_durasi_response_time_bulan_ini: 1408665,
-      count_durasi_response_time_bulan_ini: 843,
-      avg_durasi_response_time_bulan_ini: 1671.0142348754448,
-      total_durasi_recovery_time_bulan_ini: 2183667,
-      count_durasi_recovery_time_bulan_ini: 843,
-      avg_durasi_recovery_time_bulan_ini: 2590.3523131672596,
-      total_durasi_response_time_tahun_ini: 11091744,
-      count_durasi_response_time_tahun_ini: 8376,
-      avg_durasi_response_time_tahun_ini: 1324.2292263610316,
-      total_durasi_recovery_time_tahun_ini: 17694880,
-      count_durasi_recovery_time_tahun_ini: 8237,
-      avg_durasi_recovery_time_tahun_ini: 1324.2292263610316
-    },
-    {
-      id: 5,
-      nama_regional: 'REGIONAL SUMKAL',
-      id_uid: 110,
-      nama_uid: 'WILAYAH ACEH',
-      id_up3: 116,
-      nama_up3: 'UP3 SIGLI',
-      id_ulp: 11662,
-      nama_ulp: 'ULP MEUREUDU',
-      total_durasi_response_time_bulan_ini: 762987,
-      count_durasi_response_time_bulan_ini: 735,
-      avg_durasi_response_time_bulan_ini: 1038.0775510204082,
-      total_durasi_recovery_time_bulan_ini: 1550302,
-      count_durasi_recovery_time_bulan_ini: 735,
-      avg_durasi_recovery_time_bulan_ini: 2109.2544217687073,
-      total_durasi_response_time_tahun_ini: 8107328,
-      count_durasi_response_time_tahun_ini: 8068,
-      avg_durasi_response_time_tahun_ini: 1004.874566187407,
-      total_durasi_recovery_time_tahun_ini: 15846250,
-      count_durasi_recovery_time_tahun_ini: 8064,
-      avg_durasi_recovery_time_tahun_ini: 1004.874566187407
-    },
-    {
-      id: 6,
-      nama_regional: 'REGIONAL JMB',
-      id_uid: 287,
-      nama_uid: 'DISTRIBUSI BALI',
-      id_up3: 329,
-      nama_up3: 'UP3 BALI UTARA',
-      id_ulp: 55340,
-      nama_ulp: 'ULP GILIMANUK',
-      total_durasi_response_time_bulan_ini: 809159,
-      count_durasi_response_time_bulan_ini: 656,
-      avg_durasi_response_time_bulan_ini: 1233.4740853658536,
-      total_durasi_recovery_time_bulan_ini: 1309097,
-      count_durasi_recovery_time_bulan_ini: 656,
-      avg_durasi_recovery_time_bulan_ini: 1995.5746951219512,
-      total_durasi_response_time_tahun_ini: 12308918,
-      count_durasi_response_time_tahun_ini: 8660,
-      avg_durasi_response_time_tahun_ini: 1421.35311778291,
-      total_durasi_recovery_time_tahun_ini: 19393316,
-      count_durasi_recovery_time_tahun_ini: 8626,
-      avg_durasi_recovery_time_tahun_ini: 1421.35311778291
-    },
-    {
-      id: 7,
-      nama_regional: 'REGIONAL SUMKAL',
-      id_uid: 131,
-      nama_uid: 'WILAYAH SUMATERA BARAT',
-      id_up3: 13300,
-      nama_up3: 'UP3 SOLOK',
-      id_ulp: 13334,
-      nama_ulp: 'ULP SILUNGKANG',
-      total_durasi_response_time_bulan_ini: 138385,
-      count_durasi_response_time_bulan_ini: 187,
-      avg_durasi_response_time_bulan_ini: 740.0267379679144,
-      total_durasi_recovery_time_bulan_ini: 292325,
-      count_durasi_recovery_time_bulan_ini: 187,
-      avg_durasi_recovery_time_bulan_ini: 1563.235294117647,
-      total_durasi_response_time_tahun_ini: 1356526,
-      count_durasi_response_time_tahun_ini: 1575,
-      avg_durasi_response_time_tahun_ini: 861.2863492063492,
-      total_durasi_recovery_time_tahun_ini: 2834067,
-      count_durasi_recovery_time_tahun_ini: 1553,
-      avg_durasi_recovery_time_tahun_ini: 861.2863492063492
-    },
-    {
-      id: 8,
-      nama_regional: 'REGIONAL SUMKAL',
-      id_uid: 221,
-      nama_uid: 'WILAYAH KALIMANTAN SELATAN DAN TENGAH',
-      id_up3: 2220,
-      nama_up3: 'UP3 BARABAI',
-      id_ulp: 22230,
-      nama_ulp: 'ULP AMUNTAI',
-      total_durasi_response_time_bulan_ini: 208716,
-      count_durasi_response_time_bulan_ini: 329,
-      avg_durasi_response_time_bulan_ini: 634.3951367781156,
-      total_durasi_recovery_time_bulan_ini: 382846,
-      count_durasi_recovery_time_bulan_ini: 329,
-      avg_durasi_recovery_time_bulan_ini: 1163.6656534954407,
-      total_durasi_response_time_tahun_ini: 2571552,
-      count_durasi_response_time_tahun_ini: 3294,
-      avg_durasi_response_time_tahun_ini: 780.6775956284152,
-      total_durasi_recovery_time_tahun_ini: 4579466,
-      count_durasi_recovery_time_tahun_ini: 3269,
-      avg_durasi_recovery_time_tahun_ini: 780.6775956284152
-    },
-    {
-      id: 9,
-      nama_regional: 'REGIONAL SULMAPANA',
-      id_uid: 31,
-      nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
-      id_up3: 31700,
-      nama_up3: 'UP3 KOTAMOBAGU',
-      id_ulp: 31730,
-      nama_ulp: 'ULP MODAYAG',
-      total_durasi_response_time_bulan_ini: 172545,
-      count_durasi_response_time_bulan_ini: 106,
-      avg_durasi_response_time_bulan_ini: 1627.7830188679245,
-      total_durasi_recovery_time_bulan_ini: 241479,
-      count_durasi_recovery_time_bulan_ini: 106,
-      avg_durasi_recovery_time_bulan_ini: 2278.103773584906,
-      total_durasi_response_time_tahun_ini: 1863546,
-      count_durasi_response_time_tahun_ini: 1801,
-      avg_durasi_response_time_tahun_ini: 1034.728484175458,
-      total_durasi_recovery_time_tahun_ini: 2899034,
-      count_durasi_recovery_time_tahun_ini: 1759,
-      avg_durasi_recovery_time_tahun_ini: 1034.728484175458
-    },
-    {
-      id: 10,
-      nama_regional: 'REGIONAL JMB',
-      id_uid: 427,
-      nama_uid: 'DISTRIBUSI JAWA BARAT',
-      id_up3: 546,
-      nama_up3: 'UP3 TASIKMALAYA',
-      id_ulp: 53231,
-      nama_ulp: 'ULP CIAMIS',
-      total_durasi_response_time_bulan_ini: 1077336,
-      count_durasi_response_time_bulan_ini: 1604,
-      avg_durasi_response_time_bulan_ini: 671.6558603491272,
-      total_durasi_recovery_time_bulan_ini: 1901265,
-      count_durasi_recovery_time_bulan_ini: 1604,
-      avg_durasi_recovery_time_bulan_ini: 1185.327306733167,
-      total_durasi_response_time_tahun_ini: 12491127,
-      count_durasi_response_time_tahun_ini: 20694,
-      avg_durasi_response_time_tahun_ini: 603.6110466801972,
-      total_durasi_recovery_time_tahun_ini: 19887846,
-      count_durasi_recovery_time_tahun_ini: 20343,
-      avg_durasi_recovery_time_tahun_ini: 603.6110466801972
-    },
-    {
-      id: 11,
-      nama_regional: 'REGIONAL JMB',
-      id_uid: 103,
-      nama_uid: 'DISTRIBUSI JAWA TIMUR',
-      id_up3: 157,
-      nama_up3: 'UP3 SURABAYA UTARA',
-      id_ulp: 51101,
-      nama_ulp: 'ULP INDRAPURA',
-      total_durasi_response_time_bulan_ini: 468551,
-      count_durasi_response_time_bulan_ini: 438,
-      avg_durasi_response_time_bulan_ini: 1069.7511415525114,
-      total_durasi_recovery_time_bulan_ini: 857038,
-      count_durasi_recovery_time_bulan_ini: 438,
-      avg_durasi_recovery_time_bulan_ini: 1956.7077625570776,
-      total_durasi_response_time_tahun_ini: 6115468,
-      count_durasi_response_time_tahun_ini: 5889,
-      avg_durasi_response_time_tahun_ini: 1038.4561046018,
-      total_durasi_recovery_time_tahun_ini: 10632184,
-      count_durasi_recovery_time_tahun_ini: 5658,
-      avg_durasi_recovery_time_tahun_ini: 1038.4561046018
-    },
-    {
-      id: 12,
-      nama_regional: 'REGIONAL SULMAPANA',
-      id_uid: 41,
-      nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
-      id_up3: 414,
-      nama_up3: 'UP3 MASOHI',
-      id_ulp: 41430,
-      nama_ulp: 'ULP MASOHI',
-      total_durasi_response_time_bulan_ini: 113695,
-      count_durasi_response_time_bulan_ini: 145,
-      avg_durasi_response_time_bulan_ini: 784.1034482758621,
-      total_durasi_recovery_time_bulan_ini: 211422,
-      count_durasi_recovery_time_bulan_ini: 145,
-      avg_durasi_recovery_time_bulan_ini: 1458.0827586206897,
-      total_durasi_response_time_tahun_ini: 2363191,
-      count_durasi_response_time_tahun_ini: 2822,
-      avg_durasi_response_time_tahun_ini: 837.4170800850461,
-      total_durasi_recovery_time_tahun_ini: 4201912,
-      count_durasi_recovery_time_tahun_ini: 2818,
-      avg_durasi_recovery_time_tahun_ini: 837.4170800850461
-    },
-    {
-      id: 13,
-      nama_regional: 'REGIONAL SUMKAL',
-      id_uid: 131,
-      nama_uid: 'WILAYAH SUMATERA BARAT',
-      id_up3: 13100,
-      nama_up3: 'UP3 PADANG',
-      id_ulp: 13105,
-      nama_ulp: 'ULP LUBUK ALUNG',
-      total_durasi_response_time_bulan_ini: 504207,
-      count_durasi_response_time_bulan_ini: 516,
-      avg_durasi_response_time_bulan_ini: 977.1453488372093,
-      total_durasi_recovery_time_bulan_ini: 974512,
-      count_durasi_recovery_time_bulan_ini: 516,
-      avg_durasi_recovery_time_bulan_ini: 1888.5891472868218,
-      total_durasi_response_time_tahun_ini: 5776799,
-      count_durasi_response_time_tahun_ini: 5202,
-      avg_durasi_response_time_tahun_ini: 1110.4957708573625,
-      total_durasi_recovery_time_tahun_ini: 10668074,
-      count_durasi_recovery_time_tahun_ini: 5035,
-      avg_durasi_recovery_time_tahun_ini: 1110.4957708573625
-    },
-    {
-      id: 14,
-      nama_regional: 'REGIONAL JMB',
-      id_uid: 103,
-      nama_uid: 'DISTRIBUSI JAWA TIMUR',
-      id_up3: 153,
-      nama_up3: 'UP3 SIDOARJO',
-      id_ulp: 51182,
-      nama_ulp: 'ULP PORONG',
-      total_durasi_response_time_bulan_ini: 2711446,
-      count_durasi_response_time_bulan_ini: 2407,
-      avg_durasi_response_time_bulan_ini: 1126.483589530536,
-      total_durasi_recovery_time_bulan_ini: 4361855,
-      count_durasi_recovery_time_bulan_ini: 2407,
-      avg_durasi_recovery_time_bulan_ini: 1812.1541337764852,
-      total_durasi_response_time_tahun_ini: 27345376,
-      count_durasi_response_time_tahun_ini: 21982,
-      avg_durasi_response_time_tahun_ini: 1243.9894459102902,
-      total_durasi_recovery_time_tahun_ini: 43993555,
-      count_durasi_recovery_time_tahun_ini: 21919,
-      avg_durasi_recovery_time_tahun_ini: 1243.9894459102902
-    }
-  ]
 })
 </script>

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

@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping :context-menu-enabled="true" expand-mode="rowClick" />
+      <DxGrouping :context-menu-enabled="true" expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -55,11 +55,35 @@
       />
       <DxColumn
         alignment="center"
-        data-field="nama_uid"
+        :min-width="170"
-        caption="UID"
+        data-type="text"
+        data-field="nama_regional"
+        caption="Regional"
         css-class="custom-table-column"
-        cell-template="formatText"
         :group-index="0"
+        name="namaRegional"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_uid"
+        caption="UIW"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
@@ -199,6 +223,7 @@
           show-in-column="mom_bulan_kemarin"
           column="mom_bulan_kemarin"
           css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"

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

@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -46,16 +46,38 @@
       />
       <DxColumnFixing :enabled="true" />
 
-      <!-- <DxColumn
+      <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_ulp"
+        data-field="nama_regional"
-        caption="Nama Unit"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
-        name="namaUlp"
+        name="namaRegional"
-      /> -->
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_uid"
+        caption="UIW"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
+      />
       <DxColumn
         alignment="center"
         :min-width="170"
@@ -179,6 +201,62 @@
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
+
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="mom_bulan_kemarin"
+          column="mom_bulan_kemarin"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="mom_bulan_ini"
+          column="mom_bulan_ini"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="persen_mom"
+          column="persen_mom"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="yoy_tahun_kemarin"
+          column="yoy_tahun_kemarin"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="yoy_tahun_ini"
+          column="yoy_tahun_ini"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="persen_yoy"
+          column="persen_yoy"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -211,6 +289,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
   DxGrouping,
   DxLoadPanel,
   DxPaging,

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

@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -46,16 +46,38 @@
       />
       <DxColumnFixing :enabled="true" />
 
-      <!-- <DxColumn
+      <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_ulp"
+        data-field="nama_regional"
-        caption="Nama Unit"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
-        name="namaUlp"
+        name="namaRegional"
-      /> -->
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_uid"
+        caption="UIW"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
+      />
       <DxColumn
         alignment="center"
         :min-width="170"
@@ -179,6 +201,62 @@
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
+
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="mom_bulan_kemarin"
+          column="mom_bulan_kemarin"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="mom_bulan_ini"
+          column="mom_bulan_ini"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="persen_mom"
+          column="persen_mom"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="yoy_tahun_kemarin"
+          column="yoy_tahun_kemarin"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="yoy_tahun_ini"
+          column="yoy_tahun_ini"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="persen_yoy"
+          column="persen_yoy"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -211,6 +289,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
   DxGrouping,
   DxLoadPanel,
   DxPaging,

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

@@ -26,7 +26,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -57,27 +57,35 @@
       />
       <DxColumn
         alignment="center"
+        :min-width="170"
+        data-type="text"
         data-field="nama_regional"
         caption="Regional"
         css-class="custom-table-column"
-        cell-template="formatText"
         :group-index="0"
+        name="namaRegional"
       />
       <DxColumn
         alignment="center"
-        data-field="nama_uid"
+        :min-width="170"
+        data-type="text"
+        data-field="id_uid"
         caption="UID"
         css-class="custom-table-column"
-        cell-template="formatText"
         :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
       />
       <DxColumn
         alignment="center"
-        data-field="nama_up3"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
         caption="UP3"
         css-class="custom-table-column"
-        cell-template="formatText"
+        :group-index="1"
-        :group-index="2"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn
         alignment="center"
@@ -106,7 +114,7 @@
               alignment="center"
               caption="b"
               data-type="number"
-              data-field="jumlah_keluhan_rpt_bulan"
+              data-field="count_durasi_response_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -117,7 +125,7 @@
               alignment="center"
               caption="c=a/b"
               data-type="number"
-              data-field="rpt_keluhan_bulan"
+              data-field="avg_durasi_response_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -128,7 +136,7 @@
               alignment="center"
               caption="d"
               data-type="number"
-              data-field="total_rct_bulan"
+              data-field="total_durasi_recovery_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -139,7 +147,7 @@
               alignment="center"
               caption="e"
               data-type="number"
-              data-field="jumlah_keluhan_rct_bulan"
+              data-field="count_durasi_recovery_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -150,7 +158,7 @@
               alignment="center"
               caption="f=d/e"
               data-type="number"
-              data-field="rct_keluhan_bulan"
+              data-field="avg_durasi_recovery_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -178,7 +186,7 @@
               alignment="center"
               caption="b"
               data-type="number"
-              data-field="jumlah_keluhan_rpt_sampai_bulan"
+              data-field="count_durasi_response_time_tahun_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -189,7 +197,7 @@
               alignment="center"
               caption="c=a/b"
               data-type="number"
-              data-field="rpt_keluhan_sampai_bulan"
+              data-field="avg_durasi_response_time_tahun_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -211,7 +219,7 @@
               alignment="center"
               caption="e"
               data-type="number"
-              data-field="jumlah_keluhan_rct_sampai_bulan"
+              data-field="count_durasi_recovery_time_tahun_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -222,7 +230,7 @@
               alignment="center"
               caption="f=d/e"
               data-type="number"
-              data-field="rch_keluhan_sampai_bulan"
+              data-field="avg_durasi_recovery_time_tahun_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -236,6 +244,7 @@
           :align-by-column="true"
           summary-type="sum"
           show-in-column="total_durasi_response_time_bulan_ini"
+          column="total_durasi_response_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -243,7 +252,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="jumlah_keluhan_rpt_bulan"
+          show-in-column="count_durasi_response_time_bulan_ini"
+          column="count_durasi_response_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -251,7 +261,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="rpt_keluhan_bulan"
+          show-in-column="avg_durasi_response_time_bulan_ini"
+          column="avg_durasi_response_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -259,7 +270,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="total_rct_bulan"
+          show-in-column="total_durasi_recovery_time_bulan_ini"
+          column="total_durasi_recovery_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -267,7 +279,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="jumlah_keluhan_rct_bulan"
+          show-in-column="count_durasi_recovery_time_bulan_ini"
+          column="count_durasi_recovery_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -275,7 +288,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="rct_keluhan_bulan"
+          show-in-column="avg_durasi_recovery_time_bulan_ini"
+          column="avg_durasi_recovery_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -284,6 +298,7 @@
           :align-by-column="true"
           summary-type="sum"
           show-in-column="total_durasi_response_time_tahun_ini"
+          column="total_durasi_response_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -291,7 +306,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="jumlah_keluhan_rpt_sampai_bulan"
+          show-in-column="count_durasi_response_time_tahun_ini"
+          column="count_durasi_response_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -299,7 +315,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="rpt_keluhan_sampai_bulan"
+          show-in-column="avg_durasi_response_time_tahun_ini"
+          column="avg_durasi_response_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -308,6 +325,7 @@
           :align-by-column="true"
           summary-type="sum"
           show-in-column="total_durasi_recovery_time_tahun_ini"
+          column="total_durasi_recovery_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -315,7 +333,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="jumlah_keluhan_rct_sampai_bulan"
+          show-in-column="count_durasi_recovery_time_tahun_ini"
+          column="count_durasi_recovery_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -323,7 +342,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="rch_keluhan_sampai_bulan"
+          show-in-column="avg_durasi_recovery_time_tahun_ini"
+          column="avg_durasi_recovery_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />

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

@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -60,19 +60,33 @@
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_uid"
+        data-field="nama_regional"
-        caption="Nama UID"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
+        name="namaRegional"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_up3"
+        data-field="id_uid"
-        caption="Nama UP3"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">

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

@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -55,11 +55,35 @@
       />
       <DxColumn
         alignment="center"
-        data-field="nama_uid"
+        :min-width="170"
+        data-type="text"
+        data-field="nama_regional"
+        caption="Regional"
+        css-class="custom-table-column"
+        :group-index="0"
+        name="namaRegional"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_uid"
         caption="UID"
         css-class="custom-table-column"
-        cell-template="formatText"
+        :group-index="1"
-        :group-index="0"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
         <DxColumn
@@ -119,6 +143,37 @@
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
+
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="jumlah_keluhan"
+          column="jumlah_keluhan"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="jumlah_informasi"
+          column="jumlah_informasi"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="total"
+          column="total"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -157,6 +212,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
   DxGrouping,
   DxLoadPanel,
   DxPaging,

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

@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -55,11 +55,35 @@
       />
       <DxColumn
         alignment="center"
-        data-field="nama_uid"
+        :min-width="170"
+        data-type="text"
+        data-field="nama_regional"
+        caption="Regional"
+        css-class="custom-table-column"
+        :group-index="0"
+        name="namaRegional"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_uid"
         caption="UID"
         css-class="custom-table-column"
-        cell-template="formatText"
+        :group-index="1"
-        :group-index="0"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
@@ -181,6 +205,7 @@
           show-in-column="mom_bulan_kemarin"
           column="mom_bulan_kemarin"
           css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -259,6 +284,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
   DxGrouping,
   DxLoadPanel,
   DxPaging,

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

@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -51,27 +51,32 @@
         :min-width="170"
         data-type="text"
         data-field="nama_regional"
-        caption="Nama Regional"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
+        name="namaRegional"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_uid"
+        data-field="id_uid"
-        caption="Nama UID"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_up3"
+        data-field="id_up3"
-        caption="Nama UP3"
+        caption="UP3"
         css-class="custom-table-column"
-        :group-index="2"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn
         alignment="center"

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

@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -51,27 +51,32 @@
         :min-width="170"
         data-type="text"
         data-field="nama_regional"
-        caption="Nama Regional"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
+        name="namaRegional"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_uid"
+        data-field="id_uid"
-        caption="Nama UID"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_up3"
+        data-field="id_up3"
-        caption="Nama UP3"
+        caption="UP3"
         css-class="custom-table-column"
-        :group-index="2"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn
         alignment="center"

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

@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -56,27 +56,32 @@
           :min-width="170"
           data-type="text"
           data-field="nama_regional"
-          caption="Nama Regional"
+          caption="Regional"
           css-class="custom-table-column"
           :group-index="0"
+          name="namaRegional"
         />
         <DxColumn
           alignment="center"
           :min-width="170"
           data-type="text"
-          data-field="nama_uid"
+          data-field="id_uid"
-          caption="Nama UID"
+          caption="UID"
           css-class="custom-table-column"
           :group-index="1"
+          name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_uid"
         />
         <DxColumn
           alignment="center"
           :min-width="170"
           data-type="text"
-          data-field="nama_up3"
+          data-field="id_up3"
-          caption="Nama UP3"
+          caption="UP3"
           css-class="custom-table-column"
-          :group-index="2"
+          :group-index="1"
+          name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_up3"
         />
         <DxColumn
           alignment="center"

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

@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -56,27 +56,32 @@
           :min-width="170"
           data-type="text"
           data-field="nama_regional"
-          caption="Nama Regional"
+          caption="Regional"
           css-class="custom-table-column"
           :group-index="0"
+          name="namaRegional"
         />
         <DxColumn
           alignment="center"
           :min-width="170"
           data-type="text"
-          data-field="nama_uid"
+          data-field="id_uid"
-          caption="Nama UID"
+          caption="UID"
           css-class="custom-table-column"
           :group-index="1"
+          name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_uid"
         />
         <DxColumn
           alignment="center"
           :min-width="170"
           data-type="text"
-          data-field="nama_up3"
+          data-field="id_up3"
-          caption="Nama UP3"
+          caption="UP3"
           css-class="custom-table-column"
-          :group-index="2"
+          :group-index="1"
+          name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_up3"
         />
         <DxColumn
           alignment="center"

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

@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -51,27 +51,32 @@
         :min-width="170"
         data-type="text"
         data-field="nama_regional"
-        caption="Nama Regional"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
+        name="namaRegional"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_uid"
+        data-field="id_uid"
-        caption="Nama UID"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_up3"
+        data-field="id_up3"
-        caption="Nama UP3"
+        caption="UP3"
         css-class="custom-table-column"
-        :group-index="2"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn
         alignment="center"

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

@@ -26,7 +26,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -52,27 +52,32 @@
         :min-width="170"
         data-type="text"
         data-field="nama_regional"
-        caption="Nama Regional"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
+        name="namaRegional"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_uid"
+        data-field="id_uid"
-        caption="Nama UID"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_up3"
+        data-field="id_up3"
-        caption="Nama UP3"
+        caption="UP3"
         css-class="custom-table-column"
-        :group-index="2"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn
         alignment="center"

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

@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -56,27 +56,32 @@
           :min-width="170"
           data-type="text"
           data-field="nama_regional"
-          caption="Nama Regional"
+          caption="Regional"
           css-class="custom-table-column"
           :group-index="0"
+          name="namaRegional"
         />
         <DxColumn
           alignment="center"
           :min-width="170"
           data-type="text"
-          data-field="nama_uid"
+          data-field="id_uid"
-          caption="Nama UID"
+          caption="UID"
           css-class="custom-table-column"
           :group-index="1"
+          name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_uid"
         />
         <DxColumn
           alignment="center"
           :min-width="170"
           data-type="text"
-          data-field="nama_up3"
+          data-field="id_up3"
-          caption="Nama UP3"
+          caption="UP3"
           css-class="custom-table-column"
-          :group-index="2"
+          :group-index="1"
+          name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_up3"
         />
         <DxColumn
           alignment="center"

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

@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -56,27 +56,32 @@
           :min-width="170"
           data-type="text"
           data-field="nama_regional"
-          caption="Nama Regional"
+          caption="Regional"
           css-class="custom-table-column"
           :group-index="0"
+          name="namaRegional"
         />
         <DxColumn
           alignment="center"
           :min-width="170"
           data-type="text"
-          data-field="nama_uid"
+          data-field="id_uid"
-          caption="Nama UID"
+          caption="UID"
           css-class="custom-table-column"
           :group-index="1"
+          name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_uid"
         />
         <DxColumn
           alignment="center"
           :min-width="170"
           data-type="text"
-          data-field="nama_up3"
+          data-field="id_up3"
-          caption="Nama UP3"
+          caption="UP3"
           css-class="custom-table-column"
-          :group-index="2"
+          :group-index="1"
+          name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_up3"
         />
         <DxColumn
           alignment="center"

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

@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -51,27 +51,32 @@
         :min-width="170"
         data-type="text"
         data-field="nama_regional"
-        caption="Nama Regional"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
+        name="namaRegional"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_uid"
+        data-field="id_uid"
-        caption="Nama UID"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_up3"
+        data-field="id_up3"
-        caption="Nama UP3"
+        caption="UP3"
         css-class="custom-table-column"
-        :group-index="2"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn
         alignment="center"

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

@@ -26,7 +26,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -52,27 +52,32 @@
         :min-width="170"
         data-type="text"
         data-field="nama_regional"
-        caption="Nama Regional"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
+        name="namaRegional"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_uid"
+        data-field="id_uid"
-        caption="Nama UID"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_up3"
+        data-field="id_up3"
-        caption="Nama UP3"
+        caption="UP3"
         css-class="custom-table-column"
-        :group-index="2"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn
         alignment="center"

src/components/Select.vue

@@ -19,19 +19,25 @@ const props = defineProps({
   selected: {
     type: Object as () => DataItem,
     default: () => ({ id: 0, name: '' })
+  },
+  indexSelected: {
+    type: Number,
+    default: 0
   }
 })
 
 const emit = defineEmits(['update:selected'])
-const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data])
+const data = computed(() =>
-const selected = ref(data.value[0].id)
+  props.placeholder == '0' ? props.data : [{ id: 0, name: props.placeholder }, ...props.data]
-
-watch(
-  () => props.selected,
-  (value: any) => {
-    selected.value = value.id
-  }
 )
+const selected = ref(data.value[props.indexSelected].id)
+
+// watch(
+//   () => props.selected,
+//   (value: any) => {
+//     selected.value = value.id
+//   }
+// )
 </script>
 
 <template>

src/utils/api/api.graphql.ts

@@ -2243,6 +2243,13 @@ export const queries = {
               bulan: $bulan
               tahun: $tahun
             ) {
+              id
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
               nama_ulp
               mom_bulan_ini
               mom_bulan_kemarin
@@ -2270,6 +2277,13 @@ export const queries = {
               bulan: $bulan
               tahun: $tahun
             ) {
+              id
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
               nama_ulp
               mom_bulan_ini
               mom_bulan_kemarin
@@ -2811,6 +2825,70 @@ export const queries = {
     }
   },
   cico: {
+    laporanCheckInCheckOutDetail: gql`
+      query detailCheckInCheckOut(
+        $dateFrom: Date!
+        $dateTo: Date!
+        $idPosko: Int!
+        $idUid: Int!
+        $idUp3: Int!
+        $personilYantek: String!
+      ) {
+        detailCheckInCheckOut(
+          dateFrom: $dateFrom
+          dateTo: $dateTo
+          idPosko: $idPosko
+          idUid: $idUid
+          idUp3: $idUp3
+          personilYantek: $personilYantek
+        ) {
+          id
+          id_uid
+          nama_uid
+          id_up3
+          nama_up3
+          id_posko
+          nama_posko
+          media
+          pembuat_laporan
+          dispatch_by
+          durasi_waktu_dispatch
+          user_regu
+          nama_regu
+          personil_yantek
+          shift
+          check_in_petugas
+          no_laporan
+          durasi_wo
+          waktu_lapor
+          waktu_dispatch
+          waktu_perjalanan
+          waktu_nyala_sementara
+          waktu_nyala
+          waktu_selesai
+          waktu_response
+          durasi_waktu_response
+          check_out_petugas
+          durasi_menit_response
+          durasi_menit_recovery
+          rating
+          jml_pelanggan_padam
+          fasilitas
+          sub_fasilitas
+          peralatan
+          dampak_kerusakan
+          kelompok_penyebab
+          cuaca
+          keterangan_pelapor
+          keterangan
+          penyebab
+          tindakan
+          status_akhir
+          referensi_marking
+          blth
+        }
+      }
+    `,
     laporanCheckInCheckOut: gql`
       query laporanCheckInCheckOut(
         $dateFrom: Date!
@@ -2826,6 +2904,9 @@ export const queries = {
           idUid: $idUid
           idUp3: $idUp3
         ) {
+          id_uid
+          id_up3
+          id_posko
           user_regu
           personil_yantek
           jumlah_wo_gangguan_individual
@@ -2922,12 +3003,16 @@ export const queries = {
     gangguan: {
       unitBerulang: gql`
         query anomaliPenangananPengaduanGangguanUnitBerulang(
+          $dateFrom: Date!
+          $dateTo: Date!
           $namaRegional: String!
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
         ) {
           anomaliPenangananPengaduanGangguanUnitBerulang(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
             namaRegional: $namaRegional
             idUlp: $idUlp
             idUid: $idUid
@@ -2961,12 +3046,16 @@ export const queries = {
       `,
       unitRatingNegatif: gql`
         query anomaliPenangananPengaduanGangguanUnitRatingNegatif(
+          $dateFrom: Date!
+          $dateTo: Date!
           $namaRegional: String!
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
         ) {
           anomaliPenangananPengaduanGangguanUnitRatingNegatif(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
             namaRegional: $namaRegional
             idUlp: $idUlp
             idUid: $idUid
@@ -3000,12 +3089,16 @@ export const queries = {
       `,
       unitSkipStep: gql`
         query anomaliPenangananPengaduanGangguanUnitSkipStep(
+          $dateFrom: Date!
+          $dateTo: Date!
           $namaRegional: String!
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
         ) {
           anomaliPenangananPengaduanGangguanUnitSkipStep(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
             namaRegional: $namaRegional
             idUlp: $idUlp
             idUid: $idUid
@@ -3039,12 +3132,16 @@ export const queries = {
       `,
       petugasBerulang: gql`
         query anomaliPenangananPengaduanGangguanPetugasBerulang(
+          $dateFrom: Date!
+          $dateTo: Date!
           $namaRegional: String!
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
         ) {
           anomaliPenangananPengaduanGangguanPetugasBerulang(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
             namaRegional: $namaRegional
             idUlp: $idUlp
             idUid: $idUid
@@ -3074,12 +3171,16 @@ export const queries = {
       `,
       petugasRatingNegatif: gql`
         query anomaliPenangananPengaduanGangguanPetugasRatingNegatif(
+          $dateFrom: Date!
+          $dateTo: Date!
           $namaRegional: String!
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
         ) {
           anomaliPenangananPengaduanGangguanPetugasRatingNegatif(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
             namaRegional: $namaRegional
             idUlp: $idUlp
             idUid: $idUid
@@ -3109,12 +3210,16 @@ export const queries = {
       `,
       petugasSkipStep: gql`
         query anomaliPenangananPengaduanGangguanPetugasSkipStep(
+          $dateFrom: Date!
+          $dateTo: Date!
           $namaRegional: String!
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
         ) {
           anomaliPenangananPengaduanGangguanPetugasSkipStep(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
             namaRegional: $namaRegional
             idUlp: $idUlp
             idUid: $idUid
@@ -3142,6 +3247,119 @@ export const queries = {
           }
         }
       `
+    },
+    keluhan: {
+      unitBerulang: gql`
+        query anomaliLaporanPenangananPengaduanKeluhanUnitBerulang(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          anomaliLaporanPenangananPengaduanKeluhanUnitBerulang(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            wo_cc123
+            wo_pln_mobile
+            wo_loket
+            wo_lainnya
+            wo_total
+            anomali_pln_mobile
+            anomali_cc123
+            total_anomali
+            persen_anomali_pln_mobile
+            persen_anomali_cc123
+          }
+        }
+      `,
+      unitSkipStep: gql`
+        query anomaliLaporanPenangananPengaduanKeluhanUnitSkipStep(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          anomaliLaporanPenangananPengaduanKeluhanUnitSkipStep(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            wo_cc123
+            wo_pln_mobile
+            wo_loket
+            wo_lainnya
+            wo_total
+            anomali_pln_mobile
+            anomali_cc123
+            total_anomali
+            persen_anomali_pln_mobile
+            persen_anomali_cc123
+          }
+        }
+      `,
+      unitRatingNegatif: gql`
+        query anomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          anomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            wo_cc123
+            wo_pln_mobile
+            wo_loket
+            wo_lainnya
+            wo_total
+            anomali_pln_mobile
+            anomali_cc123
+            total_anomali
+            persen_anomali_pln_mobile
+            persen_anomali_cc123
+          }
+        }
+      `
     }
   },
   cttKwhPeriksa: {

src/utils/texts.ts

@@ -60,7 +60,11 @@ const getMonthNumber = (monthName: string) => {
     'November',
     'Desember'
   ]
-  return months.indexOf(monthName) + 1
+  if (months.filter((month) => month.toLowerCase() === monthName.toLowerCase()).length > 0) {
+    return months.indexOf(monthName) + 1
+  } else {
+    return 0
+  }
 }
 
 const reformatDate = (inputDate: string, originalFormat: string, targetFormat: string): string => {