create export doc rekapitulasi keluhan

src/assets/css/style.css

@@ -1073,6 +1073,10 @@ body {
   visibility: hidden;
 }
 
+.collapse {
+  visibility: collapse;
+}
+
 .static {
   position: static;
 }
@@ -1895,6 +1899,10 @@ body {
   table-layout: fixed;
 }
 
+.border-collapse {
+  border-collapse: collapse;
+}
+
 .origin-top-left {
   transform-origin: top left;
 }

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

@@ -758,7 +758,9 @@ import {
   exportToPDF,
   exportDetailToPDF,
   exportToXLSX,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Keluhan/Rekap/RKeluhan_ALL'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
@@ -995,6 +997,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -1004,6 +1007,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 

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

@@ -478,7 +478,9 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Keluhan/Rekap/RKeluhan_BerdasarMedia'
 
 const client = apolloClient()
@@ -615,6 +617,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -624,6 +627,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 

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

@@ -799,7 +799,9 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Keluhan/Rekap/RKeluhan_PerFungsiBidang'
 
 const client = apolloClient()
@@ -951,6 +953,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -960,6 +963,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 

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

@@ -943,7 +943,9 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Keluhan/Rekap/RKeluhan_PerJenisKeluhan'
 
 const client = apolloClient()
@@ -1081,6 +1083,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -1090,6 +1093,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 

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

@@ -805,7 +805,9 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan'
 
 const client = apolloClient()
@@ -952,6 +954,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -961,6 +964,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 

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

@@ -808,7 +808,9 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Keluhan/Rekap/RKeluhan_PerTanggal'
 
 const client = apolloClient()
@@ -950,6 +952,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -959,6 +962,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 

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

@@ -938,7 +938,9 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Keluhan/Rekap/RKeluhan_PerUnit'
 
 const client = apolloClient()
@@ -1078,6 +1080,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -1087,6 +1090,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 

src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts

@@ -40,6 +40,7 @@ const groupingData = (data: any) => {
 
 const formatData = (rawData: any) => {
   const data = groupingData(rawData)
+  console.log(data)
   const formattedData: any = []
   const grandTotal: any = {
     total_laporan: 0,
@@ -59,7 +60,8 @@ const formatData = (rawData: any) => {
     total_recovery_time_kurang_sla: 0
   }
 
-  for (const sub_kelompok of data) {
+  for (const sub_kelompok of Object.keys(data)) {
+    if (Object.prototype.hasOwnProperty.call(data, sub_kelompok)) {
       const total: any = {
         total_laporan: 0,
         total_laporan_sudah_selesai: 0,
@@ -202,6 +204,7 @@ const formatData = (rawData: any) => {
         formatNumber(total.total_recovery_time_kurang_sla)
       ])
     }
+  }
 
   formattedData.push([
     { content: 'GRAND TOTAL', colSpan: 3, styles: { fontStyle: 'bold' } },

src/report/Keluhan/Rekap/RKeluhan_ALL.ts

@@ -19,6 +19,7 @@ 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, exportDetailToWord } from './doc/RKeluhan_ALL'
 
 const reportName = 'Rekapitulasi Keluhan All'
 const fontSize = 5
@@ -240,6 +241,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'
@@ -646,4 +648,21 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportToWord(reportMeta, meta, formatData(rawData), reportName)
+}
+
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportDetailToWord(meta, rawData, reportName)
+}
+
+export {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
+}

src/report/Keluhan/Rekap/RKeluhan_BerdasarMedia.ts

@@ -18,6 +18,8 @@ import autoTable from 'jspdf-autotable'
 import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber } from '@/utils/numbers'
+import { exportToWord, exportDetailToWord } from './doc/RKeluhan_BerdasarMedia'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 
 const reportName = 'Rekapitulasi Keluhan Berdasarkan Media'
 const fontSize = 5
@@ -348,8 +350,8 @@ const exportDetailToPDF = (reportMeta: any, rawData: any) => {
       item.waktu_lapor,
       item.waktu_response,
       item.waktu_recovery,
-      item.durasi_response_time,
+      item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-',
-      item.durasi_recovery_time,
+      item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-',
       item.status_akhir,
       item.idpel_nometer,
       item.nama_pelapor,
@@ -526,4 +528,21 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportToWord(reportMeta, meta, formatData(rawData), reportName)
+}
+
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportDetailToWord(meta, rawData, reportName)
+}
+
+export {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
+}

src/report/Keluhan/Rekap/RKeluhan_PerFungsiBidang.ts

@@ -19,6 +19,7 @@ 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, exportDetailToWord } from './doc/RKeluhan_PerFungsiBidang'
 
 const reportName = 'Rekapitulasi Keluhan Per Fungsi Bidang'
 const fontSize = 5
@@ -576,8 +577,8 @@ const exportDetailToPDF = (reportMeta: any, rawData: any) => {
       item.waktu_lapor,
       '',
       '',
-      item.durasi_response_time,
+      item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-',
-      item.durasi_recovery_time,
+      item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-',
       '',
       item.idpel_nometer,
       item.nama_pelapor,
@@ -754,4 +755,21 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportToWord(reportMeta, meta, formatData(rawData, reportMeta.groupBy), reportName)
+}
+
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportDetailToWord(meta, rawData, reportName)
+}
+
+export {
+  exportToPDF,
+  exportDetailToPDF,
+  exportToXLSX,
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
+}

src/report/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.ts

