diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index bd90444..79a78a4 100755
--- a/src/assets/css/style.css
+++ b/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;
 }
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index 3f32559..fb7b7fe 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/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)
   }
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
index f85c5c4..20d7014 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
+++ b/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)
   }
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
index 42a16a9..7d6f44d 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/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)
   }
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
index 4cdd0b6..9a92bcf 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/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)
   }
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
index 24644c1..62e2827 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/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)
   }
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index 0becdc4..57abaa2 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/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)
   }
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
index 4f7ae3b..5ae97ab 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
+++ b/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)
   }
 }
 
diff --git a/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts b/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
index 93e6cad..593a93f 100644
--- a/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
+++ b/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,148 +60,150 @@ const formatData = (rawData: any) => {
     total_recovery_time_kurang_sla: 0
   }
 
-  for (const sub_kelompok of data) {
-    const total: any = {
-      total_laporan: 0,
-      total_laporan_sudah_selesai: 0,
-      total_laporan_belum_selesai: 0,
-      total_response_time_total: 0,
-      total_response_time_rata_rata: [],
-      total_response_time_max: [],
-      total_response_time_min: [],
-      total_response_time_lebih_sla: 0,
-      total_response_time_kurang_sla: 0,
-      total_recovery_time_total: 0,
-      total_recovery_time_rata_rata: [],
-      total_recovery_time_max: [],
-      total_recovery_time_min: [],
-      total_recovery_time_lebih_sla: 0,
-      total_recovery_time_kurang_sla: 0
-    }
-
-    formattedData.push([
-      {
-        content: `${sub_kelompok} (${data[sub_kelompok][0].nama_sub_kelompok})`,
-        colSpan: 20,
-        styles: { fontStyle: 'bold' }
+  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,
+        total_laporan_belum_selesai: 0,
+        total_response_time_total: 0,
+        total_response_time_rata_rata: [],
+        total_response_time_max: [],
+        total_response_time_min: [],
+        total_response_time_lebih_sla: 0,
+        total_response_time_kurang_sla: 0,
+        total_recovery_time_total: 0,
+        total_recovery_time_rata_rata: [],
+        total_recovery_time_max: [],
+        total_recovery_time_min: [],
+        total_recovery_time_lebih_sla: 0,
+        total_recovery_time_kurang_sla: 0
       }
-    ])
 
-    for (let i = 0; i < data[sub_kelompok].length; i++) {
       formattedData.push([
-        { content: i + 1, styles: { halign: 'right' } },
-        data[sub_kelompok][i].kode,
-        data[sub_kelompok][i].jenisGangguan,
-        formatNumber(data[sub_kelompok][i].laporan.total),
-        formatNumber(data[sub_kelompok][i].laporan.sudahSelesai.jml),
-        formatPercentage(
-          !data[sub_kelompok][i].laporan.sudahSelesai.jml || !data[sub_kelompok][i].laporan.total
-            ? '0%'
-            : (data[sub_kelompok][i].laporan.sudahSelesai.jml /
-                data[sub_kelompok][i].laporan.total) *
-                100
-        ),
-        formatNumber(data[sub_kelompok][i].laporan.belumSelesai.jml),
-        formatPercentage(
-          !data[sub_kelompok][i].laporan.belumSelesai.jml || !data[sub_kelompok][i].laporan.total
-            ? '0%'
-            : (data[sub_kelompok][i].laporan.belumSelesai.jml /
-                data[sub_kelompok][i].laporan.total) *
-                100
-        ),
-        formatNumber(data[sub_kelompok][i].responseTime.menit.total),
-        formatNumber(data[sub_kelompok][i].responseTime.menit.rataRata),
-        formatWaktu(data[sub_kelompok][i].responseTime.menit.max),
-        formatWaktu(data[sub_kelompok][i].responseTime.menit.min),
-        formatNumber(data[sub_kelompok][i].responseTime.laporan.lebihSla),
-        formatNumber(data[sub_kelompok][i].responseTime.laporan.kurangSla),
-        formatNumber(data[sub_kelompok][i].recoveryTime.menit.total),
-        formatNumber(data[sub_kelompok][i].recoveryTime.menit.rataRata),
-        formatWaktu(data[sub_kelompok][i].recoveryTime.menit.max),
-        formatWaktu(data[sub_kelompok][i].recoveryTime.menit.min),
-        formatNumber(data[sub_kelompok][i].recoveryTime.laporan.lebihSla),
-        formatNumber(data[sub_kelompok][i].recoveryTime.laporan.kurangSla)
+        {
+          content: `${sub_kelompok} (${data[sub_kelompok][0].nama_sub_kelompok})`,
+          colSpan: 20,
+          styles: { fontStyle: 'bold' }
+        }
       ])
 
-      total.total_laporan += data[sub_kelompok][i].laporan.total
-      total.total_laporan_sudah_selesai += data[sub_kelompok][i].laporan.sudahSelesai.jml
-      total.total_laporan_belum_selesai += data[sub_kelompok][i].laporan.belumSelesai.jml
-      total.total_response_time_total += data[sub_kelompok][i].responseTime.menit.total
-      total.total_response_time_rata_rata.push(data[sub_kelompok][i].responseTime.menit.rataRata)
-      total.total_response_time_max.push(data[sub_kelompok][i].responseTime.menit.max)
-      total.total_response_time_min.push(data[sub_kelompok][i].responseTime.menit.min)
-      total.total_response_time_lebih_sla += data[sub_kelompok][i].responseTime.laporan.lebihSla
-      total.total_response_time_kurang_sla += data[sub_kelompok][i].responseTime.laporan.kurangSla
-      total.total_recovery_time_total += data[sub_kelompok][i].recoveryTime.menit.total
-      total.total_recovery_time_rata_rata.push(data[sub_kelompok][i].recoveryTime.menit.rataRata)
-      total.total_recovery_time_max.push(data[sub_kelompok][i].recoveryTime.menit.max)
-      total.total_recovery_time_min.push(data[sub_kelompok][i].recoveryTime.menit.min)
-      total.total_recovery_time_lebih_sla += data[sub_kelompok][i].recoveryTime.laporan.lebihSla
-      total.total_recovery_time_kurang_sla += data[sub_kelompok][i].recoveryTime.laporan.kurangSla
+      for (let i = 0; i < data[sub_kelompok].length; i++) {
+        formattedData.push([
+          { content: i + 1, styles: { halign: 'right' } },
+          data[sub_kelompok][i].kode,
+          data[sub_kelompok][i].jenisGangguan,
+          formatNumber(data[sub_kelompok][i].laporan.total),
+          formatNumber(data[sub_kelompok][i].laporan.sudahSelesai.jml),
+          formatPercentage(
+            !data[sub_kelompok][i].laporan.sudahSelesai.jml || !data[sub_kelompok][i].laporan.total
+              ? '0%'
+              : (data[sub_kelompok][i].laporan.sudahSelesai.jml /
+                  data[sub_kelompok][i].laporan.total) *
+                  100
+          ),
+          formatNumber(data[sub_kelompok][i].laporan.belumSelesai.jml),
+          formatPercentage(
+            !data[sub_kelompok][i].laporan.belumSelesai.jml || !data[sub_kelompok][i].laporan.total
+              ? '0%'
+              : (data[sub_kelompok][i].laporan.belumSelesai.jml /
+                  data[sub_kelompok][i].laporan.total) *
+                  100
+          ),
+          formatNumber(data[sub_kelompok][i].responseTime.menit.total),
+          formatNumber(data[sub_kelompok][i].responseTime.menit.rataRata),
+          formatWaktu(data[sub_kelompok][i].responseTime.menit.max),
+          formatWaktu(data[sub_kelompok][i].responseTime.menit.min),
+          formatNumber(data[sub_kelompok][i].responseTime.laporan.lebihSla),
+          formatNumber(data[sub_kelompok][i].responseTime.laporan.kurangSla),
+          formatNumber(data[sub_kelompok][i].recoveryTime.menit.total),
+          formatNumber(data[sub_kelompok][i].recoveryTime.menit.rataRata),
+          formatWaktu(data[sub_kelompok][i].recoveryTime.menit.max),
+          formatWaktu(data[sub_kelompok][i].recoveryTime.menit.min),
+          formatNumber(data[sub_kelompok][i].recoveryTime.laporan.lebihSla),
+          formatNumber(data[sub_kelompok][i].recoveryTime.laporan.kurangSla)
+        ])
 
-      grandTotal.total_laporan_sudah_selesai += data[sub_kelompok][i].laporan.sudahSelesai.jml
-      grandTotal.total_laporan += data[sub_kelompok][i].laporan.total
-      grandTotal.total_laporan_belum_selesai += data[sub_kelompok][i].laporan.belumSelesai.jml
-      grandTotal.total_response_time_total += data[sub_kelompok][i].responseTime.menit.total
-      grandTotal.total_response_time_rata_rata.push(
-        data[sub_kelompok][i].responseTime.menit.rataRata
-      )
-      grandTotal.total_response_time_max.push(data[sub_kelompok][i].responseTime.menit.max)
-      grandTotal.total_response_time_min.push(data[sub_kelompok][i].responseTime.menit.min)
-      grandTotal.total_response_time_lebih_sla +=
-        data[sub_kelompok][i].responseTime.laporan.lebihSla
-      grandTotal.total_response_time_kurang_sla +=
-        data[sub_kelompok][i].responseTime.laporan.kurangSla
-      grandTotal.total_recovery_time_total += data[sub_kelompok][i].recoveryTime.menit.total
-      grandTotal.total_recovery_time_rata_rata.push(
-        data[sub_kelompok][i].recoveryTime.menit.rataRata
-      )
-      grandTotal.total_recovery_time_max.push(data[sub_kelompok][i].recoveryTime.menit.max)
-      grandTotal.total_recovery_time_min.push(data[sub_kelompok][i].recoveryTime.menit.min)
-      grandTotal.total_recovery_time_lebih_sla +=
-        data[sub_kelompok][i].recoveryTime.laporan.lebihSla
-      grandTotal.total_recovery_time_kurang_sla +=
-        data[sub_kelompok][i].recoveryTime.laporan.kurangSla
+        total.total_laporan += data[sub_kelompok][i].laporan.total
+        total.total_laporan_sudah_selesai += data[sub_kelompok][i].laporan.sudahSelesai.jml
+        total.total_laporan_belum_selesai += data[sub_kelompok][i].laporan.belumSelesai.jml
+        total.total_response_time_total += data[sub_kelompok][i].responseTime.menit.total
+        total.total_response_time_rata_rata.push(data[sub_kelompok][i].responseTime.menit.rataRata)
+        total.total_response_time_max.push(data[sub_kelompok][i].responseTime.menit.max)
+        total.total_response_time_min.push(data[sub_kelompok][i].responseTime.menit.min)
+        total.total_response_time_lebih_sla += data[sub_kelompok][i].responseTime.laporan.lebihSla
+        total.total_response_time_kurang_sla += data[sub_kelompok][i].responseTime.laporan.kurangSla
+        total.total_recovery_time_total += data[sub_kelompok][i].recoveryTime.menit.total
+        total.total_recovery_time_rata_rata.push(data[sub_kelompok][i].recoveryTime.menit.rataRata)
+        total.total_recovery_time_max.push(data[sub_kelompok][i].recoveryTime.menit.max)
+        total.total_recovery_time_min.push(data[sub_kelompok][i].recoveryTime.menit.min)
+        total.total_recovery_time_lebih_sla += data[sub_kelompok][i].recoveryTime.laporan.lebihSla
+        total.total_recovery_time_kurang_sla += data[sub_kelompok][i].recoveryTime.laporan.kurangSla
+
+        grandTotal.total_laporan_sudah_selesai += data[sub_kelompok][i].laporan.sudahSelesai.jml
+        grandTotal.total_laporan += data[sub_kelompok][i].laporan.total
+        grandTotal.total_laporan_belum_selesai += data[sub_kelompok][i].laporan.belumSelesai.jml
+        grandTotal.total_response_time_total += data[sub_kelompok][i].responseTime.menit.total
+        grandTotal.total_response_time_rata_rata.push(
+          data[sub_kelompok][i].responseTime.menit.rataRata
+        )
+        grandTotal.total_response_time_max.push(data[sub_kelompok][i].responseTime.menit.max)
+        grandTotal.total_response_time_min.push(data[sub_kelompok][i].responseTime.menit.min)
+        grandTotal.total_response_time_lebih_sla +=
+          data[sub_kelompok][i].responseTime.laporan.lebihSla
+        grandTotal.total_response_time_kurang_sla +=
+          data[sub_kelompok][i].responseTime.laporan.kurangSla
+        grandTotal.total_recovery_time_total += data[sub_kelompok][i].recoveryTime.menit.total
+        grandTotal.total_recovery_time_rata_rata.push(
+          data[sub_kelompok][i].recoveryTime.menit.rataRata
+        )
+        grandTotal.total_recovery_time_max.push(data[sub_kelompok][i].recoveryTime.menit.max)
+        grandTotal.total_recovery_time_min.push(data[sub_kelompok][i].recoveryTime.menit.min)
+        grandTotal.total_recovery_time_lebih_sla +=
+          data[sub_kelompok][i].recoveryTime.laporan.lebihSla
+        grandTotal.total_recovery_time_kurang_sla +=
+          data[sub_kelompok][i].recoveryTime.laporan.kurangSla
+      }
+
+      formattedData.push([
+        { content: 'TOTAL', colSpan: 3, styles: { fontStyle: 'bold' } },
+        formatNumber(total.total_laporan),
+        formatNumber(total.total_laporan_sudah_selesai),
+        formatPercentage(
+          !total.total_laporan_sudah_selesai || !total.total_laporan
+            ? '0%'
+            : (total.total_laporan_sudah_selesai / total.total_laporan) * 100
+        ),
+        formatNumber(total.total_laporan_belum_selesai),
+        formatPercentage(
+          !total.total_laporan_belum_selesai || !total.total_laporan
+            ? '0%'
+            : (total.total_laporan_belum_selesai / total.total_laporan) * 100
+        ),
+        formatNumber(total.total_response_time_total),
+        formatNumber(
+          total.total_response_time_rata_rata.length
+            ? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
+                total.total_response_time_rata_rata.length
+            : 0
+        ),
+        formatWaktu(Math.max(...total.total_response_time_max)),
+        formatWaktu(Math.min(...total.total_response_time_min)),
+        formatNumber(total.total_response_time_lebih_sla),
+        formatNumber(total.total_response_time_kurang_sla),
+        formatNumber(total.total_recovery_time_total),
+        formatNumber(
+          total.total_recovery_time_rata_rata.length
+            ? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
+                total.total_recovery_time_rata_rata.length
+            : 0
+        ),
+        formatWaktu(Math.max(...total.total_recovery_time_max)),
+        formatWaktu(Math.min(...total.total_recovery_time_min)),
+        formatNumber(total.total_recovery_time_lebih_sla),
+        formatNumber(total.total_recovery_time_kurang_sla)
+      ])
     }
-
-    formattedData.push([
-      { content: 'TOTAL', colSpan: 3, styles: { fontStyle: 'bold' } },
-      formatNumber(total.total_laporan),
-      formatNumber(total.total_laporan_sudah_selesai),
-      formatPercentage(
-        !total.total_laporan_sudah_selesai || !total.total_laporan
-          ? '0%'
-          : (total.total_laporan_sudah_selesai / total.total_laporan) * 100
-      ),
-      formatNumber(total.total_laporan_belum_selesai),
-      formatPercentage(
-        !total.total_laporan_belum_selesai || !total.total_laporan
-          ? '0%'
-          : (total.total_laporan_belum_selesai / total.total_laporan) * 100
-      ),
-      formatNumber(total.total_response_time_total),
-      formatNumber(
-        total.total_response_time_rata_rata.length
-          ? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
-              total.total_response_time_rata_rata.length
-          : 0
-      ),
-      formatWaktu(Math.max(...total.total_response_time_max)),
-      formatWaktu(Math.min(...total.total_response_time_min)),
-      formatNumber(total.total_response_time_lebih_sla),
-      formatNumber(total.total_response_time_kurang_sla),
-      formatNumber(total.total_recovery_time_total),
-      formatNumber(
-        total.total_recovery_time_rata_rata.length
-          ? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
-              total.total_recovery_time_rata_rata.length
-          : 0
-      ),
-      formatWaktu(Math.max(...total.total_recovery_time_max)),
-      formatWaktu(Math.min(...total.total_recovery_time_min)),
-      formatNumber(total.total_recovery_time_lebih_sla),
-      formatNumber(total.total_recovery_time_kurang_sla)
-    ])
   }
 
   formattedData.push([
diff --git a/src/report/Keluhan/Rekap/RKeluhan_ALL.ts b/src/report/Keluhan/Rekap/RKeluhan_ALL.ts
index 5975f41..09085b0 100644
--- a/src/report/Keluhan/Rekap/RKeluhan_ALL.ts
+++ b/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
+}
diff --git a/src/report/Keluhan/Rekap/RKeluhan_BerdasarMedia.ts b/src/report/Keluhan/Rekap/RKeluhan_BerdasarMedia.ts
index 2654886..1f02fcb 100644
--- a/src/report/Keluhan/Rekap/RKeluhan_BerdasarMedia.ts
+++ b/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_recovery_time,
+      item.durasi_response_time ? formatWaktu(item.durasi_response_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
+}
diff --git a/src/report/Keluhan/Rekap/RKeluhan_PerFungsiBidang.ts b/src/report/Keluhan/Rekap/RKeluhan_PerFungsiBidang.ts
index b82669d..13f8432 100644
--- a/src/report/Keluhan/Rekap/RKeluhan_PerFungsiBidang.ts
+++ b/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_recovery_time,
+      item.durasi_response_time ? formatWaktu(item.durasi_response_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
+}
diff --git a/src/report/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.ts b/src/report/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.ts
index 000d401..b07e6b2 100644
--- a/src/report/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.ts
+++ b/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_recovery_time,
+      item.durasi_response_time ? formatWaktu(item.durasi_response_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
+}
diff --git a/src/report/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.ts b/src/report/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.ts
index 169c4e2..deff4f9 100644
--- a/src/report/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.ts
+++ b/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_recovery_time,
+      item.durasi_response_time ? formatWaktu(item.durasi_response_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
+}
diff --git a/src/report/Keluhan/Rekap/RKeluhan_PerTanggal.ts b/src/report/Keluhan/Rekap/RKeluhan_PerTanggal.ts
index 6149313..eca8657 100644
--- a/src/report/Keluhan/Rekap/RKeluhan_PerTanggal.ts
+++ b/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_recovery_time,
+      item.durasi_response_time ? formatWaktu(item.durasi_response_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
+}
diff --git a/src/report/Keluhan/Rekap/RKeluhan_PerUnit.ts b/src/report/Keluhan/Rekap/RKeluhan_PerUnit.ts
index d7ce089..3654bb7 100644
--- a/src/report/Keluhan/Rekap/RKeluhan_PerUnit.ts
+++ b/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_recovery_time,
+      item.durasi_response_time ? formatWaktu(item.durasi_response_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
+}
diff --git a/src/report/Keluhan/Rekap/doc/RKeluhan_ALL.ts b/src/report/Keluhan/Rekap/doc/RKeluhan_ALL.ts
new file mode 100644
index 0000000..bc286d4
--- /dev/null
+++ b/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)
+}
diff --git a/src/report/Keluhan/Rekap/doc/RKeluhan_BerdasarMedia.ts b/src/report/Keluhan/Rekap/doc/RKeluhan_BerdasarMedia.ts
new file mode 100644
index 0000000..0fd992d
--- /dev/null
+++ b/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)
+}
diff --git a/src/report/Keluhan/Rekap/doc/RKeluhan_PerFungsiBidang.ts b/src/report/Keluhan/Rekap/doc/RKeluhan_PerFungsiBidang.ts
new file mode 100644
index 0000000..4fa1fdb
--- /dev/null
+++ b/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)
+}
diff --git a/src/report/Keluhan/Rekap/doc/RKeluhan_PerJenisKeluhan.ts b/src/report/Keluhan/Rekap/doc/RKeluhan_PerJenisKeluhan.ts
new file mode 100644
index 0000000..0cb232f
--- /dev/null
+++ b/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)
+}
diff --git a/src/report/Keluhan/Rekap/doc/RKeluhan_PerKelompokKeluhan.ts b/src/report/Keluhan/Rekap/doc/RKeluhan_PerKelompokKeluhan.ts
new file mode 100644
index 0000000..9c4e1ba
--- /dev/null
+++ b/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)
+}
diff --git a/src/report/Keluhan/Rekap/doc/RKeluhan_PerTanggal.ts b/src/report/Keluhan/Rekap/doc/RKeluhan_PerTanggal.ts
new file mode 100644
index 0000000..df5d5ce
--- /dev/null
+++ b/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)
+}
diff --git a/src/report/Keluhan/Rekap/doc/RKeluhan_PerUnit.ts b/src/report/Keluhan/Rekap/doc/RKeluhan_PerUnit.ts
new file mode 100644
index 0000000..05291c5
--- /dev/null
+++ b/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)
+}