From 0114347427f1edaea446c438372e4d83cf38bc25 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Wed, 3 Apr 2024 21:02:54 +0700
Subject: [PATCH] feat: create export pdf, xlsx and lihat laporan in monalisa
 laporan kpi

---
 .../Bulanan/MonalisaLB_AgingComplaint.vue     |  71 +-
 .../Bulanan/MonalisaLB_EnergyNotSales.vue     |  57 +-
 .../Bulanan/MonalisaLB_KADDalamPelaporan.vue  |  63 +-
 .../MonalisaLB_PenurunanJumlahKomplain.vue    |  75 +-
 .../Kumulatif/MonalisaLK_AgingComplaint.vue   |  60 +-
 .../Kumulatif/MonalisaLK_EnergyNotSales.vue   |  56 +-
 .../Kumulatif/MonalisaLK_KDADPelaporan.vue    |  62 +-
 .../MonalisaLK_PenurunanJumlahKomplain.vue    |  62 +-
 .../Bulanan/MonalisaLB_AgingComplaint.ts      | 585 ++++++++++++++
 .../Bulanan/MonalisaLB_EnergyNotSales.ts      | 331 ++++++++
 .../Bulanan/MonalisaLB_KADDalamPelaporan.ts   | 365 +++++++++
 .../MonalisaLB_PenurunanJumlahKomplain.ts     | 717 ++++++++++++++++++
 .../Kumulatif/MonalisaLK_AgingComplaint.ts    | 418 ++++++++++
 .../Kumulatif/MonalisaLK_EnergyNotSales.ts    | 331 ++++++++
 .../Kumulatif/MonalisaLK_KDADPelaporan.ts     | 365 +++++++++
 .../MonalisaLK_PenurunanJumlahKomplain.ts     | 551 ++++++++++++++
 16 files changed, 3935 insertions(+), 234 deletions(-)
 create mode 100644 src/report/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.ts
 create mode 100644 src/report/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.ts
 create mode 100644 src/report/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.ts
 create mode 100644 src/report/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.ts
 create mode 100644 src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.ts
 create mode 100644 src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.ts
 create mode 100644 src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.ts
 create mode 100644 src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.ts

diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
index dc48aea..721dc79 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     :report-button="true"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
@@ -345,7 +346,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -647,12 +648,6 @@ import {
   DxGroupItem,
   DxGrouping
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { getMonthName, getMonthNameShort } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
@@ -661,6 +656,12 @@ import InputText from '@/components/InputText.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -680,33 +681,33 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const reportMeta = ref({
+  regional: { id: 0, name: 'Semua Regional' },
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
+  tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
+  periode: '',
+  currentMonth: currentMonth.value,
+  currentYear: currentYear.value
+})
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
-    const doc = new jsPDF()
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
+    exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+  }
+}
 
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
@@ -797,6 +798,18 @@ const filterData = async (params: any) => {
       } else {
         data.value = []
       }
+
+      reportMeta.value = {
+        regional: regional,
+        uid: uid,
+        up3: up3,
+        ulp: ulp,
+        bulan: bulan,
+        tahun: tahun,
+        periode: `${bulan.name} ${tahun.name}`,
+        currentMonth: currentMonth.value,
+        currentYear: currentYear.value
+      }
     })
     .catch((err) => {
       console.error(err)
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
index dd7d21d..a1fd584 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     :report-button="true"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
@@ -270,18 +271,16 @@ import {
   DxGroupItem,
   DxGrouping
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { getMonthName } from '@/utils/texts'
 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/Laporan/Bulanan/MonalisaLB_EnergyNotSales'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -301,35 +300,25 @@ const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
 const filters = ref()
+const reportMeta = ref({
+  regional: { id: 0, name: 'Semua Regional' },
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
+  tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
+  periode: ''
+})
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
-    const doc = new jsPDF()
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
+    exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
   }
 }
+
 const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
@@ -416,6 +405,16 @@ const filterData = async (params: any) => {
       } else {
         data.value = []
       }
+
+      reportMeta.value = {
+        regional: regional,
+        uid: uid,
+        up3: up3,
+        ulp: ulp,
+        bulan: bulan,
+        tahun: tahun,
+        periode: `${bulan.name} ${tahun.name}`
+      }
     })
     .catch((err) => {
       console.error(err)
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
index 2d3c898..7975c2c 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     :report-button="true"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
@@ -260,6 +261,7 @@
       </template>
     </DxDataGrid>
   </div>
+
   <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
@@ -282,18 +284,16 @@ import {
   DxGroupItem,
   DxGrouping
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
-import { getMonthNameShort } from '@/utils/texts'
+import { getMonthNameShort, getMonthName } from '@/utils/texts'
 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/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -313,33 +313,24 @@ const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
 const filters = ref()
+const reportMeta = ref({
+  regional: { id: 0, name: 'Semua Regional' },
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
+  tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
+  periode: '',
+  currentMonth: currentMonth.value,
+  currentYear: currentYear.value
+})
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
-    const doc = new jsPDF()
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
+    exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
   }
 }
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -384,6 +375,18 @@ const filterData = async (params: any) => {
       } else {
         data.value = []
       }
+
+      reportMeta.value = {
+        regional: regional,
+        uid: uid,
+        up3: up3,
+        ulp: ulp,
+        bulan: bulan,
+        tahun: tahun,
+        periode: `${bulan.name} ${tahun.name}`,
+        currentMonth: currentMonth.value,
+        currentYear: currentYear.value
+      }
     })
     .catch((err) => {
       console.error(err)
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
index f3490d7..a7a4bae 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     :report-button="true"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
@@ -670,7 +671,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -950,6 +951,7 @@
       </div>
     </div>
   </DetailDialog>
+
   <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
@@ -973,12 +975,6 @@ import {
   DxGrouping,
   DxPager
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
 import { getMonthNameShort } from '@/utils/texts'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
@@ -987,6 +983,13 @@ import InputText from '@/components/InputText.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import { getMonthName } from '@/utils/texts'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -1006,33 +1009,34 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const reportMeta = ref({
+  regional: { id: 0, name: 'Semua Regional' },
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
+  tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
+  periode: '',
+  currentMonth: currentMonth.value,
+  currentYear: currentYear.value,
+  lastYear: lastYear.value
+})
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
-    const doc = new jsPDF()
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
+    exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+  }
+}
 
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
@@ -1123,6 +1127,19 @@ const filterData = async (params: any) => {
       } else {
         data.value = []
       }
+
+      reportMeta.value = {
+        regional: regional,
+        uid: uid,
+        up3: up3,
+        ulp: ulp,
+        bulan: bulan,
+        tahun: tahun,
+        periode: `${bulan.name} ${tahun.name}`,
+        currentMonth: currentMonth.value,
+        currentYear: currentYear.value,
+        lastYear: lastYear.value
+      }
     })
     .catch((err) => {
       console.error(err)
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
index 0b0ba29..08d4b24 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -353,16 +354,14 @@ import {
   DxGroupItem,
   DxGrouping
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { getMonthName, getMonthNameShort } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import {
+  exportToPDF,
+  exportToXLSX
+} from '@/report/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -378,33 +377,24 @@ const loadingData = ref(false)
 const loadingSubData = ref(false)
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth() + 1)
+const reportMeta = ref({
+  regional: { id: 0, name: 'Semua Regional' },
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
+  tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
+  periode: '',
+  currentMonth: currentMonth.value,
+  currentYear: currentYear.value
+})
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
-    const doc = new jsPDF()
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
+    exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
   }
 }
 const getDetail = async () => {
@@ -491,6 +481,18 @@ const filterData = async (params: any) => {
       } else {
         data.value = []
       }
+
+      reportMeta.value = {
+        regional: regional,
+        uid: uid,
+        up3: up3,
+        ulp: ulp,
+        bulan: bulan,
+        tahun: tahun,
+        periode: `${bulan.name} ${tahun.name}`,
+        currentMonth: currentMonth.value,
+        currentYear: currentYear.value
+      }
     })
     .catch((err) => {
       console.error(err)
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
index cfa4fb3..38f44ab 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -270,18 +271,16 @@ import {
   DxGroupItem,
   DxGrouping
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { getMonthName } from '@/utils/texts'
 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/Laporan/Kumulatif/MonalisaLK_EnergyNotSales'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -301,33 +300,22 @@ const filters = ref()
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
+const reportMeta = ref({
+  regional: { id: 0, name: 'Semua Regional' },
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
+  tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
+  periode: ''
+})
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
-    const doc = new jsPDF()
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
+    exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
   }
 }
 const getDetail = async () => {
@@ -417,6 +405,16 @@ const filterData = async (params: any) => {
       } else {
         data.value = []
       }
+
+      reportMeta.value = {
+        regional: regional,
+        uid: uid,
+        up3: up3,
+        ulp: ulp,
+        bulan: bulan,
+        tahun: tahun,
+        periode: `${bulan.name} ${tahun.name}`
+      }
     })
     .catch((err) => {
       console.error(err)
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
index 2805431..f223aa5 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -282,18 +283,16 @@ import {
   DxGroupItem,
   DxGrouping
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
-import { getMonthNameShort } from '@/utils/texts'
+import { getMonthNameShort, getMonthName } from '@/utils/texts'
 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/Laporan/Kumulatif/MonalisaLK_KDADPelaporan'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -313,33 +312,24 @@ const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
 const filters = ref()
+const reportMeta = ref({
+  regional: { id: 0, name: 'Semua Regional' },
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
+  tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
+  periode: '',
+  currentMonth: currentMonth.value,
+  currentYear: currentYear.value
+})
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
-    const doc = new jsPDF()
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
+    exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
   }
 }
 const getDetail = async () => {
@@ -432,6 +422,18 @@ const filterData = async (params: any) => {
       } else {
         data.value = []
       }
+
+      reportMeta.value = {
+        regional: regional,
+        uid: uid,
+        up3: up3,
+        ulp: ulp,
+        bulan: bulan,
+        tahun: tahun,
+        periode: `${bulan.name} ${tahun.name}`,
+        currentMonth: currentMonth.value,
+        currentYear: currentYear.value
+      }
     })
     .catch((err) => {
       console.error(err)
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
index 9a78c86..b13dc83 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -729,18 +730,16 @@ import {
   DxGroupItem,
   DxGrouping
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 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/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -760,33 +759,25 @@ const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
 const filters = ref()
+const reportMeta = ref({
+  regional: { id: 0, name: 'Semua Regional' },
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
+  tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
+  periode: '',
+  currentMonth: currentMonth.value,
+  currentYear: currentYear.value,
+  lastYear: lastYear.value
+})
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
-    const doc = new jsPDF()
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
+    exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
   }
 }
 const getDetail = async () => {
@@ -876,6 +867,19 @@ const filterData = async (params: any) => {
       } else {
         data.value = []
       }
+
+      reportMeta.value = {
+        regional: regional,
+        uid: uid,
+        up3: up3,
+        ulp: ulp,
+        bulan: bulan,
+        tahun: tahun,
+        periode: `${bulan.name} ${tahun.name}`,
+        currentMonth: currentMonth.value,
+        currentYear: currentYear.value,
+        lastYear: lastYear.value
+      }
     })
     .catch((err) => {
       console.error(err)
diff --git a/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.ts b/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.ts
new file mode 100644
index 0000000..71d0246
--- /dev/null
+++ b/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.ts
@@ -0,0 +1,585 @@
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  PageOrientation
+} from 'docx'
+import { saveAs } from 'file-saver'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { Workbook } from 'exceljs'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { getMonthNameShort } from '@/utils/texts'
+
+const reportName = '(Monalisa) Aging Complaint'
+const fontSize = 5
+const detailFontSize = 3
+
+const groupingData = (data: any) => {
+  const groupedData: any = {}
+
+  data.forEach((item: any) => {
+    const { nama_regional } = item
+
+    if (!groupedData[nama_regional]) {
+      groupedData[nama_regional] = { data: [] }
+    }
+
+    groupedData[nama_regional].data.push(item)
+  })
+
+  for (const regional in groupedData) {
+    const data = groupedData[regional].data
+
+    data.forEach((item: any) => {
+      if (!groupedData[regional].summary) {
+        groupedData[regional].summary = {
+          avg_durasi_recovery_gangguan: [],
+          sla_gangguan: [],
+          avg_durasi_recovery_keluhan: [],
+          sla_keluhan: [],
+          aging_complaint_gangguan: [],
+          aging_complaint_keluhan: [],
+          avg_aging_complaint: []
+        }
+      }
+
+      groupedData[regional].summary.avg_durasi_recovery_gangguan.push(
+        item.avg_durasi_recovery_gangguan
+      )
+      groupedData[regional].summary.sla_gangguan.push(item.sla_gangguan)
+      groupedData[regional].summary.avg_durasi_recovery_keluhan.push(
+        item.avg_durasi_recovery_keluhan
+      )
+      groupedData[regional].summary.sla_keluhan.push(item.sla_keluhan)
+      groupedData[regional].summary.aging_complaint_gangguan.push(item.aging_complaint_gangguan)
+      groupedData[regional].summary.aging_complaint_keluhan.push(item.aging_complaint_keluhan)
+      groupedData[regional].summary.avg_aging_complaint.push(item.avg_aging_complaint)
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    avg_durasi_recovery_gangguan: [],
+    sla_gangguan: [],
+    avg_durasi_recovery_keluhan: [],
+    sla_keluhan: [],
+    aging_complaint_gangguan: [],
+    aging_complaint_keluhan: [],
+    avg_aging_complaint: []
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 8, styles: { fontStyle: 'bold' } }])
+
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    const avg_durasi_recovery_gangguan =
+      summary.avg_durasi_recovery_gangguan.reduce((a: number, b: number) => a + b, 0) /
+      summary.avg_durasi_recovery_gangguan.length
+    const sla_gangguan =
+      summary.sla_gangguan.reduce((a: number, b: number) => a + b, 0) / summary.sla_gangguan.length
+    const avg_durasi_recovery_keluhan =
+      summary.avg_durasi_recovery_keluhan.reduce((a: number, b: number) => a + b, 0) /
+      summary.avg_durasi_recovery_keluhan.length
+    const sla_keluhan =
+      summary.sla_keluhan.reduce((a: number, b: number) => a + b, 0) / summary.sla_keluhan.length
+    const aging_complaint_gangguan =
+      summary.aging_complaint_gangguan.reduce((a: number, b: number) => a + b, 0) /
+      summary.aging_complaint_gangguan.length
+    const aging_complaint_keluhan =
+      summary.aging_complaint_keluhan.reduce((a: number, b: number) => a + b, 0) /
+      summary.aging_complaint_keluhan.length
+    const avg_aging_complaint =
+      summary.avg_aging_complaint.reduce((a: number, b: number) => a + b, 0) /
+      summary.avg_aging_complaint.length
+
+    formattedData.push([
+      regional,
+      formatNumber(avg_durasi_recovery_gangguan),
+      formatNumber(sla_gangguan),
+      formatNumber(avg_durasi_recovery_keluhan),
+      formatNumber(sla_keluhan),
+      formatPercentage(aging_complaint_gangguan),
+      formatPercentage(aging_complaint_keluhan),
+      formatPercentage(avg_aging_complaint)
+    ])
+
+    total.avg_durasi_recovery_gangguan.push(avg_durasi_recovery_gangguan)
+    total.sla_gangguan.push(sla_gangguan)
+    total.avg_durasi_recovery_keluhan.push(avg_durasi_recovery_keluhan)
+    total.sla_keluhan.push(sla_keluhan)
+    total.aging_complaint_gangguan.push(aging_complaint_gangguan)
+    total.aging_complaint_keluhan.push(aging_complaint_keluhan)
+    total.avg_aging_complaint.push(avg_aging_complaint)
+  }
+
+  formattedData.push([
+    { content: 'RATA-RATA', styles: { fontStyle: 'bold' } },
+    formatNumber(
+      total.avg_durasi_recovery_gangguan.reduce((a: number, b: number) => a + b, 0) /
+        total.avg_durasi_recovery_gangguan.length
+    ),
+    formatNumber(
+      total.sla_gangguan.reduce((a: number, b: number) => a + b, 0) / total.sla_gangguan.length
+    ),
+    formatNumber(
+      total.avg_durasi_recovery_keluhan.reduce((a: number, b: number) => a + b, 0) /
+        total.avg_durasi_recovery_keluhan.length
+    ),
+    formatNumber(
+      total.sla_keluhan.reduce((a: number, b: number) => a + b, 0) / total.sla_keluhan.length
+    ),
+    formatPercentage(
+      total.aging_complaint_gangguan.reduce((a: number, b: number) => a + b, 0) /
+        total.aging_complaint_gangguan.length
+    ),
+    formatPercentage(
+      total.aging_complaint_keluhan.reduce((a: number, b: number) => a + b, 0) /
+        total.aging_complaint_keluhan.length
+    ),
+    formatPercentage(
+      total.avg_aging_complaint.reduce((a: number, b: number) => a + b, 0) /
+        total.avg_aging_complaint.length
+    )
+  ])
+
+  return formattedData
+}
+
+const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
+  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 data = formatData(rawData)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'UNIT INDUK', styles: { cellWidth: 40 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.uid
+          ? reportMeta.uid.name.toUpperCase()
+          : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'UNIT PELAKSANA PELAYANAN PELANGGAN',
+        ':',
+        reportMeta.up3
+          ? reportMeta.up3.name.toUpperCase()
+          : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'UNIT LAYANAN PELANGGAN',
+        ':',
+        reportMeta.ulp
+          ? reportMeta.ulp.name.toUpperCase()
+          : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'REGIONAL',
+        ':',
+        reportMeta.regional
+          ? reportMeta.regional.name.toUpperCase()
+          : 'Semua Regional'.toUpperCase()
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [[`${reportName}`.toUpperCase()], [reportMeta.periode]],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 23
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'Nama Unit',
+          rowSpan: 3
+        },
+        {
+          content: 'Aging Complains',
+          colSpan: 4
+        },
+        {
+          content: '% Aging Complains',
+          colSpan: 2
+        },
+        {
+          content: '% Rata2 Aging Complains',
+          rowSpan: 3
+        }
+      ],
+      [
+        {
+          content: 'Rata2 RCT Gangguan',
+          colSpan: 2
+        },
+        {
+          content: 'Rata2 RCT Keluhan',
+          colSpan: 2
+        },
+        {
+          content: 'G',
+          rowSpan: 2
+        },
+        {
+          content: 'K',
+          rowSpan: 2
+        }
+      ],
+      [
+        getMonthNameShort(reportMeta.currentMonth) + ' ' + reportMeta.currentYear,
+        'SLA (Menit)',
+        getMonthNameShort(reportMeta.currentMonth) + ' ' + reportMeta.currentYear,
+        'SLA (Jam)'
+      ],
+      ['1', '2', '3', '4', '5', '6 = 1-((2-3)/3))*100)', '7 = 1-((4-5)/5))*100)', '8 = (6+7)/2']
+    ],
+    body: data,
+    styles: {
+      fontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+
+      if (data.cell.text[0] === 'RATA-RATA') {
+        for (const key in data.row.cells) {
+          data.row.cells[key].styles.fillColor = [192, 192, 192]
+          data.row.cells[key].styles.fontStyle = 'bold'
+        }
+      }
+    },
+    startY: 30
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${day}, ${date}-${month}-${year}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
+    window.open(doc.output('bloburl'))
+  } else {
+    doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+      console.log('pdf berhasil disimpan')
+    })
+  }
+}
+
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  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 doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [['PT. PLN(Persero)']],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [[`Daftar Detail ${reportName}`.toUpperCase()], [reportMeta.periode]],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 18,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'UID/UIW',
+        'UP3',
+        'ULP',
+        'ID Pelanggan',
+        'Nama Pelanggan',
+        'Nama Pelaopr',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Penyebab',
+        'Kode Gangguan',
+        'Jenis Gangguan',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Tgl Lapor'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.nama_uid,
+      item.nama_ulp,
+      item.id_pelanggan,
+      item.nama_pelanggan,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.penyebab,
+      item.kode_gangguan,
+      item.jenis_gangguan,
+      item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-',
+      item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-',
+      item.waktu_lapor
+    ]),
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 24,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${day}, ${date}-${month}-${year}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `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()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(worksheet, 8, 1, reportMeta.periode, true)
+
+  worksheet.mergeCells('A1:H1')
+  worksheet.mergeCells('A2:H2')
+  worksheet.mergeCells('A3:H3')
+  worksheet.mergeCells('A4:H4')
+  worksheet.mergeCells('A5:H5')
+  worksheet.mergeCells('A7:H7')
+  worksheet.mergeCells('A8:H8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportDetailToXLSX = (reportMeta: any, e: any) => {
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(worksheet, 4, 1, reportMeta.periode, true)
+
+  worksheet.mergeCells('A1:Q1')
+  worksheet.mergeCells('A3:Q3')
+  worksheet.mergeCells('A4:Q4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
diff --git a/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.ts b/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.ts
new file mode 100644
index 0000000..ad15528
--- /dev/null
+++ b/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.ts
@@ -0,0 +1,331 @@
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  PageOrientation
+} from 'docx'
+import { saveAs } from 'file-saver'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { Workbook } from 'exceljs'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+import { formatNumber } from '@/utils/numbers'
+
+const reportName = '(Monalisa) Energy Not Sales (ENS)'
+const fontSize = 5
+
+const groupingData = (data: any) => {
+  const groupedData: any = {}
+
+  data.forEach((item: any) => {
+    const { nama_regional } = item
+
+    if (!groupedData[nama_regional]) {
+      groupedData[nama_regional] = { data: [] }
+    }
+
+    groupedData[nama_regional].data.push(item)
+  })
+
+  for (const regional in groupedData) {
+    const data = groupedData[regional].data
+
+    data.forEach((item: any) => {
+      if (!groupedData[regional].summary) {
+        groupedData[regional].summary = {
+          terencana: 0,
+          tidak_terencana: 0,
+          bencana_alam: 0
+        }
+      }
+
+      groupedData[regional].summary.terencana += item.terencana
+      groupedData[regional].summary.tidak_terencana += item.tidak_terencana
+      groupedData[regional].summary.bencana_alam += item.bencana_alam
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    terencana: 0,
+    tidak_terencana: 0,
+    bencana_alam: 0
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 6, styles: { fontStyle: 'bold' } }])
+
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    formattedData.push([
+      regional,
+      formatNumber(summary.terencana),
+      formatNumber(summary.tidak_terencana),
+      formatNumber(summary.bencana_alam),
+      formatNumber(summary.terencana + summary.tidak_terencana + summary.bencana_alam),
+      formatNumber(summary.terencana + summary.tidak_terencana)
+    ])
+
+    total.terencana += summary.terencana
+    total.tidak_terencana += summary.tidak_terencana
+    total.bencana_alam += summary.bencana_alam
+  }
+
+  formattedData.push([
+    { content: 'TOTAL', styles: { fontStyle: 'bold' } },
+    formatNumber(total.terencana),
+    formatNumber(total.tidak_terencana),
+    formatNumber(total.bencana_alam),
+    formatNumber(total.terencana + total.tidak_terencana + total.bencana_alam),
+    formatNumber(total.terencana + total.tidak_terencana)
+  ])
+
+  return formattedData
+}
+
+const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
+  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 data = formatData(rawData)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'UNIT INDUK', styles: { cellWidth: 40 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.uid
+          ? reportMeta.uid.name.toUpperCase()
+          : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'UNIT PELAKSANA PELAYANAN PELANGGAN',
+        ':',
+        reportMeta.up3
+          ? reportMeta.up3.name.toUpperCase()
+          : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'UNIT LAYANAN PELANGGAN',
+        ':',
+        reportMeta.ulp
+          ? reportMeta.ulp.name.toUpperCase()
+          : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'REGIONAL',
+        ':',
+        reportMeta.regional
+          ? reportMeta.regional.name.toUpperCase()
+          : 'Semua Regional'.toUpperCase()
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [[`${reportName}`.toUpperCase()], [reportMeta.periode]],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 23
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'Nama Unit',
+          rowSpan: 2
+        },
+        {
+          content: 'ENS (Distribusi)',
+          colSpan: 3
+        },
+        {
+          content: 'Total',
+          rowSpan: 2
+        },
+        {
+          content: 'KPI ENS',
+          rowSpan: 2
+        }
+      ],
+      ['Terencana', 'Tidak Terencana', 'Bencana Alam'],
+      ['1', '2', '3', '4', '5 = 2+3+4', '6 = 2+3']
+    ],
+    body: data,
+    styles: {
+      fontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+
+      if (data.cell.text[0] === 'TOTAL') {
+        for (const key in data.row.cells) {
+          data.row.cells[key].styles.fillColor = [192, 192, 192]
+          data.row.cells[key].styles.fontStyle = 'bold'
+        }
+      }
+    },
+    startY: 30
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${day}, ${date}-${month}-${year}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
+    window.open(doc.output('bloburl'))
+  } else {
+    doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+      console.log('pdf berhasil disimpan')
+    })
+  }
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `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()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(worksheet, 8, 1, reportMeta.periode, true)
+
+  worksheet.mergeCells('A1:F1')
+  worksheet.mergeCells('A2:F2')
+  worksheet.mergeCells('A3:F3')
+  worksheet.mergeCells('A4:F4')
+  worksheet.mergeCells('A5:F5')
+  worksheet.mergeCells('A7:F7')
+  worksheet.mergeCells('A8:F8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX }
diff --git a/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.ts b/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.ts
new file mode 100644
index 0000000..5336c2a
--- /dev/null
+++ b/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.ts
@@ -0,0 +1,365 @@
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  PageOrientation
+} from 'docx'
+import { saveAs } from 'file-saver'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { Workbook } from 'exceljs'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { getMonthNameShort } from '@/utils/texts'
+
+const reportName = '(Monalisa) Kepatuhan dan Akurasi Dalam Pelaporan'
+const fontSize = 5
+
+const groupingData = (data: any) => {
+  const groupedData: any = {}
+
+  data.forEach((item: any) => {
+    const { nama_regional } = item
+
+    if (!groupedData[nama_regional]) {
+      groupedData[nama_regional] = { data: [] }
+    }
+
+    groupedData[nama_regional].data.push(item)
+  })
+
+  for (const regional in groupedData) {
+    const data = groupedData[regional].data
+
+    data.forEach((item: any) => {
+      if (!groupedData[regional].summary) {
+        groupedData[regional].summary = {
+          gangguan_berulang: 0,
+          gangguan_total: 0,
+          keluhan_berulang: 0,
+          keluhan_total: 0
+        }
+      }
+
+      groupedData[regional].summary.gangguan_berulang += item.gangguan_berulang
+      groupedData[regional].summary.gangguan_total += item.gangguan_total
+      groupedData[regional].summary.keluhan_berulang += item.keluhan_berulang
+      groupedData[regional].summary.keluhan_total += item.keluhan_total
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    gangguan_berulang: 0,
+    gangguan_total: 0,
+    keluhan_berulang: 0,
+    keluhan_total: 0
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 6, styles: { fontStyle: 'bold' } }])
+
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    const komplain_pelanggan =
+      ((summary.gangguan_berulang / summary.gangguan_total +
+        summary.keluhan_berulang / summary.keluhan_total) /
+        2) *
+      100
+
+    formattedData.push([
+      regional,
+      formatNumber(summary.gangguan_berulang),
+      formatNumber(summary.gangguan_total),
+      formatNumber(summary.keluhan_berulang),
+      formatNumber(summary.keluhan_total),
+      formatPercentage(
+        !komplain_pelanggan || !isFinite(komplain_pelanggan) ? 0 : komplain_pelanggan
+      )
+    ])
+
+    total.gangguan_berulang += summary.gangguan_berulang
+    total.gangguan_total += summary.gangguan_total
+    total.keluhan_berulang += summary.keluhan_berulang
+    total.keluhan_total += summary.keluhan_total
+  }
+
+  const total_komplain_pelanggan =
+    ((total.gangguan_berulang / total.gangguan_total +
+      total.keluhan_berulang / total.keluhan_total) /
+      2) *
+    100
+
+  formattedData.push([
+    { content: 'TOTAL', styles: { fontStyle: 'bold' } },
+    formatNumber(total.gangguan_berulang),
+    formatNumber(total.gangguan_total),
+    formatNumber(total.keluhan_berulang),
+    formatNumber(total.keluhan_total),
+    formatPercentage(
+      !total_komplain_pelanggan || !isFinite(total_komplain_pelanggan)
+        ? 0
+        : total_komplain_pelanggan
+    )
+  ])
+
+  return formattedData
+}
+
+const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
+  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 data = formatData(rawData)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'UNIT INDUK', styles: { cellWidth: 40 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.uid
+          ? reportMeta.uid.name.toUpperCase()
+          : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'UNIT PELAKSANA PELAYANAN PELANGGAN',
+        ':',
+        reportMeta.up3
+          ? reportMeta.up3.name.toUpperCase()
+          : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'UNIT LAYANAN PELANGGAN',
+        ':',
+        reportMeta.ulp
+          ? reportMeta.ulp.name.toUpperCase()
+          : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'REGIONAL',
+        ':',
+        reportMeta.regional
+          ? reportMeta.regional.name.toUpperCase()
+          : 'Semua Regional'.toUpperCase()
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [[`${reportName}`.toUpperCase()], [reportMeta.periode]],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 23
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'Nama Unit',
+          rowSpan: 3
+        },
+        {
+          content: 'Kepatuhan dan Akurasi APKT',
+          colSpan: 4
+        },
+        {
+          content: 'Komplain Pelanggan (%)',
+          rowSpan: 3
+        }
+      ],
+      [
+        {
+          content: 'Gangguan Berulang',
+          colSpan: 2
+        },
+        {
+          content: 'Keluhan Berulang',
+          colSpan: 2
+        }
+      ],
+      [
+        getMonthNameShort(reportMeta.currentMonth) + ' ' + reportMeta.currentYear,
+        'Total Gangguan',
+        getMonthNameShort(reportMeta.currentMonth) + ' ' + reportMeta.currentYear,
+        'Total Keluhan'
+      ],
+      ['1', '2', '3', '4', '5', '6 = ((2/3)+(4/5))/2)*100']
+    ],
+    body: data,
+    styles: {
+      fontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+
+      if (data.cell.text[0] === 'TOTAL') {
+        for (const key in data.row.cells) {
+          data.row.cells[key].styles.fillColor = [192, 192, 192]
+          data.row.cells[key].styles.fontStyle = 'bold'
+        }
+      }
+    },
+    startY: 30
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${day}, ${date}-${month}-${year}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
+    window.open(doc.output('bloburl'))
+  } else {
+    doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+      console.log('pdf berhasil disimpan')
+    })
+  }
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `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()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(worksheet, 8, 1, reportMeta.periode, true)
+
+  worksheet.mergeCells('A1:F1')
+  worksheet.mergeCells('A2:F2')
+  worksheet.mergeCells('A3:F3')
+  worksheet.mergeCells('A4:F4')
+  worksheet.mergeCells('A5:F5')
+  worksheet.mergeCells('A7:F7')
+  worksheet.mergeCells('A8:F8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX }
diff --git a/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.ts b/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.ts
new file mode 100644
index 0000000..8243d98
--- /dev/null
+++ b/src/report/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.ts
@@ -0,0 +1,717 @@
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  PageOrientation
+} from 'docx'
+import { saveAs } from 'file-saver'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { Workbook } from 'exceljs'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { getMonthNameShort } from '@/utils/texts'
+
+const reportName = '(Monalisa) Penurunan Jumlah Komplain'
+const fontSize = 5
+const detailFontSize = 3
+
+const groupingData = (data: any) => {
+  const groupedData: any = {}
+
+  data.forEach((item: any) => {
+    const { nama_regional } = item
+
+    if (!groupedData[nama_regional]) {
+      groupedData[nama_regional] = { data: [] }
+    }
+
+    groupedData[nama_regional].data.push(item)
+  })
+
+  for (const regional in groupedData) {
+    const data = groupedData[regional].data
+
+    data.forEach((item: any) => {
+      if (!groupedData[regional].summary) {
+        groupedData[regional].summary = {
+          total_keluhan_tahun_sebelumnya: 0,
+          total_gangguan_tahun_sebelumnya: 0,
+          total_keluhan_informasi_tahun_sebelumnya: 0,
+          total_gangguan_informasi_tahun_sebelumnya: 0,
+          // total_informasi_tahun_sebelumnya
+          // total_tahun_sebelumnya
+          total_keluhan_tahun_ini: 0,
+          total_gangguan_tahun_ini: 0,
+          total_keluhan_informasi_tahun_ini: 0,
+          total_gangguan_informasi_tahun_ini: 0
+          // total_informasi_tahun_ini
+          // total_tahun_ini
+          // delta_keluhan
+          // delta_gangguan
+          // delta_informasi
+          // persen_delta_keluhan
+          // persen_delta_gangguan
+          // persen_delta_informasi
+          // persen_delta_total
+        }
+      }
+
+      groupedData[regional].summary.total_keluhan_tahun_sebelumnya +=
+        item.total_keluhan_tahun_sebelumnya
+      groupedData[regional].summary.total_gangguan_tahun_sebelumnya +=
+        item.total_gangguan_tahun_sebelumnya
+      groupedData[regional].summary.total_keluhan_informasi_tahun_sebelumnya +=
+        item.total_keluhan_informasi_tahun_sebelumnya
+      groupedData[regional].summary.total_gangguan_informasi_tahun_sebelumnya +=
+        item.total_gangguan_informasi_tahun_sebelumnya
+      groupedData[regional].summary.total_keluhan_tahun_ini += item.total_keluhan_tahun_ini
+      groupedData[regional].summary.total_gangguan_tahun_ini += item.total_gangguan_tahun_ini
+      groupedData[regional].summary.total_keluhan_informasi_tahun_ini +=
+        item.total_keluhan_informasi_tahun_ini
+      groupedData[regional].summary.total_gangguan_informasi_tahun_ini +=
+        item.total_gangguan_informasi_tahun_ini
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    total_keluhan_tahun_sebelumnya: 0,
+    total_gangguan_tahun_sebelumnya: 0,
+    total_keluhan_informasi_tahun_sebelumnya: 0,
+    total_gangguan_informasi_tahun_sebelumnya: 0,
+    // total_informasi_tahun_sebelumnya
+    // total_tahun_sebelumnya
+    total_keluhan_tahun_ini: 0,
+    total_gangguan_tahun_ini: 0,
+    total_keluhan_informasi_tahun_ini: 0,
+    total_gangguan_informasi_tahun_ini: 0
+    // total_informasi_tahun_ini
+    // total_tahun_ini
+    // delta_keluhan
+    // delta_gangguan
+    // delta_informasi
+    // persen_delta_keluhan
+    // persen_delta_gangguan
+    // persen_delta_informasi
+    // persen_delta_total
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 20, styles: { fontStyle: 'bold' } }])
+
+  let no = 1
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    const total_informasi_tahun_sebelumnya =
+      summary.total_keluhan_informasi_tahun_sebelumnya +
+      summary.total_gangguan_informasi_tahun_sebelumnya
+    const total_tahun_sebelumnya =
+      summary.total_keluhan_tahun_sebelumnya +
+      summary.total_gangguan_tahun_sebelumnya +
+      total_informasi_tahun_sebelumnya
+    const total_informasi_tahun_ini =
+      summary.total_keluhan_informasi_tahun_ini + summary.total_gangguan_informasi_tahun_ini
+    const total_tahun_ini =
+      summary.total_keluhan_tahun_ini + summary.total_gangguan_tahun_ini + total_informasi_tahun_ini
+    const delta_keluhan = summary.total_keluhan_tahun_sebelumnya - summary.total_keluhan_tahun_ini
+    const delta_gangguan =
+      summary.total_gangguan_tahun_sebelumnya - summary.total_gangguan_tahun_ini
+    const delta_informasi = total_informasi_tahun_sebelumnya - total_informasi_tahun_ini
+    const persen_delta_keluhan = 40 * (delta_keluhan / summary.total_keluhan_tahun_sebelumnya)
+    const persen_delta_gangguan = 40 * (delta_gangguan / summary.total_gangguan_tahun_sebelumnya)
+    const persen_delta_informasi = 20 * (delta_informasi / total_informasi_tahun_sebelumnya)
+    const persen_delta_total = persen_delta_keluhan + persen_delta_gangguan + persen_delta_informasi
+
+    formattedData.push([
+      regional,
+      formatNumber(summary.total_keluhan_tahun_sebelumnya),
+      formatNumber(summary.total_gangguan_tahun_sebelumnya),
+      formatNumber(summary.total_keluhan_informasi_tahun_sebelumnya),
+      formatNumber(summary.total_gangguan_informasi_tahun_sebelumnya),
+      formatNumber(total_informasi_tahun_sebelumnya),
+      formatNumber(total_tahun_sebelumnya),
+      formatNumber(summary.total_keluhan_tahun_ini),
+      formatNumber(summary.total_gangguan_tahun_ini),
+      formatNumber(summary.total_keluhan_informasi_tahun_ini),
+      formatNumber(summary.total_gangguan_informasi_tahun_ini),
+      formatNumber(total_informasi_tahun_ini),
+      formatNumber(total_tahun_ini),
+      formatNumber(delta_keluhan),
+      formatNumber(delta_gangguan),
+      formatNumber(delta_informasi),
+      formatPercentage(
+        !persen_delta_keluhan || !isFinite(persen_delta_keluhan) ? 0 : persen_delta_keluhan
+      ),
+      formatPercentage(
+        !persen_delta_gangguan || !isFinite(persen_delta_gangguan) ? 0 : persen_delta_gangguan
+      ),
+      formatPercentage(
+        !persen_delta_informasi || !isFinite(persen_delta_informasi) ? 0 : persen_delta_informasi
+      ),
+      formatPercentage(
+        !persen_delta_total || !isFinite(persen_delta_total) ? 0 : persen_delta_total
+      )
+    ])
+
+    total.total_keluhan_tahun_sebelumnya += summary.total_keluhan_tahun_sebelumnya
+    total.total_gangguan_tahun_sebelumnya += summary.total_gangguan_tahun_sebelumnya
+    total.total_keluhan_informasi_tahun_sebelumnya +=
+      summary.total_keluhan_informasi_tahun_sebelumnya
+    total.total_gangguan_informasi_tahun_sebelumnya +=
+      summary.total_gangguan_informasi_tahun_sebelumnya
+    total.total_keluhan_tahun_ini += summary.total_keluhan_tahun_ini
+    total.total_gangguan_tahun_ini += summary.total_gangguan_tahun_ini
+    total.total_keluhan_informasi_tahun_ini += summary.total_keluhan_informasi_tahun_ini
+    total.total_gangguan_informasi_tahun_ini += summary.total_gangguan_informasi_tahun_ini
+  }
+
+  const total_informasi_tahun_sebelumnya =
+    total.total_keluhan_informasi_tahun_sebelumnya + total.total_gangguan_informasi_tahun_sebelumnya
+  const total_tahun_sebelumnya =
+    total.total_keluhan_tahun_sebelumnya +
+    total.total_gangguan_tahun_sebelumnya +
+    total_informasi_tahun_sebelumnya
+  const total_informasi_tahun_ini =
+    total.total_keluhan_informasi_tahun_ini + total.total_gangguan_informasi_tahun_ini
+  const total_tahun_ini =
+    total.total_keluhan_tahun_ini + total.total_gangguan_tahun_ini + total_informasi_tahun_ini
+  const delta_keluhan = total.total_keluhan_tahun_sebelumnya - total.total_keluhan_tahun_ini
+  const delta_gangguan = total.total_gangguan_tahun_sebelumnya - total.total_gangguan_tahun_ini
+  const delta_informasi = total_informasi_tahun_sebelumnya - total_informasi_tahun_ini
+  const persen_delta_keluhan = 40 * (delta_keluhan / total.total_keluhan_tahun_sebelumnya)
+  const persen_delta_gangguan = 40 * (delta_gangguan / total.total_gangguan_tahun_sebelumnya)
+  const persen_delta_informasi = 20 * (delta_informasi / total_informasi_tahun_sebelumnya)
+  const persen_delta_total = persen_delta_keluhan + persen_delta_gangguan + persen_delta_informasi
+
+  formattedData.push([
+    { content: 'TOTAL', styles: { fontStyle: 'bold' } },
+    formatNumber(total.total_keluhan_tahun_sebelumnya),
+    formatNumber(total.total_gangguan_tahun_sebelumnya),
+    formatNumber(total.total_keluhan_informasi_tahun_sebelumnya),
+    formatNumber(total.total_gangguan_informasi_tahun_sebelumnya),
+    formatNumber(total_informasi_tahun_sebelumnya),
+    formatNumber(total_tahun_sebelumnya),
+    formatNumber(total.total_keluhan_tahun_ini),
+    formatNumber(total.total_gangguan_tahun_ini),
+    formatNumber(total.total_keluhan_informasi_tahun_ini),
+    formatNumber(total.total_gangguan_informasi_tahun_ini),
+    formatNumber(total_informasi_tahun_ini),
+    formatNumber(total_tahun_ini),
+    formatNumber(delta_keluhan),
+    formatNumber(delta_gangguan),
+    formatNumber(delta_informasi),
+    formatPercentage(
+      !persen_delta_keluhan || !isFinite(persen_delta_keluhan) ? 0 : persen_delta_keluhan
+    ),
+    formatPercentage(
+      !persen_delta_gangguan || !isFinite(persen_delta_gangguan) ? 0 : persen_delta_gangguan
+    ),
+    formatPercentage(
+      !persen_delta_informasi || !isFinite(persen_delta_informasi) ? 0 : persen_delta_informasi
+    ),
+    formatPercentage(!persen_delta_total || !isFinite(persen_delta_total) ? 0 : persen_delta_total)
+  ])
+
+  return formattedData
+}
+
+const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
+  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 data = formatData(rawData)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'UNIT INDUK', styles: { cellWidth: 40 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.uid
+          ? reportMeta.uid.name.toUpperCase()
+          : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'UNIT PELAKSANA PELAYANAN PELANGGAN',
+        ':',
+        reportMeta.up3
+          ? reportMeta.up3.name.toUpperCase()
+          : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'UNIT LAYANAN PELANGGAN',
+        ':',
+        reportMeta.ulp
+          ? reportMeta.ulp.name.toUpperCase()
+          : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'REGIONAL',
+        ':',
+        reportMeta.regional
+          ? reportMeta.regional.name.toUpperCase()
+          : 'Semua Regional'.toUpperCase()
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [[`${reportName}`.toUpperCase()], [reportMeta.periode]],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 23
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'Nama Unit',
+          rowSpan: 3
+        },
+        {
+          content: getMonthNameShort(reportMeta.currentMonth) + ' ' + reportMeta.lastYear,
+          colSpan: 6
+        },
+        {
+          content: getMonthNameShort(reportMeta.currentMonth) + ' ' + reportMeta.currentYear,
+          colSpan: 6
+        },
+        {
+          content: 'Delta Penurunan',
+          colSpan: 3
+        },
+        {
+          content: '% Penurunan YoY',
+          colSpan: 4
+        }
+      ],
+      [
+        {
+          content: 'Keluhan',
+          rowSpan: 2
+        },
+        {
+          content: 'Gangguan',
+          rowSpan: 2
+        },
+        {
+          content: 'Informasi',
+          colSpan: 3
+        },
+        {
+          content: 'Total Komplain',
+          rowSpan: 2
+        },
+        {
+          content: 'Keluhan',
+          rowSpan: 2
+        },
+        {
+          content: 'Gangguan',
+          rowSpan: 2
+        },
+        {
+          content: 'Informasi',
+          colSpan: 3
+        },
+        {
+          content: 'Total Komplain',
+          rowSpan: 2
+        },
+        {
+          content: 'Keluhan',
+          rowSpan: 2
+        },
+        {
+          content: 'Gangguan',
+          rowSpan: 2
+        },
+        {
+          content: 'Informasi',
+          rowSpan: 2
+        },
+        {
+          content: 'Keluhan',
+          rowSpan: 2
+        },
+        {
+          content: 'Gangguan',
+          rowSpan: 2
+        },
+        {
+          content: 'Informasi',
+          rowSpan: 2
+        },
+        {
+          content: '% Total',
+          rowSpan: 2
+        }
+      ],
+      ['Keluhan', 'Gangguan', 'Total', 'Keluhan', 'Gangguan', 'Total'],
+      [
+        '1',
+        '2',
+        '3',
+        '4',
+        '5',
+        '6=4+5',
+        '7=2+3+6',
+        '8',
+        '9',
+        '10',
+        '11',
+        '12=10+11',
+        '13=8+9+12',
+        '14=2-8',
+        '15=3-9',
+        '16=6-12',
+        '17=40%*(14/2)',
+        '18=40%*(15/3)',
+        '19=20%*(16/6)',
+        '20=17+18+19'
+      ]
+    ],
+    body: data,
+    styles: {
+      fontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+
+      if (data.cell.text[0] === 'TOTAL') {
+        for (const key in data.row.cells) {
+          data.row.cells[key].styles.fillColor = [192, 192, 192]
+          data.row.cells[key].styles.fontStyle = 'bold'
+        }
+      }
+    },
+    startY: 30
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${day}, ${date}-${month}-${year}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
+    window.open(doc.output('bloburl'))
+  } else {
+    doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+      console.log('pdf berhasil disimpan')
+    })
+  }
+}
+
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  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 doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [['PT. PLN(Persero)']],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [[`Daftar Detail ${reportName}`.toUpperCase()], [reportMeta.periode]],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 18,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'UID/UIW',
+        'UP3',
+        'ULP',
+        'ID Pelanggan',
+        'Nama Pelanggan',
+        'Nama Pelaopr',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Penyebab',
+        'Kode Gangguan',
+        'Jenis Gangguan',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Tgl Lapor'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.nama_uid,
+      item.nama_ulp,
+      item.id_pelanggan,
+      item.nama_pelanggan,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.penyebab,
+      item.kode_gangguan,
+      item.jenis_gangguan,
+      item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-',
+      item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-',
+      item.waktu_lapor
+    ]),
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 24,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${day}, ${date}-${month}-${year}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `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()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(worksheet, 8, 1, reportMeta.periode, true)
+
+  worksheet.mergeCells('A1:T1')
+  worksheet.mergeCells('A2:T2')
+  worksheet.mergeCells('A3:T3')
+  worksheet.mergeCells('A4:T4')
+  worksheet.mergeCells('A5:T5')
+  worksheet.mergeCells('A7:T7')
+  worksheet.mergeCells('A8:T8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportDetailToXLSX = (reportMeta: any, e: any) => {
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(worksheet, 4, 1, reportMeta.periode, true)
+
+  worksheet.mergeCells('A1:Q1')
+  worksheet.mergeCells('A3:Q3')
+  worksheet.mergeCells('A4:Q4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
diff --git a/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.ts b/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.ts
new file mode 100644
index 0000000..306dfdb
--- /dev/null
+++ b/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.ts
@@ -0,0 +1,418 @@
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  PageOrientation
+} from 'docx'
+import { saveAs } from 'file-saver'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { Workbook } from 'exceljs'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { getMonthNameShort } from '@/utils/texts'
+
+const reportName = 'Aging Complaint'
+const fontSize = 5
+
+const groupingData = (data: any) => {
+  const groupedData: any = {}
+
+  data.forEach((item: any) => {
+    const { nama_regional } = item
+
+    if (!groupedData[nama_regional]) {
+      groupedData[nama_regional] = { data: [] }
+    }
+
+    groupedData[nama_regional].data.push(item)
+  })
+
+  for (const regional in groupedData) {
+    const data = groupedData[regional].data
+
+    data.forEach((item: any) => {
+      if (!groupedData[regional].summary) {
+        groupedData[regional].summary = {
+          avg_durasi_recovery_gangguan: [],
+          sla_gangguan: [],
+          avg_durasi_recovery_keluhan: [],
+          sla_keluhan: [],
+          aging_complaint_gangguan: [],
+          aging_complaint_keluhan: [],
+          avg_aging_complaint: []
+        }
+      }
+
+      groupedData[regional].summary.avg_durasi_recovery_gangguan.push(
+        item.avg_durasi_recovery_gangguan
+      )
+      groupedData[regional].summary.sla_gangguan.push(item.sla_gangguan)
+      groupedData[regional].summary.avg_durasi_recovery_keluhan.push(
+        item.avg_durasi_recovery_keluhan
+      )
+      groupedData[regional].summary.sla_keluhan.push(item.sla_keluhan)
+      groupedData[regional].summary.aging_complaint_gangguan.push(item.aging_complaint_gangguan)
+      groupedData[regional].summary.aging_complaint_keluhan.push(item.aging_complaint_keluhan)
+      groupedData[regional].summary.avg_aging_complaint.push(item.avg_aging_complaint)
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    avg_durasi_recovery_gangguan: [],
+    sla_gangguan: [],
+    avg_durasi_recovery_keluhan: [],
+    sla_keluhan: [],
+    aging_complaint_gangguan: [],
+    aging_complaint_keluhan: [],
+    avg_aging_complaint: []
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 8, styles: { fontStyle: 'bold' } }])
+
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    const avg_durasi_recovery_gangguan =
+      summary.avg_durasi_recovery_gangguan.reduce((a: number, b: number) => a + b, 0) /
+      summary.avg_durasi_recovery_gangguan.length
+    const sla_gangguan =
+      summary.sla_gangguan.reduce((a: number, b: number) => a + b, 0) / summary.sla_gangguan.length
+    const avg_durasi_recovery_keluhan =
+      summary.avg_durasi_recovery_keluhan.reduce((a: number, b: number) => a + b, 0) /
+      summary.avg_durasi_recovery_keluhan.length
+    const sla_keluhan =
+      summary.sla_keluhan.reduce((a: number, b: number) => a + b, 0) / summary.sla_keluhan.length
+    const aging_complaint_gangguan =
+      summary.aging_complaint_gangguan.reduce((a: number, b: number) => a + b, 0) /
+      summary.aging_complaint_gangguan.length
+    const aging_complaint_keluhan =
+      summary.aging_complaint_keluhan.reduce((a: number, b: number) => a + b, 0) /
+      summary.aging_complaint_keluhan.length
+    const avg_aging_complaint =
+      summary.avg_aging_complaint.reduce((a: number, b: number) => a + b, 0) /
+      summary.avg_aging_complaint.length
+
+    formattedData.push([
+      regional,
+      formatNumber(avg_durasi_recovery_gangguan),
+      formatNumber(sla_gangguan),
+      formatNumber(avg_durasi_recovery_keluhan),
+      formatNumber(sla_keluhan),
+      formatPercentage(aging_complaint_gangguan),
+      formatPercentage(aging_complaint_keluhan),
+      formatPercentage(avg_aging_complaint)
+    ])
+
+    total.avg_durasi_recovery_gangguan.push(avg_durasi_recovery_gangguan)
+    total.sla_gangguan.push(sla_gangguan)
+    total.avg_durasi_recovery_keluhan.push(avg_durasi_recovery_keluhan)
+    total.sla_keluhan.push(sla_keluhan)
+    total.aging_complaint_gangguan.push(aging_complaint_gangguan)
+    total.aging_complaint_keluhan.push(aging_complaint_keluhan)
+    total.avg_aging_complaint.push(avg_aging_complaint)
+  }
+
+  formattedData.push([
+    { content: 'RATA-RATA', styles: { fontStyle: 'bold' } },
+    formatNumber(
+      total.avg_durasi_recovery_gangguan.reduce((a: number, b: number) => a + b, 0) /
+        total.avg_durasi_recovery_gangguan.length
+    ),
+    formatNumber(
+      total.sla_gangguan.reduce((a: number, b: number) => a + b, 0) / total.sla_gangguan.length
+    ),
+    formatNumber(
+      total.avg_durasi_recovery_keluhan.reduce((a: number, b: number) => a + b, 0) /
+        total.avg_durasi_recovery_keluhan.length
+    ),
+    formatNumber(
+      total.sla_keluhan.reduce((a: number, b: number) => a + b, 0) / total.sla_keluhan.length
+    ),
+    formatPercentage(
+      total.aging_complaint_gangguan.reduce((a: number, b: number) => a + b, 0) /
+        total.aging_complaint_gangguan.length
+    ),
+    formatPercentage(
+      total.aging_complaint_keluhan.reduce((a: number, b: number) => a + b, 0) /
+        total.aging_complaint_keluhan.length
+    ),
+    formatPercentage(
+      total.avg_aging_complaint.reduce((a: number, b: number) => a + b, 0) /
+        total.avg_aging_complaint.length
+    )
+  ])
+
+  return formattedData
+}
+
+const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
+  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 data = formatData(rawData)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'UNIT INDUK', styles: { cellWidth: 40 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.uid
+          ? reportMeta.uid.name.toUpperCase()
+          : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'UNIT PELAKSANA PELAYANAN PELANGGAN',
+        ':',
+        reportMeta.up3
+          ? reportMeta.up3.name.toUpperCase()
+          : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'UNIT LAYANAN PELANGGAN',
+        ':',
+        reportMeta.ulp
+          ? reportMeta.ulp.name.toUpperCase()
+          : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'REGIONAL',
+        ':',
+        reportMeta.regional
+          ? reportMeta.regional.name.toUpperCase()
+          : 'Semua Regional'.toUpperCase()
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [[`${reportName}`.toUpperCase()], ['s.d. ' + reportMeta.periode]],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 23
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'Nama Unit',
+          rowSpan: 3
+        },
+        {
+          content: 'Aging Complains',
+          colSpan: 4
+        },
+        {
+          content: '% Aging Complains',
+          colSpan: 2
+        },
+        {
+          content: '% Rata2 Aging Complains',
+          rowSpan: 3
+        }
+      ],
+      [
+        {
+          content: 'Rata2 RCT Gangguan',
+          colSpan: 2
+        },
+        {
+          content: 'Rata2 RCT Keluhan',
+          colSpan: 2
+        },
+        {
+          content: 'G',
+          rowSpan: 2
+        },
+        {
+          content: 'K',
+          rowSpan: 2
+        }
+      ],
+      [
+        's.d. ' + getMonthNameShort(reportMeta.currentMonth) + ' ' + reportMeta.currentYear,
+        'SLA (Menit)',
+        's.d. ' + getMonthNameShort(reportMeta.currentMonth) + ' ' + reportMeta.currentYear,
+        'SLA (Jam)'
+      ],
+      ['1', '2', '3', '4', '5', '6 = 1-((2-3)/3))*100)', '7 = 1-((4-5)/5))*100)', '8 = (6+7)/2']
+    ],
+    body: data,
+    styles: {
+      fontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+
+      if (data.cell.text[0] === 'RATA-RATA') {
+        for (const key in data.row.cells) {
+          data.row.cells[key].styles.fillColor = [192, 192, 192]
+          data.row.cells[key].styles.fontStyle = 'bold'
+        }
+      }
+    },
+    startY: 30
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${day}, ${date}-${month}-${year}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
+    window.open(doc.output('bloburl'))
+  } else {
+    doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+      console.log('pdf berhasil disimpan')
+    })
+  }
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `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()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(worksheet, 8, 1, reportMeta.periode, true)
+
+  worksheet.mergeCells('A1:H1')
+  worksheet.mergeCells('A2:H2')
+  worksheet.mergeCells('A3:H3')
+  worksheet.mergeCells('A4:H4')
+  worksheet.mergeCells('A5:H5')
+  worksheet.mergeCells('A7:H7')
+  worksheet.mergeCells('A8:H8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX }
diff --git a/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.ts b/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.ts
new file mode 100644
index 0000000..d8c8e3a
--- /dev/null
+++ b/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.ts
@@ -0,0 +1,331 @@
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  PageOrientation
+} from 'docx'
+import { saveAs } from 'file-saver'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { Workbook } from 'exceljs'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+import { formatNumber } from '@/utils/numbers'
+
+const reportName = 'Energy Not Sales (ENS)'
+const fontSize = 5
+
+const groupingData = (data: any) => {
+  const groupedData: any = {}
+
+  data.forEach((item: any) => {
+    const { nama_regional } = item
+
+    if (!groupedData[nama_regional]) {
+      groupedData[nama_regional] = { data: [] }
+    }
+
+    groupedData[nama_regional].data.push(item)
+  })
+
+  for (const regional in groupedData) {
+    const data = groupedData[regional].data
+
+    data.forEach((item: any) => {
+      if (!groupedData[regional].summary) {
+        groupedData[regional].summary = {
+          terencana: 0,
+          tidak_terencana: 0,
+          bencana_alam: 0
+        }
+      }
+
+      groupedData[regional].summary.terencana += item.terencana
+      groupedData[regional].summary.tidak_terencana += item.tidak_terencana
+      groupedData[regional].summary.bencana_alam += item.bencana_alam
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    terencana: 0,
+    tidak_terencana: 0,
+    bencana_alam: 0
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 6, styles: { fontStyle: 'bold' } }])
+
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    formattedData.push([
+      regional,
+      formatNumber(summary.terencana),
+      formatNumber(summary.tidak_terencana),
+      formatNumber(summary.bencana_alam),
+      formatNumber(summary.terencana + summary.tidak_terencana + summary.bencana_alam),
+      formatNumber(summary.terencana + summary.tidak_terencana)
+    ])
+
+    total.terencana += summary.terencana
+    total.tidak_terencana += summary.tidak_terencana
+    total.bencana_alam += summary.bencana_alam
+  }
+
+  formattedData.push([
+    { content: 'TOTAL', styles: { fontStyle: 'bold' } },
+    formatNumber(total.terencana),
+    formatNumber(total.tidak_terencana),
+    formatNumber(total.bencana_alam),
+    formatNumber(total.terencana + total.tidak_terencana + total.bencana_alam),
+    formatNumber(total.terencana + total.tidak_terencana)
+  ])
+
+  return formattedData
+}
+
+const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
+  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 data = formatData(rawData)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'UNIT INDUK', styles: { cellWidth: 40 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.uid
+          ? reportMeta.uid.name.toUpperCase()
+          : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'UNIT PELAKSANA PELAYANAN PELANGGAN',
+        ':',
+        reportMeta.up3
+          ? reportMeta.up3.name.toUpperCase()
+          : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'UNIT LAYANAN PELANGGAN',
+        ':',
+        reportMeta.ulp
+          ? reportMeta.ulp.name.toUpperCase()
+          : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'REGIONAL',
+        ':',
+        reportMeta.regional
+          ? reportMeta.regional.name.toUpperCase()
+          : 'Semua Regional'.toUpperCase()
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [[`${reportName}`.toUpperCase()], ['s.d ' + reportMeta.periode]],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 23
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'Nama Unit',
+          rowSpan: 2
+        },
+        {
+          content: 'ENS (Distribusi)',
+          colSpan: 3
+        },
+        {
+          content: 'Total',
+          rowSpan: 2
+        },
+        {
+          content: 'KPI ENS',
+          rowSpan: 2
+        }
+      ],
+      ['Terencana', 'Tidak Terencana', 'Bencana Alam'],
+      ['1', '2', '3', '4', '5 = 2+3+4', '6 = 2+3']
+    ],
+    body: data,
+    styles: {
+      fontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+
+      if (data.cell.text[0] === 'TOTAL') {
+        for (const key in data.row.cells) {
+          data.row.cells[key].styles.fillColor = [192, 192, 192]
+          data.row.cells[key].styles.fontStyle = 'bold'
+        }
+      }
+    },
+    startY: 30
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${day}, ${date}-${month}-${year}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
+    window.open(doc.output('bloburl'))
+  } else {
+    doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+      console.log('pdf berhasil disimpan')
+    })
+  }
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `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()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(worksheet, 8, 1, reportMeta.periode, true)
+
+  worksheet.mergeCells('A1:F1')
+  worksheet.mergeCells('A2:F2')
+  worksheet.mergeCells('A3:F3')
+  worksheet.mergeCells('A4:F4')
+  worksheet.mergeCells('A5:F5')
+  worksheet.mergeCells('A7:F7')
+  worksheet.mergeCells('A8:F8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX }
diff --git a/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.ts b/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.ts
new file mode 100644
index 0000000..b77acc9
--- /dev/null
+++ b/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.ts
@@ -0,0 +1,365 @@
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  PageOrientation
+} from 'docx'
+import { saveAs } from 'file-saver'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { Workbook } from 'exceljs'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { getMonthNameShort } from '@/utils/texts'
+
+const reportName = 'Kepatuhan dan Akurasi Dalam Pelaporan'
+const fontSize = 5
+
+const groupingData = (data: any) => {
+  const groupedData: any = {}
+
+  data.forEach((item: any) => {
+    const { nama_regional } = item
+
+    if (!groupedData[nama_regional]) {
+      groupedData[nama_regional] = { data: [] }
+    }
+
+    groupedData[nama_regional].data.push(item)
+  })
+
+  for (const regional in groupedData) {
+    const data = groupedData[regional].data
+
+    data.forEach((item: any) => {
+      if (!groupedData[regional].summary) {
+        groupedData[regional].summary = {
+          gangguan_berulang: 0,
+          gangguan_total: 0,
+          keluhan_berulang: 0,
+          keluhan_total: 0
+        }
+      }
+
+      groupedData[regional].summary.gangguan_berulang += item.gangguan_berulang
+      groupedData[regional].summary.gangguan_total += item.gangguan_total
+      groupedData[regional].summary.keluhan_berulang += item.keluhan_berulang
+      groupedData[regional].summary.keluhan_total += item.keluhan_total
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    gangguan_berulang: 0,
+    gangguan_total: 0,
+    keluhan_berulang: 0,
+    keluhan_total: 0
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 6, styles: { fontStyle: 'bold' } }])
+
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    const komplain_pelanggan =
+      ((summary.gangguan_berulang / summary.gangguan_total +
+        summary.keluhan_berulang / summary.keluhan_total) /
+        2) *
+      100
+
+    formattedData.push([
+      regional,
+      formatNumber(summary.gangguan_berulang),
+      formatNumber(summary.gangguan_total),
+      formatNumber(summary.keluhan_berulang),
+      formatNumber(summary.keluhan_total),
+      formatPercentage(
+        !komplain_pelanggan || !isFinite(komplain_pelanggan) ? 0 : komplain_pelanggan
+      )
+    ])
+
+    total.gangguan_berulang += summary.gangguan_berulang
+    total.gangguan_total += summary.gangguan_total
+    total.keluhan_berulang += summary.keluhan_berulang
+    total.keluhan_total += summary.keluhan_total
+  }
+
+  const total_komplain_pelanggan =
+    ((total.gangguan_berulang / total.gangguan_total +
+      total.keluhan_berulang / total.keluhan_total) /
+      2) *
+    100
+
+  formattedData.push([
+    { content: 'TOTAL', styles: { fontStyle: 'bold' } },
+    formatNumber(total.gangguan_berulang),
+    formatNumber(total.gangguan_total),
+    formatNumber(total.keluhan_berulang),
+    formatNumber(total.keluhan_total),
+    formatPercentage(
+      !total_komplain_pelanggan || !isFinite(total_komplain_pelanggan)
+        ? 0
+        : total_komplain_pelanggan
+    )
+  ])
+
+  return formattedData
+}
+
+const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
+  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 data = formatData(rawData)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'UNIT INDUK', styles: { cellWidth: 40 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.uid
+          ? reportMeta.uid.name.toUpperCase()
+          : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'UNIT PELAKSANA PELAYANAN PELANGGAN',
+        ':',
+        reportMeta.up3
+          ? reportMeta.up3.name.toUpperCase()
+          : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'UNIT LAYANAN PELANGGAN',
+        ':',
+        reportMeta.ulp
+          ? reportMeta.ulp.name.toUpperCase()
+          : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'REGIONAL',
+        ':',
+        reportMeta.regional
+          ? reportMeta.regional.name.toUpperCase()
+          : 'Semua Regional'.toUpperCase()
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [[`${reportName}`.toUpperCase()], ['s.d. ' + reportMeta.periode]],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 23
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'Nama Unit',
+          rowSpan: 3
+        },
+        {
+          content: 'Kepatuhan dan Akurasi APKT',
+          colSpan: 4
+        },
+        {
+          content: 'Komplain Pelanggan (%)',
+          rowSpan: 3
+        }
+      ],
+      [
+        {
+          content: 'Gangguan Berulang',
+          colSpan: 2
+        },
+        {
+          content: 'Keluhan Berulang',
+          colSpan: 2
+        }
+      ],
+      [
+        's.d. ' + getMonthNameShort(reportMeta.currentMonth) + ' ' + reportMeta.currentYear,
+        'Total Gangguan',
+        's.d. ' + getMonthNameShort(reportMeta.currentMonth) + ' ' + reportMeta.currentYear,
+        'Total Keluhan'
+      ],
+      ['1', '2', '3', '4', '5', '6 = ((2/3)+(4/5))/2)*100']
+    ],
+    body: data,
+    styles: {
+      fontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+
+      if (data.cell.text[0] === 'TOTAL') {
+        for (const key in data.row.cells) {
+          data.row.cells[key].styles.fillColor = [192, 192, 192]
+          data.row.cells[key].styles.fontStyle = 'bold'
+        }
+      }
+    },
+    startY: 30
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${day}, ${date}-${month}-${year}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
+    window.open(doc.output('bloburl'))
+  } else {
+    doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+      console.log('pdf berhasil disimpan')
+    })
+  }
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `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()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(worksheet, 8, 1, reportMeta.periode, true)
+
+  worksheet.mergeCells('A1:F1')
+  worksheet.mergeCells('A2:F2')
+  worksheet.mergeCells('A3:F3')
+  worksheet.mergeCells('A4:F4')
+  worksheet.mergeCells('A5:F5')
+  worksheet.mergeCells('A7:F7')
+  worksheet.mergeCells('A8:F8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX }
diff --git a/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.ts b/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.ts
new file mode 100644
index 0000000..0a8a7d2
--- /dev/null
+++ b/src/report/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.ts
@@ -0,0 +1,551 @@
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  PageOrientation
+} from 'docx'
+import { saveAs } from 'file-saver'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { Workbook } from 'exceljs'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { getMonthNameShort } from '@/utils/texts'
+
+const reportName = 'Penurunan Jumlah Komplain'
+const fontSize = 5
+
+const groupingData = (data: any) => {
+  const groupedData: any = {}
+
+  data.forEach((item: any) => {
+    const { nama_regional } = item
+
+    if (!groupedData[nama_regional]) {
+      groupedData[nama_regional] = { data: [] }
+    }
+
+    groupedData[nama_regional].data.push(item)
+  })
+
+  for (const regional in groupedData) {
+    const data = groupedData[regional].data
+
+    data.forEach((item: any) => {
+      if (!groupedData[regional].summary) {
+        groupedData[regional].summary = {
+          total_keluhan_tahun_sebelumnya: 0,
+          total_gangguan_tahun_sebelumnya: 0,
+          total_keluhan_informasi_tahun_sebelumnya: 0,
+          total_gangguan_informasi_tahun_sebelumnya: 0,
+          // total_informasi_tahun_sebelumnya
+          // total_tahun_sebelumnya
+          total_keluhan_tahun_ini: 0,
+          total_gangguan_tahun_ini: 0,
+          total_keluhan_informasi_tahun_ini: 0,
+          total_gangguan_informasi_tahun_ini: 0
+          // total_informasi_tahun_ini
+          // total_tahun_ini
+          // delta_keluhan
+          // delta_gangguan
+          // delta_informasi
+          // persen_delta_keluhan
+          // persen_delta_gangguan
+          // persen_delta_informasi
+          // persen_delta_total
+        }
+      }
+
+      groupedData[regional].summary.total_keluhan_tahun_sebelumnya +=
+        item.total_keluhan_tahun_sebelumnya
+      groupedData[regional].summary.total_gangguan_tahun_sebelumnya +=
+        item.total_gangguan_tahun_sebelumnya
+      groupedData[regional].summary.total_keluhan_informasi_tahun_sebelumnya +=
+        item.total_keluhan_informasi_tahun_sebelumnya
+      groupedData[regional].summary.total_gangguan_informasi_tahun_sebelumnya +=
+        item.total_gangguan_informasi_tahun_sebelumnya
+      groupedData[regional].summary.total_keluhan_tahun_ini += item.total_keluhan_tahun_ini
+      groupedData[regional].summary.total_gangguan_tahun_ini += item.total_gangguan_tahun_ini
+      groupedData[regional].summary.total_keluhan_informasi_tahun_ini +=
+        item.total_keluhan_informasi_tahun_ini
+      groupedData[regional].summary.total_gangguan_informasi_tahun_ini +=
+        item.total_gangguan_informasi_tahun_ini
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    total_keluhan_tahun_sebelumnya: 0,
+    total_gangguan_tahun_sebelumnya: 0,
+    total_keluhan_informasi_tahun_sebelumnya: 0,
+    total_gangguan_informasi_tahun_sebelumnya: 0,
+    // total_informasi_tahun_sebelumnya
+    // total_tahun_sebelumnya
+    total_keluhan_tahun_ini: 0,
+    total_gangguan_tahun_ini: 0,
+    total_keluhan_informasi_tahun_ini: 0,
+    total_gangguan_informasi_tahun_ini: 0
+    // total_informasi_tahun_ini
+    // total_tahun_ini
+    // delta_keluhan
+    // delta_gangguan
+    // delta_informasi
+    // persen_delta_keluhan
+    // persen_delta_gangguan
+    // persen_delta_informasi
+    // persen_delta_total
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 20, styles: { fontStyle: 'bold' } }])
+
+  let no = 1
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    const total_informasi_tahun_sebelumnya =
+      summary.total_keluhan_informasi_tahun_sebelumnya +
+      summary.total_gangguan_informasi_tahun_sebelumnya
+    const total_tahun_sebelumnya =
+      summary.total_keluhan_tahun_sebelumnya +
+      summary.total_gangguan_tahun_sebelumnya +
+      total_informasi_tahun_sebelumnya
+    const total_informasi_tahun_ini =
+      summary.total_keluhan_informasi_tahun_ini + summary.total_gangguan_informasi_tahun_ini
+    const total_tahun_ini =
+      summary.total_keluhan_tahun_ini + summary.total_gangguan_tahun_ini + total_informasi_tahun_ini
+    const delta_keluhan = summary.total_keluhan_tahun_sebelumnya - summary.total_keluhan_tahun_ini
+    const delta_gangguan =
+      summary.total_gangguan_tahun_sebelumnya - summary.total_gangguan_tahun_ini
+    const delta_informasi = total_informasi_tahun_sebelumnya - total_informasi_tahun_ini
+    const persen_delta_keluhan = 40 * (delta_keluhan / summary.total_keluhan_tahun_sebelumnya)
+    const persen_delta_gangguan = 40 * (delta_gangguan / summary.total_gangguan_tahun_sebelumnya)
+    const persen_delta_informasi = 20 * (delta_informasi / total_informasi_tahun_sebelumnya)
+    const persen_delta_total = persen_delta_keluhan + persen_delta_gangguan + persen_delta_informasi
+
+    formattedData.push([
+      regional,
+      formatNumber(summary.total_keluhan_tahun_sebelumnya),
+      formatNumber(summary.total_gangguan_tahun_sebelumnya),
+      formatNumber(summary.total_keluhan_informasi_tahun_sebelumnya),
+      formatNumber(summary.total_gangguan_informasi_tahun_sebelumnya),
+      formatNumber(total_informasi_tahun_sebelumnya),
+      formatNumber(total_tahun_sebelumnya),
+      formatNumber(summary.total_keluhan_tahun_ini),
+      formatNumber(summary.total_gangguan_tahun_ini),
+      formatNumber(summary.total_keluhan_informasi_tahun_ini),
+      formatNumber(summary.total_gangguan_informasi_tahun_ini),
+      formatNumber(total_informasi_tahun_ini),
+      formatNumber(total_tahun_ini),
+      formatNumber(delta_keluhan),
+      formatNumber(delta_gangguan),
+      formatNumber(delta_informasi),
+      formatPercentage(
+        !persen_delta_keluhan || !isFinite(persen_delta_keluhan) ? 0 : persen_delta_keluhan
+      ),
+      formatPercentage(
+        !persen_delta_gangguan || !isFinite(persen_delta_gangguan) ? 0 : persen_delta_gangguan
+      ),
+      formatPercentage(
+        !persen_delta_informasi || !isFinite(persen_delta_informasi) ? 0 : persen_delta_informasi
+      ),
+      formatPercentage(
+        !persen_delta_total || !isFinite(persen_delta_total) ? 0 : persen_delta_total
+      )
+    ])
+
+    total.total_keluhan_tahun_sebelumnya += summary.total_keluhan_tahun_sebelumnya
+    total.total_gangguan_tahun_sebelumnya += summary.total_gangguan_tahun_sebelumnya
+    total.total_keluhan_informasi_tahun_sebelumnya +=
+      summary.total_keluhan_informasi_tahun_sebelumnya
+    total.total_gangguan_informasi_tahun_sebelumnya +=
+      summary.total_gangguan_informasi_tahun_sebelumnya
+    total.total_keluhan_tahun_ini += summary.total_keluhan_tahun_ini
+    total.total_gangguan_tahun_ini += summary.total_gangguan_tahun_ini
+    total.total_keluhan_informasi_tahun_ini += summary.total_keluhan_informasi_tahun_ini
+    total.total_gangguan_informasi_tahun_ini += summary.total_gangguan_informasi_tahun_ini
+  }
+
+  const total_informasi_tahun_sebelumnya =
+    total.total_keluhan_informasi_tahun_sebelumnya + total.total_gangguan_informasi_tahun_sebelumnya
+  const total_tahun_sebelumnya =
+    total.total_keluhan_tahun_sebelumnya +
+    total.total_gangguan_tahun_sebelumnya +
+    total_informasi_tahun_sebelumnya
+  const total_informasi_tahun_ini =
+    total.total_keluhan_informasi_tahun_ini + total.total_gangguan_informasi_tahun_ini
+  const total_tahun_ini =
+    total.total_keluhan_tahun_ini + total.total_gangguan_tahun_ini + total_informasi_tahun_ini
+  const delta_keluhan = total.total_keluhan_tahun_sebelumnya - total.total_keluhan_tahun_ini
+  const delta_gangguan = total.total_gangguan_tahun_sebelumnya - total.total_gangguan_tahun_ini
+  const delta_informasi = total_informasi_tahun_sebelumnya - total_informasi_tahun_ini
+  const persen_delta_keluhan = 40 * (delta_keluhan / total.total_keluhan_tahun_sebelumnya)
+  const persen_delta_gangguan = 40 * (delta_gangguan / total.total_gangguan_tahun_sebelumnya)
+  const persen_delta_informasi = 20 * (delta_informasi / total_informasi_tahun_sebelumnya)
+  const persen_delta_total = persen_delta_keluhan + persen_delta_gangguan + persen_delta_informasi
+
+  formattedData.push([
+    { content: 'TOTAL', styles: { fontStyle: 'bold' } },
+    formatNumber(total.total_keluhan_tahun_sebelumnya),
+    formatNumber(total.total_gangguan_tahun_sebelumnya),
+    formatNumber(total.total_keluhan_informasi_tahun_sebelumnya),
+    formatNumber(total.total_gangguan_informasi_tahun_sebelumnya),
+    formatNumber(total_informasi_tahun_sebelumnya),
+    formatNumber(total_tahun_sebelumnya),
+    formatNumber(total.total_keluhan_tahun_ini),
+    formatNumber(total.total_gangguan_tahun_ini),
+    formatNumber(total.total_keluhan_informasi_tahun_ini),
+    formatNumber(total.total_gangguan_informasi_tahun_ini),
+    formatNumber(total_informasi_tahun_ini),
+    formatNumber(total_tahun_ini),
+    formatNumber(delta_keluhan),
+    formatNumber(delta_gangguan),
+    formatNumber(delta_informasi),
+    formatPercentage(
+      !persen_delta_keluhan || !isFinite(persen_delta_keluhan) ? 0 : persen_delta_keluhan
+    ),
+    formatPercentage(
+      !persen_delta_gangguan || !isFinite(persen_delta_gangguan) ? 0 : persen_delta_gangguan
+    ),
+    formatPercentage(
+      !persen_delta_informasi || !isFinite(persen_delta_informasi) ? 0 : persen_delta_informasi
+    ),
+    formatPercentage(!persen_delta_total || !isFinite(persen_delta_total) ? 0 : persen_delta_total)
+  ])
+
+  return formattedData
+}
+
+const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
+  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 data = formatData(rawData)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'UNIT INDUK', styles: { cellWidth: 40 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.uid
+          ? reportMeta.uid.name.toUpperCase()
+          : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'UNIT PELAKSANA PELAYANAN PELANGGAN',
+        ':',
+        reportMeta.up3
+          ? reportMeta.up3.name.toUpperCase()
+          : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'UNIT LAYANAN PELANGGAN',
+        ':',
+        reportMeta.ulp
+          ? reportMeta.ulp.name.toUpperCase()
+          : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'REGIONAL',
+        ':',
+        reportMeta.regional
+          ? reportMeta.regional.name.toUpperCase()
+          : 'Semua Regional'.toUpperCase()
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [[`${reportName}`.toUpperCase()], ['s.d. ' + reportMeta.periode]],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 23
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'Nama Unit',
+          rowSpan: 3
+        },
+        {
+          content: 's.d. ' + getMonthNameShort(reportMeta.currentMonth) + ' ' + reportMeta.lastYear,
+          colSpan: 6
+        },
+        {
+          content:
+            's.d. ' + getMonthNameShort(reportMeta.currentMonth) + ' ' + reportMeta.currentYear,
+          colSpan: 6
+        },
+        {
+          content: 'Delta Penurunan',
+          colSpan: 3
+        },
+        {
+          content: '% Penurunan YoY',
+          colSpan: 4
+        }
+      ],
+      [
+        {
+          content: 'Keluhan',
+          rowSpan: 2
+        },
+        {
+          content: 'Gangguan',
+          rowSpan: 2
+        },
+        {
+          content: 'Informasi',
+          colSpan: 3
+        },
+        {
+          content: 'Total Komplain',
+          rowSpan: 2
+        },
+        {
+          content: 'Keluhan',
+          rowSpan: 2
+        },
+        {
+          content: 'Gangguan',
+          rowSpan: 2
+        },
+        {
+          content: 'Informasi',
+          colSpan: 3
+        },
+        {
+          content: 'Total Komplain',
+          rowSpan: 2
+        },
+        {
+          content: 'Keluhan',
+          rowSpan: 2
+        },
+        {
+          content: 'Gangguan',
+          rowSpan: 2
+        },
+        {
+          content: 'Informasi',
+          rowSpan: 2
+        },
+        {
+          content: 'Keluhan',
+          rowSpan: 2
+        },
+        {
+          content: 'Gangguan',
+          rowSpan: 2
+        },
+        {
+          content: 'Informasi',
+          rowSpan: 2
+        },
+        {
+          content: '% Total',
+          rowSpan: 2
+        }
+      ],
+      ['Keluhan', 'Gangguan', 'Total', 'Keluhan', 'Gangguan', 'Total'],
+      [
+        '1',
+        '2',
+        '3',
+        '4',
+        '5',
+        '6=4+5',
+        '7=2+3+6',
+        '8',
+        '9',
+        '10',
+        '11',
+        '12=10+11',
+        '13=8+9+12',
+        '14=2-8',
+        '15=3-9',
+        '16=6-12',
+        '17=40%*(14/2)',
+        '18=40%*(15/3)',
+        '19=20%*(16/6)',
+        '20=17+18+19'
+      ]
+    ],
+    body: data,
+    styles: {
+      fontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+
+      if (data.cell.text[0] === 'TOTAL') {
+        for (const key in data.row.cells) {
+          data.row.cells[key].styles.fillColor = [192, 192, 192]
+          data.row.cells[key].styles.fontStyle = 'bold'
+        }
+      }
+    },
+    startY: 30
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${day}, ${date}-${month}-${year}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
+    window.open(doc.output('bloburl'))
+  } else {
+    doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+      console.log('pdf berhasil disimpan')
+    })
+  }
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `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()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(worksheet, 8, 1, reportMeta.periode, true)
+
+  worksheet.mergeCells('A1:T1')
+  worksheet.mergeCells('A2:T2')
+  worksheet.mergeCells('A3:T3')
+  worksheet.mergeCells('A4:T4')
+  worksheet.mergeCells('A5:T5')
+  worksheet.mergeCells('A7:T7')
+  worksheet.mergeCells('A8:T8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX }