diff --git a/src/components/Pages/Material/Daftar/Material_DGMYG.vue b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
index f868180..bdc98ac 100755
--- a/src/components/Pages/Material/Daftar/Material_DGMYG.vue
+++ b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
@@ -4,137 +4,43 @@
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
-      <DxPager
-        :visible="true"
-        :allowed-page-sizes="[20, 50, 100]"
-        display-mode="full"
-        :show-page-size-selector="true"
-        :show-info="true"
-        :show-navigation-buttons="true"
-      />
+      <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full" :show-page-size-selector="true"
+        :show-info="true" :show-navigation-buttons="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="50"
-        alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
-        data-type="number"
-        caption="No"
-        cell-template="formatNumber"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
+        cell-template="formatNumber" />
 
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="no_laporan"
-        caption="Nomor Gangguan"
-        cell-template="formatText"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="nama_pelapor"
-        caption="Nama Pelanggan"
-        cell-template="formatText"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="300"
-        alignment="center"
-        data-field="keterangan_pelapor"
-        caption="Isi Laporan"
-        cell-template="formatText"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="300"
-        alignment="center"
-        data-field="penyebab"
-        caption="Penyebab Gangguan"
-        cell-template="formatText"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="waktu_lapor"
-        caption="Tgl Padam"
-        cell-template="formatText"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="waktu_recovery"
-        caption="Tgl Nyala"
-        cell-template="formatText"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="regu"
-        caption="Regu"
-        cell-template="formatText"
-      />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="no_laporan"
+        caption="Nomor Gangguan" cell-template="formatText" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_pelapor"
+        caption="Nama Pelanggan" cell-template="formatText" />
+      <DxColumn css-class="custom-table-column" :width="300" alignment="center" data-field="keterangan_pelapor"
+        caption="Isi Laporan" cell-template="formatText" />
+      <DxColumn css-class="custom-table-column" :width="300" alignment="center" data-field="penyebab"
+        caption="Penyebab Gangguan" cell-template="formatText" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="waktu_lapor"
+        caption="Tgl Padam" cell-template="formatText" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="waktu_recovery"
+        caption="Tgl Nyala" cell-template="formatText" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="regu" caption="Regu"
+        cell-template="formatText" />
       <DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
-        <DxColumn
-          css-class="custom-table-column"
-          :width="170"
-          alignment="center"
-          data-field="media"
-          caption="Sumber"
-          cell-template="formatText"
-        />
-        <DxColumn
-          css-class="custom-table-column"
-          :width="170"
-          alignment="center"
-          data-field="nama_material"
-          caption="Nama"
-          cell-template="formatText"
-        />
-        <DxColumn
-          css-class="custom-table-column"
-          :width="170"
-          alignment="center"
-          data-field="satuan_material"
-          caption="Satuan"
-          cell-template="formatText"
-        />
-        <DxColumn
-          css-class="custom-table-column"
-          :width="170"
-          alignment="center"
-          data-field="volume_material"
-          caption="Vol"
-          cell-template="formatText"
-        />
+        <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="media" caption="Sumber"
+          cell-template="formatText" />
+        <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_material"
+          caption="Nama" cell-template="formatText" />
+        <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="satuan_material"
+          caption="Satuan" cell-template="formatText" />
+        <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="volume_material"
+          caption="Vol" cell-template="formatText" />
       </DxColumn>
 
       <template #formatText="{ data }">
@@ -146,12 +52,12 @@
       <template #formatNumber="{ data }">
         <p class="text-right">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
     </DxDataGrid>
@@ -238,7 +144,9 @@ import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
-import { exportToPDF, exportToXLSX } from '@/report/Material/Daftar/Material_DGMYG'
+import { exportToPDF, exportToXLSX,
+  exportToDOCX
+ } from '@/report/Material/Daftar/Material_DGMYG'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -334,6 +242,8 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta, e)
   } else {
+    exportToDOCX(reportMeta, data)
+
   }
 }
 
diff --git a/src/components/Pages/Material/Rekap/Material_RPM.vue b/src/components/Pages/Material/Rekap/Material_RPM.vue
index 6c6ae8a..d1ae8ef 100755
--- a/src/components/Pages/Material/Rekap/Material_RPM.vue
+++ b/src/components/Pages/Material/Rekap/Material_RPM.vue
@@ -3,100 +3,34 @@
     <Type14 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
-      <DxPager
-        :visible="true"
-        :allowed-page-sizes="[20, 50, 100]"
-        display-mode="full"
-        :show-page-size-selector="true"
-        :show-info="true"
-        :show-navigation-buttons="true"
-      />
+      <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full" :show-page-size-selector="true"
+        :show-info="true" :show-navigation-buttons="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="50"
-        alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
-        data-type="number"
-        caption="No"
-        cell-template="formatNumber"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
+        cell-template="formatNumber" />
 
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="kode"
-        caption="Kode Material"
-        cell-template="formatText"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="nama_material"
-        caption="Nama Material"
-        cell-template="formatText"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="120"
-        alignment="center"
-        data-field="satuan"
-        caption="Satuan"
-        cell-template="formatText"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="sumber_material"
-        caption="Sumber Material"
-        cell-template="formatText"
-      />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="kode"
+        caption="Kode Material" cell-template="formatText" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_material"
+        caption="Nama Material" cell-template="formatText" />
+      <DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="satuan" caption="Satuan"
+        cell-template="formatText" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber_material"
+        caption="Sumber Material" cell-template="formatText" />
       <DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
-        <DxColumn
-          v-for="i in 31"
-          :width="150"
-          alignment="center"
-          :data-field="`tgl${i}`"
-          data-type="number"
-          :caption="i"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
+        <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
+          :caption="i" css-class="custom-table-column" cell-template="formatNumber" />
       </DxColumn>
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="total"
-        caption="Jumlah"
-        cell-template="formatNumber"
-      />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="total" caption="Jumlah"
+        cell-template="formatNumber" />
 
       <template #formatText="{ data }">
         <p class="text-left">
@@ -107,22 +41,18 @@
       <template #formatNumber="{ data }">
         <p class="text-right">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="dialogDetail"
-    title="Detail Rekapitulasi Pemakaian Material"
-    @on-close="closeDialog"
-  >
+  <DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Pemakaian Material" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Kode Material:</h3>
@@ -180,7 +110,7 @@ import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
-import { exportToPDF, exportToXLSX } from '@/report/Material/Rekapitulasi/Material_RPM'
+import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Material/Rekapitulasi/Material_RPM'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -275,6 +205,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta, e)
   } else {
+    exportToDOCX(reportMeta, data)
   }
 }
 
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
index ab179c2..e37fcb4 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
@@ -784,7 +784,9 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan'
 
 const client = apolloClient()
@@ -838,6 +840,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -847,6 +850,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/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
index 3e8d408..6e127b8 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
@@ -292,7 +292,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
-import { exportToPDF, exportToXLSX } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan'
+import { exportToPDF, exportToXLSX,exportToDOCX } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -391,6 +391,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
index 021b1c9..c30ec6d 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
@@ -538,7 +538,9 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai'
 
 const client = apolloClient()
