chore: Bump version to 0.0.193-vm and update npm dependencies

.env.development

@@ -1,4 +1,4 @@
-VITE_BASE_URL=http://localhost:5173
+VITE_BASE_URL=http://localhost/:5173
 VITE_BASE_DIRECTORY=/
 VITE_APP_VERSION=0.0.1
 VITE_APP_NAME='Executive Information System'

Dockerfile

@@ -1,15 +1,14 @@
-# syntax=docker/dockerfile:1
 # build stage
 FROM node:lts-alpine as builder
-WORKDIR /apkt
+WORKDIR /app
 COPY package*.json ./
-RUN npm install && npm install npm-run-all -g
+RUN npm install
 COPY . .
 RUN npm run build
 # production stage
 FROM nginx:stable-alpine
-COPY --from=builder /apkt/dist /usr/share/nginx/html
-COPY --from=builder /apkt/nginx.conf /etc/nginx/nginx.conf
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY --from=builder /app/nginx.conf /etc/nginx/nginx.conf
 EXPOSE 32166
 CMD ["nginx", "-g", "daemon off;"]
 

package.json

@@ -1 +1 @@
-{"name":"eis","version":"0.0.164-vm","private":true,"scripts":{"dev":"vite","host":"vite --host","tailwind":"tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/style.css --watch","build":"run-p type-check build-only","preview":"vite preview --host","test:unit":"vitest","build-only":"vite build","type-check":"vue-tsc --noEmit -p tsconfig.vitest.json --composite false","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","format":"prettier --write src/","deploy":"node deploy.js","set-version":"node version.js","version":"echo $npm_package_version"},"dependencies":{"@apollo/client":"^3.8.10","@apollo/link-context":"^2.0.0-beta.3","@flavorly/vanilla-components":"^0.7.65","@headlessui/tailwindcss":"^0.2.0","@headlessui/vue":"^1.7.19","@heroicons/vue":"^2.0.18","@lottiefiles/lottie-player":"^2.0.4","@phosphor-icons/vue":"^2.1.6","@types/qs":"^6.9.12","@types/uuid":"^9.0.8","@types/vue-select":"^3.16.8","@vue/apollo-components":"^4.0.0","@vue/apollo-composable":"^4.0.1","@vue/apollo-option":"^4.0.0","axios":"^1.6.7","devextreme":"23.2.4","devextreme-vue":"23.2.4","docx":"^8.5.0","dotenv":"^16.3.1","encrypt-storage":"^2.12.22","exceljs":"^4.4.0","file-saver":"^2.0.5","graphql":"^16.8.1","graphql-tag":"^2.12.6","jspdf":"^2.5.1","jspdf-autotable":"^3.8.2","pinia":"^2.1.3","qs":"^6.11.2","uuid":"^9.0.1","vue":"^3.3.4","vue-html-to-paper":"^2.0.3","vue-router":"^4.2.2","vue-tailwind-datepicker":"^1.6.1","vue3-star-ratings":"^3.0.5"},"devDependencies":{"@rushstack/eslint-patch":"^1.5.1","@tailwindcss/aspect-ratio":"^0.4.2","@tailwindcss/container-queries":"^0.1.1","@tailwindcss/forms":"^0.5.7","@tailwindcss/typography":"^0.5.10","@tsconfig/node18":"^2.0.1","@types/file-saver":"^2.0.6","@types/jsdom":"^21.1.1","@types/node":"^18.16.17","@vitejs/plugin-vue":"^4.2.3","@vitejs/plugin-vue-jsx":"^3.0.1","@vue/eslint-config-prettier":"^8.0.0","@vue/eslint-config-typescript":"^12.0.0","@vue/test-utils":"^2.3.2","@vue/tsconfig":"^0.4.0","autoprefixer":"^10.4.14","eslint":"^8.39.0","eslint-plugin-vue":"^9.11.0","jsdom":"^22.1.0","npm-run-all":"^4.1.5","postcss":"^8.4.24","prettier":"^3.0.3","tailwindcss":"^3.3.2","typescript":"~5.2.2","vite":"^4.3.9","vitest":"^1.3.1","vue-tsc":"^2.0.5"}}
+{"name":"eis","version":"0.0.193-vm","private":true,"scripts":{"dev":"vite","host":"vite --host","tailwind":"tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/style.css --watch","build":"run-p type-check build-only","preview":"vite preview --host","test:unit":"vitest","build-only":"vite build","type-check":"vue-tsc --noEmit -p tsconfig.vitest.json --composite false","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","format":"prettier --write src/","deploy":"node deploy.js","set-version":"node version.js","version":"echo $npm_package_version"},"dependencies":{"@apollo/client":"^3.8.10","@apollo/link-context":"^2.0.0-beta.3","@flavorly/vanilla-components":"^0.7.65","@headlessui/tailwindcss":"^0.2.0","@headlessui/vue":"^1.7.19","@heroicons/vue":"^2.0.18","@lottiefiles/lottie-player":"^2.0.4","@phosphor-icons/vue":"^2.1.6","@types/qs":"^6.9.12","@types/uuid":"^9.0.8","@types/vue-select":"^3.16.8","@vue/apollo-components":"^4.0.0","@vue/apollo-composable":"^4.0.1","@vue/apollo-option":"^4.0.0","axios":"^1.6.7","devextreme":"23.2.4","devextreme-vue":"23.2.4","docx":"^8.5.0","dotenv":"^16.3.1","encrypt-storage":"^2.12.22","exceljs":"^4.4.0","file-saver":"^2.0.5","graphql":"^16.8.1","graphql-tag":"^2.12.6","jspdf":"^2.5.1","jspdf-autotable":"^3.8.2","pinia":"^2.1.3","qs":"^6.11.2","uuid":"^9.0.1","vue":"^3.3.4","vue-html-to-paper":"^2.0.3","vue-router":"^4.2.2","vue-tailwind-datepicker":"^1.6.1","vue3-star-ratings":"^3.0.5"},"devDependencies":{"@rushstack/eslint-patch":"^1.5.1","@tailwindcss/aspect-ratio":"^0.4.2","@tailwindcss/container-queries":"^0.1.1","@tailwindcss/forms":"^0.5.7","@tailwindcss/typography":"^0.5.10","@tsconfig/node18":"^2.0.1","@types/file-saver":"^2.0.6","@types/jsdom":"^21.1.1","@types/node":"^18.16.17","@vitejs/plugin-vue":"^4.2.3","@vitejs/plugin-vue-jsx":"^3.0.1","@vue/eslint-config-prettier":"^8.0.0","@vue/eslint-config-typescript":"^12.0.0","@vue/test-utils":"^2.3.2","@vue/tsconfig":"^0.4.0","autoprefixer":"^10.4.14","eslint":"^8.39.0","eslint-plugin-vue":"^9.11.0","jsdom":"^22.1.0","npm-run-all":"^4.1.5","postcss":"^8.4.24","prettier":"^3.0.3","tailwindcss":"^3.3.2","typescript":"~5.2.2","vite":"^4.3.9","vitest":"^1.3.1","vue-tsc":"^2.0.5"}}

public/app.ini

@@ -1,7 +1,11 @@
-APP_NAME=example
+APP_NAME=PLN Gitea
 RUN_USER=gitea
 RUN_MODE=prod
 WORK_PATH=/opt/bitnami/gitea
+QUEUE_LENGTH=1000
+DELIVER_TIMEOUT=30
+SKIP_TLS_VERIFY=false
+PAGING_NUM=3
 
 [repository]
 ROOT=/opt/bitnami/gitea/data/git/repositories
@@ -25,9 +29,9 @@ LOG_SQL=false
 
 [server]
 DOMAIN=localhost
-HTTP_PORT=3000
+HTTP_PORT=32443
 PROTOCOL=http
-ROOT_URL=http://localhost:3000
+ROOT_URL=http://10.1.50.173:32443
 APP_DATA_PATH=/opt/bitnami/gitea/data
 DISABLE_SSH=false
 START_SSH_SERVER=true
@@ -78,7 +82,6 @@ NO_REPLY_ADDRESS=
 
 [openid]
 ENABLE_OPENID_SIGNIN=false
-ENABLE_OPENID_SIGNUP=false
 
 [cron.update_checker]
 ENABLED=false
@@ -93,8 +96,4 @@ DEFAULT_TRUST_MODEL=committer
 JWT_SECRET=kcpMlf3SqetVDc_HfS5gMhTbEjE6hC2madu0wF-Pq9g
 
 [webhook]
-QUEUE_LENGTH=1000
-DELIVER_TIMEOUT=30
-ALLOWED_HOST_LIST=*
-SKIP_TLS_VERIFY=false
-PAGING_NUM=3
+ALLOWED_HOST_LIST=*

public/app2.ini

@@ -1,99 +0,0 @@
-APP_NAME = Gitea: Git with a cup of tea
-RUN_USER = gitea
-RUN_MODE = prod
-
-[repository]
-ROOT = /opt/bitnami/gitea/data/git/repositories
-
-[repository.local]
-LOCAL_COPY_PATH =/opt/bitnami/gitea/tmp/local-repo
-
-[repository.upload]
-TEMP_PATH = /opt/bitnami/gitea/tmp/uploads
-
-[database]
-DB_TYPE = postgres
-HOST    = postgresql:5432
-NAME    = bitnami_gitea
-USER    = bn_gitea
-PASSWD  = U39vSmVbXs
-SSL_MODE=disable
-SCHEMA=
-PATH=
-LOG_SQL=false
-
-[server]
-DOMAIN           = localhost
-HTTP_PORT        = 3000
-PROTOCOL         = http
-ROOT_URL         = http://localhost:3000
-APP_DATA_PATH    = /opt/bitnami/gitea/data
-DISABLE_SSH      = false
-START_SSH_SERVER = true
-SSH_PORT         = 22
-SSH_LISTEN_PORT  = 2222
-SSH_DOMAIN       = localhost
-BUILTIN_SSH_SERVER_USER = gitea
-LFS_START_SERVER = false
-OFFLINE_MODE=false
-
-[mailer]
-ENABLED = false
-
-[session]
-PROVIDER_CONFIG = /opt/bitnami/gitea/data/sessions
-PROVIDER=file
-
-[picture]
-AVATAR_UPLOAD_PATH = /opt/bitnami/gitea/data/avatars
-REPOSITORY_AVATAR_UPLOAD_PATH = /opt/bitnami/gitea/data/repo-avatars
-
-[attachment]
-PATH = /opt/bitnami/gitea/data/attachments
-
-[log]
-ROOT_PATH = /opt/bitnami/gitea/tmp/log
-MODE=console
-LEVEL=info
-
-[security]
-PASSWORD_HASH_ALGO = pbkdf2
-REVERSE_PROXY_LIMIT = 1
-REVERSE_PROXY_TRUSTED_PROXIES = *
-INSTALL_LOCK=true
-INTERNAL_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYmYiOjE3MDc3MTAyODF9.gAVc1ZLcnFEf3TcoB4p9Q6GS8vJG_DIqZOazMd6XZi8
-
-[service]
-REGISTER_EMAIL_CONFIRM=false
-ENABLE_NOTIFY_MAIL=false
-DISABLE_REGISTRATION=false
-ALLOW_ONLY_EXTERNAL_REGISTRATION=false
-ENABLE_CAPTCHA=false
-REQUIRE_SIGNIN_VIEW=false
-DEFAULT_KEEP_EMAIL_PRIVATE=false
-DEFAULT_ALLOW_CREATE_ORGANIZATION=false
-DEFAULT_ENABLE_TIMETRACKING=false
-NO_REPLY_ADDRESS=
-
-[openid]
-ENABLE_OPENID_SIGNIN=false
-ENABLE_OPENID_SIGNUP=false
-
-[cron.update_checker]
-ENABLED=false
-
-[repository.pull-request]
-DEFAULT_MERGE_STYLE=merge
-
-[repository.signing]
-DEFAULT_TRUST_MODEL=committer
-
-[oauth2]
-JWT_SECRET=kcpMlf3SqetVDc_HfS5gMhTbEjE6hC2madu0wF-Pq9g
-
-[webhook]
-QUEUE_LENGTH=1000
-DELIVER_TIMEOUT=30
-ALLOWED_HOST_LIST=*
-SKIP_TLS_VERIFY=false
-PAGING_NUM=3

public/version.json

@@ -1 +1 @@
-{"version":"0.0.164-vm"}
+{"version":"0.0.193-vm"}

src/components/Form/FiltersType/Type10.vue

@@ -89,16 +89,13 @@ onMounted(() => {
     keys.forEach((key: any, index: any) => {
       if (filterPresets.value[key]) {
         presetValues[index].value = filterPresets.value[key]
-
-        if (key !== 'uid') {
-          setFunctions[index](filterPresets.value[key])
-        }
+        setFunctions[index](filterPresets.value[key])
       }
     })
+  } else {
+    fetchUid()
   }
 
-  fetchUid()
-
   emit('update:filters', data.value)
 })
 </script>

src/components/Form/FiltersType/Type11.vue

@@ -165,16 +165,13 @@ onMounted(() => {
     keys.forEach((key: any, index: any) => {
       if (filterPresets.value[key]) {
         presetValues[index].value = filterPresets.value[key]
-
-        if (key !== 'uid') {
-          setFunctions[index](filterPresets.value[key])
-        }
+        setFunctions[index](filterPresets.value[key])
       }
     })
+  } else {
+    fetchUid()
   }
 
-  fetchUid()
-
   emit('update:filters', data.value)
 })
 </script>

src/components/Form/FiltersType/Type12.vue

@@ -122,16 +122,13 @@ onMounted(() => {
     keys.forEach((key: any, index: any) => {
       if (filterPresets.value[key]) {
         presetValues[index].value = filterPresets.value[key]
-
-        if (key !== 'uid') {
-          setFunctions[index](filterPresets.value[key])
-        }
+        setFunctions[index](filterPresets.value[key])
       }
     })
+  } else {
+    fetchUid()
   }
 
-  fetchUid()
-
   emit('update:filters', data.value)
 })
 </script>

src/components/Form/FiltersType/Type13.vue

@@ -90,16 +90,13 @@ onMounted(() => {
     keys.forEach((key: any, index: any) => {
       if (filterPresets.value[key]) {
         presetValues[index].value = filterPresets.value[key]
-
-        if (key !== 'uid') {
-          setFunctions[index](filterPresets.value[key])
-        }
+        setFunctions[index](filterPresets.value[key])
       }
     })
+  } else {
+    fetchUid()
   }
 
-  fetchUid()
-
   emit('update:filters', data.value)
 })
 </script>

src/components/Form/FiltersType/Type17Keluhan.vue

@@ -173,16 +173,13 @@ onMounted(() => {
     keys.forEach((key: any, index: any) => {
       if (filterPresets.value[key]) {
         presetValues[index].value = filterPresets.value[key]
-
-        if (key !== 'uid') {
-          setFunctions[index](filterPresets.value[key])
-        }
+        setFunctions[index](filterPresets.value[key])
       }
     })
+  } else {
+    fetchUid()
   }
 
-  fetchUid()
-
   emit('update:filters', data.value)
 })
 </script>

src/components/Form/FiltersType/Type2.vue

@@ -5,7 +5,7 @@ import {
   selectedUid,
   selectedUp3Ulp,
   fetchRegional,
-  fetchUid,
+  selectedRegional,
   itemsUid,
   itemsUp3,
   itemsUlp,
@@ -67,11 +67,7 @@ watch(data, (value) => {
 })
 
 const setRegional = (value: any) => {
-  if (!presetUID.value) {
-    fetchUid()
-    selectedUid(value)
-  }
-
+  selectedRegional(value)
   data.value = {
     ...data.value,
     regional: value
@@ -119,7 +115,6 @@ const setUp3 = (value: any) => {
 }
 
 const setUlp = (value: any) => {
-  selectedUp3Ulp(value)
   data.value = {
     ...data.value,
     ulp: value
@@ -155,16 +150,13 @@ onMounted(() => {
       if (filterPresets.value[key]) {
         presetValues[index].value = filterPresets.value[key]
 
-        if (key !== 'regional' || key !== 'uid') {
-          setFunctions[index](filterPresets.value[key])
-        }
+        setFunctions[index](filterPresets.value[key])
       }
     })
+  } else {
+    fetchRegional()
   }
 
-  fetchRegional()
-  fetchUid()
-
   emit('update:filters', data.value)
 })
 </script>

src/components/Form/FiltersType/Type3.vue

@@ -88,16 +88,13 @@ onMounted(() => {
     keys.forEach((key: any, index: any) => {
       if (filterPresets.value[key]) {
         presetValues[index].value = filterPresets.value[key]
-
-        if (key !== 'uid') {
-          setFunctions[index](filterPresets.value[key])
-        }
+        setFunctions[index](filterPresets.value[key])
       }
     })
+  } else {
+    fetchUid()
   }
 
-  fetchUid()
-
   emit('update:filters', data.value)
 })
 </script>

src/components/Form/FiltersType/Type4.vue

@@ -99,16 +99,13 @@ onMounted(() => {
     keys.forEach((key: any, index: any) => {
       if (filterPresets.value[key]) {
         presetValues[index].value = filterPresets.value[key]
-
-        if (key !== 'uid') {
-          setFunctions[index](filterPresets.value[key])
-        }
+        setFunctions[index](filterPresets.value[key])
       }
     })
+  } else {
+    fetchUid()
   }
 
-  fetchUid()
-
   emit('update:filters', data.value)
 })
 </script>

src/components/Form/FiltersType/reference.ts

