From c104c1183b4b823eda6fff9d60500af232c3f2d0 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Thu, 4 Apr 2024 14:09:47 +0700
Subject: [PATCH] feat: create pdf, xlsx report in anomali

---
 .../Pages/Anomali/Gangguan/Anomali_LAPPGP.vue |   2 +-
 .../Anomali/Gangguan/Anomali_LAPPGP_LPP.vue   |  37 +-
 .../Anomali/Gangguan/Anomali_LAPPGP_LPT.vue   |  36 +-
 .../Pages/Anomali/Gangguan/Anomali_LAPPGU.vue |   2 +-
 .../Anomali/Gangguan/Anomali_LAPPGU_LPP.vue   |  37 +-
 .../Anomali/Gangguan/Anomali_LAPPGU_LPT.vue   |  38 +-
 .../Pages/Anomali/Keluhan/Anomali_LAPPKU.vue  |   2 +-
 .../Anomali/Keluhan/Anomali_LAPPKU_LPP.vue    |  36 +-
 .../Anomali/Keluhan/Anomali_LAPPKU_LPT.vue    |  37 +-
 .../Anomali/Gangguan/Anomali_LAPPGP_LPP.ts    | 325 +++++++++
 .../Anomali/Gangguan/Anomali_LAPPGP_LPT.ts    | 420 ++++++++++++
 .../Anomali/Gangguan/Anomali_LAPPGU_LPP.ts    | 292 ++++++++
 .../Anomali/Gangguan/Anomali_LAPPGU_LPT.ts    | 629 ++++++++++++++++++
 .../Anomali/Keluhan/Anomali_LAPPKU_LPP.ts     | 290 ++++++++
 .../Anomali/Keluhan/Anomali_LAPPKU_LPT.ts     | 508 ++++++++++++++
 15 files changed, 2517 insertions(+), 174 deletions(-)
 create mode 100644 src/report/Anomali/Gangguan/Anomali_LAPPGP_LPP.ts
 create mode 100644 src/report/Anomali/Gangguan/Anomali_LAPPGP_LPT.ts
 create mode 100644 src/report/Anomali/Gangguan/Anomali_LAPPGU_LPP.ts
 create mode 100644 src/report/Anomali/Gangguan/Anomali_LAPPGU_LPT.ts
 create mode 100644 src/report/Anomali/Keluhan/Anomali_LAPPKU_LPP.ts
 create mode 100644 src/report/Anomali/Keluhan/Anomali_LAPPKU_LPT.ts

diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
index 1864a71..cc7083c 100644
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
@@ -17,7 +17,7 @@
     @update:data-sub="dataSub = $event"
     @update:loading-sub-data="loadingSubData = $event"
   />
-  <Anomali_LAPPGP_LPP :data="dataSub" />
+  <Anomali_LAPPGP_LPP :data="dataSub" :filters="filters" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
index bffcc18..04806da 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
@@ -216,16 +216,14 @@ import {
   DxSearchPanel,
   DxSelection
 } 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 { computed, ref } from 'vue'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { exportToPDF, exportToXLSX } from '@/report/Anomali/Gangguan/Anomali_LAPPGP_LPP'
+
 const props = defineProps({
-  data: Array as () => any[]
+  data: Array as () => any[],
+  filters: Object as () => any
 })
 const data = computed(() => props.data)
 const dataSub = ref([])
@@ -233,6 +231,7 @@ const dataSelected = ref({})
 const dataSubSelected = ref({})
 const dialogDetail = ref(false)
 const dataGridRef = ref<DxDataGrid | null>(null)
+const reportMeta = ref<any>(computed(() => props.filters))
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
@@ -247,30 +246,10 @@ const closeDialog = () => {
 
 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
   }
 }
 
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
index 2afd8e2..b785dc6 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
@@ -435,6 +435,8 @@
       />
     </DxSummary>
   </DxDataGrid>
+
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -453,14 +455,11 @@ import {
   DxSelection,
   DxSummary
 } 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 { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
+import { exportToPDF, exportToXLSX } from '@/report/Anomali/Gangguan/Anomali_LAPPGP_LPT'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -485,6 +484,7 @@ const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
 const mediaSelected = ref<any>(null)
 const markingSelected = ref<any>(null)
+const reportMeta = ref<any>(computed(() => props.filters))
 
 const emit = defineEmits(['update:dataSub', 'update:loadingSubData'])
 
@@ -580,30 +580,10 @@ const showDetail = () => {
 
 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
   }
 }
 
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
index 4db90a2..c663d70 100644
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
@@ -11,7 +11,7 @@
   </Filters>
 
   <Anomali_LAPPGU_LPT :data="data" :loading="loadingData" :filters="filters" />
