chore: Update npm dependencies and bump version to 0.0.184-vm

chore: adjust column width in Material_RPM.vue and PencarianData.vue
chore: update npm dependencies
2024-05-07 23:49:00 +07:00 · 2024-05-07 23:48:25 +07:00 · 2024-05-07 23:27:00 +07:00 · 2024-05-07 14:06:34 +07:00 · 2024-05-07 14:05:45 +07:00 · 2024-05-07 08:46:05 +07:00
33 changed files with 9991 additions and 9337 deletions
--- a/9
+++ b/9
@ -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;"]

--- a/package.json
+++ b/package.json
@ -1 +1 @@
-{"name":"eis","version":"0.0.160-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.184-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"}}
--- a/public/app.ini
+++ b/public/app.ini
@ -93,4 +93,8 @@ 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
--- a/public/app2.ini
+++ b/public/app2.ini
@ -0,0 +1,99 @@
+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
--- a/public/version.json
+++ b/public/version.json
@ -1 +1 @@
-{"version":"0.0.160-vm"}
+{"version":"0.0.184-vm"}
--- a/src/components/Navigation/Header.vue
+++ b/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>
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
+++ b/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]
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
@ -75,7 +75,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 +84,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 +97,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 +106,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 +119,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 +128,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 +147,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 +156,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 +169,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 +178,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 +346,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 +355,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 +364,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 +373,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 +382,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 +391,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 +400,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 +409,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 +418,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 +427,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 +549,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 +577,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 +599,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 +809,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])
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
+++ b/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"
  >
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
+++ b/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"
  >
@ -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"
@ -594,14 +605,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
+            :readonly="true"
+            :value="dataSubSelected?.no_laporan_anomali"
+            class-name="flex-1"
+          />
        </div>

        <div class="flex flex-row items-center justify-between w-full">
          <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan Referensi:</h3>
          <InputText
            :readonly="true"
-            :value="dataSubSelected?.referensi_marking"
+            :value="dataSubSelected?.no_laporan_referensi"
            class-name="flex-1"
          />
        </div>
--- a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
+++ b/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"
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/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"
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
@ -429,9 +429,7 @@ import { DxDataGrid } from 'devextreme-vue'
 import {
  DxColumn,
  DxColumnFixing,
-  DxExport,
-  DxLoadPanel,
-  DxPager,
+  DxExport, DxPager,
  DxPaging,
  DxSearchPanel,
  DxSelection
@ -509,6 +507,8 @@ const showDetail = () => {
  dataSubSelected.value = null
  if (detailType.value == 'table') {
    getDetail()
+  }else{
+    dialogDetail.value = true
  }
 }

--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/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
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
@ -1200,6 +1200,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 +1209,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 : ''
  }

--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/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
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/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) => {
--- a/src/components/Pages/Material/Rekap/Material_RPM.vue
+++ b/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'
--- a/src/components/Pages/PencarianData/PencarianData.vue
+++ b/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'
--- a/src/report/Anomali/Gangguan/Anomali_LAPPGP_LPP.ts
+++ b/src/report/Anomali/Gangguan/Anomali_LAPPGP_LPP.ts
@ -1,66 +1,33 @@
 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
-  })
-
-  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)
+      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)
    ])
+  })

  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
+}
--- a/src/report/Anomali/Gangguan/Anomali_LAPPGP_LPT.ts
+++ b/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 = {
+const groupingData = (data: any, reportMeta: any) => {
+  const groupedData: any = {}
+
+  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 groupKey = item[key]
+
+    if (!groupedData[groupKey]) {
+      groupedData[groupKey] = { data: [] }
+    }
+
+    groupedData[groupKey].data.push(item)
+  })
+
+  for (const key in groupedData) {
+    const data = groupedData[key].data
+
+    data.forEach((item: any) => {
+      if (!groupedData[key].summary) {
+        groupedData[key].summary = {
          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
+          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
        }
+      }

-  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
+      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
    })

-  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
+    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([
-    '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
-    )
+        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 }
--- a/src/report/Anomali/Gangguan/doc/Anomali_LAPPGP_LPP.ts
+++ b/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)
+}
--- a/src/report/Anomali/Gangguan/doc/Anomali_LAPPGP_LPT.ts
+++ b/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'>
--- a/src/report/Anomali/Gangguan/doc/Anomali_LAPPGU_LPT.ts
+++ b/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'>
--- a/src/report/Gangguan/Rekap/RGangguan_KTI.ts
+++ b/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
  }