@@ -19,6 +19,7 @@ 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, exportDetailToWord } from './doc/RKeluhan_PerJenisKeluhan'
 
 const reportName = 'Rekapitulasi Keluhan Per Jenis Keluhan'
 const fontSize = 5
@@ -549,8 +550,8 @@ const exportDetailToPDF = (reportMeta: any, rawData: any) => {
       item.waktu_lapor,
       item.waktu_response,
       item.waktu_recovery,
-      item.durasi_response_time,
+      item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-',
-      item.durasi_recovery_time,
+      item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-',
       item.status_akhir,
       item.idpel_nometer,
       item.nama_pelapor,
@@ -727,4 +728,21 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportToWord(reportMeta, meta, formatData(rawData), reportName)
+}
+
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportDetailToWord(meta, rawData, reportName)
+}
+
+export {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
+}

src/report/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.ts

@@ -19,6 +19,7 @@ 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, exportDetailToWord } from './doc/RKeluhan_PerKelompokKeluhan'
 
 const reportName = 'Rekapitulasi Keluhan Per Kelompok Keluhan'
 const fontSize = 5
@@ -576,8 +577,8 @@ const exportDetailToPDF = (reportMeta: any, rawData: any) => {
       item.waktu_lapor,
       item.waktu_response,
       item.waktu_recovery,
-      item.durasi_response_time,
+      item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-',
-      item.durasi_recovery_time,
+      item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-',
       item.status_akhir,
       item.idpel_nometer,
       item.nama_pelapor,
@@ -754,4 +755,21 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportToWord(reportMeta, meta, formatData(rawData, reportMeta.groupBy), reportName)
+}
+
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportDetailToWord(meta, rawData, reportName)
+}
+
+export {
+  exportToPDF,
+  exportDetailToPDF,
+  exportToXLSX,
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
+}

src/report/Keluhan/Rekap/RKeluhan_PerTanggal.ts

@@ -19,6 +19,7 @@ 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, exportDetailToWord } from './doc/RKeluhan_PerTanggal'
 
 const reportName = 'Rekapitulasi Keluhan Per Tanggal'
 const fontSize = 5
@@ -576,8 +577,8 @@ const exportDetailToPDF = (reportMeta: any, rawData: any) => {
       item.waktu_lapor,
       item.waktu_response,
       item.waktu_recovery,
-      item.durasi_response_time,
+      item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-',
-      item.durasi_recovery_time,
+      item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-',
       item.status_akhir,
       item.idpel_nometer,
       item.nama_pelapor,
@@ -754,4 +755,21 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportToWord(reportMeta, meta, formatData(rawData, reportMeta.groupBy), reportName)
+}
+
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportDetailToWord(meta, rawData, reportName)
+}
+
+export {
+  exportToPDF,
+  exportDetailToPDF,
+  exportToXLSX,
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
+}

src/report/Keluhan/Rekap/RKeluhan_PerUnit.ts

@@ -19,6 +19,7 @@ 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, exportDetailToWord } from './doc/RKeluhan_PerUnit'
 
 const reportName = 'Rekapitulasi Keluhan Per Unit'
 const fontSize = 5
@@ -526,8 +527,8 @@ const exportDetailToPDF = (reportMeta: any, rawData: any) => {
       item.waktu_lapor,
       item.waktu_response,
       item.waktu_recovery,
-      item.durasi_response_time,
+      item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-',
-      item.durasi_recovery_time,
+      item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-',
       item.status_akhir,
       item.idpel_nometer,
       item.nama_pelapor,
@@ -693,4 +694,21 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportToWord(reportMeta, meta, formatData(rawData), reportName)
+}
+
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportDetailToWord(meta, rawData, reportName)
+}
+
+export {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
+}

src/report/Keluhan/Rekap/doc/RKeluhan_ALL.ts

@@ -0,0 +1,298 @@
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+
+export const exportToWord = (
+  rawMeta: any,
+  formattedMeta: any,
+  rawData: any,
+  reportName: String
+) => {
+  const filename = 'Laporan ' + reportName + '.doc'
+
+  let tbody = ''
+
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index]
+
+    let column = `<tr>`
+    let styleTotal = ''
+
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i]
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content.content === 'TOTAL') {
+        styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
+      }
+
+      i === 0
+        ? (column += `<th ${styleTotal} ${colSpan} align="left">${content.content}</th>`)
+        : (column += `<td ${styleTotal}>${content}</td>`)
+    }
+
+    column += `</tr>`
+    tbody += column
+  }
+
+  let 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>${reportName}</title>
+      <style type="text/css" media="print">
+        @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          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: 8px;
+        }
+
+        table.main thead tr {
+          background-color: #c0c0c0;
+        }
+      </style>
+    </head>
+    <body>
+  `
+
+  const body = `
+    <div class=Section1>
+      <header>
+        <h6>PT. PLN(Persero)</h6>
+
+        <table class="meta">
+          <tr>
+            <td><h6>UNIT INDUK</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.uid
+                ? rawMeta.uid.name.toUpperCase()
+                : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+            }</h6></td>
+          </tr>
+          <tr>
+            <td><h6>UNIT PELAKSANA PELAYANAN PELANGGAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.up3
+                ? rawMeta.up3.name.toUpperCase()
+                : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+            }</h6></td>
+          </tr>
+          <tr>
+            <td><h6>UNIT LAYANAN PELANGGAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.ulp
+                ? rawMeta.ulp.name.toUpperCase()
+                : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+            }</h6></td>
+          </tr>
+        </table>
+
+        <br>
+        <br>
+        
+        <table width="100%">
+          <tr>
+            <th><h6>${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>
+            <th rowspan="2">No</th>
+            <th rowspan="2">Nama Unit</th>
+            <th colspan="10">Response Time</th>
+            <th colspan="5">Penyelesaian</th>
+          </tr> 
+          <tr>
+            <th>Total</th>
+            <th>Selesai</th>
+            <th>%</th>
+            <th>InProses</th>
+            <th>%</th>
+            <th>Rata-Rata</th>
+            <th>Max</th>
+            <th>Min</th>
+            <th>>SLA</th>
+            <th><SLA</th>
+            <th>Rata-Rata</th>
+            <th>Max</th>
+            <th>Min</th>
+            <th>>SLA</th>
+            <th><SLA</th>
+          </tr>
+        </thead>
+        <tbody>${tbody}</tbody>
+      </table>
+      <br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${formattedMeta.dayTo}, ${formattedMeta.dateToFormat}</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)
+}
+
+export const exportDetailToWord = (formattedMeta: any, rawData: any, reportName: String) => {
+  const filename = 'Laporan Detail ' + reportName + '.doc'
+
+  let 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: 8px;
+        }
+
+        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>
+            <th>No</th>
+            <th>No Laporan</th>
+            <th>Tgl Lapor</th>
+            <th>Dalam Proses Bidang</th>
+            <th>Selesai Bidang Unit</th>
+            <th>Durasi Response Time</th>
+            <th>Durasi Recovery Time</th>
+            <th>Status</th>
+            <th>IDPEL/NO METER</th>
+            <th>Nama Pelapor</th>
+            <th>Alamat Pelapor</th>
+            <th>No Telp Pelapor</th>
+            <th>Keterangan Pelapor</th>
+            <th>Rayon</th>
+            <th>Uraian</th>
+            <th>Response Pelanggan</th>          
+          </tr>
+        </thead>
+        <tbody>
+          ${rawData
+            .map(
+              (item: any, i: any) => `
+                <tr>
+                  <td>${i + 1}</td>
+                  <td>${item.no_laporan}</td>
+                  <td>${item.waktu_lapor}</td>
+                  <td>${item.waktu_response}</td>
+                  <td>${item.waktu_recovery}</td>
+                  <td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-'}</td>
+                  <td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-'}</td>
+                  <td>${item.status_akhir}</td>
+                  <td>${item.idpel_nometer}</td>
+                  <td>${item.nama_pelapor}</td>
+                  <td>${item.alamat_pelapor}</td>
+                  <td>${item.no_telp_pelapor}</td>
+                  <td>${item.keterangan_pelapor}</td>
+                  <td>${item.nama_ulp}</td>
+                  <td>${item.uraian}</td>
+                  <td>${item.respon_pelanggan}</td>
+                </tr>
+              `
+            )
+            .join('')}
+        </tbody>
+      </table>
+      <br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${formattedMeta.dayTo}, ${formattedMeta.dateToFormat}</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/Keluhan/Rekap/doc/RKeluhan_BerdasarMedia.ts

@@ -0,0 +1,288 @@
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+
+export const exportToWord = (
+  rawMeta: any,
+  formattedMeta: any,
+  rawData: any,
+  reportName: String
+) => {
+  const filename = 'Laporan ' + reportName + '.doc'
+
+  let tbody = ''
+
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index]
+
+    let column = `<tr>`
+    let styleTotal = ''
+
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i]
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
+        styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
+      }
+
+      i === 0
+        ? (column += `<th ${styleTotal} ${colSpan} align="left">${content.content}</th>`)
+        : (column += `<td ${styleTotal}>${content}</td>`)
+    }
+
+    column += `</tr>`
+    tbody += column
+  }
+
+  let columnTanggal = ''
+  for (let i = 1; i <= 31; i++) {
+    columnTanggal += `<td>${i}</td>`
+  }
+
+  let 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>${reportName}</title>
+      <style type="text/css" media="print">
+        @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          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: 8px;
+        }
+
+        table.main thead tr {
+          background-color: #c0c0c0;
+        }
+      </style>
+    </head>
+    <body>
+  `
+
+  const body = `
+    <div class=Section1>
+      <header>
+        <h6>PT. PLN(Persero)</h6>
+
+        <table class="meta">
+          <tr>
+            <td><h6>UNIT INDUK</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.uid
+                ? rawMeta.uid.name.toUpperCase()
+                : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+            }</h6></td>
+          </tr>
+          <tr>
+            <td><h6>UNIT PELAKSANA PELAYANAN PELANGGAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.up3
+                ? rawMeta.up3.name.toUpperCase()
+                : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+            }</h6></td>
+          </tr>
+          <tr>
+            <td><h6>UNIT LAYANAN PELANGGAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.ulp
+                ? rawMeta.ulp.name.toUpperCase()
+                : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+            }</h6></td>
+          </tr>
+        </table>
+
+        <br>
+        <br>
+        
+        <table width="100%">
+          <tr>
+            <th><h6>${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>
+            <th rowspan="2">No</th>
+            <th rowspan="2">Nama Media</th>
+            <th colspan="31">Tanggal</th>
+          </tr>
+          <tr>
+            ${columnTanggal}
+          </tr>
+        </thead>
+        <tbody>${tbody}</tbody>
+      </table>
+      <br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${formattedMeta.dayTo}, ${formattedMeta.dateToFormat}</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)
+}
+
+export const exportDetailToWord = (formattedMeta: any, rawData: any, reportName: String) => {
+  const filename = 'Laporan Detail ' + reportName + '.doc'
+
+  let 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: 8px;
+        }
+
+        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>
+            <th>No</th>
+            <th>No Laporan</th>
+            <th>Tgl Lapor</th>
+            <th>Dalam Proses Bidang</th>
+            <th>Selesai Bidang Unit</th>
+            <th>Durasi Response Time</th>
+            <th>Durasi Recovery Time</th>
+            <th>Status</th>
+            <th>IDPEL/NO METER</th>
+            <th>Nama Pelapor</th>
+            <th>Alamat Pelapor</th>
+            <th>No Telp Pelapor</th>
+            <th>Keterangan Pelapor</th>
+            <th>Rayon</th>
+            <th>Uraian</th>
+            <th>Response Pelanggan</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${rawData
+            .map(
+              (item: any, i: any) => `
+                <tr>
+                  <td>${i + 1}</td>
+                  <td>${item.no_laporan}</td>
+                  <td>${item.waktu_lapor}</td>
+                  <td>${item.waktu_response}</td>
+                  <td>${item.waktu_recovery}</td>
+                  <td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-'}</td>
+                  <td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-'}</td>
+                  <td>${item.status_akhir}</td>
+                  <td>${item.idpel_nometer}</td>
+                  <td>${item.nama_pelapor}</td>
+                  <td>${item.alamat_pelapor}</td>
+                  <td>${item.no_telp_pelapor}</td>
+                  <td>${item.keterangan_pelapor}</td>
+                  <td>${item.nama_ulp}</td>
+                  <td>${item.uraian}</td>
+                  <td>${item.respon_pelanggan}</td>
+                </tr>
+              `
+            )
+            .join('')}
+        </tbody>
+      </table>
+      <br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${formattedMeta.dayTo}, ${formattedMeta.dateToFormat}</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/Keluhan/Rekap/doc/RKeluhan_PerFungsiBidang.ts

@@ -0,0 +1,303 @@
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+
+export const exportToWord = (
+  rawMeta: any,
+  formattedMeta: any,
+  rawData: any,
+  reportName: String
+) => {
+  const filename = 'Laporan ' + reportName + '.doc'
+
+  let tbody = ''
+
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index]
+
+    let column = `<tr>`
+    let styleTotal = ''
+
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i]
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
+        styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
+      }
+
+      i === 0
+        ? (column += `<th ${styleTotal} ${colSpan} align="left">${content.content}</th>`)
+        : (column += `<td ${styleTotal}>${content}</td>`)
+    }
+
+    column += `</tr>`
+    tbody += column
+  }
+
+  let 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>${reportName}</title>
+      <style type="text/css" media="print">
+        @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          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: 8px;
+        }
+
+        table.main thead tr {
+          background-color: #c0c0c0;
+        }
+      </style>
+    </head>
+    <body>
+  `
+
+  const body = `
+    <div class=Section1>
+      <header>
+        <h6>PT. PLN(Persero)</h6>
+
+        <table class="meta">
+          <tr>
+            <td><h6>UNIT INDUK</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.uid
+                ? rawMeta.uid.name.toUpperCase()
+                : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+            }</h6></td>
+          </tr>
+          <tr>
+            <td><h6>UNIT PELAKSANA PELAYANAN PELANGGAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.up3
+                ? rawMeta.up3.name.toUpperCase()
+                : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+            }</h6></td>
+          </tr>
+          <tr>
+            <td><h6>UNIT LAYANAN PELANGGAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.ulp
+                ? rawMeta.ulp.name.toUpperCase()
+                : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+            }</h6></td>
+          </tr>
+        </table>
+
+        <br>
+        <br>
+        
+        <table width="100%">
+          <tr>
+            <th><h6>${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>
+            <th rowspan="3">No</th>
+            <th rowspan="3">Fungsi Bidang</th>
+            <th colspan="5">Laporan</th>
+            <th colspan="6">Response Time</th>
+            <th colspan="6">Penyelesaian</th>
+          </tr>
+          <tr>
+            <th rowspan="2">Total</th>
+            <th rowspan="2">%</th>
+            <th rowspan="2">Total</th>
+            <th rowspan="2">%</th>
+            <th rowspan="2">Hari</th>
+            <th colspan="4">Laporan</th>
+            <th rowspan="2">Hari</th>
+            <th colspan="4">Laporan</th>
+          </tr>
+          <tr>
+            <th>Rata-Rata</th>
+            <th>Max</th>
+            <th>Min</th>
+            <th>>Sla</th>
+            <th><Sla</th>
+            <th>Total</th>
+            <th>Rata-Rata</th>
+            <th>Max</th>
+            <th>Min</th>
+            <th>>Sla</th>
+            <th><Sla</th>
+          </tr>
+        </thead>
+        <tbody>${tbody}</tbody>
+      </table>
+      <br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${formattedMeta.dayTo}, ${formattedMeta.dateToFormat}</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)
+}
+
+export const exportDetailToWord = (formattedMeta: any, rawData: any, reportName: String) => {
+  const filename = 'Laporan Detail ' + reportName + '.doc'
+
+  let 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: 8px;
+        }
+
+        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>
+            <th>No</th>
+            <th>No Laporan</th>
+            <th>Tgl Lapor</th>
+            <th>Dalam Proses Bidang</th>
+            <th>Selesai Bidang Unit</th>
+            <th>Durasi Response Time</th>
+            <th>Durasi Recovery Time</th>
+            <th>Status</th>
+            <th>IDPEL/NO METER</th>
+            <th>Nama Pelapor</th>
+            <th>Alamat Pelapor</th>
+            <th>No Telp Pelapor</th>
+            <th>Keterangan Pelapor</th>
+            <th>Rayon</th>
+            <th>Uraian</th>
+            <th>Response Pelanggan</th>          
+          </tr>
+        </thead>
+        <tbody>
+          ${rawData.map(
+            (item: any, i: any) => `
+              <tr>
+                <td>${i + 1}</td>
+                <td>${item.no_laporan}</td>
+                <td>${item.waktu_lapor}</td>
+                <td></td>
+                <td></td>
+                <td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-'}</td>
+                <td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-'}</td>
+                <td></td>
+                <td>${item.idpel_nometer}</td>
+                <td>${item.nama_pelapor}</td>
+                <td>${item.alamat_pelapor}</td>
+                <td>${item.no_telp_pelapor}</td>
+                <td>${item.keterangan_pelapor}</td>
+                <td></td>
+                <td></td>
+                <td></td>
+              </tr>
+            `
+          )}
+        </tbody>
+      </table>
+      <br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${formattedMeta.dayTo}, ${formattedMeta.dateToFormat}</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/Keluhan/Rekap/doc/RKeluhan_PerJenisKeluhan.ts