-  <Anomali_LAPPGU_LPP :data="dataSecond" />
+  <Anomali_LAPPGU_LPP :data="dataSecond" :filters="filters" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
index f0892a9..06aca6f 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
@@ -123,17 +123,16 @@ import {
   DxSearchPanel,
   DxSelection
 } 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 { computed, ref } from 'vue'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { exportToPDF, exportToXLSX } from '@/report/Anomali/Gangguan/Anomali_LAPPGU_LPP'
+
 const props = defineProps({
-  data: Array as () => any[]
+  data: Array as () => any[],
+  filters: Object as () => any
 })
+const reportMeta = ref<any>(computed(() => props.filters))
 const data = computed(() => props.data)
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>({})
@@ -154,30 +153,10 @@ const closeDialog = () => {
 
 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
   }
 }
 
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
index c564b2c..92ff148 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
@@ -2,6 +2,7 @@
   <div class="mt-4 lg:mt-6 max-w-7xl">
     <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
   </div>
+
   <DxDataGrid
     ref="dataGridRef"
     :allow-column-reordering="true"
@@ -1021,6 +1022,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loading || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -1040,16 +1043,14 @@ import {
   DxSelection,
   DxSummary
 } 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 { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import InputText from '@/components/InputText.vue'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import { exportToPDF, exportToXLSX } from '@/report/Anomali/Gangguan/Anomali_LAPPGU_LPT'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const loading = ref(computed(() => props.loading))
@@ -1075,6 +1076,7 @@ const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
 const mediaSelected = ref<any>(null)
 const markingSelected = ref<any>(null)
+const reportMeta = ref<any>(computed(() => props.filters))
 
 const setParameterRequest = (media: any, marking: any) => {
   mediaSelected.value = media
@@ -1168,30 +1170,10 @@ const showDetail = () => {
 
 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
   }
 }
 
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
index d88a802..4244652 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
@@ -11,7 +11,7 @@
   </Filters>
 
   <Anomali_LAPPKU_LPT :data="data" :loading="loadingData" :filters="filters" />
-  <Anomali_LAPPKU_LPP :data="dataSecond" />
+  <Anomali_LAPPKU_LPP :data="dataSecond" :filters="filters" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
index 929370c..84d84e2 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
@@ -124,20 +124,18 @@ import {
   DxSearchPanel,
   DxSelection
 } 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 { computed, ref } from 'vue'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { exportToPDF, exportToXLSX } from '@/report/Anomali/Keluhan/Anomali_LAPPKU_LPP'
+
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const props = defineProps({
   data: Array as () => any[],
+  filters: Object as () => any,
   loading: {
     type: Boolean,
     default: false
@@ -145,36 +143,16 @@ const props = defineProps({
 })
 const data = computed(() => props.data)
 const loading = ref(false)
+const reportMeta = ref<any>(computed(() => props.filters))
 
 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, true)
+  } 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)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
index deeac95..e19f5d6 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
@@ -728,6 +728,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -747,16 +749,14 @@ import {
   DxSelection,
   DxSummary
 } 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 { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
+import { exportToPDF, exportToXLSX } from '@/report/Anomali/Keluhan/Anomali_LAPPKU_LPT'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -780,6 +780,7 @@ const loadingData = ref(false)
 const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
 const mediaSelected = ref<any>(null)
+const reportMeta = ref<any>(computed(() => props.filters))
 
 const setParameterRequest = (media: any) => {
   mediaSelected.value = media
@@ -855,30 +856,10 @@ const getDetail = async () => {
 
 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
   }
 }
 
diff --git a/src/report/Anomali/Gangguan/Anomali_LAPPGP_LPP.ts b/src/report/Anomali/Gangguan/Anomali_LAPPGP_LPP.ts
new file mode 100644
index 0000000..c8295a6
--- /dev/null
+++ b/src/report/Anomali/Gangguan/Anomali_LAPPGP_LPP.ts
@@ -0,0 +1,325 @@
+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'
+
+const reportName = 'Laporan Anomali Penanganan Pengaduan Gangguan Petugas'
+const fontSize = 5
+
+const formatData = (rawData: any) => {
+  const formattedData: any = []
+  const total: any = {
+    wo_total: 0,
+    anomali_pln_mobile_marking: 0,
+    anomali_cc123_marking: 0
+    // total_anomali_marking: 0
+    // persen_anomali_pln_mobile_marking: 0
+    // persen_anomali_cc123_marking
+    // persen_anomali_marking
+  }
+
+  rawData.forEach((item: any) => {
+    total.wo_total += item.wo_total
+    total.anomali_pln_mobile_marking += item.anomali_pln_mobile_marking
+    total.anomali_cc123_marking += item.anomali_cc123_marking
+  })
+
+  const total_anomali_marking = total.anomali_pln_mobile_marking + total.anomali_cc123_marking
+  const persen_anomali_pln_mobile_marking = total.anomali_pln_mobile_marking / total.wo_total
+  const persen_anomali_cc123_marking = total.anomali_cc123_marking / total.wo_total
+  const persen_anomali_marking = persen_anomali_pln_mobile_marking + persen_anomali_cc123_marking
+
+  formattedData.push([
+    {
+      content: 'Semua Unit',
+      colSpan: 2
+    },
+    formatNumber(total.wo_total),
+    formatNumber(total.anomali_pln_mobile_marking),
+    formatNumber(total.anomali_cc123_marking),
+    formatNumber(total_anomali_marking),
+    formatPercentage(
+      !persen_anomali_pln_mobile_marking ? 0 : persen_anomali_pln_mobile_marking * 100
+    ),
+    formatPercentage(!persen_anomali_cc123_marking ? 0 : persen_anomali_cc123_marking * 100),
+    formatPercentage(!persen_anomali_marking ? 0 : persen_anomali_marking * 100)
+  ])
+
+  return formattedData
+}
+
+const formatMetaData = (reportMeta: any) => {
+  const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
+  }
+
+  return { dateFromFormat, dateToFormat, dayTo }
+}
+
+const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
+  const data = formatData(rawData)
+  const meta = formatMetaData(reportMeta)
+  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()
+      ],
+      ['JENIS LAPORAN', ':', reportMeta.jenisLaporan.name.toUpperCase()]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 25
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'Nama Unit',
+          rowSpan: 3
+        },
+        {
+          content: 'Nama Petugas',
+          rowSpan: 3
+        },
+        'Total WO',
+        {
+          content: 'Total Pengaduan Yang Diselesaikan Secara Anomali',
+          colSpan: 3
+        },
+        {
+          content: '% Pengaduan Diselesaikan Secara Anomali',
+          colSpan: 3
+        }
+      ],
+      [
+        '(PLN Mobile, CC123, DLL)',
+        'PLN Mobile',
+        'CC 123',
+        'Total',
+        'PLN Mobile',
+        'CC 123',
+        'Total'
+      ],
+      ['a', 'b', 'c', 'd=b+c', 'e=b/a', 'f=c/a', 'g=e+f']
+    ],
+    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',
+      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: 35
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          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 meta = formatMetaData(reportMeta)
+  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, `JENIS LAPORAN : ${reportMeta.jenisLaporan.name.toUpperCase()}`)
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:I1')
+  worksheet.mergeCells('A2:I2')
+  worksheet.mergeCells('A3:I3')
+  worksheet.mergeCells('A4:I4')
+  worksheet.mergeCells('A5:I5')
+  worksheet.mergeCells('A7:I7')
+  worksheet.mergeCells('A8:I8')
+
+  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/Anomali/Gangguan/Anomali_LAPPGP_LPT.ts b/src/report/Anomali/Gangguan/Anomali_LAPPGP_LPT.ts
new file mode 100644
index 0000000..54cb42a
--- /dev/null
+++ b/src/report/Anomali/Gangguan/Anomali_LAPPGP_LPT.ts
@@ -0,0 +1,420 @@
+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 { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+import { formatNumber, formatPercentage } from '@/utils/numbers'
+
+const reportName = 'Laporan Anomali Penanganan Pengaduan Gangguan Petugas'
+const fontSize = 5
+
+const formatData = (rawData: any) => {
+  const formattedData: any = []
+  const total: any = {
+    total_petugas: 0,
+    anomali_pln_mobile_marking: 0,
+    anomali_pln_mobile_non_marking: 0,
+    anomali_cc123_marking: 0,
+    anomali_cc123_non_marking: 0
+    // total_anomali_marking: 0,
+    // total_anomali_non_marking: 0,
+    // persen_anomali_pln_mobile_marking
+    // persen_anomali_pln_mobile_non_marking
+    // persen_anomali_cc123_marking
+    // persen_anomali_cc123_non_marking
+    // persen_anomali_marking
+    // persen_anomali_non_marking
+  }
+
+  rawData.forEach((item: any) => {
+    total.total_petugas += item.total_petugas
+    total.anomali_pln_mobile_marking += item.anomali_pln_mobile_marking
+    total.anomali_pln_mobile_non_marking += item.anomali_pln_mobile_non_marking
+    total.anomali_cc123_marking += item.anomali_cc123_marking
+    total.anomali_cc123_non_marking += item.anomali_cc123_non_marking
+  })
+
+  const total_anomali_marking = total.anomali_pln_mobile_marking + total.anomali_cc123_marking
+  const total_anomali_non_marking =
+    total.anomali_pln_mobile_non_marking + total.anomali_cc123_non_marking
+  const persen_anomali_pln_mobile_marking = total.anomali_pln_mobile_marking / total.total_petugas
+  const persen_anomali_pln_mobile_non_marking =
+    total.anomali_pln_mobile_non_marking / total.total_petugas
+  const persen_anomali_cc123_marking = total.anomali_cc123_marking / total.total_petugas
+  const persen_anomali_cc123_non_marking = total.anomali_cc123_non_marking / total.total_petugas
+  const persen_anomali_marking = persen_anomali_pln_mobile_marking + persen_anomali_cc123_marking
+  const persen_anomali_non_marking =
+    persen_anomali_pln_mobile_non_marking + persen_anomali_cc123_non_marking
+
+  formattedData.push([
+    'Semua Unit',
+    formatNumber(total.total_petugas),
+    formatNumber(total.anomali_pln_mobile_marking),
+    formatNumber(total.anomali_pln_mobile_non_marking),
+    formatNumber(total.anomali_cc123_marking),
+    formatNumber(total.anomali_cc123_non_marking),
+    formatNumber(total_anomali_marking),
+    formatNumber(total_anomali_non_marking),
+    formatPercentage(
+      !persen_anomali_pln_mobile_marking || !isFinite(persen_anomali_pln_mobile_marking)
+        ? 0
+        : persen_anomali_pln_mobile_marking * 100
+    ),
+    formatPercentage(
+      !persen_anomali_pln_mobile_non_marking || !isFinite(persen_anomali_pln_mobile_non_marking)
+        ? 0
+        : persen_anomali_pln_mobile_non_marking * 100
+    ),
+    formatPercentage(
+      !persen_anomali_cc123_marking || !isFinite(persen_anomali_cc123_marking)
+        ? 0
+        : persen_anomali_cc123_marking * 100
+    ),
+    formatPercentage(
+      !persen_anomali_cc123_non_marking || !isFinite(persen_anomali_cc123_non_marking)
+        ? 0
+        : persen_anomali_cc123_non_marking * 100
+    ),
+    formatPercentage(
+      !persen_anomali_marking || !isFinite(persen_anomali_marking) ? 0 : persen_anomali_marking
+    ),
+    formatPercentage(
+      !persen_anomali_non_marking || !isFinite(persen_anomali_non_marking)
+        ? 0
+        : persen_anomali_non_marking * 100
+    )
+  ])
+
+  return formattedData
+}
+
+const formatMetaData = (reportMeta: any) => {
+  const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
+  }
+
+  return { dateFromFormat, dateToFormat, dayTo }
+}
+
+const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
+  const data = formatData(rawData)
+  const meta = formatMetaData(reportMeta)
+  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()
+      ],
+      ['JENIS LAPORAN', ':', reportMeta.jenisLaporan.name.toUpperCase()]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 25
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'Nama Unit',
+          rowSpan: 4
+        },
+        'Total Petugas',
+        {
+          content: 'Total Petugas Yang Pengaduan Diselesaikan Secara Anomali',
+          colSpan: 6
+        },
+        {
+          content: '% Petugas Yang Pengaduan Diselesaikan Secara Anomali',
+          colSpan: 6
+        }
+      ],
+      [
+        {
+          content: 'a',
+          rowSpan: 3
+        },
+        {
+          content: 'PLN Mobile',
+          colSpan: 2
+        },
+        {
+          content: 'CC 123',
+          colSpan: 2
+        },
+        {
+          content: 'Total',
+          colSpan: 2
+        },
+        {
+          content: 'PLN Mobile',
+          colSpan: 2
+        },
+        {
+          content: 'CC 123',
+          colSpan: 2
+        },
+        {
+          content: 'Total',
+          colSpan: 2
+        }
+      ],
+      [
+        {
+          content: 'b',
+          colSpan: 2
+        },
+        {
+          content: 'c',
+          colSpan: 2
+        },
+        {
+          content: 'd=b+c',
+          colSpan: 2
+        },
+        {
+          content: 'e=b/a',
+          colSpan: 2
+        },
+        {
+          content: 'f=c/a',
+          colSpan: 2
+        },
+        {
+          content: 'g=e+f',
+          colSpan: 2
+        }
+      ],
+      [
+        'Marking',
+        'Non Marking',
+        'Marking',
+        'Non Marking',
+        'Marking',
+        'Non Marking',
+        'Marking',
+        'Non Marking',
+        'Marking',
+        'Non Marking',
+        'Marking',
+        'Non Marking'
+      ]
+    ],
+    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',
+      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: 35
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          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 meta = formatMetaData(reportMeta)
+  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, `JENIS LAPORAN : ${reportMeta.jenisLaporan.name.toUpperCase()}`)
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:N1')
+  worksheet.mergeCells('A2:N2')
+  worksheet.mergeCells('A3:N3')
+  worksheet.mergeCells('A4:N4')
+  worksheet.mergeCells('A5:N5')
+  worksheet.mergeCells('A7:N7')
+  worksheet.mergeCells('A8:N8')
+
+  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/Anomali/Gangguan/Anomali_LAPPGU_LPP.ts b/src/report/Anomali/Gangguan/Anomali_LAPPGU_LPP.ts
new file mode 100644
index 0000000..7396722
--- /dev/null
+++ b/src/report/Anomali/Gangguan/Anomali_LAPPGU_LPP.ts
@@ -0,0 +1,292 @@
+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'
+
+const reportName = 'Laporan Anomali Penanganan Pengaduan Gangguan Unit'
+const fontSize = 5
+
+const formatData = (rawData: any) => {
+  const formattedData: any = []
+  const total: any = {
+    wo_pln_mobile: 0,
+    total_anomali_marking: 0
+    // persen_anomali_marking
+  }
+
+  rawData.forEach((item: any) => {
+    total.wo_pln_mobile += item.wo_pln_mobile
+    total.total_anomali_marking += item.total_anomali_marking
+  })
+
+  const persen_anomali_marking = (total.total_anomali_marking / total.wo_pln_mobile) * 100
+
+  formattedData.push([
+    'Semua Unit',
+    formatNumber(total.wo_pln_mobile),
+    formatNumber(total.total_anomali_marking),
+    formatPercentage(persen_anomali_marking),
+    formatPercentage(
+      !persen_anomali_marking || !isFinite(persen_anomali_marking) ? 0 : persen_anomali_marking
+    )
+  ])
+
+  return formattedData
+}
+
+const formatMetaData = (reportMeta: any) => {
+  const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
+  }
+
+  return { dateFromFormat, dateToFormat, dayTo }
+}
+
+const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
+  const data = formatData(rawData)
+  const meta = formatMetaData(reportMeta)
+  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()
+      ],
+      ['JENIS LAPORAN', ':', reportMeta.jenisLaporan.name.toUpperCase()]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 25
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'Nama Unit',
+          rowSpan: 2
+        },
+        'Total WO PLN Mobile',
+        'Total Pengaduan Yang Diselesaikan Secara Anomali',
+        '% Pengaduan Yang Diselesaikan Secara Anomali'
+      ],
+      ['a', 'b', 'c=b/a']
+    ],
+    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',
+      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: 35
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          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 meta = formatMetaData(reportMeta)
+  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, `JENIS LAPORAN : ${reportMeta.jenisLaporan.name.toUpperCase()}`)
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:D1')
+  worksheet.mergeCells('A2:D2')
+  worksheet.mergeCells('A3:D3')
+  worksheet.mergeCells('A4:D4')
+  worksheet.mergeCells('A5:D5')
+  worksheet.mergeCells('A7:D7')
+  worksheet.mergeCells('A8:D8')
+
+  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/Anomali/Gangguan/Anomali_LAPPGU_LPT.ts b/src/report/Anomali/Gangguan/Anomali_LAPPGU_LPT.ts
new file mode 100644
index 0000000..8a2c95c
--- /dev/null
+++ b/src/report/Anomali/Gangguan/Anomali_LAPPGU_LPT.ts
@@ -0,0 +1,629 @@
+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 { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+import { formatNumber, formatPercentage } from '@/utils/numbers'
+
+const reportName = 'Laporan Anomali Penanganan Pengaduan Gangguan Unit'
+const fontSize = 5
+const detailFontSize = 5
+
+const formatData = (rawData: any) => {
+  const formattedData: any = []
+  const total: any = {
+    wo_cc123: 0,
+    wo_pln_mobile: 0,
+    wo_loket: 0,
+    wo_lainnya: 0,
+    // wo_total
+    anomali_pln_mobile_marking: 0,
+    anomali_pln_mobile_non_marking: 0,
+    anomali_cc123_marking: 0,
+    anomali_cc123_non_marking: 0
+    // total_anomali_marking
+    // total_anomali_non_marking
+    // persen_anomali_pln_mobile_marking
+    // persen_anomali_pln_mobile_non_marking
+    // persen_anomali_cc123_marking
+    // persen_anomali_cc123_non_marking
+    // persen_anomali_marking
+    // persen_anomali_non_marking
+  }
+
+  rawData.forEach((item: any) => {
+    total.wo_cc123 += item.wo_cc123
+    total.wo_pln_mobile += item.wo_pln_mobile
+    total.wo_loket += item.wo_loket
+    total.wo_lainnya += item.wo_lainnya
+    total.anomali_pln_mobile_marking += item.anomali_pln_mobile_marking
+    total.anomali_pln_mobile_non_marking += item.anomali_pln_mobile_non_marking
+    total.anomali_cc123_marking += item.anomali_cc123_marking
+    total.anomali_cc123_non_marking += item.anomali_cc123_non_marking
+  })
+
+  const wo_total = total.wo_cc123 + total.wo_pln_mobile + total.wo_loket + total.wo_lainnya
+  const total_anomali_marking = total.anomali_pln_mobile_marking + total.anomali_cc123_marking
+  const total_anomali_non_marking =
+    total.anomali_pln_mobile_non_marking + total.anomali_cc123_non_marking
+  const persen_anomali_pln_mobile_marking = total.anomali_pln_mobile_marking / wo_total
+  const persen_anomali_pln_mobile_non_marking = total.anomali_pln_mobile_non_marking / wo_total
+  const persen_anomali_cc123_marking = total.anomali_cc123_marking / wo_total
+  const persen_anomali_cc123_non_marking = total.anomali_cc123_non_marking / wo_total
+  const persen_anomali_marking = persen_anomali_pln_mobile_marking + persen_anomali_cc123_marking
+  const persen_anomali_non_marking =
+    persen_anomali_pln_mobile_non_marking + persen_anomali_cc123_non_marking
+
+  formattedData.push([
+    'Semua Unit',
+    formatNumber(total.wo_cc123),
+    formatNumber(total.wo_pln_mobile),
+    formatNumber(total.wo_loket),
+    formatNumber(total.wo_lainnya),
+    formatNumber(wo_total),
+    formatNumber(total.anomali_pln_mobile_marking),
+    formatNumber(total.anomali_pln_mobile_non_marking),
+    formatNumber(total.anomali_cc123_marking),
+    formatNumber(total.anomali_cc123_non_marking),
+    formatNumber(total_anomali_marking),
+    formatNumber(total_anomali_non_marking),
+    formatPercentage(
+      !persen_anomali_pln_mobile_marking || !isFinite(persen_anomali_pln_mobile_marking)
+        ? 0
+        : persen_anomali_pln_mobile_marking * 100
+    ),
+    formatPercentage(
+      !persen_anomali_pln_mobile_non_marking || !isFinite(persen_anomali_pln_mobile_non_marking)
+        ? 0
+        : persen_anomali_pln_mobile_non_marking * 100
+    ),
+    formatPercentage(
+      !persen_anomali_cc123_marking || !isFinite(persen_anomali_cc123_marking)
+        ? 0
+        : persen_anomali_cc123_marking * 100
+    ),
+    formatPercentage(
+      !persen_anomali_cc123_non_marking || !isFinite(persen_anomali_cc123_non_marking)
+        ? 0
+        : persen_anomali_cc123_non_marking * 100
+    ),
+    formatPercentage(
+      !persen_anomali_marking || !isFinite(persen_anomali_marking)
+        ? 0
+        : persen_anomali_marking * 100
+    ),
+    formatPercentage(
+      !persen_anomali_non_marking || !isFinite(persen_anomali_non_marking)
+        ? 0
+        : persen_anomali_non_marking * 100
+    )
+  ])
+
+  return formattedData
+}
+
+const formatMetaData = (reportMeta: any) => {
+  const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
+  }
+
+  return { dateFromFormat, dateToFormat, dayTo }
+}
+
+const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
+  const data = formatData(rawData)
+  const meta = formatMetaData(reportMeta)
+  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()
+      ],
+      ['JENIS LAPORAN', ':', reportMeta.jenisLaporan.name.toUpperCase()]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 25
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'Nama Unit',
+          rowSpan: 4
+        },
+        {
+          content: 'Total WO',
+          colSpan: 5
+        },
+        {
+          content: 'Total Pengaduan Yang Diselesaikan Secara Anomali',
+          colSpan: 6
+        },
+        {
+          content: '% Pengaduan Yang Diselesaikan Secara Anomali',
+          colSpan: 6
+        }
+      ],
+      [
+        'CC 123',
+        'PLN Mobile',
+        'Loket',
+        'Lainnya',
+        'Total',
+        {
+          content: 'PLN Mobile',
+          colSpan: 2
+        },
+        {
+          content: 'CC 123',
+          colSpan: 2
+        },
+        {
+          content: 'Total',
+          colSpan: 2
+        },
+        {
+          content: 'PLN Mobile',
+          colSpan: 2
+        },
+        {
+          content: 'CC 123',
+          colSpan: 2
+        },
+        {
+          content: 'Total',
+          colSpan: 2
+        }
+      ],
+      [
+        {
+          content: 'a',
+          rowSpan: 2
+        },
+        {
+          content: 'b',
+          rowSpan: 2
+        },
+        {
+          content: 'c',
+          rowSpan: 2
+        },
+        {
+          content: 'd',
+          rowSpan: 2
+        },
+        {
+          content: 'e=a+b+c+d',
+          rowSpan: 2
+        },
+        {
+          content: 'f',
+          colSpan: 2
+        },
+        {
+          content: 'g',
+          colSpan: 2
+        },
+        {
+          content: 'h=f+g',
+          colSpan: 2
+        },
+        {
+          content: 'i=f/e',
+          colSpan: 2
+        },
+        {
+          content: 'j=g/e',
+          colSpan: 2
+        },
+        {
+          content: 'k=i+j',
+          colSpan: 2
+        }
+      ],
+      [
+        'Marking',
+        'Non Marking',
+        'Marking',
+        'Non Marking',
+        'Marking',
+        'Non Marking',
+        'Marking',
+        'Non Marking',
+        'Marking',
+        'Non Marking',
+        'Marking',
+        'Non Marking'
+      ]
+    ],
+    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',
+      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: 35
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          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 meta = formatMetaData(reportMeta)
+  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()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    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',
+        'Tgl Lapor',
+        'Dalam Proses Bidang',
+        'Selesai Bidang Unit',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Rayon',
+        'Uraian',
+        'Response Pelanggan'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-',
+      item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-',
+      item.status_akhir,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.nama_ulp,
+      item.uraian,
+      item.respon_pelanggan
+    ]),
+    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: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          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 meta = formatMetaData(reportMeta)
+  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, `JENIS LAPORAN : ${reportMeta.jenisLaporan.name.toUpperCase()}`)
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:R1')
+  worksheet.mergeCells('A2:R2')
+  worksheet.mergeCells('A3:R3')
+  worksheet.mergeCells('A4:R4')
+  worksheet.mergeCells('A5:R5')
+  worksheet.mergeCells('A7:R7')
+  worksheet.mergeCells('A8:R8')
+
+  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 meta = formatMetaData(reportMeta)
+  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,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:P1')
+  worksheet.mergeCells('A3:P3')
+  worksheet.mergeCells('A4:P4')
+
+  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/Anomali/Keluhan/Anomali_LAPPKU_LPP.ts b/src/report/Anomali/Keluhan/Anomali_LAPPKU_LPP.ts
new file mode 100644
index 0000000..b856a17
--- /dev/null
+++ b/src/report/Anomali/Keluhan/Anomali_LAPPKU_LPP.ts
@@ -0,0 +1,290 @@
+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'
+
+const reportName = 'Laporan Anomali Penanganan Pengaduan Keluhan Unit'
+const fontSize = 5
+
+const formatData = (rawData: any) => {
+  const formattedData: any = []
+  const total: any = {
+    wo_pln_mobile: 0,
+    total_anomali: 0
+    // persen_anomali
+  }
+
+  rawData.forEach((item: any) => {
+    total.wo_pln_mobile += item.wo_pln_mobile
+    total.total_anomali += item.total_anomali
+  })
+
+  const persen_anomali = (total.total_anomali / total.wo_pln_mobile) * 100
+
+  formattedData.push([
+    'Semua Unit',
+    formatNumber(total.wo_pln_mobile),
+    formatNumber(total.total_anomali),
+    formatPercentage(persen_anomali),
+    formatPercentage(!persen_anomali || !isFinite(persen_anomali) ? 0 : persen_anomali)
+  ])
+
+  return formattedData
+}
+
+const formatMetaData = (reportMeta: any) => {
+  const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
+  }
+
+  return { dateFromFormat, dateToFormat, dayTo }
+}
+
+const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
+  const data = formatData(rawData)
+  const meta = formatMetaData(reportMeta)
+  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()
+      ],
+      ['JENIS LAPORAN', ':', reportMeta.jenisLaporan.name.toUpperCase()]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 25
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'Nama Unit',
+          rowSpan: 2
+        },
+        'Total WO PLN Mobile',
+        'Total Pengaduan Yang Diselesaikan Secara Anomali',
+        '% Pengaduan Yang Diselesaikan Secara Anomali'
+      ],
+      ['a', 'b', 'c=b/a']
+    ],
+    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',
+      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: 35
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          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 meta = formatMetaData(reportMeta)
+  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, `JENIS LAPORAN : ${reportMeta.jenisLaporan.name.toUpperCase()}`)
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:D1')
+  worksheet.mergeCells('A2:D2')
+  worksheet.mergeCells('A3:D3')
+  worksheet.mergeCells('A4:D4')
+  worksheet.mergeCells('A5:D5')
+  worksheet.mergeCells('A7:D7')
+  worksheet.mergeCells('A8:D8')
+
+  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/Anomali/Keluhan/Anomali_LAPPKU_LPT.ts b/src/report/Anomali/Keluhan/Anomali_LAPPKU_LPT.ts
new file mode 100644
index 0000000..32d1999
--- /dev/null
+++ b/src/report/Anomali/Keluhan/Anomali_LAPPKU_LPT.ts
@@ -0,0 +1,508 @@
+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 { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+import { formatNumber, formatPercentage } from '@/utils/numbers'
+
+const reportName = 'Laporan Anomali Penanganan Pengaduan Keluhan Unit'
+const fontSize = 5
+const detailFontSize = 5
+
+const formatData = (rawData: any) => {
+  const formattedData: any = []
+  const total: any = {
+    wo_cc123: 0,
+    wo_pln_mobile: 0,
+    wo_loket: 0,
+    wo_lainnya: 0,
+    // wo_total
+    anomali_pln_mobile: 0,
+    anomali_cc123: 0
+    // total_anomali: 0,
+    // persen_anomali_pln_mobile
+    // persen_anomali_cc123
+    // total_persen_anomali
+  }
+
+  rawData.forEach((item: any) => {
+    total.wo_cc123 += item.wo_cc123
+    total.wo_pln_mobile += item.wo_pln_mobile
+    total.wo_loket += item.wo_loket
+    total.wo_lainnya += item.wo_lainnya
+    total.anomali_pln_mobile += item.anomali_pln_mobile
+    total.anomali_cc123 += item.anomali_cc123
+  })
+
+  const wo_total = total.wo_cc123 + total.wo_pln_mobile + total.wo_loket + total.wo_lainnya
+  const total_anomali = total.anomali_pln_mobile + total.anomali_cc123
+  const persen_anomali_pln_mobile = total.anomali_pln_mobile / wo_total
+  const persen_anomali_cc123 = total.anomali_cc123 / wo_total
+  const total_persen_anomali = persen_anomali_pln_mobile + persen_anomali_cc123
+
+  formattedData.push([
+    'Semua Unit',
+    formatNumber(total.wo_cc123),
+    formatNumber(total.wo_pln_mobile),
+    formatNumber(total.wo_loket),
+    formatNumber(total.wo_lainnya),
+    formatNumber(wo_total),
+    formatNumber(total.anomali_pln_mobile),
+    formatNumber(total.anomali_cc123),
+    formatNumber(total_anomali),
+    formatPercentage(!persen_anomali_pln_mobile ? 0 : persen_anomali_pln_mobile * 100),
+    formatPercentage(!persen_anomali_cc123 ? 0 : persen_anomali_cc123 * 100),
+    formatPercentage(!total_persen_anomali ? 0 : total_persen_anomali * 100)
+  ])
+
+  return formattedData
+}
+
+const formatMetaData = (reportMeta: any) => {
+  const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
+  }
+
+  return { dateFromFormat, dateToFormat, dayTo }
+}
+
+const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
+  const data = formatData(rawData)
+  const meta = formatMetaData(reportMeta)
+  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()
+      ],
+      ['JENIS LAPORAN', ':', reportMeta.jenisLaporan.name.toUpperCase()]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 25
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'Nama Unit',
+          rowSpan: 3
+        },
+        {
+          content: 'Total WO',
+          colSpan: 5
+        },
+        {
+          content: 'Total Pengaduan Yang Diselesaikan Secara Anomali',
+          colSpan: 3
+        },
+        {
+          content: '% Pengaduan Yang Diselesaikan Secara Anomali',
+          colSpan: 3
+        }
+      ],
+      [
+        'CC 123',
+        'PLN Mobile',
+        'Loket',
+        'Lainnya',
+        'Total',
+        'PLN Mobile',
+        'CC 123',
+        'Total',
+        'PLN Mobile',
+        'CC 123',
+        'Total'
+      ],
+      ['a', 'b', 'c', 'd', 'e=a+b+c+d', 'f', 'g', 'h=f+g', 'i=f/e', 'j=g/e', 'k=i+j']
+    ],
+    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',
+      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: 35
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          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 meta = formatMetaData(reportMeta)
+  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()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    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',
+        'Tgl Lapor',
+        'Dalam Proses Bidang',
+        'Selesai Bidang Unit',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Rayon',
+        'Uraian',
+        'Response Pelanggan'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-',
+      item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-',
+      item.status_akhir,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.nama_ulp,
+      item.uraian,
+      item.respon_pelanggan
+    ]),
+    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: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          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 meta = formatMetaData(reportMeta)
+  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, `JENIS LAPORAN : ${reportMeta.jenisLaporan.name.toUpperCase()}`)
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:L1')
+  worksheet.mergeCells('A2:L2')
+  worksheet.mergeCells('A3:L3')
+  worksheet.mergeCells('A4:L4')
+  worksheet.mergeCells('A5:L5')
+  worksheet.mergeCells('A7:L7')
+  worksheet.mergeCells('A8:L8')
+
+  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 meta = formatMetaData(reportMeta)
+  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,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:P1')
+  worksheet.mergeCells('A3:P3')
+  worksheet.mergeCells('A4:P4')
+
+  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 }