@@ -626,6 +628,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -635,6 +638,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 const getDetail = async () => {
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
index 5dfc426..fc84b15 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
@@ -161,7 +161,8 @@ import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import { getMonthName } from '@/utils/texts'
 import {
   exportToPDF,
-  exportToXLSX
+  exportToXLSX,
+  exportToDOCX
 } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan'
 
 const client = apolloClient()
@@ -241,6 +242,8 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+  exportToDOCX(reportMeta.value, data.value)
+
   }
 }
 const getDetail = async () => {
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
index 0d92d1b..64933e2 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
@@ -389,7 +389,9 @@ import { provideApolloClient } from '@vue/apollo-composable'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import {
   exportToPDF,
-  exportToXLSX
+  exportToXLSX,
+  exportToDOCX
+
 } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan'
 
 const client = apolloClient()
@@ -474,6 +476,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 const getDetail = async () => {
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
index 68c3849..5e243e6 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
@@ -295,7 +295,9 @@ import { provideApolloClient } from '@vue/apollo-composable'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import {
   exportToPDF,
-  exportToXLSX
+  exportToXLSX,
+  exportToDOCX
+
 } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan'
 
 const client = apolloClient()
@@ -333,6 +335,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
index d9142a5..5b09ea6 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
@@ -294,7 +294,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
-import { exportToPDF, exportToXLSX } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang'
+import { exportToPDF, exportToXLSX,exportToDOCX} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
index 24a0b1f..060f541 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
@@ -302,7 +302,9 @@ import { provideApolloClient } from '@vue/apollo-composable'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import {
   exportToPDF,
-  exportToXLSX
+  exportToXLSX,
+  exportToDOCX
+
 } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan'
 
 const client = apolloClient()
@@ -402,6 +404,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 const getDetail = async () => {
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
index 10cf2ef..71e5d49 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
@@ -1,266 +1,101 @@
 <template>
-  <Filters
-    @run-report="() => exportToPDF(reportMeta, data, true)"
-    @reset-form="data = []"
-    :report-button="true"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
+  <Filters @run-report="() => exportToPDF(reportMeta, data, true)" @reset-form="data = []" :report-button="true"
+    @run-search="() => filterData(filters)" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onDataSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_regional"
-        caption="Regional"
-        css-class="custom-table-column"
-        :group-index="0"
-        name="namaRegional"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="id_uid"
-        caption="UIW"
-        css-class="custom-table-column"
-        :group-index="1"
-        name="namaUID"
-        :calculate-group-value="(rowData: any) => rowData.nama_uid"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="id_up3"
-        caption="UP3"
-        css-class="custom-table-column"
-        :group-index="1"
-        name="namaUID"
-        :calculate-group-value="(rowData: any) => rowData.nama_up3"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
-      <DxColumn
-        alignment="center"
-        caption="Jumlah RPT Kali Gangguan"
-        css-class="custom-table-column"
-      >
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional" caption="Regional"
+        css-class="custom-table-column" :group-index="0" name="namaRegional" />
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="id_uid" caption="UIW"
+        css-class="custom-table-column" :group-index="1" name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid" />
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="id_up3" caption="UP3"
+        css-class="custom-table-column" :group-index="1" name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3" />
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
+        css-class="custom-table-column" cell-template="formatText" />
+      <DxColumn alignment="center" caption="Jumlah RPT Kali Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_kemarin"
-            data-type="number"
-            :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_ini"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_mom"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
+            :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
+            cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
+            cell-template="formatNumber" />
+          <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
+            css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_kemarin"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_ini"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_yoy"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column"
+            cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
+            cell-template="formatNumber" />
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
+            css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
       </DxColumn>
 
       <DxSummary>
-        <DxTotalItem
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="mom_bulan_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="mom_bulan_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_mom"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxTotalItem
-          column="yoy_tahun_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="yoy_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_yoy"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="persen_mom" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxTotalItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="persen_yoy" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
 
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          display-format="{0}"
-          show-in-column="mom_bulan_kemarin"
-          column="mom_bulan_kemarin"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="mom_bulan_ini"
-          column="mom_bulan_ini"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="persen_mom"
-          column="persen_mom"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="yoy_tahun_kemarin"
-          column="yoy_tahun_kemarin"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="yoy_tahun_ini"
-          column="yoy_tahun_ini"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="persen_yoy"
-          column="persen_yoy"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum" display-format="{0}"
+          show-in-column="mom_bulan_kemarin" column="mom_bulan_kemarin" css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
+          show-in-column="mom_bulan_ini" column="mom_bulan_ini" css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
+          show-in-column="persen_mom" column="persen_mom" css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
+          show-in-column="yoy_tahun_kemarin" column="yoy_tahun_kemarin" css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
+          show-in-column="yoy_tahun_ini" column="yoy_tahun_ini" css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
+          show-in-column="persen_yoy" column="persen_yoy" css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
       </DxSummary>
 
       <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
@@ -302,7 +137,9 @@ import { provideApolloClient } from '@vue/apollo-composable'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import {
   exportToPDF,
-  exportToXLSX
+  exportToXLSX,
+  exportToDOCX
+
 } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan'
 
 const client = apolloClient()
@@ -402,6 +239,8 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
+
   }
 }
 const getDetail = async () => {
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
index 721dc79..182181f 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
@@ -660,7 +660,9 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint'
 
 const client = apolloClient()
@@ -699,6 +701,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -708,6 +711,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/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
index a1fd584..a72776b 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
@@ -1,244 +1,89 @@
 <template>
-  <Filters
-    @run-report="() => exportToPDF(reportMeta, data, true)"
-    :report-button="true"
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
+  <Filters @run-report="() => exportToPDF(reportMeta, data, true)" :report-button="true" @reset-form="data = []"
+    @run-search="() => filterData(filters)" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onDataSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        alignment="center"
-        :caption="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
-        css-class="custom-table-column"
-      >
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_regional"
-          caption="Regional"
-          css-class="custom-table-column"
-          :group-index="0"
-          name="namaRegional"
-        />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="id_uid"
-          caption="UID"
-          css-class="custom-table-column"
-          :group-index="1"
-          name="namaUID"
-          :calculate-group-value="(rowData: any) => rowData.nama_uid"
-        />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="id_up3"
-          caption="UP3"
-          css-class="custom-table-column"
-          :group-index="1"
-          name="namaUID"
-          :calculate-group-value="(rowData: any) => rowData.nama_up3"
-        />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_ulp"
-          caption="Nama Unit"
-          css-class="custom-table-column"
-          name="namaULP"
-          cell-template="formatText"
-        />
+      <DxColumn alignment="center" :caption="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
+        css-class="custom-table-column">
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional" caption="Regional"
+          css-class="custom-table-column" :group-index="0" name="namaRegional" />
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="id_uid" caption="UID"
+          css-class="custom-table-column" :group-index="1" name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_uid" />
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="id_up3" caption="UP3"
+          css-class="custom-table-column" :group-index="1" name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_up3" />
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
+          css-class="custom-table-column" name="namaULP" cell-template="formatText" />
       </DxColumn>
       <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="terencana"
-          data-type="number"
-          caption="Terencana"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="tidak_terencana"
-          data-type="number"
-          caption="Tidak Terencana"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="bencana_alam"
-          data-type="number"
-          caption="Bencana Alam"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
+        <DxColumn :width="150" alignment="center" data-field="terencana" data-type="number" caption="Terencana"
+          css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="tidak_terencana" data-type="number"
+          caption="Tidak Terencana" css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="bencana_alam" data-type="number" caption="Bencana Alam"
+          css-class="custom-table-column" cell-template="formatNumber" />
       </DxColumn>
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="total"
-        data-type="number"
-        caption="Total"
-        css-class="custom-table-column"
-        cell-template="formatNumber"
-      />
-      <DxColumn
-        :min-width="170"
-        alignment="center"
-        data-field="kpi_ens"
-        data-type="number"
-        caption="KPI ENS"
-        css-class="custom-table-column"
-        cell-template="formatNumber"
-      />
+      <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
+        css-class="custom-table-column" cell-template="formatNumber" />
+      <DxColumn :min-width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
+        css-class="custom-table-column" cell-template="formatNumber" />
 
       <DxSummary>
-        <DxTotalItem
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="terencana"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="tidak_terencana"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="bencana_alam"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="kpi_ens"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="terencana" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="tidak_terencana" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="bencana_alam" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="kpi_ens" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
 
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="terencana"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="terencana"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="tidak_terencana"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="tidak_terencana"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="bencana_alam"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="bencana_alam"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="kpi_ens"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="kpi_ens"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
+        <DxGroupItem css-class="!text-right" show-in-column="terencana" :show-in-group-footer="false"
+          :align-by-column="true" column="terencana" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="tidak_terencana" :show-in-group-footer="false"
+          :align-by-column="true" column="tidak_terencana" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="bencana_alam" :show-in-group-footer="false"
+          :align-by-column="true" column="bencana_alam" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="total" :show-in-group-footer="false"
+          :align-by-column="true" column="total" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="kpi_ens" :show-in-group-footer="false"
+          :align-by-column="true" column="kpi_ens" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
       </DxSummary>
 
       <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
@@ -279,7 +124,8 @@ import { provideApolloClient } from '@vue/apollo-composable'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import {
   exportToPDF,
-  exportToXLSX
+  exportToXLSX,
+  exportToDOCX
 } from '@/report/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales'
 
 const client = apolloClient()
@@ -316,6 +162,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
index 7975c2c..60ad6aa 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
@@ -1,250 +1,93 @@
 <template>
-  <Filters
-    @run-report="() => exportToPDF(reportMeta, data, true)"
-    :report-button="true"
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
+  <Filters @run-report="() => exportToPDF(reportMeta, data, true)" :report-button="true" @reset-form="data = []"
+    @run-search="() => filterData(filters)" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_regional"
-        caption="Regional"
-        css-class="custom-table-column"
-        :group-index="0"
-        name="namaRegional"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="id_uid"
-        caption="UID"
-        css-class="custom-table-column"
-        :group-index="1"
-        name="namaUID"
-        :calculate-group-value="(rowData: any) => rowData.nama_uid"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="id_up3"
-        caption="UP3"
-        css-class="custom-table-column"
-        :group-index="1"
-        name="namaUID"
-        :calculate-group-value="(rowData: any) => rowData.nama_up3"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        name="namaULP"
-        cell-template="formatText"
-      />
-      <DxColumn
-        alignment="center"
-        caption="Kepatuhan dan Akurasi APKT"
-        css-class="custom-table-column"
-      >
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional" caption="Regional"
+        css-class="custom-table-column" :group-index="0" name="namaRegional" />
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="id_uid" caption="UID"
+        css-class="custom-table-column" :group-index="1" name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid" />
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="id_up3" caption="UP3"
+        css-class="custom-table-column" :group-index="1" name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3" />
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
+        css-class="custom-table-column" name="namaULP" cell-template="formatText" />
+      <DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="gangguan_berulang"
-            data-type="number"
-            :caption="`${getMonthNameShort(currentMonth)}, ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="gangguan_total"
-            data-type="number"
-            caption="Total Gangguan"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="150" alignment="center" data-field="gangguan_berulang" data-type="number"
+            :caption="`${getMonthNameShort(currentMonth)}, ${currentYear}`" css-class="custom-table-column"
+            cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="gangguan_total" data-type="number"
+            caption="Total Gangguan" css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
         <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="keluhan_berulang"
-            data-type="number"
-            :caption="`${getMonthNameShort(currentMonth)}, ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="keluhan_total"
-            data-type="number"
-            caption="Total Keluhan"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="150" alignment="center" data-field="keluhan_berulang" data-type="number"
+            :caption="`${getMonthNameShort(currentMonth)}, ${currentYear}`" css-class="custom-table-column"
+            cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="keluhan_total" data-type="number"
+            caption="Total Keluhan" css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
       </DxColumn>
-      <DxColumn
-        :min-width="150"
-        alignment="center"
-        data-field="komplain_pelanggan"
-        data-type="number"
-        caption="Komplain Pelanggan %"
-        css-class="custom-table-column"
-        cell-template="formatPercentage"
-      />
+      <DxColumn :min-width="150" alignment="center" data-field="komplain_pelanggan" data-type="number"
+        caption="Komplain Pelanggan %" css-class="custom-table-column" cell-template="formatPercentage" />
 
       <DxSummary>
-        <DxTotalItem
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="gangguan_berulang"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="gangguan_total"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="keluhan_berulang"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="keluhan_total"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="komplain_pelanggan"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="gangguan_berulang" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="gangguan_total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="keluhan_berulang" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="keluhan_total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="komplain_pelanggan" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
+    " />
 
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="gangguan_berulang"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="gangguan_berulang"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="gangguan_total"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="gangguan_total"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="keluhan_berulang"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="keluhan_berulang"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="keluhan_total"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="keluhan_total"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="komplain_pelanggan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="komplain_pelanggan"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
+        <DxGroupItem css-class="!text-right" show-in-column="gangguan_berulang" :show-in-group-footer="false"
+          :align-by-column="true" column="gangguan_berulang" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="gangguan_total" :show-in-group-footer="false"
+          :align-by-column="true" column="gangguan_total" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="keluhan_berulang" :show-in-group-footer="false"
+          :align-by-column="true" column="keluhan_berulang" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="keluhan_total" :show-in-group-footer="false"
+          :align-by-column="true" column="keluhan_total" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="komplain_pelanggan" :show-in-group-footer="false"
+          :align-by-column="true" column="komplain_pelanggan" summary-type="sum" display-format="{0}" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
+    " />
       </DxSummary>
 
       <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
@@ -292,7 +135,8 @@ import { provideApolloClient } from '@vue/apollo-composable'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import {
   exportToPDF,
-  exportToXLSX
+  exportToXLSX,
+  exportToDOCX
 } from '@/report/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan'
 
 const client = apolloClient()
@@ -331,6 +175,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 const dataGridRef = ref<DxDataGrid | null>(null)
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
index 6894861..19a8342 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
@@ -1190,7 +1190,10 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX,
+
 } from '@/report/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 
@@ -1247,6 +1250,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -1256,6 +1260,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
index 08d4b24..edb50f2 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
@@ -360,7 +360,8 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import {
   exportToPDF,
-  exportToXLSX
+  exportToXLSX,
+  exportToDOCX
 } from '@/report/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint'
 
 const position = { of: '#data' }
@@ -395,6 +396,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 const getDetail = async () => {
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
index 38f44ab..fc5fa74 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
@@ -279,7 +279,9 @@ import { provideApolloClient } from '@vue/apollo-composable'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import {
   exportToPDF,
-  exportToXLSX
+  exportToXLSX,
+  exportToDOCX
+
 } from '@/report/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales'
 
 const client = apolloClient()
@@ -316,6 +318,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, e)
   }
 }
 const getDetail = async () => {
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
index f223aa5..fad2c44 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
@@ -291,7 +291,9 @@ import { provideApolloClient } from '@vue/apollo-composable'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import {
   exportToPDF,
-  exportToXLSX
+  exportToXLSX,
+  exportToDOCX
+
 } from '@/report/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan'
 
 const client = apolloClient()
@@ -330,7 +332,10 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
+  
   }
+
 }
 const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
index 445c6fa..7233279 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
@@ -1,634 +1,207 @@
 <template>
-  <Filters
-    @run-report="() => exportToPDF(reportMeta, data, true)"
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
+  <Filters @run-report="() => exportToPDF(reportMeta, data, true)" @reset-form="data = []"
+    @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onDataSelectionChanged"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
+      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_regional"
-        caption="Regional"
-        css-class="custom-table-column"
-        :group-index="0"
-        name="namaRegional"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="id_uid"
-        caption="UID"
-        css-class="custom-table-column"
-        :group-index="1"
-        name="namaUID"
-        :calculate-group-value="(rowData: any) => rowData.nama_uid"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="id_up3"
-        caption="UP3"
-        css-class="custom-table-column"
-        :group-index="1"
-        name="namaUID"
-        :calculate-group-value="(rowData: any) => rowData.nama_up3"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        name="namaULP"
-        cell-template="formatText"
-      />
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional" caption="Regional"
+        css-class="custom-table-column" :group-index="0" name="namaRegional" />
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="id_uid" caption="UID"
+        css-class="custom-table-column" :group-index="1" name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid" />
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="id_up3" caption="UP3"
+        css-class="custom-table-column" :group-index="1" name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3" />
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
+        css-class="custom-table-column" name="namaULP" cell-template="formatText" />
 
-      <DxColumn
-        alignment="center"
-        :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
-        css-class="custom-table-column"
-      >
-        <DxColumn
-          :width="120"
-          alignment="center"
-          data-field="total_keluhan_tahun_sebelumnya"
-          data-type="number"
-          caption="Keluhan"
-          css-class="custom-table-column"
-          name="keluhanBulanLalu"
-        />
-        <DxColumn
-          :width="120"
-          alignment="center"
-          data-field="total_gangguan_tahun_sebelumnya"
-          data-type="number"
-          caption="Gangguan"
-          css-class="custom-table-column"
-        />
+      <DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
+        css-class="custom-table-column">
+        <DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_sebelumnya" data-type="number"
+          caption="Keluhan" css-class="custom-table-column" name="keluhanBulanLalu" />
+        <DxColumn :width="120" alignment="center" data-field="total_gangguan_tahun_sebelumnya" data-type="number"
+          caption="Gangguan" css-class="custom-table-column" />
         <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_keluhan_informasi_tahun_sebelumnya"
-            data-type="number"
-            caption="Keluhan"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_gangguan_informasi_tahun_sebelumnya"
-            data-type="number"
-            caption="Gangguan"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_informasi_tahun_sebelumnya"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_sebelumnya"
+            data-type="number" caption="Keluhan" css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="total_gangguan_informasi_tahun_sebelumnya"
+            data-type="number" caption="Gangguan" css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_sebelumnya" data-type="number"
+            caption="Total" css-class="custom-table-column" />
         </DxColumn>
-        <DxColumn
-          alignment="center"
-          caption="Total Komplain"
-          css-class="custom-table-column"
-          data-field="total_tahun_sebelumnya"
-          data-type="number"
-        />
+        <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
+          data-field="total_tahun_sebelumnya" data-type="number" />
       </DxColumn>
 
-      <DxColumn
-        alignment="center"
-        :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
-        css-class="custom-table-column"
-      >
-        <DxColumn
-          :width="120"
-          alignment="center"
-          data-field="total_keluhan_tahun_ini"
-          data-type="number"
-          caption="Keluhan"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="120"
-          alignment="center"
-          data-field="total_gangguan_tahun_ini"
-          data-type="number"
-          caption="Gangguan"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
+      <DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
+        css-class="custom-table-column">
+        <DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_ini" data-type="number"
+          caption="Keluhan" css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="120" alignment="center" data-field="total_gangguan_tahun_ini" data-type="number"
+          caption="Gangguan" css-class="custom-table-column" cell-template="formatNumber" />
         <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_keluhan_informasi_tahun_ini"
-            data-type="number"
-            caption="Keluhan"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_gangguan_informasi_tahun_ini"
-            data-type="number"
-            caption="Gangguan"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_informasi_tahun_ini"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_ini" data-type="number"
+            caption="Keluhan" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="total_gangguan_informasi_tahun_ini" data-type="number"
+            caption="Gangguan" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_ini" data-type="number"
+            caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
-        <DxColumn
-          alignment="center"
-          caption="Total Komplain"
-          css-class="custom-table-column"
-          data-field="total_tahun_ini"
-          data-type="number"
-          cell-template="formatNumber"
-        />
+        <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
+          data-field="total_tahun_ini" data-type="number" cell-template="formatNumber" />
       </DxColumn>
 
       <DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="delta_keluhan"
-          data-type="number"
-          caption="Keluhan"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="delta_gangguan"
-          data-type="number"
-          caption="Gangguan"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="delta_informasi"
-          data-type="number"
-          caption="Informasi"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
+        <DxColumn :width="150" alignment="center" data-field="delta_keluhan" data-type="number" caption="Keluhan"
+          css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="delta_gangguan" data-type="number" caption="Gangguan"
+          css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="delta_informasi" data-type="number" caption="Informasi"
+          css-class="custom-table-column" cell-template="formatNumber" />
       </DxColumn>
 
       <DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="persen_delta_keluhan"
-          data-type="number"
-          caption="Keluhan"
-          css-class="custom-table-column"
-          cell-template="formatPercentage"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="persen_delta_gangguan"
-          data-type="number"
-          caption="Gangguan"
-          css-class="custom-table-column"
-          cell-template="formatPercentage"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="persen_delta_informasi"
-          data-type="number"
-          caption="Informasi"
-          css-class="custom-table-column"
-          cell-template="formatPercentage"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="persen_delta_total"
-          data-type="number"
-          caption="% Total"
-          css-class="custom-table-column"
-          cell-template="formatPercentage"
-        />
+        <DxColumn :width="150" alignment="center" data-field="persen_delta_keluhan" data-type="number" caption="Keluhan"
+          css-class="custom-table-column" cell-template="formatPercentage" />
+        <DxColumn :width="150" alignment="center" data-field="persen_delta_gangguan" data-type="number"
+          caption="Gangguan" css-class="custom-table-column" cell-template="formatPercentage" />
+        <DxColumn :width="150" alignment="center" data-field="persen_delta_informasi" data-type="number"
+          caption="Informasi" css-class="custom-table-column" cell-template="formatPercentage" />
+        <DxColumn :width="150" alignment="center" data-field="persen_delta_total" data-type="number" caption="% Total"
+          css-class="custom-table-column" cell-template="formatPercentage" />
       </DxColumn>
 
       <DxSummary>
-        <DxTotalItem
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="total_keluhan_tahun_sebelumnya"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_gangguan_tahun_sebelumnya"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_keluhan_informasi_tahun_sebelumnya"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_gangguan_informasi_tahun_sebelumnya"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_informasi_tahun_sebelumnya"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_tahun_sebelumnya"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_keluhan_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_gangguan_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_keluhan_informasi_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_gangguan_informasi_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_informasi_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="delta_keluhan"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="delta_gangguan"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="delta_informasi"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_delta_keluhan"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxTotalItem
-          column="persen_delta_gangguan"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxTotalItem
-          column="persen_delta_informasi"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxTotalItem
-          column="persen_delta_total"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="total_keluhan_tahun_sebelumnya" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_gangguan_tahun_sebelumnya" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_keluhan_informasi_tahun_sebelumnya" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_gangguan_informasi_tahun_sebelumnya" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_informasi_tahun_sebelumnya" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_tahun_sebelumnya" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_keluhan_tahun_ini" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_gangguan_tahun_ini" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_keluhan_informasi_tahun_ini" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_gangguan_informasi_tahun_ini" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_informasi_tahun_ini" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="delta_keluhan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="delta_gangguan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="delta_informasi" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="persen_delta_keluhan" summary-type="avg" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
+      " />
+        <DxTotalItem column="persen_delta_gangguan" summary-type="avg" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
+      " />
+        <DxTotalItem column="persen_delta_informasi" summary-type="avg" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
+      " />
+        <DxTotalItem column="persen_delta_total" summary-type="avg" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
+      " />
 
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_keluhan_tahun_sebelumnya"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_keluhan_tahun_sebelumnya"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_gangguan_tahun_sebelumnya"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_gangguan_tahun_sebelumnya"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_keluhan_informasi_tahun_sebelumnya"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_keluhan_informasi_tahun_sebelumnya"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_gangguan_informasi_tahun_sebelumnya"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_gangguan_informasi_tahun_sebelumnya"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_informasi_tahun_sebelumnya"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_informasi_tahun_sebelumnya"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_tahun_sebelumnya"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_tahun_sebelumnya"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_keluhan_tahun_ini"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_keluhan_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_gangguan_tahun_ini"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_gangguan_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_keluhan_informasi_tahun_ini"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_keluhan_informasi_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_gangguan_informasi_tahun_ini"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_gangguan_informasi_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_informasi_tahun_ini"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_informasi_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_tahun_ini"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="delta_keluhan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="delta_keluhan"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="delta_gangguan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="delta_gangguan"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="delta_informasi"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="delta_informasi"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="persen_delta_keluhan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="persen_delta_keluhan"
-          summary-type="avg"
-          display-format="{0}"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="persen_delta_gangguan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="persen_delta_gangguan"
-          summary-type="avg"
-          display-format="{0}"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="persen_delta_informasi"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="persen_delta_informasi"
-          summary-type="avg"
-          display-format="{0}"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="persen_delta_total"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="persen_delta_total"
-          summary-type="avg"
-          display-format="{0}"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
+        <DxGroupItem css-class="!text-right" show-in-column="total_keluhan_tahun_sebelumnya"
+          :show-in-group-footer="false" :align-by-column="true" column="total_keluhan_tahun_sebelumnya"
+          summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="total_gangguan_tahun_sebelumnya"
+          :show-in-group-footer="false" :align-by-column="true" column="total_gangguan_tahun_sebelumnya"
+          summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="total_keluhan_informasi_tahun_sebelumnya"
+          :show-in-group-footer="false" :align-by-column="true" column="total_keluhan_informasi_tahun_sebelumnya"
+          summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="total_gangguan_informasi_tahun_sebelumnya"
+          :show-in-group-footer="false" :align-by-column="true" column="total_gangguan_informasi_tahun_sebelumnya"
+          summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="total_informasi_tahun_sebelumnya"
+          :show-in-group-footer="false" :align-by-column="true" column="total_informasi_tahun_sebelumnya"
+          summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="total_tahun_sebelumnya" :show-in-group-footer="false"
+          :align-by-column="true" column="total_tahun_sebelumnya" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="total_keluhan_tahun_ini" :show-in-group-footer="false"
+          :align-by-column="true" column="total_keluhan_tahun_ini" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="total_gangguan_tahun_ini" :show-in-group-footer="false"
+          :align-by-column="true" column="total_gangguan_tahun_ini" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="total_keluhan_informasi_tahun_ini"
+          :show-in-group-footer="false" :align-by-column="true" column="total_keluhan_informasi_tahun_ini"
+          summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="total_gangguan_informasi_tahun_ini"
+          :show-in-group-footer="false" :align-by-column="true" column="total_gangguan_informasi_tahun_ini"
+          summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="total_informasi_tahun_ini" :show-in-group-footer="false"
+          :align-by-column="true" column="total_informasi_tahun_ini" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="total_tahun_ini" :show-in-group-footer="false"
+          :align-by-column="true" column="total_tahun_ini" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="delta_keluhan" :show-in-group-footer="false"
+          :align-by-column="true" column="delta_keluhan" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="delta_gangguan" :show-in-group-footer="false"
+          :align-by-column="true" column="delta_gangguan" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="delta_informasi" :show-in-group-footer="false"
+          :align-by-column="true" column="delta_informasi" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="persen_delta_keluhan" :show-in-group-footer="false"
+          :align-by-column="true" column="persen_delta_keluhan" summary-type="avg" display-format="{0}" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
+      " />
+        <DxGroupItem css-class="!text-right" show-in-column="persen_delta_gangguan" :show-in-group-footer="false"
+          :align-by-column="true" column="persen_delta_gangguan" summary-type="avg" display-format="{0}"
+          :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
+      " />
+        <DxGroupItem css-class="!text-right" show-in-column="persen_delta_informasi" :show-in-group-footer="false"
+          :align-by-column="true" column="persen_delta_informasi" summary-type="avg" display-format="{0}"
+          :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
+      " />
+        <DxGroupItem css-class="!text-right" show-in-column="persen_delta_total" :show-in-group-footer="false"
+          :align-by-column="true" column="persen_delta_total" summary-type="avg" display-format="{0}" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
+      " />
       </DxSummary>
 
       <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+      isNumber(data.text)
+        ? data.column.caption == '%'
+          ? formatPercentage(data.text)
+          : formatNumber(data.text)
+        : data.text
+    }}
         </p>
       </template>
 
@@ -675,7 +248,9 @@ import { provideApolloClient } from '@vue/apollo-composable'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import {
   exportToPDF,
-  exportToXLSX
+  exportToXLSX,
+  exportToDOCX
+
 } from '@/report/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain'
 
 const client = apolloClient()