@@ -0,0 +1,307 @@
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+
+export const exportToWord = (
+  rawMeta: any,
+  formattedMeta: any,
+  rawData: any,
+  reportName: String
+) => {
+  const filename = 'Laporan ' + reportName + '.doc'
+
+  let tbody = ''
+
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index]
+
+    let column = `<tr>`
+    let styleTotal = ''
+
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i]
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
+        styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
+      }
+
+      i === 0
+        ? (column += `<th ${styleTotal} ${colSpan} align="left">${content.content}</th>`)
+        : (column += `<td ${styleTotal}>${content}</td>`)
+    }
+
+    column += `</tr>`
+    tbody += column
+  }
+
+  let 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>${reportName}</title>
+      <style type="text/css" media="print">
+        @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          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: 8px;
+        }
+
+        table.main thead tr {
+          background-color: #c0c0c0;
+        }
+      </style>
+    </head>
+    <body>
+  `
+
+  const body = `
+    <div class=Section1>
+      <header>
+        <h6>PT. PLN(Persero)</h6>
+
+        <table class="meta">
+          <tr>
+            <td><h6>UNIT INDUK</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.uid
+                ? rawMeta.uid.name.toUpperCase()
+                : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+            }</h6></td>
+          </tr>
+          <tr>
+            <td><h6>UNIT PELAKSANA PELAYANAN PELANGGAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.up3
+                ? rawMeta.up3.name.toUpperCase()
+                : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+            }</h6></td>
+          </tr>
+          <tr>
+            <td><h6>UNIT LAYANAN PELANGGAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.ulp
+                ? rawMeta.ulp.name.toUpperCase()
+                : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+            }</h6></td>
+          </tr>
+        </table>
+
+        <br>
+        <br>
+        
+        <table width="100%">
+          <tr>
+            <th><h6>${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>
+            <th rowspan="3">No</th>
+            <th rowspan="3">Jenis Keluhan</th>
+            <th colspan="5">Laporan</th>
+            <th colspan="6">Response Time</th>
+            <th colspan="6">Penyelesaian</th>
+          </tr>
+          <tr>
+            <th rowspan="2">Total</th>
+            <th colspan="2">Sudah Selesai</th>
+            <th colspan="2">Belum Selesai</th>
+            <th colspan="4">Hari</th>
+            <th colspan="2">Laporan</th>
+            <th colspan="4">Hari</th>
+            <th colspan="2">Laporan</th>
+          </tr>
+          <tr>
+            <th>Jml</th>
+            <th>%</th>
+            <th>Jml</th>
+            <th>%</th>
+            <th>Total</th>
+            <th>Rata-Rata</th>
+            <th>Max</th>
+            <th>Min</th>
+            <th>>Sla</th>
+            <th><Sla</th>
+            <th>Total</th>
+            <th>Rata-Rata</th>
+            <th>Max</th>
+            <th>Min</th>
+            <th>>Sla</th>
+            <th><Sla</th>
+          </tr>
+        </thead>
+        <tbody>${tbody}</tbody>
+      </table>
+      <br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${formattedMeta.dayTo}, ${formattedMeta.dateToFormat}</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)
+}
+
+export const exportDetailToWord = (formattedMeta: any, rawData: any, reportName: String) => {
+  const filename = 'Laporan Detail ' + reportName + '.doc'
+
+  let 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: 8px;
+        }
+
+        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>
+            <th>No</th>
+            <th>No Laporan</th>
+            <th>Tgl Lapor</th>
+            <th>Dalam Proses Bidang</th>
+            <th>Selesai Bidang Unit</th>
+            <th>Durasi Response Time</th>
+            <th>Durasi Recovery Time</th>
+            <th>Status</th>
+            <th>IDPEL/NO METER</th>
+            <th>Nama Pelapor</th>
+            <th>Alamat Pelapor</th>
+            <th>No Telp Pelapor</th>
+            <th>Keterangan Pelapor</th>
+            <th>Rayon</th>
+            <th>Uraian</th>
+            <th>Response Pelanggan</th>          
+          </tr>
+        </thead>
+        <tbody>
+          ${rawData.map(
+            (item: any, i: any) => `
+              <tr>
+                <td>${i + 1}</td>
+                <td>${item.no_laporan}</td>
+                <td>${item.waktu_lapor}</td>
+                <td>${item.waktu_response}</td>
+                <td>${item.waktu_recovery}</td>
+                <td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-'}</td>
+                <td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-'}</td>
+                <td>${item.status_akhir}</td>
+                <td>${item.idpel_nometer}</td>
+                <td>${item.nama_pelapor}</td>
+                <td>${item.alamat_pelapor}</td>
+                <td>${item.no_telp_pelapor}</td>
+                <td>${item.keterangan_pelapor}</td>
+                <td>${item.nama_ulp}</td>
+                <td>${item.uraian}</td>
+                <td>${item.respon_pelanggan}</td>
+              </tr>
+            `
+          )}
+        </tbody>
+      </table>
+      <br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${formattedMeta.dayTo}, ${formattedMeta.dateToFormat}</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/Keluhan/Rekap/doc/RKeluhan_PerKelompokKeluhan.ts