+  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'
  })
--- a/src/report/Keluhan/Rekap/RKeluhan_ALL.ts
+++ b/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,20 +148,61 @@ 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)
+
+  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: 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 =
@ -135,9 +210,8 @@ const formatData = (rawData: any, reportMeta: any) => {
    const persenInproses =
      total.total_inproses != total.total ? (total.total_inproses / total.total) * 100 : 0

-  formattedData.push([{ content: parentName, colSpan: 17, styles: { fontStyle: 'bold' } }])
-
-  const result = [
+    formattedData.push([
+      { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
      formatNumber(total.total),
      formatNumber(total.total_selesai),
      formatPercentage(persenSelesai),
@ -163,10 +237,8 @@ const formatData = (rawData: any, reportMeta: any) => {
      formatWaktu(Math.min(...total.min_durasi_recovery)),
      formatNumber(total.total_diatas_sla_recovery),
      formatNumber(total.total_dibawah_sla_recovery)
-  ]
-
-  formattedData.push([{ content: '1', styles: { halign: 'right' } }, summaryName, ...result])
-  formattedData.push([{ content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } }, ...result])
+    ])
+  }

  return formattedData
 }
--- a/src/router/index.ts
+++ b/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
                  },
                  {
--- a/src/stores/auth.ts
+++ b/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,38 +20,19 @@ 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') {
-          // store token in localStorage
            writeData('token', 'secret-token')

-          if (Object.keys(filterPresets.value).length > 0) {
-            writeDataJson('filterPresets', filterPresets.value)
-          }
-
            dispatchNotification({
              title: 'Berhasil',
              content: 'Login berhasil, selamat datang kembali!',
              type: 'success'
            })
-          // redirect to home page after login
+
            window.location.reload()
          } else {
            dispatchNotification({
@ -64,12 +42,79 @@ export const useAuthStore = defineStore('auth', () => {
            })
          }
        }, 3000)
+      } else {
+        isLoading.value = true
+
+        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'
+            })
+
+            window.location.reload()
+          } else {
+            dispatchNotification({
+              title: 'Login Gagal',
+              content: 'Username atau password salah',
+              type: 'error'
+            })
+          }
+        } catch (error) {
+          dispatchNotification({
+            title: 'Login Gagal',
+            content: 'Terjadi kesalahan saat melakukan login',
+            type: 'error'
+          })
+        } finally {
+          isLoading.value = false
+        }
+      }
+    }
+  }
+
+  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 {
--- a/src/stores/user.ts
+++ b/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 }
 })
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@ -20,7 +20,6 @@ const instance = axios.create({
 })

 export const getQueryString = (query: DocumentNode) => query.loc?.source.body!
-
 export const requestGraphQl = async (query: DocumentNode, data: any) => {
  return await instance.post('', {
    query: getQueryString(query),
@ -31,7 +30,7 @@ export const requestGraphQl = async (query: DocumentNode, data: any) => {
 export const apolloClient = () => {
  const httpLink = createHttpLink({
    uri: import.meta.env.VITE_APP_GRAPHQL_ENDPOINT,
-    credentials: 'include' // Include credentials for cross-origin requests
+    credentials: 'include'
  })

  const apolloClient = new ApolloClient({
@ -409,7 +408,6 @@ export const queries = {
            idUid: $idUid
            idUp3: $idUp3
          ) {
-            nama_regional
            id_uid
            nama_uid
            id_up3
@ -1839,6 +1837,7 @@ export const queries = {
          $idUid: Int!
          $idUp3: Int!
          $idEquipment: Int!
+          $isSelesai: Int!
        ) {
          detailGangguanJenisGangguanSE004(
            dateFrom: $dateFrom
@ -1847,6 +1846,7 @@ export const queries = {
            idUid: $idUid
            idUp3: $idUp3
            idEquipment: $idEquipment
+            isSelesai: $isSelesai
          ) {
            id
            nama_regional
@ -4009,6 +4009,7 @@ export const queries = {
          pembuatLaporan: $pembuatLaporan
        ) {
          id
+          keterangan_pelapor
          keterangan_dlpd
          no_laporan
          idpel_nometer
@ -4020,6 +4021,7 @@ export const queries = {
          nama_up3
          nama_ulp
          nama_posko
+          #nama_petugas
          id_regu
          nama_regu
          waktu_lapor
@ -4050,6 +4052,7 @@ export const queries = {
          pembuatLaporan: $pembuatLaporan
        ) {
          id
+          keterangan_pelapor
          keterangan_dlpd
          no_laporan
          idpel_nometer
@ -4378,27 +4381,19 @@ export const queries = {
        query subDetailAnomaliPenangananPengaduanGangguanPetugasBerulang(
          $dateFrom: Date!
          $dateTo: Date!
-          $namaRegional: String!
-          $idUlp: Int!
-          $idUid: Int!
-          $idUp3: Int!
          $media: String
          $isMarking: Int!
-          $idPetugas: Int!
+          $namaPetugas: String
        ) {
          subDetailAnomaliPenangananPengaduanGangguanPetugasBerulang(
            dateFrom: $dateFrom
            dateTo: $dateTo
-            namaRegional: $namaRegional
-            idUlp: $idUlp
-            idUid: $idUid
-            idUp3: $idUp3
            media: $media
            isMarking: $isMarking
-            idPetugas: $idPetugas
+            namaPetugas: $namaPetugas
          ) {
+            nama_petugas
            id
-            nama_regional
            id_uid
            nama_uid
            id_up3
@ -4406,8 +4401,7 @@ export const queries = {
            id_ulp
            nama_ulp
            no_laporan
-            no_laporan_referensi
-            referensi_marking
+            no_laporan_laporulang
            waktu_lapor
            waktu_response
            waktu_recovery
@ -4423,12 +4417,6 @@ export const queries = {
            no_telp_pelapor
            keterangan_pelapor
            media
-            diselesaikan_oleh
-            status_akhir
-            kode_gangguan
-            jenis_gangguan
-            penyebab
-            tindakan
          }
        }
      `,
@ -4453,29 +4441,13 @@ export const queries = {
            media: $media
            isMarking: $isMarking
          ) {
-            id_regu
-            id_uid
-            nama_uid
-            id_up3
-            nama_up3
-            id_ulp
-            nama_ulp
-            id_posko
-            nama_posko
-            nama_petugas
+            id
            nama_unit
+            nama_petugas
            wo_cc123
            wo_pln_mobile
-            wo_loket
+            wo_anomali
            wo_total
-            wo_lainnya
-            anomali_pln_mobile_marking
-            anomali_pln_mobile_non_marking
-            anomali_cc123_marking
-            anomali_cc123_non_marking
-            total_anomali_cc123
-            total_anomali_pln_mobile
-            total_anomali
            persen_anomali_cc123
            persen_anomali_pln_mobile
            persen_anomali
@ -4505,17 +4477,18 @@ export const queries = {
            nama_up3
            id_ulp
            nama_ulp
+            nama_regional
            total_petugas
-            anomali_pln_mobile_marking
-            anomali_pln_mobile_non_marking
-            anomali_cc123_marking
-            anomali_cc123_non_marking
-            total_anomali_marking
-            total_anomali_non_marking
-            persen_anomali_pln_mobile_marking
-            persen_anomali_pln_mobile_non_marking
-            persen_anomali_cc123_marking
-            persen_anomali_cc123_non_marking
+            petugas_pln_mobile_marking
+            petugas_pln_mobile_nonmarking
+            petugas_cc123_marking
+            petugas_cc123_nonmarking
+            petugas_anomali_marking
+            petugas_anomali_nonmarking
+            persen_pln_mobile_marking
+            persen_pln_mobile_nonmarking
+            persen_cc123_marking
+            persen_cc123_nonmarking
            persen_anomali_marking
            persen_anomali_non_marking
          }
@ -4525,27 +4498,19 @@ export const queries = {
        query subDetailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif(
          $dateFrom: Date!
          $dateTo: Date!
-          $namaRegional: String!
-          $idUlp: Int!
-          $idUid: Int!
-          $idUp3: Int!
          $media: String
          $isMarking: Int!
-          $idPetugas: Int!
+          $namaPetugas: String
        ) {
          subDetailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif(
            dateFrom: $dateFrom
            dateTo: $dateTo
-            namaRegional: $namaRegional
-            idUlp: $idUlp
-            idUid: $idUid
-            idUp3: $idUp3
            media: $media
            isMarking: $isMarking
-            idPetugas: $idPetugas
+            namaPetugas: $namaPetugas
          ) {
+            nama_petugas
            id
-            nama_regional
            id_uid
            nama_uid
            id_up3
@ -4553,7 +4518,7 @@ export const queries = {
            id_ulp
            nama_ulp
            no_laporan
-            referensi_marking
+            no_laporan_laporulang
            waktu_lapor
            waktu_response
            waktu_recovery
@ -4575,6 +4540,9 @@ export const queries = {
            jenis_gangguan
            penyebab
            tindakan
+            jumlah_lapor
+            marking
+            is_anomali
            rating
            feedback
            ulasan
@ -4602,29 +4570,13 @@ export const queries = {
            media: $media
            isMarking: $isMarking
          ) {
-            id_regu
-            id_uid
-            nama_uid
-            id_up3
-            nama_up3
-            id_ulp
-            nama_ulp
-            id_posko
-            nama_posko
-            nama_petugas
+            id
            nama_unit
+            nama_petugas
            wo_cc123
            wo_pln_mobile
-            wo_loket
+            wo_anomali
            wo_total
-            wo_lainnya
-            anomali_pln_mobile_marking
-            anomali_pln_mobile_non_marking
-            anomali_cc123_marking
-            anomali_cc123_non_marking
-            total_anomali_cc123
-            total_anomali_pln_mobile
-            total_anomali
            persen_anomali_cc123
            persen_anomali_pln_mobile
            persen_anomali
@ -4654,17 +4606,18 @@ export const queries = {
            nama_up3
            id_ulp
            nama_ulp
+            nama_regional
            total_petugas
-            anomali_pln_mobile_marking
-            anomali_pln_mobile_non_marking
-            anomali_cc123_marking
-            anomali_cc123_non_marking
-            total_anomali_marking
-            total_anomali_non_marking
-            persen_anomali_pln_mobile_marking
-            persen_anomali_pln_mobile_non_marking
-            persen_anomali_cc123_marking
-            persen_anomali_cc123_non_marking
+            petugas_pln_mobile_marking
+            petugas_pln_mobile_nonmarking
+            petugas_cc123_marking
+            petugas_cc123_nonmarking
+            petugas_anomali_marking
+            petugas_anomali_nonmarking
+            persen_pln_mobile_marking
+            persen_pln_mobile_nonmarking
+            persen_cc123_marking
+            persen_cc123_nonmarking
            persen_anomali_marking
            persen_anomali_non_marking
          }
@ -4674,27 +4627,19 @@ export const queries = {
        query subDetailAnomaliPenangananPengaduanGangguanPetugasSkipStep(
          $dateFrom: Date!
          $dateTo: Date!
-          $namaRegional: String!
-          $idUlp: Int!
-          $idUid: Int!
-          $idUp3: Int!
          $media: String
          $isMarking: Int!
-          $idPetugas: Int!
+          $namaPetugas: String
        ) {
          subDetailAnomaliPenangananPengaduanGangguanPetugasSkipStep(
            dateFrom: $dateFrom
            dateTo: $dateTo
-            namaRegional: $namaRegional
-            idUlp: $idUlp
-            idUid: $idUid
-            idUp3: $idUp3
            media: $media
            isMarking: $isMarking
-            idPetugas: $idPetugas
+            namaPetugas: $namaPetugas
          ) {
+            nama_petugas
            id
-            nama_regional
            id_uid
            nama_uid
            id_up3
@ -4702,7 +4647,7 @@ export const queries = {
            id_ulp
            nama_ulp
            no_laporan
-            referensi_marking
+            no_laporan_laporulang
            waktu_lapor
            waktu_response
            waktu_recovery
@ -4724,6 +4669,9 @@ export const queries = {
            jenis_gangguan
            penyebab
            tindakan
+            jumlah_lapor
+            marking
+            is_anomali
          }
        }
      `,
@ -4748,29 +4696,13 @@ export const queries = {
            media: $media
            isMarking: $isMarking
          ) {
-            id_regu
-            id_uid
-            nama_uid
-            id_up3
-            nama_up3
-            id_ulp
-            nama_ulp
-            id_posko
-            nama_posko
-            nama_petugas
+            id
            nama_unit
+            nama_petugas
            wo_cc123
            wo_pln_mobile
-            wo_loket
+            wo_anomali
            wo_total
-            wo_lainnya
-            anomali_pln_mobile_marking
-            anomali_pln_mobile_non_marking
-            anomali_cc123_marking
-            anomali_cc123_non_marking
-            total_anomali_cc123
-            total_anomali_pln_mobile
-            total_anomali
            persen_anomali_cc123
            persen_anomali_pln_mobile
            persen_anomali
@ -4800,17 +4732,18 @@ export const queries = {
            nama_up3
            id_ulp
            nama_ulp
+            nama_regional
            total_petugas
-            anomali_pln_mobile_marking
-            anomali_pln_mobile_non_marking
-            anomali_cc123_marking
-            anomali_cc123_non_marking
-            total_anomali_marking
-            total_anomali_non_marking
-            persen_anomali_pln_mobile_marking
-            persen_anomali_pln_mobile_non_marking
-            persen_anomali_cc123_marking
-            persen_anomali_cc123_non_marking
+            petugas_pln_mobile_marking
+            petugas_pln_mobile_nonmarking
+            petugas_cc123_marking
+            petugas_cc123_nonmarking
+            petugas_anomali_marking
+            petugas_anomali_nonmarking
+            persen_pln_mobile_marking
+            persen_pln_mobile_nonmarking
+            persen_cc123_marking
+            persen_cc123_nonmarking
            persen_anomali_marking
            persen_anomali_non_marking
          }
@ -4845,7 +4778,8 @@ export const queries = {
            nama_up3
            id_ulp
            nama_ulp
-            no_laporan
+            no_laporan_anomali
+            no_laporan_referensi
            referensi_marking
            waktu_lapor
            waktu_response
--- a/src/utils/api/api.rest.ts
+++ b/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
 }
--- a/vite.config.ts
+++ b/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,
+  // }
 })
Author	SHA1	Message	Date
Dede Fuji Abdul	7c71000ec4	chore: Update npm dependencies and bump version to 0.0.184-vm	2024-05-07 23:49:00 +07:00
Dede Fuji Abdul	bbbb566f24	chore: adjust column width in Material_RPM.vue and PencarianData.vue	2024-05-07 23:48:25 +07:00
Dede Fuji Abdul	c11d45ed0c	chore: update npm dependencies	2024-05-07 23:27:00 +07:00
Dede Fuji Abdul	0d29f2dd3b	chore: bump version to 0.0.182-vm	2024-05-07 14:06:34 +07:00
Dede Fuji Abdul	ee199648c5	chore: adjust column width in CTT_LaporanCttKwhPeriksa.vue	2024-05-07 14:05:45 +07:00
kur0nek-o	9baac2e5e2	fix: double nama unit in anomali gangguan petugas	2024-05-07 08:46:05 +07:00
kur0nek-o	04a5447b53	change version	2024-05-06 20:31:27 +07:00
kur0nek-o	b00003fb00	feat: auth request	2024-05-06 20:30:24 +07:00
kur0nek-o	91ce87d06f	feat: create login request api (in comments)	2024-05-06 19:29:07 +07:00
kur0nek-o	f0c12defa1	fix: laporan anomali	2024-05-06 10:58:06 +07:00
kur0nek-o	6dfe68b37e	fix: laporan anomali keluhan	2024-05-06 10:30:49 +07:00
kur0nek-o	5336976f17	fix	2024-05-06 09:55:02 +07:00
kur0nek-o	bcb49200c3	change version	2024-05-05 16:51:16 +07:00
kur0nek-o	73f855587f	feat: create export detail in anomali gangguan petugas	2024-05-05 16:49:46 +07:00
bagus	1e611b18d7	fix: rekapitulasi gangguan kti	2024-05-03 16:17:59 +07:00
bagus	458c1a3746	fix: report rekapitulasi keluhan all	2024-05-03 16:11:38 +07:00
bagus	eb4b487091	Merge branch 'development' of github.com:defuj/eis into development	2024-05-03 14:56:22 +07:00
bagus	f8e84629f5	change version	2024-05-03 14:54:04 +07:00
bagus	2157fbcd07	fix: report anomali penanganan pengaduan gangguan petugas	2024-05-03 14:50:44 +07:00
bagus	05d5da7dd5	fix: report rekapitulasi keluhan all	2024-05-03 10:06:53 +07:00
Dede Fuji Abdul	dba22ec07d	Update package.json and version.json to version 0.0.173-vm	2024-05-02 21:33:08 +07:00
Dede Fuji Abdul	f7630c19ed	Fix conditional rendering issue in Anomali_LAPPGP_LPP.vue	2024-05-02 21:32:52 +07:00
Dede Fuji Abdul	c59af17f6d	Fix formatting issue in RKeluhan_ALL.ts and Anomali_LAPPGP_LPP.vue files	2024-05-02 20:58:52 +07:00
Dede Fuji Abdul	557cb7e02c	Update package.json and version.json to version 0.0.172-vm	2024-05-02 18:58:42 +07:00
Dede Fuji Abdul	0ff0c43609	Update RKeluhan_ALL.ts and Anomali_LAPPGP_LPP.vue files	2024-05-02 18:58:26 +07:00
Dede Fuji Abdul	f4cb0eb70e	Update package.json and version.json to version 0.0.171-vm	2024-05-02 14:49:40 +07:00
Dede Fuji Abdul	54f91d4fd5	Update package.json and version.json to version 0.0.170-vm	2024-05-02 11:45:54 +07:00
Dede Fuji Abdul	1a88c871cd	Update version.json to version 0.0.169-vm	2024-05-02 08:47:36 +07:00
Dede Fuji Abdul	b2a2128d94	Update version.json to version 0.0.168-vm	2024-05-02 06:58:10 +07:00
Dede Fuji Abdul	0be76fdd53	Update package.json and version.json to version 0.0.167-vm	2024-04-30 21:30:43 +07:00
Dede Fuji Abdul	4c0832209d	Fix formatting issue in RGangguan_KTI.ts	2024-04-30 21:30:26 +07:00
Dede Fuji Abdul	78b1e0f982	Update package.json and version.json to version 0.0.166-vm	2024-04-30 21:01:57 +07:00
Dede Fuji Abdul	54a0f8a5dd	Update package.json and version.json to version 0.0.165-vm	2024-04-30 20:59:15 +07:00
Dede Fuji Abdul	a0189b5a30	Update package.json and version.json to version 0.0.164-vm	2024-04-30 16:13:07 +07:00
Dede Fuji Abdul	0515f09ccc	Update app2.ini and DKeluhan_PLD1K.vue files	2024-04-30 16:12:53 +07:00
Dede Fuji Abdul	4ab808a866	Update package.json and version.json to version 0.0.163-vm	2024-04-30 14:49:12 +07:00
Dede Fuji Abdul	c2e1249ab1	Update app.ini configuration file with ALLOWED_HOST_LIST changes	2024-04-30 14:48:56 +07:00
Dede Fuji Abdul	cdd32dad46	Update package.json and version.json to version 0.0.162-vm	2024-04-30 14:06:22 +07:00
Dede Fuji Abdul	c065939e18	Update ALLOWED_HOST_LIST configuration in app.ini and package.json	2024-04-30 14:06:08 +07:00
Dede Fuji Abdul	6ba3e42996	Update ALLOWED_HOST_LIST configuration in app.ini	2024-04-30 12:58:04 +07:00
Dede Fuji Abdul	106d329ead	Update ALLOWED_HOST_LIST configuration in app.ini	2024-04-30 12:24:46 +07:00
Dede Fuji Abdul	202fc54dbe	Update package.json and version.json to version 0.0.160-vm	2024-04-30 12:17:14 +07:00
Dede Fuji Abdul	4c21a87d1a	Update package.json and version.json to version 0.0.161-vm	2024-04-30 11:44:38 +07:00
Dede Fuji Abdul	f3cd8adc85	Merge branch 'dev-defuj' of https://github.com/defuj/eis into development	2024-04-18 15:39:46 +07:00
Dede Fuji Abdul	2ccc4cce52	build image	2024-04-17 21:32:42 +07:00
Dede Fuji Abdul	c0dfbc6b91	Fix formatting issues in vite.config.ts	2024-04-17 21:32:10 +07:00
Dede Fuji Abdul	ffc9ee780f	build image	2024-04-17 21:23:58 +07:00
Dede Fuji Abdul	b7b022d805	Refactor Dockerfile to use multi-stage build and optimize image size	2024-04-17 21:23:36 +07:00
Dede Fuji Abdul	64cd5930b6	build image	2024-04-17 21:12:06 +07:00
Dede Fuji Abdul	afbd3f2153	Refactor Dockerfile to use multi-stage build and optimize image size	2024-04-17 21:11:21 +07:00
Dede Fuji Abdul	3432aed38b	build image	2024-04-17 21:09:24 +07:00