@@ -715,6 +290,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 const getDetail = async () => {
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_ALL_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_ALL_DOC.ts
index 78ccfe2..400feaa 100644
--- a/src/report/Gangguan/Rekap/doc/RGangguan_ALL_DOC.ts
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_ALL_DOC.ts
@@ -1,4 +1,5 @@
 
+
 const company = "PT. PLN (Persero)";
 const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
   var 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>${filename}</title>
@@ -113,7 +114,12 @@ const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
@@ -258,7 +264,12 @@ const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, period
   </table>
  `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_AlihPosko_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_AlihPosko_DOC.ts
index ccf3f1e..ecfae12 100755
--- a/src/report/Gangguan/Rekap/doc/RGangguan_AlihPosko_DOC.ts
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_AlihPosko_DOC.ts
@@ -92,7 +92,12 @@ const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
@@ -226,7 +231,12 @@ const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, period
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_BerdasarMedia_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_BerdasarMedia_DOC.ts
index e1e8913..40c11c5 100644
--- a/src/report/Gangguan/Rekap/doc/RGangguan_BerdasarMedia_DOC.ts
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_BerdasarMedia_DOC.ts
@@ -123,7 +123,12 @@ const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
@@ -255,7 +260,12 @@ const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, period
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_CTTM_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_CTTM_DOC.ts
index e80f140..732e24d 100644
--- a/src/report/Gangguan/Rekap/doc/RGangguan_CTTM_DOC.ts
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_CTTM_DOC.ts
@@ -134,7 +134,12 @@ const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
@@ -254,7 +259,12 @@ const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, period
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_DMAPKT_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_DMAPKT_DOC.ts
index 0d78a6d..ff5d24c 100644
--- a/src/report/Gangguan/Rekap/doc/RGangguan_DMAPKT_DOC.ts
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_DMAPKT_DOC.ts
@@ -164,7 +164,12 @@ const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
@@ -290,7 +295,12 @@ const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, period
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguanSE_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguanSE_DOC.ts
index b0a2d76..4e1782e 100644
--- a/src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguanSE_DOC.ts
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguanSE_DOC.ts
@@ -123,7 +123,12 @@ const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
@@ -255,7 +260,12 @@ const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, period
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguan_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguan_DOC.ts
index 89e0bed..df6deb7 100644
--- a/src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguan_DOC.ts
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguan_DOC.ts
@@ -123,7 +123,12 @@ const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
@@ -255,7 +260,12 @@ const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, period
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_KTI_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_KTI_DOC.ts
index 516e4cb..baf8106 100644
--- a/src/report/Gangguan/Rekap/doc/RGangguan_KTI_DOC.ts
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_KTI_DOC.ts
@@ -108,7 +108,12 @@ const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
@@ -268,7 +273,12 @@ const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, period
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_PerPosko_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_PerPosko_DOC.ts
index ef6b257..771022e 100644
--- a/src/report/Gangguan/Rekap/doc/RGangguan_PerPosko_DOC.ts
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_PerPosko_DOC.ts
@@ -121,7 +121,12 @@ const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
@@ -253,7 +258,12 @@ const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, period
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_PerRegu_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_PerRegu_DOC.ts
index 2e55bec..a20f1cb 100644
--- a/src/report/Gangguan/Rekap/doc/RGangguan_PerRegu_DOC.ts
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_PerRegu_DOC.ts
@@ -122,7 +122,12 @@ const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
@@ -256,7 +261,12 @@ const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, period
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_PerTanggal_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_PerTanggal_DOC.ts
index ebc71f4..ef8b637 100644
--- a/src/report/Gangguan/Rekap/doc/RGangguan_PerTanggal_DOC.ts
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_PerTanggal_DOC.ts
@@ -120,7 +120,12 @@ const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
@@ -253,7 +258,12 @@ const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, period
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_RatingPerPosko_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_RatingPerPosko_DOC.ts
index 22149b4..a13306d 100644
--- a/src/report/Gangguan/Rekap/doc/RGangguan_RatingPerPosko_DOC.ts
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_RatingPerPosko_DOC.ts
@@ -118,7 +118,12 @@ const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
@@ -251,7 +256,12 @@ const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, period
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_RatingPerRegu_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_RatingPerRegu_DOC.ts
index 9f22428..fce9491 100644
--- a/src/report/Gangguan/Rekap/doc/RGangguan_RatingPerRegu_DOC.ts
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_RatingPerRegu_DOC.ts
@@ -117,7 +117,12 @@ const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
@@ -251,7 +256,12 @@ const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, period
     </table>
    `
 
-  var postHtml = "</div></body></html>";
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
 
   var html = preHtml + body + postHtml;
 
diff --git a/src/report/Material/Daftar/Material_DGMYG.ts b/src/report/Material/Daftar/Material_DGMYG.ts
index a7444f8..f13e865 100644
--- a/src/report/Material/Daftar/Material_DGMYG.ts
+++ b/src/report/Material/Daftar/Material_DGMYG.ts
@@ -17,6 +17,7 @@ import { jsPDF } from 'jspdf'
 import autoTable from 'jspdf-autotable'
 import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
+import { exportToWord } from './doc/Material_DGMYG_DOC'
 
 const reportName = 'Daftar Gangguan Dan Material Yang Dipakai'
 const fontSize = 5
@@ -222,28 +223,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     2,
     1,
-    `DISTRIBUSI/WILAYAH : ${
-      reportMeta.value.uid
-        ? reportMeta.value.uid.name.toUpperCase()
-        : 'Semua Distribusi/Wilayah'.toUpperCase()
+    `DISTRIBUSI/WILAYAH : ${reportMeta.value.uid
+      ? reportMeta.value.uid.name.toUpperCase()
+      : 'Semua Distribusi/Wilayah'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     3,
     1,
-    `AREA : ${
-      reportMeta.value.up3 ? reportMeta.value.up3.name.toUpperCase() : 'Semua Area'.toUpperCase()
+    `AREA : ${reportMeta.value.up3 ? reportMeta.value.up3.name.toUpperCase() : 'Semua Area'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     4,
     1,
-    `POSKO : ${
-      reportMeta.value.posko
-        ? reportMeta.value.posko.name.toUpperCase()
-        : 'Semua Posko'.toUpperCase()
+    `POSKO : ${reportMeta.value.posko
+      ? reportMeta.value.posko.name.toUpperCase()
+      : 'Semua Posko'.toUpperCase()
     }`
   )
 
@@ -279,5 +277,8 @@ const exportToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, rawData, `Laporan ${reportName}`, formatMetaData(reportMeta))
+}
+export { exportToPDF, exportToXLSX, exportToDOCX }
 
-export { exportToPDF, exportToXLSX }
diff --git a/src/report/Material/Daftar/doc/Material_DGMYG_DOC.ts b/src/report/Material/Daftar/doc/Material_DGMYG_DOC.ts
new file mode 100644
index 0000000..0f8ab75
--- /dev/null
+++ b/src/report/Material/Daftar/doc/Material_DGMYG_DOC.ts
@@ -0,0 +1,271 @@
+
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var column = '';
+  for (let index = 0; index < rawData.value.length; index++) {
+    const item = rawData.value[index];
+    column += '<tr>';
+    column += `<td>${item.no_laporan}</td>`;
+    column += `<td>${item.nama_pelapor}</td>`;
+    column += `<td>${item.keterangan_pelapor}</td>`;
+    column += `<td>${item.penyebab}</td>`;
+    column += `<td>${item.waktu_lapor}</td>`;
+    column += `<td>${item.waktu_recovery}</td>`;
+    column += `<td>${item.regu}</td>`;
+    column += `<td>${item.media}</td>`;
+    column += `<td>${item.nama_material}</td>`;
+    column += `<td>${item.satuan_material}</td>`;
+    column += `<td>${item.volume_material}</td>`;
+    column += '</tr>';
+  }
+  tbody += column;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Area</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Area'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+       <tr>
+       <th rowspan="2">No</th>
+       <th rowspan="2">Nomor Gangguan</th>
+       <th rowspan="2">Nama Pelanggan</th>
+       <th rowspan="2">Isi Laporan</th>
+       <th rowspan="2">Penyebab Gangguan</th>
+       <th rowspan="2">Tgl Padam</th>
+       <th rowspan="2">Tgl Nyala</th>
+       <th rowspan="2">Regu</th>
+       <th colspan="4">Material Yang Dipakai</th>
+     </tr>
+     <tr>
+       <th>Sumber</th>
+       <th>Nama</th>
+       <th>Satuan</th>
+       <th>Vol</th>
+     </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time}</td>`;
+    cr += `<td>${item.durasi_recovery_time}</td>`;
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += `<td>${item.nama_posko}</td>`;
+    cr += `<td>${item.media}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+       <tr>
+       <th>No</th>
+       <th>No Laporan</th>
+       <th>Tgl Lapor</th>
+       <th>Tgl Datang</th>
+       <th>Tgl Nyala</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>Posko</th>
+       <th>Sumber Lapor</th>
+       <th>Nama Petugas</th>
+       <th>Posko Asal</th>
+       <th>Posko Tujuan</th>
+     </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Material/Rekapitulasi/Material_RPM.ts b/src/report/Material/Rekapitulasi/Material_RPM.ts
index 9c6b97a..daecc54 100644
--- a/src/report/Material/Rekapitulasi/Material_RPM.ts
+++ b/src/report/Material/Rekapitulasi/Material_RPM.ts
@@ -17,6 +17,7 @@ import { jsPDF } from 'jspdf'
 import autoTable from 'jspdf-autotable'
 import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
+import { exportToWord } from './doc/Material_RPM_DOC'
 
 const reportName = 'Rekapitulasi Pemakaian Material'
 const fontSize = 5
@@ -212,28 +213,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     2,
     1,
-    `DISTRIBUSI/WILAYAH : ${
-      reportMeta.value.uid
-        ? reportMeta.value.uid.name.toUpperCase()
-        : 'Semua Distribusi/Wilayah'.toUpperCase()
+    `DISTRIBUSI/WILAYAH : ${reportMeta.value.uid
+      ? reportMeta.value.uid.name.toUpperCase()
+      : 'Semua Distribusi/Wilayah'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     3,
     1,
-    `AREA : ${
-      reportMeta.value.up3 ? reportMeta.value.up3.name.toUpperCase() : 'Semua Area'.toUpperCase()
+    `AREA : ${reportMeta.value.up3 ? reportMeta.value.up3.name.toUpperCase() : 'Semua Area'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     4,
     1,
-    `POSKO : ${
-      reportMeta.value.posko
-        ? reportMeta.value.posko.name.toUpperCase()
-        : 'Semua Posko'.toUpperCase()
+    `POSKO : ${reportMeta.value.posko
+      ? reportMeta.value.posko.name.toUpperCase()
+      : 'Semua Posko'.toUpperCase()
     }`
   )
 
@@ -270,4 +268,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, rawData, `Laporan ${reportName}`, formatMetaData(reportMeta))
+}
+export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/report/Material/Rekapitulasi/doc/Material_RPM_DOC.ts b/src/report/Material/Rekapitulasi/doc/Material_RPM_DOC.ts
new file mode 100644
index 0000000..c50387f
--- /dev/null
+++ b/src/report/Material/Rekapitulasi/doc/Material_RPM_DOC.ts
@@ -0,0 +1,264 @@
+
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var column = '';
+  for (let i = 0; i < rawData.value.length; i++) {
+    column += '<tr>';
+    const item = rawData.value[i];
+
+    column += `<td>${item.kode}</td>`;
+    column += `<td>${item.nama_material}</td>`;
+    column += `<td>${item.satuan}</td>`;
+    column += `<td>${item.sumber_material}</td>`;
+    for (let a = 1; a <= 31; a++) {
+      column += `<td>${item[`tgl${a}`]}</td>`;
+    }
+    column += `<td>${item.total}</td>`;
+    column += '</tr>';
+  }
+  tbody += column;
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Area</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+       <tr>
+        <th rowspan="2">No</th>
+        <th rowspan="2">Kode Material</th>
+        <th rowspan="2">Nama Material</th>
+        <th rowspan="2">Satuan</th>
+        <th rowspan="2">Sumber Material</th>
+        <th colspan="31">Tanggal</th>
+        <th rowspan="2">Jumlah</th>
+      </tr>
+      <tr>
+        ${Array.from({ length: 31 }, (_, i) => `<th>${i + 1}</th>`).join('\n')}
+      </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time}</td>`;
+    cr += `<td>${item.durasi_recovery_time}</td>`;
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += `<td>${item.nama_posko}</td>`;
+    cr += `<td>${item.media}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+       <tr>
+       <th>No</th>
+       <th>No Laporan</th>
+       <th>Tgl Lapor</th>
+       <th>Tgl Datang</th>
+       <th>Tgl Nyala</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>Posko</th>
+       <th>Sumber Lapor</th>
+       <th>Nama Petugas</th>
+       <th>Posko Asal</th>
+       <th>Posko Tujuan</th>
+     </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${periode.dayTo}, ${periode.dateToFormat}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.ts b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.ts
index b077e0d..7ee0877 100644
--- a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.ts
+++ b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.ts
@@ -20,6 +20,7 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 import { getMonthName } from '@/utils/texts'
+import { exportDetailToWord, exportToWord } from './doc/MonalisaGR_DispatchingTimeGangguan_DOC'
 
 const reportName = 'Dispacthing Time (DT) Gangguan'
 const fontSize = 5
@@ -465,38 +466,34 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     2,
     1,
-    `UNIT INDUK : ${
-      reportMeta.uid
-        ? reportMeta.uid.name.toUpperCase()
-        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    `UNIT INDUK : ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     3,
     1,
-    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
-      reportMeta.up3
-        ? reportMeta.up3.name.toUpperCase()
-        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     4,
     1,
-    `UNIT LAYANAN PELANGGAN : ${
-      reportMeta.ulp
-        ? reportMeta.ulp.name.toUpperCase()
-        : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+    `UNIT LAYANAN PELANGGAN : ${reportMeta.ulp
+      ? reportMeta.ulp.name.toUpperCase()
+      : 'Semua Unit Layanan Pelanggan'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     5,
     1,
-    `REGIONAL : ${
-      reportMeta.regional ? reportMeta.regional.name.toUpperCase() : 'Semua Regional'.toUpperCase()
+    `REGIONAL : ${reportMeta.regional ? reportMeta.regional.name.toUpperCase() : 'Semua Regional'.toUpperCase()
     }`
   )
 
@@ -560,4 +557,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, null)
+}
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, null)
+}
+export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }
diff --git a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.ts b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.ts
index fceccf7..88bab2d 100644
--- a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.ts
+++ b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.ts
@@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 import { getMonthName } from '@/utils/texts'
+import { exportToWord } from './doc/MonalisaGR_ENSGangguan_DOC'
 
 const reportName = 'Rekapitulasi ENS Gangguan'
 const fontSize = 5
@@ -368,5 +369,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
-
-export { exportToPDF, exportToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, null)
+}
+export { exportToPDF, exportToXLSX , exportToDOCX}
diff --git a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.ts b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.ts
index 9c513f7..548f08a 100644
--- a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.ts
+++ b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.ts
@@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { exportDetailToWord, exportToWord } from './doc/MonalisaGR_GangguanBelumSelesai_DOC'
 
 const reportName = 'Rekapitulasi Gangguan Belum Selesai'
 const fontSize = 5
@@ -391,38 +392,34 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     2,
     1,
-    `UNIT INDUK : ${
-      reportMeta.uid
-        ? reportMeta.uid.name.toUpperCase()
-        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    `UNIT INDUK : ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     3,
     1,
-    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
-      reportMeta.up3
-        ? reportMeta.up3.name.toUpperCase()
-        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     4,
     1,
-    `UNIT LAYANAN PELANGGAN : ${
-      reportMeta.ulp
-        ? reportMeta.ulp.name.toUpperCase()
-        : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+    `UNIT LAYANAN PELANGGAN : ${reportMeta.ulp
+      ? reportMeta.ulp.name.toUpperCase()
+      : 'Semua Unit Layanan Pelanggan'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     5,
     1,
-    `REGIONAL : ${
-      reportMeta.regional ? reportMeta.regional.name.toUpperCase() : 'Semua Regional'.toUpperCase()
+    `REGIONAL : ${reportMeta.regional ? reportMeta.regional.name.toUpperCase() : 'Semua Regional'.toUpperCase()
     }`
   )
 
@@ -490,4 +487,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, null)
+}
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, null)
+}
+export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }
diff --git a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.ts b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.ts
index e2f7db6..a401b0e 100644
--- a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.ts
+++ b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.ts
@@ -18,6 +18,7 @@ import autoTable from 'jspdf-autotable'
 import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { exportToWord } from './doc/MonalisaGR_GangguanPerJenisGangguan_DOC'
 
 const reportName = 'Rekapitulasi Gangguan Per Jenis Gangguan'
 const fontSize = 5
@@ -283,4 +284,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, null)
+}
+export { exportToPDF, exportToXLSX , exportToDOCX}
\ No newline at end of file
diff --git a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.ts b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.ts
index 98dd461..d194971 100644
--- a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.ts
+++ b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.ts
@@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 import { getMonthName } from '@/utils/texts'
+import { exportToWord } from './doc/MonalisaGR_JumlahDDRPTRCTGangguan_DOC'
 
 const reportName = 'Jumlah dan Durasi RPT RCT Gangguan'
 const fontSize = 5
@@ -322,4 +323,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, null)
+}
+export { exportToPDF, exportToXLSX , exportToDOCX}
\ No newline at end of file
diff --git a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.ts b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.ts
index 14863a9..16adbf4 100644
--- a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.ts
+++ b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.ts
@@ -20,6 +20,7 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 import { getMonthName } from '@/utils/texts'
+import { exportToWord } from './doc/MonalisaGR_JumlahKaliGangguan_DOC'
 
 const reportName = 'Jumlah Kali Gangguan'
 const fontSize = 5
@@ -308,38 +309,34 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     2,
     1,
-    `UNIT INDUK : ${
-      reportMeta.uid
-        ? reportMeta.uid.name.toUpperCase()
-        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    `UNIT INDUK : ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     3,
     1,
-    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
-      reportMeta.up3
-        ? reportMeta.up3.name.toUpperCase()
-        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     4,
     1,