@@ -0,0 +1,309 @@
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+
+export const exportToWord = (
+  rawMeta: any,
+  formattedMeta: any,
+  rawData: any,
+  reportName: String
+) => {
+  const filename = 'Laporan ' + reportName + '.doc'
+
+  let tbody = ''
+
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index]
+
+    let column = `<tr>`
+    let styleTotal = ''
+
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i]
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
+        styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
+      }
+
+      i === 0
+        ? (column += `<th ${styleTotal} ${colSpan} align="left">${content.content}</th>`)
+        : (column += `<td ${styleTotal}>${content}</td>`)
+    }
+
+    column += `</tr>`
+    tbody += column
+  }
+
+  let 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>${reportName}</title>
+      <style type="text/css" media="print">
+        @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          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: 8px;
+        }
+
+        table.main thead tr {
+          background-color: #c0c0c0;
+        }
+      </style>
+    </head>
+    <body>
+  `
+
+  const body = `
+    <div class=Section1>
+      <header>
+        <h6>PT. PLN(Persero)</h6>
+
+        <table class="meta">
+          <tr>
+            <td><h6>UNIT INDUK</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.uid
+                ? rawMeta.uid.name.toUpperCase()
+                : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+            }</h6></td>
+          </tr>
+          <tr>
+            <td><h6>UNIT PELAKSANA PELAYANAN PELANGGAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.up3
+                ? rawMeta.up3.name.toUpperCase()
+                : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+            }</h6></td>
+          </tr>
+          <tr>
+            <td><h6>UNIT LAYANAN PELANGGAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.ulp
+                ? rawMeta.ulp.name.toUpperCase()
+                : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+            }</h6></td>
+          </tr>
+        </table>
+
+        <br>
+        <br>
+        
+        <table width="100%">
+          <tr>
+            <th><h6>${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>
+            <th rowspan="3">No</th>
+            <th rowspan="3">Kelompok Keluhan</th>
+            <th colspan="5">Laporan</th>
+            <th colspan="6">Response Time</th>
+            <th colspan="6">Penyelesaian</th>
+          </tr>
+          <tr>
+            <th rowspan="2">Total</th>
+            <th colspan="2">Sudah Selesai</th>
+            <th colspan="2">Belum Selesai</th>
+            <th colspan="4">Hari</th>
+            <th colspan="2">Laporan</th>
+            <th colspan="4">Hari</th>
+            <th colspan="2">Laporan</th>
+          </tr>
+          <tr>
+            <th>Jml</th>
+            <th>%</th>
+            <th>Jml</th>
+            <th>%</th>
+            <th>Total</th>
+            <th>Rata-Rata</th>
+            <th>Max</th>
+            <th>Min</th>
+            <th>>Sla</th>
+            <th><Sla</th>
+            <th>Total</th>
+            <th>Rata-Rata</th>
+            <th>Max</th>
+            <th>Min</th>
+            <th>>Sla</th>
+            <th><Sla</th>
+          </tr>
+        </thead>
+        <tbody>${tbody}</tbody>
+      </table>
+      <br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${formattedMeta.dayTo}, ${formattedMeta.dateToFormat}</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)
+}
+
+export const exportDetailToWord = (formattedMeta: any, rawData: any, reportName: String) => {
+  const filename = 'Laporan Detail ' + reportName + '.doc'
+
+  let 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: 8px;
+        }
+
+        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>
+            <th>No</th>
+            <th>No Laporan</th>
+            <th>Tgl Lapor</th>
+            <th>Dalam Proses Bidang</th>
+            <th>Selesai Bidang Unit</th>
+            <th>Durasi Response Time</th>
+            <th>Durasi Recovery Time</th>
+            <th>Status</th>
+            <th>IDPEL/NO METER</th>
+            <th>Nama Pelapor</th>
+            <th>Alamat Pelapor</th>
+            <th>No Telp Pelapor</th>
+            <th>Keterangan Pelapor</th>
+            <th>Rayon</th>
+            <th>Uraian</th>
+            <th>Response Pelanggan</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${rawData
+            .map(
+              (item: any, i: any) => `
+                <tr>
+                  <td>${i + 1}</td>
+                  <td>${item.no_laporan}</td>
+                  <td>${item.waktu_lapor}</td>
+                  <td>${item.waktu_response}</td>
+                  <td>${item.waktu_recovery}</td>
+                  <td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-'}</td>
+                  <td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-'}</td>
+                  <td>${item.status_akhir}</td>
+                  <td>${item.idpel_nometer}</td>
+                  <td>${item.nama_pelapor}</td>
+                  <td>${item.alamat_pelapor}</td>
+                  <td>${item.no_telp_pelapor}</td>
+                  <td>${item.keterangan_pelapor}</td>
+                  <td>${item.nama_ulp}</td>
+                  <td>${item.uraian}</td>
+                  <td>${item.respon_pelanggan}</td>
+                </tr>
+              `
+            )
+            .join('')}
+        </tbody>
+      </table>
+      <br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${formattedMeta.dayTo}, ${formattedMeta.dateToFormat}</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/Keluhan/Rekap/doc/RKeluhan_PerTanggal.ts

@@ -0,0 +1,309 @@
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+
+export const exportToWord = (
+  rawMeta: any,
+  formattedMeta: any,
+  rawData: any,
+  reportName: String
+) => {
+  const filename = 'Laporan ' + reportName + '.doc'
+
+  let tbody = ''
+
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index]
+
+    let column = `<tr>`
+    let styleTotal = ''
+
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i]
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
+        styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
+      }
+
+      i === 0
+        ? (column += `<th ${styleTotal} ${colSpan} align="left">${content.content}</th>`)
+        : (column += `<td ${styleTotal}>${content}</td>`)
+    }
+
+    column += `</tr>`
+    tbody += column
+  }
+
+  let 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>${reportName}</title>
+      <style type="text/css" media="print">
+        @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          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: 8px;
+        }
+
+        table.main thead tr {
+          background-color: #c0c0c0;
+        }
+      </style>
+    </head>
+    <body>
+  `
+
+  const body = `
+    <div class=Section1>
+      <header>
+        <h6>PT. PLN(Persero)</h6>
+
+        <table class="meta">
+          <tr>
+            <td><h6>UNIT INDUK</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.uid
+                ? rawMeta.uid.name.toUpperCase()
+                : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+            }</h6></td>
+          </tr>
+          <tr>
+            <td><h6>UNIT PELAKSANA PELAYANAN PELANGGAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.up3
+                ? rawMeta.up3.name.toUpperCase()
+                : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+            }</h6></td>
+          </tr>
+          <tr>
+            <td><h6>UNIT LAYANAN PELANGGAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.ulp
+                ? rawMeta.ulp.name.toUpperCase()
+                : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+            }</h6></td>
+          </tr>
+        </table>
+
+        <br>
+        <br>
+        
+        <table width="100%">
+          <tr>
+            <th><h6>${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>
+            <th rowspan="3">No</th>
+            <th rowspan="3">Tanggal Lapor</th>
+            <th colspan="5">Laporan</th>
+            <th colspan="6">Response Time</th>
+            <th colspan="6">Penyelesaian</th>
+          </tr>
+          <tr>
+            <th rowspan="2">Total</th>
+            <th colspan="2">Sudah Selesai</th>
+            <th colspan="2">Belum Selesai</th>
+            <th colspan="4">Hari</th>
+            <th colspan="2">Laporan</th>
+            <th colspan="4">Hari</th>
+            <th colspan="2">Laporan</th>
+          </tr>
+          <tr>
+            <th>Jml</th>
+            <th>%</th>
+            <th>Jml</th>
+            <th>%</th>
+            <th>Total</th>
+            <th>Rata-Rata</th>
+            <th>Max</th>
+            <th>Min</th>
+            <th>>Sla</th>
+            <th><Sla</th>
+            <th>Total</th>
+            <th>Rata-Rata</th>
+            <th>Max</th>
+            <th>Min</th>
+            <th>>Sla</th>
+            <th><Sla</th>
+          </tr>
+        </thead>
+        <tbody>${tbody}</tbody>
+      </table>
+      <br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${formattedMeta.dayTo}, ${formattedMeta.dateToFormat}</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)
+}
+
+export const exportDetailToWord = (formattedMeta: any, rawData: any, reportName: String) => {
+  const filename = 'Laporan Detail ' + reportName + '.doc'
+
+  let 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: 8px;
+        }
+
+        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>
+            <th>No</th>
+            <th>No Laporan</th>
+            <th>Tgl Lapor</th>
+            <th>Dalam Proses Bidang</th>
+            <th>Selesai Bidang Unit</th>
+            <th>Durasi Response Time</th>
+            <th>Durasi Recovery Time</th>
+            <th>Status</th>
+            <th>IDPEL/NO METER</th>
+            <th>Nama Pelapor</th>
+            <th>Alamat Pelapor</th>
+            <th>No Telp Pelapor</th>
+            <th>Keterangan Pelapor</th>
+            <th>Rayon</th>
+            <th>Uraian</th>
+            <th>Response Pelanggan</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${rawData
+            .map(
+              (item: any, i: any) => `
+                <tr>
+                  <td>${i + 1}</td>
+                  <td>${item.no_laporan}</td>
+                  <td>${item.waktu_lapor}</td>
+                  <td>${item.waktu_response}</td>
+                  <td>${item.waktu_recovery}</td>
+                  <td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-'}</td>
+                  <td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-'}</td>
+                  <td>${item.status_akhir}</td>
+                  <td>${item.idpel_nometer}</td>
+                  <td>${item.nama_pelapor}</td>
+                  <td>${item.alamat_pelapor}</td>
+                  <td>${item.no_telp_pelapor}</td>
+                  <td>${item.keterangan_pelapor}</td>
+                  <td>${item.nama_ulp}</td>
+                  <td>${item.uraian}</td>
+                  <td>${item.respon_pelanggan}</td>
+                </tr>
+              `
+            )
+            .join('')}
+        </tbody>
+      </table>
+      <br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${formattedMeta.dayTo}, ${formattedMeta.dateToFormat}</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/Keluhan/Rekap/doc/RKeluhan_PerUnit.ts

