fix: double nama unit in anomali gangguan petugas

Dockerfile

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

package.json

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

public/version.json

@@ -1 +1 @@
-{"version":"0.0.174-vm"}
+{"version":"0.0.181-vm"}

src/components/Navigation/Header.vue

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

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

@@ -27,13 +27,6 @@
     />
     <DxColumnFixing :enabled="true" />
 
-    <DxColumn
-      alignment="center"
-      data-field="nama_unit"
-      caption="Nama Unit"
-      css-class="custom-table-column"
-      cell-template="formatText"
-    />
     <!-- <DxColumn
       alignment="center"
       :min-width="170"
@@ -65,6 +58,14 @@
       name="namaUID"
       :calculate-group-value="(rowData: any) => rowData.nama_up3"
     /> -->
+    <DxColumn
+      :width="170"
+      alignment="center"
+      data-field="nama_unit"
+      caption="Nama Unit"
+      css-class="custom-table-column"
+      cell-template="formatText"
+    />
     <DxColumn
       :width="170"
       alignment="center"
@@ -316,7 +317,7 @@
 
   <DetailDialog
     :open="dialogDetail"
-    :title="`Daftar Detail Anomali Penanganan Pengaduan Berulang Petugas ${filters.jenisLaporan.name}`"
+    :title="`Daftar Detail Anomali Penanganan Pengaduan Gangguan Petugas - ${filters.jenisLaporan.name}`"
     @on-close="closedialogDetail"
     :full-width="true"
   >
@@ -950,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'
@@ -1115,7 +1119,15 @@ const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const onExportingDetail = (e: any) => {}
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
+  }
+}
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]

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

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

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

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

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

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

src/components/Pages/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"
@@ -149,8 +143,8 @@
         css-class="custom-table-column"
         :width="170"
         alignment="center"
-        data-field="keterangan_dlpd"
+        data-field="keterangan_pelapor"
-        caption="Keterangan DLPD"
+        caption="Keterangan Pelapor"
         cell-template="formatText"
       />
 
@@ -259,14 +253,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 {
+import { DxColumn, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
-  DxColumn,
-  DxExport,
-  DxPager,
-  DxPaging,
-  DxSearchPanel,
-  DxSelection
-} from 'devextreme-vue/data-grid'
 import { Type15 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'

src/report/Anomali/Gangguan/Anomali_LAPPGP_LPP.ts

@@ -3,52 +3,32 @@ 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
+    formattedData.push([
-    total.anomali_pln_mobile_marking += item.anomali_pln_mobile_marking
+      item.nama_unit,
-    total.anomali_cc123_marking += item.anomali_cc123_marking
+      item.nama_petugas,
+      formatNumber(item.wo_total),
+      formatNumber(item.wo_pln_mobile),
+      formatNumber(item.wo_cc123),
+      formatNumber(item.wo_pln_mobile + item.wo_cc123),
+      formatPercentage(item.persen_anomali_pln_mobile),
+      formatPercentage(item.persen_anomali_cc123),
+      formatPercentage(item.persen_anomali_pln_mobile + item.persen_anomali_cc123)
+    ])
   })
 
-  const total_anomali_marking = total.anomali_pln_mobile_marking + total.anomali_cc123_marking
-  const persen_anomali_pln_mobile_marking = total.anomali_pln_mobile_marking / total.wo_total
-  const persen_anomali_cc123_marking = total.anomali_cc123_marking / total.wo_total
-  const persen_anomali_marking = persen_anomali_pln_mobile_marking + persen_anomali_cc123_marking
-
-  formattedData.push([
-    {
-      content: 'Semua Unit',
-      colSpan: 2
-    },
-    formatNumber(total.wo_total),
-    formatNumber(total.anomali_pln_mobile_marking),
-    formatNumber(total.anomali_cc123_marking),
-    formatNumber(total_anomali_marking),
-    formatPercentage(
-      !persen_anomali_pln_mobile_marking ? 0 : persen_anomali_pln_mobile_marking * 100
-    ),
-    formatPercentage(!persen_anomali_cc123_marking ? 0 : persen_anomali_cc123_marking * 100),
-    formatPercentage(!persen_anomali_marking ? 0 : persen_anomali_marking * 100)
-  ])
-
   return formattedData
 }
 
@@ -82,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'
   })
@@ -242,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()
@@ -314,9 +498,60 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
+const exportDetailToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:AC1')
+  worksheet.mergeCells('A3:AC3')
+  worksheet.mergeCells('A4:AC4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
 const exportToDOCX = (reportMeta: any, rawData: any) => {
   const meta = formatMetaData(reportMeta)
   exportToWord(reportMeta, meta, formatData(rawData), reportName)
 }
 
-export { exportToPDF, exportToXLSX, exportToDOCX }
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportDetailToWord(meta, createDetailTableField(reportMeta, rawData), reportName)
+}
+
+export {
+  exportToPDF,
+  exportToXLSX,
+  exportToDOCX,
+  exportDetailToPDF,
+  exportDetailToXLSX,
+  exportDetailToDOCX
+}

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

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

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

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

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

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

src/report/Gangguan/Rekap/RGangguan_KTI.ts