-    `UNIT LAYANAN PELANGGAN : ${
-      reportMeta.ulp
-        ? reportMeta.ulp.name.toUpperCase()
-        : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+    `UNIT LAYANAN PELANGGAN : ${reportMeta.ulp
+      ? reportMeta.ulp.name.toUpperCase()
+      : 'Semua Unit Layanan Pelanggan'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     5,
     1,
-    `REGIONAL : ${
-      reportMeta.regional ? reportMeta.regional.name.toUpperCase() : 'Semua Regional'.toUpperCase()
+    `REGIONAL : ${reportMeta.regional ? reportMeta.regional.name.toUpperCase() : 'Semua Regional'.toUpperCase()
     }`
   )
 
@@ -371,4 +368,8 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  console.log(reportMeta, rawData)
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, null)
+}
+export { exportToPDF, exportToXLSX, exportToDOCX }
\ No newline at end of file
diff --git a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.ts b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.ts
index ef93902..d535a4e 100644
--- a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.ts
+++ b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.ts
@@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 import { getMonthName } from '@/utils/texts'
+import { exportToWord } from './doc/MonalisaGR_LaporUlang_DOC'
 
 const reportName = 'Rekapitulasi Lapor Ulang Gangguan'
 const fontSize = 5
@@ -369,4 +370,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, null)
+}
+export { exportToPDF, exportToXLSX , exportToDOCX}
\ No newline at end of file
diff --git a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.ts b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.ts
index 28c3aae..720a170 100644
--- a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.ts
+++ b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.ts
@@ -20,6 +20,7 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 import { getMonthName } from '@/utils/texts'
+import { exportToWord } from './doc/MonalisaGR_RecoveryTimeGangguan_DOC'
 
 const reportName = 'Recovery Time (RCT) Gangguan'
 const fontSize = 5
@@ -381,4 +382,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, null)
+}
+export { exportToPDF, exportToXLSX , exportToDOCX}
\ No newline at end of file
diff --git a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.ts b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.ts
index 8faf15a..7fddf25 100644
--- a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.ts
+++ b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.ts
@@ -20,6 +20,7 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 import { getMonthName } from '@/utils/texts'
+import { exportToWord } from './doc/MonalisaGR_ResponseTimeGangguan_DOC'
 
 const reportName = 'Response Time (RPT) Gangguan'
 const fontSize = 5
@@ -381,4 +382,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, null)
+}
+export { exportToPDF, exportToXLSX , exportToDOCX}
diff --git a/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_DispatchingTimeGangguan_DOC.ts b/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_DispatchingTimeGangguan_DOC.ts
new file mode 100644
index 0000000..21707a1
--- /dev/null
+++ b/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_DispatchingTimeGangguan_DOC.ts
@@ -0,0 +1,287 @@
+import { formatWaktu } from "@/components/Form/FiltersType/reference";
+import { getMonthName } from "@/utils/texts";
+const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+const date = new Date().getDate()
+const month = new Date().toLocaleString('id-ID', { month: 'long' })
+const year = new Date().getFullYear()
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var 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 += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.ulp ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+    <th rowspan="3">No</th>
+    <th rowspan="3">Nama Unit</th>
+    <th colspan="6">Jumlah Dispatching Time Gangguan</th>
+  </tr>
+  <tr>
+    <th colspan="3">MOM</th>
+    <th colspan="3">YOY</th>
+  </tr>
+  <tr>
+    <th>${getMonthName(reportMeta.lastMonth)} ${reportMeta.lastYearMoM}</th>
+    <th>${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}</th>
+    <th>%</th>
+    <th>s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.lastYear}</th>
+    <th>s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}</th>
+    <th>%</th>
+  </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.nama_ulp}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : ''}</td>`;
+    cr += `<td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : ''}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+          <th>No</th>
+          <th>ULP</th>
+          <th>No Laporan</th>
+          <th>Tgl/ Jam Lapor</th>
+          <th>Tgl/ Jam Datang</th>
+          <th>Tgl/ Jam Nyala</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Durasi Penugasan Regu</th>
+          <th>Durasi Perjalanan Regu</th>
+          <th>Dispatch Oleh</th>
+          <th>IDPEL/NO METER</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Sumber Lapor</th>
+          <th>Diselesaikan Oleh</th>
+          <th>Status</th>
+          <th>Referensi Marking</th>
+          <th>Kode Gangguan</th>
+          <th>Jenis Gangguan</th>
+          <th>Tindakan</th>
+        </tr>
+      </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_ENSGangguan_DOC.ts b/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_ENSGangguan_DOC.ts
new file mode 100644
index 0000000..1bae5b8
--- /dev/null
+++ b/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_ENSGangguan_DOC.ts
@@ -0,0 +1,288 @@
+import { formatWaktu } from "@/components/Form/FiltersType/reference";
+import { getMonthName } from "@/utils/texts";
+
+const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+const date = new Date().getDate()
+const month = new Date().toLocaleString('id-ID', { month: 'long' })
+const year = new Date().getFullYear()
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var 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 += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.ulp ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+        <tr>
+          <th rowspan="3">No</th>
+          <th rowspan="3">Nama Unit</th>
+          <th colspan="6">ENS Gangguan</th>
+        </tr>
+        <tr>
+          <th colspan="3">MOM</th>
+          <th colspan="3">YOY</th>
+        </tr>
+        <tr>
+          <th>${getMonthName(reportMeta.lastMonth)} ${reportMeta.lastYearMoM}</th>
+          <th>${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}</th>
+          <th>%</th>
+          <th>s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.lastYear}</th>
+          <th>s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}</th>
+          <th>%</th>
+        </tr>
+       </thead>
+      <tbody>
+      ${tbody} 
+      </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.nama_ulp}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : ''}</td>`;
+    cr += `<td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : ''}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+          <th>No</th>
+          <th>ULP</th>
+          <th>No Laporan</th>
+          <th>Tgl/ Jam Lapor</th>
+          <th>Tgl/ Jam Datang</th>
+          <th>Tgl/ Jam Nyala</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Durasi Penugasan Regu</th>
+          <th>Durasi Perjalanan Regu</th>
+          <th>Dispatch Oleh</th>
+          <th>IDPEL/NO METER</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Sumber Lapor</th>
+          <th>Diselesaikan Oleh</th>
+          <th>Status</th>
+          <th>Referensi Marking</th>
+          <th>Kode Gangguan</th>
+          <th>Jenis Gangguan</th>
+          <th>Tindakan</th>
+        </tr>
+      </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_GangguanBelumSelesai_DOC.ts b/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_GangguanBelumSelesai_DOC.ts
new file mode 100644
index 0000000..3512fc2
--- /dev/null
+++ b/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_GangguanBelumSelesai_DOC.ts
@@ -0,0 +1,266 @@
+import { formatWaktu } from "@/components/Form/FiltersType/reference";
+import { getMonthName } from "@/utils/texts";
+
+const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+const date = new Date().getDate()
+const month = new Date().toLocaleString('id-ID', { month: 'long' })
+const year = new Date().getFullYear()
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var 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 += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.ulp ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+       <th rowspan="2">No</th>
+       <th rowspan="2">Nama Unit</th>
+       <th colspan="3">Tahun</th>
+     </tr>
+     <tr>
+       <th>Gangguan</th>
+       <th>Informasi</th>
+       <th>Total</th>
+     </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td> item.no_laporan}</td>`;
+    cr += `<td>${item.nama_uid}</td>`;
+    cr += `<td>${item.nama_ulp}</td>`;
+    cr += `<td>${item.id_pelanggan}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += `<td>${item.penyebab}</td>`;
+    cr += `<td>${item.kode_gangguan}</td>`;
+    cr += `<td>${item.jenis_gangguan}</td>`;
+    cr += `<td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-'}</td>`;
+    cr += `<td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-'}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+          <th>No</th>
+          <th>No Laporan</th>
+          <th>UID/UIW</th>
+          <th>UP3</th>
+          <th>ULP</th>
+          <th>ID Pelanggan</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Penyebab</th>
+          <th>Kode Gangguan</th>
+          <th>Jenis Gangguan</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Tgl Lapor</th>
+      </tr>
+      </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_GangguanPerJenisGangguan_DOC.ts b/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_GangguanPerJenisGangguan_DOC.ts
new file mode 100644
index 0000000..2043cbe
--- /dev/null
+++ b/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_GangguanPerJenisGangguan_DOC.ts
@@ -0,0 +1,278 @@
+import { formatWaktu } from "@/components/Form/FiltersType/reference";
+import { getMonthName } from "@/utils/texts";
+
+const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+const date = new Date().getDate()
+const month = new Date().toLocaleString('id-ID', { month: 'long' })
+const year = new Date().getFullYear()
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var 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 += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.ulp ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+        <tr>
+            <th>No</th>
+            <th>ID Gangguan</th>
+            <th>Jenis Gangguan</th>
+            <th>Jumlah</th>
+            <th>%</th>
+        </tr>
+      </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.nama_ulp}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : ''}</td>`;
+    cr += `<td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : ''}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+          <th>No</th>
+          <th>ULP</th>
+          <th>No Laporan</th>
+          <th>Tgl/ Jam Lapor</th>
+          <th>Tgl/ Jam Datang</th>
+          <th>Tgl/ Jam Nyala</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Durasi Penugasan Regu</th>
+          <th>Durasi Perjalanan Regu</th>
+          <th>Dispatch Oleh</th>
+          <th>IDPEL/NO METER</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Sumber Lapor</th>
+          <th>Diselesaikan Oleh</th>
+          <th>Status</th>
+          <th>Referensi Marking</th>
+          <th>Kode Gangguan</th>
+          <th>Jenis Gangguan</th>
+          <th>Tindakan</th>
+        </tr>
+      </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_JumlahDDRPTRCTGangguan_DOC.ts b/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_JumlahDDRPTRCTGangguan_DOC.ts
new file mode 100644
index 0000000..71846e4
--- /dev/null
+++ b/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_JumlahDDRPTRCTGangguan_DOC.ts
@@ -0,0 +1,311 @@
+import { formatWaktu } from "@/components/Form/FiltersType/reference";
+import { getMonthName } from "@/utils/texts";
+
+const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+const date = new Date().getDate()
+const month = new Date().toLocaleString('id-ID', { month: 'long' })
+const year = new Date().getFullYear()
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var 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 += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.ulp ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <<tr>
+       <th rowspan="4">Nama Unit</th>
+       <th colspan="12">Jumlah dan Durasi RPT & RCT Gangguan</th>
+     </tr>
+     <tr>
+       <th colspan="6">
+         ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}
+       </th>
+       <th colspan="6">
+         s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}
+       </th>
+     </tr>
+     <tr>
+       <th>Total RPT</th>
+       <th>Jumlah Gangguan</th>
+       <th>RPT Gangguan</th>
+       <th>Total RCT</th>
+       <th>Jumlah Gangguan</th>
+       <th>RCT Gangguan</th>
+       <th>Total RPT</th>
+       <th>Jumlah Gangguan</th>
+       <th>RPT Gangguan</th>
+       <th>Total RCT</th>
+       <th>Jumlah Gangguan</th>
+       <th>RCT Gangguan</th>
+     </tr>
+     <tr>
+       <td>a</td>
+       <td>b</td>
+       <td>c=a/b</td>
+       <td>d</td>
+       <td>e</td>
+       <td>f=d/e</td>
+       <td>a</td>
+       <td>b</td>
+       <td>c=a/b</td>
+       <td>d</td>
+       <td>e</td>
+       <td>f=d/e</td>
+     </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.nama_ulp}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : ''}</td>`;
+    cr += `<td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : ''}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+          <th>No</th>
+          <th>ULP</th>
+          <th>No Laporan</th>
+          <th>Tgl/ Jam Lapor</th>
+          <th>Tgl/ Jam Datang</th>
+          <th>Tgl/ Jam Nyala</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Durasi Penugasan Regu</th>
+          <th>Durasi Perjalanan Regu</th>
+          <th>Dispatch Oleh</th>
+          <th>IDPEL/NO METER</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Sumber Lapor</th>
+          <th>Diselesaikan Oleh</th>
+          <th>Status</th>
+          <th>Referensi Marking</th>
+          <th>Kode Gangguan</th>
+          <th>Jenis Gangguan</th>
+          <th>Tindakan</th>
+        </tr>
+      </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_JumlahKaliGangguan_DOC.ts b/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_JumlahKaliGangguan_DOC.ts
new file mode 100644
index 0000000..c0af07d
--- /dev/null
+++ b/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_JumlahKaliGangguan_DOC.ts
@@ -0,0 +1,288 @@
+import { formatWaktu } from "@/components/Form/FiltersType/reference";
+import { getMonthName } from "@/utils/texts";
+
+const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+const date = new Date().getDate()
+const month = new Date().toLocaleString('id-ID', { month: 'long' })
+const year = new Date().getFullYear()
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var 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 += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.ulp ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+       <th rowspan="3">No</th>
+       <th rowspan="3">Nama Unit</th>
+       <th colspan="6">Jumlah Kali Gangguan</th>
+     </tr>
+     <tr>
+       <th colspan="3">MOM</th>
+       <th colspan="3">YOY</th>
+     </tr>
+     <tr>
+       <th>${getMonthName(reportMeta.lastMonth)} ${reportMeta.lastYearMoM}</th>
+       <th>${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}</th>
+       <th>%</th>
+       <th>s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.lastYear}</th>
+       <th>s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}</th>
+       <th>%</th>
+     </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.nama_ulp}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : ''}</td>`;
+    cr += `<td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : ''}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+          <th>No</th>
+          <th>ULP</th>
+          <th>No Laporan</th>
+          <th>Tgl/ Jam Lapor</th>
+          <th>Tgl/ Jam Datang</th>
+          <th>Tgl/ Jam Nyala</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Durasi Penugasan Regu</th>
+          <th>Durasi Perjalanan Regu</th>
+          <th>Dispatch Oleh</th>
+          <th>IDPEL/NO METER</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Sumber Lapor</th>
+          <th>Diselesaikan Oleh</th>
+          <th>Status</th>
+          <th>Referensi Marking</th>
+          <th>Kode Gangguan</th>
+          <th>Jenis Gangguan</th>
+          <th>Tindakan</th>
+        </tr>
+      </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_LaporUlang_DOC.ts b/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_LaporUlang_DOC.ts
new file mode 100644
index 0000000..b291e45
--- /dev/null
+++ b/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_LaporUlang_DOC.ts
@@ -0,0 +1,288 @@
+import { formatWaktu } from "@/components/Form/FiltersType/reference";
+import { getMonthName } from "@/utils/texts";
+
+const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+const date = new Date().getDate()
+const month = new Date().toLocaleString('id-ID', { month: 'long' })
+const year = new Date().getFullYear()
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var 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 += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.ulp ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+    <th rowspan="3">No</th>
+    <th rowspan="3">Nama Unit</th>
+    <th colspan="6">Lapor Ulang Gangguan</th>
+  </tr>
+  <tr>
+    <th colspan="3">MOM</th>
+    <th colspan="3">YOY</th>
+  </tr>
+  <tr>
+    <th>${getMonthName(reportMeta.lastMonth)} ${reportMeta.lastYearMoM}</th>
+    <th>${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}</th>
+    <th>%</th>
+    <th>s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.lastYear}</th>
+    <th>s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}</th>
+    <th>%</th>
+  </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.nama_ulp}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : ''}</td>`;
+    cr += `<td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : ''}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+          <th>No</th>
+          <th>ULP</th>
+          <th>No Laporan</th>
+          <th>Tgl/ Jam Lapor</th>
+          <th>Tgl/ Jam Datang</th>
+          <th>Tgl/ Jam Nyala</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Durasi Penugasan Regu</th>
+          <th>Durasi Perjalanan Regu</th>
+          <th>Dispatch Oleh</th>
+          <th>IDPEL/NO METER</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Sumber Lapor</th>
+          <th>Diselesaikan Oleh</th>
+          <th>Status</th>
+          <th>Referensi Marking</th>
+          <th>Kode Gangguan</th>
+          <th>Jenis Gangguan</th>
+          <th>Tindakan</th>
+        </tr>
+      </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_RecoveryTimeGangguan_DOC.ts b/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_RecoveryTimeGangguan_DOC.ts
new file mode 100644
index 0000000..299848f
--- /dev/null
+++ b/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_RecoveryTimeGangguan_DOC.ts
@@ -0,0 +1,288 @@
+import { formatWaktu } from "@/components/Form/FiltersType/reference";
+import { getMonthName } from "@/utils/texts";
+
+const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+const date = new Date().getDate()
+const month = new Date().toLocaleString('id-ID', { month: 'long' })
+const year = new Date().getFullYear()
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var 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 += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.ulp ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+    <th rowspan="3">No</th>
+    <th rowspan="3">Nama Unit</th>
+    <th colspan="6">Jumlah RCT Kali Gangguan</th>
+  </tr>
+  <tr>
+    <th colspan="3">MOM</th>
+    <th colspan="3">YOY</th>
+  </tr>
+  <tr>
+    <th>${getMonthName(reportMeta.lastMonth)} ${reportMeta.lastYearMoM}</th>
+    <th>${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}</th>
+    <th>%</th>
+    <th>s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.lastYear}</th>
+    <th>s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}</th>
+    <th>%</th>
+  </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.nama_ulp}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : ''}</td>`;
+    cr += `<td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : ''}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+          <th>No</th>
+          <th>ULP</th>
+          <th>No Laporan</th>
+          <th>Tgl/ Jam Lapor</th>
+          <th>Tgl/ Jam Datang</th>
+          <th>Tgl/ Jam Nyala</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Durasi Penugasan Regu</th>
+          <th>Durasi Perjalanan Regu</th>
+          <th>Dispatch Oleh</th>
+          <th>IDPEL/NO METER</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Sumber Lapor</th>
+          <th>Diselesaikan Oleh</th>
+          <th>Status</th>
+          <th>Referensi Marking</th>
+          <th>Kode Gangguan</th>
+          <th>Jenis Gangguan</th>
+          <th>Tindakan</th>
+        </tr>
+      </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_ResponseTimeGangguan_DOC.ts b/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_ResponseTimeGangguan_DOC.ts
new file mode 100644
index 0000000..299848f
--- /dev/null
+++ b/src/report/Monalisa/Gangguan/Rekap/doc/MonalisaGR_ResponseTimeGangguan_DOC.ts
@@ -0,0 +1,288 @@
+import { formatWaktu } from "@/components/Form/FiltersType/reference";
+import { getMonthName } from "@/utils/texts";
+
+const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+const date = new Date().getDate()
+const month = new Date().toLocaleString('id-ID', { month: 'long' })
+const year = new Date().getFullYear()
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var 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 += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.ulp ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+    <th rowspan="3">No</th>
+    <th rowspan="3">Nama Unit</th>
+    <th colspan="6">Jumlah RCT Kali Gangguan</th>
+  </tr>
+  <tr>
+    <th colspan="3">MOM</th>
+    <th colspan="3">YOY</th>
+  </tr>
+  <tr>
+    <th>${getMonthName(reportMeta.lastMonth)} ${reportMeta.lastYearMoM}</th>
+    <th>${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}</th>
+    <th>%</th>
+    <th>s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.lastYear}</th>
+    <th>s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}</th>
+    <th>%</th>
+  </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.nama_ulp}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : ''}</td>`;
+    cr += `<td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : ''}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+          <th>No</th>
+          <th>ULP</th>
+          <th>No Laporan</th>
+          <th>Tgl/ Jam Lapor</th>
+          <th>Tgl/ Jam Datang</th>
+          <th>Tgl/ Jam Nyala</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Durasi Penugasan Regu</th>
+          <th>Durasi Perjalanan Regu</th>
+          <th>Dispatch Oleh</th>
+          <th>IDPEL/NO METER</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Sumber Lapor</th>
+          <th>Diselesaikan Oleh</th>
+          <th>Status</th>
+          <th>Referensi Marking</th>
+          <th>Kode Gangguan</th>
+          <th>Jenis Gangguan</th>
+          <th>Tindakan</th>
+        </tr>
+      </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.ts b/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.ts
index 71d0246..ea910b2 100644
--- a/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.ts
+++ b/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.ts
@@ -20,6 +20,7 @@ import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { getMonthNameShort } from '@/utils/texts'
+import { exportDetailToWord, exportToWord } from './doc/MonalisaLB_AgingComplaint_DOC'
 
 const reportName = '(Monalisa) Aging Complaint'
 const fontSize = 5
@@ -581,5 +582,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
-
-export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, null)
+}
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, null)
+}
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX ,exportToDOCX,exportDetailToDOCX}
diff --git a/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.ts b/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.ts
index ad15528..4a0647f 100644
--- a/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.ts
+++ b/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.ts
@@ -18,6 +18,7 @@ import autoTable from 'jspdf-autotable'
 import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber } from '@/utils/numbers'
+import { exportToWord } from './doc/MonalisaLB_EnergyNotSales_DOC'
 
 const reportName = '(Monalisa) Energy Not Sales (ENS)'
 const fontSize = 5
@@ -327,5 +328,8 @@ const exportToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, null)
+}
 
-export { exportToPDF, exportToXLSX }
+export { exportToPDF, exportToXLSX, exportToDOCX}
diff --git a/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.ts b/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.ts
index 5336c2a..1a03e7c 100644
--- a/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.ts
+++ b/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.ts
@@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 import { getMonthNameShort } from '@/utils/texts'
+import { exportToWord } from './doc/MonalisaLB_KADDalamPelaporan_DOC'
 
 const reportName = '(Monalisa) Kepatuhan dan Akurasi Dalam Pelaporan'
 const fontSize = 5
@@ -361,5 +362,8 @@ const exportToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, null)
+}
 
-export { exportToPDF, exportToXLSX }
+export { exportToPDF, exportToXLSX, exportToDOCX}
diff --git a/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.ts b/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.ts
index 8243d98..8b4d877 100644
--- a/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.ts
+++ b/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.ts
@@ -20,6 +20,7 @@ import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { getMonthNameShort } from '@/utils/texts'
+import { exportDetailToWord, exportToWord } from './doc/MonalisaLB_PenurunanJumlahKomplain_DOC'
 
 const reportName = '(Monalisa) Penurunan Jumlah Komplain'
 const fontSize = 5
@@ -713,5 +714,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
-
-export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, null)
+}
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, null)
+}
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }
diff --git a/src/report/Monalisa/Laporan/Bulanan/doc/MonalisaLB_AgingComplaint_DOC.ts b/src/report/Monalisa/Laporan/Bulanan/doc/MonalisaLB_AgingComplaint_DOC.ts
new file mode 100644
index 0000000..642c258
--- /dev/null
+++ b/src/report/Monalisa/Laporan/Bulanan/doc/MonalisaLB_AgingComplaint_DOC.ts
@@ -0,0 +1,288 @@
+import { formatWaktu } from "@/components/Form/FiltersType/reference";
+import { getMonthName, getMonthNameShort } from "@/utils/texts";
+const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+const date = new Date().getDate()
+const month = new Date().toLocaleString('id-ID', { month: 'long' })
+const year = new Date().getFullYear()
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < 5; index++) {
+    const element = rawData[index];
+    var 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 += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.ulp ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <table>
+       <tr>
+         <th rowspan="3">Nama Unit</th>
+         <th colspan="4">Aging Complains</th>
+         <th colspan="2">% Aging Complains</th>
+         <th rowspan="3">% Rata2 Aging Complains</th>
+       </tr>
+       <tr>
+         <th colspan="2">Rata2 RCT Gangguan</th>
+         <th colspan="2">Rata2 RCT Keluhan</th>
+         <th rowspan="2">G</th>
+         <th rowspan="2">K</th>
+       </tr>
+       <tr>
+         <th>${getMonthNameShort(reportMeta.currentMonth)} ${reportMeta.currentYear} SLA (Menit)</th>
+         <th>${getMonthNameShort(reportMeta.currentMonth)} ${reportMeta.currentYear} SLA (Jam)</th>
+         <th>${getMonthNameShort(reportMeta.currentMonth)} ${reportMeta.currentYear} SLA (Menit)</th>
+         <th>${getMonthNameShort(reportMeta.currentMonth)} ${reportMeta.currentYear} SLA (Jam)</th>
+       </tr>
+       <tr>
+         <td>1</td>
+         <td>2</td>
+         <td>3</td>
+         <td>4</td>
+         <td>5</td>
+         <td>6 = 1-((2-3)/3))*100)</td>
+         <td>7 = 1-((4-5)/5))*100)</td>
+         <td>8 = (6+7)/2</td>
+       </tr>
+     </table>
+     
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.nama_uid}</td>`;
+    cr += `<td>${item.nama_ulp}</td>`;
+    cr += `<td>${item.id_pelanggan}</td>`;
+    cr += `<td>${item.nama_pelanggan}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += `<td>${item.penyebab}</td>`;
+    cr += `<td>${item.kode_gangguan}</td>`;
+    cr += `<td>${item.jenis_gangguan}</td>`;
+    cr += `<td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-'}</td>`;
+    cr += `<td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-'}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+       <th>No</th>
+       <th>No Laporan</th>
+       <th>UID/UIW</th>
+       <th>UP3</th>
+       <th>ULP</th>
+       <th>ID Pelanggan</th>
+       <th>Nama Pelanggan</th>
+       <th>Nama Pelapor</th>
+       <th>Alamat Pelapor</th>
+       <th>No Telp Pelapor</th>
+       <th>Keterangan Pelapor</th>
+       <th>Penyebab</th>
+       <th>Kode Gangguan</th>
+       <th>Jenis Gangguan</th>
+       <th>Durasi Response Time</th>
+       <th>Durasi Recovery Time</th>
+       <th>Tgl Lapor</th>
+     </tr>
+      </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Monalisa/Laporan/Bulanan/doc/MonalisaLB_EnergyNotSales_DOC.ts b/src/report/Monalisa/Laporan/Bulanan/doc/MonalisaLB_EnergyNotSales_DOC.ts
new file mode 100644
index 0000000..fda4a0c
--- /dev/null
+++ b/src/report/Monalisa/Laporan/Bulanan/doc/MonalisaLB_EnergyNotSales_DOC.ts
@@ -0,0 +1,289 @@
+import { formatWaktu } from "@/components/Form/FiltersType/reference";
+import { getMonthName } from "@/utils/texts";
+const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+const date = new Date().getDate()
+const month = new Date().toLocaleString('id-ID', { month: 'long' })
+const year = new Date().getFullYear()
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < 5; index++) {
+    const element = rawData[index];
+    var 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 += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.ulp ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+       <th rowspan="2">Nama Unit</th>
+       <th colspan="3">ENS (Distribusi)</th>
+       <th rowspan="2">Total</th>
+       <th rowspan="2">KPI ENS</th>
+     </tr>
+     <tr>
+       <th>Terencana</th>
+       <th>Tidak Terencana</th>
+       <th>Bencana Alam</th>
+     </tr>
+     <tr>
+       <td>1</td>
+       <td>2</td>
+       <td>3</td>
+       <td>4</td>
+       <td>5 = 2+3+4</td>
+       <td>6 = 2+3</td>
+     </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.nama_ulp}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : ''}</td>`;
+    cr += `<td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : ''}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+          <th>No</th>
+          <th>ULP</th>
+          <th>No Laporan</th>
+          <th>Tgl/ Jam Lapor</th>
+          <th>Tgl/ Jam Datang</th>
+          <th>Tgl/ Jam Nyala</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Durasi Penugasan Regu</th>
+          <th>Durasi Perjalanan Regu</th>
+          <th>Dispatch Oleh</th>
+          <th>IDPEL/NO METER</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Sumber Lapor</th>
+          <th>Diselesaikan Oleh</th>
+          <th>Status</th>
+          <th>Referensi Marking</th>
+          <th>Kode Gangguan</th>
+          <th>Jenis Gangguan</th>
+          <th>Tindakan</th>
+        </tr>
+      </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Monalisa/Laporan/Bulanan/doc/MonalisaLB_KADDalamPelaporan_DOC.ts b/src/report/Monalisa/Laporan/Bulanan/doc/MonalisaLB_KADDalamPelaporan_DOC.ts
new file mode 100644
index 0000000..0fa8bbb
--- /dev/null
+++ b/src/report/Monalisa/Laporan/Bulanan/doc/MonalisaLB_KADDalamPelaporan_DOC.ts
@@ -0,0 +1,284 @@
+import { formatWaktu } from "@/components/Form/FiltersType/reference";
+import { getMonthName, getMonthNameShort } from "@/utils/texts";
+const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+const date = new Date().getDate()
+const month = new Date().toLocaleString('id-ID', { month: 'long' })
+const year = new Date().getFullYear()
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < 5; index++) {
+    const element = rawData[index];
+    var 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 += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.ulp ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <th colspan="2">Keluhan Berulang</th>
+       </tr>
+       <tr>
+         <th>${getMonthNameShort(reportMeta.currentMonth)} ${reportMeta.currentYear} Total Gangguan</th>
+         <th>${getMonthNameShort(reportMeta.currentMonth)} ${reportMeta.currentYear} Total Keluhan</th>
+       </tr>
+       <tr>
+         <td>1</td>
+         <td>2</td>
+         <td>3</td>
+         <td>4</td>
+         <td>5</td>
+         <td>6 = ((2/3)+(4/5))/2)*100</td>
+       </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.nama_ulp}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : ''}</td>`;
+    cr += `<td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : ''}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+          <th>No</th>
+          <th>ULP</th>
+          <th>No Laporan</th>
+          <th>Tgl/ Jam Lapor</th>
+          <th>Tgl/ Jam Datang</th>
+          <th>Tgl/ Jam Nyala</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Durasi Penugasan Regu</th>
+          <th>Durasi Perjalanan Regu</th>
+          <th>Dispatch Oleh</th>
+          <th>IDPEL/NO METER</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Sumber Lapor</th>
+          <th>Diselesaikan Oleh</th>
+          <th>Status</th>
+          <th>Referensi Marking</th>
+          <th>Kode Gangguan</th>
+          <th>Jenis Gangguan</th>
+          <th>Tindakan</th>
+        </tr>
+      </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Monalisa/Laporan/Bulanan/doc/MonalisaLB_PenurunanJumlahKomplain_DOC.ts b/src/report/Monalisa/Laporan/Bulanan/doc/MonalisaLB_PenurunanJumlahKomplain_DOC.ts
new file mode 100644
index 0000000..7f78167
--- /dev/null
+++ b/src/report/Monalisa/Laporan/Bulanan/doc/MonalisaLB_PenurunanJumlahKomplain_DOC.ts
@@ -0,0 +1,320 @@
+import { formatWaktu } from "@/components/Form/FiltersType/reference";
+import { getMonthName, getMonthNameShort } from "@/utils/texts";
+const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+const date = new Date().getDate()
+const month = new Date().toLocaleString('id-ID', { month: 'long' })
+const year = new Date().getFullYear()
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < 5; index++) {
+    const element = rawData[index];
+    var 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 += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.ulp ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+       <th rowspan="3">Nama Unit</th>
+       <th colspan="6">${getMonthNameShort(reportMeta.currentMonth)} ${reportMeta.lastYear}</th>
+       <th colspan="6">${getMonthNameShort(reportMeta.currentMonth)} ${reportMeta.currentYear}</th>
+       <th colspan="3">Delta Penurunan</th>
+       <th colspan="4">% Penurunan YoY</th>
+     </tr>
+     <tr>
+       <th colspan="2">Keluhan</th>
+       <th colspan="2">Gangguan</th>
+       <th>Total</th>
+       <th>Keluhan</th>
+       <th colspan="2">Gangguan</th>
+       <th>Total</th>
+       <th>Keluhan</th>
+       <th colspan="2">Gangguan</th>
+       <th>Total</th>
+       <th>Keluhan</th>
+       <th colspan="2">Gangguan</th>
+       <th>Total</th>
+       <th>% Total</th>
+     </tr>
+     <tr>
+       <th>Keluhan</th>
+       <th>Gangguan</th>
+       <th>Total</th>
+       <th>Keluhan</th>
+       <th>Gangguan</th>
+       <th>Total</th>
+       <th>Keluhan</th>
+       <th>Gangguan</th>
+       <th>Total</th>
+       <th>Keluhan</th>
+       <th>Gangguan</th>
+       <th>Total</th>
+       <th>Keluhan</th>
+       <th>Gangguan</th>
+       <th>Total</th>
+       <th>Keluhan</th>
+       <th>Gangguan</th>
+       <th>Total</th>
+     </tr>
+     <tr>
+       <td>1</td>
+       <td>2</td>
+       <td>3</td>
+       <td>4</td>
+       <td>5</td>
+       <td>6=4+5</td>
+       <td>7=2+3+6</td>
+       <td>8</td>
+       <td>9</td>
+       <td>10</td>
+       <td>11</td>
+       <td>12=10+11</td>
+       <td>13=8+9+12</td>
+       <td>14=2-8</td>
+       <td>15=3-9</td>
+       <td>16=6-12</td>
+       <td>17=40%*(14/2)</td>
+       <td>18=40%*(15/3)</td>
+       <td>19=20%*(16/6)</td>
+       <td>20=17+18+19</td>
+     </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.nama_uid}</td>`;
+    cr += `<td>${item.nama_ulp}</td>`;
+    cr += `<td>${item.id_pelanggan}</td>`;
+    cr += `<td>${item.nama_pelanggan}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += `<td>${item.penyebab}</td>`;
+    cr += `<td>${item.kode_gangguan}</td>`;
+    cr += `<td>${item.jenis_gangguan}</td>`;
+    cr += `<td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : ''}</td>`;
+    cr += `<td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : ''}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+      <th>No</th>
+      <th>No Laporan</th>
+      <th>UID/UIW</th>
+      <th>UP3</th>
+      <th>ULP</th>
+      <th>ID Pelanggan</th>
+      <th>Nama Pelanggan</th>
+      <th>Nama Pelapor</th>
+      <th>Alamat Pelapor</th>
+      <th>No Telp Pelapor</th>
+      <th>Keterangan Pelapor</th>
+      <th>Penyebab</th>
+      <th>Kode Gangguan</th>
+      <th>Jenis Gangguan</th>
+      <th>Durasi Response Time</th>
+      <th>Durasi Recovery Time</th>
+      <th>Tgl Lapor</th>
+    </tr>
+      </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.ts b/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.ts
index 306dfdb..3a5e0f2 100644
--- a/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.ts
+++ b/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.ts
@@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 import { getMonthNameShort } from '@/utils/texts'
+import { exportToWord } from './doc/MonalisaLK_AgingComplaint_DOC'
 
 const reportName = 'Aging Complaint'
 const fontSize = 5
