From 21b61121faa532474b5786b33df37d6fe4ef9d7d Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Sat, 30 Mar 2024 09:52:25 +0700
Subject: [PATCH 1/9] feat: create export pdf and xlsx in detail rekapitulasi
 gangguan alih posko

---
 .../Gangguan/Rekap/RGangguan_AlihPosko.vue    |  38 ++-
 .../Gangguan/Rekap/RGangguan_AlihPosko.ts     | 239 +++++++++++++++++-
 2 files changed, 254 insertions(+), 23 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
index 64457e0..01a9b1f 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
@@ -160,7 +160,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -502,12 +502,6 @@ import {
   DxPager,
   DxGrouping
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import InputText from '@/components/InputText.vue'
@@ -515,7 +509,12 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
-import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_AlihPosko'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToXLSX,
+  exportDetailToPDF
+} from '@/report/Gangguan/Rekap/RGangguan_AlihPosko'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -590,21 +589,18 @@ const closeDialog = () => {
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+  }
+}
 
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
diff --git a/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts b/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
index 199d904..5c7672c 100644
--- a/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
@@ -21,6 +21,8 @@ import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber } from '@/utils/numbers'
 
 const reportName = 'Rekapitulasi Gangguan Alih Posko'
+const fontSize = 5
+const detailFontSize = 3
 
 const groupingData = (data: any) => {
   const groupedData: any = {}
@@ -119,7 +121,6 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   const doc = new jsPDF({
     orientation: 'landscape'
   })
-  const fontSize = 5
 
   autoTable(doc, {
     head: [
@@ -247,4 +248,238 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
-export { exportToPDF }
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  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: [
+      [
+        'No',
+        'No Laporan',
+        'Tgl Lapor',
+        'Tgl Datang',
+        'Tgl Nyala',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Posko',
+        'Sumber Lapor',
+        'Nama Petugas',
+        'Posko Awal',
+        'Posko Tujuan'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      item.durasi_response_time,
+      item.durasi_recovery_time,
+      item.status_akhir,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.nama_posko,
+      item.media,
+      '',
+      '',
+      ''
+    ]),
+    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',
+      cellWidth: 'wrap',
+      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: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          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()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `POSKO : ${
+      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 3, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    3,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:F1')
+  worksheet.mergeCells('A2:F2')
+  worksheet.mergeCells('A3:F3')
+  worksheet.mergeCells('A4:F4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportDetailToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    4,
+    8,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('H3:J3')
+  worksheet.mergeCells('H4:J4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }

From 7c4635d5b18d531de7106af495d78a31d699689b Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Sat, 30 Mar 2024 10:26:12 +0700
Subject: [PATCH 2/9] feat: create export pdf and xlsx in detail rekapitulasi
 gangguan diselesaikan mobile APKT

---
 .../Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue |  40 ++-
 src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts | 239 +++++++++++++++++-
 2 files changed, 255 insertions(+), 24 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
index fe34a3d..c7ff489 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
@@ -441,7 +441,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -758,7 +758,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -773,12 +773,6 @@ import {
   DxSummary,
   DxTotalItem
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
@@ -786,7 +780,12 @@ import InputText from '@/components/InputText.vue'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
-import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_DMAPKT'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Gangguan/Rekap/RGangguan_DMAPKT'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -863,21 +862,18 @@ const closeDialog = () => {
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+  }
+}
 
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
diff --git a/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts b/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
index f1169cf..6c4fba3 100644
--- a/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
@@ -21,6 +21,8 @@ import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 
 const reportName = 'Rekapitulasi Gangguan Diselesaikan Mobile APKT'
+const fontSize = 4
+const detailFontSize = 3
 
 const formatData = (rawData: any) => {
   const formattedData: any = []
@@ -128,7 +130,6 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   const doc = new jsPDF({
     orientation: 'landscape'
   })
-  const fontSize = 4
 
   autoTable(doc, {
     head: [
@@ -410,4 +411,238 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
-export { exportToPDF }
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  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: [
+      [
+        'No',
+        'No Laporan',
+        'Tgl Lapor',
+        'Tgl Datang',
+        'Tgl Nyala',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'Referensi Marking',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Posko',
+        'Tindakan',
+        'Penyebab'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      item.durasi_response_time,
+      item.durasi_recovery_time,
+      item.status_akhir,
+      item.referensi_marking,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.nama_posko,
+      item.tindakan,
+      item.penyebab
+    ]),
+    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',
+      cellWidth: 'wrap',
+      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: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          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()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `POSKO : ${
+      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:F1')
+  worksheet.mergeCells('A2:F2')
+  worksheet.mergeCells('A3:F3')
+  worksheet.mergeCells('A4:F4')
+  worksheet.mergeCells('A7:X7')
+  worksheet.mergeCells('A8:X8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  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('A3:Q3')
+  worksheet.mergeCells('A4:Q4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }

From 7519095c417d9db58b531ef2fc27010ad7396227 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Sat, 30 Mar 2024 10:54:51 +0700
Subject: [PATCH 3/9] feat: create export pdf in rekapitulasi rating per posko

---
 .../Rekap/RGangguan_RatingPerPosko.vue        | 26 ++------
 src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts |  8 +--
 .../Rekap/RGangguan_RatingPerPosko.ts         | 60 ++++++++++++++++++-
 3 files changed, 66 insertions(+), 28 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index 10313a9..e662ac5 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -625,13 +625,7 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { onMounted, ref, watch } from 'vue'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
+import { onMounted, ref } from 'vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
@@ -640,7 +634,7 @@ import InputText from '@/components/InputText.vue'
 import vue3starRatings from 'vue3-star-ratings'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
-import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_RatingPerPosko'
+import { exportToPDF, exportToXLSX } from '@/report/Gangguan/Rekap/RGangguan_RatingPerPosko'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -717,21 +711,9 @@ const closeDialog = () => {
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
   }
 }
 
diff --git a/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts b/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
index 6c4fba3..740c535 100644
--- a/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
@@ -589,10 +589,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     true
   )
 
-  worksheet.mergeCells('A1:F1')
-  worksheet.mergeCells('A2:F2')
-  worksheet.mergeCells('A3:F3')
-  worksheet.mergeCells('A4:F4')
+  worksheet.mergeCells('A1:X1')
+  worksheet.mergeCells('A2:X2')
+  worksheet.mergeCells('A3:X3')
+  worksheet.mergeCells('A4:X4')
   worksheet.mergeCells('A7:X7')
   worksheet.mergeCells('A8:X8')
 
diff --git a/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts b/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
index 3fa2dc9..19a189b 100644
--- a/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
@@ -21,6 +21,7 @@ import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 
 const reportName = 'Rekapitulasi Rating Per Posko'
+const fontSize = 5
 
 const groupingData = (data: any) => {
   const groupedData: any = {}
@@ -102,7 +103,6 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   const doc = new jsPDF({
     orientation: 'landscape'
   })
-  const fontSize = 5
 
   autoTable(doc, {
     head: [
@@ -265,4 +265,60 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
-export { exportToPDF }
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 5, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    6,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:Q1')
+  worksheet.mergeCells('A2:Q2')
+  worksheet.mergeCells('A3:Q3')
+  worksheet.mergeCells('A5:Q5')
+  worksheet.mergeCells('A6:Q6')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 8, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX }

From e7883d54e9811f622a7ac7d562e04824349609c7 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Sat, 30 Mar 2024 11:23:54 +0700
Subject: [PATCH 4/9] feat: create export to pdf and xlsx in detail
 rekapitulasi gangguan rating per posko

---
 .../Rekap/RGangguan_RatingPerPosko.vue        |  18 +-
 .../Rekap/RGangguan_RatingPerPosko.ts         | 176 +++++++++++++++++-
 src/report/utils/rating.ts                    |   5 +
 3 files changed, 195 insertions(+), 4 deletions(-)
 create mode 100644 src/report/utils/rating.ts

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index c307ddc..ce7225f 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -259,7 +259,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -634,7 +634,12 @@ import InputText from '@/components/InputText.vue'
 import vue3starRatings from 'vue3-star-ratings'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
-import { exportToPDF, exportToXLSX } from '@/report/Gangguan/Rekap/RGangguan_RatingPerPosko'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Gangguan/Rekap/RGangguan_RatingPerPosko'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -721,6 +726,15 @@ const onExporting = (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 {
+  }
+}
+
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
diff --git a/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts b/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
index 19a189b..f407384 100644
--- a/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
@@ -16,12 +16,13 @@ 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 { numberToStars } from '@/report/utils/rating'
 
 const reportName = 'Rekapitulasi Rating Per Posko'
 const fontSize = 5
+const detailFontSize = 3
 
 const groupingData = (data: any) => {
   const groupedData: any = {}
@@ -265,6 +266,142 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  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: [
+      [
+        'No',
+        'No Laporan',
+        'Rating',
+        'Tgl Lapor',
+        'Tgl Datang',
+        'Tgl Nyala',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'Referensi Marking',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Posko',
+        'Tindakan',
+        'Penyebab'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      numberToStars(item.nilai_rating),
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      item.durasi_response_time,
+      item.durasi_recovery_time,
+      item.status_akhir,
+      item.referensi_marking,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.nama_posko,
+      item.tindakan,
+      item.penyebab
+    ]),
+    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',
+      cellWidth: 'wrap',
+      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: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          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()
@@ -321,4 +458,39 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX }
+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('A3:R3')
+  worksheet.mergeCells('A4:R4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
diff --git a/src/report/utils/rating.ts b/src/report/utils/rating.ts
new file mode 100644
index 0000000..a9246b3
--- /dev/null
+++ b/src/report/utils/rating.ts
@@ -0,0 +1,5 @@
+export const numberToStars = (rating: number) => {
+  const stars = rating ? Math.round(rating) : 0
+
+  return stars ? '*'.repeat(stars) : 'Tidak ada'
+}

From 021088afe10c28c697285499f415041d173c0f07 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Sat, 30 Mar 2024 11:55:46 +0700
Subject: [PATCH 5/9] feat: create export pdf and xlsx in detail rekapitulasi
 gangguan rating per regu

---
 .../Rekap/RGangguan_RatingPerRegu.vue         |  36 ++-
 src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts |   1 -
 .../Gangguan/Rekap/RGangguan_RatingPerRegu.ts | 243 +++++++++++++++++-
 3 files changed, 257 insertions(+), 23 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index 934b2a9..f284c90 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -249,7 +249,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -615,10 +615,6 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
@@ -627,7 +623,12 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
-import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_RatingPerRegu'
+import {
+  exportToPDF,
+  exportDetailToPDF,
+  exportToXLSX,
+  exportDetailToXLSX
+} from '@/report/Gangguan/Rekap/RGangguan_RatingPerRegu'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -713,21 +714,18 @@ const closeDialog = () => {
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+  }
+}
 
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
diff --git a/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts b/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
index 740c535..f4ae7cf 100644
--- a/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
@@ -16,7 +16,6 @@ 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'
 
diff --git a/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts b/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
index a7645a1..94863a7 100644
--- a/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
@@ -16,11 +16,13 @@ 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 { numberToStars } from '@/report/utils/rating'
 
 const reportName = 'Rekapitulasi Rating Per Regu'
+const fontSize = 5
+const detailFontSize = 3
 
 const formatData = (rawData: any) => {
   return rawData.map((item: any, i: any) => {
@@ -77,7 +79,6 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   const doc = new jsPDF({
     orientation: 'landscape'
   })
-  const fontSize = 5
 
   autoTable(doc, {
     head: [
@@ -245,4 +246,240 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
-export { exportToPDF }
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  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: [
+      [
+        'No',
+        'No Laporan',
+        'Rating',
+        'Tgl Lapor',
+        'Tgl Datang',
+        'Tgl Nyala',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'Referensi Marking',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Posko',
+        'Tindakan',
+        'Penyebab'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      numberToStars(item.nilai_rating),
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      item.durasi_response_time,
+      item.durasi_recovery_time,
+      item.status_akhir,
+      item.referensi_marking,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.nama_posko,
+      item.tindakan,
+      item.penyebab
+    ]),
+    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',
+      cellWidth: 'wrap',
+      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: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          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()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `POSKO : ${
+      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:Q1')
+  worksheet.mergeCells('A2:Q2')
+  worksheet.mergeCells('A3:Q3')
+  worksheet.mergeCells('A4:Q4')
+  worksheet.mergeCells('A7:Q7')
+  worksheet.mergeCells('A8:Q8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  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('A3:R3')
+  worksheet.mergeCells('A4:R4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }

From 2f399e53c3e61fec94c2b39b6f1415e4fbe1082b Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Sat, 30 Mar 2024 13:17:01 +0700
Subject: [PATCH 6/9] fix: file name when lihat laporan

---
 src/report/Gangguan/Rekap/RGangguan_ALL.ts    |  3 ++
 .../Gangguan/Rekap/RGangguan_AlihPosko.ts     |  3 ++
 .../Gangguan/Rekap/RGangguan_BerdasarMedia.ts |  3 ++
 src/report/Gangguan/Rekap/RGangguan_CTTM.ts   |  3 ++
 src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts |  3 ++
 .../Gangguan/Rekap/RGangguan_JenisGangguan.ts | 41 +++++++++++++++----
 .../Rekap/RGangguan_JenisGangguanSE.ts        | 35 +++++++++++++---
 src/report/Gangguan/Rekap/RGangguan_KTI.ts    |  3 ++
 .../Gangguan/Rekap/RGangguan_PerPosko.ts      |  3 ++
 .../Gangguan/Rekap/RGangguan_PerRegu.ts       |  3 ++
 .../Gangguan/Rekap/RGangguan_PerTanggal.ts    |  3 ++
 .../Rekap/RGangguan_RatingPerPosko.ts         |  3 ++
 .../Gangguan/Rekap/RGangguan_RatingPerRegu.ts |  3 ++
 13 files changed, 95 insertions(+), 14 deletions(-)

diff --git a/src/report/Gangguan/Rekap/RGangguan_ALL.ts b/src/report/Gangguan/Rekap/RGangguan_ALL.ts
index 42c6789..1097703 100644
--- a/src/report/Gangguan/Rekap/RGangguan_ALL.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_ALL.ts
@@ -463,6 +463,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
diff --git a/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts b/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
index 5c7672c..33f6fa3 100644
--- a/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
@@ -240,6 +240,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
diff --git a/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts b/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
index 10d8f97..7323526 100644
--- a/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
@@ -245,6 +245,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
diff --git a/src/report/Gangguan/Rekap/RGangguan_CTTM.ts b/src/report/Gangguan/Rekap/RGangguan_CTTM.ts
index 9043b76..07a2c28 100644
--- a/src/report/Gangguan/Rekap/RGangguan_CTTM.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_CTTM.ts
@@ -267,6 +267,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
diff --git a/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts b/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
index f4ae7cf..b8fa217 100644
--- a/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
@@ -402,6 +402,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
diff --git a/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts b/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
index 63aa3f6..ef960f5 100644
--- a/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
@@ -88,13 +88,19 @@ const formatData = (rawData: any) => {
         formatNumber(data[sub_kelompok][i].laporan.total),
         formatNumber(data[sub_kelompok][i].laporan.sudahSelesai.jml),
         formatPercentage(
-          (data[sub_kelompok][i].laporan.sudahSelesai.jml / data[sub_kelompok][i].laporan.total) *
-            100
+          !data[sub_kelompok][i].laporan.sudahSelesai.jml || !data[sub_kelompok][i].laporan.total
+            ? '0%'
+            : (data[sub_kelompok][i].laporan.sudahSelesai.jml /
+                data[sub_kelompok][i].laporan.total) *
+                100
         ),
         formatNumber(data[sub_kelompok][i].laporan.belumSelesai.jml),
         formatPercentage(
-          (data[sub_kelompok][i].laporan.belumSelesai.jml / data[sub_kelompok][i].laporan.total) *
-            100
+          !data[sub_kelompok][i].laporan.belumSelesai.jml || !data[sub_kelompok][i].laporan.total
+            ? '0%'
+            : (data[sub_kelompok][i].laporan.belumSelesai.jml /
+                data[sub_kelompok][i].laporan.total) *
+                100
         ),
         formatNumber(data[sub_kelompok][i].responseTime.menit.total),
         formatNumber(data[sub_kelompok][i].responseTime.menit.rataRata),
@@ -155,9 +161,17 @@ const formatData = (rawData: any) => {
       { content: 'TOTAL', colSpan: 3, styles: { fontStyle: 'bold' } },
       formatNumber(total.total_laporan),
       formatNumber(total.total_laporan_sudah_selesai),
-      formatPercentage((total.total_laporan_sudah_selesai / total.total_laporan) * 100),
+      formatPercentage(
+        !total.total_laporan_sudah_selesai || !total.total_laporan
+          ? '0%'
+          : (total.total_laporan_sudah_selesai / total.total_laporan) * 100
+      ),
       formatNumber(total.total_laporan_belum_selesai),
-      formatPercentage((total.total_laporan_belum_selesai / total.total_laporan) * 100),
+      formatPercentage(
+        !total.total_laporan_belum_selesai || !total.total_laporan
+          ? '0%'
+          : (total.total_laporan_belum_selesai / total.total_laporan) * 100
+      ),
       formatNumber(total.total_response_time_total),
       formatNumber(
         total.total_response_time_rata_rata.length
@@ -187,9 +201,17 @@ const formatData = (rawData: any) => {
     { content: 'GRAND TOTAL', colSpan: 3, styles: { fontStyle: 'bold' } },
     formatNumber(grandTotal.total_laporan),
     formatNumber(grandTotal.total_laporan_sudah_selesai),
-    formatPercentage((grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan_sudah_selesai || !grandTotal.total_laporan
+        ? '0%'
+        : (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_laporan_belum_selesai),
-    formatPercentage((grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan_belum_selesai || !grandTotal.total_laporan
+        ? '0%'
+        : (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_response_time_total),
     formatNumber(
       grandTotal.total_response_time_rata_rata.length
@@ -443,6 +465,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
diff --git a/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts b/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts
index 2c7234f..3313ebb 100644
--- a/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts
@@ -89,10 +89,14 @@ const formatData = (rawData: any) => {
         data[id_fasilitas][i].sub_kelompok,
         formatNumber(data[id_fasilitas][i].total),
         formatNumber(data[id_fasilitas][i].total_selesai),
-        formatPercentage((data[id_fasilitas][i].total_selesai / data[id_fasilitas][i].total) * 100),
+        formatPercentage(
+          !data[id_fasilitas][i].total_selesai || !data[id_fasilitas][i].total
+            ? '0%'
+            : (data[id_fasilitas][i].total_selesai / data[id_fasilitas][i].total) * 100
+        ),
         formatNumber(data[id_fasilitas][i].total_inproses),
         formatPercentage(
-          data[id_fasilitas][i].total_inproses == null || data[id_fasilitas][i].total == null
+          !data[id_fasilitas][i].total_inproses || !data[id_fasilitas][i].total
             ? '0%'
             : (data[id_fasilitas][i].total_inproses / data[id_fasilitas][i].total) * 100
         ),
@@ -147,9 +151,17 @@ const formatData = (rawData: any) => {
       { content: 'TOTAL', colSpan: 3, styles: { fontStyle: 'bold' } },
       formatNumber(total.total_laporan),
       formatNumber(total.total_laporan_sudah_selesai),
-      formatPercentage((total.total_laporan_sudah_selesai / total.total_laporan) * 100),
+      formatPercentage(
+        !total.total_laporan_sudah_selesai || !total.total_laporan
+          ? '0%'
+          : (total.total_laporan_sudah_selesai / total.total_laporan) * 100
+      ),
       formatNumber(total.total_laporan_belum_selesai),
-      formatPercentage((total.total_laporan_belum_selesai / total.total_laporan) * 100),
+      formatPercentage(
+        !total.total_laporan_belum_selesai || !total.total_laporan
+          ? '0%'
+          : (total.total_laporan_belum_selesai / total.total_laporan) * 100
+      ),
       formatNumber(total.total_response_time_total),
       formatNumber(
         total.total_response_time_rata_rata.length
@@ -179,9 +191,17 @@ const formatData = (rawData: any) => {
     { content: 'GRAND TOTAL', colSpan: 3, styles: { fontStyle: 'bold' } },
     formatNumber(grandTotal.total_laporan),
     formatNumber(grandTotal.total_laporan_sudah_selesai),
-    formatPercentage((grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan_sudah_selesai || !grandTotal.total_laporan
+        ? '0%'
+        : (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_laporan_belum_selesai),
-    formatPercentage((grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan_belum_selesai || !grandTotal.total_laporan
+        ? '0%'
+        : (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_response_time_total),
     formatNumber(
       grandTotal.total_response_time_rata_rata.length
@@ -435,6 +455,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
diff --git a/src/report/Gangguan/Rekap/RGangguan_KTI.ts b/src/report/Gangguan/Rekap/RGangguan_KTI.ts
index 3a8b10d..815d720 100644
--- a/src/report/Gangguan/Rekap/RGangguan_KTI.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_KTI.ts
@@ -267,6 +267,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts b/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
index 932fa05..df1f76f 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
@@ -424,6 +424,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts b/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
index 8af2c11..ce0625c 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
@@ -482,6 +482,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts b/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
index 2c1574f..1300c3f 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
@@ -476,6 +476,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
diff --git a/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts b/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
index f407384..de5118a 100644
--- a/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
@@ -258,6 +258,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
diff --git a/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts b/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
index 94863a7..065f6d6 100644
--- a/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
@@ -238,6 +238,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {

From 8577814bd4bb0c8d2fbb423594bb41a5d0b3a10d Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Sat, 30 Mar 2024 13:37:44 +0700
Subject: [PATCH 7/9] fix: formatPercentage in report rekapitulasi gangguan

---
 src/report/Gangguan/Rekap/RGangguan_ALL.ts    | 14 +++++--
 .../Gangguan/Rekap/RGangguan_BerdasarMedia.ts |  3 +-
 .../Gangguan/Rekap/RGangguan_PerPosko.ts      | 32 ++++++++++++---
 .../Gangguan/Rekap/RGangguan_PerRegu.ts       | 40 +++++++++++++++----
 .../Gangguan/Rekap/RGangguan_PerTanggal.ts    | 40 +++++++++++++++----
 5 files changed, 102 insertions(+), 27 deletions(-)

diff --git a/src/report/Gangguan/Rekap/RGangguan_ALL.ts b/src/report/Gangguan/Rekap/RGangguan_ALL.ts
index 1097703..80d99f0 100644
--- a/src/report/Gangguan/Rekap/RGangguan_ALL.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_ALL.ts
@@ -173,7 +173,11 @@ const formatData = (rawData: any) => {
           ? formatPercentage((summary.total_selesai / summary.total) * 100)
           : '100%',
         formatNumber(summary.total_inproses),
-        formatPercentage((summary.total_inproses / summary.total) * 100),
+        formatPercentage(
+          !summary.total_inproses || !summary.total
+            ? '0%'
+            : (summary.total_inproses / summary.total) * 100
+        ),
         formatNumber(avgDurasiDispatch),
         formatWaktu(summary.max_durasi_dispatch),
         formatWaktu(summary.min_durasi_dispatch),
@@ -221,9 +225,13 @@ const formatData = (rawData: any) => {
       { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
       formatNumber(total.total),
       formatNumber(total.total_selesai),
-      formatPercentage((total.total_selesai / total.total) * 100),
+      formatPercentage(
+        !total.total_selesai || !total.total ? '0%' : (total.total_selesai / total.total) * 100
+      ),
       formatNumber(total.total_inproses),
-      formatPercentage((total.total_inproses / total.total) * 100),
+      formatPercentage(
+        !total.total_inproses || !total.total ? '0%' : (total.total_inproses / total.total) * 100
+      ),
       formatNumber(
         total.avg_durasi_dispatch.length
           ? total.avg_durasi_dispatch.reduce((a: any, b: any) => a + b) /
diff --git a/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts b/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
index 7323526..c69256c 100644
--- a/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
@@ -16,9 +16,8 @@ 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 { formatNumber } from '@/utils/numbers'
 
 const reportName = 'Rekapitulasi Gangguan Berdasarkan Media'
 const fontSize = 5
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts b/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
index df1f76f..45fa24f 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
@@ -88,10 +88,14 @@ const formatData = (rawData: any) => {
         data[nama_up3][i].nama_posko,
         formatNumber(data[nama_up3][i].total),
         formatNumber(data[nama_up3][i].total_selesai),
-        formatPercentage((data[nama_up3][i].total_selesai / data[nama_up3][i].total) * 100),
+        formatPercentage(
+          !data[nama_up3][i].total_selesai || !data[nama_up3][i].total
+            ? '0%'
+            : (data[nama_up3][i].total_selesai / data[nama_up3][i].total) * 100
+        ),
         formatNumber(data[nama_up3][i].total_inproses),
         formatPercentage(
-          data[nama_up3][i].total_inproses == null || data[nama_up3][i].total == null
+          !data[nama_up3][i].total_inproses || !data[nama_up3][i].total
             ? '0%'
             : (data[nama_up3][i].total_inproses / data[nama_up3][i].total) * 100
         ),
@@ -146,9 +150,17 @@ const formatData = (rawData: any) => {
       { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
       formatNumber(total.total_laporan),
       formatNumber(total.total_laporan_sudah_selesai),
-      formatPercentage((total.total_laporan_sudah_selesai / total.total_laporan) * 100),
+      formatPercentage(
+        !total.total_laporan_sudah_selesai || !total.total_laporan
+          ? '0%'
+          : (total.total_laporan_sudah_selesai / total.total_laporan) * 100
+      ),
       formatNumber(total.total_laporan_belum_selesai),
-      formatPercentage((total.total_laporan_belum_selesai / total.total_laporan) * 100),
+      formatPercentage(
+        !total.total_laporan_belum_selesai || !total.total_laporan
+          ? '0%'
+          : (total.total_laporan_belum_selesai / total.total_laporan) * 100
+      ),
       formatNumber(total.total_response_time_total),
       formatNumber(
         total.total_response_time_rata_rata.length
@@ -178,9 +190,17 @@ const formatData = (rawData: any) => {
     { content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
     formatNumber(grandTotal.total_laporan),
     formatNumber(grandTotal.total_laporan_sudah_selesai),
-    formatPercentage((grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan_sudah_selesai || !grandTotal.total_laporan
+        ? '0%'
+        : (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_laporan_belum_selesai),
-    formatPercentage((grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan_belum_selesai || !grandTotal.total_laporan
+        ? '0%'
+        : (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_response_time_total),
     formatNumber(
       grandTotal.total_response_time_rata_rata.length
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts b/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
index ce0625c..ac32735 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
@@ -91,10 +91,14 @@ const formatData = (rawData: any, groupBy: boolean) => {
           data[nama_uid][i].nama_regu,
           formatNumber(data[nama_uid][i].total),
           formatNumber(data[nama_uid][i].total_selesai),
-          formatPercentage((data[nama_uid][i].total_selesai / data[nama_uid][i].total) * 100),
+          formatPercentage(
+            !data[nama_uid][i].total || !data[nama_uid][i].total_selesai
+              ? '0%'
+              : (data[nama_uid][i].total_selesai / data[nama_uid][i].total) * 100
+          ),
           formatNumber(data[nama_uid][i].total_inproses),
           formatPercentage(
-            data[nama_uid][i].total_inproses == null || data[nama_uid][i].total == null
+            !data[nama_uid][i].total_inproses || !data[nama_uid][i].total
               ? '0%'
               : (data[nama_uid][i].total_inproses / data[nama_uid][i].total) * 100
           ),
@@ -149,9 +153,17 @@ const formatData = (rawData: any, groupBy: boolean) => {
         { content: 'TOTAL', colSpan: 3, styles: { fontStyle: 'bold' } },
         formatNumber(total.total_laporan),
         formatNumber(total.total_laporan_sudah_selesai),
-        formatPercentage((total.total_laporan_sudah_selesai / total.total_laporan) * 100),
+        formatPercentage(
+          !total.total_laporan || !total.total_laporan_sudah_selesai
+            ? '0%'
+            : (total.total_laporan_sudah_selesai / total.total_laporan) * 100
+        ),
         formatNumber(total.total_laporan_belum_selesai),
-        formatPercentage((total.total_laporan_belum_selesai / total.total_laporan) * 100),
+        formatPercentage(
+          !total.total_laporan || !total.total_laporan_belum_selesai
+            ? '0%'
+            : (total.total_laporan_belum_selesai / total.total_laporan) * 100
+        ),
         formatNumber(total.total_response_time_total),
         formatNumber(
           total.total_response_time_rata_rata.length
@@ -184,10 +196,14 @@ const formatData = (rawData: any, groupBy: boolean) => {
         rawData[i].nama_regu,
         formatNumber(rawData[i].total),
         formatNumber(rawData[i].total_selesai),
-        formatPercentage((rawData[i].total_selesai / rawData[i].total) * 100),
+        formatPercentage(
+          !rawData[i].total || !rawData[i].total_selesai
+            ? '0%'
+            : (rawData[i].total_selesai / rawData[i].total) * 100
+        ),
         formatNumber(rawData[i].total_inproses),
         formatPercentage(
-          rawData[i].total_inproses == null || rawData[i].total == null
+          !rawData[i].total_inproses || !rawData[i].total
             ? '0%'
             : (rawData[i].total_inproses / rawData[i].total) * 100
         ),
@@ -227,9 +243,17 @@ const formatData = (rawData: any, groupBy: boolean) => {
     { content: 'GRAND TOTAL', colSpan: 3, styles: { fontStyle: 'bold' } },
     formatNumber(grandTotal.total_laporan),
     formatNumber(grandTotal.total_laporan_sudah_selesai),
-    formatPercentage((grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan || !grandTotal.total_laporan_sudah_selesai
+        ? '0%'
+        : (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_laporan_belum_selesai),
-    formatPercentage((grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan || !grandTotal.total_laporan_belum_selesai
+        ? '0%'
+        : (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_response_time_total),
     formatNumber(
       grandTotal.total_response_time_rata_rata.length
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts b/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
index 1300c3f..466bf3b 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
@@ -90,10 +90,14 @@ const formatData = (rawData: any, groupBy: boolean) => {
           data[nama_uid][i].tanggal,
           formatNumber(data[nama_uid][i].total),
           formatNumber(data[nama_uid][i].total_selesai),
-          formatPercentage((data[nama_uid][i].total_selesai / data[nama_uid][i].total) * 100),
+          formatPercentage(
+            !data[nama_uid][i].total || !data[nama_uid][i].total_selesai
+              ? '0%'
+              : (data[nama_uid][i].total_selesai / data[nama_uid][i].total) * 100
+          ),
           formatNumber(data[nama_uid][i].total_inproses),
           formatPercentage(
-            data[nama_uid][i].total_inproses == null || data[nama_uid][i].total == null
+            !data[nama_uid][i].total_inproses || !data[nama_uid][i].total
               ? '0%'
               : (data[nama_uid][i].total_inproses / data[nama_uid][i].total) * 100
           ),
@@ -148,9 +152,17 @@ const formatData = (rawData: any, groupBy: boolean) => {
         { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
         formatNumber(total.total_laporan),
         formatNumber(total.total_laporan_sudah_selesai),
-        formatPercentage((total.total_laporan_sudah_selesai / total.total_laporan) * 100),
+        formatPercentage(
+          !total.total_laporan || !total.total_laporan_sudah_selesai
+            ? '0%'
+            : (total.total_laporan_sudah_selesai / total.total_laporan) * 100
+        ),
         formatNumber(total.total_laporan_belum_selesai),
-        formatPercentage((total.total_laporan_belum_selesai / total.total_laporan) * 100),
+        formatPercentage(
+          !total.total_laporan_belum_selesai || !total.total_laporan
+            ? '0%'
+            : (total.total_laporan_belum_selesai / total.total_laporan) * 100
+        ),
         formatNumber(total.total_response_time_total),
         formatNumber(
           total.total_response_time_rata_rata.length
@@ -182,10 +194,14 @@ const formatData = (rawData: any, groupBy: boolean) => {
         rawData[i].tanggal,
         formatNumber(rawData[i].total),
         formatNumber(rawData[i].total_selesai),
-        formatPercentage((rawData[i].total_selesai / rawData[i].total) * 100),
+        formatPercentage(
+          !rawData[i].total || !rawData[i].total_selesai
+            ? '0%'
+            : (rawData[i].total_selesai / rawData[i].total) * 100
+        ),
         formatNumber(rawData[i].total_inproses),
         formatPercentage(
-          rawData[i].total_inproses == null || rawData[i].total == null
+          !rawData[i].total_inproses || !rawData[i].total
             ? '0%'
             : (rawData[i].total_inproses / rawData[i].total) * 100
         ),
@@ -225,9 +241,17 @@ const formatData = (rawData: any, groupBy: boolean) => {
     { content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
     formatNumber(grandTotal.total_laporan),
     formatNumber(grandTotal.total_laporan_sudah_selesai),
-    formatPercentage((grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan || !grandTotal.total_laporan_sudah_selesai
+        ? '0%'
+        : (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_laporan_belum_selesai),
-    formatPercentage((grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan_belum_selesai || !grandTotal.total_laporan
+        ? '0%'
+        : (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_response_time_total),
     formatNumber(
       grandTotal.total_response_time_rata_rata.length

From f98ed9f2610c22689ee351938845335f763fd2a2 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Sat, 30 Mar 2024 14:08:50 +0700
Subject: [PATCH 8/9] fix: export in rekapitulasi gangguan per jenis gangguan
 and title in all detail export

---
 src/report/Gangguan/Rekap/RGangguan_ALL.ts           |  2 +-
 src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts     |  2 +-
 src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts |  2 +-
 src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts | 11 +++++++++--
 src/report/Gangguan/Rekap/RGangguan_PerPosko.ts      |  2 +-
 src/report/Gangguan/Rekap/RGangguan_PerRegu.ts       |  2 +-
 src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts    |  2 +-
 7 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/report/Gangguan/Rekap/RGangguan_ALL.ts b/src/report/Gangguan/Rekap/RGangguan_ALL.ts
index 80d99f0..dfdadda 100644
--- a/src/report/Gangguan/Rekap/RGangguan_ALL.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_ALL.ts
@@ -700,7 +700,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
 const exportDetailToXLSX = (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
-  const worksheet = workbook.addWorksheet(`${reportName}`)
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
 
   setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
   setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
diff --git a/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts b/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
index 33f6fa3..925c71e 100644
--- a/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
@@ -453,7 +453,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
 const exportDetailToXLSX = (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
-  const worksheet = workbook.addWorksheet(`${reportName}`)
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
 
   setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
   setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
diff --git a/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts b/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
index c69256c..c54fec1 100644
--- a/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
@@ -457,7 +457,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
 const exportDetailToXLSX = (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
-  const worksheet = workbook.addWorksheet(`${reportName}`)
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
 
   setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
   setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
diff --git a/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts b/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
index ef960f5..90073a2 100644
--- a/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
@@ -59,7 +59,7 @@ const formatData = (rawData: any) => {
     total_recovery_time_kurang_sla: 0
   }
 
-  for (const sub_kelompok in data) {
+  for (const sub_kelompok of data) {
     const total: any = {
       total_laporan: 0,
       total_laporan_sudah_selesai: 0,
@@ -78,7 +78,13 @@ const formatData = (rawData: any) => {
       total_recovery_time_kurang_sla: 0
     }
 
-    formattedData.push([{ content: sub_kelompok, colSpan: 20, styles: { fontStyle: 'bold' } }])
+    formattedData.push([
+      {
+        content: `${sub_kelompok} (${data[sub_kelompok][0].nama_sub_kelompok})`,
+        colSpan: 20,
+        styles: { fontStyle: 'bold' }
+      }
+    ])
 
     for (let i = 0; i < data[sub_kelompok].length; i++) {
       formattedData.push([
@@ -266,6 +272,7 @@ const formatMetaData = (reportMeta: any) => {
 
 const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
   const data = formatData(rawData)
+  console.log(data)
   const meta = formatMetaData(reportMeta)
   const doc = new jsPDF({
     orientation: 'landscape'
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts b/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
index 45fa24f..54f98d0 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
@@ -648,7 +648,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
 const exportDetailToXLSX = (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
-  const worksheet = workbook.addWorksheet(`${reportName}`)
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
 
   setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
   setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts b/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
index ac32735..96ff2ae 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
@@ -719,7 +719,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
 const exportDetailToXLSX = (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
-  const worksheet = workbook.addWorksheet(`${reportName}`)
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
 
   setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
   setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts b/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
index 466bf3b..8a0dbd2 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
@@ -713,7 +713,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
 const exportDetailToXLSX = (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
-  const worksheet = workbook.addWorksheet(`${reportName}`)
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
 
   setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
   setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)

From 527ce9a9a9dcba48dc56ce5327d5e922c44a6fe4 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Sat, 30 Mar 2024 15:09:05 +0700
Subject: [PATCH 9/9] feat: create export pdf and xlsx in detail rekapitulasi
 gangguan koreksi transaksi individual

---
 .../Pages/Gangguan/Rekap/RGangguan_KTI.vue    |  36 +--
 src/report/Gangguan/Rekap/RGangguan_KTI.ts    | 292 +++++++++++++++++-
 2 files changed, 307 insertions(+), 21 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index f44c636..ca39708 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@@ -330,7 +330,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -1119,10 +1119,6 @@ import {
   DxSelection,
   DxSummary
 } from 'devextreme-vue/data-grid'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
@@ -1130,7 +1126,12 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
-import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_KTI'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Gangguan/Rekap/RGangguan_KTI'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -1207,21 +1208,18 @@ const closeDialog = () => {
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+  }
+}
 
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
diff --git a/src/report/Gangguan/Rekap/RGangguan_KTI.ts b/src/report/Gangguan/Rekap/RGangguan_KTI.ts
index 815d720..9755f51 100644
--- a/src/report/Gangguan/Rekap/RGangguan_KTI.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_KTI.ts
@@ -21,6 +21,8 @@ import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber } from '@/utils/numbers'
 
 const reportName = 'Rekapitulasi Koreksi Transaksi Individual'
+const fontSize = 5
+const detailFontSize = 3
 
 const formatData = (rawData: any) => {
   const formattedData: any = []
@@ -125,7 +127,6 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   const doc = new jsPDF({
     orientation: 'landscape'
   })
-  const fontSize = 5
 
   autoTable(doc, {
     head: [
@@ -278,4 +279,291 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
-export { exportToPDF }
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  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: [
+      [
+        'No',
+        'No Laporan',
+        'Tgl Lapor',
+        'Tgl Lapor Sebelum',
+        'Tgl Lapor Koreksi',
+        'Tgl Penugasan Sebelum',
+        'Tgl Penugasan Koreksi',
+        'Tgl Perjalanan Sebelum',
+        'Tgl Perjalanan Koreksi',
+        'Tgl Pengerjaan Sebelum',
+        'Tgl Pengerjaan Koreksi',
+        'Tgl Nyala Sebelum',
+        'Tgl Nyala Koreksi',
+        'Tgl Selesai Sebelum',
+        'Tgl Selesai Koreksi',
+        'Durasi Response Time Sebelum',
+        'Durasi Response Time Koreksi',
+        'Durasi Recovery Time Koreksi',
+        'Kelompok ID Sebelum',
+        'Kelompok ID Koreksi',
+        'Sub Kelompok ID Sebelum',
+        'Sub Kelompok ID Koreksi',
+        'Fasilitas ID Sebelum',
+        'Fasilitas ID Koreksi',
+        'Sub Fasilitas ID Sebelum',
+        'Sub Fasilitas ID Koreksi',
+        'Equipment ID Sebelum',
+        'Equipment ID Koreksi',
+        'Event Damage ID Sebelum',
+        'Event Damage ID Koreksi',
+        'Cause ID Sebelum',
+        'Cause ID Koreksi',
+        'Cause Group ID Sebelum',
+        'Cause Group ID Koreksi',
+        'Weather ID Sebelum',
+        'Weather ID Koreksi',
+        'Group Koreksi',
+        'ALASAN',
+        'IDPEL/NO METER',
+        'Keterangan Pelapor',
+        'Posko',
+        'Tindakan',
+        'Penyebab'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.tgl_lapor,
+      item.tgl_lapor_sblm,
+      item.tgl_lapor_sdh,
+      item.tgl_penugasan_sblm,
+      item.tgl_penugasan_sdh,
+      item.tgl_perjalanan_sblm,
+      item.tgl_perjalanan_sdh,
+      item.tgl_pengerjaan_sblm,
+      item.tgl_pengerjaan_sdh,
+      item.tgl_nyala_sementara_sblm,
+      item.tgl_nyala_sementara_sdh,
+      item.tgl_nyala_sblm,
+      item.tgl_nyala_sdh,
+      item.tgl_selesai_sblm,
+      item.tgl_selesai_sdh,
+      item.durasi_response_time_sblm,
+      item.durasi_response_time_sdh,
+      item.durasi_recovery_time_sdh,
+      item.kelompok_sblm,
+      item.kelompok_sdh,
+      item.sub_kelompok_sblm,
+      item.sub_kelompok_sdh,
+      item.fasilitas_id_sblm,
+      item.fasilitas_id_sdh,
+      item.sub_fasilitas_id_sblm,
+      item.sub_fasilitas_id_sdh,
+      item.equipment_id_sblm,
+      item.equipment_id_sdh,
+      item.event_damage_sblm,
+      item.event_damage_sdh,
+      item.cause_id_sblm,
+      item.cause_id_sdh,
+      item.cause_group_id_sblm,
+      item.cause_group_id_sdh,
+      item.weather_id_sblm,
+      item.weather_id_sdh,
+      item.group_koreksi,
+      item.alasan,
+      item.idpel_no_meter,
+      item.keterangan_pelapor,
+      item.nama_posko,
+      item.tindakan,
+      item.penyebab
+    ]),
+    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: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          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()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `POSKO : ${
+      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:M1')
+  worksheet.mergeCells('A2:M2')
+  worksheet.mergeCells('A3:M3')
+  worksheet.mergeCells('A4:M4')
+  worksheet.mergeCells('A7:M7')
+  worksheet.mergeCells('A8:M8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  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, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    4,
+    8,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('H3:J3')
+  worksheet.mergeCells('H4:J4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }