create export doc in anomali

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

@@ -855,7 +855,11 @@ import {
 import { computed, ref } from 'vue'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { exportToPDF, exportToXLSX } from '@/report/Anomali/Gangguan/Anomali_LAPPGP_LPP'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportToDOCX
+} from '@/report/Anomali/Gangguan/Anomali_LAPPGP_LPP'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
@@ -969,6 +973,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 

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

@@ -490,7 +490,11 @@ import {
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
-import { exportToPDF, exportToXLSX } from '@/report/Anomali/Gangguan/Anomali_LAPPGP_LPT'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportToDOCX
+} from '@/report/Anomali/Gangguan/Anomali_LAPPGP_LPT'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -601,6 +605,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 

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

@@ -126,7 +126,11 @@ import {
 import { computed, ref } from 'vue'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { exportToPDF, exportToXLSX } from '@/report/Anomali/Gangguan/Anomali_LAPPGU_LPP'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportToDOCX
+} from '@/report/Anomali/Gangguan/Anomali_LAPPGU_LPP'
 
 const props = defineProps({
   data: Array as () => any[],
@@ -157,6 +161,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 

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

@@ -1071,7 +1071,9 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Anomali/Gangguan/Anomali_LAPPGU_LPT'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
@@ -1193,6 +1195,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -1202,6 +1205,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 

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

@@ -127,7 +127,11 @@ import {
 import { computed, ref } from 'vue'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { exportToPDF, exportToXLSX } from '@/report/Anomali/Keluhan/Anomali_LAPPKU_LPP'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportToDOCX
+} from '@/report/Anomali/Keluhan/Anomali_LAPPKU_LPP'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -147,10 +151,11 @@ const reportMeta = ref<any>(computed(() => props.filters))
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
-    exportToPDF(reportMeta.value, data.value, true)
+    exportToPDF(reportMeta.value, data.value)
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 const dataGridRef = ref<DxDataGrid | null>(null)

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

@@ -758,7 +758,9 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Anomali/Keluhan/Anomali_LAPPKU_LPT'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
@@ -865,6 +867,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -892,6 +895,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 

src/report/Anomali/Gangguan/Anomali_LAPPGP_LPP.ts

@@ -18,8 +18,9 @@ import autoTable from 'jspdf-autotable'
 import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { exportToWord } from './doc/Anomali_LAPPGP_LPP'
 
-const reportName = 'Laporan Anomali Penanganan Pengaduan Gangguan Petugas'
+const reportName = 'Anomali Penanganan Pengaduan Gangguan Petugas'
 const fontSize = 5
 
 const formatData = (rawData: any) => {
@@ -322,4 +323,9 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportToWord(reportMeta, meta, formatData(rawData), reportName)
+}
+
+export { exportToPDF, exportToXLSX, exportToDOCX }

src/report/Anomali/Gangguan/Anomali_LAPPGP_LPT.ts

@@ -16,11 +16,11 @@ import { saveAs } from 'file-saver'
 import { jsPDF } from 'jspdf'
 import autoTable from 'jspdf-autotable'
 import { Workbook } from 'exceljs'
-import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { exportToWord } from './doc/Anomali_LAPPGP_LPT'
 
-const reportName = 'Laporan Anomali Penanganan Pengaduan Gangguan Petugas'
+const reportName = 'Anomali Penanganan Pengaduan Gangguan Petugas'
 const fontSize = 5
 
 const formatData = (rawData: any) => {
@@ -417,4 +417,9 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportToWord(reportMeta, meta, formatData(rawData), reportName)
+}
+
+export { exportToPDF, exportToXLSX, exportToDOCX }

src/report/Anomali/Gangguan/Anomali_LAPPGU_LPP.ts

@@ -18,8 +18,9 @@ import autoTable from 'jspdf-autotable'
 import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { exportToWord } from './doc/Anomali_LAPPGU_LPP'
 
-const reportName = 'Laporan Anomali Penanganan Pengaduan Gangguan Unit'
+const reportName = 'Anomali Penanganan Pengaduan Gangguan Unit'
 const fontSize = 5
 
 const formatData = (rawData: any) => {
@@ -289,4 +290,9 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportToWord(reportMeta, meta, formatData(rawData), reportName)
+}
+
+export { exportToPDF, exportToXLSX, exportToDOCX }

src/report/Anomali/Gangguan/Anomali_LAPPGU_LPT.ts

@@ -1,17 +1,4 @@
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import {
-  Document,
-  AlignmentType,
-  Packer,
-  Paragraph,
-  Table,
-  TableCell,
-  TableRow,
-  VerticalAlign,
-  TextRun,
-  WidthType,
-  PageOrientation
-} from 'docx'
 import { saveAs } from 'file-saver'
 import { jsPDF } from 'jspdf'
 import autoTable from 'jspdf-autotable'
@@ -19,8 +6,9 @@ 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/Anomali_LAPPGU_LPT'
 
-const reportName = 'Laporan Anomali Penanganan Pengaduan Gangguan Unit'
+const reportName = 'Anomali Penanganan Pengaduan Gangguan Unit'
 const fontSize = 5
 const detailFontSize = 3
 
@@ -651,4 +639,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/Anomali/Gangguan/doc/Anomali_LAPPGP_LPP.ts

@@ -0,0 +1,176 @@
+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 || 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>
+          <tr>
+            <td><h6>JENIS LAPORAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${rawMeta.jenisLaporan.name.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">Nama Unit</th>
+            <th rowspan="3">Nama Petugas</th>
+            <th>Total WO</th>
+            <th colspan="3">Total Pengaduan Yang Diselesaikan Secara Anomali</th>
+            <th colspan="3">% Pengaduan Diselesaikan Secara Anomali</th>
+          </tr>
+          <tr>
+            <th>(PLN Mobile, CC123, DLL)</th>
+            <th>PLN Mobile</th>
+            <th>CC 123</th>
+            <th>Total</th>
+            <th>PLN Mobile</th>
+            <th>CC 123</th>
+            <th>Total</th>
+          </tr>
+          <tr>
+            <th>a</th>
+            <th>b</th>
+            <th>c</th>
+            <th>d=b+c</th>
+            <th>e=b/a</th>
+            <th>f=c/a</th>
+            <th>g=e+f</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)
+}

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

@@ -0,0 +1,188 @@
+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 || 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>
+          <tr>
+            <td><h6>JENIS LAPORAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${rawMeta.jenisLaporan.name.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="4">Nama Unit</th>
+            <th>Total Petugas</th>
+            <th colspan="6">Total Petugas Yang Pengaduan Diselesaikan Secara Anomali</th>
+            <th colspan="6">% Petugas Yang Pengaduan Diselesaikan Secara Anomali</th>
+          </tr>
+          <tr>
+            <th rowspan="3">a</th>
+            <th colspan="2">PLN Mobile</th>
+            <th colspan="2">CC 123</th>
+            <th colspan="2">Total</th>
+            <th colspan="2">PLN Mobile</th>
+            <th colspan="2">CC 123</th>
+            <th colspan="2">Total</th>
+          </tr>
+          <tr>
+            <th colspan="2">b</th>
+            <th colspan="2">c</th>
+            <th colspan="2">d=b+c</th>
+            <th colspan="2">e=b/a</th>
+            <th colspan="2">f=c/a</th>
+            <th colspan="2">g=e+f</th>
+          </tr>
+          <tr>
+            <th>Marking</th>
+            <th>Non Marking</th>
+            <th>Marking</th>
+            <th>Non Marking</th>
+            <th>Marking</th>
+            <th>Non Marking</th>
+            <th>Marking</th>
+            <th>Non Marking</th>
+            <th>Marking</th>
+            <th>Non Marking</th>
+            <th>Marking</th>
+            <th>Non Marking</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)
+}

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

@@ -0,0 +1,162 @@
+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 || 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>
+          <tr>
+            <td><h6>JENIS LAPORAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${rawMeta.jenisLaporan.name.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">Nama Unit</th>
+            <th>Total WO PLN Mobile</th>
+            <th>Total Pengaduan Yang Diselesaikan Secara Anomali</th>
+            <th>% Pengaduan Yang Diselesaikan Secara Anomali</th>
+          </tr>
+          <tr>
+            <td>a</td>
+            <td>b</td>
+            <td>c=b/a</td>
+          </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)
+}

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

@@ -0,0 +1,352 @@
+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 || 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>
+          <tr>
+            <td><h6>JENIS LAPORAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${rawMeta.jenisLaporan.name.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="4">Nama Unit</th>
+            <th colspan="5">Total WO</th>
+            <th colspan="6">Total Pengaduan Yang Diselesaikan Secara Anomali</th>
+            <th colspan="6">% Pengaduan Yang Diselesaikan Secara Anomali</th>
+          </tr>
+          <tr>
+            <th>CC 123</th>
+            <th>PLN Mobile</th>
+            <th>Loket</th>
+            <th>Lainnya</th>
+            <th>Total</th>
+            <th colspan="2">PLN Mobile</th>
+            <th colspan="2">CC 123</th>
+            <th colspan="2">Total</th>
+            <th colspan="2">PLN Mobile</th>
+            <th colspan="2">CC 123</th>
+            <th colspan="2">Total</th>
+          </tr>
+          <tr>
+            <th rowspan="2">a</th>
+            <th rowspan="2">b</th>
+            <th rowspan="2">c</th>
+            <th rowspan="2">d</th>
+            <th rowspan="2">e=a+b+c+d</th>
+            <th colspan="2">f</th>
+            <th colspan="2">g</th>
+            <th colspan="2">h=f+g</th>
+            <th colspan="2">i=f/e</th>
+            <th colspan="2">j=g/e</th>
+            <th colspan="2">k=i+j</th>
+          </tr>
+          <tr>
+            <th>Marking</th>
+            <th>Non Marking</th>
+            <th>Marking</th>
+            <th>Non Marking</th>
+            <th>Marking</th>
+            <th>Non Marking</th>
+            <th>Marking</th>
+            <th>Non Marking</th>
+            <th>Marking</th>
+            <th>Non Marking</th>
+            <th>Marking</th>
+            <th>Non Marking</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: 5px;
+        }
+
+        table.main thead tr {
+          background-color: #c0c0c0;
+        }
+      </style>
+    </head>
+    <body>
+  `
+
+  const body = `
+    <div class=Section1>
+      <header>
+        <h6>PT. PLN(Persero)</h6>
+        <br>
+        <table width="100%">
+          <tr>
+            <th><h6>${'DAFTAR DETAIL ' + reportName.toUpperCase()}</h6></th>
+          </tr>
+          <tr>
+            <th><h6>${`PERIODE TANGGAL : ${formattedMeta.dateFromFormat} SD TGL ${formattedMeta.dateToFormat}`}</h6></th>
+          </tr>
+        </table>
+      </header>
+
+      <br>
+
+      <table border="1" class="main">
+        <thead>
+          <tr>
+            <th>No</th>
+            <th>UIW/D</th>
+            <th>UP3</th>
+            <th>Rayon</th>
+            <th>No Laporan</th>
+            <th>No Laporan Referensi</th>
+            <th>Tgl/Jam Lapor</th>
+            <th>Tgl/Jam Datang</th>
+            <th>Tgl/Jam Nyala</th>
+            <th>Durasi Response Time</th>
+            <th>Durasi Recovery Time</th>
+            <th>Durasi Penugasan Regu</th>
+            <th>Durasi Perjalanan Regu</th>
+            <th>Jarak Closing</th>
+            <th>Dispacth Oleh</th>
+            <th>IDPEL/NO METER</th>
+            <th>Nama Pelapor</th>
+            <th>Alamat Pelapor</th>
+            <th>No Telp Pelapor</th>
+            <th>Keterangan Pelapor</th>
+            <th>Sumber Lapor</th>
+            <th>Diselesaikan Oleh</th>
+            <th>Status</th>
+            <th>Status Induk</th>
+            <th>Referensi Marking Induk</th>
+            <th>Kode Gangguan</th>
+            <th>Jenis Gangguan</th>
+            <th>Penyebab</th>
+            <th>Tindakan</th>          
+          </tr>
+        </thead>
+        <tbody>
+          ${rawData
+            .map(
+              (item: any, i: any) => `
+                <tr>
+                  <td>${i + 1}</td>
+                  <td>${item.nama_uid}</td>
+                  <td>${item.nama_up3}</td>
+                  <td>${item.nama_ulp}</td>
+                  <td>${item.no_laporan}</td>
+                  <td>${item.no_laporan_referensi}</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.durasi_dispatch_time ? formatWaktu(item.durasi_dispatch_time) : '-'}</td>
+                  <td>${item.durasi_perjalanan ? formatWaktu(item.durasi_perjalanan) : '-'}</td>
+                  <td>${item.distance}</td>
+                  <td>${item.dispatch_by}</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.media}</td>
+                  <td>${item.diselesaikan_oleh}</td>
+                  <td>${item.status_akhir}</td>
+                  <td>${item.status_induk}</td>
+                  <td>${item.referensi_marking_induk}</td>
+                  <td>${item.kode_gangguan}</td>
+                  <td>${item.jenis_gangguan}</td>
+                  <td>${item.penyebab}</td>
+                  <td>${item.tindakan}</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/Anomali/Keluhan/Anomali_LAPPKU_LPP.ts

@@ -18,8 +18,9 @@ import autoTable from 'jspdf-autotable'
 import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { exportToWord } from './doc/Anomali_LAPPKU_LPP'
 
-const reportName = 'Laporan Anomali Penanganan Pengaduan Keluhan Unit'
+const reportName = 'Anomali Penanganan Pengaduan Keluhan Unit'
 const fontSize = 5
 
 const formatData = (rawData: any) => {
@@ -41,7 +42,6 @@ const formatData = (rawData: any) => {
     'Semua Unit',
     formatNumber(total.wo_pln_mobile),
     formatNumber(total.total_anomali),
-    formatPercentage(persen_anomali),
     formatPercentage(!persen_anomali || !isFinite(persen_anomali) ? 0 : persen_anomali)
   ])
 
@@ -287,4 +287,9 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportToWord(reportMeta, meta, formatData(rawData), reportName)
+}
+
+export { exportToPDF, exportToXLSX, exportToDOCX }

src/report/Anomali/Keluhan/Anomali_LAPPKU_LPT.ts

@@ -19,8 +19,9 @@ 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/Anomali_LAPPKU_LPT'
 
-const reportName = 'Laporan Anomali Penanganan Pengaduan Keluhan Unit'
+const reportName = 'Anomali Penanganan Pengaduan Keluhan Unit'
 const fontSize = 5
 const detailFontSize = 5
 
@@ -510,4 +511,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/Anomali/Keluhan/doc/Anomali_LAPPKU_LPP.ts

@@ -0,0 +1,162 @@
+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 || 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>
+          <tr>
+            <td><h6>JENIS LAPORAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${rawMeta.jenisLaporan.name.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">Nama Unit</th>
+            <th>Total WO PLN Mobile</th>
+            <th>Total Pengaduan Yang Diselesaikan Secara Anomali</th>
+            <th>% Pengaduan Yang Diselesaikan Secara Anomali</th>
+          </tr>
+          <tr>
+            <td>a</td>
+            <td>b</td>
+            <td>c=b/a</td>
+          </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)
+}

src/report/Anomali/Keluhan/doc/Anomali_LAPPKU_LPT.ts

@@ -0,0 +1,318 @@
+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 || 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>
+          <tr>
+            <td><h6>JENIS LAPORAN</h6></td>
+            <td><h6>:</h6></td>
+            <td><h6>${rawMeta.jenisLaporan.name.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">Nama Unit</th>
+            <th colspan="5">Total WO</th>
+            <th colspan="3">Total Pengaduan Yang Diselesaikan Secara Anomali</th>
+            <th colspan="3">% Pengaduan Yang Diselesaikan Secara Anomali</th>
+          </tr>
+          <tr>
+            <th>CC 123</th>
+            <th>PLN Mobile</th>
+            <th>Loket</th>
+            <th>Lainnya</th>
+            <th>Total</th>
+            <th>PLN Mobile</th>
+            <th>CC 123</th>
+            <th>Total</th>
+            <th>PLN Mobile</th>
+            <th>CC 123</th>
+            <th>Total</th>
+          </tr>
+          <tr>
+            <td>a</td>
+            <td>b</td>
+            <td>c</td>
+            <td>d</td>
+            <td>e=a+b+c+d</td>
+            <td>f</td>
+            <td>g</td>
+            <td>h=f+g</td>
+            <td>i=f/e</td>
+            <td>j=g/e</td>
+            <td>k=i+j</td>
+          </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: 5px;
+        }
+
+        table.main thead tr {
+          background-color: #c0c0c0;
+        }
+      </style>
+    </head>
+    <body>
+  `
+
+  const body = `
+    <div class=Section1>
+      <header>
+        <h6>PT. PLN(Persero)</h6>
+        <br>
+        <table width="100%">
+          <tr>
+            <th><h6>${'DAFTAR DETAIL ' + reportName.toUpperCase()}</h6></th>
+          </tr>
+          <tr>
+            <th><h6>${`PERIODE TANGGAL : ${formattedMeta.dateFromFormat} SD TGL ${formattedMeta.dateToFormat}`}</h6></th>
+          </tr>
+        </table>
+      </header>
+
+      <br>
+
+      <table border="1" class="main">
+        <thead>
+          <tr>
+            <th>No</th>
+            <th>UIW/D</th>
+            <th>UP3</th>
+            <th>Rayon</th>
+            <th>No Laporan</th>
+            <th>No Laporan Referensi</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>Uraian</th>
+            <th>Response Pelanggan</th>          
+          </tr>
+        </thead>
+        <tbody>
+          ${rawData
+            .map(
+              (item: any, i: any) => `
+                <tr>
+                  <td>${i + 1}</td>
+                  <td>${item.nama_uid}</td>
+                  <td>${item.nama_up3}</td>
+                  <td>${item.nama_ulp}</td>
+                  <td>${item.no_laporan}</td>
+                  <td>${item.referensi_marking}</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.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/Cico/doc/LaporanCICO.ts

@@ -1,5 +1,3 @@
-import { formatWaktu } from '@/components/Form/FiltersType/reference'
-
 export const exportToWord = (
   rawMeta: any,
   formattedMeta: any,