@@ -414,5 +415,8 @@ const exportToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, null)
+}
 
-export { exportToPDF, exportToXLSX }
+export { exportToPDF, exportToXLSX ,exportToDOCX}
diff --git a/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.ts b/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.ts
index d8c8e3a..6f234cf 100644
--- a/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.ts
+++ b/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.ts
@@ -18,6 +18,7 @@ import autoTable from 'jspdf-autotable'
 import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber } from '@/utils/numbers'
+import { exportToWord } from './doc/MonalisaLK_EnergyNotSales_DOC'
 
 const reportName = 'Energy Not Sales (ENS)'
 const fontSize = 5
@@ -327,5 +328,8 @@ const exportToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, null)
+}
 
-export { exportToPDF, exportToXLSX }
+export { exportToPDF, exportToXLSX , exportToDOCX}
diff --git a/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.ts b/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.ts
index b77acc9..ae3eee3 100644
--- a/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.ts
+++ b/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.ts
@@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 import { getMonthNameShort } from '@/utils/texts'
+import { exportToWord } from './doc/MonalisaLK_KDADPelaporan_DOC'
 
 const reportName = 'Kepatuhan dan Akurasi Dalam Pelaporan'
 const fontSize = 5
@@ -361,5 +362,8 @@ const exportToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, null)
+}
 