@@ -10,14 +10,14 @@ import { exportDetailToWord, exportToWord } from './doc/RGangguan_KTI_DOC'
 const reportName = 'Rekapitulasi Koreksi Transaksi Individual'
 const fontSize = 5
 const detailFontSize = 3
-var metaReport: any = {}
+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,

src/report/Keluhan/Rekap/RKeluhan_ALL.ts

@@ -16,7 +16,7 @@ const groupingData = (data: any, reportMeta: any) => {
   const groupedData: any = {}
 
   const reportMetaMapping: any = {
-    ulp: 'nama_ulp',
+    up3: 'nama_ulp',
     uid: 'nama_up3',
     default: 'nama_uid'
   }
@@ -117,8 +117,8 @@ const groupingData = (data: any, reportMeta: any) => {
 }
 
 const getTitle = (reportMeta: any) => {
-  if (reportMeta.ulp.id != 0) {
+  if (reportMeta.up3.id != 0) {
-    return 'nama_ulp'
+    return 'nama_up3'
   }
 
   if (reportMeta.uid.id != 0) {

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 = async () => {
-  const login = () => {
     if (username.value == '' || password.value == '') {
       dispatchNotification({
         title: 'Perhatian',
@@ -23,53 +20,101 @@ export const useAuthStore = defineStore('auth', () => {
         type: 'warning'
       })
     } else {
-      // filterPresets.value = {
+      if (username.value == 'demo' && password.value == 'demo') {
-      //   uid: {
+        isLoading.value = true
-      //     id: 2,
+        setTimeout(() => {
-      //     name: 'DISTRIBUSI JAKARTA RAYA'
+          isLoading.value = false
-      //   },
+          if (username.value == 'demo' && password.value == 'demo') {
-      //   up3: {
+            writeData('token', 'secret-token')
-      //     id: 4,
-      //     name: 'UP3 MENTENG'
-      //   },
-      //   posko: {
-      //     id: 541101,
-      //     name: 'POSKO MENTENG'
-      //   }
-      // }
 
-      isLoading.value = true
+            dispatchNotification({
-      setTimeout(() => {
+              title: 'Berhasil',
-        isLoading.value = false
+              content: 'Login berhasil, selamat datang kembali!',
-        if (username.value == 'demo' && password.value == 'demo') {
+              type: 'success'
-          // store token in localStorage
+            })
-          writeData('token', 'secret-token')
 
-          if (Object.keys(filterPresets.value).length > 0) {
+            window.location.reload()
-            writeDataJson('filterPresets', filterPresets.value)
+          } else {
+            dispatchNotification({
+              title: 'Login Gagal',
+              content: 'Username atau password salah',
+              type: 'error'
+            })
           }
+        }, 3000)
+      } else {
+        isLoading.value = true
 
-          dispatchNotification({
+        try {
-            title: 'Berhasil',
+          const response = await authenticateUser(username.value, password.value)
-            content: 'Login berhasil, selamat datang kembali!',
+
-            type: 'success'
+          if (response.status) {
-          })
+            const data = response.user
-          // redirect to home page after login
+
-          window.location.reload()
+            writeData('token', 'secret-token')
-        } else {
+            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: 'Username atau password salah',
+            content: 'Terjadi kesalahan saat melakukan login',
             type: 'error'
           })
+        } finally {
+          isLoading.value = false
         }
-      }, 3000)
+      }
+    }
+  }
+
+  const handlePresets = (data: any, filterPresets: any) => {
+    const keys = ['regional', 'uid', 'up3', 'posko', 'ulp']
+    let isChanged = false
+
+    for (const key of keys) {
+      const idKey = `id${key.charAt(0).toUpperCase() + key.slice(1)}`
+      const nameKey = `nama${key.charAt(0).toUpperCase() + key.slice(1)}`
+
+      if (data[nameKey] && data[idKey]) {
+        filterPresets.value[key] = {
+          id: data[idKey],
+          name: data[nameKey]
+        }
+        isChanged = true
+      }
+    }
+
+    console.log(filterPresets.value)
+
+    if (isChanged) {
+      writeDataJson('filterPresets', filterPresets.value)
     }
   }
 
   const logout = () => {
     removeData('token')
     removeData('filterPresets')
+    removeData('user_name')
+    removeData('user_access')
+    removeData('user_uid')
   }
 
   return {

src/stores/user.ts

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

src/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({
@@ -4010,6 +4009,7 @@ export const queries = {
           pembuatLaporan: $pembuatLaporan
         ) {
           id
+          keterangan_pelapor
           keterangan_dlpd
           no_laporan
           idpel_nometer
@@ -4021,6 +4021,7 @@ export const queries = {
           nama_up3
           nama_ulp
           nama_posko
+          #nama_petugas
           id_regu
           nama_regu
           waktu_lapor
@@ -4051,6 +4052,7 @@ export const queries = {
           pembuatLaporan: $pembuatLaporan
         ) {
           id
+          keterangan_pelapor
           keterangan_dlpd
           no_laporan
           idpel_nometer
@@ -4776,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

src/utils/api/api.rest.ts

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

vite.config.ts

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