@@ -0,0 +1,300 @@
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+
+export const exportToWord = (
+  rawMeta: any,
+  formattedMeta: any,
+  rawData: any,
+  reportName: String
+) => {
+  const filename = 'Laporan ' + reportName + '.doc'
+
+  let tbody = ''
+
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index]
+
+    let column = `<tr>`
+    let styleTotal = ''
+
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i]
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
+        styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
+      }
+
+      i === 0
+        ? (column += `<th ${styleTotal} ${colSpan} align="left">${content.content}</th>`)
+        : (column += `<td ${styleTotal}>${content}</td>`)
+    }
+
+    column += `</tr>`
+    tbody += column
+  }
+
+  let 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>${reportName}</title>
+      <style type="text/css" media="print">
+        @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          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: 8px;
+        }
+
+        table.main thead tr {
+          background-color: #c0c0c0;
+        }
+      </style>
+    </head>
+    <body>
+  `
+
+  const body = `
+    <div class=Section1>
+      <header>
+        <h6>PT. PLN(Persero)</h6>
+
+        <table class="meta">
+          <tr>
+            <td><h6>UNIT INDUK</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.uid
+                ? rawMeta.uid.name.toUpperCase()
+                : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+            }</h6></td>
+          </tr>
+          <tr>
+            <td><h6>UNIT PELAKSANA PELAYANAN PELANGGAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${
+              rawMeta.up3
+                ? rawMeta.up3.name.toUpperCase()
+                : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+            }</h6></td>
+          </tr>
+        </table>
+
+        <br>
+        <br>
+        
+        <table width="100%">
+          <tr>
+            <th><h6>${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>
+            <th rowspan="3">No</th>
+            <th rowspan="3">Unit</th>
+            <th colspan="5">Laporan</th>
+            <th colspan="6">Response Time</th>
+            <th colspan="6">Penyelesaian</th>
+          </tr>
+          <tr>
+            <th rowspan="2">Total</th>
+            <th colspan="2">Sudah Selesai</th>
+            <th colspan="2">Belum Selesai</th>
+            <th colspan="4">Hari</th>
+            <th colspan="2">Laporan</th>
+            <th colspan="4">Hari</th>
+            <th colspan="2">Laporan</th>
+          </tr>
+          <tr>
+            <th>Jml</th>
+            <th>%</th>
+            <th>Jml</th>
+            <th>%</th>
+            <th>Total</th>
+            <th>Rata-Rata</th>
+            <th>Max</th>
+            <th>Min</th>
+            <th>&gt;Sla</th>
+            <th>&lt;Sla</th>
+            <th>Total</th>
+            <th>Rata-Rata</th>
+            <th>Max</th>
+            <th>Min</th>
+            <th>&gt;Sla</th>
+            <th>&lt;Sla</th>
+          </tr>
+        </thead>
+        <tbody>${tbody}</tbody>
+      </table>
+      <br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${formattedMeta.dayTo}, ${formattedMeta.dateToFormat}</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)
+}
+
+export const exportDetailToWord = (formattedMeta: any, rawData: any, reportName: String) => {
+  const filename = 'Laporan Detail ' + reportName + '.doc'
+
+  let 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: 8px;
+        }
+
+        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>
+            <th>No</th>
+            <th>No Laporan</th>
+            <th>Tgl Lapor</th>
+            <th>Dalam Proses Bidang</th>
+            <th>Selesai Bidang Unit</th>
+            <th>Durasi Response Time</th>
+            <th>Durasi Recovery Time</th>
+            <th>Status</th>
+            <th>IDPEL/NO METER</th>
+            <th>Nama Pelapor</th>
+            <th>Alamat Pelapor</th>
+            <th>No Telp Pelapor</th>
+            <th>Keterangan Pelapor</th>
+            <th>Rayon</th>
+            <th>Uraian</th>
+            <th>Response Pelanggan</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${rawData
+            .map(
+              (item: any, i: any) => `
+                <tr>
+                  <td>${i + 1}</td>
+                  <td>${item.no_laporan}</td>
+                  <td>${item.waktu_lapor}</td>
+                  <td>${item.waktu_response}</td>
+                  <td>${item.waktu_recovery}</td>
+                  <td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-'}</td>
+                  <td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-'}</td>
+                  <td>${item.status_akhir}</td>
+                  <td>${item.idpel_nometer}</td>
+                  <td>${item.nama_pelapor}</td>
+                  <td>${item.alamat_pelapor}</td>
+                  <td>${item.no_telp_pelapor}</td>
+                  <td>${item.keterangan_pelapor}</td>
+                  <td>${item.nama_ulp}</td>
+                  <td>${item.uraian}</td>
+                  <td>${item.respon_pelanggan}</td>
+                </tr>
+              `
+            )
+            .join('')}
+        </tbody>
+      </table>
+      <br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${formattedMeta.dayTo}, ${formattedMeta.dateToFormat}</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)
+}