@@ -132,6 +132,11 @@ const fetchDataPosko = async (up3: number) => {
   }
 }
 const fetchRegional = async () => {
+  itemsUid.value = []
+  itemsUp3.value = []
+  itemsPosko.value = []
+  itemsUlp.value = []
+
   try {
     const res = await getRegional()
     itemsRegional.value = res.data.map((item: any) => ({
@@ -157,6 +162,13 @@ const formatWaktu = (durasiDetik: any): string => {
     return `${hari} - ${jam} : ${menit} : ${detik}`
   }
 }
+const selectedRegional = (value: any) => {
+  fetchUidByRegional(value.id)
+  itemsUid.value = []
+  itemsUp3.value = []
+  itemsPosko.value = []
+  itemsUlp.value = []
+}
 
 const selectedUid = (value: any) => {
   fetchDataUp3(value.id)
@@ -203,5 +215,6 @@ export {
   itemsUlp,
   months,
   years,
-  formatWaktu
+  formatWaktu,
+  selectedRegional
 }

src/components/Navigation/Header.vue

@@ -111,7 +111,7 @@ const showDialogLogout = () => {
                       {{ user.user_access }}
                     </p>
                     <p class="text-xs font-normal border-t border-white text-primary-50">
-                      • UID {{ user.user_uid }}
+                      • {{ user.user_uid }}
                     </p>
                   </div>
                 </div>

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

@@ -27,13 +27,6 @@
     />
     <DxColumnFixing :enabled="true" />
 
-    <DxColumn
-      alignment="center"
-      data-field="nama_unit"
-      caption="Nama Unit"
-      css-class="custom-table-column"
-      cell-template="formatText"
-    />
     <!-- <DxColumn
       alignment="center"
       :min-width="170"
@@ -65,6 +58,14 @@
       name="namaUID"
       :calculate-group-value="(rowData: any) => rowData.nama_up3"
     /> -->
+    <DxColumn
+      :width="170"
+      alignment="center"
+      data-field="nama_unit"
+      caption="Nama Unit"
+      css-class="custom-table-column"
+      cell-template="formatText"
+    />
     <DxColumn
       :width="170"
       alignment="center"
@@ -316,7 +317,7 @@
 
   <DetailDialog
     :open="dialogDetail"
-    :title="`Daftar Detail Anomali Penanganan Pengaduan Berulang Petugas ${filters.jenisLaporan.name}`"
+    :title="`Daftar Detail Anomali Penanganan Pengaduan Gangguan Petugas - ${filters.jenisLaporan.name}`"
     @on-close="closedialogDetail"
     :full-width="true"
   >
@@ -397,6 +398,7 @@
             cell-template="formatText"
           />
           <DxColumn
+            v-if="filters.jenisLaporan.name != 'Laporan Berulang Unit'"
             :width="150"
             alignment="center"
             data-field="no_laporan"
@@ -404,6 +406,15 @@
             css-class="custom-table-column"
             cell-template="formatText"
           />
+          <DxColumn
+            v-if="filters.jenisLaporan.name == 'Laporan Berulang Unit'"
+            :width="150"
+            alignment="center"
+            data-field="no_laporan_laporulang"
+            caption="No Laporan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
           <DxColumn
             v-if="filters.jenisLaporan.name == 'Laporan Rating Negatif'"
             :width="150"
@@ -435,7 +446,7 @@
             v-if="filters.jenisLaporan.name == 'Laporan Berulang Unit'"
             :width="150"
             alignment="center"
-            data-field="no_laporan_referensi"
+            data-field="no_laporan"
             caption="No Laporan Referensi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -588,7 +599,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="referensi_marking"
+            data-field="marking"
             caption="Referensi Marking"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -679,7 +690,18 @@
 
         <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?.no_laporan" class-name="flex-1" />
+          <InputText
+            v-if="filters.jenisLaporan.name == 'Laporan Berulang Unit'"
+            :readonly="true"
+            :value="dataSubSelected?.no_laporan_laporulang"
+            class-name="flex-1"
+          />
+          <InputText
+            v-else
+            :readonly="true"
+            :value="dataSubSelected?.no_laporan"
+            class-name="flex-1"
+          />
         </div>
 
         <div
@@ -711,11 +733,7 @@
           class="flex flex-row items-center justify-between w-full"
         >
           <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan Referensi:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.no_laporan_referensi"
-            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">
@@ -871,11 +889,7 @@
 
         <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?.referensi_marking"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.marking" class-name="flex-1" />
         </div>
 
         <div
@@ -937,7 +951,10 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import {
   exportToPDF,
   exportToXLSX,
-  exportToDOCX
+  exportToDOCX,
+  exportDetailToPDF,
+  exportDetailToXLSX,
+  exportDetailToDOCX
 } from '@/report/Anomali/Gangguan/Anomali_LAPPGP_LPP'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@@ -998,34 +1015,34 @@ const getDetail = async () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0,
-    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    // idUlp: 0,
+    // idUid: 0,
+    // idUp3: 0,
+    // namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
     media: parameterRequest.value?.media,
     isMarking: props.marking,
-    idPetugas: selected?.id_regu ? selected?.id_regu : 0
+    namaPetugas: selected?.nama_petugas ? selected?.nama_petugas : ''
   }
 
-  if (props.dataGroup.data == 'nama_uid') {
-    query = {
-      ...query,
-      idUid: selected?.id_uid ? selected?.id_uid : 0
-    }
-  } else if (props.dataGroup.data == 'nama_up3') {
-    query = {
-      ...query,
-      idUid: selected?.id_uid ? selected?.id_uid : 0,
-      idUp3: selected?.id_up3 ? selected?.id_up3 : 0
-    }
-  } else if (props.dataGroup.data == 'nama_ulp') {
-    query = {
-      ...query,
-      idUid: selected?.id_uid ? selected?.id_uid : 0,
-      idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
-      idUlp: selected?.id_ulp ? selected?.id_ulp : 0
-    }
-  }
+  // if (props.dataGroup.data == 'nama_uid') {
+  //   query = {
+  //     ...query,
+  //     idUid: selected?.id_uid ? selected?.id_uid : 0
+  //   }
+  // } else if (props.dataGroup.data == 'nama_up3') {
+  //   query = {
+  //     ...query,
+  //     idUid: selected?.id_uid ? selected?.id_uid : 0,
+  //     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+  //   }
+  // } else if (props.dataGroup.data == 'nama_ulp') {
+  //   query = {
+  //     ...query,
+  //     idUid: selected?.id_uid ? selected?.id_uid : 0,
+  //     idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+  //     idUlp: selected?.id_ulp ? selected?.id_ulp : 0
+  //   }
+  // }
 
   loadingSubData.value = true
   emit('update:loadingSubData', loadingSubData.value)
@@ -1049,12 +1066,12 @@ const getDetail = async () => {
           dataSub.value =
             result.data.data.subDetailAnomaliPenangananPengaduanGangguanPetugasSkipStep
         }
-        dataSub.value = dataSub.value.map((item: any) => {
-          return {
-            ...item,
-            nama_petugas: selected?.nama_petugas
-          }
-        })
+        // dataSub.value = dataSub.value.map((item: any) => {
+        //   return {
+        //     ...item,
+        //     nama_petugas: selected?.nama_petugas
+        //   }
+        // })
       } else {
         dataSub.value = []
       }
@@ -1102,7 +1119,15 @@ const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const onExportingDetail = (e: any) => {}
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
+  }
+}
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]

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

@@ -47,6 +47,7 @@
     <DxColumn
       v-if="grouping.length > 0"
       v-for="(group, index) in grouping"
+      :key="index"
       :width="150"
       alignment="center"
       :data-field="group.data"
@@ -75,7 +76,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="anomali_pln_mobile_marking"
+            data-field="petugas_pln_mobile_marking"
             data-type="number"
             caption="Marking"
             css-class="custom-table-column"
@@ -84,7 +85,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="anomali_pln_mobile_non_marking"
+            data-field="petugas_pln_mobile_nonmarking"
             data-type="number"
             caption="Non Marking"
             css-class="custom-table-column"
@@ -97,7 +98,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="anomali_cc123_marking"
+            data-field="petugas_cc123_marking"
             data-type="number"
             caption="Marking"
             css-class="custom-table-column"
@@ -106,7 +107,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="anomali_cc123_non_marking"
+            data-field="petugas_cc123_nonmarking"
             data-type="number"
             caption="Non Marking"
             css-class="custom-table-column"
@@ -119,7 +120,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="total_anomali_marking"
+            data-field="petugas_anomali_marking"
             data-type="number"
             caption="Marking"
             css-class="custom-table-column"
@@ -128,7 +129,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="total_anomali_non_marking"
+            data-field="petugas_anomali_nonmarking"
             data-type="number"
             caption="Non Marking"
             css-class="custom-table-column"
@@ -147,7 +148,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="persen_anomali_pln_mobile_marking"
+            data-field="persen_pln_mobile_marking"
             data-type="number"
             caption="Marking"
             css-class="custom-table-column"
@@ -156,7 +157,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="persen_anomali_pln_mobile_non_marking"
+            data-field="persen_pln_mobile_non_marking"
             data-type="number"
             caption="Non Marking"
             css-class="custom-table-column"
@@ -169,7 +170,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="persen_anomali_cc123_marking"
+            data-field="persen_cc123_marking"
             data-type="number"
             caption="Marking"
             css-class="custom-table-column"
@@ -178,7 +179,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="persen_anomali_cc123_non_marking"
+            data-field="persen_cc123_nonmarking"
             data-type="number"
             caption="Non Marking"
             css-class="custom-table-column"
@@ -346,8 +347,8 @@
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
-        column="anomali_pln_mobile_marking"
-        name="anomali_pln_mobile_marking"
+        column="petugas_pln_mobile_marking"
+        name="petugas_pln_mobile_marking"
         summary-type="custom"
         css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
@@ -355,8 +356,8 @@
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
-        column="anomali_pln_mobile_non_marking"
-        name="anomali_pln_mobile_non_marking"
+        column="petugas_pln_mobile_nonmarking"
+        name="petugas_pln_mobile_nonmarking"
         summary-type="custom"
         css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
@@ -364,8 +365,8 @@
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
-        column="anomali_cc123_marking"
-        name="anomali_cc123_marking"
+        column="petugas_cc123_marking"
+        name="petugas_cc123_marking"
         summary-type="custom"
         css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
@@ -373,8 +374,8 @@
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
-        column="anomali_cc123_non_marking"
-        name="anomali_cc123_non_marking"
+        column="petugas_cc123_nonmarking"
+        name="petugas_cc123_nonmarking"
         summary-type="custom"
         css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
@@ -382,8 +383,8 @@
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
-        column="total_anomali_marking"
-        name="total_anomali_marking"
+        column="petugas_anomali_marking"
+        name="petugas_anomali_marking"
         summary-type="custom"
         css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
@@ -391,8 +392,8 @@
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
-        column="total_anomali_non_marking"
-        name="total_anomali_non_marking"
+        column="petugas_anomali_nonmarking"
+        name="petugas_anomali_nonmarking"
         summary-type="custom"
         css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
@@ -400,8 +401,8 @@
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
-        column="persen_anomali_pln_mobile_marking"
-        name="persen_anomali_pln_mobile_marking"
+        column="persen_pln_mobile_marking"
+        name="persen_pln_mobile_marking"
         summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatPercentage(e.value)"
@@ -409,8 +410,8 @@
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
-        column="persen_anomali_pln_mobile_non_marking"
-        name="persen_anomali_pln_mobile_non_marking"
+        column="persen_pln_mobile_non_marking"
+        name="persen_pln_mobile_non_marking"
         summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatPercentage(e.value)"
@@ -418,8 +419,8 @@
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
-        column="persen_anomali_cc123_marking"
-        name="persen_anomali_cc123_marking"
+        column="persen_cc123_marking"
+        name="persen_cc123_marking"
         summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatPercentage(e.value)"
@@ -427,8 +428,8 @@
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
-        column="persen_anomali_cc123_non_marking"
-        name="persen_anomali_cc123_non_marking"
+        column="persen_cc123_nonmarking"
+        name="persen_cc123_nonmarking"
         summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatPercentage(e.value)"
@@ -549,17 +550,17 @@ const onCellClicked = (e: any) => {
     console.log('columnIndex', e)
     console.log('columnValue', e.data.aggregates[e.column.columnIndex])
 
-    if (e.column.dataField == 'anomali_pln_mobile_marking') {
+    if (e.column.dataField == 'petugas_pln_mobile_marking') {
       setParameterRequest({ media: 'PLN Mobile', marking: 1 })
-    } else if (e.column.dataField == 'anomali_pln_mobile_non_marking') {
+    } else if (e.column.dataField == 'petugas_pln_mobile_nonmarking') {
       setParameterRequest({ media: 'PLN Mobile', marking: 2 })
-    } else if (e.column.dataField == 'anomali_cc123_marking') {
+    } else if (e.column.dataField == 'petugas_cc123_marking') {
       setParameterRequest({ media: 'Call PLN 123', marking: 1 })
-    } else if (e.column.dataField == 'anomali_cc123_non_marking') {
+    } else if (e.column.dataField == 'petugas_cc123_nonmarking') {
       setParameterRequest({ media: 'Call PLN 123', marking: 2 })
-    } else if (e.column.dataField == 'total_anomali_marking') {
+    } else if (e.column.dataField == 'petugas_anomali_marking') {
       setParameterRequest({ media: '', marking: 1 })
-    } else if (e.column.dataField == 'total_anomali_non_marking') {
+    } else if (e.column.dataField == 'petugas_anomali_nonmarking') {
       setParameterRequest({ media: '', marking: 2 })
     } else {
       setParameterRequest({ media: null, marking: null })
@@ -577,16 +578,16 @@ const resetData = () => {
 }
 
 let total_petugas = 0
-let anomali_pln_mobile_marking = 0
-let anomali_pln_mobile_non_marking = 0
-let anomali_cc123_marking = 0
-let anomali_cc123_non_marking = 0
-let total_anomali_marking = 0
-let total_anomali_non_marking = 0
-let persen_anomali_pln_mobile_marking = 0
-let persen_anomali_pln_mobile_non_marking = 0
-let persen_anomali_cc123_marking = 0
-let persen_anomali_cc123_non_marking = 0
+let petugas_pln_mobile_marking = 0
+let petugas_pln_mobile_nonmarking = 0
+let petugas_cc123_marking = 0
+let petugas_cc123_nonmarking = 0
+let petugas_anomali_marking = 0
+let petugas_anomali_nonmarking = 0
+let persen_pln_mobile_marking = 0
+let persen_pln_mobile_non_marking = 0
+let persen_cc123_marking = 0
+let persen_cc123_nonmarking = 0
 let persen_anomali_marking = 0
 let persen_anomali_non_marking = 0
 
@@ -599,141 +600,141 @@ const calculateCustomSummary = (options: any) => {
     }
   }
 
-  if (options.name === 'anomali_pln_mobile_marking') {
+  if (options.name === 'petugas_pln_mobile_marking') {
     if (options.summaryProcess === 'calculate') {
-      anomali_pln_mobile_marking += options.value
+      petugas_pln_mobile_marking += options.value
     } else if (options.summaryProcess === 'finalize') {
-      options.totalValue = anomali_pln_mobile_marking
+      options.totalValue = petugas_pln_mobile_marking
     }
   }
 
-  if (options.name === 'anomali_pln_mobile_non_marking') {
+  if (options.name === 'petugas_pln_mobile_nonmarking') {
     if (options.summaryProcess === 'calculate') {
-      anomali_pln_mobile_non_marking += options.value
+      petugas_pln_mobile_nonmarking += options.value
     } else if (options.summaryProcess === 'finalize') {
-      options.totalValue = anomali_pln_mobile_non_marking
+      options.totalValue = petugas_pln_mobile_nonmarking
     }
   }
 
-  if (options.name === 'anomali_cc123_marking') {
+  if (options.name === 'petugas_cc123_marking') {
     if (options.summaryProcess === 'calculate') {
-      anomali_cc123_marking += options.value
+      petugas_cc123_marking += options.value
     } else if (options.summaryProcess === 'finalize') {
-      options.totalValue = anomali_cc123_marking
+      options.totalValue = petugas_cc123_marking
     }
   }
 
-  if (options.name === 'anomali_cc123_non_marking') {
+  if (options.name === 'petugas_cc123_nonmarking') {
     if (options.summaryProcess === 'calculate') {
-      anomali_cc123_non_marking += options.value
+      petugas_cc123_nonmarking += options.value
     } else if (options.summaryProcess === 'finalize') {
-      options.totalValue = anomali_cc123_non_marking
+      options.totalValue = petugas_cc123_nonmarking
     }
   }
 
-  if (options.name === 'total_anomali_marking') {
+  if (options.name === 'petugas_anomali_marking') {
     if (options.summaryProcess === 'start') {
-      anomali_pln_mobile_marking = 0
-      anomali_cc123_marking = 0
+      petugas_pln_mobile_marking = 0
+      petugas_cc123_marking = 0
     } else if (options.summaryProcess === 'finalize') {
-      options.totalValue = anomali_pln_mobile_marking + anomali_cc123_marking
+      options.totalValue = petugas_pln_mobile_marking + petugas_cc123_marking
     }
   }
 
-  if (options.name === 'total_anomali_non_marking') {
+  if (options.name === 'petugas_anomali_nonmarking') {
     if (options.summaryProcess === 'start') {
-      anomali_pln_mobile_non_marking = 0
-      anomali_cc123_non_marking = 0
+      petugas_pln_mobile_nonmarking = 0
+      petugas_cc123_nonmarking = 0
     } else if (options.summaryProcess === 'finalize') {
-      options.totalValue = anomali_pln_mobile_non_marking + anomali_cc123_non_marking
+      options.totalValue = petugas_pln_mobile_nonmarking + petugas_cc123_nonmarking
     }
   }
 
-  if (options.name === 'persen_anomali_pln_mobile_marking') {
+  if (options.name === 'persen_pln_mobile_marking') {
     if (options.summaryProcess === 'start') {
-      anomali_pln_mobile_marking = 0
+      petugas_pln_mobile_marking = 0
       total_petugas = 0
     } else if (options.summaryProcess === 'calculate') {
-      persen_anomali_pln_mobile_marking =
-        !isFinite(anomali_pln_mobile_marking / total_petugas) || anomali_pln_mobile_marking == 0
+      persen_pln_mobile_marking =
+        !isFinite(petugas_pln_mobile_marking / total_petugas) || petugas_pln_mobile_marking == 0
           ? 0
-          : (anomali_pln_mobile_marking / total_petugas) * 100
+          : (petugas_pln_mobile_marking / total_petugas) * 100
     } else if (options.summaryProcess === 'finalize') {
       options.totalValue =
-        !isFinite(anomali_pln_mobile_marking / total_petugas) || anomali_pln_mobile_marking == 0
+        !isFinite(petugas_pln_mobile_marking / total_petugas) || petugas_pln_mobile_marking == 0
           ? 0
-          : (anomali_pln_mobile_marking / total_petugas) * 100
+          : (petugas_pln_mobile_marking / total_petugas) * 100
     }
   }
 
-  if (options.name === 'persen_anomali_pln_mobile_non_marking') {
+  if (options.name === 'persen_pln_mobile_non_marking') {
     if (options.summaryProcess === 'start') {
-      anomali_pln_mobile_non_marking = 0
+      petugas_pln_mobile_nonmarking = 0
       total_petugas = 0
     } else if (options.summaryProcess === 'calculate') {
-      persen_anomali_pln_mobile_non_marking =
-        !isFinite(anomali_pln_mobile_non_marking / total_petugas) ||
-        anomali_pln_mobile_non_marking == 0
+      persen_pln_mobile_non_marking =
+        !isFinite(petugas_pln_mobile_nonmarking / total_petugas) ||
+        petugas_pln_mobile_nonmarking == 0
           ? 0
-          : (anomali_pln_mobile_non_marking / total_petugas) * 100
+          : (petugas_pln_mobile_nonmarking / total_petugas) * 100
     } else if (options.summaryProcess === 'finalize') {
       options.totalValue =
-        !isFinite(anomali_pln_mobile_non_marking / total_petugas) ||
-        anomali_pln_mobile_non_marking == 0
+        !isFinite(petugas_pln_mobile_nonmarking / total_petugas) ||
+        petugas_pln_mobile_nonmarking == 0
           ? 0
-          : (anomali_pln_mobile_non_marking / total_petugas) * 100
+          : (petugas_pln_mobile_nonmarking / total_petugas) * 100
     }
   }
 
-  if (options.name === 'persen_anomali_cc123_marking') {
+  if (options.name === 'persen_cc123_marking') {
     if (options.summaryProcess === 'start') {
-      anomali_cc123_marking = 0
+      petugas_cc123_marking = 0
       total_petugas = 0
     } else if (options.summaryProcess === 'calculate') {
-      persen_anomali_cc123_marking =
-        !isFinite(anomali_cc123_marking / total_petugas) || anomali_cc123_marking == 0
+      persen_cc123_marking =
+        !isFinite(petugas_cc123_marking / total_petugas) || petugas_cc123_marking == 0
           ? 0
-          : (anomali_cc123_marking / total_petugas) * 100
+          : (petugas_cc123_marking / total_petugas) * 100
     } else if (options.summaryProcess === 'finalize') {
       options.totalValue =
-        !isFinite(anomali_cc123_marking / total_petugas) || anomali_cc123_marking == 0
+        !isFinite(petugas_cc123_marking / total_petugas) || petugas_cc123_marking == 0
           ? 0
-          : (anomali_cc123_marking / total_petugas) * 100
+          : (petugas_cc123_marking / total_petugas) * 100
     }
   }
 
-  if (options.name === 'persen_anomali_cc123_non_marking') {
+  if (options.name === 'persen_cc123_nonmarking') {
     if (options.summaryProcess === 'start') {
-      anomali_cc123_non_marking = 0
+      petugas_cc123_nonmarking = 0
       total_petugas = 0
     } else if (options.summaryProcess === 'calculate') {
-      persen_anomali_cc123_non_marking =
-        !isFinite(anomali_cc123_non_marking / total_petugas) || anomali_cc123_non_marking == 0
+      persen_cc123_nonmarking =
+        !isFinite(petugas_cc123_nonmarking / total_petugas) || petugas_cc123_nonmarking == 0
           ? 0
-          : (anomali_cc123_non_marking / total_petugas) * 100
+          : (petugas_cc123_nonmarking / total_petugas) * 100
     } else if (options.summaryProcess === 'finalize') {
       options.totalValue =
-        !isFinite(anomali_cc123_non_marking / total_petugas) || anomali_cc123_non_marking == 0
+        !isFinite(petugas_cc123_nonmarking / total_petugas) || petugas_cc123_nonmarking == 0
           ? 0
-          : (anomali_cc123_non_marking / total_petugas) * 100
+          : (petugas_cc123_nonmarking / total_petugas) * 100
     }
   }
 
   if (options.name === 'persen_anomali_marking') {
     if (options.summaryProcess === 'start') {
-      persen_anomali_pln_mobile_marking = 0
-      persen_anomali_cc123_marking = 0
+      persen_pln_mobile_marking = 0
+      persen_cc123_marking = 0
     } else if (options.summaryProcess === 'finalize') {
-      options.totalValue = persen_anomali_pln_mobile_marking + persen_anomali_cc123_marking
+      options.totalValue = persen_pln_mobile_marking + persen_cc123_marking
     }
   }
 
   if (options.name === 'persen_anomali_non_marking') {
     if (options.summaryProcess === 'start') {
-      persen_anomali_cc123_non_marking = 0
-      persen_anomali_pln_mobile_non_marking = 0
+      persen_cc123_nonmarking = 0
+      persen_pln_mobile_non_marking = 0
     } else if (options.summaryProcess === 'finalize') {
-      options.totalValue = persen_anomali_pln_mobile_non_marking + persen_anomali_cc123_non_marking
+      options.totalValue = persen_pln_mobile_non_marking + persen_cc123_nonmarking
     }
   }
 }
@@ -809,15 +810,17 @@ const getDetail = async () => {
       } else {
         dataSub.value = []
       }
+      console.log('group by', props.grouping[groupIndex.value].data)
+
       dataSub.value = dataSub.value.map((e: any) => ({
         ...e,
         nama_unit: groupDialog.value
           ? props.grouping[groupIndex.value].data == 'nama_uid'
-            ? e.nama_uid
+            ? e.nama_uid || e.nama_unit
             : props.grouping[groupIndex.value].data == 'nama_up3'
-              ? e.nama_up3
+              ? e.nama_up3 || e.nama_unit
               : 'Semua Unit'
-          : e.nama_ulp
+          : e.nama_unit
       }))
       emit('update:dataSub', dataSub.value)
       emit('update:data-group', props.grouping[groupIndex.value])

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

@@ -540,7 +540,7 @@
 
   <DetailDialog
     :open="dialogDetail"
-    :title="`Daftar Detail Anomali Penanganan Pengaduan ${filters.jenisLaporan.name}`"
+    :title="`Daftar Detail Anomali Penanganan Pengaduan Gangguan Unit - ${filters.jenisLaporan.name}`"
     @on-close="closedialogDetail"
     :full-width="true"
   >

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

@@ -362,7 +362,7 @@
 
   <DetailDialog
     :open="dialogDetail"
-    title="Daftar Detail Anomali Penanganan Pengaduan"
+    :title="`Daftar Detail Anomali Penanganan Pengaduan Keluhan Unit - ${filters.jenisLaporan.name}`"
     @on-close="closedialogDetail"
     :full-width="true"
   >
@@ -411,7 +411,7 @@
             cell-template="formatNumber"
           />
           <DxColumn
-            :width="150"
+            :width="200"
             alignment="center"
             data-field="nama_uid"
             caption="UIW/D"
@@ -437,6 +437,16 @@
           <DxColumn
             :width="150"
             alignment="center"
+            v-if="filters.jenisLaporan.name === 'Laporan Berulang Unit'"
+            data-field="no_laporan_anomali"
+            caption="No Laporan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            v-else
             data-field="no_laporan"
             caption="No Laporan"
             css-class="custom-table-column"
@@ -445,7 +455,8 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="referensi_marking"
+            v-if="filters.jenisLaporan.name === 'Laporan Berulang Unit'"
+            data-field="no_laporan_referensi"
             caption="No Laporan Referensi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -515,7 +526,7 @@
             cell-template="formatText"
           />
           <DxColumn
-            :width="150"
+            :width="250"
             alignment="center"
             data-field="alamat_pelapor"
             caption="Alamat Pelapor"
@@ -531,7 +542,7 @@
             cell-template="formatText"
           />
           <DxColumn
-            :width="150"
+            :width="250"
             alignment="center"
             data-field="keterangan_pelapor"
             caption="Keterangan Pelapor"
@@ -539,7 +550,7 @@
             cell-template="formatText"
           />
           <DxColumn
-            :width="150"
+            :width="250"
             alignment="center"
             data-field="uraian"
             caption="Uraian"
@@ -594,14 +605,28 @@
 
         <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?.no_laporan" class-name="flex-1" />
+          <InputText
+            v-if="filters.jenisLaporan.name === 'Laporan Berulang Unit'"
+            :readonly="true"
+            :value="dataSubSelected?.no_laporan_anomali"
+            class-name="flex-1"
+          />
+          <InputText
+            v-else
+            :readonly="true"
+            :value="dataSubSelected?.no_laporan"
+            class-name="flex-1"
+          />
         </div>
 
-        <div class="flex flex-row items-center justify-between w-full">
+        <div
+          v-if="filters.jenisLaporan.name === 'Laporan Berulang Unit'"
+          class="flex flex-row items-center justify-between w-full"
+        >
           <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan Referensi:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.referensi_marking"
+            :value="dataSubSelected?.no_laporan_referensi"
             class-name="flex-1"
           />
         </div>

src/components/Pages/Cico/LaporanCICO.vue

@@ -1240,7 +1240,8 @@ const getDetail = async () => {
     idPosko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
-    personilYantek: isTotal.value ? '' : selected?.personil_yantek ? selected?.personil_yantek : ''
+    personilYantek: isTotal.value ? '' : selected?.personil_yantek ? selected?.personil_yantek : '',
+    userRegu: isTotal.value ? '' : selected?.user_regu ? selected?.user_regu : ''
   }
 
   loadingSubData.value = true

src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue

@@ -46,6 +46,7 @@
         :group-index="index"
       />
       <DxColumn
+        :width="200"
         alignment="center"
         data-field="nama_ulp"
         caption="Nama Unit"
@@ -984,6 +985,8 @@ const onCellClicked = (e: any) => {
     if (e.rowType == 'group') {
       groupDialog.value = true
       groupIndex.value = e.row.groupIndex
+    } else {
+      groupDialog.value = false
     }
     isDialogEnabled.value = true
 

src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue

@@ -1,15 +1,16 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
     <Type16 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
+      @option-changed="handleRequestChange"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
-      v-if="loading == false"
+      :remote-operations="true"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -21,6 +22,7 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -31,16 +33,6 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -48,11 +40,12 @@
         :allow-export-selected-data="false"
       />
       <DxColumn
-        css-class="custom-table-column"
+        :allow-sorting="false"
+        css-class="custom-table-column !text-right"
         :width="50"
         alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
+        data-field="no"
         caption="No"
       />
 
@@ -282,8 +275,6 @@
       </div>
     </div>
   </DetailDialog>
-
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -291,8 +282,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type16 from '@/components/Form/FiltersType/Type16.vue'
+import CustomStore from 'devextreme/data/custom_store'
+
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import { reactive, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -303,46 +296,162 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToDOCX, exportToXLSX } from '@/report/Gangguan/Daftar/DGangguan_BM'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const data = ref<any[]>([])
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
+const reportData: any = ref(null)
 const dataGridRef = ref<DxDataGrid | null>(null)
-const loading = ref(false)
-const clearSelection = () => {
-  const dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  if (selectedRowsData[0] != undefined) {
-    dataSelected.value = selectedRowsData[0]
-  }
-  clearSelection()
-  showDetail()
-}
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  media: { id: '', name: 'Semua Media' },
+  periode: ''
+})
 
-const showDetail = () => (dialogDetail.value = true)
+const allowTableRequest = ref(false)
+const data = new CustomStore({
+  load: async (loadOptions: any) => {
+    if (allowTableRequest.value) {
+      loadOptions.requireTotalCount = true
+
+      const query = {
+        skip: loadOptions.skip,
+        take: loadOptions.take,
+        sort: loadOptions.sort ? loadOptions.sort : null,
+        filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
+        requireTotalCount: loadOptions.requireTotalCount,
+        ...createQuery(filters.value)
+      }
+
+      return await requestGraphQl(queries.gangguan.daftar.ssdaftarGangguanBerdasarkanMedia, query)
+        .then((result) => {
+          const response = result.data.data.ssdaftarGangguanBerdasarkanMedia
+
+          let no = query.skip ?? 0
+
+          for (const data of response.data) {
+            data.no = ++no
+          }
+
+          return {
+            data: response.data,
+            totalCount: response.totalCount
+          }
+        })
+        .catch((err) => {
+          throw Error(err)
+        })
+        .finally(() => {
+          reportMeta.value = filters.value
+        })
+    } else {
+      return new Promise(function (resolve) {
+        resolve({
+          data: [],
+          totalCount: 0
+        })
+      })
+    }
+  }
+})
 
 const closeDialog = () => (dialogDetail.value = false)
 
 const resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  if (e.name === 'searchPanel') {
+    if (e.value !== '') {
+      requestOptions.filter = createSearchOptions(e.value)
+    } else {
+      requestOptions.filter = null
+    }
+  }
+
+  if (e.name === 'paging') {
+    requestOptions.take = e.value
+  }
+
+  if (e.name === 'columns') {
+    const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
+    const columnDataField = e.component.columnOption(columnIndex).dataField
+
+    requestOptions.sort = [
+      {
+        selector: columnDataField,
+        desc: e.value === 'desc'
+      }
+    ]
+  }
+}
+
+const createSearchOptions = (keyword: string) => {
+  const dataGrid = dataGridRef.value!.instance!
+  const columns = dataGrid.getVisibleColumns()
+
+  const searchOptions = []
+
+  for (const column of columns) {
+    if (column.dataField === 'no' || !column.dataField) {
+      continue
+    }
+
+    searchOptions.push({
+      field: column.dataField,
+      value: keyword
+    })
+  }
+
+  return searchOptions
+}
+
+const mapSearchOptions = (searchOptions: any) => {
+  const result = searchOptions.map((option: any) => {
+    if (Array.isArray(option) && option[0] !== 'no') {
+      return {
+        field: option[0],
+        value: option[2]
+      }
+    }
+  })
+
+  return result.filter((item: any) => item)
+}
+
+const filterData = () => {
+  allowTableRequest.value = true
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const createQuery = (params: any) => {
   const { posko, uid, up3, media } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const query = {
+  return {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -354,140 +463,46 @@ const filterData = async (params: any) => {
     idUp3: up3 ? up3.id : 0,
     media: media ? media.id : ''
   }
-
-  loading.value = true
-  await requestGraphQl(queries.gangguan.daftar.berdasarkanMedia, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarGangguanBerdasarkanMedia
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  clearSelection()
+  showDetail()
+}
+
+const showDetail = () => (dialogDetail.value = true)
+
+const onExporting = async (e: any) => {
+  const dataGrid = dataGridRef.value!.instance!
+
+  if (e.format === 'pdf' || e.format === 'document') {
+    reportData.value = await data.load()
+  }
+
+  if (e.format === 'pdf' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const pdf = await exportToPDF(reportMeta, reportData)
+
+    if (pdf) {
+      dataGrid.endCustomLoading()
+    }
   } else if (e.format === 'xlsx') {
-    exportToXLSX(reportMeta, data, e)
-  } else {
-    exportToDOCX(reportMeta, data)
+    exportToXLSX(reportMeta, e)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
-
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  posko: { id: 0, name: 'Semua Posko' },
-  media: { id: '', name: 'Semua Media' },
-  periode: ''
-})
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'G5423020100150',
-        waktu_lapor: '31-01-2023 17:16:17',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_response: '31-01-2023 17:56:28',
-        waktu_recovery: '31-01-2023 18:00:37',
-        durasi_response_time: 2411,
-        durasi_recovery_time: 249,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Raihana S. Rahmahadi',
-        alamat_pelapor: 'JL BKT RAFLESIA N8-16',
-        no_telp_pelapor: '6282138889101',
-        keterangan_media: 'x',
-        media: 'PLN Mobile',
-        waktu_media: '31-12-1969 17:00:00',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020100985',
-        waktu_lapor: '31-01-2023 20:09:50',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_response: '31-01-2023 20:42:40',
-        waktu_recovery: '31-01-2023 20:49:35',
-        durasi_response_time: 1970,
-        durasi_recovery_time: 415,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Risky Ariyanto',
-        alamat_pelapor: 'JL JANKES AD No. RT.7 RW.2',
-        no_telp_pelapor: '6285240208016',
-        keterangan_media: 'x',
-        media: 'PLN Mobile',
-        waktu_media: '31-12-1969 17:00:00',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020101461',
-        waktu_lapor: '31-01-2023 22:38:01',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_response: '31-01-2023 22:48:13',
-        waktu_recovery: '31-01-2023 22:54:06',
-        durasi_response_time: 612,
-        durasi_recovery_time: 353,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Junaedi Muntoro',
-        alamat_pelapor: 'PR BKT GOLF ARCADIA BLK G.06 No.5 CBBR',
-        no_telp_pelapor: '628111588806',
-        keterangan_media: 'x',
-        media: 'PLN Mobile',
-        waktu_media: '31-12-1969 17:00:00',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5523020100067',
-        waktu_lapor: '31-01-2023 22:57:02',
-        pembuat_laporan: 'CC.55.SUMIATI',
-        waktu_response: '31-01-2023 23:18:55',
-        waktu_recovery: '31-12-1969 17:00:00',
-        durasi_response_time: 1313,
-        durasi_recovery_time: 33945870,
-        status_akhir: 'Dibatalkan',
-        idpel_nometer: '',
-        nama_pelapor: 'BP ANAL ',
-        alamat_pelapor: 'JL MANUNGGAL RT 05 RW 02 KEL KELAPA  DUA WETAN KEC CIRACAS JAKARTA TIMUR ',
-        no_telp_pelapor: '6285777592240',
-        keterangan_media: 'x',
-        media: 'Call PLN 123',
-        waktu_media: '31-12-1969 17:00:00',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020103015',
-        waktu_lapor: '01-02-2023 00:39:03',
-        pembuat_laporan: 'CC.54.EKA.CSOI',
-        waktu_response: '01-02-2023 01:14:56',
-        waktu_recovery: '01-02-2023 01:19:32',
-        durasi_response_time: 2153,
-        durasi_recovery_time: 276,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU DIN',
-        alamat_pelapor:
-          'JL. HAJI MIUN NO.97 RT. 1 RW 2 KEL KALISARI KEC. PASAR REBO JAKTIM, SEBERANG CAFE LAW COFFE ',
-        no_telp_pelapor: '082112050265',
-        keterangan_media: 'x',
-        media: 'Call PLN 123',
-        waktu_media: '31-12-1969 17:00:00',
-        nama_posko: 'POSKO CIRACAS'
-      }
-    ]
-  }
-})
 </script>

src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue

@@ -1,15 +1,16 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
     <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="dataTable">
     <DxDataGrid
       ref="dataGridRef"
+      @option-changed="handleRequestChange"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
-      v-if="loading == false"
+      :remote-operations="true"
       key-expr="no_laporan"
       :show-column-lines="true"
       :show-row-lines="false"
@@ -22,6 +23,7 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
+      <DxLoadPanel :enabled="true" />
       <DxPaging :page-size="20" :enabled="true" :page-index="0" />
       <DxPager
         :visible="true"
@@ -32,17 +34,6 @@
         :show-navigation-buttons="true"
       />
       <DxSelection mode="single" />
-      <!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -50,11 +41,12 @@
         :allow-export-selected-data="false"
       />
       <DxColumn
+        :allow-sorting="false"
         css-class="custom-table-column !text-right"
         :width="50"
         alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
+        data-field="no"
         caption="No"
       />
       <DxColumn
@@ -320,7 +312,7 @@
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
         <InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
       </div>
 
@@ -335,18 +327,20 @@
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko:</h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
         <InputText :readonly="true" :value="dataSelected?.nama_posko_lama" class-name="flex-1" />
       </div>
     </div>
   </DetailDialog>
-
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
+import CustomStore from 'devextreme/data/custom_store'
+
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -354,32 +348,169 @@ import {
   DxPager,
   DxPaging,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxLoadPanel
 } from 'devextreme-vue/data-grid'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
-import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
-import InputText from '@/components/InputText.vue'
+import { ref, reactive } from 'vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_DKPL'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const data = ref<any[]>([])
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>()
 const dialogDetail = ref(false)
-const loading = ref(false)
+const reportData: any = ref(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  periode: ''
+})
+
+const allowTableRequest = ref(false)
+const data = new CustomStore({
+  load: async (loadOptions: any) => {
+    if (allowTableRequest.value) {
+      loadOptions.requireTotalCount = true
+
+      const query = {
+        skip: loadOptions.skip,
+        take: loadOptions.take,
+        sort: loadOptions.sort ? loadOptions.sort : null,
+        filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
+        requireTotalCount: loadOptions.requireTotalCount,
+        ...createQuery(filters.value)
+      }
+
+      return await requestGraphQl(
+        queries.gangguan.daftar.ssdaftarGangguanDialihkanKePoskoLain,
+        query
+      )
+        .then((result) => {
+          const response = result.data.data.ssdaftarGangguanDialihkanKePoskoLain
+
+          let no = query.skip ?? 0
+
+          for (const data of response.data) {
+            data.no = ++no
+          }
+
+          return {
+            data: response.data,
+            totalCount: response.totalCount
+          }
+        })
+        .catch((err) => {
+          throw Error(err)
+        })
+        .finally(() => {
+          reportMeta.value = filters.value
+        })
+    } else {
+      return new Promise(function (resolve) {
+        resolve({
+          data: [],
+          totalCount: 0
+        })
+      })
+    }
+  }
+})
+
 const closeDialog = () => (dialogDetail.value = false)
 
 const resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  if (e.name === 'searchPanel') {
+    if (e.value !== '') {
+      requestOptions.filter = createSearchOptions(e.value)
+    } else {
+      requestOptions.filter = null
+    }
+  }
+
+  if (e.name === 'paging') {
+    requestOptions.take = e.value
+  }
+
+  if (e.name === 'columns') {
+    const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
+    const columnDataField = e.component.columnOption(columnIndex).dataField
+
+    requestOptions.sort = [
+      {
+        selector: columnDataField,
+        desc: e.value === 'desc'
+      }
+    ]
+  }
+}
+
+const createSearchOptions = (keyword: string) => {
+  const dataGrid = dataGridRef.value!.instance!
+  const columns = dataGrid.getVisibleColumns()
+
+  const searchOptions = []
+
+  for (const column of columns) {
+    if (column.dataField === 'no' || !column.dataField) {
+      continue
+    }
+
+    searchOptions.push({
+      field: column.dataField,
+      value: keyword
+    })
+  }
+
+  return searchOptions
+}
+
+const mapSearchOptions = (searchOptions: any) => {
+  const result = searchOptions.map((option: any) => {
+    if (Array.isArray(option) && option[0] !== 'no') {
+      return {
+        field: option[0],
+        value: option[2]
+      }
+    }
+  })
+
+  return result.filter((item: any) => item)
+}
+
+const filterData = () => {
+  allowTableRequest.value = true
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const createQuery = (params: any) => {
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const query = {
+  return {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -390,175 +521,48 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   }
-
-  console.log(query)
-
-  loading.value = true
-  await requestGraphQl(queries.gangguan.daftar.dataDialihkanKePoskoLain, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarGangguanDialihkanKePoskoLain
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-const dataGridRef = ref<DxDataGrid | null>(null)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
 }
+
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
   }
   showDetail()
 }
+
 const showDetail = () => {
   dialogDetail.value = true
   clearSelection()
 }
 
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  posko: { id: 0, name: 'Semua Posko' },
-  periode: ''
-})
+const onExporting = async (e: any) => {
+  const dataGrid = dataGridRef.value!.instance!
 
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'G1423012400040',
-        pembuat_laporan: 'CC.14.ALFIAN',
-        waktu_lapor: '01/02/2023 13:53:36',
-        waktu_dialihkan: '24/01/2023 02:20:22',
-        waktu_response: null,
-        waktu_recovery: null,
-        durasi_response_time: null,
-        durasi_recovery_time: null,
-        id_posko_lama: 181701,
-        nama_posko_lama: 'POSKO ULP SIAK SRI INDRAPURA',
-        id_posko_baru: 181801,
-        nama_posko_baru: 'POSKO ULP PANGKALAN KERINCI',
-        status_akhir: 'Dibatalkan',
-        idpel_nometer: '',
-        nama_pelapor: 'BP HABIB',
-        alamat_pelapor: 'JL PEMBANGUNAN RT 5 RW 2 DESA RAWANG TAUH KEC LUBUK DALAM KAB SIAK ',
-        no_telp_pelapor: '081365027399',
-        keterangan_pelapor: 'GANGGUAN BERULANG : G1423012400025, BANYAK RUMAH PADAM',
-        media: 'Call PLN 123'
-      },
-      {
-        no_laporan: 'G1223012400580',
-        pembuat_laporan: 'CC.12.TONI',
-        waktu_lapor: '01/02/2023 13:53:36',
-        waktu_dialihkan: '24/01/2023 17:30:32',
-        waktu_response: null,
-        waktu_recovery: null,
-        durasi_response_time: null,
-        durasi_recovery_time: null,
-        id_posko_lama: 181101,
-        nama_posko_lama: 'POSKO ULP PEKANBARU KOTA TIMUR',
-        id_posko_baru: 181101,
-        nama_posko_baru: 'POSKO ULP PEKANBARU KOTA TIMUR',
-        status_akhir: 'Selesai(PEMADAMAN MELUAS)',
-        idpel_nometer: '',
-        nama_pelapor: 'BP DAUT',
-        alamat_pelapor:
-          'JL RAWAMANGUN SIMPANG ANGGREK RT01 RW8 KEL TANGERANG LUBUAY KEC BUKIT RAYA KOTA PEKANBARU RIAU ACUAN DEKAT KOLAM PANCING RIKI ',
-        no_telp_pelapor: '085278178766',
-        keterangan_pelapor: 'TRAFO MELEDAK, BANYAK RUMAH VOLTAGE TIDAK STABIL, TEGANGAN 120 V ',
-        media: 'Call PLN 123'
-      },
-      {
-        no_laporan: 'G1223012400580',
-        pembuat_laporan: 'CC.12.TONI',
-        waktu_lapor: '01/02/2023 13:53:36',
-        waktu_dialihkan: '24/01/2023 17:30:29',
-        waktu_response: null,
-        waktu_recovery: null,
-        durasi_response_time: null,
-        durasi_recovery_time: null,
-        id_posko_lama: 181111,
-        nama_posko_lama: 'POSKO ULP PEKANBARU KOTA BARAT',
-        id_posko_baru: 181101,
-        nama_posko_baru: 'POSKO ULP PEKANBARU KOTA TIMUR',
-        status_akhir: 'Selesai(PEMADAMAN MELUAS)',
-        idpel_nometer: '',
-        nama_pelapor: 'BP DAUT',
-        alamat_pelapor:
-          'JL RAWAMANGUN SIMPANG ANGGREK RT01 RW8 KEL TANGERANG LUBUAY KEC BUKIT RAYA KOTA PEKANBARU RIAU ACUAN DEKAT KOLAM PANCING RIKI ',
-        no_telp_pelapor: '085278178766',
-        keterangan_pelapor: 'TRAFO MELEDAK, BANYAK RUMAH VOLTAGE TIDAK STABIL, TEGANGAN 120 V ',
-        media: 'Call PLN 123'
-      },
-      {
-        no_laporan: 'G1423012400611',
-        pembuat_laporan: 'cc.14.OKTA',
-        waktu_lapor: '01/02/2023 13:53:36',
-        waktu_dialihkan: '24/01/2023 15:39:23',
-        waktu_response: null,
-        waktu_recovery: null,
-        durasi_response_time: null,
-        durasi_recovery_time: null,
-        id_posko_lama: 181201,
-        nama_posko_lama: 'POSKO ULP SIMPANG TIGA',
-        id_posko_baru: 181131,
-        nama_posko_baru: '',
-        status_akhir: 'Selesai(PEMADAMAN MELUAS)',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU SURYANTI',
-        alamat_pelapor:
-          'JLN. KEPAU JAYA RT 01 RW 03 DESA KEPAU  KEC. SIAK HULU KAB. KAMPAR PROV. RIAU. DIDEKAT SIMPANG PT. BENI',
-        no_telp_pelapor: '082246836428',
-        keterangan_pelapor: 'SR PUTUS (PTL PADAM) ',
-        media: 'Call PLN 123'
-      },
-      {
-        no_laporan: 'G5223012400639',
-        pembuat_laporan: 'CC.52.HARYO.SM',
-        waktu_lapor: '01/02/2023 13:53:36',
-        waktu_dialihkan: '24/01/2023 11:02:02',
-        waktu_response: null,
-        waktu_recovery: null,
-        durasi_response_time: null,
-        durasi_recovery_time: null,
-        id_posko_lama: 182601,
-        nama_posko_lama: 'POSKO ULP BAGAN BATU',
-        id_posko_baru: 181801,
-        nama_posko_baru: 'POSKO ULP PANGKALAN KERINCI',
-        status_akhir: 'Selesai(PEMADAMAN MELUAS)',
-        idpel_nometer: '',
-        nama_pelapor: 'BAPAK SAOR MARUDUT',
-        alamat_pelapor:
-          'DESA BANJAR PANJANG KECAMATAN KERUMUTAN KABUPATEN PELALAWAN PROVINSI RIAU ',
-        no_telp_pelapor: '085278020428',
-        keterangan_pelapor: 'TERKAIT NO LAPOR G5423012405161 STATUS DIBATALKAN. BANYAK RUMAH PADAM',
-        media: 'Live Chat PLN Mobile'
-      }
-    ]
+  if (e.format === 'pdf' || e.format === 'document') {
+    reportData.value = await data.load()
   }
-})
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+  if (e.format === 'pdf' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const pdf = await exportToPDF(reportMeta, reportData)
+
+    if (pdf) {
+      dataGrid.endCustomLoading()
+    }
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta, e)
-  } else {
-    exportToDOCX(reportMeta, data)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
 </script>

src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue

@@ -1,15 +1,16 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
     <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
+      @option-changed="handleRequestChange"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
-      v-if="loading == false"
+      :remote-operations="true"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -21,6 +22,7 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -31,16 +33,6 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -48,11 +40,12 @@
         :allow-export-selected-data="false"
       />
       <DxColumn
-        css-class="custom-table-column"
+        :allow-sorting="false"
+        css-class="custom-table-column !text-right"
         :width="50"
         alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
+        data-field="no"
         caption="No"
       />
 
@@ -277,8 +270,6 @@
       </div>
     </div>
   </DetailDialog>
-
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -286,8 +277,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
+import CustomStore from 'devextreme/data/custom_store'
+
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import { reactive, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -298,46 +291,164 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_DMAPKT'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const data = ref<any[]>([])
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
+const reportData: any = ref(null)
 const dataGridRef = ref<DxDataGrid | null>(null)
-const loading = ref(false)
-const clearSelection = () => {
-  const dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  if (selectedRowsData[0] != undefined) {
-    dataSelected.value = selectedRowsData[0]
-  }
-  clearSelection()
-  showDetail()
-}
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  periode: ''
+})
 
-const showDetail = () => (dialogDetail.value = true)
+const allowTableRequest = ref(false)
+const data = new CustomStore({
+  load: async (loadOptions: any) => {
+    if (allowTableRequest.value) {
+      loadOptions.requireTotalCount = true
+
+      const query = {
+        skip: loadOptions.skip,
+        take: loadOptions.take,
+        sort: loadOptions.sort ? loadOptions.sort : null,
+        filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
+        requireTotalCount: loadOptions.requireTotalCount,
+        ...createQuery(filters.value)
+      }
+
+      return await requestGraphQl(
+        queries.gangguan.daftar.ssdaftarGangguanDiselesaikanMobileAPKT,
+        query
+      )
+        .then((result) => {
+          const response = result.data.data.ssdaftarGangguanDiselesaikanMobileAPKT
+
+          let no = query.skip ?? 0
+
+          for (const data of response.data) {
+            data.no = ++no
+          }
+
+          return {
+            data: response.data,
+            totalCount: response.totalCount
+          }
+        })
+        .catch((err) => {
+          throw Error(err)
+        })
+        .finally(() => {
+          reportMeta.value = filters.value
+        })
+    } else {
+      return new Promise(function (resolve) {
+        resolve({
+          data: [],
+          totalCount: 0
+        })
+      })
+    }
+  }
+})
 
 const closeDialog = () => (dialogDetail.value = false)
 
 const resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  if (e.name === 'searchPanel') {
+    if (e.value !== '') {
+      requestOptions.filter = createSearchOptions(e.value)
+    } else {
+      requestOptions.filter = null
+    }
+  }
+
+  if (e.name === 'paging') {
+    requestOptions.take = e.value
+  }
+
+  if (e.name === 'columns') {
+    const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
+    const columnDataField = e.component.columnOption(columnIndex).dataField
+
+    requestOptions.sort = [
+      {
+        selector: columnDataField,
+        desc: e.value === 'desc'
+      }
+    ]
+  }
+}
+
+const createSearchOptions = (keyword: string) => {
+  const dataGrid = dataGridRef.value!.instance!
+  const columns = dataGrid.getVisibleColumns()
+
+  const searchOptions = []
+
+  for (const column of columns) {
+    if (column.dataField === 'no' || !column.dataField) {
+      continue
+    }
+
+    searchOptions.push({
+      field: column.dataField,
+      value: keyword
+    })
+  }
+
+  return searchOptions
+}
+
+const mapSearchOptions = (searchOptions: any) => {
+  const result = searchOptions.map((option: any) => {
+    if (Array.isArray(option) && option[0] !== 'no') {
+      return {
+        field: option[0],
+        value: option[2]
+      }
+    }
+  })
+
+  return result.filter((item: any) => item)
+}
+
+const filterData = () => {
+  allowTableRequest.value = true
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const createQuery = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 
-  const query = {
+  return {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -348,136 +459,46 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3?.id ? up3.id : 0
   }
-
-  loading.value = true
-  await requestGraphQl(queries.gangguan.daftar.diselesaikanMobileAPKT, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarGangguanDiselesaikanMobileAPKT
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  clearSelection()
+  showDetail()
+}
+
+const showDetail = () => (dialogDetail.value = true)
+
+const onExporting = async (e: any) => {
+  const dataGrid = dataGridRef.value!.instance!
+
+  if (e.format === 'pdf' || e.format === 'document') {
+    reportData.value = await data.load()
+  }
+
+  if (e.format === 'pdf' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const pdf = await exportToPDF(reportMeta, reportData)
+
+    if (pdf) {
+      dataGrid.endCustomLoading()
+    }
   } else if (e.format === 'xlsx') {
-    exportToXLSX(reportMeta, data, e)
-  } else {
-    exportToDOCX(reportMeta, data)
+    exportToXLSX(reportMeta, e)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
-
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  posko: { id: 0, name: 'Semua Posko' },
-  periode: ''
-})
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'G5423020100150',
-        waktu_lapor: '01-02-2023 00:16:17',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_response: '01-02-2023 00:56:28',
-        waktu_recovery: '01-02-2023 01:00:37',
-        durasi_response_time: 2411,
-        durasi_recovery_time: 249,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Raihana S. Rahmahadi',
-        alamat_pelapor: 'JL BKT RAFLESIA N8-16',
-        no_telp_pelapor: '6282138889101',
-        keterangan_pelapor:
-          'MCB LEMAH DAYA RI/2200VA. SESUAI INFO PELANGGAN SUDAH ADA PETUGAS YANG MENGHUBUNGI DIINFORMASIKAN AKAN ADA PETUGAS YANG DATANG KE LOKASI.',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020100985',
-        waktu_lapor: '01-02-2023 03:09:50',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_response: '01-02-2023 03:42:40',
-        waktu_recovery: '01-02-2023 03:49:35',
-        durasi_response_time: 1970,
-        durasi_recovery_time: 415,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Risky Ariyanto',
-        alamat_pelapor: 'JL JANKES AD No. RT.7 RW.2',
-        no_telp_pelapor: '6285240208016',
-        keterangan_pelapor: 'gagal isi token dan di meteran ada tulisan Periksa',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020101461',
-        waktu_lapor: '01-02-2023 05:38:01',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_response: '01-02-2023 05:48:13',
-        waktu_recovery: '01-02-2023 05:54:06',
-        durasi_response_time: 612,
-        durasi_recovery_time: 353,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Junaedi Muntoro',
-        alamat_pelapor: 'PR BKT GOLF ARCADIA BLK G.06 No.5 CBBR',
-        no_telp_pelapor: '628111588806',
-        keterangan_pelapor:
-          'Mohon bantuan isi token PLN 3214732093\\n\\nPT. KARYA CANTIKA KUSUMA\\n\\nBukit Golf Riverside\\nKluster Arcadia Blok G6/5\\nBojong Nangka Gunung Putri Bogor\\n\\nGagal isi Tokel Tertera Meteran TERPERIKSA.\\n\\nMOHON BANTUAN PAK..',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5523020100067',
-        waktu_lapor: '01-02-2023 05:57:02',
-        pembuat_laporan: 'CC.55.SUMIATI',
-        waktu_response: '01-02-2023 06:18:55',
-        waktu_recovery: '01-01-1970 00:00:00',
-        durasi_response_time: 1313,
-        durasi_recovery_time: 33958371,
-        status_akhir: 'Dibatalkan',
-        idpel_nometer: '',
-        nama_pelapor: 'BP ANAL ',
-        alamat_pelapor: 'JL MANUNGGAL RT 05 RW 02 KEL KELAPA  DUA WETAN KEC CIRACAS JAKARTA TIMUR ',
-        no_telp_pelapor: '6285777592240',
-        keterangan_pelapor: 'BANYAK RUMAH PADAM ',
-        media: 'Call PLN 123',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020103015',
-        waktu_lapor: '01-02-2023 07:39:03',
-        pembuat_laporan: 'CC.54.EKA.CSOI',
-        waktu_response: '01-02-2023 08:14:56',
-        waktu_recovery: '01-02-2023 08:19:32',
-        durasi_response_time: 2153,
-        durasi_recovery_time: 276,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU DIN',
-        alamat_pelapor:
-          'JL. HAJI MIUN NO.97 RT. 1 RW 2 KEL KALISARI KEC. PASAR REBO JAKTIM, SEBERANG CAFE LAW COFFE ',
-        no_telp_pelapor: '082112050265',
-        keterangan_pelapor: 'MCB LEMAH DAYA 1.300 VA ',
-        media: 'Call PLN 123',
-        nama_posko: 'POSKO CIRACAS'
-      }
-    ]
-  }
-})
 </script>

src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
     <Type6 @update:filters="(value) => (filters = value)" />
   </Filters>
 
@@ -7,9 +7,10 @@
     <DxDataGrid
       ref="dataGridRef"
       :allow-column-reordering="true"
+      @option-changed="handleRequestChange"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
-      v-if="loadingData == false"
+      :remote-operations="true"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -31,15 +32,7 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible.sync="loadingData"
-        :enabled="true"
-      /> -->
+      <DxLoadPanel :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -47,11 +40,12 @@
         :allow-export-selected-data="false"
       />
       <DxColumn
-        css-class="custom-table-column"
+        :allow-sorting="false"
+        css-class="custom-table-column !text-right"
         :width="50"
         alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
+        data-field="no"
         caption="No"
       />
       <DxColumn
@@ -310,7 +304,6 @@
           :row-alternation-enabled="true"
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
-          @exporting="onExporting"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -324,13 +317,12 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-          <DxExport
+          <!-- <DxExport
             :enabled="true"
             :formats="['pdf', 'xlsx', 'document']"
             :allow-export-selected-data="false"
-          />
+          /> -->
 
           <DxColumn
             css-class="custom-table-column"
@@ -415,49 +407,51 @@
     </div>
   </DetailDialog>
 
-  <BufferDialog v-if="loadingData || loadingSubData" />
+  <BufferDialog v-if="loadingSubData" />
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type6 from '@/components/Form/FiltersType/Type6.vue'
-import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
+import CustomStore from 'devextreme/data/custom_store'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
-  DxExport,
   DxLoadPanel,
+  DxExport,
   DxPager,
   DxPaging,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
-import InputText from '@/components/InputText.vue'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { ref, reactive } from 'vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, isNumber } from '@/utils/numbers'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_MLD1K'
-import { apolloClient } from '@/utils/api/api.graphql'
-import { provideApolloClient } from '@vue/apollo-composable'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const client = apolloClient()
-provideApolloClient(client)
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const data = ref<any[]>([])
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
+
+const reportData: any = ref(null)
 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 detailType = ref('form') // form, table
-
+const detailType = ref('form')
+const dataGridRef = ref<DxDataGrid | null>(null)
 const filters = ref()
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -468,6 +462,56 @@ const reportMeta = ref({
   maxJmlLapor: 1
 })
 
+const allowTableRequest = ref(false)
+const data = new CustomStore({
+  load: async (loadOptions: any) => {
+    if (allowTableRequest.value) {
+      loadOptions.requireTotalCount = true
+
+      const query = {
+        skip: loadOptions.skip,
+        take: loadOptions.take,
+        sort: loadOptions.sort ? loadOptions.sort : null,
+        filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
+        requireTotalCount: loadOptions.requireTotalCount,
+        ...createQuery(filters.value)
+      }
+
+      return await requestGraphQl(
+        queries.gangguan.daftar.ssdaftarGangguanMelaporLebihDariSatuKali,
+        query
+      )
+        .then((result) => {
+          const response = result.data.data.ssdaftarGangguanMelaporLebihDariSatuKali
+
+          let no = query.skip ?? 0
+
+          for (const data of response.data) {
+            data.no = ++no
+          }
+
+          return {
+            data: response.data,
+            totalCount: response.totalCount
+          }
+        })
+        .catch((err) => {
+          throw Error(err)
+        })
+        .finally(() => {
+          reportMeta.value = filters.value
+        })
+    } else {
+      return new Promise(function (resolve) {
+        resolve({
+          data: [],
+          totalCount: 0
+        })
+      })
+    }
+  }
+})
+
 const setDetailType = (columnCaption: string) => {
   if (columnCaption == 'Jml Lapor') {
     detailType.value = 'table'
@@ -477,7 +521,6 @@ const setDetailType = (columnCaption: string) => {
 }
 
 const getDetail = async () => {
-  const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
   const query = {
@@ -503,14 +546,16 @@ const getDetail = async () => {
     })
 }
 
-const dataGridRef = ref<DxDataGrid | null>(null)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
 }
+
 const showDetail = () => {
   clearSelection()
+
   dataSubSelected.value = null
+
   if (detailType.value == 'table') {
     getDetail()
   } else {
@@ -521,28 +566,102 @@ const showDetail = () => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
+
     showDetail()
   }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
+
   dataSubSelected.value = data
 }
 
 const closeDialog = () => (dialogDetail.value = false)
 
 const resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
   dataSub.value = []
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  if (e.name === 'searchPanel') {
+    if (e.value !== '') {
+      requestOptions.filter = createSearchOptions(e.value)
+    } else {
+      requestOptions.filter = null
+    }
+  }
+
+  if (e.name === 'paging') {
+    requestOptions.take = e.value
+  }
+
+  if (e.name === 'columns') {
+    const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
+    const columnDataField = e.component.columnOption(columnIndex).dataField
+
+    requestOptions.sort = [
+      {
+        selector: columnDataField,
+        desc: e.value === 'desc'
+      }
+    ]
+  }
+}
+
+const createSearchOptions = (keyword: string) => {
+  const dataGrid = dataGridRef.value!.instance!
+  const columns = dataGrid.getVisibleColumns()
+
+  const searchOptions = []
+
+  for (const column of columns) {
+    if (column.dataField === 'no' || !column.dataField) {
+      continue
+    }
+
+    searchOptions.push({
+      field: column.dataField,
+      value: keyword
+    })
+  }
+
+  return searchOptions
+}
+
+const mapSearchOptions = (searchOptions: any) => {
+  const result = searchOptions.map((option: any) => {
+    if (Array.isArray(option) && option[0] !== 'no') {
+      return {
+        field: option[0],
+        value: option[2]
+      }
+    }
+  })
+
+  return result.filter((item: any) => item)
+}
+
+const filterData = () => {
+  allowTableRequest.value = true
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const createQuery = (params: any) => {
   const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const query = {
+  return {
     minJmlLapor: minJmlLapor ? minJmlLapor : 1,
     maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
     dateFrom: dateValue[0]
@@ -555,131 +674,31 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   }
-  loadingData.value = true
-  await requestGraphQl(queries.gangguan.daftar.melaporLebihDariSatuKali, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarGangguanMelaporLebihDariSatuKali
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loadingData.value = false
-    })
 }
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+const onExporting = async (e: any) => {
+  const dataGrid = dataGridRef.value!.instance!
+
+  if (e.format === 'pdf' || e.format === 'document') {
+    reportData.value = await data.load()
+  }
+
+  if (e.format === 'pdf' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const pdf = await exportToPDF(reportMeta, reportData)
+
+    if (pdf) {
+      dataGrid.endCustomLoading()
+    }
   } else if (e.format === 'xlsx') {
-    exportToXLSX(reportMeta, data, e)
-  } else {
-    exportToDOCX(reportMeta, data)
+    await exportToXLSX(reportMeta, e)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'G5423020100150',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '01-02-2023 00:16:17',
-        waktu_response: '01-02-2023 00:56:28',
-        waktu_recovery: '01-02-2023 01:00:37',
-        jumlah_lapor: 0,
-        durasi_response_time: 2411,
-        durasi_recovery_time: 249,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Raihana S. Rahmahadi',
-        alamat_pelapor: 'JL BKT RAFLESIA N8-16',
-        no_telp_pelapor: '6282138889101',
-        keterangan_pelapor:
-          'MCB LEMAH DAYA RI/2200VA. SESUAI INFO PELANGGAN SUDAH ADA PETUGAS YANG MENGHUBUNGI DIINFORMASIKAN AKAN ADA PETUGAS YANG DATANG KE LOKASI.',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020100985',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '01-02-2023 03:09:50',
-        waktu_response: '01-02-2023 03:42:40',
-        waktu_recovery: '01-02-2023 03:49:35',
-        jumlah_lapor: 0,
-        durasi_response_time: 1970,
-        durasi_recovery_time: 415,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Risky Ariyanto',
-        alamat_pelapor: 'JL JANKES AD No. RT.7 RW.2',
-        no_telp_pelapor: '6285240208016',
-        keterangan_pelapor: 'gagal isi token dan di meteran ada tulisan Periksa',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020101461',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '01-02-2023 05:38:01',
-        waktu_response: '01-02-2023 05:48:13',
-        waktu_recovery: '01-02-2023 05:54:06',
-        jumlah_lapor: 0,
-        durasi_response_time: 612,
-        durasi_recovery_time: 353,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Junaedi Muntoro',
-        alamat_pelapor: 'PR BKT GOLF ARCADIA BLK G.06 No.5 CBBR',
-        no_telp_pelapor: '628111588806',
-        keterangan_pelapor:
-          'Mohon bantuan isi token PLN 3214732093\\n\\nPT. KARYA CANTIKA KUSUMA\\n\\nBukit Golf Riverside\\nKluster Arcadia Blok G6/5\\nBojong Nangka Gunung Putri Bogor\\n\\nGagal isi Tokel Tertera Meteran TERPERIKSA.\\n\\nMOHON BANTUAN PAK..',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020101612',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '01-02-2023 05:54:33',
-        waktu_response: '01-01-1970 00:00:00',
-        waktu_recovery: '01-01-1970 00:00:00',
-        jumlah_lapor: 0,
-        durasi_response_time: 0,
-        durasi_recovery_time: 0,
-        status_akhir: 'Dibatalkan',
-        idpel_nometer: '',
-        nama_pelapor: 'Raihana S. Rahmahadi',
-        alamat_pelapor: 'JL BKT RAFLESIA N8-16',
-        no_telp_pelapor: '6282138889101',
-        keterangan_pelapor: 'listrik turun lagi setelah diganti mcb oleh petugas jam 1 malam',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5523020100067',
-        pembuat_laporan: 'CC.55.SUMIATI',
-        waktu_lapor: '01-02-2023 05:57:02',
-        waktu_response: '01-02-2023 06:18:55',
-        waktu_recovery: '01-01-1970 00:00:00',
-        jumlah_lapor: 0,
-        durasi_response_time: 0,
-        durasi_recovery_time: 0,
-        status_akhir: 'Dibatalkan',
-        idpel_nometer: '',
-        nama_pelapor: 'BP ANAL ',
-        alamat_pelapor: 'JL MANUNGGAL RT 05 RW 02 KEL KELAPA  DUA WETAN KEC CIRACAS JAKARTA TIMUR ',
-        no_telp_pelapor: '6285777592240',
-        keterangan_pelapor: 'BANYAK RUMAH PADAM ',
-        media: 'Call PLN 123',
-        nama_posko: 'POSKO CIRACAS'
-      }
-    ]
-  }
-})
 </script>

src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
     <Type7
       @update:filters="(value) => (filters = value)"
       :sla-options="[
@@ -22,10 +22,11 @@
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
+      @option-changed="handleRequestChange"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
-      v-if="loading == false"
+      :remote-operations="true"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -37,6 +38,7 @@
       @selection-changed="onSelectionChanged"
       column-resizing-mode="widget"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -47,16 +49,6 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -64,11 +56,12 @@
         :allow-export-selected-data="false"
       />
       <DxColumn
-        css-class="custom-table-column"
+        :allow-sorting="false"
+        css-class="custom-table-column !text-right"
         :width="50"
         alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
+        data-field="no"
         caption="No"
       />
 
@@ -312,8 +305,6 @@
       </div>
     </div>
   </DetailDialog>
-
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -321,8 +312,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type7 from '@/components/Form/FiltersType/Type7.vue'
+import CustomStore from 'devextreme/data/custom_store'
+
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import { ref, reactive } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -333,50 +326,167 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import {
   exportToPDF,
   exportToXLSX,
   exportToDOCX
 } from '@/report/Gangguan/Daftar/DGangguan_RecoveryTime'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const data = ref<any[]>([])
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
+const reportData: any = ref(null)
 const dataGridRef = ref<DxDataGrid | null>(null)
-const loading = ref(false)
-const clearSelection = () => {
-  const dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  if (selectedRowsData[0] != undefined) {
-    dataSelected.value = selectedRowsData[0]
-  }
-  clearSelection()
-  showDetail()
-}
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  periode: '',
+  minTime: '',
+  maxTime: ''
+})
 
-const showDetail = () => (dialogDetail.value = true)
+const allowTableRequest = ref(false)
+const data = new CustomStore({
+  load: async (loadOptions: any) => {
+    if (allowTableRequest.value) {
+      loadOptions.requireTotalCount = true
+
+      const query = {
+        skip: loadOptions.skip,
+        take: loadOptions.take,
+        sort: loadOptions.sort ? loadOptions.sort : null,
+        filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
+        requireTotalCount: loadOptions.requireTotalCount,
+        ...createQuery(filters.value)
+      }
+
+      return await requestGraphQl(queries.gangguan.daftar.ssdaftarGangguanRecoveryTime, query)
+        .then((result) => {
+          const response = result.data.data.ssdaftarGangguanRecoveryTime
+
+          let no = query.skip ?? 0
+
+          for (const data of response.data) {
+            data.no = ++no
+          }
+
+          return {
+            data: response.data,
+            totalCount: response.totalCount
+          }
+        })
+        .catch((err) => {
+          throw Error(err)
+        })
+        .finally(() => {
+          reportMeta.value = filters.value
+        })
+    } else {
+      return new Promise(function (resolve) {
+        resolve({
+          data: [],
+          totalCount: 0
+        })
+      })
+    }
+  }
+})
 
 const closeDialog = () => (dialogDetail.value = false)
 
 const resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  if (e.name === 'searchPanel') {
+    if (e.value !== '') {
+      requestOptions.filter = createSearchOptions(e.value)
+    } else {
+      requestOptions.filter = null
+    }
+  }
+
+  if (e.name === 'paging') {
+    requestOptions.take = e.value
+  }
+
+  if (e.name === 'columns') {
+    const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
+    const columnDataField = e.component.columnOption(columnIndex).dataField
+
+    requestOptions.sort = [
+      {
+        selector: columnDataField,
+        desc: e.value === 'desc'
+      }
+    ]
+  }
+}
+
+const createSearchOptions = (keyword: string) => {
+  const dataGrid = dataGridRef.value!.instance!
+  const columns = dataGrid.getVisibleColumns()
+
+  const searchOptions = []
+
+  for (const column of columns) {
+    if (column.dataField === 'no' || !column.dataField) {
+      continue
+    }
+
+    searchOptions.push({
+      field: column.dataField,
+      value: keyword
+    })
+  }
+
+  return searchOptions
+}
+
+const mapSearchOptions = (searchOptions: any) => {
+  const result = searchOptions.map((option: any) => {
+    if (Array.isArray(option) && option[0] !== 'no') {
+      return {
+        field: option[0],
+        value: option[2]
+      }
+    }
+  })
+
+  return result.filter((item: any) => item)
+}
+
+const filterData = () => {
+  allowTableRequest.value = true
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const createQuery = (params: any) => {
   const { minTime, maxTime, posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const query = {
+  return {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -389,147 +499,48 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   }
-  loading.value = true
-  await requestGraphQl(queries.gangguan.daftar.recoveryTime, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarGangguanRecoveryTime
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
+}
+
+const showDetail = () => {
+  dialogDetail.value = true
+  clearSelection()
+}
+
+const onExporting = async (e: any) => {
+  const dataGrid = dataGridRef.value!.instance!
+
+  if (e.format === 'pdf' || e.format === 'document') {
+    reportData.value = await data.load()
+  }
+
+  if (e.format === 'pdf' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const pdf = await exportToPDF(reportMeta, reportData)
+
+    if (pdf) {
+      dataGrid.endCustomLoading()
+    }
   } else if (e.format === 'xlsx') {
-    exportToXLSX(reportMeta, data, e)
-  } else {
-    exportToDOCX(reportMeta, data)
+    exportToXLSX(reportMeta, e)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
-
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  posko: { id: 0, name: 'Semua Posko' },
-  periode: '',
-  minTime: '',
-  maxTime: ''
-})
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'G5423020100150',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '01-02-2023 00:16:17',
-        waktu_response: '01-02-2023 00:56:28',
-        waktu_recovery: '01-02-2023 01:00:37',
-        durasi_response_time: 2411,
-        durasi_recovery_time: 249,
-        status_akhir: 'Selesai',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        idpel_nometer: '',
-        nama_pelapor: 'Raihana S. Rahmahadi',
-        alamat_pelapor: 'JL BKT RAFLESIA N8-16',
-        no_telp_pelapor: '6282138889101',
-        keterangan_pelapor:
-          'MCB LEMAH DAYA RI/2200VA. SESUAI INFO PELANGGAN SUDAH ADA PETUGAS YANG MENGHUBUNGI DIINFORMASIKAN AKAN ADA PETUGAS YANG DATANG KE LOKASI.',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020100985',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '01-02-2023 03:09:50',
-        waktu_response: '01-02-2023 03:42:40',
-        waktu_recovery: '01-02-2023 03:49:35',
-        durasi_response_time: 1970,
-        durasi_recovery_time: 415,
-        status_akhir: 'Selesai',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        idpel_nometer: '',
-        nama_pelapor: 'Risky Ariyanto',
-        alamat_pelapor: 'JL JANKES AD No. RT.7 RW.2',
-        no_telp_pelapor: '6285240208016',
-        keterangan_pelapor: 'gagal isi token dan di meteran ada tulisan Periksa',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020101461',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '01-02-2023 05:38:01',
-        waktu_response: '01-02-2023 05:48:13',
-        waktu_recovery: '01-02-2023 05:54:06',
-        durasi_response_time: 612,
-        durasi_recovery_time: 353,
-        status_akhir: 'Selesai',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        idpel_nometer: '',
-        nama_pelapor: 'Junaedi Muntoro',
-        alamat_pelapor: 'PR BKT GOLF ARCADIA BLK G.06 No.5 CBBR',
-        no_telp_pelapor: '628111588806',
-        keterangan_pelapor:
-          'Mohon bantuan isi token PLN 3214732093\\n\\nPT. KARYA CANTIKA KUSUMA\\n\\nBukit Golf Riverside\\nKluster Arcadia Blok G6/5\\nBojong Nangka Gunung Putri Bogor\\n\\nGagal isi Tokel Tertera Meteran TERPERIKSA.\\n\\nMOHON BANTUAN PAK..',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5523020100067',
-        pembuat_laporan: 'CC.55.SUMIATI',
-        waktu_lapor: '01-02-2023 05:57:02',
-        waktu_response: '01-02-2023 06:18:55',
-        waktu_recovery: '01-01-1970 00:00:00',
-        durasi_response_time: 1313,
-        durasi_recovery_time: 33958236,
-        status_akhir: 'Dibatalkan',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        idpel_nometer: '',
-        nama_pelapor: 'BP ANAL ',
-        alamat_pelapor: 'JL MANUNGGAL RT 05 RW 02 KEL KELAPA  DUA WETAN KEC CIRACAS JAKARTA TIMUR ',
-        no_telp_pelapor: '6285777592240',
-        keterangan_pelapor: 'BANYAK RUMAH PADAM ',
-        media: 'Call PLN 123',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020103015',
-        pembuat_laporan: 'CC.54.EKA.CSOI',
-        waktu_lapor: '01-02-2023 07:39:03',
-        waktu_response: '01-02-2023 08:14:56',
-        waktu_recovery: '01-02-2023 08:19:32',
-        durasi_response_time: 2153,
-        durasi_recovery_time: 276,
-        status_akhir: 'Selesai',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU DIN',
-        alamat_pelapor:
-          'JL. HAJI MIUN NO.97 RT. 1 RW 2 KEL KALISARI KEC. PASAR REBO JAKTIM, SEBERANG CAFE LAW COFFE ',
-        no_telp_pelapor: '082112050265',
-        keterangan_pelapor: 'MCB LEMAH DAYA 1.300 VA ',
-        media: 'Call PLN 123',
-        nama_posko: 'POSKO CIRACAS'
-      }
-    ]
-  }
-})
 </script>

src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
     <Type7 @update:filters="(value) => (filters = value)" />
   </Filters>
 
@@ -9,7 +9,8 @@
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
-      v-if="loading == false"
+      @option-changed="handleRequestChange"
+      :remote-operations="true"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -21,6 +22,7 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -31,16 +33,6 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -48,13 +40,13 @@
         :allow-export-selected-data="false"
       />
       <DxColumn
-        css-class="custom-table-column"
+        :allow-sorting="false"
+        css-class="custom-table-column !text-right"
         :width="50"
         alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
+        data-field="no"
         caption="No"
-        cell-template="cellCenter"
       />
 
       <DxColumn
@@ -309,71 +301,191 @@
       </div>
     </div>
   </DetailDialog>
-
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type7 from '@/components/Form/FiltersType/Type7.vue'
-import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
+import CustomStore from 'devextreme/data/custom_store'
+
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
-  DxExport,
   DxLoadPanel,
+  DxExport,
   DxPager,
   DxPaging,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
-import InputText from '@/components/InputText.vue'
-import { useQuery } from '@vue/apollo-composable'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { ref, reactive } from 'vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import {
   exportToPDF,
   exportToXLSX,
   exportToDOCX
 } from '@/report/Gangguan/Daftar/DGangguan_ResponseTime'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const data = ref<any[]>([])
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
+const reportData: any = ref(null)
 const dataGridRef = ref<DxDataGrid | null>(null)
-const loading = ref(false)
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  periode: '',
+  minTime: '',
+  maxTime: ''
+})
+
+const allowTableRequest = ref(false)
+const data = new CustomStore({
+  load: async (loadOptions: any) => {
+    if (allowTableRequest.value) {
+      loadOptions.requireTotalCount = true
+
+      const query = {
+        skip: loadOptions.skip,
+        take: loadOptions.take,
+        sort: loadOptions.sort ? loadOptions.sort : null,
+        filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
+        requireTotalCount: loadOptions.requireTotalCount,
+        ...createQuery(filters.value)
+      }
+
+      return await requestGraphQl(queries.gangguan.daftar.ssdaftarGangguanResponseTime, query)
+        .then((result) => {
+          const response = result.data.data.ssdaftarGangguanResponseTime
+
+          let no = query.skip ?? 0
+
+          for (const data of response.data) {
+            data.no = ++no
+          }
+
+          return {
+            data: response.data,
+            totalCount: response.totalCount
+          }
+        })
+        .catch((err) => {
+          throw Error(err)
+        })
+        .finally(() => {
+          reportMeta.value = filters.value
+        })
+    } else {
+      return new Promise(function (resolve) {
+        resolve({
+          data: [],
+          totalCount: 0
+        })
+      })
+    }
+  }
+})
+
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
 }
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  if (selectedRowsData[0] != undefined) {
-    dataSelected.value = selectedRowsData[0]
-  }
-  clearSelection()
-  showDetail()
-}
-
-const showDetail = () => (dialogDetail.value = true)
-
-const closeDialog = () => (dialogDetail.value = false)
 
 const resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  if (e.name === 'searchPanel') {
+    if (e.value !== '') {
+      requestOptions.filter = createSearchOptions(e.value)
+    } else {
+      requestOptions.filter = null
+    }
+  }
+
+  if (e.name === 'paging') {
+    requestOptions.take = e.value
+  }
+
+  if (e.name === 'columns') {
+    const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
+    const columnDataField = e.component.columnOption(columnIndex).dataField
+
+    requestOptions.sort = [
+      {
+        selector: columnDataField,
+        desc: e.value === 'desc'
+      }
+    ]
+  }
+}
+
+const createSearchOptions = (keyword: string) => {
+  const dataGrid = dataGridRef.value!.instance!
+  const columns = dataGrid.getVisibleColumns()
+
+  const searchOptions = []
+
+  for (const column of columns) {
+    if (column.dataField === 'no' || !column.dataField) {
+      continue
+    }
+
+    searchOptions.push({
+      field: column.dataField,
+      value: keyword
+    })
+  }
+
+  return searchOptions
+}
+
+const mapSearchOptions = (searchOptions: any) => {
+  const result = searchOptions.map((option: any) => {
+    if (Array.isArray(option) && option[0] !== 'no') {
+      return {
+        field: option[0],
+        value: option[2]
+      }
+    }
+  })
+
+  return result.filter((item: any) => item)
+}
+
+const filterData = () => {
+  allowTableRequest.value = true
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const createQuery = (params: any) => {
   const { minTime, maxTime, posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const query = {
+  return {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -386,157 +498,44 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   }
-  loading.value = true
-  await requestGraphQl(queries.gangguan.daftar.responseTime, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarGangguanResponseTime
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+
+  clearSelection()
+  showDetail()
+}
+
+const showDetail = () => (dialogDetail.value = true)
+
+const closeDialog = () => (dialogDetail.value = false)
+
+const onExporting = async (e: any) => {
+  const dataGrid = dataGridRef.value!.instance!
+
+  if (e.format === 'pdf' || e.format === 'document') {
+    reportData.value = await data.load()
+  }
+
+  if (e.format === 'pdf' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const pdf = await exportToPDF(reportMeta, reportData)
+
+    if (pdf) {
+      dataGrid.endCustomLoading()
+    }
   } else if (e.format === 'xlsx') {
-    exportToXLSX(reportMeta, data, e)
-  } else {
-    exportToDOCX(reportMeta, data)
+    exportToXLSX(reportMeta, e)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
-
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  posko: { id: 0, name: 'Semua Posko' },
-  periode: '',
-  minTime: '',
-  maxTime: ''
-})
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'G5423020100150',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '01-02-2023 00:16:17',
-        waktu_response: '01-02-2023 00:56:28',
-        waktu_recovery: '01-02-2023 01:00:37',
-        durasi_response_time: 2411,
-        durasi_recovery_time: 249,
-        status_akhir: 'Selesai',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        idpel_nometer: '',
-        nama_pelapor: 'Raihana S. Rahmahadi',
-        alamat_pelapor: 'JL BKT RAFLESIA N8-16',
-        no_telp_pelapor: '6282138889101',
-        keterangan_pelapor:
-          'MCB LEMAH DAYA RI/2200VA. SESUAI INFO PELANGGAN SUDAH ADA PETUGAS YANG MENGHUBUNGI DIINFORMASIKAN AKAN ADA PETUGAS YANG DATANG KE LOKASI.',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS',
-        penyebab: 'P3124142424',
-        tindakan: 'P3124142424'
-      },
-      {
-        no_laporan: 'G5423020100985',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '01-02-2023 03:09:50',
-        waktu_response: '01-02-2023 03:42:40',
-        waktu_recovery: '01-02-2023 03:49:35',
-        durasi_response_time: 1970,
-        durasi_recovery_time: 415,
-        status_akhir: 'Selesai',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        idpel_nometer: '',
-        nama_pelapor: 'Risky Ariyanto',
-        alamat_pelapor: 'JL JANKES AD No. RT.7 RW.2',
-        no_telp_pelapor: '6285240208016',
-        keterangan_pelapor: 'gagal isi token dan di meteran ada tulisan Periksa',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS',
-        penyebab: 'P3124142424',
-        tindakan: 'P3124142424'
-      },
-      {
-        no_laporan: 'G5423020101461',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '01-02-2023 05:38:01',
-        waktu_response: '01-02-2023 05:48:13',
-        waktu_recovery: '01-02-2023 05:54:06',
-        durasi_response_time: 612,
-        durasi_recovery_time: 353,
-        status_akhir: 'Selesai',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        idpel_nometer: '',
-        nama_pelapor: 'Junaedi Muntoro',
-        alamat_pelapor: 'PR BKT GOLF ARCADIA BLK G.06 No.5 CBBR',
-        no_telp_pelapor: '628111588806',
-        keterangan_pelapor:
-          'Mohon bantuan isi token PLN 3214732093\\n\\nPT. KARYA CANTIKA KUSUMA\\n\\nBukit Golf Riverside\\nKluster Arcadia Blok G6/5\\nBojong Nangka Gunung Putri Bogor\\n\\nGagal isi Tokel Tertera Meteran TERPERIKSA.\\n\\nMOHON BANTUAN PAK..',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS',
-        penyebab: 'P3124142424',
-        tindakan: 'P3124142424'
-      },
-      {
-        no_laporan: 'G5523020100067',
-        pembuat_laporan: 'CC.55.SUMIATI',
-        waktu_lapor: '01-02-2023 05:57:02',
-        waktu_response: '01-02-2023 06:18:55',
-        waktu_recovery: '01-01-1970 00:00:00',
-        durasi_response_time: 1313,
-        durasi_recovery_time: 0,
-        status_akhir: 'Dibatalkan',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        idpel_nometer: '',
-        nama_pelapor: 'BP ANAL ',
-        alamat_pelapor: 'JL MANUNGGAL RT 05 RW 02 KEL KELAPA  DUA WETAN KEC CIRACAS JAKARTA TIMUR ',
-        no_telp_pelapor: '6285777592240',
-        keterangan_pelapor: 'BANYAK RUMAH PADAM ',
-        media: 'Call PLN 123',
-        nama_posko: 'POSKO CIRACAS',
-        penyebab: 'P3124142424',
-        tindakan: 'P3124142424'
-      },
-      {
-        no_laporan: 'G5423020103015',
-        pembuat_laporan: 'CC.54.EKA.CSOI',
-        waktu_lapor: '01-02-2023 07:39:03',
-        waktu_response: '01-02-2023 08:14:56',
-        waktu_recovery: '01-02-2023 08:19:32',
-        durasi_response_time: 2153,
-        durasi_recovery_time: 276,
-        status_akhir: 'Selesai',
-        is_marking: 0,
-        referensi_marking: 'P3124142424',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU DIN',
-        alamat_pelapor:
-          'JL. HAJI MIUN NO.97 RT. 1 RW 2 KEL KALISARI KEC. PASAR REBO JAKTIM, SEBERANG CAFE LAW COFFE ',
-        no_telp_pelapor: '082112050265',
-        keterangan_pelapor: 'MCB LEMAH DAYA 1.300 VA ',
-        media: 'Call PLN 123',
-        nama_posko: 'POSKO CIRACAS',
-        penyebab: 'P3124142424',
-        tindakan: 'P3124142424'
-      }
-    ]
-  }
-})
 </script>

src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
     <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
 
@@ -7,9 +7,10 @@
     <DxDataGrid
       ref="dataGridRef"
       :allow-column-reordering="true"
+      @option-changed="handleRequestChange"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
-      v-if="loading == false"
+      :remote-operations="true"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -21,6 +22,7 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -31,16 +33,6 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -48,11 +40,12 @@
         :allow-export-selected-data="false"
       />
       <DxColumn
-        css-class="custom-table-column"
+        :allow-sorting="false"
+        css-class="custom-table-column !text-right"
         :width="50"
         alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
+        data-field="no"
         caption="No"
       />
 
@@ -281,8 +274,6 @@
       </div>
     </div>
   </DetailDialog>
-
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -290,8 +281,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
+import CustomStore from 'devextreme/data/custom_store'
+
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import { reactive, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -302,46 +295,164 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToDOCX, exportToXLSX } from '@/report/Gangguan/Daftar/DGangguan_STIDP'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const data = ref<any[]>([])
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
+const reportData: any = ref(null)
 const dataGridRef = ref<DxDataGrid | null>(null)
-const loading = ref(false)
-const clearSelection = () => {
-  const dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  if (selectedRowsData[0] != undefined) {
-    dataSelected.value = selectedRowsData[0]
-  }
-  clearSelection()
-  showDetail()
-}
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  periode: ''
+})
 
-const showDetail = () => (dialogDetail.value = true)
+const allowTableRequest = ref(false)
+const data = new CustomStore({
+  load: async (loadOptions: any) => {
+    if (allowTableRequest.value) {
+      loadOptions.requireTotalCount = true
+
+      const query = {
+        skip: loadOptions.skip,
+        take: loadOptions.take,
+        sort: loadOptions.sort ? loadOptions.sort : null,
+        filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
+        requireTotalCount: loadOptions.requireTotalCount,
+        ...createQuery(filters.value)
+      }
+
+      return await requestGraphQl(
+        queries.gangguan.daftar.ssdaftarGangguanSelesaiTanpaIdPelanggan,
+        query
+      )
+        .then((result) => {
+          const response = result.data.data.ssdaftarGangguanSelesaiTanpaIdPelanggan
+
+          let no = query.skip ?? 0
+
+          for (const data of response.data) {
+            data.no = ++no
+          }
+
+          return {
+            data: response.data,
+            totalCount: response.totalCount
+          }
+        })
+        .catch((err) => {
+          throw Error(err)
+        })
+        .finally(() => {
+          reportMeta.value = filters.value
+        })
+    } else {
+      return new Promise(function (resolve) {
+        resolve({
+          data: [],
+          totalCount: 0
+        })
+      })
+    }
+  }
+})
 
 const closeDialog = () => (dialogDetail.value = false)
 
 const resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  if (e.name === 'searchPanel') {
+    if (e.value !== '') {
+      requestOptions.filter = createSearchOptions(e.value)
+    } else {
+      requestOptions.filter = null
+    }
+  }
+
+  if (e.name === 'paging') {
+    requestOptions.take = e.value
+  }
+
+  if (e.name === 'columns') {
+    const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
+    const columnDataField = e.component.columnOption(columnIndex).dataField
+
+    requestOptions.sort = [
+      {
+        selector: columnDataField,
+        desc: e.value === 'desc'
+      }
+    ]
+  }
+}
+
+const createSearchOptions = (keyword: string) => {
+  const dataGrid = dataGridRef.value!.instance!
+  const columns = dataGrid.getVisibleColumns()
+
+  const searchOptions = []
+
+  for (const column of columns) {
+    if (column.dataField === 'no' || !column.dataField) {
+      continue
+    }
+
+    searchOptions.push({
+      field: column.dataField,
+      value: keyword
+    })
+  }
+
+  return searchOptions
+}
+
+const mapSearchOptions = (searchOptions: any) => {
+  const result = searchOptions.map((option: any) => {
+    if (Array.isArray(option) && option[0] !== 'no') {
+      return {
+        field: option[0],
+        value: option[2]
+      }
+    }
+  })
+
+  return result.filter((item: any) => item)
+}
+
+const filterData = () => {
+  allowTableRequest.value = true
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const createQuery = (params: any) => {
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const query = {
+  return {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -352,135 +463,46 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   }
-  loading.value = true
-  await requestGraphQl(queries.gangguan.daftar.selesaiTanpaIDPelanggan, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarGangguanSelesaiTanpaIdPelanggan
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  clearSelection()
+  showDetail()
+}
+
+const showDetail = () => (dialogDetail.value = true)
+
+const onExporting = async (e: any) => {
+  const dataGrid = dataGridRef.value!.instance!
+
+  if (e.format === 'pdf' || e.format === 'document') {
+    reportData.value = await data.load()
+  }
+
+  if (e.format === 'pdf' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const pdf = await exportToPDF(reportMeta, reportData)
+
+    if (pdf) {
+      dataGrid.endCustomLoading()
+    }
   } else if (e.format === 'xlsx') {
-    exportToXLSX(reportMeta, data, e)
-  } else {
-    exportToDOCX(reportMeta, data)
+    exportToXLSX(reportMeta, e)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
-
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  posko: { id: 0, name: 'Semua Posko' },
-  periode: ''
-})
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'G5423020100150',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '01-02-2023 00:16:17',
-        waktu_response: '01-02-2023 00:56:28',
-        waktu_recovery: '01-02-2023 01:00:37',
-        durasi_response_time: 2411,
-        durasi_recovery_time: 249,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Raihana S. Rahmahadi',
-        alamat_pelapor: 'JL BKT RAFLESIA N8-16',
-        no_telp_pelapor: '6282138889101',
-        keterangan_pelapor:
-          'MCB LEMAH DAYA RI/2200VA. SESUAI INFO PELANGGAN SUDAH ADA PETUGAS YANG MENGHUBUNGI DIINFORMASIKAN AKAN ADA PETUGAS YANG DATANG KE LOKASI.',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020100985',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '01-02-2023 03:09:50',
-        waktu_response: '01-02-2023 03:42:40',
-        waktu_recovery: '01-02-2023 03:49:35',
-        durasi_response_time: 1970,
-        durasi_recovery_time: 415,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Risky Ariyanto',
-        alamat_pelapor: 'JL JANKES AD No. RT.7 RW.2',
-        no_telp_pelapor: '6285240208016',
-        keterangan_pelapor: 'gagal isi token dan di meteran ada tulisan Periksa',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020101461',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '01-02-2023 05:38:01',
-        waktu_response: '01-02-2023 05:48:13',
-        waktu_recovery: '01-02-2023 05:54:06',
-        durasi_response_time: 612,
-        durasi_recovery_time: 353,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Junaedi Muntoro',
-        alamat_pelapor: 'PR BKT GOLF ARCADIA BLK G.06 No.5 CBBR',
-        no_telp_pelapor: '628111588806',
-        keterangan_pelapor:
-          'Mohon bantuan isi token PLN 3214732093\\n\\nPT. KARYA CANTIKA KUSUMA\\n\\nBukit Golf Riverside\\nKluster Arcadia Blok G6/5\\nBojong Nangka Gunung Putri Bogor\\n\\nGagal isi Tokel Tertera Meteran TERPERIKSA.\\n\\nMOHON BANTUAN PAK..',
-        media: 'PLN Mobile',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5523020100067',
-        pembuat_laporan: 'CC.55.SUMIATI',
-        waktu_lapor: '01-02-2023 05:57:02',
-        waktu_response: '01-02-2023 06:18:55',
-        waktu_recovery: '01-01-1970 00:00:00',
-        durasi_response_time: 1313,
-        durasi_recovery_time: 33948072,
-        status_akhir: 'Dibatalkan',
-        idpel_nometer: '',
-        nama_pelapor: 'BP ANAL ',
-        alamat_pelapor: 'JL MANUNGGAL RT 05 RW 02 KEL KELAPA  DUA WETAN KEC CIRACAS JAKARTA TIMUR ',
-        no_telp_pelapor: '6285777592240',
-        keterangan_pelapor: 'BANYAK RUMAH PADAM ',
-        media: 'Call PLN 123',
-        nama_posko: 'POSKO CIRACAS'
-      },
-      {
-        no_laporan: 'G5423020103015',
-        pembuat_laporan: 'CC.54.EKA.CSOI',
-        waktu_lapor: '01-02-2023 07:39:03',
-        waktu_response: '01-02-2023 08:14:56',
-        waktu_recovery: '01-02-2023 08:19:32',
-        durasi_response_time: 2153,
-        durasi_recovery_time: 276,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU DIN',
-        alamat_pelapor:
-          'JL. HAJI MIUN NO.97 RT. 1 RW 2 KEL KALISARI KEC. PASAR REBO JAKTIM, SEBERANG CAFE LAW COFFE ',
-        no_telp_pelapor: '082112050265',
-        keterangan_pelapor: 'MCB LEMAH DAYA 1.300 VA ',
-        media: 'Call PLN 123',
-        nama_posko: 'POSKO CIRACAS'
-      }
-    ]
-  }
-})
 </script>

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

@@ -856,7 +856,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="pembuat_laporan"
+            data-field="media"
             caption="Sumber Lapor"
             :allow-resizing="false"
             css-class="custom-table-column"

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

@@ -1,15 +1,16 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
     <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
+      @option-changed="handleRequestChange"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
-      v-if="loading == false"
+      :remote-operations="true"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -22,6 +23,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="false"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -41,11 +43,12 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn
-        css-class="custom-table-column"
+        :allow-sorting="false"
+        css-class="custom-table-column !text-right"
         :width="50"
         alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
+        data-field="no"
         caption="No"
       />
       <DxColumn
@@ -281,7 +284,6 @@
       </div>
     </div>
   </DetailDialog>
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -289,8 +291,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
+import CustomStore from 'devextreme/data/custom_store'
+
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import { reactive, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -308,59 +312,161 @@ import {
   exportToXLSX,
   exportToDOCX
 } from '@/report/Keluhan/Daftar/DKeluhan_BerdasarMedia'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>()
 const dialogDetail = ref(false)
+const reportData: any = ref(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  periode: ''
+})
+
+const allowTableRequest = ref(false)
+const data = new CustomStore({
+  load: async (loadOptions: any) => {
+    if (allowTableRequest.value) {
+      loadOptions.requireTotalCount = true
+
+      const query = {
+        skip: loadOptions.skip,
+        take: loadOptions.take,
+        sort: loadOptions.sort ? loadOptions.sort : null,
+        filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
+        requireTotalCount: loadOptions.requireTotalCount,
+        ...createQuery(filters.value)
+      }
+
+      return await requestGraphQl(queries.keluhan.daftar.ssdaftarKeluhanBerdasarkanMedia, query)
+        .then((result) => {
+          const response = result.data.data.ssdaftarKeluhanBerdasarkanMedia
+
+          let no = query.skip ?? 0
+
+          for (const data of response.data) {
+            data.no = ++no
+          }
+
+          return {
+            data: response.data,
+            totalCount: response.totalCount
+          }
+        })
+        .catch((err) => {
+          throw Error(err)
+        })
+        .finally(() => {
+          reportMeta.value = filters.value
+        })
+    } else {
+      return new Promise(function (resolve) {
+        resolve({
+          data: [],
+          totalCount: 0
+        })
+      })
+    }
+  }
+})
 
 const closeDialog = () => {
   dialogDetail.value = false
 }
 
-const dataGridRef = ref<DxDataGrid | null>(null)
-const clearSelection = () => {
-  const dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const showDetail = () => {
-  clearSelection()
-  dialogDetail.value = true
-}
-
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  if (selectedRowsData[0] != undefined) {
-    dataSelected.value = selectedRowsData[0]
-  }
-  showDetail()
-}
-
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
-  } else if (e.format === 'xlsx') {
-    exportToXLSX(reportMeta, e)
-  } else {
-    exportToDOCX(reportMeta, data)
-  }
-}
-
-const data = ref<any[]>([])
-const loading = ref(false)
-
 const resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  if (e.name === 'searchPanel') {
+    if (e.value !== '') {
+      requestOptions.filter = createSearchOptions(e.value)
+    } else {
+      requestOptions.filter = null
+    }
+  }
+
+  if (e.name === 'paging') {
+    requestOptions.take = e.value
+  }
+
+  if (e.name === 'columns') {
+    const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
+    const columnDataField = e.component.columnOption(columnIndex).dataField
+
+    requestOptions.sort = [
+      {
+        selector: columnDataField,
+        desc: e.value === 'desc'
+      }
+    ]
+  }
+}
+
+const createSearchOptions = (keyword: string) => {
+  const dataGrid = dataGridRef.value!.instance!
+  const columns = dataGrid.getVisibleColumns()
+
+  const searchOptions = []
+
+  for (const column of columns) {
+    if (column.dataField === 'no' || !column.dataField) {
+      continue
+    }
+
+    searchOptions.push({
+      field: column.dataField,
+      value: keyword
+    })
+  }
+
+  return searchOptions
+}
+
+const mapSearchOptions = (searchOptions: any) => {
+  const result = searchOptions.map((option: any) => {
+    if (Array.isArray(option) && option[0] !== 'no') {
+      return {
+        field: option[0],
+        value: option[2]
+      }
+    }
+  })
+
+  return result.filter((item: any) => item)
+}
+
+const filterData = () => {
+  allowTableRequest.value = true
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const createQuery = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  const query = {
+  return {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -371,135 +477,48 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   }
-
-  loading.value = true
-  await requestGraphQl(queries.keluhan.daftar.keluhanBerdasarkanMedia, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarKeluhanBerdasarkanMedia
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
-  periode: ''
-})
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'K5123020100019',
-        waktu_lapor: '01/02/2023 01:59:02',
-        waktu_response: '01/02/2023 05:22:50',
-        waktu_recovery: '01/02/2023 08:33:38',
-        durasi_response_time: 12228,
-        durasi_recovery_time: 11448,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'BP AHMAD',
-        alamat_pelapor:
-          'JL BENTENGAN TIMUR NO31 RT11/03, SUNTER JAYA, TANJUNG PRIOK, KOTA ADM. JAKARTA UTARA, DKI JAKARTA',
-        no_telp_pelapor: '082320000152',
-        keterangan_pelapor:
-          'MOHON BANTUAN PEMBATALAN PERMOHONAN PB NO AGENDA 545109912301319203 DIKARENAKAN PELANGGAN INGIN KE DAYA 2200 VA, PELANGGAN SUDAH MELAKUKAN PEMBAYARAN MELALAUI GOPAY TANGGAL 31/01/2023 PUKUL 18:49 WIB, NAMUN PEMBAYARAN BELUM MASUK, MOHON KONFRIMASI KE PELANGGAN, TERIMA KASIH. ',
-        media: 'Call PLN 123',
-        waktu_media: '01/01/1970 00:00:00',
-        keterangan_media: 'x',
-        nama_ulp: 'UP3 TANJUNG PRIOK'
-      },
-      {
-        no_laporan: 'K5123020100021',
-        waktu_lapor: '01/02/2023 02:04:04',
-        waktu_response: '01/02/2023 02:26:01',
-        waktu_recovery: '01/02/2023 02:34:06',
-        durasi_response_time: 1317,
-        durasi_recovery_time: 485,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU TITIN ',
-        alamat_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
-        no_telp_pelapor: '087786974290',
-        keterangan_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
-        media: 'Call PLN 123',
-        waktu_media: '01/01/1970 00:00:00',
-        keterangan_media: 'x',
-        nama_ulp: 'ULP CIBITUNG'
-      },
-      {
-        no_laporan: 'K1423020100022',
-        waktu_lapor: '01/02/2023 03:13:25',
-        waktu_response: '01/02/2023 04:59:44',
-        waktu_recovery: '01/02/2023 07:03:37',
-        durasi_response_time: 6379,
-        durasi_recovery_time: 7433,
-        status_akhir: 'Selesai',
-        idpel_nometer: '000000000000000001820788',
-        nama_pelapor: 'IBU IRFI ',
-        alamat_pelapor:
-          'JL NIAGA 7 PERUM KEMANG BLOK F NO 23 KEC RAWA LUMBU KEL SEPANJANG JAYA KOTA BEKASI ACUAN LOKASI DEKAT RUMAH YATIM ',
-        no_telp_pelapor: '62816922683',
-        keterangan_pelapor:
-          'TIDAK BISA INPUT TOKEN SETELAH UPDATE VKRN 43 (PTL TIDAK PADAM) \\nDENGAN NO METER 56700750112 DAN SISA KWH 15.1',
-        media: 'Call PLN 123',
-        waktu_media: '01/01/1970 00:00:00',
-        keterangan_media: 'x',
-        nama_ulp: 'ULP BANTARGEBANG'
-      },
-      {
-        no_laporan: 'K5223020100106',
-        waktu_lapor: '01/02/2023 03:45:58',
-        waktu_response: '01/02/2023 06:24:51',
-        waktu_recovery: '01/02/2023 06:28:11',
-        durasi_response_time: 9533,
-        durasi_recovery_time: 200,
-        status_akhir: 'Selesai',
-        idpel_nometer: '000000000000000000943441',
-        nama_pelapor: 'IBU MELLY KURNIASIH',
-        alamat_pelapor: 'PERUMAHAN CEMPAKA ARUM JL. FLAMBOYAN 5 NO 191 CIREBON',
-        no_telp_pelapor: '08889353988',
-        keterangan_pelapor:
-          'LEBIH TAGIH. ST AK REK FEB 2023 (28/01/2023) = 4608, ST APP TGL 26/01/2023 = 4496. REK BELUM DILUNASI. (RUMAH TIDAK DIHUNI NAMUN PAGAR TIDAK TERKUNCI, PETUGAS TIDAK DIKETAHUI DATANG KE LOKASI). PELANGGAN MENGINGINKAN AGAR HAL TERSEBUT TIDAK TERULANG KEMBALI.',
-        media: 'Live Chat PLN Mobile',
-        waktu_media: '01/01/1970 00:00:00',
-        keterangan_media: 'x',
-        nama_ulp: 'ULP SUMBER'
-      },
-      {
-        no_laporan: 'K5223020100112',
-        waktu_lapor: '01/02/2023 04:16:48',
-        waktu_response: '01/02/2023 05:58:33',
-        waktu_recovery: '01/02/2023 12:02:23',
-        durasi_response_time: 6105,
-        durasi_recovery_time: 21830,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'BP HENDRIYANTO',
-        alamat_pelapor:
-          'JL.PALEM HIJAU, COKROKONTENG, RT.04 RW.2. KEL SIDOARUM. KEC GODEAN KAB SLEMAN PROV DIY',
-        no_telp_pelapor: '085921182228',
-        keterangan_pelapor:
-          'PELANGGAN TIDAK BISA INPUT TOKEN SETELAH UPDATE VKRN 43. (BELUM ADA) PETUGAS YANG MELAKUKAN PENGATURAN. SISA KWH: 385.41. PTL (HAMPIR PADAM). PELANGGAN PERNAH LAPOR DENGAN NO: K5223013102183, STATUS SELESAI, PELANGGAN TIDAK DIKONFIRMASI s.d 1X6 JAM. LAPOR KEMBALI CC.54.JULIANA TGL 01/02/23 12FZUS3 08.46 085921182228',
-        media: 'Live Chat PLN Mobile',
-        waktu_media: '01/01/1970 00:00:00',
-        keterangan_media: 'x',
-        nama_ulp: 'ULP SEDAYU'
-      }
-    ]
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
   }
-})
+  showDetail()
+}
+
+const showDetail = () => {
+  clearSelection()
+  dialogDetail.value = true
+}
+
+const onExporting = async (e: any) => {
+  const dataGrid = dataGridRef.value!.instance!
+
+  if (e.format === 'pdf' || e.format === 'document') {
+    reportData.value = await data.load()
+  }
+
+  if (e.format === 'pdf' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const pdf = await exportToPDF(reportMeta, reportData)
+
+    if (pdf) {
+      dataGrid.endCustomLoading()
+    }
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta, e)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
+  }
+}
 </script>

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

@@ -1,15 +1,16 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
     <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
+      @option-changed="handleRequestChange"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
-      v-if="loading == false"
+      :remote-operations="true"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -22,6 +23,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="false"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -41,13 +43,13 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn
-        css-class="custom-table-column !align-top"
+        :allow-sorting="false"
+        css-class="custom-table-column !text-right"
         :width="50"
         alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
+        data-field="no"
         caption="No"
-        cell-template="formatNumber"
       />
       <DxColumn
         :width="170"
@@ -230,11 +232,21 @@
         <InputText :readonly="true" :value="dataSelected.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-[170px] text-gray-800">Pembuat Laporan:</h3>
+        <InputText :readonly="true" :value="dataSelected.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-[170px] text-gray-800">Tgl Lapor:</h3>
         <InputText :readonly="true" :value="dataSelected?.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-[170px] text-gray-800">Tgl Dialihkan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.waktu_dialihkan" class-name="flex-1" />
+      </div>
+
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
         <InputText :readonly="true" :value="dataSelected?.waktu_response" class-name="flex-1" />
@@ -245,6 +257,19 @@
         <InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
       </div>
 
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
+        <InputText
+          :readonly="true"
+          class-name="flex-1"
+          :value="
+            parseInt(dataSelected?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
+              : '-'
+          "
+        />
+      </div>
+
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
         <InputText
@@ -259,16 +284,13 @@
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
-        <InputText
-          :readonly="true"
-          class-name="flex-1"
-          :value="
-            parseInt(dataSelected?.durasi_recovery_time)
-              ? formatWaktu(dataSelected?.durasi_recovery_time)
-              : '-'
-          "
-        />
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Asal :</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_unit_lama" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Tujuan :</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_unit_baru" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -317,7 +339,6 @@
       </div>
     </div>
   </DetailDialog>
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -325,8 +346,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
+import CustomStore from 'devextreme/data/custom_store'
+
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import { reactive, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -341,16 +364,20 @@ import {
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_DKUL'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const data = ref<any[]>([])
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
-const loading = ref(false)
+const reportData: any = ref(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
 const filters = ref()
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -359,42 +386,137 @@ const reportMeta = ref({
   periode: ''
 })
 
-const showDetail = () => (dialogDetail.value = true)
+const allowTableRequest = ref(false)
+const data = new CustomStore({
+  load: async (loadOptions: any) => {
+    if (allowTableRequest.value) {
+      loadOptions.requireTotalCount = true
+
+      const query = {
+        skip: loadOptions.skip,
+        take: loadOptions.take,
+        sort: loadOptions.sort ? loadOptions.sort : null,
+        filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
+        requireTotalCount: loadOptions.requireTotalCount,
+        ...createQuery(filters.value)
+      }
+
+      return await requestGraphQl(queries.keluhan.daftar.ssdaftarKeluhanDialihkanKeUnitLain, query)
+        .then((result) => {
+          const response = result.data.data.ssdaftarKeluhanDialihkanKeUnitLain
+
+          let no = query.skip ?? 0
+
+          for (const data of response.data) {
+            data.no = ++no
+          }
+
+          return {
+            data: response.data,
+            totalCount: response.totalCount
+          }
+        })
+        .catch((err) => {
+          throw Error(err)
+        })
+        .finally(() => {
+          reportMeta.value = filters.value
+        })
+    } else {
+      return new Promise(function (resolve) {
+        resolve({
+          data: [],
+          totalCount: 0
+        })
+      })
+    }
+  }
+})
 
 const closeDialog = () => (dialogDetail.value = false)
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
-  } else if (e.format === 'xlsx') {
-    exportToXLSX(reportMeta, e)
-  } else {
-    exportToDOCX(reportMeta, data)
-  }
-}
-const dataGridRef = ref<DxDataGrid | null>(null)
-const clearSelection = () => {
-  const dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  if (selectedRowsData[0] != undefined) {
-    dataSelected.value = selectedRowsData[0]
-  }
-  clearSelection()
-  showDetail()
-}
-
 const resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  if (e.name === 'searchPanel') {
+    if (e.value !== '') {
+      requestOptions.filter = createSearchOptions(e.value)
+    } else {
+      requestOptions.filter = null
+    }
+  }
+
+  if (e.name === 'paging') {
+    requestOptions.take = e.value
+  }
+
+  if (e.name === 'columns') {
+    const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
+    const columnDataField = e.component.columnOption(columnIndex).dataField
+
+    requestOptions.sort = [
+      {
+        selector: columnDataField,
+        desc: e.value === 'desc'
+      }
+    ]
+  }
+}
+
+const createSearchOptions = (keyword: string) => {
+  const dataGrid = dataGridRef.value!.instance!
+  const columns = dataGrid.getVisibleColumns()
+
+  const searchOptions = []
+
+  for (const column of columns) {
+    if (column.dataField === 'no' || !column.dataField) {
+      continue
+    }
+
+    searchOptions.push({
+      field: column.dataField,
+      value: keyword
+    })
+  }
+
+  return searchOptions
+}
+
+const mapSearchOptions = (searchOptions: any) => {
+  const result = searchOptions.map((option: any) => {
+    if (Array.isArray(option) && option[0] !== 'no') {
+      return {
+        field: option[0],
+        value: option[2]
+      }
+    }
+  })
+
+  return result.filter((item: any) => item)
+}
+
+const filterData = () => {
+  allowTableRequest.value = true
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const createQuery = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  const query = {
+  return {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -405,141 +527,46 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   }
-
-  loading.value = true
-  await requestGraphQl(queries.keluhan.daftar.keluhanDipindahkanKeIDULPLain, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarKeluhanDialihkanKeUnitLain
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'K5523020400288',
-        pembuat_laporan: 'CC.55.ANISA',
-        waktu_lapor: '04/02/2023 11:18:57',
-        waktu_dialihkan: '04/02/2023 12:49:36',
-        waktu_response: '04/02/2023 12:50:21',
-        waktu_recovery: '04/02/2023 13:06:53',
-        durasi_response_time: 5484,
-        durasi_recovery_time: 992,
-        id_unit_lama: 227,
-        nama_unit_lama: 'ULP MEDAN SELATAN',
-        id_unit_baru: 5,
-        nama_unit_baru: 'ULP DENAI',
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU ELVIRA ',
-        alamat_pelapor:
-          'JL PASAR 3 GG PISANG NO.22 RT0/RW0 KEL BANDAR KALIFA KEC PERCUT SEI TUAN KAB DELI SERDANG SUMATRA UTARA',
-        no_telp_pelapor: '087882621344',
-        keterangan_pelapor:
-          '1 APP PRABAYAR TERTERA GAGAL. TIDAK BISA MEMASUKKAN PULSA. (PTL TIDAK PADAM ). SETELAH UPDATE VKRN 43. NO TOKEN : 38665587538675472633. SISA PULSA  : 43.20 KWH PELANGGAN MENGHUBUNGI KEMBALI. UPDATE CC.52.ETA',
-        media: 'Call PLN 123'
-      },
-      {
-        no_laporan: 'K5423021005925',
-        pembuat_laporan: 'CC.54.HENDI',
-        waktu_lapor: '10/02/2023 20:24:35',
-        waktu_dialihkan: '10/02/2023 21:02:39',
-        waktu_response: '10/02/2023 21:36:20',
-        waktu_recovery: '10/02/2023 21:42:37',
-        durasi_response_time: 4305,
-        durasi_recovery_time: 377,
-        id_unit_lama: 233,
-        nama_unit_lama: 'ULP PURWOKERTO KOTA',
-        id_unit_baru: 236,
-        nama_unit_baru: 'ULP BANJARNEGARA',
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'BP EKO BUDIYANTO',
-        alamat_pelapor:
-          'ALAMAT LOKASI : DN TANJUNG TIRTA RT 5 RW 1 KEL DS TANJUNG TIRTA KEC PUNGGELAN KAB BANJARNEGARA JATENG, ACUAN LOKASI : DEKAT KELURAHAN',
-        no_telp_pelapor: '08121512224',
-        keterangan_pelapor:
-          'MOHON UNTUK DITINDAKLANJUTI PROSES PS NON PELANGGAN  ( L/ 5500 VA ) MELALUI PLN 123 DENGAN NO AGENDA 522040132302100027 DAN NO REG 5220429004905 DIPERUNTUKAN UNTUK PENERANGAN BTS SELAMA 14 HARI MULAI PADA TGL 11/2/23 - 24/2/23 PUKUL 12:00 WIB PEMOHON MENGAKU SEBAGAI PIHAK YANG BERTANGGUNG JAWAB',
-        media: 'Call PLN 123'
-      },
-      {
-        no_laporan: 'K5423021005015',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '10/02/2023 18:01:21',
-        waktu_dialihkan: '10/02/2023 18:04:07',
-        waktu_response: '10/02/2023 18:13:47',
-        waktu_recovery: '01/01/1970 00:00:00',
-        durasi_response_time: 746,
-        durasi_recovery_time: 33136328,
-        id_unit_lama: 227,
-        nama_unit_lama: 'ULP MEDAN SELATAN',
-        id_unit_baru: 225,
-        nama_unit_baru: 'ULP MEDAN KOTA',
-        status_akhir: 'Dalam Proses Bidang Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'Ervina Vina4',
-        alamat_pelapor: 'JL PSR MERAH GG SETIA UJUNG KEL BINJAI No.0 RT.0 RW.0 M DENAI',
-        no_telp_pelapor: '6285276706679',
-        keterangan_pelapor:
-          'MUTASI_K (G9923021098935:app) - sudah beli token.tapi gagal terus tolong PLN tindak lanjutin lebih cepat.terima kasih',
-        media: 'PLN Mobile'
-      },
-      {
-        no_laporan: 'K5423021004276',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '10/02/2023 16:20:21',
-        waktu_dialihkan: '11/02/2023 06:28:29',
-        waktu_response: '11/02/2023 13:39:37',
-        waktu_recovery: '11/02/2023 16:28:03',
-        durasi_response_time: 76756,
-        durasi_recovery_time: 10106,
-        id_unit_lama: 62,
-        nama_unit_lama: 'ULP KAYU AGUNG',
-        id_unit_baru: 82,
-        nama_unit_baru: 'ULP TUGU MULYO',
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'call center bmg',
-        alamat_pelapor:
-          'Desa Gading Raja Desa SP2 Kecamatan Padamaran Kabupaten Ogan Komering Ilir, Sumatera Selatan',
-        no_telp_pelapor: '6281225199487',
-        keterangan_pelapor: 'Seal in MCB KWH NA or Seal Papan OKA NA',
-        media: 'PLN Mobile'
-      },
-      {
-        no_laporan: 'K5423021001969',
-        pembuat_laporan: 'PLNMOBILE',
-        waktu_lapor: '10/02/2023 10:49:02',
-        waktu_dialihkan: '10/02/2023 10:53:35',
-        waktu_response: '10/02/2023 11:21:09',
-        waktu_recovery: '10/02/2023 12:15:16',
-        durasi_response_time: 1927,
-        durasi_recovery_time: 3247,
-        id_unit_lama: 238,
-        nama_unit_lama: 'UP3 TANJUNG PRIOK',
-        id_unit_baru: 194,
-        nama_unit_baru: 'UP3 BANDENGAN',
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'muhammad alinafia',
-        alamat_pelapor: 'blok a no 55',
-        no_telp_pelapor: '6282123607797',
-        keterangan_pelapor: 'K5423021001925',
-        media: 'PLN Mobile'
-      }
-    ]
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
   }
-})
+  clearSelection()
+  showDetail()
+}
+
+const showDetail = () => (dialogDetail.value = true)
+
+const onExporting = async (e: any) => {
+  const dataGrid = dataGridRef.value!.instance!
+
+  if (e.format === 'pdf' || e.format === 'document') {
+    reportData.value = await data.load()
+  }
+
+  if (e.format === 'pdf' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const pdf = await exportToPDF(reportMeta, reportData)
+
+    if (pdf) {
+      dataGrid.endCustomLoading()
+    }
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta, e)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
+  }
+}
 </script>

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

@@ -1,15 +1,16 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
     <Type10 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
+      @option-changed="handleRequestChange"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
-      v-if="loadingData == false"
+      :remote-operations="true"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -22,6 +23,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="false"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -42,11 +44,12 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn
-        css-class="custom-table-column"
+        :allow-sorting="false"
+        css-class="custom-table-column !text-right"
         :width="50"
         alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
+        data-field="no"
         caption="No"
       />
       <DxColumn
@@ -76,7 +79,7 @@
       <DxColumn
         :width="170"
         alignment="center"
-        data-field="waktu_selesai"
+        data-field="waktu_recovery"
         caption="Tgl Recovery"
         css-class="custom-table-column"
         cell-template="formatText"
@@ -192,7 +195,7 @@
 
   <DetailDialog
     :open="dialogDetail"
-    :title="detailType == 'table' ? 'Daftar Lapor ULang' : 'Detail Gangguan'"
+    :title="detailType == 'table' ? 'Daftar Lapor Ulang' : 'Detail Keluhan'"
     @on-close="closeDialog"
     :full-width="detailType == 'table'"
   >
@@ -214,7 +217,7 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
-        <InputText :readonly="true" :value="dataSelected?.waktu_selesai" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -311,7 +314,6 @@
           :row-alternation-enabled="true"
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
-          @exporting="onExporting"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -327,11 +329,6 @@
           />
 
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-          <DxExport
-            :enabled="true"
-            :formats="['pdf', 'xlsx', 'document']"
-            :allow-export-selected-data="false"
-          />
 
           <DxColumn
             css-class="custom-table-column"
@@ -415,7 +412,8 @@
       </div>
     </div>
   </DetailDialog>
-  <BufferDialog v-if="loadingData || loadingSubData" />
+
+  <BufferDialog v-if="loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -423,35 +421,42 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type10 from '@/components/Form/FiltersType/Type10.vue'
+import CustomStore from 'devextreme/data/custom_store'
+
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import { reactive, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
   DxColumnFixing,
-  DxExport, DxPager,
+  DxExport,
+  DxPager,
   DxPaging,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxLoadPanel
 } from 'devextreme-vue/data-grid'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, isNumber } from '@/utils/numbers'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_PLD1K'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
-const data = ref<any[]>([])
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>()
 const dataSubSelected = ref<any>()
+const reportData: any = ref(null)
 const dialogDetail = ref(false)
-const closedialogDetail = () => (dialogDetail.value = false)
-const loadingData = ref(false)
+const dataGridRef = ref<DxDataGrid | null>(null)
 const loadingSubData = ref(false)
-const detailType = ref('form') // form, table
+const detailType = ref('form')
 const filters = ref()
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -462,6 +467,154 @@ const reportMeta = ref({
   periode: ''
 })
 
+const allowTableRequest = ref(false)
+const data = new CustomStore({
+  load: async (loadOptions: any) => {
+    if (allowTableRequest.value) {
+      loadOptions.requireTotalCount = true
+
+      const query = {
+        skip: loadOptions.skip,
+        take: loadOptions.take,
+        sort: loadOptions.sort ? loadOptions.sort : null,
+        filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
+        requireTotalCount: loadOptions.requireTotalCount,
+        ...createQuery(filters.value)
+      }
+
+      return await requestGraphQl(
+        queries.keluhan.daftar.ssdaftarKeluhanMelaporLebihDariSatuKali,
+        query
+      )
+        .then((result) => {
+          const response = result.data.data.ssdaftarKeluhanMelaporLebihDariSatuKali
+
+          let no = query.skip ?? 0
+
+          for (const data of response.data) {
+            data.no = ++no
+          }
+
+          return {
+            data: response.data,
+            totalCount: response.totalCount
+          }
+        })
+        .catch((err) => {
+          throw Error(err)
+        })
+        .finally(() => {
+          reportMeta.value = filters.value
+        })
+    } else {
+      return new Promise(function (resolve) {
+        resolve({
+          data: [],
+          totalCount: 0
+        })
+      })
+    }
+  }
+})
+
+const resetData = () => {
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const handleRequestChange = (e: any) => {
+  if (e.name === 'searchPanel') {
+    if (e.value !== '') {
+      requestOptions.filter = createSearchOptions(e.value)
+    } else {
+      requestOptions.filter = null
+    }
+  }
+
+  if (e.name === 'paging') {
+    requestOptions.take = e.value
+  }
+
+  if (e.name === 'columns') {
+    const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
+    const columnDataField = e.component.columnOption(columnIndex).dataField
+
+    requestOptions.sort = [
+      {
+        selector: columnDataField,
+        desc: e.value === 'desc'
+      }
+    ]
+  }
+}
+
+const createSearchOptions = (keyword: string) => {
+  const dataGrid = dataGridRef.value!.instance!
+  const columns = dataGrid.getVisibleColumns()
+
+  const searchOptions = []
+
+  for (const column of columns) {
+    if (column.dataField === 'no' || !column.dataField) {
+      continue
+    }
+
+    searchOptions.push({
+      field: column.dataField,
+      value: keyword
+    })
+  }
+
+  return searchOptions
+}
+
+const mapSearchOptions = (searchOptions: any) => {
+  const result = searchOptions.map((option: any) => {
+    if (Array.isArray(option) && option[0] !== 'no') {
+      return {
+        field: option[0],
+        value: option[2]
+      }
+    }
+  })
+
+  return result.filter((item: any) => item)
+}
+
+const filterData = () => {
+  allowTableRequest.value = true
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const createQuery = (params: any) => {
+  const dateValue = params.periode.split(' s/d ')
+  const { ulp, uid, up3 } = params
+  const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1
+  const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100
+
+  return {
+    minJmlLapor: minJmlLapor,
+    maxJmlLapor: maxJmlLapor,
+    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
+  }
+}
+
 const setDetailType = (columnCaption: string) => {
   if (columnCaption == 'Jml Lapor') {
     detailType.value = 'table'
@@ -471,7 +624,6 @@ const setDetailType = (columnCaption: string) => {
 }
 
 const getDetail = async () => {
-  const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
   const query = {
@@ -497,17 +649,17 @@ const getDetail = async () => {
     })
 }
 
-const dataGridRef = ref<DxDataGrid | null>(null)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
 }
+
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
   if (detailType.value == 'table') {
     getDetail()
-  }else{
+  } else {
     dialogDetail.value = true
   }
 }
@@ -525,152 +677,29 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const closeDialog = () => (dialogDetail.value = false)
+const onExporting = async (e: any) => {
+  const dataGrid = dataGridRef.value!.instance!
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+  if (e.format === 'pdf' || e.format === 'document') {
+    reportData.value = await data.load()
+  }
+
+  if (e.format === 'pdf' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const pdf = await exportToPDF(reportMeta, reportData)
+
+    if (pdf) {
+      dataGrid.endCustomLoading()
+    }
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta, e)
-  } else {
-    exportToDOCX(reportMeta, data)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
-
-const resetData = () => {
-  data.value = []
-  dataSub.value = []
-}
-
-const filterData = async (params: any) => {
-  resetData()
-  const dateValue = params.periode.split(' s/d ')
-  const { ulp, uid, up3 } = params
-  const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1
-  const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100
-
-  const query = {
-    minJmlLapor: minJmlLapor,
-    maxJmlLapor: maxJmlLapor,
-    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
-  }
-
-  loadingData.value = true
-  await requestGraphQl(queries.keluhan.daftar.keluhanMelaporLebihDariSatuKali, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarKeluhanMelaporLebihDariSatuKali
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loadingData.value = false
-    })
-}
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'K5423020100003',
-        waktu_lapor: '01/02/2023 00:00:54',
-        waktu_response: '01/01/1970 00:00:00',
-        waktu_recovery: '01/01/1970 00:00:00',
-        jumlah_lapor: 1,
-        durasi_response_time: -1675209654,
-        durasi_recovery_time: 1709189971,
-        status_akhir: 'Dalam Proses Manager Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'ROLLY DWI NOVIANDARU',
-        alamat_pelapor: 'TA MBAK BERAS RT1 CER No.ME RT.00 RW.00',
-        no_telp_pelapor: '6285785412365',
-        keterangan_pelapor: 'meter macet',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP BENJENG'
-      },
-      {
-        no_laporan: 'K5423020100006',
-        waktu_lapor: '01/02/2023 00:01:23',
-        waktu_response: '01/02/2023 00:01:59',
-        waktu_recovery: '01/02/2023 00:02:52',
-        jumlah_lapor: 1,
-        durasi_response_time: 36,
-        durasi_recovery_time: 53,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Doni',
-        alamat_pelapor: 'JL KH WASYID NO 119 CILEGON No.0 RT.0 RW.0 CILEGON',
-        no_telp_pelapor: '62895391110909',
-        keterangan_pelapor: 'mohon info terkait prediksi pemakaian tenaga listrik',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP PRIMA KRAKATAU (TT/TM)'
-      },
-      {
-        no_laporan: 'K5423020100022',
-        waktu_lapor: '01/02/2023 00:06:30',
-        waktu_response: '01/02/2023 04:26:02',
-        waktu_recovery: '01/01/1970 00:00:00',
-        jumlah_lapor: 1,
-        durasi_response_time: 15572,
-        durasi_recovery_time: 33964409,
-        status_akhir: 'Dalam Proses Bidang Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'Yolanda Palar',
-        alamat_pelapor: 'JL TANGGUL SELATAN No.0',
-        no_telp_pelapor: '6285256607777',
-        keterangan_pelapor:
-          'MUTASI_K (G9923020187811:meteran terblokir) - Kilometer Terblokir, Listrik Padam, Vouchers tidak bisa diisi. informasi dari petugas Aplikasi harus ganti kilometer. saya Naikan Daya dari Agustus 2022 Terblokirnya Hari ini bagaimana ya?',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP PALU KOTA'
-      },
-      {
-        no_laporan: 'K5423020100028',
-        waktu_lapor: '01/02/2023 00:09:30',
-        waktu_response: '01/01/1970 00:00:00',
-        waktu_recovery: '01/01/1970 00:00:00',
-        jumlah_lapor: 1,
-        durasi_response_time: -1675210170,
-        durasi_recovery_time: 1709189971,
-        status_akhir: 'Dalam Proses Manager Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'Tisatin Najemi',
-        alamat_pelapor: 'JL ABADI 2 No. RT.47 RW.7 GT MANGGIS',
-        no_telp_pelapor: '6281349719849',
-        keterangan_pelapor: 'saya baru aja isi token listrik lewat bangking cuman gak mau masuk ',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP BANJARBARU'
-      },
-      {
-        no_laporan: 'K5423020100029',
-        waktu_lapor: '01/02/2023 00:09:39',
-        waktu_response: '01/02/2023 05:48:52',
-        waktu_recovery: '01/01/1970 00:00:00',
-        jumlah_lapor: 1,
-        durasi_response_time: 20353,
-        durasi_recovery_time: 33959439,
-        status_akhir: 'Dalam Proses Bidang Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'fris jhon ferni',
-        alamat_pelapor: 'the royal griya loka blok o no 05',
-        no_telp_pelapor: '62895396277717',
-        keterangan_pelapor: 'MUTASI_K (G9923020187825:tekmik) - token gagal masuk',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP TABANAN'
-      }
-    ]
-  }
-})
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
     <Type11
       @update:filters="(value) => (filters = value)"
       :sla-options="[
@@ -22,10 +22,11 @@
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
+      @option-changed="handleRequestChange"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
-      v-if="loading == false"
+      :remote-operations="true"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -38,6 +39,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="false"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -57,11 +59,12 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn
-        css-class="custom-table-column"
+        :allow-sorting="false"
+        css-class="custom-table-column !text-right"
         :width="50"
         alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
+        data-field="no"
         caption="No"
       />
       <DxColumn
@@ -283,7 +286,6 @@
       </div>
     </div>
   </DetailDialog>
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -291,8 +293,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type11 from '@/components/Form/FiltersType/Type11.vue'
+import CustomStore from 'devextreme/data/custom_store'
+
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import { reactive, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -310,59 +314,163 @@ import {
   exportToDOCX,
   exportToXLSX
 } from '@/report/Keluhan/Daftar/DKeluhan_RecoveryTime'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>()
 const dialogDetail = ref(false)
+const reportData: any = ref(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  periode: '',
+  minTime: '',
+  maxTime: ''
+})
+
+const allowTableRequest = ref(false)
+const data = new CustomStore({
+  load: async (loadOptions: any) => {
+    if (allowTableRequest.value) {
+      loadOptions.requireTotalCount = true
+
+      const query = {
+        skip: loadOptions.skip,
+        take: loadOptions.take,
+        sort: loadOptions.sort ? loadOptions.sort : null,
+        filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
+        requireTotalCount: loadOptions.requireTotalCount,
+        ...createQuery(filters.value)
+      }
+
+      return await requestGraphQl(queries.keluhan.daftar.ssdaftarKeluhanRecoveryTime, query)
+        .then((result) => {
+          const response = result.data.data.ssdaftarKeluhanRecoveryTime
+
+          let no = query.skip ?? 0
+
+          for (const data of response.data) {
+            data.no = ++no
+          }
+
+          return {
+            data: response.data,
+            totalCount: response.totalCount
+          }
+        })
+        .catch((err) => {
+          throw Error(err)
+        })
+        .finally(() => {
+          reportMeta.value = filters.value
+        })
+    } else {
+      return new Promise(function (resolve) {
+        resolve({
+          data: [],
+          totalCount: 0
+        })
+      })
+    }
+  }
+})
 
 const closeDialog = () => {
   dialogDetail.value = false
 }
 
-const dataGridRef = ref<DxDataGrid | null>(null)
-const clearSelection = () => {
-  const dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const showDetail = () => {
-  clearSelection()
-  dialogDetail.value = true
-}
-
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  if (selectedRowsData[0] != undefined) {
-    dataSelected.value = selectedRowsData[0]
-  }
-  showDetail()
-}
-
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
-  } else if (e.format === 'xlsx') {
-    exportToXLSX(reportMeta, e)
-  } else {
-    exportToDOCX(reportMeta, data)
-  }
-}
-
-const data = ref<any[]>([])
-const loading = ref(false)
-
 const resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  if (e.name === 'searchPanel') {
+    if (e.value !== '') {
+      requestOptions.filter = createSearchOptions(e.value)
+    } else {
+      requestOptions.filter = null
+    }
+  }
+
+  if (e.name === 'paging') {
+    requestOptions.take = e.value
+  }
+
+  if (e.name === 'columns') {
+    const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
+    const columnDataField = e.component.columnOption(columnIndex).dataField
+
+    requestOptions.sort = [
+      {
+        selector: columnDataField,
+        desc: e.value === 'desc'
+      }
+    ]
+  }
+}
+
+const createSearchOptions = (keyword: string) => {
+  const dataGrid = dataGridRef.value!.instance!
+  const columns = dataGrid.getVisibleColumns()
+
+  const searchOptions = []
+
+  for (const column of columns) {
+    if (column.dataField === 'no' || !column.dataField) {
+      continue
+    }
+
+    searchOptions.push({
+      field: column.dataField,
+      value: keyword
+    })
+  }
+
+  return searchOptions
+}
+
+const mapSearchOptions = (searchOptions: any) => {
+  const result = searchOptions.map((option: any) => {
+    if (Array.isArray(option) && option[0] !== 'no') {
+      return {
+        field: option[0],
+        value: option[2]
+      }
+    }
+  })
+
+  return result.filter((item: any) => item)
+}
+
+const filterData = () => {
+  allowTableRequest.value = true
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const createQuery = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3, minTime, maxTime } = params
 
-  const query = {
+  return  {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -375,124 +483,48 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   }
-
-  loading.value = true
-  await requestGraphQl(queries.keluhan.daftar.keluhanRecoveryTime, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarKeluhanRecoveryTime
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
-  periode: '',
-  minTime: '',
-  maxTime: ''
-})
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'K5423020100006',
-        waktu_lapor: '01/02/2023 00:01:23',
-        waktu_response: '01/02/2023 00:01:59',
-        waktu_recovery: '01/02/2023 00:02:52',
-        durasi_response_time: 36,
-        durasi_recovery_time: 53,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Doni',
-        alamat_pelapor: 'JL KH WASYID NO 119 CILEGON No.0 RT.0 RW.0 CILEGON',
-        no_telp_pelapor: '62895391110909',
-        keterangan_pelapor: 'mohon info terkait prediksi pemakaian tenaga listrik',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP PRIMA KRAKATAU (TT/TM)'
-      },
-      {
-        no_laporan: 'K5423020100030',
-        waktu_lapor: '01/02/2023 00:10:39',
-        waktu_response: '01/02/2023 01:17:31',
-        waktu_recovery: '01/01/1970 00:00:00',
-        durasi_response_time: 4012,
-        durasi_recovery_time: 33977641,
-        status_akhir: 'Dalam Proses Bidang Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'wulan',
-        alamat_pelapor: 'DS OELETA No. RT.3 RW.2 ALAK',
-        no_telp_pelapor: '6285788900596',
-        keterangan_pelapor:
-          'MUTASI_K (G9923020187809:pemeriksaan ) - pulsa meter su babunyi .ketong isi gagal terus . apa bisa di konfirmasi kenapa begitu ',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP KUPANG'
-      },
-      {
-        no_laporan: 'K5423020100045',
-        waktu_lapor: '01/02/2023 00:16:57',
-        waktu_response: '01/02/2023 00:19:40',
-        waktu_recovery: '01/01/1970 00:00:00',
-        durasi_response_time: 163,
-        durasi_recovery_time: 33981112,
-        status_akhir: 'Dalam Proses Bidang Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'veri susanto',
-        alamat_pelapor: 'JL NURUL HUDA KOMP TERAS HOKILAND No.A6 RT.2 RW.3 DS KAPUR',
-        no_telp_pelapor: '6282150235722',
-        keterangan_pelapor:
-          'MUTASI_K (G9923020187794:cek kwh) - tidak bisa membeli vocer listrik,vocer listrik sudah mau habis',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP SIANTAN'
-      },
-      {
-        no_laporan: 'K5423020100062',
-        waktu_lapor: '01/02/2023 00:29:48',
-        waktu_response: '01/02/2023 01:08:45',
-        waktu_recovery: '01/01/1970 00:00:00',
-        durasi_response_time: 2337,
-        durasi_recovery_time: 33978167,
-        status_akhir: 'Dalam Proses Bidang Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'Diki wahyudi',
-        alamat_pelapor: 'jl Galunggung amansari RT. 01 rw 01',
-        no_telp_pelapor: '6285770967966',
-        keterangan_pelapor:
-          'MUTASI_K (G9923020187796:token gagal) - token di masukan keterangan gagal',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP RENGASDENGKLOK'
-      },
-      {
-        no_laporan: 'K5423020100089',
-        waktu_lapor: '01/02/2023 00:45:30',
-        waktu_response: '01/02/2023 01:00:27',
-        waktu_recovery: '01/02/2023 07:53:08',
-        durasi_response_time: 897,
-        durasi_recovery_time: 24761,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'SAHABATJAKARTA',
-        alamat_pelapor: 'Stasiun Jln. Nyi Raja Permas',
-        no_telp_pelapor: '6281210701126',
-        keterangan_pelapor:
-          'NO AGENDA 538319912301199708\\nMOHON PERCEPATAN PASANG BARU ATAS NAMA CFC ST KA BOGOR..KARNA HARI RABU 1 FEBRUARI 2023 GERAI TERSEBUT MAU GRAND OPENING *5 MOHON DAPAT PRIORITAS INVESTASI KAMI DI KOTA BOGOR TSB TKSH',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP BOGOR KOTA'
-      }
-    ]
+const showDetail = () => {
+  clearSelection()
+  dialogDetail.value = true
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
   }
-})
+  showDetail()
+}
+
+const onExporting = async (e: any) => {
+  const dataGrid = dataGridRef.value!.instance!
+
+  if (e.format === 'pdf' || e.format === 'document') {
+    reportData.value = await data.load()
+  }
+
+  if (e.format === 'pdf' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const pdf = await exportToPDF(reportMeta, reportData)
+
+    if (pdf) {
+      dataGrid.endCustomLoading()
+    }
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta, e)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
+  }
+}
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
     <Type11
       @update:filters="(value) => (filters = value)"
       :sla-options="[
@@ -22,10 +22,11 @@
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
+      @option-changed="handleRequestChange"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
-      v-if="loading == false"
+      :remote-operations="true"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -38,6 +39,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="false"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -57,11 +59,12 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn
-        css-class="custom-table-column"
+        :allow-sorting="false"
+        css-class="custom-table-column !text-right"
         :width="50"
         alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
+        data-field="no"
         caption="No"
       />
       <DxColumn
@@ -301,7 +304,6 @@
       </div>
     </div>
   </DetailDialog>
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -309,8 +311,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type11 from '@/components/Form/FiltersType/Type11.vue'
+import CustomStore from 'devextreme/data/custom_store'
+
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import { reactive, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -330,18 +334,176 @@ import {
   exportToDOCX
 } from '@/report/Keluhan/Daftar/DKeluhan_ResponseTime'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>()
 const dialogDetail = ref(false)
+const reportData: any = ref(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  periode: '',
+  minTime: '',
+  maxTime: ''
+})
+
+const allowTableRequest = ref(false)
+const data = new CustomStore({
+  load: async (loadOptions: any) => {
+    if (allowTableRequest.value) {
+      loadOptions.requireTotalCount = true
+
+      const query = {
+        skip: loadOptions.skip,
+        take: loadOptions.take,
+        sort: loadOptions.sort ? loadOptions.sort : null,
+        filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
+        requireTotalCount: loadOptions.requireTotalCount,
+        ...createQuery(filters.value)
+      }
+
+      return await requestGraphQl(queries.keluhan.daftar.ssdaftarKeluhanResponseTime, query)
+        .then((result) => {
+          const response = result.data.data.ssdaftarKeluhanResponseTime
+
+          let no = query.skip ?? 0
+
+          for (const data of response.data) {
+            data.no = ++no
+          }
+
+          return {
+            data: response.data,
+            totalCount: response.totalCount
+          }
+        })
+        .catch((err) => {
+          throw Error(err)
+        })
+        .finally(() => {
+          reportMeta.value = filters.value
+        })
+    } else {
+      return new Promise(function (resolve) {
+        resolve({
+          data: [],
+          totalCount: 0
+        })
+      })
+    }
+  }
+})
+
+const resetData = () => {
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const handleRequestChange = (e: any) => {
+  if (e.name === 'searchPanel') {
+    if (e.value !== '') {
+      requestOptions.filter = createSearchOptions(e.value)
+    } else {
+      requestOptions.filter = null
+    }
+  }
+
+  if (e.name === 'paging') {
+    requestOptions.take = e.value
+  }
+
+  if (e.name === 'columns') {
+    const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
+    const columnDataField = e.component.columnOption(columnIndex).dataField
+
+    requestOptions.sort = [
+      {
+        selector: columnDataField,
+        desc: e.value === 'desc'
+      }
+    ]
+  }
+}
+
+const createSearchOptions = (keyword: string) => {
+  const dataGrid = dataGridRef.value!.instance!
+  const columns = dataGrid.getVisibleColumns()
+
+  const searchOptions = []
+
+  for (const column of columns) {
+    if (column.dataField === 'no' || !column.dataField) {
+      continue
+    }
+
+    searchOptions.push({
+      field: column.dataField,
+      value: keyword
+    })
+  }
+
+  return searchOptions
+}
+
+const mapSearchOptions = (searchOptions: any) => {
+  const result = searchOptions.map((option: any) => {
+    if (Array.isArray(option) && option[0] !== 'no') {
+      return {
+        field: option[0],
+        value: option[2]
+      }
+    }
+  })
+
+  return result.filter((item: any) => item)
+}
+
+const filterData = () => {
+  allowTableRequest.value = true
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const createQuery = (params: any) => {
+  const dateValue = params.periode.split(' s/d ')
+  const { ulp, uid, up3, maxTime, minTime } = params
+
+  return {
+    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),
+    minDurasiResponseTime: minTime,
+    maxDurasiResponseTime: maxTime,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  }
+}
 
 const closeDialog = () => {
   dialogDetail.value = false
 }
 
-const dataGridRef = ref<DxDataGrid | null>(null)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
@@ -358,159 +520,29 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+const onExporting = async (e: any) => {
+  const dataGrid = dataGridRef.value!.instance!
+
+  if (e.format === 'pdf' || e.format === 'document') {
+    reportData.value = await data.load()
+  }
+
+  if (e.format === 'pdf' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const pdf = await exportToPDF(reportMeta, reportData)
+
+    if (pdf) {
+      dataGrid.endCustomLoading()
+    }
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta, e)
-  } else {
-    exportToDOCX(reportMeta, data)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
-
-const data = ref<any[]>([])
-const loading = ref(false)
-
-const resetData = () => {
-  data.value = []
-}
-
-const filterData = async (params: any) => {
-  resetData()
-  const dateValue = params.periode.split(' s/d ')
-  const { ulp, uid, up3, maxTime, minTime } = params
-
-  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),
-    minDurasiResponseTime: minTime,
-    maxDurasiResponseTime: maxTime,
-    idUlp: ulp ? ulp.id : 0,
-    idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
-  }
-
-  loading.value = true
-  await requestGraphQl(queries.keluhan.daftar.keluhanResponseTime, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarKeluhanResponseTime
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
-}
-
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
-  periode: '',
-  minTime: '',
-  maxTime: ''
-})
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'K5423020100006',
-        waktu_lapor: '01/02/2023 00:01:23',
-        waktu_response: '01/02/2023 00:01:59',
-        waktu_recovery: '01/02/2023 00:02:52',
-        durasi_response_time: 36,
-        durasi_recovery_time: 53,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Doni',
-        alamat_pelapor: 'JL KH WASYID NO 119 CILEGON No.0 RT.0 RW.0 CILEGON',
-        no_telp_pelapor: '62895391110909',
-        keterangan_pelapor: 'mohon info terkait prediksi pemakaian tenaga listrik',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP PRIMA KRAKATAU (TT/TM)'
-      },
-      {
-        no_laporan: 'K5423020100030',
-        waktu_lapor: '01/02/2023 00:10:39',
-        waktu_response: '01/02/2023 01:17:31',
-        waktu_recovery: '01/01/1970 00:00:00',
-        durasi_response_time: 4012,
-        durasi_recovery_time: 33978014,
-        status_akhir: 'Dalam Proses Bidang Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'wulan',
-        alamat_pelapor: 'DS OELETA No. RT.3 RW.2 ALAK',
-        no_telp_pelapor: '6285788900596',
-        keterangan_pelapor:
-          'MUTASI_K (G9923020187809:pemeriksaan ) - pulsa meter su babunyi .ketong isi gagal terus . apa bisa di konfirmasi kenapa begitu ',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP KUPANG'
-      },
-      {
-        no_laporan: 'K5423020100045',
-        waktu_lapor: '01/02/2023 00:16:57',
-        waktu_response: '01/02/2023 00:19:40',
-        waktu_recovery: '01/01/1970 00:00:00',
-        durasi_response_time: 163,
-        durasi_recovery_time: 33981485,
-        status_akhir: 'Dalam Proses Bidang Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'veri susanto',
-        alamat_pelapor: 'JL NURUL HUDA KOMP TERAS HOKILAND No.A6 RT.2 RW.3 DS KAPUR',
-        no_telp_pelapor: '6282150235722',
-        keterangan_pelapor:
-          'MUTASI_K (G9923020187794:cek kwh) - tidak bisa membeli vocer listrik,vocer listrik sudah mau habis',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP SIANTAN'
-      },
-      {
-        no_laporan: 'K5423020100062',
-        waktu_lapor: '01/02/2023 00:29:48',
-        waktu_response: '01/02/2023 01:08:45',
-        waktu_recovery: '01/01/1970 00:00:00',
-        durasi_response_time: 2337,
-        durasi_recovery_time: 33978540,
-        status_akhir: 'Dalam Proses Bidang Unit',
-        idpel_nometer: '',
-        nama_pelapor: 'Diki wahyudi',
-        alamat_pelapor: 'jl Galunggung amansari RT. 01 rw 01',
-        no_telp_pelapor: '6285770967966',
-        keterangan_pelapor:
-          'MUTASI_K (G9923020187796:token gagal) - token di masukan keterangan gagal',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP RENGASDENGKLOK'
-      },
-      {
-        no_laporan: 'K5423020100089',
-        waktu_lapor: '01/02/2023 00:45:30',
-        waktu_response: '01/02/2023 01:00:27',
-        waktu_recovery: '01/02/2023 07:53:08',
-        durasi_response_time: 897,
-        durasi_recovery_time: 24761,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'SAHABATJAKARTA',
-        alamat_pelapor: 'Stasiun Jln. Nyi Raja Permas',
-        no_telp_pelapor: '6281210701126',
-        keterangan_pelapor:
-          'NO AGENDA 538319912301199708\\nMOHON PERCEPATAN PASANG BARU ATAS NAMA CFC ST KA BOGOR..KARNA HARI RABU 1 FEBRUARI 2023 GERAI TERSEBUT MAU GRAND OPENING *5 MOHON DAPAT PRIORITAS INVESTASI KAMI DI KOTA BOGOR TSB TKSH',
-        media: 'PLN Mobile',
-        nama_ulp: 'ULP BOGOR KOTA'
-      }
-    ]
-  }
-})
 </script>

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

@@ -1,15 +1,16 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
     <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
+      @option-changed="handleRequestChange"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
-      v-if="loading == false"
+      :remote-operations="true"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -22,6 +23,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="false"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -41,11 +43,12 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn
-        css-class="custom-table-column"
+        :allow-sorting="false"
+        css-class="custom-table-column !text-right"
         :width="50"
         alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
+        data-field="no"
         caption="No"
       />
       <DxColumn
@@ -274,7 +277,6 @@
       </div>
     </div>
   </DetailDialog>
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -282,8 +284,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
+import CustomStore from 'devextreme/data/custom_store'
+
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import { reactive, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -297,24 +301,182 @@ import {
 } from 'devextreme-vue/data-grid'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_STIDP'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
+
 const dataSelected = ref<any>()
 const dialogDetail = ref(false)
+const reportData: any = ref(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  periode: ''
+})
+
+const allowTableRequest = ref(false)
+const data = new CustomStore({
+  load: async (loadOptions: any) => {
+    if (allowTableRequest.value) {
+      loadOptions.requireTotalCount = true
+
+      const query = {
+        skip: loadOptions.skip,
+        take: loadOptions.take,
+        sort: loadOptions.sort ? loadOptions.sort : null,
+        filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
+        requireTotalCount: loadOptions.requireTotalCount,
+        ...createQuery(filters.value)
+      }
+
+      return await requestGraphQl(
+        queries.keluhan.daftar.ssdaftarKeluhanSelesaiTanpaIdPelanggan,
+        query
+      )
+        .then((result) => {
+          const response = result.data.data.ssdaftarKeluhanSelesaiTanpaIdPelanggan
+
+          let no = query.skip ?? 0
+
+          for (const data of response.data) {
+            data.no = ++no
+          }
+
+          return {
+            data: response.data,
+            totalCount: response.totalCount
+          }
+        })
+        .catch((err) => {
+          throw Error(err)
+        })
+        .finally(() => {
+          reportMeta.value = filters.value
+        })
+    } else {
+      return new Promise(function (resolve) {
+        resolve({
+          data: [],
+          totalCount: 0
+        })
+      })
+    }
+  }
+})
+
+const resetData = () => {
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const handleRequestChange = (e: any) => {
+  if (e.name === 'searchPanel') {
+    if (e.value !== '') {
+      requestOptions.filter = createSearchOptions(e.value)
+    } else {
+      requestOptions.filter = null
+    }
+  }
+
+  if (e.name === 'paging') {
+    requestOptions.take = e.value
+  }
+
+  if (e.name === 'columns') {
+    const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
+    const columnDataField = e.component.columnOption(columnIndex).dataField
+
+    requestOptions.sort = [
+      {
+        selector: columnDataField,
+        desc: e.value === 'desc'
+      }
+    ]
+  }
+}
+
+const createSearchOptions = (keyword: string) => {
+  const dataGrid = dataGridRef.value!.instance!
+  const columns = dataGrid.getVisibleColumns()
+
+  const searchOptions = []
+
+  for (const column of columns) {
+    if (column.dataField === 'no' || !column.dataField) {
+      continue
+    }
+
+    searchOptions.push({
+      field: column.dataField,
+      value: keyword
+    })
+  }
+
+  return searchOptions
+}
+
+const mapSearchOptions = (searchOptions: any) => {
+  const result = searchOptions.map((option: any) => {
+    if (Array.isArray(option) && option[0] !== 'no') {
+      return {
+        field: option[0],
+        value: option[2]
+      }
+    }
+  })
+
+  return result.filter((item: any) => item)
+}
+
+const filterData = () => {
+  allowTableRequest.value = true
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const createQuery = (params: any) => {
+  const dateValue = params.periode.split(' s/d ')
+  const { ulp, uid, up3 } = params
+
+  return {
+    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
+  }
+}
 
 const closeDialog = () => {
   dialogDetail.value = false
 }
 
-const dataGridRef = ref<DxDataGrid | null>(null)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
 }
+
 const showDetail = () => {
   clearSelection()
   dialogDetail.value = true
@@ -327,159 +489,29 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   showDetail()
 }
 
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
+const onExporting = async (e: any) => {
+  const dataGrid = dataGridRef.value!.instance!
+
+  if (e.format === 'pdf' || e.format === 'document') {
+    reportData.value = await data.load()
+  }
+
+  if (e.format === 'pdf' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const pdf = await exportToPDF(reportMeta, reportData)
+
+    if (pdf) {
+      dataGrid.endCustomLoading()
+    }
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta, e)
-  } else {
-    exportToDOCX(reportMeta, data)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
   }
 }
-
-const data = ref<any[]>([])
-const loading = ref(false)
-
-const resetData = () => {
-  data.value = []
-}
-
-const filterData = async (params: any) => {
-  resetData()
-  const dateValue = params.periode.split(' s/d ')
-  const { ulp, uid, up3 } = params
-
-  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
-  }
-
-  loading.value = true
-  await requestGraphQl(queries.keluhan.daftar.keluhanSelesaiTanpaIDPelanggan, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarKeluhanSelesaiTanpaIdPelanggan
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
-}
-
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
-  periode: ''
-})
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'K5123020100019',
-        waktu_lapor: '01/02/2023 01:59:02',
-        waktu_response: '01/02/2023 05:22:50',
-        waktu_recovery: '01/02/2023 08:33:38',
-        durasi_response_time: 12228,
-        durasi_recovery_time: 11448,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'BP AHMAD',
-        alamat_pelapor:
-          'JL BENTENGAN TIMUR NO31 RT11/03, SUNTER JAYA, TANJUNG PRIOK, KOTA ADM. JAKARTA UTARA, DKI JAKARTA',
-        no_telp_pelapor: '082320000152',
-        keterangan_pelapor:
-          'MOHON BANTUAN PEMBATALAN PERMOHONAN PB NO AGENDA 545109912301319203 DIKARENAKAN PELANGGAN INGIN KE DAYA 2200 VA, PELANGGAN SUDAH MELAKUKAN PEMBAYARAN MELALAUI GOPAY TANGGAL 31/01/2023 PUKUL 18:49 WIB, NAMUN PEMBAYARAN BELUM MASUK, MOHON KONFRIMASI KE PELANGGAN, TERIMA KASIH. ',
-        media: 'Call PLN 123',
-        nama_ulp: 'UP3 TANJUNG PRIOK'
-      },
-      {
-        no_laporan: 'K5123020100021',
-        waktu_lapor: '01/02/2023 02:04:04',
-        waktu_response: '01/02/2023 02:26:01',
-        waktu_recovery: '01/02/2023 02:34:06',
-        durasi_response_time: 1317,
-        durasi_recovery_time: 485,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU TITIN ',
-        alamat_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
-        no_telp_pelapor: '087786974290',
-        keterangan_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
-        media: 'Call PLN 123',
-        nama_ulp: 'ULP CIBITUNG'
-      },
-      {
-        no_laporan: 'K5223020100112',
-        waktu_lapor: '01/02/2023 04:16:48',
-        waktu_response: '01/02/2023 05:58:33',
-        waktu_recovery: '01/02/2023 12:02:23',
-        durasi_response_time: 6105,
-        durasi_recovery_time: 21830,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'BP HENDRIYANTO',
-        alamat_pelapor:
-          'JL.PALEM HIJAU, COKROKONTENG, RT.04 RW.2. KEL SIDOARUM. KEC GODEAN KAB SLEMAN PROV DIY',
-        no_telp_pelapor: '085921182228',
-        keterangan_pelapor:
-          'PELANGGAN TIDAK BISA INPUT TOKEN SETELAH UPDATE VKRN 43. (BELUM ADA) PETUGAS YANG MELAKUKAN PENGATURAN. SISA KWH: 385.41. PTL (HAMPIR PADAM). PELANGGAN PERNAH LAPOR DENGAN NO: K5223013102183, STATUS SELESAI, PELANGGAN TIDAK DIKONFIRMASI s.d 1X6 JAM. LAPOR KEMBALI CC.54.JULIANA TGL 01/02/23 12FZUS3 08.46 085921182228',
-        media: 'Live Chat PLN Mobile',
-        nama_ulp: 'ULP SEDAYU'
-      },
-      {
-        no_laporan: 'K5223020100116',
-        waktu_lapor: '01/02/2023 04:43:43',
-        waktu_response: '01/02/2023 08:06:28',
-        waktu_recovery: '01/02/2023 08:52:05',
-        durasi_response_time: 12165,
-        durasi_recovery_time: 2737,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'BP SELAMET',
-        alamat_pelapor:
-          'JL MUARA TAKUS NO.30 - RT- / RW- KEL MADRASHULU KEC MEDAN KOLONIA KOTA MEDAN > LOKASI BELAKANG SAN PLASA',
-        no_telp_pelapor: '0614510290',
-        keterangan_pelapor:
-          'LEBIH TAGIH . STAND AKHIR REK JANUARI, 2023 =19583, STAND APP 01/02/2023 = 16677,NOTE: PETUGAS CATER SELALU MENGINFORMASIKAN UNTUK LISTRIK AKAN DIGANTI KE BISNIS, PELANGGAN INGIN MENGETAHUI MAKSUD DAN TUJUAN, PETUGAS CATER DIJANJIKAN UNTUK MELAKUKAN PERGANTIAN KWH METER BARU NAMUN JUGA TIDAK DIREALISASI.',
-        media: 'Call PLN 123',
-        nama_ulp: 'ULP MEDAN KOTA'
-      },
-      {
-        no_laporan: 'K5223020100119',
-        waktu_lapor: '01/02/2023 04:48:12',
-        waktu_response: '01/02/2023 07:34:08',
-        waktu_recovery: '01/02/2023 11:50:28',
-        durasi_response_time: 9956,
-        durasi_recovery_time: 15380,
-        status_akhir: 'Selesai',
-        idpel_nometer: '',
-        nama_pelapor: 'Febry Cahjagraha_',
-        alamat_pelapor:
-          ' JL PISANG GG.TALOK 3 SAREN NO., CATURTUNGGAL, DEPOK, KAB. SLEMAN, DAERAH ISTIMEWA YOGYAKARTA',
-        no_telp_pelapor: '089611011990',
-        keterangan_pelapor:
-          'PELANGGAN MENGAJUKAN PROSES TURUN DAYA (R2T/3500 VA - R1T/1300 VA) MELALUI APLIKASI PLN MOBILE DENGAN STATUS PERMOHONAN MENUNGGU VERIFIKASI PLN UNIT DAN STATUS PADA AP2T PERMOHONAN BELUM DISAHKAN MANAGER. YBS INGIN SEGERA DAPAT DITINDAKLANJUTI.',
-        media: 'Facebook',
-        nama_ulp: 'ULP YOGYAKARTA KOTA'
-      }
-    ]
-  }
-})
 </script>

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

@@ -1,15 +1,16 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
     <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
+      @option-changed="handleRequestChange"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
-      v-if="loading == false"
+      :remote-operations="true"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -22,6 +23,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="false"
     >
+      <DxLoadPanel :enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
       <DxPager
@@ -41,13 +43,13 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn
-        css-class="custom-table-column !align-top"
+        :allow-sorting="false"
+        css-class="custom-table-column !text-right"
         :width="50"
         alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
+        data-field="no"
         caption="No"
-        cell-template="formatNumber"
       />
       <DxColumn
         :width="170"
@@ -73,6 +75,14 @@
         css-class="custom-table-column !align-top"
         cell-template="formatText"
       />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_up3"
+        caption="UP3"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
       <DxColumn
         :width="170"
         alignment="center"
@@ -134,11 +144,19 @@
       <DxColumn
         :width="150"
         alignment="center"
-        data-field="nama_pelapor"
+        data-field="pembuat_laporan"
         caption="Created By"
         css-class="custom-table-column !align-top"
         cell-template="formatText"
       />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
       <DxColumn
         :width="170"
         alignment="center"
@@ -213,7 +231,7 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Contact Center:</h3>
-        <InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.nama_ulp" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -292,9 +310,13 @@
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Jumlah Lapor Ulang:</h3>
         <InputText :readonly="true" :value="dataSelected?.jumlah_lapor" class-name="flex-1" />
       </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
+      </div>
     </div>
   </DetailDialog>
-  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -302,7 +324,9 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
-import { onMounted, ref } from 'vue'
+import CustomStore from 'devextreme/data/custom_store'
+
+import { reactive, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -317,48 +341,20 @@ import {
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_SelesaiCC'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
-const position = { of: '#data' }
-const showIndicator = ref(true)
-const shading = ref(true)
-const showPane = ref(true)
+import type { IRequestOptions } from '@/types/requestParams'
+
+const requestOptions = reactive<IRequestOptions>({
+  skip: 0,
+  take: 20,
+  requireTotalCount: true,
+  sort: null,
+  filter: null
+})
 const dataSelected = ref<any>()
 const dialogDetail = ref(false)
-
-const closeDialog = () => {
-  dialogDetail.value = false
-}
-
+const reportData: any = ref(null)
 const dataGridRef = ref<DxDataGrid | null>(null)
-const clearSelection = () => {
-  const dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const showDetail = () => {
-  clearSelection()
-  dialogDetail.value = true
-}
-
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  if (selectedRowsData[0] != undefined) {
-    dataSelected.value = selectedRowsData[0]
-    showDetail()
-  }
-}
-
-const onExporting = (e: any) => {
-  if (e.format === 'pdf') {
-    exportToPDF(reportMeta, data)
-  } else if (e.format === 'xlsx') {
-    exportToXLSX(reportMeta, e)
-  } else {
-    exportToDOCX(reportMeta, data)
-  }
-}
-
-const data = ref<any[]>([])
-const loading = ref(false)
 const filters = ref()
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -367,16 +363,135 @@ const reportMeta = ref({
   periode: ''
 })
 
+const allowTableRequest = ref(false)
+const data = new CustomStore({
+  load: async (loadOptions: any) => {
+    if (allowTableRequest.value) {
+      loadOptions.requireTotalCount = true
+
+      const query = {
+        skip: loadOptions.skip,
+        take: loadOptions.take,
+        sort: loadOptions.sort ? loadOptions.sort : null,
+        filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
+        requireTotalCount: loadOptions.requireTotalCount,
+        ...createQuery(filters.value)
+      }
+
+      return await requestGraphQl(queries.keluhan.daftar.ssdaftarKeluhanDiselesaikanCC123, query)
+        .then((result) => {
+          const response = result.data.data.ssdaftarKeluhanDiselesaikanCC123
+
+          let no = query.skip ?? 0
+
+          for (const data of response.data) {
+            data.no = ++no
+          }
+
+          return {
+            data: response.data,
+            totalCount: response.totalCount
+          }
+        })
+        .catch((err) => {
+          throw Error(err)
+        })
+        .finally(() => {
+          reportMeta.value = filters.value
+        })
+    } else {
+      return new Promise(function (resolve) {
+        resolve({
+          data: [],
+          totalCount: 0
+        })
+      })
+    }
+  }
+})
+
 const resetData = () => {
-  data.value = []
+  allowTableRequest.value = false
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
 }
 
-const filterData = async (params: any) => {
-  resetData()
+const handleRequestChange = (e: any) => {
+  if (e.name === 'searchPanel') {
+    if (e.value !== '') {
+      requestOptions.filter = createSearchOptions(e.value)
+    } else {
+      requestOptions.filter = null
+    }
+  }
+
+  if (e.name === 'paging') {
+    requestOptions.take = e.value
+  }
+
+  if (e.name === 'columns') {
+    const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
+    const columnDataField = e.component.columnOption(columnIndex).dataField
+
+    requestOptions.sort = [
+      {
+        selector: columnDataField,
+        desc: e.value === 'desc'
+      }
+    ]
+  }
+}
+
+const createSearchOptions = (keyword: string) => {
+  const dataGrid = dataGridRef.value!.instance!
+  const columns = dataGrid.getVisibleColumns()
+
+  const searchOptions = []
+
+  for (const column of columns) {
+    if (column.dataField === 'no' || !column.dataField) {
+      continue
+    }
+
+    searchOptions.push({
+      field: column.dataField,
+      value: keyword
+    })
+  }
+
+  return searchOptions
+}
+
+const mapSearchOptions = (searchOptions: any) => {
+  const result = searchOptions.map((option: any) => {
+    if (Array.isArray(option) && option[0] !== 'no') {
+      return {
+        field: option[0],
+        value: option[2]
+      }
+    }
+  })
+
+  return result.filter((item: any) => item)
+}
+
+const filterData = () => {
+  allowTableRequest.value = true
+
+  const dataGrid = dataGridRef.value!.instance!
+  const dataGridDataSource = dataGrid.getDataSource()
+
+  dataGridDataSource.reload()
+}
+
+const createQuery = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  const query = {
+  return {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -388,147 +503,52 @@ const filterData = async (params: any) => {
     idUp3: up3 ? up3.id : 0,
     media: ''
   }
-
-  loading.value = true
-  await requestGraphQl(queries.keluhan.daftar.keluhanDiselesaikanCC123, query)
-    .then((result) => {
-      if (result.data.data != undefined) {
-        data.value = result.data.data.daftarKeluhanDiselesaikanCC123
-      } else {
-        data.value = []
-      }
-
-      reportMeta.value = filters.value
-    })
-    .catch((err) => {
-      console.error(err)
-    })
-    .finally(() => {
-      loading.value = false
-    })
 }
 
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = [
-      {
-        no_laporan: 'K5123020100019',
-        id_uid: 2,
-        nama_uid: 'DISTRIBUSI JAKARTA RAYA',
-        id_up3: 13,
-        nama_up3: 'UP3 TANJUNG PRIOK',
-        id_ulp: 54510,
-        nama_ulp: 'UP3 TANJUNG PRIOK',
-        idpel_nometer: '',
-        nama_pelapor: 'BP AHMAD',
-        alamat_pelapor:
-          'JL BENTENGAN TIMUR NO31 RT11/03, SUNTER JAYA, TANJUNG PRIOK, KOTA ADM. JAKARTA UTARA, DKI JAKARTA',
-        no_telp_pelapor: '082320000152',
-        keterangan_pelapor:
-          'MOHON BANTUAN PEMBATALAN PERMOHONAN PB NO AGENDA 545109912301319203 DIKARENAKAN PELANGGAN INGIN KE DAYA 2200 VA, PELANGGAN SUDAH MELAKUKAN PEMBAYARAN MELALAUI GOPAY TANGGAL 31/01/2023 PUKUL 18:49 WIB, NAMUN PEMBAYARAN BELUM MASUK, MOHON KONFRIMASI KE PELANGGAN, TERIMA KASIH. ',
-        status_akhir: 'Selesai',
-        pembuat_laporan: 'CC.51.NUGROHO',
-        waktu_lapor: '01/02/2023 01:59:02',
-        waktu_recovery: '01/02/2023 08:33:38',
-        jumlah_lapor: 1,
-        media: 'Call PLN 123',
-        nama_issuetype: 'Informasi',
-        nama_subissuetype: 'PB '
-      },
-      {
-        no_laporan: 'K5123020100021',
-        id_uid: 427,
-        nama_uid: 'DISTRIBUSI JAWA BARAT',
-        id_up3: 547,
-        nama_up3: 'UP3 CIKARANG',
-        id_ulp: 53702,
-        nama_ulp: 'ULP CIBITUNG',
-        idpel_nometer: '',
-        nama_pelapor: 'IBU TITIN ',
-        alamat_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
-        no_telp_pelapor: '087786974290',
-        keterangan_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
-        status_akhir: 'Selesai',
-        pembuat_laporan: 'CC.51.BARIQI',
-        waktu_lapor: '01/02/2023 02:04:04',
-        waktu_recovery: '01/02/2023 02:34:06',
-        jumlah_lapor: 1,
-        media: 'Call PLN 123',
-        nama_issuetype: 'Tagihan Listrik dan Token ',
-        nama_subissuetype: 'Tidak bisa beli Token '
-      },
-      {
-        no_laporan: 'K1423020100022',
-        id_uid: 427,
-        nama_uid: 'DISTRIBUSI JAWA BARAT',
-        id_up3: 532,
-        nama_up3: 'UP3 BEKASI',
-        id_ulp: 53741,
-        nama_ulp: 'ULP BANTARGEBANG',
-        idpel_nometer: '000000000000000001820788',
-        nama_pelapor: 'IBU IRFI ',
-        alamat_pelapor:
-          'JL NIAGA 7 PERUM KEMANG BLOK F NO 23 KEC RAWA LUMBU KEL SEPANJANG JAYA KOTA BEKASI ACUAN LOKASI DEKAT RUMAH YATIM ',
-        no_telp_pelapor: '62816922683',
-        keterangan_pelapor:
-          'TIDAK BISA INPUT TOKEN SETELAH UPDATE VKRN 43 (PTL TIDAK PADAM) \\nDENGAN NO METER 56700750112 DAN SISA KWH 15.1',
-        status_akhir: 'Selesai',
-        pembuat_laporan: 'CC.14.ANDI',
-        waktu_lapor: '01/02/2023 03:13:25',
-        waktu_recovery: '01/02/2023 07:03:37',
-        jumlah_lapor: 1,
-        media: 'Call PLN 123',
-        nama_issuetype: 'Tagihan Listrik dan Token ',
-        nama_subissuetype: 'Gagal Input Token'
-      },
-      {
-        no_laporan: 'K5223020100106',
-        id_uid: 427,
-        nama_uid: 'DISTRIBUSI JAWA BARAT',
-        id_up3: 537,
-        nama_up3: 'UP3 CIREBON',
-        id_ulp: 53331,
-        nama_ulp: 'ULP SUMBER',
-        idpel_nometer: '000000000000000000943441',
-        nama_pelapor: 'IBU MELLY KURNIASIH',
-        alamat_pelapor: 'PERUMAHAN CEMPAKA ARUM JL. FLAMBOYAN 5 NO 191 CIREBON',
-        no_telp_pelapor: '08889353988',
-        keterangan_pelapor:
-          'LEBIH TAGIH. ST AK REK FEB 2023 (28/01/2023) = 4608, ST APP TGL 26/01/2023 = 4496. REK BELUM DILUNASI. (RUMAH TIDAK DIHUNI NAMUN PAGAR TIDAK TERKUNCI, PETUGAS TIDAK DIKETAHUI DATANG KE LOKASI). PELANGGAN MENGINGINKAN AGAR HAL TERSEBUT TIDAK TERULANG KEMBALI.',
-        status_akhir: 'Selesai',
-        pembuat_laporan: 'CC.52.YORDAN.LC',
-        waktu_lapor: '01/02/2023 03:45:58',
-        waktu_recovery: '01/02/2023 06:28:11',
-        jumlah_lapor: 1,
-        media: 'Live Chat PLN Mobile',
-        nama_issuetype: 'Cater',
-        nama_subissuetype: 'Keakuratan hasil catat meter '
-      },
-      {
-        no_laporan: 'K5223020100112',
-        id_uid: 101,
-        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
-        id_up3: 52100,
-        nama_up3: 'UP3 YOGYAKARTA',
-        id_ulp: 52104,
-        nama_ulp: 'ULP SEDAYU',
-        idpel_nometer: '',
-        nama_pelapor: 'BP HENDRIYANTO',
-        alamat_pelapor:
-          'JL.PALEM HIJAU, COKROKONTENG, RT.04 RW.2. KEL SIDOARUM. KEC GODEAN KAB SLEMAN PROV DIY',
-        no_telp_pelapor: '085921182228',
-        keterangan_pelapor:
-          'PELANGGAN TIDAK BISA INPUT TOKEN SETELAH UPDATE VKRN 43. (BELUM ADA) PETUGAS YANG MELAKUKAN PENGATURAN. SISA KWH: 385.41. PTL (HAMPIR PADAM). PELANGGAN PERNAH LAPOR DENGAN NO: K5223013102183, STATUS SELESAI, PELANGGAN TIDAK DIKONFIRMASI s.d 1X6 JAM. LAPOR KEMBALI CC.54.JULIANA TGL 01/02/23 12FZUS3 08.46 085921182228',
-        status_akhir: 'Selesai',
-        pembuat_laporan: 'CC.52.YORDAN.LC',
-        waktu_lapor: '01/02/2023 04:16:48',
-        waktu_recovery: '01/02/2023 12:02:23',
-        jumlah_lapor: 1,
-        media: 'Live Chat PLN Mobile',
-        nama_issuetype: 'Tagihan Listrik dan Token ',
-        nama_subissuetype: 'Gagal Input Token'
-      }
-    ]
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
   }
-})
+}
+
+const closeDialog = () => {
+  dialogDetail.value = false
+}
+
+const showDetail = () => {
+  clearSelection()
+  dialogDetail.value = true
+}
+
+const onExporting = async (e: any) => {
+  const dataGrid = dataGridRef.value!.instance!
+
+  if (e.format === 'pdf' || e.format === 'document') {
+    reportData.value = await data.load()
+  }
+
+  if (e.format === 'pdf' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const pdf = await exportToPDF(reportMeta, reportData)
+
+    if (pdf) {
+      dataGrid.endCustomLoading()
+    }
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta, e)
+  } else if (e.format === 'document' && reportData.value) {
+    dataGrid.beginCustomLoading('')
+    const doc = await exportToDOCX(reportMeta, reportData)
+
+    if (doc) {
+      dataGrid.endCustomLoading()
+    }
+  }
+}
 </script>

src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue

@@ -69,6 +69,15 @@
           css-class="custom-table-column"
           cell-template="formatNumber"
         />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
       </DxColumn>
 
       <DxSummary>

src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue

@@ -1350,6 +1350,12 @@ const getDetail = async () => {
         idUlp: selected?.id_ulp ? selected?.id_ulp : 0
       }
     }
+  } else {
+    query = {
+      ...query,
+      idUid: selected?.id_uid ? selected?.id_uid : 0,
+      idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    }
   }
 
   loadingSubData.value = true

src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue

@@ -46,9 +46,9 @@
         :width="50"
         alignment="center"
         data-type="number"
-        data-field="number"
         caption="No"
         cell-template="formatNumber"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
       />
       <DxColumn
         :width="170"
@@ -1175,14 +1175,7 @@ const filterData = async (params: any) => {
   await requestGraphQl(queries.keluhan.rekap.keluhanPerJenisKeluhan, query)
     .then((result) => {
       if (result.data.data != undefined) {
-        data.value = [...result.data.data.rekapitulasiKeluhanPerJenisKeluhan]
-          .sort((a: any, b: any) => a.tipe_keluhan.localeCompare(b.tipe_keluhan))
-          .map((item: any, index: number) => {
-            return {
-              ...item,
-              number: index + 1
-            }
-          })
+        data.value = result.data.data.rekapitulasiKeluhanPerJenisKeluhan
       } else {
         data.value = []
       }
@@ -1200,6 +1193,7 @@ const filterData = async (params: any) => {
 const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
+  const { ulp, uid, up3 } = filters.value
 
   const query = {
     dateFrom: dateValue[0]
@@ -1208,14 +1202,18 @@ const getDetail = async () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    // idUid: selected?.id_uid ? selected?.id_uid : 0,
+    // idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    // idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
+    idUid: uid.id,
+    idUp3: up3.id,
+    idUlp: ulp.id,
     namaRegional: '',
     isSelesai: progressSelected.value,
     media: '',
     tanggal: '',
-    namaIssuetype: '',
+    // namaIssuetype: '',
+    namaIssuetype: selected?.grouping_tipe_keluhan ? selected?.grouping_tipe_keluhan : '',
     namaSubissuetype: selected?.tipe_keluhan ? selected?.tipe_keluhan : ''
   }
 
@@ -1388,13 +1386,6 @@ onMounted(() => {
         total_diatas_sla_recovery: 2
       }
     ]
-      .sort((a: any, b: any) => a.tipe_keluhan.localeCompare(b.tipe_keluhan))
-      .map((item: any, index: number) => {
-        return {
-          ...item,
-          number: index + 1
-        }
-      })
   }
 })
 </script>

src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue

@@ -1173,6 +1173,12 @@ const getDetail = async () => {
         idUlp: selected?.id_ulp ? selected?.id_ulp : 0
       }
     }
+  } else {
+    query = {
+      ...query,
+      idUid: selected?.id_uid ? selected?.id_uid : 0,
+      idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    }
   }
 
   loadingSubData.value = true

src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue

@@ -1137,7 +1137,7 @@ const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
-  const query = {
+  var query = {
     dateFrom: selected?.tanggal_lapor
       ? reformatDate(selected?.tanggal_lapor, 'dd/MM/yyyy', 'yyyy-MM-dd')
       : '',
@@ -1145,7 +1145,7 @@ const getDetail = async () => {
       ? reformatDate(selected?.tanggal_lapor, 'dd/MM/yyyy', 'yyyy-MM-dd')
       : '',
     idUlp: 0,
-    idUid: isGroupBy.value ? (selected?.id_uid ? selected?.id_uid : 0) : 0,
+    idUid: 0,
     idUp3: 0,
     namaRegional: '',
     isSelesai: progressSelected.value,
@@ -1157,6 +1157,34 @@ const getDetail = async () => {
     namaSubissuetype: ''
   }
 
+  if (isGroupBy.value) {
+    if (grouping.value[0].data == 'nama_uid') {
+      query = {
+        ...query,
+        idUid: selected?.id_uid ? selected?.id_uid : 0
+      }
+    } else if (grouping.value[0].data == 'nama_up3') {
+      query = {
+        ...query,
+        idUid: selected?.id_uid ? selected?.id_uid : 0,
+        idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+      }
+    } else {
+      query = {
+        ...query,
+        idUid: selected?.id_uid ? selected?.id_uid : 0,
+        idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+        idUlp: selected?.id_ulp ? selected?.id_ulp : 0
+      }
+    }
+  } else {
+    query = {
+      ...query,
+      idUid: selected?.id_uid ? selected?.id_uid : 0,
+      idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    }
+  }
+
   loadingSubData.value = true
   await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
     .then((result) => {

src/components/Pages/Material/Rekap/Material_RPM.vue

@@ -15,7 +15,6 @@
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
       @selection-changed="onSelectionChanged"
-      :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
@@ -56,7 +55,7 @@
       />
       <DxColumn
         css-class="custom-table-column"
-        :width="170"
+        :width="250"
         alignment="center"
         data-field="nama_material"
         caption="Nama Material"
@@ -81,7 +80,7 @@
       <DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
         <DxColumn
           v-for="i in 31"
-          :width="150"
+          :width="50"
           alignment="center"
           :data-field="`tgl${i}`"
           data-type="number"
@@ -147,12 +146,20 @@
 
       <div class="flex flex-row items-center justify-between w-full" v-for="i in 31">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl {{ i }}:</h3>
-        <InputText :readonly="true" :value="dataSelected[`tgl${i}`]" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          :value="formatNumber(dataSelected[`tgl${i}`])"
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Jumlah:</h3>
-        <InputText :readonly="true" :value="dataSelected?.total" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          :value="formatNumber(dataSelected?.total)"
+          class-name="flex-1"
+        />
       </div>
     </div>
   </DetailDialog>
@@ -166,7 +173,6 @@ import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
   DxExport,
-  DxLoadPanel,
   DxPager,
   DxPaging,
   DxSearchPanel,
@@ -174,8 +180,6 @@ import {
 } from 'devextreme-vue/data-grid'
 import { Type14 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
-import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'

src/components/Pages/PencarianData/PencarianData.vue

@@ -14,7 +14,6 @@
       :hover-state-enabled="true"
       @selection-changed="onDataSelectionChanged"
       :column-width="100"
-      @exporting=""
       :data-source="data"
       v-if="loadingData == false"
       :allow-column-resizing="true"
@@ -32,11 +31,6 @@
       />
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
 
       <DxColumn
         css-class="custom-table-column"
@@ -95,6 +89,14 @@
         caption="No Tlp Pelapor"
         cell-template="formatText"
       />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="250"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        cell-template="formatText"
+      />
       <DxColumn
         css-class="custom-table-column"
         :width="170"
@@ -145,14 +147,7 @@
         caption="Petugas"
         cell-template="formatText"
       />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="keterangan_dlpd"
-        caption="Keterangan DLPD"
-        cell-template="formatText"
-      />
+      
 
       <template #formatTime="{ data }">
         <p class="cursor-pointer !text-right">
@@ -259,14 +254,7 @@ import { ref, onMounted } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
-import {
-  DxColumn,
-  DxExport,
-  DxPager,
-  DxPaging,
-  DxSearchPanel,
-  DxSelection
-} from 'devextreme-vue/data-grid'
+import { DxColumn, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { Type15 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'

src/components/Pages/Transaksi/Transaksi.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-row items-center w-full mb-6 space-x-4">
     <button
-      @click="tab = 'gangguan'"
+      @click="changeTab('gangguan')"
       type="button"
       class="px-1 py-4 text-sm"
       :class="[
@@ -13,7 +13,7 @@
       Gangguan: Transaksi Aktif > SLA
     </button>
     <button
-      @click="tab = 'keluhan'"
+      @click="changeTab('keluhan')"
       type="button"
       class="px-1 py-4 text-sm"
       :class="[
@@ -179,7 +179,6 @@
         cell-template="formatText"
       />
       <DxColumn
-        v-if="tab == 'keluhan'"
         :width="170"
         alignment="center"
         data-field="status_akhir"
@@ -188,7 +187,6 @@
         cell-template="formatText"
       />
       <DxColumn
-        v-if="tab == 'keluhan'"
         :width="170"
         alignment="center"
         data-field="durasi_time"
@@ -196,6 +194,14 @@
         css-class="custom-table-column"
         cell-template="formatTime"
       />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="email_pelapor"
+        caption="Email"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
 
       <template #formatText="{ data }">
         <p class="text-left">
@@ -274,6 +280,11 @@ const reportMeta = ref({
   periode: ''
 })
 
+const changeTab = (newTab: string) => {
+  tab.value = newTab
+  data.value = []
+}
+
 const formatMetaData = (reportMeta: any) => {
   const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
 
@@ -305,31 +316,12 @@ const onExporting = (e: any) => {
   const worksheet = workbook.addWorksheet('Transaksi APKT')
 
   setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
-  setHeaderStyle(
-    worksheet,
-    2,
-    1,
-    `UNIT PLN : ${reportMeta.value.uid.id ? reportMeta.value.uid.name.toUpperCase() + ',' : ''} ${reportMeta.value.up3.id ? reportMeta.value.up3.name.toUpperCase() + ',' : ''} ${reportMeta.value.ulp.id ? reportMeta.value.ulp.name.toUpperCase() + ',' : ''}`
-  )
-  setHeaderStyle(
-    worksheet,
-    3,
-    1,
-    `STATUS : ${reportMeta.value.status ? reportMeta.value.status.name.toUpperCase() : ''}`
-  )
+
+  setHeaderStyle(worksheet, 3, 1, 'Transaksi APKT'.toUpperCase(), true)
   setHeaderStyle(
     worksheet,
     4,
     1,
-    `SLA : ${reportMeta.value.sla ? reportMeta.value.sla.name.toUpperCase() : ''}`
-  )
-  setHeaderStyle(worksheet, 5, 1, `PENCARIAN : ${reportMeta.value.keyword.toUpperCase()}`)
-
-  setHeaderStyle(worksheet, 7, 1, 'Transaksi APKT'.toUpperCase(), true)
-  setHeaderStyle(
-    worksheet,
-    8,
-    1,
     `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
     true
   )
@@ -338,15 +330,12 @@ const onExporting = (e: any) => {
   worksheet.mergeCells('A2:M2')
   worksheet.mergeCells('A3:M3')
   worksheet.mergeCells('A4:M4')
-  worksheet.mergeCells('A5:M5')
-  worksheet.mergeCells('A7:M7')
-  worksheet.mergeCells('A8:M8')
 
   exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 },
+    topLeftCell: { row: 6, column: 1 },
     loadPanel: {
       enabled: false
     }

src/report/Anomali/Gangguan/Anomali_LAPPGP_LPP.ts

@@ -1,67 +1,34 @@
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import {
-  Document,
-  AlignmentType,
-  Packer,
-  Paragraph,
-  Table,
-  TableCell,
-  TableRow,
-  VerticalAlign,
-  TextRun,
-  WidthType,
-  PageOrientation
-} from 'docx'
 import { saveAs } from 'file-saver'
 import { jsPDF } from 'jspdf'
 import autoTable from 'jspdf-autotable'
 import { Workbook } from 'exceljs'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
-import { exportToWord } from './doc/Anomali_LAPPGP_LPP'
+import { exportToWord, exportDetailToWord } from './doc/Anomali_LAPPGP_LPP'
 
 const reportName = 'Anomali Penanganan Pengaduan Gangguan Petugas'
 const fontSize = 5
+const detailFontSize = 3
 
 const formatData = (rawData: any) => {
   const formattedData: any = []
-  const total: any = {
-    wo_total: 0,
-    anomali_pln_mobile_marking: 0,
-    anomali_cc123_marking: 0
-    // total_anomali_marking: 0
-    // persen_anomali_pln_mobile_marking: 0
-    // persen_anomali_cc123_marking
-    // persen_anomali_marking
-  }
 
   rawData.forEach((item: any) => {
-    total.wo_total += item.wo_total
-    total.anomali_pln_mobile_marking += item.anomali_pln_mobile_marking
-    total.anomali_cc123_marking += item.anomali_cc123_marking
+    formattedData.push([
+      item.nama_unit,
+      item.nama_petugas,
+      formatNumber(item.wo_total),
+      formatNumber(item.wo_pln_mobile),
+      formatNumber(item.wo_cc123),
+      formatNumber(item.wo_pln_mobile + item.wo_cc123),
+      formatPercentage(item.persen_anomali_pln_mobile),
+      formatPercentage(item.persen_anomali_cc123),
+      formatPercentage(item.persen_anomali_pln_mobile + item.persen_anomali_cc123)
+    ])
   })
 
-  const total_anomali_marking = total.anomali_pln_mobile_marking + total.anomali_cc123_marking
-  const persen_anomali_pln_mobile_marking = total.anomali_pln_mobile_marking / total.wo_total
-  const persen_anomali_cc123_marking = total.anomali_cc123_marking / total.wo_total
-  const persen_anomali_marking = persen_anomali_pln_mobile_marking + persen_anomali_cc123_marking
-
-  formattedData.push([
-    {
-      content: 'Semua Unit',
-      colSpan: 2
-    },
-    formatNumber(total.wo_total),
-    formatNumber(total.anomali_pln_mobile_marking),
-    formatNumber(total.anomali_cc123_marking),
-    formatNumber(total_anomali_marking),
-    formatPercentage(
-      !persen_anomali_pln_mobile_marking ? 0 : persen_anomali_pln_mobile_marking * 100
-    ),
-    formatPercentage(!persen_anomali_cc123_marking ? 0 : persen_anomali_cc123_marking * 100),
-    formatPercentage(!persen_anomali_marking ? 0 : persen_anomali_marking * 100)
-  ])
-
   return formattedData
 }
 
@@ -95,8 +62,8 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
-  const data = formatData(rawData)
   const meta = formatMetaData(reportMeta)
+  const data = formatData(rawData)
   const doc = new jsPDF({
     orientation: 'landscape'
   })
@@ -255,6 +222,210 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
+const createDetailTableField = (reportMeta: any, rawData: any) => {
+  const field = ['No', 'UIW/D', 'UP3', 'Rayon', 'Nama Petugas']
+
+  if (reportMeta.jenisLaporan.name === 'Laporan Berulang Unit') {
+    field.push(
+      ...[
+        'No Laporan',
+        'No Laporan Lapor Ulang',
+        'No Laporan Referensi',
+        'Status Induk',
+        'Referensi Marking Induk'
+      ]
+    )
+  }
+
+  if (reportMeta.jenisLaporan.name === 'Laporan Rating Negatif') {
+    field.push(...['Rating', 'Feedback', 'Ulasan'])
+  }
+
+  field.push(
+    ...[
+      'Tgl/Jam Lapor',
+      'Tgl/Jam Datang',
+      'Tgl/Jam Nyala',
+      'Durasi Response Time',
+      'Durasi Recovery Time',
+      'Durasi Penugasan Regu',
+      'Durasi Perjalanan Regu',
+      'Jarak Closing',
+      'Dispacth Oleh',
+      'IDPEL/NO METER',
+      'Nama Pelapor',
+      'Alamat Pelapor',
+      'No Telp Pelapor',
+      'Keterangan Pelapor',
+      'Sumber Lapor',
+      'Diselesaikan Oleh',
+      'Status',
+      'Referensi Marking',
+      'Kode Gangguan',
+      'Jenis Gangguan',
+      'Penyebab',
+      'Tindakan'
+    ]
+  )
+
+  const rows = rawData.map((item: any, i: any) => {
+    const data = [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.nama_uid,
+      item.nama_up3,
+      item.nama_ulp,
+      item.nama_petugas
+    ]
+
+    if (reportMeta.jenisLaporan.name === 'Laporan Berulang Unit') {
+      data.push(
+        ...[
+          item.no_laporan,
+          item.no_laporan_laporulang,
+          item.no_laporan,
+          item.status_induk,
+          item.referensi_marking_induk
+        ]
+      )
+    }
+
+    if (reportMeta.jenisLaporan.name === 'Laporan Rating Negatif') {
+      data.push(...[item.rating, item.feedback, item.ulasan])
+    }
+
+    data.push(
+      ...[
+        item.waktu_lapor,
+        item.waktu_response,
+        item.waktu_recovery,
+        item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-',
+        item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-',
+        item.durasi_dispatch_time ? formatWaktu(item.durasi_dispatch_time) : '-',
+        item.durasi_perjalanan ? formatWaktu(item.durasi_perjalanan) : '-',
+        item.distance,
+        item.dispatch_by,
+        item.idpel_nometer,
+        item.nama_pelapor,
+        item.alamat_pelapor,
+        item.no_telp_pelapor,
+        item.keterangan_pelapor,
+        item.media,
+        item.diselesaikan_oleh,
+        item.status_akhir,
+        item.marking,
+        item.kode_gangguan,
+        item.jenis_gangguan,
+        item.penyebab,
+        item.tindakan
+      ]
+    )
+
+    return data
+  })
+
+  return { field, rows }
+}
+
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+  const date = new Date().getDate()
+  const month = new Date().toLocaleString('id-ID', { month: 'long' })
+  const year = new Date().getFullYear()
+  const meta = formatMetaData(reportMeta)
+  const { field, rows } = createDetailTableField(reportMeta, rawData)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [['PT. PLN(Persero)']],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`Daftar Detail ${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 18,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [field],
+    body: rows,
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 24,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${day}, ${date}-${month}-${year}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
 const exportToXLSX = (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
@@ -327,9 +498,60 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
+const exportDetailToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:AC1')
+  worksheet.mergeCells('A3:AC3')
+  worksheet.mergeCells('A4:AC4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
 const exportToDOCX = (reportMeta: any, rawData: any) => {
   const meta = formatMetaData(reportMeta)
   exportToWord(reportMeta, meta, formatData(rawData), reportName)
 }
 
-export { exportToPDF, exportToXLSX, exportToDOCX }
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportDetailToWord(meta, createDetailTableField(reportMeta, rawData), reportName)
+}
+
+export {
+  exportToPDF,
+  exportToXLSX,
+  exportToDOCX,
+  exportDetailToPDF,
+  exportDetailToXLSX,
+  exportDetailToDOCX
+}

src/report/Anomali/Gangguan/Anomali_LAPPGP_LPT.ts

@@ -10,82 +10,154 @@ import { exportToWord } from './doc/Anomali_LAPPGP_LPT'
 const reportName = 'Anomali Penanganan Pengaduan Gangguan Petugas'
 const fontSize = 5
 
-const formatData = (rawData: any) => {
-  const formattedData: any = []
-  const total: any = {
-    total_petugas: 0,
-    anomali_pln_mobile_marking: 0,
-    anomali_pln_mobile_non_marking: 0,
-    anomali_cc123_marking: 0,
-    anomali_cc123_non_marking: 0
-    // total_anomali_marking: 0,
-    // total_anomali_non_marking: 0,
-    // persen_anomali_pln_mobile_marking
-    // persen_anomali_pln_mobile_non_marking
-    // persen_anomali_cc123_marking
-    // persen_anomali_cc123_non_marking
-    // persen_anomali_marking
-    // persen_anomali_non_marking
+const groupingData = (data: any, reportMeta: any) => {
+  const groupedData: any = {}
+
+  const reportMetaMapping: any = {
+    up3: 'nama_ulp',
+    uid: 'nama_up3',
+    default: 'nama_uid'
   }
 
-  rawData.forEach((item: any) => {
-    total.total_petugas += item.total_petugas
-    total.anomali_pln_mobile_marking += item.anomali_pln_mobile_marking
-    total.anomali_pln_mobile_non_marking += item.anomali_pln_mobile_non_marking
-    total.anomali_cc123_marking += item.anomali_cc123_marking
-    total.anomali_cc123_non_marking += item.anomali_cc123_non_marking
+  let key = 'nama_uid'
+  for (const prop in reportMetaMapping) {
+    if (reportMeta[prop] && reportMeta[prop].id != 0) {
+      key = reportMetaMapping[prop]
+      break
+    }
+  }
+
+  data.forEach((item: any) => {
+    const groupKey = item[key]
+
+    if (!groupedData[groupKey]) {
+      groupedData[groupKey] = { data: [] }
+    }
+
+    groupedData[groupKey].data.push(item)
   })
 
-  const total_anomali_marking = total.anomali_pln_mobile_marking + total.anomali_cc123_marking
-  const total_anomali_non_marking =
-    total.anomali_pln_mobile_non_marking + total.anomali_cc123_non_marking
-  const persen_anomali_pln_mobile_marking = total.anomali_pln_mobile_marking / total.total_petugas
-  const persen_anomali_pln_mobile_non_marking =
-    total.anomali_pln_mobile_non_marking / total.total_petugas
-  const persen_anomali_cc123_marking = total.anomali_cc123_marking / total.total_petugas
-  const persen_anomali_cc123_non_marking = total.anomali_cc123_non_marking / total.total_petugas
-  const persen_anomali_marking = persen_anomali_pln_mobile_marking + persen_anomali_cc123_marking
-  const persen_anomali_non_marking =
-    persen_anomali_pln_mobile_non_marking + persen_anomali_cc123_non_marking
+  for (const key in groupedData) {
+    const data = groupedData[key].data
 
-  formattedData.push([
-    'Semua Unit',
-    formatNumber(total.total_petugas),
-    formatNumber(total.anomali_pln_mobile_marking),
-    formatNumber(total.anomali_pln_mobile_non_marking),
-    formatNumber(total.anomali_cc123_marking),
-    formatNumber(total.anomali_cc123_non_marking),
-    formatNumber(total_anomali_marking),
-    formatNumber(total_anomali_non_marking),
-    formatPercentage(
-      !persen_anomali_pln_mobile_marking || !!isFinite(persen_anomali_pln_mobile_marking)
-        ? 0
-        : persen_anomali_pln_mobile_marking * 100
-    ),
-    formatPercentage(
-      !persen_anomali_pln_mobile_non_marking || !!isFinite(persen_anomali_pln_mobile_non_marking)
-        ? 0
-        : persen_anomali_pln_mobile_non_marking * 100
-    ),
-    formatPercentage(
-      !persen_anomali_cc123_marking || !!isFinite(persen_anomali_cc123_marking)
-        ? 0
-        : persen_anomali_cc123_marking * 100
-    ),
-    formatPercentage(
-      !persen_anomali_cc123_non_marking || !!isFinite(persen_anomali_cc123_non_marking)
-        ? 0
-        : persen_anomali_cc123_non_marking * 100
-    ),
-    formatPercentage(
-      !persen_anomali_marking || !!isFinite(persen_anomali_marking) ? 0 : persen_anomali_marking
-    ),
-    formatPercentage(
-      !persen_anomali_non_marking || !!isFinite(persen_anomali_non_marking)
-        ? 0
-        : persen_anomali_non_marking * 100
-    )
-  ])
+    data.forEach((item: any) => {
+      if (!groupedData[key].summary) {
+        groupedData[key].summary = {
+          total_petugas: 0,
+          petugas_pln_mobile_marking: 0,
+          petugas_pln_mobile_nonmarking: 0,
+          petugas_cc123_marking: 0,
+          petugas_cc123_nonmarking: 0
+          // petugas_anomali_marking: 0,
+          // petugas_anomali_nonmarking: 0,
+          // persen_pln_mobile_marking
+          // persen_pln_mobile_non_marking
+          // persen_cc123_marking
+          // persen_cc123_nonmarking
+          // persen_anomali_marking
+          // persen_anomali_non_marking
+        }
+      }
+
+      groupedData[key].summary.total_petugas += item.total_petugas
+      groupedData[key].summary.petugas_pln_mobile_marking += item.petugas_pln_mobile_marking
+      groupedData[key].summary.petugas_pln_mobile_nonmarking += item.petugas_pln_mobile_nonmarking
+      groupedData[key].summary.petugas_cc123_marking += item.petugas_cc123_marking
+      groupedData[key].summary.petugas_cc123_nonmarking += item.petugas_cc123_nonmarking
+    })
+
+    groupedData[key].summary.petugas_anomali_marking =
+      groupedData[key].summary.petugas_pln_mobile_marking +
+      groupedData[key].summary.petugas_cc123_marking
+    groupedData[key].summary.petugas_anomali_nonmarking =
+      groupedData[key].summary.petugas_pln_mobile_nonmarking +
+      groupedData[key].summary.petugas_cc123_nonmarking
+
+    groupedData[key].summary.persen_pln_mobile_marking =
+      (groupedData[key].summary.petugas_pln_mobile_marking /
+        groupedData[key].summary.total_petugas) *
+      100
+
+    groupedData[key].summary.persen_pln_mobile_non_marking =
+      (groupedData[key].summary.petugas_pln_mobile_nonmarking /
+        groupedData[key].summary.total_petugas) *
+      100
+
+    groupedData[key].summary.persen_cc123_marking =
+      (groupedData[key].summary.petugas_cc123_marking / groupedData[key].summary.total_petugas) *
+      100
+
+    groupedData[key].summary.persen_cc123_nonmarking =
+      (groupedData[key].summary.petugas_cc123_nonmarking / groupedData[key].summary.total_petugas) *
+      100
+
+    groupedData[key].summary.persen_anomali_marking =
+      groupedData[key].summary.persen_pln_mobile_marking +
+      groupedData[key].summary.persen_cc123_marking
+    groupedData[key].summary.persen_anomali_non_marking =
+      groupedData[key].summary.persen_pln_mobile_non_marking +
+      groupedData[key].summary.persen_cc123_nonmarking
+  }
+
+  return groupedData
+}
+
+const getTitle = (reportMeta: any) => {
+  if (reportMeta.up3.id != 0) {
+    return 'nama_up3'
+  }
+
+  if (reportMeta.uid.id != 0) {
+    return 'nama_uid'
+  }
+
+  return 'nama_regional'
+}
+
+const formatData = (rawData: any, reportMeta: any) => {
+  const formattedData: any = []
+  const groupedData: any = {}
+
+  const data = groupingData(rawData, reportMeta)
+  const title = getTitle(reportMeta)
+
+  for (const key in data) {
+    const groupKey = data[key].data[0][title]
+
+    if (!groupedData[groupKey]) {
+      groupedData[groupKey] = { data: [] }
+    }
+
+    groupedData[groupKey].data.push({
+      key: key,
+      value: data[key]
+    })
+  }
+
+  for (const key in groupedData) {
+    formattedData.push([{ content: key, colSpan: 14, styles: { fontStyle: 'bold' } }])
+
+    groupedData[key].data.forEach((item: any) => {
+      const summary = item.value.summary
+
+      formattedData.push([
+        item.key,
+        formatNumber(summary.total_petugas),
+        formatNumber(summary.petugas_pln_mobile_marking),
+        formatNumber(summary.petugas_pln_mobile_nonmarking),
+        formatNumber(summary.petugas_cc123_marking),
+        formatNumber(summary.petugas_cc123_nonmarking),
+        formatNumber(summary.petugas_anomali_marking),
+        formatNumber(summary.petugas_anomali_nonmarking),
+        formatPercentage(summary.persen_pln_mobile_marking),
+        formatPercentage(summary.persen_pln_mobile_non_marking),
+        formatPercentage(summary.persen_cc123_marking),
+        formatPercentage(summary.persen_cc123_nonmarking),
+        formatPercentage(summary.persen_anomali_marking),
+        formatPercentage(summary.persen_anomali_non_marking)
+      ])
+    })
+  }
 
   return formattedData
 }
@@ -120,7 +192,7 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
-  const data = formatData(rawData)
+  const data = formatData(rawData, reportMeta)
   const meta = formatMetaData(reportMeta)
   const doc = new jsPDF({
     orientation: 'landscape'
@@ -410,7 +482,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
 
 const exportToDOCX = (reportMeta: any, rawData: any) => {
   const meta = formatMetaData(reportMeta)
-  exportToWord(reportMeta, meta, formatData(rawData), reportName)
+  exportToWord(reportMeta, meta, formatData(rawData, reportMeta), reportName)
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }

src/report/Anomali/Gangguan/doc/Anomali_LAPPGP_LPP.ts

@@ -35,7 +35,7 @@ export const exportToWord = (
     tbody += column
   }
 
-  let preHtml = `
+  const preHtml = `
     <html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
     <head>
       <meta charset='utf-8'>
@@ -178,3 +178,100 @@ export const exportToWord = (
   downloadLink.click()
   document.body.removeChild(downloadLink)
 }
+
+export const exportDetailToWord = (formattedMeta: any, rawData: any, reportName: String) => {
+  const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+  const date = new Date().getDate()
+  const month = new Date().toLocaleString('id-ID', { month: 'long' })
+  const year = new Date().getFullYear()
+  const filename = 'Laporan Detail ' + reportName + '.doc'
+
+  const preHtml = `
+    <html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
+    <head>
+      <meta charset='utf-8'>
+      <title>Daftar Detail ${reportName}</title>
+      <style type="text/css" media="print">
+        @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:1.0cm 1.0cm 1.0cm 1.0cm;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+        }
+    
+        div.Section1 {
+          page:Section1;
+        }
+
+        table.meta tr td {
+          text-align: left;
+        }
+
+        table.main {
+          border-collapse: collapse;
+          width: 100%;
+          text-transform: uppercase;
+          font-size: 5px;
+        }
+
+        table.main thead tr {
+          background-color: #c0c0c0;
+        }
+      </style>
+    </head>
+    <body>
+  `
+
+  const body = `
+    <div class=Section1>
+      <header>
+        <h6>PT. PLN(Persero)</h6>
+        <br>
+        <table width="100%">
+          <tr>
+            <th><h6>${'DAFTAR DETAIL ' + reportName.toUpperCase()}</h6></th>
+          </tr>
+          <tr>
+            <th><h6>${`PERIODE TANGGAL : ${formattedMeta.dateFromFormat} SD TGL ${formattedMeta.dateToFormat}`}</h6></th>
+          </tr>
+        </table>
+      </header>
+
+      <br>
+
+      <table border="1" class="main">
+        <thead>
+          <tr>
+            ${rawData.field.map((item: any) => `<th>${item}</th>`).join('')}
+          </tr>
+        </thead>
+        <tbody>
+          ${rawData.rows
+            .map((row: any) => {
+              return `<tr>${row.map((item: any) => `<td>${item.content || item}</td>`).join('')}</tr>`
+            })
+            .join('')}
+        </tbody>
+      </table>
+      <br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer>
+    </div>
+  `
+
+  const postHtml = '</body></html>'
+  const html = preHtml + body + postHtml
+  const url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html)
+  const downloadLink = document.createElement('a')
+
+  document.body.appendChild(downloadLink)
+  downloadLink.href = url
+  downloadLink.download = filename
+  downloadLink.click()
+  document.body.removeChild(downloadLink)
+}

src/report/Anomali/Gangguan/doc/Anomali_LAPPGP_LPT.ts

@@ -27,7 +27,7 @@ export const exportToWord = (
       }
 
       i === 0
-        ? (column += `<th ${styleTotal} ${colSpan} align="left">${content.content || content}</th>`)
+        ? (column += `<td ${styleTotal} ${colSpan ? `${colSpan} style="font-weight: bold;` : ''} align="left">${content.content || content}</td>`)
         : (column += `<td ${styleTotal}>${content}</td>`)
     }
 
@@ -35,7 +35,7 @@ export const exportToWord = (
     tbody += column
   }
 
-  let preHtml = `
+  const preHtml = `
     <html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
     <head>
       <meta charset='utf-8'>

src/report/Anomali/Gangguan/doc/Anomali_LAPPGU_LPT.ts

@@ -37,7 +37,7 @@ export const exportToWord = (
     tbody += column
   }
 
-  let preHtml = `
+  const preHtml = `
     <html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
     <head>
       <meta charset='utf-8'>
@@ -209,7 +209,7 @@ export const exportDetailToWord = (formattedMeta: any, rawData: any, reportName:
   const year = new Date().getFullYear()
   const filename = 'Laporan Detail ' + reportName + '.doc'
 
-  let preHtml = `
+  const preHtml = `
     <html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
     <head>
       <meta charset='utf-8'>

src/report/Gangguan/Daftar/DGangguan_BM.ts

@@ -46,12 +46,13 @@ const formatMetaData = (reportMeta: any) => {
   return { dateFromFormat, dateToFormat, dayTo }
 }
 
-const exportToPDF = (reportMeta: any, data: any) => {
+const exportToPDF = async (reportMeta: any, data: any) => {
   const meta = formatMetaData(reportMeta)
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
+  const resultData = data.value.data
   const doc = new jsPDF({
     orientation: 'landscape'
   })
@@ -134,7 +135,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
         'Keterangan Media'
       ]
     ],
-    body: data.value.map((item: any, i: any) => [
+    body: resultData.map((item: any, i: any) => [
       { content: ++i, styles: { halign: 'right' } },
       item.no_laporan,
       item.nama_pelapor,
@@ -201,12 +202,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .save(`Laporan ${reportName}.pdf`, { returnPromise: true })
+    .then(() => {
+      console.log('PDF Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting PDF', error)
+    })
+
+  return true
 }
 
-const exportToXLSX = (reportMeta: any, data: any, e: any) => {
+const exportToXLSX = async (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
   const worksheet = workbook.addWorksheet(`${reportName}`)
@@ -269,14 +277,11 @@ const exportToXLSX = (reportMeta: any, data: any, e: any) => {
   worksheet.mergeCells('H7:J7')
   worksheet.mergeCells('H8:J8')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 },
-    loadPanel: {
-      enabled: false
-    }
+    topLeftCell: { row: 10, column: 1 }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -286,15 +291,16 @@ const exportToXLSX = (reportMeta: any, data: any, e: any) => {
   e.cancel = true
 }
 
-const exportToDOCX = (reportMeta: any, data: any) => {
+const exportToDOCX = async (reportMeta: any, data: any) => {
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
   const meta = formatMetaData(reportMeta)
+  const resultData = data.value.data
 
   const generateRows = () => {
-    return data.value.map((item: any, i: any) => {
+    return resultData.map((item: any, i: any) => {
       return new TableRow({
         children: [
           { text: `${++i}`, field: 'no' },
@@ -542,10 +548,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }

src/report/Gangguan/Daftar/DGangguan_DKPL.ts

@@ -48,12 +48,13 @@ const formatMetaData = (reportMeta: any) => {
   return { dateFromFormat, dateToFormat, dayTo }
 }
 
-const exportToPDF = (reportMeta: any, data: any) => {
+const exportToPDF = async (reportMeta: any, data: any) => {
   const meta = formatMetaData(reportMeta)
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
+  const resultData = data.value.data
   const doc = new jsPDF({
     orientation: 'landscape'
   })
@@ -133,7 +134,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
         'Posko'
       ]
     ],
-    body: data.value.map((item: any, i: any) => [
+    body: resultData.map((item: any, i: any) => [
       { content: ++i, styles: { halign: 'right' } },
       item.no_laporan,
       item.pembuat_laporan,
@@ -204,12 +205,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .save(`Laporan ${reportName}.pdf`, { returnPromise: true })
+    .then(() => {
+      console.log('PDF Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting PDF', error)
+    })
+
+  return true
 }
 
-const exportToXLSX = (reportMeta: any, e: any) => {
+const exportToXLSX = async (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
   const worksheet = workbook.addWorksheet(`${reportName}`)
@@ -262,14 +270,11 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   worksheet.mergeCells('A6:S6')
   worksheet.mergeCells('A7:S7')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 },
-    loadPanel: {
-      enabled: false
-    }
+    topLeftCell: { row: 10, column: 1 }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -279,15 +284,16 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-const exportToDOCX = (reportMeta: any, data: any) => {
+const exportToDOCX = async (reportMeta: any, data: any) => {
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
   const meta = formatMetaData(reportMeta)
+  const resultData = data.value.data
 
   const generateRows = () => {
-    return data.value.map((item: any, i: any) => {
+    return resultData.map((item: any, i: any) => {
       return new TableRow({
         children: [
           { text: `${++i}`, field: 'no' },
@@ -530,11 +536,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    console.log(blob)
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }

src/report/Gangguan/Daftar/DGangguan_DMAPKT.ts

@@ -46,12 +46,13 @@ const formatMetaData = (reportMeta: any) => {
   return { dateFromFormat, dateToFormat, dayTo }
 }
 
-const exportToPDF = (reportMeta: any, data: any) => {
+const exportToPDF = async (reportMeta: any, data: any) => {
   const meta = formatMetaData(reportMeta)
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
+  const resultData = data.value.data
   const doc = new jsPDF({
     orientation: 'landscape'
   })
@@ -127,7 +128,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
         'Posko'
       ]
     ],
-    body: data.value.map((item: any, i: any) => [
+    body: resultData.map((item: any, i: any) => [
       { content: ++i, styles: { halign: 'right' } },
       item.no_laporan,
       item.waktu_lapor,
@@ -194,12 +195,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .save(`Laporan ${reportName}.pdf`, { returnPromise: true })
+    .then(() => {
+      console.log('PDF Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting PDF', error)
+    })
+
+  return true
 }
 
-const exportToXLSX = (reportMeta: any, data: any, e: any) => {
+const exportToXLSX = async (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
   const worksheet = workbook.addWorksheet(`${reportName}`)
@@ -252,14 +260,11 @@ const exportToXLSX = (reportMeta: any, data: any, e: any) => {
   worksheet.mergeCells('H7:J7')
   worksheet.mergeCells('H8:J8')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 },
-    loadPanel: {
-      enabled: false
-    }
+    topLeftCell: { row: 10, column: 1 }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -269,15 +274,16 @@ const exportToXLSX = (reportMeta: any, data: any, e: any) => {
   e.cancel = true
 }
 
-const exportToDOCX = (reportMeta: any, data: any) => {
+const exportToDOCX = async (reportMeta: any, data: any) => {
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
   const meta = formatMetaData(reportMeta)
+  const resultData = data.value.data
 
   const generateRows = () => {
-    return data.value.map((item: any, i: any) => {
+    return resultData.map((item: any, i: any) => {
       return new TableRow({
         children: [
           { text: `${++i}`, field: 'no' },
@@ -512,10 +518,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }

src/report/Gangguan/Daftar/DGangguan_MLD1K.ts

@@ -46,12 +46,13 @@ const formatMetaData = (reportMeta: any) => {
   return { dateFromFormat, dateToFormat, dayTo }
 }
 
-const exportToPDF = (reportMeta: any, data: any) => {
+const exportToPDF = async (reportMeta: any, data: any) => {
   const meta = formatMetaData(reportMeta)
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
+  const resultData = data.value.data
   const doc = new jsPDF({
     orientation: 'landscape'
   })
@@ -129,7 +130,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
         'Posko'
       ]
     ],
-    body: data.value.map((item: any, i: any) => [
+    body: resultData.map((item: any, i: any) => [
       { content: ++i, styles: { halign: 'right' } },
       item.no_laporan,
       item.waktu_lapor,
@@ -197,12 +198,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .save(`Laporan ${reportName}.pdf`, { returnPromise: true })
+    .then(() => {
+      console.log('PDF Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting PDF', error)
+    })
+
+  return true
 }
 
-const exportToXLSX = (reportMeta: any, data: any, e: any) => {
+const exportToXLSX = async (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
   const worksheet = workbook.addWorksheet(`${reportName}`)
@@ -261,14 +269,11 @@ const exportToXLSX = (reportMeta: any, data: any, e: any) => {
   worksheet.mergeCells('H7:J7')
   worksheet.mergeCells('H8:J8')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 11, column: 1 },
-    loadPanel: {
-      enabled: false
-    }
+    topLeftCell: { row: 11, column: 1 }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -278,15 +283,16 @@ const exportToXLSX = (reportMeta: any, data: any, e: any) => {
   e.cancel = true
 }
 
-const exportToDOCX = (reportMeta: any, data: any) => {
+const exportToDOCX = async (reportMeta: any, data: any) => {
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
   const meta = formatMetaData(reportMeta)
+  const resultData = data.value.data
 
   const generateRows = () => {
-    return data.value.map((item: any, i: any) => {
+    return resultData.map((item: any, i: any) => {
       return new TableRow({
         children: [
           { text: `${++i}`, field: 'no' },
@@ -532,10 +538,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }

src/report/Gangguan/Daftar/DGangguan_RecoveryTime.ts

@@ -64,12 +64,13 @@ const formatMetaData = (reportMeta: any) => {
   }
 }
 
-const exportToPDF = (reportMeta: any, data: any) => {
+const exportToPDF = async (reportMeta: any, data: any) => {
   const meta = formatMetaData(reportMeta)
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
+  const resultData = data.value.data
   const doc = new jsPDF({
     orientation: 'landscape'
   })
@@ -150,7 +151,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
         'Posko'
       ]
     ],
-    body: data.value.map((item: any, i: any) => [
+    body: resultData.map((item: any, i: any) => [
       { content: ++i, styles: { halign: 'right' } },
       item.no_laporan,
       item.waktu_lapor,
@@ -217,12 +218,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .save(`Laporan ${reportName}.pdf`, { returnPromise: true })
+    .then(() => {
+      console.log('PDF Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting PDF', error)
+    })
+
+  return true
 }
 
-const exportToXLSX = (reportMeta: any, data: any, e: any) => {
+const exportToXLSX = async (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
 
   const workbook = new Workbook()
@@ -282,14 +290,11 @@ const exportToXLSX = (reportMeta: any, data: any, e: any) => {
   worksheet.mergeCells('H7:J7')
   worksheet.mergeCells('H8:J8')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 11, column: 1 },
-    loadPanel: {
-      enabled: false
-    }
+    topLeftCell: { row: 10, column: 1 }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -299,15 +304,16 @@ const exportToXLSX = (reportMeta: any, data: any, e: any) => {
   e.cancel = true
 }
 
-const exportToDOCX = (reportMeta: any, data: any) => {
+const exportToDOCX = async (reportMeta: any, data: any) => {
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
   const meta = formatMetaData(reportMeta)
+  const resultData = data.value.data
 
   const generateRows = () => {
-    return data.value.map((item: any, i: any) => {
+    return resultData.map((item: any, i: any) => {
       return new TableRow({
         children: [
           { text: `${++i}`, field: 'no' },
@@ -553,10 +559,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }

src/report/Gangguan/Daftar/DGangguan_ResponseTime.ts

@@ -64,12 +64,13 @@ const formatMetaData = (reportMeta: any) => {
   }
 }
 
-const exportToPDF = (reportMeta: any, data: any) => {
+const exportToPDF = async (reportMeta: any, data: any) => {
   const meta = formatMetaData(reportMeta)
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
+  const resultData = data.value.data
   const doc = new jsPDF({
     orientation: 'landscape'
   })
@@ -150,7 +151,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
         'Posko'
       ]
     ],
-    body: data.value.map((item: any, i: any) => [
+    body: resultData.map((item: any, i: any) => [
       { content: ++i, styles: { halign: 'right' } },
       item.no_laporan,
       item.waktu_lapor,
@@ -217,12 +218,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .save(`Laporan ${reportName}.pdf`, { returnPromise: true })
+    .then(() => {
+      console.log('PDF Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting PDF', error)
+    })
+
+  return true
 }
 
-const exportToXLSX = (reportMeta: any, data: any, e: any) => {
+const exportToXLSX = async (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
 
   const workbook = new Workbook()
@@ -282,14 +290,11 @@ const exportToXLSX = (reportMeta: any, data: any, e: any) => {
   worksheet.mergeCells('H7:J7')
   worksheet.mergeCells('H8:J8')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 11, column: 1 },
-    loadPanel: {
-      enabled: false
-    }
+    topLeftCell: { row: 11, column: 1 }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -299,15 +304,16 @@ const exportToXLSX = (reportMeta: any, data: any, e: any) => {
   e.cancel = true
 }
 
-const exportToDOCX = (reportMeta: any, data: any) => {
+const exportToDOCX = async (reportMeta: any, data: any) => {
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
   const meta = formatMetaData(reportMeta)
+  const resultData = data.value.data
 
   const generateRows = () => {
-    return data.value.map((item: any, i: any) => {
+    return resultData.map((item: any, i: any) => {
       return new TableRow({
         children: [
           { text: `${++i}`, field: 'no' },
@@ -553,10 +559,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }

src/report/Gangguan/Daftar/DGangguan_STIDP.ts

@@ -46,12 +46,13 @@ const formatMetaData = (reportMeta: any) => {
   return { dateFromFormat, dateToFormat, dayTo }
 }
 
-const exportToPDF = (reportMeta: any, data: any) => {
+const exportToPDF = async (reportMeta: any, data: any) => {
   const meta = formatMetaData(reportMeta)
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
+  const resultData = data.value.data
   const doc = new jsPDF({
     orientation: 'landscape'
   })
@@ -127,7 +128,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
         'Posko'
       ]
     ],
-    body: data.value.map((item: any, i: any) => [
+    body: resultData.map((item: any, i: any) => [
       { content: ++i, styles: { halign: 'right' } },
       item.no_laporan,
       item.waktu_lapor,
@@ -194,12 +195,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .save(`Laporan ${reportName}.pdf`, { returnPromise: true })
+    .then(() => {
+      console.log('PDF Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting PDF', error)
+    })
+
+  return true
 }
 
-const exportToXLSX = (reportMeta: any, data: any, e: any) => {
+const exportToXLSX = async (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
   const worksheet = workbook.addWorksheet(`${reportName}`)
@@ -252,14 +260,11 @@ const exportToXLSX = (reportMeta: any, data: any, e: any) => {
   worksheet.mergeCells('H7:J7')
   worksheet.mergeCells('H8:J8')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 },
-    loadPanel: {
-      enabled: false
-    }
+    topLeftCell: { row: 10, column: 1 }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -269,15 +274,16 @@ const exportToXLSX = (reportMeta: any, data: any, e: any) => {
   e.cancel = true
 }
 
-const exportToDOCX = (reportMeta: any, data: any) => {
+const exportToDOCX = async (reportMeta: any, data: any) => {
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
   const meta = formatMetaData(reportMeta)
+  const resultData = data.value.data
 
   const generateRows = () => {
-    return data.value.map((item: any, i: any) => {
+    return resultData.map((item: any, i: any) => {
       return new TableRow({
         children: [
           { text: `${++i}`, field: 'no' },
@@ -512,10 +518,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }

src/report/Gangguan/Rekap/RGangguan_KTI.ts

@@ -10,12 +10,14 @@ import { exportDetailToWord, exportToWord } from './doc/RGangguan_KTI_DOC'
 const reportName = 'Rekapitulasi Koreksi Transaksi Individual'
 const fontSize = 5
 const detailFontSize = 3
+let metaReport: any = {}
 
 const formatData = (rawData: any) => {
+  const { uid, up3, posko } = metaReport
   const formattedData: any = []
   const total: any = {
     month1: 0,
-    month2: 1,
+    month2: 0,
     month3: 0,
     month4: 0,
     month5: 0,
@@ -28,7 +30,19 @@ const formatData = (rawData: any) => {
     month12: 0
   }
 
-  formattedData.push([{ content: 'SELURUH UNIT', colSpan: 14, styles: { fontStyle: 'bold' } }])
+  if (uid.id == 0) {
+    formattedData.push([{ content: 'SELURUH UNIT', colSpan: 14, styles: { fontStyle: 'bold' } }])
+  } else {
+    if (up3.id == 0) {
+      formattedData.push([{ content: uid.name, colSpan: 14, styles: { fontStyle: 'bold' } }])
+    } else {
+      if (posko.id == 0) {
+        formattedData.push([{ content: up3.name, colSpan: 14, styles: { fontStyle: 'bold' } }])
+      } else {
+        formattedData.push([{ content: posko.name, colSpan: 14, styles: { fontStyle: 'bold' } }])
+      }
+    }
+  }
 
   formattedData.push(
     ...rawData.map((item: any, i: any) => {
@@ -47,7 +61,8 @@ const formatData = (rawData: any) => {
 
       return [
         { content: ++i, styles: { halign: 'right' } },
-        item.nama_uid,
+        // item.nama_uid,
+        item.nama_ulp,
         formatNumber(item.month1),
         formatNumber(item.month2),
         formatNumber(item.month3),
@@ -113,8 +128,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
-  const data = formatData(rawData)
+  metaReport = reportMeta
   const meta = formatMetaData(reportMeta)
+  const data = formatData(rawData)
   const doc = new jsPDF({
     orientation: 'landscape'
   })

src/report/Keluhan/Daftar/DKeluhan_BerdasarMedia.ts

@@ -48,12 +48,13 @@ const formatMetaData = (reportMeta: any) => {
   return { dateFromFormat, dateToFormat, dayTo }
 }
 
-const exportToPDF = (reportMeta: any, data: any) => {
+const exportToPDF = async (reportMeta: any, data: any) => {
   const meta = formatMetaData(reportMeta)
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
+  const resultData = data.value.data
   const doc = new jsPDF({
     orientation: 'landscape'
   })
@@ -129,7 +130,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
         'Keterangan Media'
       ]
     ],
-    body: data.value.map((item: any, i: any) => [
+    body: resultData.map((item: any, i: any) => [
       { content: ++i, styles: { halign: 'right' } },
       item.no_laporan,
       item.nama_pelapor,
@@ -196,12 +197,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .save(`Laporan ${reportName}.pdf`, { returnPromise: true })
+    .then(() => {
+      console.log('PDF Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting PDF', error)
+    })
+
+  return true
 }
 
-const exportToXLSX = (reportMeta: any, e: any) => {
+const exportToXLSX = async (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
   const worksheet = workbook.addWorksheet(`${reportName}`)
@@ -254,11 +262,11 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   worksheet.mergeCells('A6:O6')
   worksheet.mergeCells('A7:O7')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 9, column: 1 }
+    topLeftCell: { row: 10, column: 1 }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -268,15 +276,16 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-const exportToDOCX = (reportMeta: any, data: any) => {
+const exportToDOCX = async (reportMeta: any, data: any) => {
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
+  const resultData = data.value.data
   const meta = formatMetaData(reportMeta)
 
   const generateRows = () => {
-    return data.value.map((item: any, i: any) => {
+    return resultData.map((item: any, i: any) => {
       return new TableRow({
         children: [
           { text: `${++i}`, field: 'no' },
@@ -511,10 +520,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }

src/report/Keluhan/Daftar/DKeluhan_DKUL.ts

@@ -48,12 +48,13 @@ const formatMetaData = (reportMeta: any) => {
   return { dateFromFormat, dateToFormat, dayTo }
 }
 
-const exportToPDF = (reportMeta: any, data: any) => {
+const exportToPDF = async (reportMeta: any, data: any) => {
   const meta = formatMetaData(reportMeta)
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
+  const resultData = data.value.data
   const doc = new jsPDF({
     orientation: 'landscape'
   })
@@ -133,7 +134,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
         'Nama ULP'
       ]
     ],
-    body: data.value.map((item: any, i: any) => [
+    body: resultData.map((item: any, i: any) => [
       { content: ++i, styles: { halign: 'right' } },
       item.no_laporan,
       item.pembuat_laporan,
@@ -204,12 +205,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .save(`Laporan ${reportName}.pdf`, { returnPromise: true })
+    .then(() => {
+      console.log('PDF Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting PDF', error)
+    })
+
+  return true
 }
 
-const exportToXLSX = (reportMeta: any, e: any) => {
+const exportToXLSX = async (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
   const worksheet = workbook.addWorksheet(`${reportName}`)
@@ -262,11 +270,11 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   worksheet.mergeCells('A6:S6')
   worksheet.mergeCells('A7:S7')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 9, column: 1 }
+    topLeftCell: { row: 10, column: 1 }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -276,15 +284,16 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-const exportToDOCX = (reportMeta: any, data: any) => {
+const exportToDOCX = async (reportMeta: any, data: any) => {
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
   const meta = formatMetaData(reportMeta)
+  const resultData = data.value.data
 
   const generateRows = () => {
-    return data.value.map((item: any, i: any) => {
+    return resultData.map((item: any, i: any) => {
       return new TableRow({
         children: [
           { text: `${++i}`, field: 'no' },
@@ -527,10 +536,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }

src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts

@@ -48,12 +48,13 @@ const formatMetaData = (reportMeta: any) => {
   return { dateFromFormat, dateToFormat, dayTo }
 }
 
-const exportToPDF = (reportMeta: any, data: any) => {
+const exportToPDF = async (reportMeta: any, data: any) => {
   const meta = formatMetaData(reportMeta)
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
+  const resultData = data.value.data
   const doc = new jsPDF({
     orientation: 'landscape'
   })
@@ -131,7 +132,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
         'Nama ULP'
       ]
     ],
-    body: data.value.map((item: any, i: any) => [
+    body: resultData.map((item: any, i: any) => [
       { content: ++i, styles: { halign: 'right' } },
       item.no_laporan,
       item.waktu_lapor,
@@ -199,12 +200,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .save(`Laporan ${reportName}.pdf`, { returnPromise: true })
+    .then(() => {
+      console.log('PDF Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting PDF', error)
+    })
+
+  return true
 }
 
-const exportToXLSX = (reportMeta: any, e: any) => {
+const exportToXLSX = async (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
   const worksheet = workbook.addWorksheet(`${reportName}`)
@@ -264,7 +272,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   worksheet.mergeCells('A7:P7')
   worksheet.mergeCells('A8:P8')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
@@ -278,15 +286,16 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-const exportToDOCX = (reportMeta: any, data: any) => {
+const exportToDOCX = async (reportMeta: any, data: any) => {
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
   const meta = formatMetaData(reportMeta)
+  const resultData = data.value.data
 
   const generateRows = () => {
-    return data.value.map((item: any, i: any) => {
+    return resultData.map((item: any, i: any) => {
       return new TableRow({
         children: [
           { text: `${++i}`, field: 'no' },
@@ -532,10 +541,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }

src/report/Keluhan/Daftar/DKeluhan_RecoveryTime.ts

@@ -59,12 +59,13 @@ const formatMetaData = (reportMeta: any) => {
   return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime }
 }
 
-const exportToPDF = (reportMeta: any, data: any) => {
+const exportToPDF = async (reportMeta: any, data: any) => {
   const meta = formatMetaData(reportMeta)
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
+  const resultData = data.value.data
   const doc = new jsPDF({
     orientation: 'landscape'
   })
@@ -144,7 +145,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
         'Nama ULP'
       ]
     ],
-    body: data.value.map((item: any, i: any) => [
+    body: resultData.map((item: any, i: any) => [
       { content: ++i, styles: { halign: 'right' } },
       item.no_laporan,
       item.waktu_lapor,
@@ -210,12 +211,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .save(`Laporan ${reportName}.pdf`, { returnPromise: true })
+    .then(() => {
+      console.log('PDF Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting PDF', error)
+    })
+
+  return true
 }
 
-const exportToXLSX = (reportMeta: any, e: any) => {
+const exportToXLSX = async (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
   const worksheet = workbook.addWorksheet(`${reportName}`)
@@ -275,7 +283,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   worksheet.mergeCells('A7:N7')
   worksheet.mergeCells('A8:N8')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
@@ -289,15 +297,16 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-const exportToDOCX = (reportMeta: any, data: any) => {
+const exportToDOCX = async (reportMeta: any, data: any) => {
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
   const meta = formatMetaData(reportMeta)
+  const resultData = data.value.data
 
   const generateRows = () => {
-    return data.value.map((item: any, i: any) => {
+    return resultData.map((item: any, i: any) => {
       return new TableRow({
         children: [
           { text: `${++i}`, field: 'no' },
@@ -539,10 +548,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }

src/report/Keluhan/Daftar/DKeluhan_ResponseTime.ts

@@ -59,12 +59,13 @@ const formatMetaData = (reportMeta: any) => {
   return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime }
 }
 
-const exportToPDF = (reportMeta: any, data: any) => {
+const exportToPDF = async (reportMeta: any, data: any) => {
   const meta = formatMetaData(reportMeta)
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
+  const resultData = data.value.data
   const doc = new jsPDF({
     orientation: 'landscape'
   })
@@ -144,7 +145,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
         'Nama ULP'
       ]
     ],
-    body: data.value.map((item: any, i: any) => [
+    body: resultData.map((item: any, i: any) => [
       { content: ++i, styles: { halign: 'right' } },
       item.no_laporan,
       item.waktu_lapor,
@@ -210,12 +211,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .save(`Laporan ${reportName}.pdf`, { returnPromise: true })
+    .then(() => {
+      console.log('PDF Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting PDF', error)
+    })
+
+  return true
 }
 
-const exportToXLSX = (reportMeta: any, e: any) => {
+const exportToXLSX = async (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
   const worksheet = workbook.addWorksheet(`${reportName}`)
@@ -275,7 +283,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   worksheet.mergeCells('A7:N7')
   worksheet.mergeCells('A8:N8')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
@@ -289,15 +297,16 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-const exportToDOCX = (reportMeta: any, data: any) => {
+const exportToDOCX = async (reportMeta: any, data: any) => {
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
   const meta = formatMetaData(reportMeta)
+  const resultData = data.value.data
 
   const generateRows = () => {
-    return data.value.map((item: any, i: any) => {
+    return resultData.map((item: any, i: any) => {
       return new TableRow({
         children: [
           { text: `${++i}`, field: 'no' },
@@ -539,10 +548,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }

src/report/Keluhan/Daftar/DKeluhan_STIDP.ts

@@ -48,12 +48,13 @@ const formatMetaData = (reportMeta: any) => {
   return { dateFromFormat, dateToFormat, dayTo }
 }
 
-const exportToPDF = (reportMeta: any, data: any) => {
+const exportToPDF = async (reportMeta: any, data: any) => {
   const meta = formatMetaData(reportMeta)
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
+  const resultData = data.value.data
   const doc = new jsPDF({
     orientation: 'landscape'
   })
@@ -129,7 +130,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
         'Nama ULP'
       ]
     ],
-    body: data.value.map((item: any, i: any) => [
+    body: resultData.map((item: any, i: any) => [
       { content: ++i, styles: { halign: 'right' } },
       item.no_laporan,
       item.waktu_lapor,
@@ -196,12 +197,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .save(`Laporan ${reportName}.pdf`, { returnPromise: true })
+    .then(() => {
+      console.log('PDF Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting PDF', error)
+    })
+
+  return true
 }
 
-const exportToXLSX = (reportMeta: any, e: any) => {
+const exportToXLSX = async (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
   const worksheet = workbook.addWorksheet(`${reportName}`)
@@ -254,11 +262,11 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   worksheet.mergeCells('A6:O6')
   worksheet.mergeCells('A7:O7')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 9, column: 1 }
+    topLeftCell: { row: 10, column: 1 }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -268,15 +276,16 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-const exportToDOCX = (reportMeta: any, data: any) => {
+const exportToDOCX = async (reportMeta: any, data: any) => {
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
   const meta = formatMetaData(reportMeta)
+  const resultData = data.value.data
 
   const generateRows = () => {
-    return data.value.map((item: any, i: any) => {
+    return resultData.map((item: any, i: any) => {
       return new TableRow({
         children: [
           { text: `${++i}`, field: 'no' },
@@ -511,10 +520,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }

src/report/Keluhan/Daftar/DKeluhan_SelesaiCC.ts

@@ -48,12 +48,13 @@ const formatMetaData = (reportMeta: any) => {
   return { dateFromFormat, dateToFormat, dayTo }
 }
 
-const exportToPDF = (reportMeta: any, data: any) => {
+const exportToPDF = async (reportMeta: any, data: any) => {
   const meta = formatMetaData(reportMeta)
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
+  const resultData = data.value.data
   const doc = new jsPDF({
     orientation: 'landscape'
   })
@@ -131,7 +132,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
         'Sub Issue Type'
       ]
     ],
-    body: data.value.map((item: any, i: any) => [
+    body: resultData.map((item: any, i: any) => [
       { content: ++i, styles: { halign: 'right' } },
       item.no_laporan,
       item.nama_ulp,
@@ -200,12 +201,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
     margin: { left: 230 }
   })
 
-  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
-    console.log('pdf berhasil disimpan')
-  })
+  await doc
+    .save(`Laporan ${reportName}.pdf`, { returnPromise: true })
+    .then(() => {
+      console.log('PDF Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting PDF', error)
+    })
+
+  return true
 }
 
-const exportToXLSX = (reportMeta: any, e: any) => {
+const exportToXLSX = async (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
   const worksheet = workbook.addWorksheet(`${reportName}`)
@@ -258,11 +266,11 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   worksheet.mergeCells('A6:Q6')
   worksheet.mergeCells('A7:Q7')
 
-  exportToExcel({
+  await exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 9, column: 1 }
+    topLeftCell: { row: 10, column: 1 }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -272,15 +280,16 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-const exportToDOCX = (reportMeta: any, data: any) => {
+const exportToDOCX = async (reportMeta: any, data: any) => {
   const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
   const date = new Date().getDate()
   const month = new Date().toLocaleString('id-ID', { month: 'long' })
   const year = new Date().getFullYear()
   const meta = formatMetaData(reportMeta)
+  const resultData = data.value.data
 
   const generateRows = () => {
-    return data.value.map((item: any, i: any) => {
+    return resultData.map((item: any, i: any) => {
       return new TableRow({
         children: [
           { text: `${++i}`, field: 'no' },
@@ -509,10 +518,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
     ]
   })
 
-  Packer.toBlob(doc).then((blob) => {
-    saveAs(blob, `Laporan ${reportName}.docx`)
-    console.log('Document created successfully')
-  })
+  await Packer.toBlob(doc)
+    .then((blob) => {
+      saveAs(blob, `Laporan ${reportName}.docx`)
+
+      console.log('DOCX Exported')
+    })
+    .catch((error) => {
+      console.error('Error while exporting DOCX', error)
+    })
+
+  return true
 }
 
 export { exportToPDF, exportToXLSX, exportToDOCX }

src/report/Keluhan/Rekap/RKeluhan_ALL.ts

@@ -1,17 +1,4 @@
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import {
-  Document,
-  AlignmentType,
-  Packer,
-  Paragraph,
-  Table,
-  TableCell,
-  TableRow,
-  VerticalAlign,
-  TextRun,
-  WidthType,
-  PageOrientation
-} from 'docx'
 import { saveAs } from 'file-saver'
 import { jsPDF } from 'jspdf'
 import autoTable from 'jspdf-autotable'
@@ -25,78 +12,125 @@ const reportName = 'Rekapitulasi Keluhan All'
 const fontSize = 5
 const detailFontSize = 5
 
-const getGroupParent = (reportMeta: any) => {
-  if (reportMeta.ulp.id != 0) {
-    return {
-      parent: reportMeta.up3.name,
-      summaryName: reportMeta.ulp.name,
-      summaryKey: 'nama_ulp'
-    }
-  }
-
-  if (reportMeta.up3.id != 0) {
-    return {
-      parent: reportMeta.uid.name,
-      summaryName: reportMeta.up3.name,
-      summaryKey: 'nama_up3'
-    }
-  }
-
-  if (reportMeta.uid.id != 0) {
-    return {
-      parent: 'regional',
-      summaryName: reportMeta.uid.name,
-      summaryKey: 'nama_uid'
-    }
-  }
-
-  return ''
-}
-
 const groupingData = (data: any, reportMeta: any) => {
   const groupedData: any = {}
-  const groupParent = getGroupParent(reportMeta)
 
-  if (groupParent === '') {
-    return {
-      data,
-      parent: '',
-      summaryName: ''
+  const reportMetaMapping: any = {
+    up3: 'nama_ulp',
+    uid: 'nama_up3',
+    default: 'nama_uid'
+  }
+
+  let key = 'nama_uid'
+  for (const prop in reportMetaMapping) {
+    if (reportMeta[prop] && reportMeta[prop].id != 0) {
+      key = reportMetaMapping[prop]
+      break
     }
   }
 
   data.forEach((item: any) => {
-    const group = item[groupParent.summaryKey]
+    const groupKey = item[key]
 
-    if (!groupedData[group]) {
-      groupedData[group] = []
+    if (!groupedData[groupKey]) {
+      groupedData[groupKey] = { data: [] }
     }
 
-    groupedData[group].push(item)
+    groupedData[groupKey].data.push(item)
   })
 
-  return {
-    data: groupedData,
-    parent: groupParent.parent,
-    summaryName: groupParent.summaryName
+  for (const key in groupedData) {
+    const data = groupedData[key].data
+
+    data.forEach((item: any) => {
+      if (!groupedData[key].summary) {
+        groupedData[key].summary = {
+          total: 0,
+          total_selesai: 0,
+          total_inproses: 0,
+          avg_durasi_response: [],
+          max_durasi_response: [],
+          min_durasi_response: [],
+          total_diatas_sla_response: 0,
+          total_dibawah_sla_response: 0,
+          avg_durasi_recovery: [],
+          max_durasi_recovery: [],
+          min_durasi_recovery: [],
+          total_diatas_sla_recovery: 0,
+          total_dibawah_sla_recovery: 0
+        }
+      }
+
+      groupedData[key].summary.total += item.total
+      groupedData[key].summary.total_selesai += item.total_selesai
+      groupedData[key].summary.total_inproses += item.total_inproses
+      groupedData[key].summary.avg_durasi_response.push(item.avg_durasi_response)
+      groupedData[key].summary.max_durasi_response.push(item.max_durasi_response)
+      groupedData[key].summary.min_durasi_response.push(item.min_durasi_response)
+      groupedData[key].summary.total_diatas_sla_response += item.total_diatas_sla_response
+      groupedData[key].summary.total_dibawah_sla_response += item.total_dibawah_sla_response
+      groupedData[key].summary.avg_durasi_recovery.push(item.avg_durasi_recovery)
+      groupedData[key].summary.max_durasi_recovery.push(item.max_durasi_recovery)
+      groupedData[key].summary.min_durasi_recovery.push(item.min_durasi_recovery)
+      groupedData[key].summary.total_diatas_sla_recovery += item.total_diatas_sla_recovery
+      groupedData[key].summary.total_dibawah_sla_recovery += item.total_dibawah_sla_recovery
+    })
+
+    groupedData[key].summary.persen_selesai =
+      groupedData[key].summary.total_selesai != groupedData[key].summary.total
+        ? (groupedData[key].summary.total_selesai / groupedData[key].summary.total) * 100
+        : 100
+
+    groupedData[key].summary.persen_inproses =
+      groupedData[key].summary.total_inproses != groupedData[key].summary.total
+        ? (groupedData[key].summary.total_inproses / groupedData[key].summary.total) * 100
+        : 0
+
+    groupedData[key].summary.avg_durasi_response = groupedData[key].summary.avg_durasi_response
+      .length
+      ? groupedData[key].summary.avg_durasi_response.reduce((a: any, b: any) => a + b) /
+        groupedData[key].summary.avg_durasi_response.length
+      : 0
+
+    groupedData[key].summary.max_durasi_response = Math.max(
+      ...groupedData[key].summary.max_durasi_response
+    )
+    groupedData[key].summary.min_durasi_response = Math.min(
+      ...groupedData[key].summary.min_durasi_response
+    )
+
+    groupedData[key].summary.avg_durasi_recovery = groupedData[key].summary.avg_durasi_recovery
+      .length
+      ? groupedData[key].summary.avg_durasi_recovery.reduce((a: any, b: any) => a + b) /
+        groupedData[key].summary.avg_durasi_recovery.length
+      : 0
+
+    groupedData[key].summary.max_durasi_recovery = Math.max(
+      ...groupedData[key].summary.max_durasi_recovery
+    )
+    groupedData[key].summary.min_durasi_recovery = Math.min(
+      ...groupedData[key].summary.min_durasi_recovery
+    )
   }
+
+  return groupedData
+}
+
+const getTitle = (reportMeta: any) => {
+  if (reportMeta.up3.id != 0) {
+    return 'nama_up3'
+  }
+
+  if (reportMeta.uid.id != 0) {
+    return 'nama_uid'
+  }
+
+  return 'nama_regional'
 }
 
 const formatData = (rawData: any, reportMeta: any) => {
-  const tempData = groupingData(rawData, reportMeta)
-  const data = tempData.data[tempData.summaryName] || tempData.data
   const formattedData: any = []
-
-  let parentName = ''
-  let summaryName = tempData.summaryName ? tempData.summaryName : 'Seluruh Unit'
-
-  if (tempData.parent === '') {
-    parentName = 'Seluruh Distribusi'
-  } else if (tempData.parent === 'regional') {
-    parentName = tempData.data[tempData.summaryName][0].nama_regional
-  } else {
-    parentName = tempData.parent
-  }
+  const groupedData: any = {}
 
   const total: any = {
     total: 0,
@@ -114,59 +148,97 @@ const formatData = (rawData: any, reportMeta: any) => {
     total_dibawah_sla_recovery: 0
   }
 
-  data.forEach((item: any) => {
-    total.total += item.total
-    total.total_selesai += item.total_selesai
-    total.total_inproses += item.total_inproses
-    total.avg_durasi_response.push(item.avg_durasi_response)
-    total.max_durasi_response.push(item.max_durasi_response)
-    total.min_durasi_response.push(item.min_durasi_response)
-    total.total_diatas_sla_response += item.total_diatas_sla_response
-    total.total_dibawah_sla_response += item.total_dibawah_sla_response
-    total.avg_durasi_recovery.push(item.avg_durasi_recovery)
-    total.max_durasi_recovery.push(item.max_durasi_recovery)
-    total.min_durasi_recovery.push(item.min_durasi_recovery)
-    total.total_diatas_sla_recovery += item.total_diatas_sla_recovery
-    total.total_dibawah_sla_recovery += item.total_dibawah_sla_recovery
-  })
+  const data = groupingData(rawData, reportMeta)
+  const title = getTitle(reportMeta)
 
-  const persenSelesai =
-    total.total_selesai != total.total ? (total.total_selesai / total.total) * 100 : 100
-  const persenInproses =
-    total.total_inproses != total.total ? (total.total_inproses / total.total) * 100 : 0
+  for (const key in data) {
+    const groupKey = data[key].data[0][title]
 
-  formattedData.push([{ content: parentName, colSpan: 17, styles: { fontStyle: 'bold' } }])
+    if (!groupedData[groupKey]) {
+      groupedData[groupKey] = { data: [] }
+    }
 
-  const result = [
-    formatNumber(total.total),
-    formatNumber(total.total_selesai),
-    formatPercentage(persenSelesai),
-    formatNumber(total.total_inproses),
-    formatPercentage(persenInproses),
-    formatNumber(
-      total.avg_durasi_response.length
-        ? total.avg_durasi_response.reduce((a: any, b: any) => a + b) /
-            total.avg_durasi_response.length
-        : 0
-    ),
-    formatWaktu(Math.max(...total.max_durasi_response)),
-    formatWaktu(Math.min(...total.min_durasi_response)),
-    formatNumber(total.total_diatas_sla_response),
-    formatNumber(total.total_dibawah_sla_response),
-    formatNumber(
-      total.avg_durasi_recovery.length
-        ? total.avg_durasi_recovery.reduce((a: any, b: any) => a + b) /
-            total.avg_durasi_recovery.length
-        : 0
-    ),
-    formatWaktu(Math.max(...total.max_durasi_recovery)),
-    formatWaktu(Math.min(...total.min_durasi_recovery)),
-    formatNumber(total.total_diatas_sla_recovery),
-    formatNumber(total.total_dibawah_sla_recovery)
-  ]
+    groupedData[groupKey].data.push({
+      key: key,
+      value: data[key]
+    })
+  }
 
-  formattedData.push([{ content: '1', styles: { halign: 'right' } }, summaryName, ...result])
-  formattedData.push([{ content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } }, ...result])
+  for (const key in groupedData) {
+    formattedData.push([{ content: key, colSpan: 17, styles: { fontStyle: 'bold' } }])
+
+    groupedData[key].data.forEach((item: any, index: any) => {
+      const summary = item.value.summary
+
+      formattedData.push([
+        { content: index + 1, styles: { halign: 'right' } },
+        item.key,
+        formatNumber(summary.total),
+        formatNumber(summary.total_selesai),
+        formatPercentage(summary.persen_selesai),
+        formatNumber(summary.total_inproses),
+        formatPercentage(summary.persen_inproses),
+        formatNumber(summary.avg_durasi_response),
+        formatWaktu(summary.max_durasi_response),
+        formatWaktu(summary.min_durasi_response),
+        formatNumber(summary.total_diatas_sla_response),
+        formatNumber(summary.total_dibawah_sla_response),
+        formatNumber(summary.avg_durasi_recovery),
+        formatWaktu(summary.max_durasi_recovery),
+        formatWaktu(summary.min_durasi_recovery),
+        formatNumber(summary.total_diatas_sla_recovery),
+        formatNumber(summary.total_dibawah_sla_recovery)
+      ])
+
+      total.total += summary.total
+      total.total_selesai += summary.total_selesai
+      total.total_inproses += summary.total_inproses
+      total.avg_durasi_response.push(summary.avg_durasi_response)
+      total.max_durasi_response.push(summary.max_durasi_response)
+      total.min_durasi_response.push(summary.min_durasi_response)
+      total.total_diatas_sla_response += summary.total_diatas_sla_response
+      total.total_dibawah_sla_response += summary.total_dibawah_sla_response
+      total.avg_durasi_recovery.push(summary.avg_durasi_recovery)
+      total.max_durasi_recovery.push(summary.max_durasi_recovery)
+      total.min_durasi_recovery.push(summary.min_durasi_recovery)
+      total.total_diatas_sla_recovery += summary.total_diatas_sla_recovery
+      total.total_dibawah_sla_recovery += summary.total_dibawah_sla_recovery
+    })
+
+    const persenSelesai =
+      total.total_selesai != total.total ? (total.total_selesai / total.total) * 100 : 100
+    const persenInproses =
+      total.total_inproses != total.total ? (total.total_inproses / total.total) * 100 : 0
+
+    formattedData.push([
+      { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+      formatNumber(total.total),
+      formatNumber(total.total_selesai),
+      formatPercentage(persenSelesai),
+      formatNumber(total.total_inproses),
+      formatPercentage(persenInproses),
+      formatNumber(
+        total.avg_durasi_response.length
+          ? total.avg_durasi_response.reduce((a: any, b: any) => a + b) /
+              total.avg_durasi_response.length
+          : 0
+      ),
+      formatWaktu(Math.max(...total.max_durasi_response)),
+      formatWaktu(Math.min(...total.min_durasi_response)),
+      formatNumber(total.total_diatas_sla_response),
+      formatNumber(total.total_dibawah_sla_response),
+      formatNumber(
+        total.avg_durasi_recovery.length
+          ? total.avg_durasi_recovery.reduce((a: any, b: any) => a + b) /
+              total.avg_durasi_recovery.length
+          : 0
+      ),
+      formatWaktu(Math.max(...total.max_durasi_recovery)),
+      formatWaktu(Math.min(...total.min_durasi_recovery)),
+      formatNumber(total.total_diatas_sla_recovery),
+      formatNumber(total.total_dibawah_sla_recovery)
+    ])
+  }
 
   return formattedData
 }

src/router/index.ts

@@ -422,7 +422,7 @@ export const routes: RouteRecordRaw[] = [
                   },
                   {
                     path: '5',
-                    name: 'Rekapitulasi Keluhan Per Jenis Keluhan',
+                    name: 'Rekapitulasi Keluhan Per Jenis Keluhan (Monalisa)',
                     component: MonalisaKRGangguanPerJenisKeluhan
                   },
                   {

src/stores/auth.ts

@@ -2,20 +2,17 @@ import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 import { dispatchNotification } from '@/components/Notification'
 import { readData, removeData, writeData, writeDataJson } from '@/utils/storage'
-import router from '@/router'
+import { authenticateUser } from '@/utils/api/api.rest'
 
 export const useAuthStore = defineStore('auth', () => {
-  // token from localStorage
   const token = ref(readData('token') || '')
-  // create a shared state
   const username = ref('')
   const password = ref('')
   const isLoading = ref(false)
   const isLoggedIn = computed(() => token.value !== '')
   const filterPresets: any = ref({})
 
-  // define your actions
-  const login = () => {
+  const login = async () => {
     if (username.value == '' || password.value == '') {
       dispatchNotification({
         title: 'Perhatian',
@@ -23,53 +20,102 @@ export const useAuthStore = defineStore('auth', () => {
         type: 'warning'
       })
     } else {
-      // filterPresets.value = {
-      //   uid: {
-      //     id: 2,
-      //     name: 'DISTRIBUSI JAKARTA RAYA'
-      //   },
-      //   up3: {
-      //     id: 4,
-      //     name: 'UP3 MENTENG'
-      //   },
-      //   posko: {
-      //     id: 541101,
-      //     name: 'POSKO MENTENG'
-      //   }
-      // }
+      if (username.value == 'demo' && password.value == 'demo') {
+        isLoading.value = true
+        setTimeout(() => {
+          isLoading.value = false
+          if (username.value == 'demo' && password.value == 'demo') {
+            writeData('token', 'secret-token')
 
-      isLoading.value = true
-      setTimeout(() => {
-        isLoading.value = false
-        if (username.value == 'demo' && password.value == 'demo') {
-          // store token in localStorage
-          writeData('token', 'secret-token')
+            dispatchNotification({
+              title: 'Berhasil',
+              content: 'Login berhasil, selamat datang kembali!',
+              type: 'success'
+            })
 
-          if (Object.keys(filterPresets.value).length > 0) {
-            writeDataJson('filterPresets', filterPresets.value)
+            window.location.reload()
+          } else {
+            dispatchNotification({
+              title: 'Login Gagal',
+              content: 'Username atau password salah',
+              type: 'error'
+            })
           }
+        }, 3000)
+      } else {
+        isLoading.value = true
 
-          dispatchNotification({
-            title: 'Berhasil',
-            content: 'Login berhasil, selamat datang kembali!',
-            type: 'success'
-          })
-          // redirect to home page after login
-          window.location.reload()
-        } else {
+        try {
+          const response = await authenticateUser(username.value, password.value)
+
+          if (response.status) {
+            const data = response.user
+
+            writeData('token', 'secret-token')
+            writeData('user_name', data.username)
+            writeData('user_access', 'Petugas')
+            writeData('user_uid', data.namaUid)
+
+            handlePresets(data, filterPresets)
+
+            dispatchNotification({
+              title: 'Berhasil',
+              content: 'Login berhasil, selamat datang kembali!',
+              type: 'success'
+            })
+
+            console.log(filterPresets.value)
+            window.location.reload()
+          } else {
+            dispatchNotification({
+              title: 'Login Gagal',
+              content: 'Username atau password salah',
+              type: 'error'
+            })
+          }
+        } catch (error) {
           dispatchNotification({
             title: 'Login Gagal',
-            content: 'Username atau password salah',
+            content: 'Terjadi kesalahan saat melakukan login',
             type: 'error'
           })
+        } finally {
+          isLoading.value = false
         }
-      }, 3000)
+      }
+    }
+  }
+
+  const handlePresets = (data: any, filterPresets: any) => {
+    const keys = ['regional', 'uid', 'up3', 'posko', 'ulp']
+    let isChanged = false
+
+    for (const key of keys) {
+      const idKey = `id${key.charAt(0).toUpperCase() + key.slice(1)}`
+      const nameKey = `nama${key.charAt(0).toUpperCase() + key.slice(1)}`
+
+      if (data[nameKey] && data[idKey]) {
+        filterPresets.value[key] = {
+          id: data[idKey],
+          name: data[nameKey]
+        }
+        isChanged = true
+      }
+    }
+
+    console.log(filterPresets.value)
+
+    if (isChanged) {
+      writeDataJson('filterPresets', filterPresets.value)
     }
   }
 
   const logout = () => {
     removeData('token')
     removeData('filterPresets')
+    removeData('user_name')
+    removeData('user_access')
+    removeData('user_uid')
   }
 
   return {

src/stores/user.ts

@@ -1,11 +1,16 @@
-import { computed } from 'vue';
-import { defineStore } from 'pinia';
+import { computed } from 'vue'
+import { defineStore } from 'pinia'
+import { readData } from '@/utils/storage'
 
 export const useUserStore = defineStore('user', () => {
-    const user_name = computed(() => localStorage.getItem('user_name') || 'Demo User')
-    const user_access = computed(() => localStorage.getItem('user_access') || 'Super Admin')
-    const user_uid = computed(() => localStorage.getItem('user_uid') || 'Jakarta Raya')
-    const user_image = computed(() => localStorage.getItem('user_image') || 'https://iidamidamerica.org/wp-content/uploads/2020/12/male-placeholder-image.jpeg')
+  const user_name = computed(() => readData('user_name') || 'Demo User')
+  const user_access = computed(() => readData('user_access') || 'Super Admin')
+  const user_uid = computed(() => readData('user_uid') || 'Jakarta Raya')
+  const user_image = computed(
+    () =>
+      readData('user_image') ||
+      'https://iidamidamerica.org/wp-content/uploads/2020/12/male-placeholder-image.jpeg'
+  )
 
-    return { user_name, user_access, user_image, user_uid }
-})
+  return { user_name, user_access, user_image, user_uid }
+})

src/types/requestParams.ts

@@ -0,0 +1,9 @@
+interface IRequestOptions {
+  skip: number
+  take: number
+  requireTotalCount: boolean
+  sort: null | Array<object>
+  filter: null | Array<object>
+}
+
+export type { IRequestOptions }

src/utils/api/api.rest.ts

@@ -18,6 +18,16 @@ const getUp3 = async (uid: number) => await instance.get('/up3?uid=' + uid)
 const getUlp = async (up3: number) => await instance.get('/ulp?up3=' + up3)
 const getPosko = async (uppp: number) => await instance.get('/posko?up3=' + uppp)
 const getVersion = async () => await ax.get('/version.json')
+
+const authenticateUser = async (username: string, password: string) => {
+  const res = await instance.post('/auth', {
+    username,
+    password
+  })
+
+  return res.data
+}
+
 export {
   getUid,
   getUp3,
@@ -27,5 +37,6 @@ export {
   getJenisTransaksi,
   getUidRegional,
   getRegional,
-  getVersion
+  getVersion,
+  authenticateUser
 }

vite.config.ts

@@ -10,22 +10,22 @@ export default defineConfig({
     vue({
       template: {
         compilerOptions: {
-          isCustomElement: (tag) => ['lottie-player', 'center'].includes(tag),
+          isCustomElement: (tag) => ['lottie-player', 'center'].includes(tag)
         }
       }
     }),
-    vueJsx(),
+    vueJsx()
   ],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@': fileURLToPath(new URL('./src', import.meta.url))
     }
-  },
-  build: {
-    // outDir: 'build',
-    emptyOutDir: true,
-    chunkSizeWarningLimit: 4096,
-    // cssCodeSplit: true,
-    // cssMinify: true,
   }
+  // build: {
+  //   // outDir: 'build',
+  //   // emptyOutDir: true,
+  //   // chunkSizeWarningLimit: 4096,
+  //   // cssCodeSplit: true,
+  //   // cssMinify: true,
+  // }
 })