-export { exportToPDF, exportToXLSX }
+export { exportToPDF, exportToXLSX,exportToDOCX }
diff --git a/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.ts b/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.ts
index 0a8a7d2..b84d56e 100644
--- a/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.ts
+++ b/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.ts
@@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 import { getMonthNameShort } from '@/utils/texts'
+import { exportToWord } from './doc/MonalisaLK_PenurunanJumlahKomplain_DOC'
 
 const reportName = 'Penurunan Jumlah Komplain'
 const fontSize = 5
@@ -547,5 +548,8 @@ const exportToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, null)
+}
 
-export { exportToPDF, exportToXLSX }
+export { exportToPDF, exportToXLSX,exportToDOCX }
diff --git a/src/report/Monalisa/Laporan/Kumulatif/doc/MonalisaLK_AgingComplaint_DOC.ts b/src/report/Monalisa/Laporan/Kumulatif/doc/MonalisaLK_AgingComplaint_DOC.ts
new file mode 100644
index 0000000..af3b193
--- /dev/null
+++ b/src/report/Monalisa/Laporan/Kumulatif/doc/MonalisaLK_AgingComplaint_DOC.ts
@@ -0,0 +1,298 @@
+import { formatWaktu } from "@/components/Form/FiltersType/reference";
+import { getMonthName, getMonthNameShort } from "@/utils/texts";
+const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+const date = new Date().getDate()
+const month = new Date().toLocaleString('id-ID', { month: 'long' })
+const year = new Date().getFullYear()
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < 5; index++) {
+    const element = rawData[index];
+    var 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 += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.ulp ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+    <th rowspan="3">Nama Unit</th>
+    <th colspan="4">Aging Complains</th>
+    <th colspan="2">% Aging Complains</th>
+    <th rowspan="3">% Rata2 Aging Complains</th>
+  </tr>
+  <tr>
+    <th colspan="2">Rata2 RCT Gangguan</th>
+    <th colspan="2">Rata2 RCT Keluhan</th>
+    <th rowspan="2">G</th>
+    <th rowspan="2">K</th>
+  </tr>
+  <tr>
+    <th>s.d. ${getMonthNameShort(reportMeta.currentMonth)} ${reportMeta.currentYear} SLA (Menit)</th>
+    <th>s.d. ${getMonthNameShort(reportMeta.currentMonth)} ${reportMeta.currentYear} SLA (Jam)</th>
+    <th>s.d. ${getMonthNameShort(reportMeta.currentMonth)} ${reportMeta.currentYear} SLA (Menit)</th>
+    <th>s.d. ${getMonthNameShort(reportMeta.currentMonth)} ${reportMeta.currentYear} SLA (Jam)</th>
+  </tr>
+  <tr>
+    <td>1</td>
+    <td>2</td>
+    <td>3</td>
+    <td>4</td>
+    <td>5</td>
+    <td>6 = 1-((2-3)/3))*100)</td>
+    <td>7 = 1-((4-5)/5))*100)</td>
+    <td>8 = (6+7)/2</td>
+  </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.nama_ulp}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : ''}</td>`;
+    cr += `<td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : ''}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+          <th>No</th>
+          <th>ULP</th>
+          <th>No Laporan</th>
+          <th>Tgl/ Jam Lapor</th>
+          <th>Tgl/ Jam Datang</th>
+          <th>Tgl/ Jam Nyala</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Durasi Penugasan Regu</th>
+          <th>Durasi Perjalanan Regu</th>
+          <th>Dispatch Oleh</th>
+          <th>IDPEL/NO METER</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Sumber Lapor</th>
+          <th>Diselesaikan Oleh</th>
+          <th>Status</th>
+          <th>Referensi Marking</th>
+          <th>Kode Gangguan</th>
+          <th>Jenis Gangguan</th>
+          <th>Tindakan</th>
+        </tr>
+      </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Monalisa/Laporan/Kumulatif/doc/MonalisaLK_EnergyNotSales_DOC.ts b/src/report/Monalisa/Laporan/Kumulatif/doc/MonalisaLK_EnergyNotSales_DOC.ts
new file mode 100644
index 0000000..624a1a9
--- /dev/null
+++ b/src/report/Monalisa/Laporan/Kumulatif/doc/MonalisaLK_EnergyNotSales_DOC.ts
@@ -0,0 +1,289 @@
+import { formatWaktu } from "@/components/Form/FiltersType/reference";
+import { getMonthName } from "@/utils/texts";
+const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+const date = new Date().getDate()
+const month = new Date().toLocaleString('id-ID', { month: 'long' })
+const year = new Date().getFullYear()
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < 5; index++) {
+    const element = rawData[index];
+    var 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 += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.ulp ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+    <th rowspan="2">Nama Unit</th>
+    <th colspan="3">ENS (Distribusi)</th>
+    <th rowspan="2">Total</th>
+    <th rowspan="2">KPI ENS</th>
+  </tr>
+  <tr>
+    <th>Terencana</th>
+    <th>Tidak Terencana</th>
+    <th>Bencana Alam</th>
+  </tr>
+  <tr>
+    <td>1</td>
+    <td>2</td>
+    <td>3</td>
+    <td>4</td>
+    <td>5 = 2+3+4</td>
+    <td>6 = 2+3</td>
+  </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.nama_ulp}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : ''}</td>`;
+    cr += `<td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : ''}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+          <th>No</th>
+          <th>ULP</th>
+          <th>No Laporan</th>
+          <th>Tgl/ Jam Lapor</th>
+          <th>Tgl/ Jam Datang</th>
+          <th>Tgl/ Jam Nyala</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Durasi Penugasan Regu</th>
+          <th>Durasi Perjalanan Regu</th>
+          <th>Dispatch Oleh</th>
+          <th>IDPEL/NO METER</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Sumber Lapor</th>
+          <th>Diselesaikan Oleh</th>
+          <th>Status</th>
+          <th>Referensi Marking</th>
+          <th>Kode Gangguan</th>
+          <th>Jenis Gangguan</th>
+          <th>Tindakan</th>
+        </tr>
+      </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Monalisa/Laporan/Kumulatif/doc/MonalisaLK_KDADPelaporan_DOC.ts b/src/report/Monalisa/Laporan/Kumulatif/doc/MonalisaLK_KDADPelaporan_DOC.ts
new file mode 100644
index 0000000..81e9d99
--- /dev/null
+++ b/src/report/Monalisa/Laporan/Kumulatif/doc/MonalisaLK_KDADPelaporan_DOC.ts
@@ -0,0 +1,291 @@
+import { formatWaktu } from "@/components/Form/FiltersType/reference";
+import { getMonthName, getMonthNameShort } from "@/utils/texts";
+const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+const date = new Date().getDate()
+const month = new Date().toLocaleString('id-ID', { month: 'long' })
+const year = new Date().getFullYear()
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < 5; index++) {
+    const element = rawData[index];
+    var 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 += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.ulp ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+    <th rowspan="3">Nama Unit</th>
+    <th colspan="4">Kepatuhan dan Akurasi APKT</th>
+    <th rowspan="3">Komplain Pelanggan (%)</th>
+  </tr>
+  <tr>
+    <th colspan="2">Gangguan Berulang</th>
+    <th colspan="2">Keluhan Berulang</th>
+  </tr>
+  <tr>
+    <th>s.d. ${getMonthNameShort(reportMeta.currentMonth)} ${reportMeta.currentYear} Total Gangguan</th>
+    <th>s.d. ${getMonthNameShort(reportMeta.currentMonth)} ${reportMeta.currentYear} Total Keluhan</th>
+  </tr>
+  <tr>
+    <td>1</td>
+    <td>2</td>
+    <td>3</td>
+    <td>4</td>
+    <td>5</td>
+    <td>6 = ((2/3)+(4/5))/2)*100</td>
+  </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.nama_ulp}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : ''}</td>`;
+    cr += `<td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : ''}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+          <th>No</th>
+          <th>ULP</th>
+          <th>No Laporan</th>
+          <th>Tgl/ Jam Lapor</th>
+          <th>Tgl/ Jam Datang</th>
+          <th>Tgl/ Jam Nyala</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Durasi Penugasan Regu</th>
+          <th>Durasi Perjalanan Regu</th>
+          <th>Dispatch Oleh</th>
+          <th>IDPEL/NO METER</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Sumber Lapor</th>
+          <th>Diselesaikan Oleh</th>
+          <th>Status</th>
+          <th>Referensi Marking</th>
+          <th>Kode Gangguan</th>
+          <th>Jenis Gangguan</th>
+          <th>Tindakan</th>
+        </tr>
+      </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Monalisa/Laporan/Kumulatif/doc/MonalisaLK_PenurunanJumlahKomplain_DOC.ts b/src/report/Monalisa/Laporan/Kumulatif/doc/MonalisaLK_PenurunanJumlahKomplain_DOC.ts
new file mode 100644
index 0000000..2af1b76
--- /dev/null
+++ b/src/report/Monalisa/Laporan/Kumulatif/doc/MonalisaLK_PenurunanJumlahKomplain_DOC.ts
@@ -0,0 +1,321 @@
+import { formatWaktu } from "@/components/Form/FiltersType/reference";
+import { getMonthName, getMonthNameShort } from "@/utils/texts";
+const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+const date = new Date().getDate()
+const month = new Date().toLocaleString('id-ID', { month: 'long' })
+const year = new Date().getFullYear()
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < 5; index++) {
+    const element = rawData[index];
+    var 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 += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.ulp ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+       <th rowspan="3">Nama Unit</th>
+       <th colspan="6">s.d. ${getMonthNameShort(reportMeta.currentMonth)} ${reportMeta.lastYear}</th>
+       <th colspan="6">s.d. ${getMonthNameShort(reportMeta.currentMonth)} ${reportMeta.currentYear}</th>
+       <th colspan="3">Delta Penurunan</th>
+       <th colspan="4">% Penurunan YoY</th>
+     </tr>
+     <tr>
+       <th rowspan="2">Keluhan</th>
+       <th rowspan="2">Gangguan</th>
+       <th colspan="3">Informasi</th>
+       <th rowspan="2">Total Komplain</th>
+       <th rowspan="2">Keluhan</th>
+       <th rowspan="2">Gangguan</th>
+       <th colspan="3">Informasi</th>
+       <th rowspan="2">Total Komplain</th>
+       <th rowspan="2">Keluhan</th>
+       <th rowspan="2">Gangguan</th>
+       <th rowspan="2">Informasi</th>
+       <th rowspan="2">% Total</th>
+     </tr>
+     <tr>
+       <th>Keluhan</th>
+       <th>Gangguan</th>
+       <th>Total</th>
+       <th>Keluhan</th>
+       <th>Gangguan</th>
+       <th>Total</th>
+     </tr>
+     <tr>
+       <td>1</td>
+       <td>2</td>
+       <td>3</td>
+       <td>4</td>
+       <td>5</td>
+       <td>6=4+5</td>
+       <td>7=2+3+6</td>
+       <td>8</td>
+       <td>9</td>
+       <td>10</td>
+       <td>11</td>
+       <td>12=10+11</td>
+       <td>13=8+9+12</td>
+       <td>14=2-8</td>
+       <td>15=3-9</td>
+       <td>16=6-12</td>
+       <td>17=40%*(14/2)</td>
+       <td>18=40%*(15/3)</td>
+       <td>19=20%*(16/6)</td>
+       <td>20=17+18+19</td>
+     </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var 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>${filename}</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;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.nama_ulp}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : ''}</td>`;
+    cr += `<td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : ''}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Layanan Pelanggan</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.ulp.name.toUpperCase() : 'Semua Unit Layanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    
+    <table class="main">
+       <thead>
+       <tr>
+          <th>No</th>
+          <th>ULP</th>
+          <th>No Laporan</th>
+          <th>Tgl/ Jam Lapor</th>
+          <th>Tgl/ Jam Datang</th>
+          <th>Tgl/ Jam Nyala</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Durasi Penugasan Regu</th>
+          <th>Durasi Perjalanan Regu</th>
+          <th>Dispatch Oleh</th>
+          <th>IDPEL/NO METER</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Sumber Lapor</th>
+          <th>Diselesaikan Oleh</th>
+          <th>Status</th>
+          <th>Referensi Marking</th>
+          <th>Kode Gangguan</th>
+          <th>Jenis Gangguan</th>
+          <th>Tindakan</th>
+        </tr>
+      </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = `<br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer></div></body></html>`;
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file