diff --git a/package.json b/package.json
index 9d833a8..72be3b0 100755
--- a/package.json
+++ b/package.json
@@ -3,7 +3,8 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "vite --host",
+    "dev": "vite",
+    "host": "vite --host",
     "tailwind": "tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/style.css --watch",
     "build": "run-p type-check build-only",
     "preview": "vite preview --host",
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 7e3d44c..bd90444 100755
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -5545,10 +5545,6 @@ body {
     grid-column-start: 2;
   }
 
-  .sm\:m-8 {
-    margin: 2rem;
-  }
-
   .sm\:mx-0 {
     margin-left: 0px;
     margin-right: 0px;
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index 1821a2f..3a7bb7b 100755
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -4,7 +4,7 @@ import { ref, watch } from 'vue'
 import VueTailwindDatepicker from 'vue-tailwind-datepicker'
 
 const dateValue = ref(
-  `${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${new Date().getMonth().toString().length == 1 ? `0${new Date().getMonth()}` : new Date().getMonth()}-${new Date().getFullYear()} s/d ${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${new Date().getMonth().toString().length == 1 ? `0${new Date().getMonth()}` : new Date().getMonth()}-${new Date().getFullYear()}`
+  `${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${(new Date().getMonth() + 1).toString().length == 1 ? `0${new Date().getMonth() + 1}` : new Date().getMonth() + 1}-${new Date().getFullYear()} s/d ${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${(new Date().getMonth() + 1).toString().length == 1 ? `0${new Date().getMonth() + 1}` : new Date().getMonth() + 1}-${new Date().getFullYear()}`
 )
 const formatter = ref({
   date: 'DD-MM-YYYY',
@@ -15,14 +15,56 @@ const emit = defineEmits(['update:dateValue'])
 const customShortcuts = () => {
   return [
     {
-      label: 'Last 15 Days',
+      label: 'Hari Ini',
+      atClick: () => {
+        const date = new Date()
+        return [new Date(date.setHours(0, 0, 0, 0)), new Date()]
+      }
+    },
+    {
+      label: 'Kemarin',
+      atClick: () => {
+        const date = new Date()
+        return [new Date(date.setDate(date.getDate() - 1)), new Date(date.setHours(0, 0, 0, 0))]
+      }
+    },
+    {
+      label: '7 Hari Terakhir',
+      atClick: () => {
+        const date = new Date()
+        return [new Date(date.setDate(date.getDate() - 7)), new Date()]
+      }
+    },
+    {
+      label: '15 Hari Terakhir',
       atClick: () => {
         const date = new Date()
         return [new Date(date.setDate(date.getDate() - 15)), new Date()]
       }
     },
     {
-      label: 'Last Years',
+      label: '30 Hari Terakhir',
+      atClick: () => {
+        const date = new Date()
+        return [new Date(date.setDate(date.getDate() - 30)), new Date()]
+      }
+    },
+    {
+      label: '3 Bulan Terakhir',
+      atClick: () => {
+        const date = new Date()
+        return [new Date(date.setMonth(date.getMonth() - 3)), new Date()]
+      }
+    },
+    {
+      label: '6 Bulan Terakhir',
+      atClick: () => {
+        const date = new Date()
+        return [new Date(date.setMonth(date.getMonth() - 6)), new Date()]
+      }
+    },
+    {
+      label: '1 Tahun Terakhir',
       atClick: () => {
         const date = new Date()
         return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()]
diff --git a/src/components/Form/FiltersType/Type7.vue b/src/components/Form/FiltersType/Type7.vue
index ad0f5f6..e32f770 100755
--- a/src/components/Form/FiltersType/Type7.vue
+++ b/src/components/Form/FiltersType/Type7.vue
@@ -6,9 +6,9 @@ interface SlaOption {
   max: string
 }
 
-import Select from '@/components/Select.vue';
-import DatePicker from '@/components/DatePicker.vue';
-import InputWithSuffix from '../InputWithSuffix.vue';
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InputWithSuffix from '../InputWithSuffix.vue'
 import {
   selectedUid,
   selectedUp3Posko,
@@ -17,8 +17,8 @@ import {
   itemsUid,
   itemsUp3,
   itemsPosko
-} from './reference';
-import { onMounted, ref, watch } from 'vue';
+} from './reference'
+import { onMounted, ref, watch } from 'vue'
 
 const props = defineProps({
   slaOptions: {
@@ -27,7 +27,7 @@ const props = defineProps({
       {
         id: 1,
         name: 'Dibawah  / Sesuai SLA (<= 45 menit)',
-        min: '1',
+        min: '0',
         max: '45'
       },
       {
@@ -143,14 +143,23 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
+      <Select
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :selected="up3"
+        :placeholder="up3Placeholder"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Posko:</label>
 
-      <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko"
-        :placeholder="poskoPlaceholder" />
+      <Select
+        @update:selected="setPosko($event)"
+        :data="itemsPosko"
+        :selected="posko"
+        :placeholder="poskoPlaceholder"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
@@ -166,12 +175,19 @@ onMounted(() => {
         <Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
 
         <div class="flex flex-1 justify-between gap-x-1.5" :class="[isHidden ? 'hidden' : '']">
-          <InputWithSuffix :value="`${data.minTime} Menit`" @update:text="setMin($event)" class="flex flex-1" />
+          <InputWithSuffix
+            :value="`${data.minTime} Menit`"
+            @update:text="setMin($event)"
+            class="flex flex-1"
+          />
           <small class="flex items-center">s/d</small>
-          <InputWithSuffix :value="`${data.maxTime} Menit`" @update:text="setMax($event)" class="flex flex-1" />
+          <InputWithSuffix
+            :value="`${data.maxTime} Menit`"
+            @update:text="setMax($event)"
+            class="flex flex-1"
+          />
         </div>
       </div>
     </div>
   </div>
-
 </template>
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
index 1864a71..5036b84 100644
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
@@ -12,12 +12,20 @@
 
   <Anomali_LAPPGP_LPT
     :data="data"
-    :loading="loadingData"
     :filters="filters"
     @update:data-sub="dataSub = $event"
     @update:loading-sub-data="loadingSubData = $event"
+    @update:marking="marking = $event"
   />
-  <Anomali_LAPPGP_LPP :data="dataSub" />
+
+  <Anomali_LAPPGP_LPP
+    :data="dataSub"
+    :filters="filters"
+    :marking="marking"
+    @update:loading-sub-data="loadingSubData = $event"
+  />
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -29,6 +37,7 @@ import Filters from '@/components/Form/Filters.vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -37,6 +46,7 @@ const dataSub = ref<any[]>([])
 const dialogDetail = ref(false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const marking = ref<any>(0)
 const filters = ref({
   jenisLaporan: {
     id: 1,
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
index bffcc18..fb0bdf9 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
@@ -1,7 +1,4 @@
 <template>
-  <div class="mt-4 lg:mt-6 max-w-7xl">
-    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
-  </div>
   <DxDataGrid
     ref="dataGridRef"
     :allow-column-reordering="true"
@@ -71,7 +68,7 @@
     <DxColumn
       :width="170"
       alignment="center"
-      data-field=""
+      data-field="nama_petugas"
       caption="Nama Petugas"
       css-class="custom-table-column"
       cell-template="formatText"
@@ -85,11 +82,11 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="wo_total"
           data-type="number"
           caption="a"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberTotalWo"
         />
       </DxColumn>
     </DxColumn>
@@ -102,33 +99,33 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="anomali_pln_mobile_marking"
+          data-field="wo_pln_mobile"
           data-type="number"
           caption="b"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberPLNMobile"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="anomali_cc123_marking"
+          data-field="wo_cc123"
           data-type="number"
           caption="c"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberCC"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="total_anomali_marking"
           data-type="number"
           caption="d=b+c"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberTotal"
+          :calculate-display-value="(rowData: any) => rowData.wo_pln_mobile + rowData.wo_cc123"
         />
       </DxColumn>
     </DxColumn>
@@ -141,7 +138,7 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="persen_anomali_pln_mobile_marking"
+          data-field="persen_anomali_pln_mobile"
           data-type="number"
           caption="e=b/a"
           css-class="custom-table-column"
@@ -152,7 +149,7 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="persen_anomali_cc123_marking"
+          data-field="persen_anomali_cc123"
           data-type="number"
           caption="f=c/a"
           css-class="custom-table-column"
@@ -163,17 +160,102 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="persen_anomali_marking"
           data-type="number"
           caption="g=e+f"
           css-class="custom-table-column"
           cell-template="formatPercentage"
+          :calculate-display-value="
+            (rowData: any) => rowData.persen_anomali_pln_mobile + rowData.persen_anomali_cc123
+          "
         />
       </DxColumn>
     </DxColumn>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer">
+      <p
+        class="text-right cursor-pointer"
+        @click="
+          setParameterRequest({
+            media: null
+          })
+        "
+      >
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberTotalWo="{ data }">
+      <p
+        class="text-right"
+        @click="
+          setParameterRequest({
+            media: null
+          })
+        "
+      >
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberPLNMobile="{ data }">
+      <p
+        class="text-right cursor-pointer"
+        @click="
+          setParameterRequest({
+            media: 1
+          })
+        "
+      >
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberCC="{ data }">
+      <p
+        class="text-right cursor-pointer"
+        @click="
+          setParameterRequest({
+            media: 2
+          })
+        "
+      >
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberTotal="{ data }">
+      <p
+        class="text-right cursor-pointer"
+        @click="
+          setParameterRequest({
+            media: 0
+          })
+        "
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -185,23 +267,576 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer">
+      <p
+        class="text-right"
+        @click="
+          setParameterRequest({
+            media: null
+          })
+        "
+      >
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer">
+      <p
+        class="text-left"
+        @click="
+          setParameterRequest({
+            media: null
+          })
+        "
+      >
         {{ data.text }}
       </p>
     </template>
 
     <template #formatTime="{ data }">
-      <p class="!text-right">
+      <p
+        class="!text-right"
+        @click="
+          setParameterRequest({
+            media: null
+          })
+        "
+      >
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
     </template>
   </DxDataGrid>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Daftar Detail Anomali Penanganan Pengaduan Berulang Petugas"
+    @on-close="closedialogDetail"
+    :full-width="true"
+  >
+    <div class="w-full mb-4 lg:w-[70%] lg:float-left">
+      <div class="p-4 bg-white rounded-xl lg:mr-4">
+        <DxDataGrid
+          :allow-column-reordering="true"
+          class="max-h-[calc(100vh-140px)]"
+          :data-source="dataSub"
+          :show-column-lines="true"
+          :show-row-lines="false"
+          :show-borders="true"
+          :row-alternation-enabled="true"
+          :hover-state-enabled="true"
+          @selection-changed="onDataSubSelectionChanged"
+          :column-width="100"
+          @exporting="onExportingDetail"
+          :allow-column-resizing="true"
+          column-resizing-mode="widget"
+        >
+          <DxSelection mode="single" />
+          <DxPaging :page-size="20" :enabled="true" />
+          <DxPager
+            :visible="true"
+            :allowed-page-sizes="[20, 50, 100]"
+            display-mode="full"
+            :show-page-size-selector="true"
+            :show-info="true"
+            :show-navigation-buttons="true"
+          />
+
+          <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+          <DxExport
+            :enabled="true"
+            :formats="['pdf', 'xlsx', 'document']"
+            :allow-export-selected-data="false"
+          />
+
+          <DxColumn
+            css-class="custom-table-column"
+            :width="50"
+            alignment="center"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i: any) => i == item) + 1"
+            data-type="number"
+            caption="No"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_uid"
+            caption="UIW/D"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_up3"
+            caption="UP3"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_ulp"
+            caption="Rayon"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Nama Petugas"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_laporan"
+            caption="No Laporan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="No Laporan Referensi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_lapor"
+            caption="Tgl/Jam Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_response"
+            caption="Tgl/Jam Datang"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_recovery"
+            caption="Tgl/Jam Nyala"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_response_time"
+            caption="Durasi Response Time"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_recovery_time"
+            caption="Durasi Recovery Time"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_dispatch_time"
+            caption="Durasi Penugasan Regu"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_perjalanan"
+            caption="Durasi Perjalanan Regu"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="distance"
+            caption="Jarak Closing (m)"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="dispatch_by"
+            caption="Dispacth Oleh"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="idpel_nometer"
+            caption="IDPEL/NO METER"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_pelapor"
+            caption="Nama Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="alamat_pelapor"
+            caption="Alamat Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_telp_pelapor"
+            caption="No Telp Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="keterangan_pelapor"
+            caption="Keterangan Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="media"
+            caption="Sumber Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="diselesaikan_oleh"
+            caption="Diselesaikan Oleh"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="status_akhir"
+            caption="Status"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Status Induk"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="referensi_marking"
+            caption="Referensi Marking"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Referensi Marking Induk"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="kode_gangguan"
+            caption="Kode Gangguan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jenis_gangguan"
+            caption="Jenis Gangguan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="penyebab"
+            caption="Penyebab"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tindakan"
+            caption="Tindakan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+
+          <template #formatText="{ data }">
+            <p class="text-left cursor-pointer">
+              {{ data.text }}
+            </p>
+          </template>
+
+          <template #formatNumber="{ data }">
+            <p class="text-right cursor-pointer">
+              {{ data.text }}
+            </p>
+          </template>
+
+          <template #formatTime="{ data }">
+            <p>
+              {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+            </p>
+          </template>
+        </DxDataGrid>
+      </div>
+    </div>
+    <div class="w-full mb-4 lg:w-[30%] lg:float-right">
+      <div class="p-4 space-y-2 bg-white rounded-xl">
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">UIW/D:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_uid" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">UP3:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_up3" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Rayon:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Petugas:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.no_laporan" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan Referensi:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Lapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Datang:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_response"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Nyala:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_recovery"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_response_time)
+                ? formatWaktu(dataSubSelected?.durasi_response_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_recovery_time)
+                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Penugasan Regu:</h3>
+          <InputText
+            :readonly="true"
+            class-name="flex-1"
+            :value="
+              parseInt(dataSubSelected?.durasi_dispatch_time)
+                ? formatWaktu(dataSubSelected?.durasi_dispatch_time)
+                : '-'
+            "
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Perjalanan Regu:</h3>
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_perjalanan)
+                ? formatWaktu(dataSubSelected?.durasi_perjalanan)
+                : '-'
+            "
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Jarak Closing (m):</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.distance" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Dispatch Oleh:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.dispatch_by" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.idpel_nometer" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_pelapor" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            type="textarea"
+            :value="dataSubSelected?.alamat_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.no_telp_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            type="textarea"
+            :value="dataSubSelected?.keterangan_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Sumber Lapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.media" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Diselesaikan Oleh:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.diselesaikan_oleh"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.status_akhir" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Status Induk:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.referensi_marking"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking Induk:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Kode Gangguan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.kode_gangguan" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Jenis Gangguan:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.jenis_gangguan"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.tindakan" class-name="flex-1" />
+        </div>
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -211,73 +846,143 @@ import {
   DxColumnFixing,
   DxExport,
   DxGrouping,
+  DxPager,
   DxPaging,
   DxScrolling,
   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'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
 const props = defineProps({
-  data: Array as () => any[]
+  data: Array as () => any[],
+  filters: Object as () => any,
+  marking: {
+    type: Number,
+    default: 0
+  }
 })
+const filters = computed(() => props.filters)
+const emit = defineEmits(['update:loadingSubData'])
 const data = computed(() => props.data)
-const dataSub = ref([])
-const dataSelected = ref({})
-const dataSubSelected = ref({})
+const dataSub = ref<any[]>([])
+const dataSelected = ref<any>(null)
+const dataSubSelected = ref<any>(null)
 const dialogDetail = ref(false)
+const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
+const parameterRequest = ref<any>({
+  media: null
+})
+const closedialogDetail = () => (dialogDetail.value = false)
+
+const setParameterRequest = (data: any) => {
+  parameterRequest.value = data
+  const parameter = parameterRequest.value
+  if (parameter.media != null) {
+    agreeToShowDialog.value = true
+  } else {
+    agreeToShowDialog.value = false
+  }
+}
+
+const resetData = () => {
+  dataSub.value = []
+  dataSubSelected.value = null
+}
+
+const getDetail = async () => {
+  resetData()
+  const { jenisLaporan } = filters.value
+
+  const selected = dataSelected.value
+  const query = {
+    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
+    idUid: selected?.id_uid ? selected?.id_uid : 0,
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    media: parameterRequest.value?.media,
+    isMarking: props.marking,
+    idPetugas: selected?.id_petugas ? selected?.id_petugas : 0
+  }
+
+  loadingSubData.value = true
+  emit('update:loadingSubData', loadingSubData.value)
+  await requestGraphQl(
+    jenisLaporan.name == 'Laporan Berulang Unit'
+      ? queries.anomali.gangguan.petugasBerulangDetailSub
+      : jenisLaporan.name == 'Laporan Rating Negatif'
+        ? queries.anomali.gangguan.petugasRatingNegatifDetailSub
+        : queries.anomali.gangguan.petugasSkipStepDetailSub,
+    query
+  )
+    .then((result) => {
+      if (result.data.data != undefined) {
+        if (jenisLaporan.name == 'Laporan Berulang Unit') {
+          dataSub.value =
+            result.data.data.subDetailAnomaliPenangananPengaduanGangguanPetugasBerulang
+        } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
+          dataSub.value =
+            result.data.data.subDetailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif
+        } else {
+          dataSub.value =
+            result.data.data.subDetailAnomaliPenangananPengaduanGangguanPetugasSkipStep
+        }
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+      dialogDetail.value = true
+      emit('update:loadingSubData', loadingSubData.value)
+    })
+}
+
 const dataGridRef = ref<DxDataGrid | null>(null)
+const reportMeta = ref<any>(computed(() => props.filters))
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
 }
+
 const showDetail = () => {
   clearSelection()
-  dialogDetail.value = true
-}
-const closeDialog = () => {
-  dialogDetail.value = false
+  dataSub.value = []
+  dataSubSelected.value = null
+  if (agreeToShowDialog.value) {
+    getDetail()
+  }
 }
 
 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 onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
+    showDetail()
   }
-  showDetail()
+}
+
+const onExportingDetail = (e: any) => {}
+
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  dataSubSelected.value = data
 }
 </script>
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
index 2afd8e2..ffe17e9 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
@@ -227,7 +227,10 @@
     </DxColumn>
 
     <template #formatNumberPLNMobileMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 1)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'PLN Mobile', marking: 1 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -239,7 +242,10 @@
     </template>
 
     <template #formatNumberPLNMobileNonMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 2)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'PLN Mobile', marking: 2 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -251,7 +257,10 @@
     </template>
 
     <template #formatNumberCCMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 1)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'Call PLN 123', marking: 1 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -263,7 +272,10 @@
     </template>
 
     <template #formatNumberCCNonMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 2)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'Call PLN 123', marking: 2 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -275,7 +287,7 @@
     </template>
 
     <template #formatNumberTotalMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('', 1)">
+      <p class="text-right cursor-pointer" @click="setParameterRequest({ media: '', marking: 1 })">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -287,7 +299,7 @@
     </template>
 
     <template #formatNumberTotalNonMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('', 2)">
+      <p class="text-right cursor-pointer" @click="setParameterRequest({ media: '', marking: 2 })">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -299,7 +311,10 @@
     </template>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: null, marking: null })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -311,19 +326,25 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: null, marking: null })"
+      >
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer" @click="setParameterRequest(null, null)">
+      <p
+        class="text-left cursor-pointer"
+        @click="setParameterRequest({ media: null, marking: null })"
+      >
         {{ data.text }}
       </p>
     </template>
 
     <template #formatTime="{ data }">
-      <p class="!text-right" @click="setParameterRequest(null, null)">
+      <p class="!text-right" @click="setParameterRequest({ media: null, marking: null })">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
     </template>
@@ -435,6 +456,19 @@
       />
     </DxSummary>
   </DxDataGrid>
+
+  <div class="mt-4 lg:mt-6 max-w-7xl">
+    <h1 class="text-xl font-medium md:text-2xl text-dark">
+      Laporan Pengaduan {{ parameterRequest.media != null ? parameterRequest.media : '' }}
+      {{
+        parameterRequest.marking != null
+          ? parameterRequest.marking == 1
+            ? 'Marking'
+            : 'Non Marking'
+          : ''
+      }}
+    </h1>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -453,14 +487,10 @@ 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'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -468,31 +498,28 @@ const shading = ref(true)
 const showPane = ref(true)
 const props = defineProps({
   data: Array as () => any[],
-  filters: Object as () => any,
-  loading: {
-    type: Boolean,
-    default: false
-  }
+  filters: Object as () => any
 })
+const emit = defineEmits(['update:dataSub', 'update:loadingSubData', 'update:marking'])
 const filters = ref<any>(computed(() => props.filters))
 const data = computed(() => props.data)
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>(null)
 const dataSubSelected = ref<any>(null)
 const dialogDetail = ref(false)
-const loadingData = ref(computed(() => props.loading))
 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 parameterRequest = ref<any>({
+  media: null,
+  marking: null
+})
 
-const emit = defineEmits(['update:dataSub', 'update:loadingSubData'])
-
-const setParameterRequest = (media: any, marking: any) => {
-  mediaSelected.value = media
-  markingSelected.value = marking
-
-  if (media != null && marking != null) {
+const setParameterRequest = (data: any) => {
+  parameterRequest.value = data
+  const parameter = parameterRequest.value
+  if (parameter.media != null && parameter.marking != null) {
+    emit('update:marking', parameter.marking)
     agreeToShowDialog.value = true
   } else {
     agreeToShowDialog.value = false
@@ -506,27 +533,16 @@ const resetData = () => {
 
 const getDetail = async () => {
   resetData()
-  const { ulp, uid, up3, jenisLaporan, periode } = filters.value
-  console.table('LAPPGU', jenisLaporan)
-  console.log('Media', mediaSelected.value)
-  console.log('isMarking', markingSelected.value)
-  console.log('periode', periode)
+  const { jenisLaporan } = filters.value
 
-  const dateValue = periode.split(' s/d ')
   const selected = dataSelected.value
   const query = {
-    // dateFrom: dateValue[0]
-    //   ? dateValue[0].split('-').reverse().join('-')
-    //   : new Date().toISOString().slice(0, 10),
-    // dateTo: dateValue[1]
-    //   ? dateValue[1].split('-').reverse().join('-')
-    //   : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
-    namaRegional: '',
-    media: mediaSelected.value,
-    isMarking: markingSelected.value
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    media: parameterRequest.value?.media,
+    isMarking: parameterRequest.value?.marking
   }
 
   loadingSubData.value = true
@@ -542,11 +558,12 @@ const getDetail = async () => {
     .then((result) => {
       if (result.data.data != undefined) {
         if (jenisLaporan.name == 'Laporan Berulang Unit') {
-          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitBerulang
+          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanPetugasBerulang
         } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
-          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitRatingNegatif
+          dataSub.value =
+            result.data.data.detailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif
         } else {
-          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitSkipStep
+          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanPetugasSkipStep
         }
       } else {
         dataSub.value = []
@@ -580,30 +597,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..c9854c0 100644
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
@@ -10,8 +10,14 @@
     />
   </Filters>
 
-  <Anomali_LAPPGU_LPT :data="data" :loading="loadingData" :filters="filters" />
-  <Anomali_LAPPGU_LPP :data="dataSecond" />
+  <Anomali_LAPPGU_LPT
+    :data="data"
+    :filters="filters"
+    @update:loading-sub-data="loadingData = $event"
+  />
+  <Anomali_LAPPGU_LPP :data="dataSecond" :filters="filters" />
+
+  <BufferDialog v-if="loadingData" />
 </template>
 
 <script setup lang="ts">
@@ -23,6 +29,7 @@ import { onMounted, ref, watch } from 'vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
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..424f49c 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"
@@ -276,7 +277,10 @@
     </DxColumn>
 
     <template #formatNumberPLNMobileMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 1)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'PLN Mobile', marking: 1 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -288,7 +292,10 @@
     </template>
 
     <template #formatNumberPLNMobileNonMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 2)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'PLN Mobile', marking: 2 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -300,7 +307,10 @@
     </template>
 
     <template #formatNumberCCMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 1)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'Call PLN 123', marking: 1 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -312,7 +322,10 @@
     </template>
 
     <template #formatNumberCCNonMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 2)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'Call PLN 123', marking: 2 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -324,7 +337,7 @@
     </template>
 
     <template #formatNumberTotalMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('', 1)">
+      <p class="text-right cursor-pointer" @click="setParameterRequest({ media: '', marking: 1 })">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -336,7 +349,7 @@
     </template>
 
     <template #formatNumberTotalNonMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('', 2)">
+      <p class="text-right cursor-pointer" @click="setParameterRequest({ media: '', marking: 2 })">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -348,7 +361,10 @@
     </template>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: null, marking: null })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -360,19 +376,25 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: null, marking: null })"
+      >
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer" @click="setParameterRequest(null, null)">
+      <p
+        class="text-left cursor-pointer"
+        @click="setParameterRequest({ media: null, marking: null })"
+      >
         {{ data.text }}
       </p>
     </template>
 
     <template #formatTime="{ data }">
-      <p class="!text-right" @click="setParameterRequest(null, null)">
+      <p class="!text-right" @click="setParameterRequest({ media: null, marking: null })">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
     </template>
@@ -787,7 +809,7 @@
             :width="150"
             alignment="center"
             data-field="tindakan"
-            caption="Tindaan"
+            caption="Tindakan"
             css-class="custom-table-column"
             cell-template="formatText"
           />
@@ -1040,29 +1062,23 @@ 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))
 const shading = ref(true)
 const showPane = ref(true)
 const props = defineProps({
   data: Array as () => any[],
-  filters: Object as () => any,
-  loading: {
-    type: Boolean,
-    default: false
-  }
+  filters: Object as () => any
 })
+const emit = defineEmits(['update:loadingSubData'])
 const filters = ref<any>(computed(() => props.filters))
 const data = computed(() => props.data)
 const dataSub = ref<any[]>([])
@@ -1073,14 +1089,16 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 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 parameterRequest = ref<any>({
+  media: null,
+  marking: null
+})
 
-const setParameterRequest = (media: any, marking: any) => {
-  mediaSelected.value = media
-  markingSelected.value = marking
-
-  if (media != null && marking != null) {
+const setParameterRequest = (data: any) => {
+  parameterRequest.value = data
+  const parameter = parameterRequest.value
+  if (parameter.media != null && parameter.marking != null) {
     agreeToShowDialog.value = true
   } else {
     agreeToShowDialog.value = false
@@ -1094,11 +1112,7 @@ const resetData = () => {
 
 const getDetail = async () => {
   resetData()
-  const { ulp, uid, up3, jenisLaporan, periode } = filters.value
-  console.table('LAPPGU', jenisLaporan)
-  console.log('Media', mediaSelected.value)
-  console.log('isMarking', markingSelected.value)
-  console.log('periode', periode)
+  const { jenisLaporan, periode } = filters.value
 
   const dateValue = periode.split(' s/d ')
   const selected = dataSelected.value
@@ -1113,11 +1127,12 @@ const getDetail = async () => {
     idUid: selected?.id_uid ? selected?.id_uid : 0,
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
     namaRegional: '',
-    media: mediaSelected.value,
-    isMarking: markingSelected.value
+    media: parameterRequest.value?.media,
+    isMarking: parameterRequest.value?.marking
   }
 
   loadingSubData.value = true
+  emit('update:loadingSubData', true)
   await requestGraphQl(
     jenisLaporan.name == 'Laporan Berulang Unit'
       ? queries.anomali.gangguan.unitBerulangDetail
@@ -1145,6 +1160,7 @@ const getDetail = async () => {
     .finally(() => {
       loadingSubData.value = false
       dialogDetail.value = true
+      emit('update:loadingSubData', false)
     })
 }
 
@@ -1168,30 +1184,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/components/Pages/Cico/LaporanCICO.vue b/src/components/Pages/Cico/LaporanCICO.vue
index 05a9f22..b3f3b01 100755
--- a/src/components/Pages/Cico/LaporanCICO.vue
+++ b/src/components/Pages/Cico/LaporanCICO.vue
@@ -1,5 +1,11 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
+  <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
+    @reset-form="data = []"
+    @run-search="() => filterData(filters)"
+    :report-button="true"
+    class="mb-4"
+  >
     <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
 
@@ -193,7 +199,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -868,14 +874,8 @@ import {
   DxSummary,
   DxTotalItem
 } 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 Filters from '@/components/Form/Filters.vue'
 import { Type1 } from '@/components/Form/FiltersType'
-import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@@ -884,6 +884,12 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 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/Cico/LaporanCICO'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -899,6 +905,12 @@ const dataSub = ref<any[]>([])
 const dialogDetail = ref(false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  periode: ''
+})
 
 const closedialogDetail = () => (dialogDetail.value = false)
 
@@ -951,30 +963,19 @@ 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
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
@@ -1021,6 +1022,8 @@ const filterData = async (params: any) => {
       } else {
         data.value = []
       }
+
+      reportMeta.value = filters.value
     })
     .catch((err) => {
       console.error(err)
diff --git a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
index 8e93a94..ef949f7 100755
--- a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
+++ b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
@@ -1,7 +1,8 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
     <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
@@ -19,7 +20,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping auto-expand-all="false" expand-mode="rowClick" />
+      <DxGrouping :auto-expand-all="false" expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -31,7 +32,32 @@
         :allow-export-selected-data="false"
       />
       <DxColumnFixing :enabled="true" />
-
+      <DxColumn
+        alignment="center"
+        data-field=""
+        caption="Semua Unit"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        :group-index="0"
+      />
+      <DxColumn
+        alignment="center"
+        data-field="id_uid"
+        caption="UID"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        :group-index="1"
+        :calculate-display-value="(dataRow: any) => dataRow.nama_uid"
+      />
+      <DxColumn
+        alignment="center"
+        data-field="id_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        :group-index="2"
+        :calculate-display-value="(dataRow: any) => dataRow.nama_up3"
+      />
       <DxColumn
         alignment="center"
         data-field="nama_ulp"
@@ -48,7 +74,7 @@
             data-type="number"
             caption="a"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberWoCC"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
@@ -59,7 +85,7 @@
             data-type="number"
             caption="b"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberWoPLMMobile"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
@@ -70,7 +96,7 @@
             data-type="number"
             caption="c"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberWoComcen"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
@@ -79,9 +105,9 @@
             alignment="center"
             data-field="wo_total"
             data-type="number"
-            caption="d=b+c"
+            caption="d=a+b+c"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberWoTotal"
           />
         </DxColumn>
       </DxColumn>
@@ -94,7 +120,7 @@
             data-type="number"
             caption="e"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberRekomendasi1"
           />
         </DxColumn>
         <DxColumn
@@ -109,7 +135,7 @@
             data-type="number"
             caption="f"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberRekomendasi2"
           />
         </DxColumn>
       </DxColumn>
@@ -121,7 +147,7 @@
           data-type="number"
           caption="g"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberDlpd"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
@@ -132,7 +158,7 @@
           data-type="number"
           caption="h"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberHistory"
         />
       </DxColumn>
 
@@ -153,8 +179,733 @@
           }}
         </p>
       </template>
+
+      <template #formatNumberWoPLMMobile="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setRequirementData({
+              woType: 2,
+              rekomendasiSistem: 0,
+              dlpd: 0,
+              historyP2tl: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberWoCC="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setRequirementData({
+              woType: 1,
+              rekomendasiSistem: 0,
+              dlpd: 0,
+              historyP2tl: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberWoComcen="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setRequirementData({
+              woType: 3,
+              rekomendasiSistem: 0,
+              dlpd: 0,
+              historyP2tl: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberWoTotal="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setRequirementData({
+              woType: 0,
+              rekomendasiSistem: 0,
+              dlpd: 0,
+              historyP2tl: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberRekomendasi1="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setRequirementData({
+              woType: 0,
+              rekomendasiSistem: 1,
+              dlpd: 0,
+              historyP2tl: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberRekomendasi2="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setRequirementData({
+              woType: 0,
+              rekomendasiSistem: 2,
+              dlpd: 0,
+              historyP2tl: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberDlpd="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setRequirementData({
+              woType: 0,
+              rekomendasiSistem: 0,
+              dlpd: 1,
+              historyP2tl: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberHistory="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setRequirementData({
+              woType: 0,
+              rekomendasiSistem: 0,
+              dlpd: 0,
+              historyP2tl: 1
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <DxSummary :calculate-custom-summary="calculateCustomSummary">
+        <DxGroupItem
+          column="wo_cc123"
+          name="wo_cc123"
+          summaryType="custom"
+          :customize-text="(e: any) => formatNumber(e.value)"
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          column="wo_pln_mobile"
+          name="wo_pln_mobile"
+          summaryType="custom"
+          :customize-text="(e: any) => formatNumber(e.value)"
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          column="wo_comcen"
+          name="wo_comcen"
+          summaryType="custom"
+          :customize-text="(e: any) => formatNumber(e.value)"
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          column="wo_total"
+          name="wo_total"
+          summary-type="custom"
+          :customize-text="(e: any) => formatNumber(e.value)"
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          column="rekomendasi_mendatangkan_petugas"
+          summaryType="sum"
+          :customize-text="(e: any) => formatNumber(e.value)"
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          column="rekomendasi_diberikan_ke_pelanggan"
+          summaryType="sum"
+          :customize-text="(e: any) => formatNumber(e.value)"
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          column="dpld"
+          summaryType="sum"
+          :customize-text="(e: any) => formatNumber(e.value)"
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          column="history_p2lt"
+          summaryType="sum"
+          :customize-text="(e: any) => formatNumber(e.value)"
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          css-class="!text-right"
+        />
+      </DxSummary>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Detail CTT & KWH Periksa"
+    @on-close="closedialogDetail"
+    :full-width="true"
+  >
+    <div class="w-full mb-4 lg:w-[70%] lg:float-left">
+      <div class="p-4 bg-white rounded-xl lg:mr-4">
+        <DxDataGrid
+          :allow-column-reordering="true"
+          class="max-h-[calc(100vh-140px)]"
+          :data-source="dataSub"
+          :show-column-lines="true"
+          :show-row-lines="false"
+          :show-borders="true"
+          :row-alternation-enabled="true"
+          :hover-state-enabled="true"
+          @selection-changed="onDataSubSelectionChanged"
+          :column-width="100"
+          @exporting="onExportingDetail"
+          :allow-column-resizing="true"
+          column-resizing-mode="widget"
+        >
+          <DxSelection mode="single" />
+          <DxPaging :page-size="20" :enabled="true" />
+          <DxPager
+            :visible="true"
+            :allowed-page-sizes="[20, 50, 100]"
+            display-mode="full"
+            :show-page-size-selector="true"
+            :show-info="true"
+            :show-navigation-buttons="true"
+          />
+          <!--  -->
+          <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+          <DxExport
+            :enabled="true"
+            :formats="['pdf', 'xlsx', 'document']"
+            :allow-export-selected-data="false"
+          />
+
+          <DxColumn
+            css-class="custom-table-column"
+            :width="50"
+            alignment="center"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i: any) => i == item) + 1"
+            data-type="number"
+            caption="No"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_uid"
+            caption="UIW/D"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_up3"
+            caption="UP3"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_ulp"
+            caption="Rayon"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="id_pelanggan"
+            caption="IDPEL"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nomormeter"
+            caption="NOMETER"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_telp_pelapor"
+            caption="No. Telpon"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_pelapor"
+            caption="Nama"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="alamat_pelapor"
+            caption="Alamat"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="media"
+            caption="Sumber Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_laporan"
+            caption="No Laporan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="r08"
+            caption="08"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="r70"
+            caption="70"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="r71"
+            caption="71"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="r41"
+            caption="41"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="r44"
+            caption="44"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="r45"
+            caption="45"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="r46"
+            caption="46"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="r37"
+            caption="37"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="r47"
+            caption="47"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jenis_dlpd"
+            caption="Jenis DLPD"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="keterangan_dlpd"
+            caption="Keterangan DLPD"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="blth_dlpd"
+            caption="Bulan Tahun DLPD"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_agenda_p2tl"
+            caption="No. Agenda P2TL"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tgl_mohon_p2tl"
+            caption="Tgl Mohon P2T"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tgl_sah_p2tl"
+            caption="Tgl Sah P2TL"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rekomendasi_sistem"
+            caption="Rekomendasi Sistem"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_lapor"
+            caption="Tgl/Jam Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="petugas_regu"
+            caption="Petugas Regu"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="user_vcc"
+            caption="User VCC"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+
+          <template #formatText="{ data }">
+            <p class="text-left cursor-pointer">
+              {{ data.text }}
+            </p>
+          </template>
+
+          <template #formatNumber="{ data }">
+            <p class="text-right cursor-pointer">
+              {{ data.text }}
+            </p>
+          </template>
+
+          <template #formatTime="{ data }">
+            <p>
+              {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+            </p>
+          </template>
+        </DxDataGrid>
+      </div>
+    </div>
+    <div class="w-full mb-4 lg:w-[30%] lg:float-right">
+      <div class="p-4 space-y-2 bg-white rounded-xl">
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">UIW/D:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_uid" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">UP3:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_up3" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Rayon:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.id_pelanggan" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">NOMETER:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nomormeter" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">No. Telpon:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.no_telp_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_pelapor" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.alamat_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Sumber Lapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.media" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.no_laporan" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">08:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.r08" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">70:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.r70" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">71:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.r71" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">41:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.r41" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">44:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.r44" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">45:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.r45" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">46:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.r46" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">37:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.r37" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">47:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.r47" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Jenis DLPD:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.jenis_dlpd" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan DLPD:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.keterangan_dlpd"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Bulan Tahun DLPD:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.blth_dlpd" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">No. Agenda P2TL:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.no_agenda_p2tl"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Mohon P2T:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_mohon_p2tl"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Sah P2TL:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.tgl_sah_p2tl" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Rekomendasi Sistem:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.rekomendasi_sistem"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Lapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Petugas Regu:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.petugas_regu" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">User VCC:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.user_vcc" class-name="flex-1" />
+        </div>
+      </div>
+    </div>
+  </DetailDialog>
+
   <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
@@ -165,26 +916,31 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
   DxGrouping,
   DxLoadPanel,
+  DxPager,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  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 { Type3 } from '@/components/Form/FiltersType'
-import { useQuery } from '@vue/apollo-composable'
 import Filters from '@/components/Form/Filters.vue'
-import gql from 'graphql-tag'
 import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import InputText from '@/components/InputText.vue'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Ctt/CTT_LaporanCttKwhPeriksa'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -200,33 +956,76 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const requirementData = ref<any>({
+  woType: 0,
+  rekomendasiSistem: 0,
+  dlpd: 0,
+  historyP2tl: 0
+})
+const reportMeta = ref({
+  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' },
+  periode: ''
+})
+
+const setRequirementData = (data: any) => (requirementData.value = data)
+
+let cc123 = 0
+let plnMobile = 0
+let comcen = 0
+const calculateCustomSummary = (options: any) => {
+  if (options.name === 'wo_cc123') {
+    if (options.summaryProcess === 'calculate') {
+      cc123 += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = cc123
+    }
+  }
+
+  if (options.name === 'wo_pln_mobile') {
+    if (options.summaryProcess === 'calculate') {
+      plnMobile += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = plnMobile
+    }
+  }
+
+  if (options.name === 'wo_comcen') {
+    if (options.summaryProcess === 'calculate') {
+      comcen += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = comcen
+    }
+  }
+
+  if (options.name === 'wo_total') {
+    if (options.summaryProcess === 'start') {
+      plnMobile = 0
+      cc123 = 0
+      comcen = 0
+    } else if (options.summaryProcess === 'calculate') {
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = plnMobile + cc123 + comcen
+    }
+  }
+}
 
 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 onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
@@ -262,6 +1061,8 @@ const filterData = async (params: any) => {
       } else {
         data.value = []
       }
+
+      reportMeta.value = filters.value
     })
     .catch((err) => {
       console.error(err)
@@ -271,7 +1072,7 @@ const filterData = async (params: any) => {
     })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -283,28 +1084,32 @@ const getDetail = () => {
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
+    idPosko: selected?.id_posko ? selected?.id_posko : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    tipeWo: requirementData.value?.woType ? requirementData.value?.woType : '',
+    rekomendasiSistem: requirementData.value?.rekomendasiSistem,
+    isDlpd: requirementData.value?.dlpd ? requirementData.value?.dlpd : 0,
+    isHistoriP2tl: requirementData.value?.historyP2tl ? requirementData.value?.historyP2tl : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.cttKwhPeriksa.laporanCttKwhPeriksaDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailLaporanCttKwhPeriksa
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+      dialogDetail.value = true
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -315,7 +1120,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
index a347997..3697a7c 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
@@ -122,7 +122,7 @@
       />
       <DxColumn
         css-class="custom-table-column"
-        :width="170"
+        :width="250"
         alignment="center"
         data-field="nama_posko_lama"
         caption="Posko Asal"
@@ -130,7 +130,7 @@
       />
       <DxColumn
         css-class="custom-table-column"
-        :width="170"
+        :width="250"
         alignment="center"
         data-field="nama_posko_baru"
         caption="Posko Tujuan"
@@ -138,7 +138,7 @@
       />
       <DxColumn
         css-class="custom-table-column"
-        :width="150"
+        :width="250"
         alignment="center"
         data-field="status_akhir"
         caption="Status"
@@ -154,7 +154,7 @@
       />
       <DxColumn
         css-class="custom-table-column"
-        :width="150"
+        :width="250"
         alignment="center"
         data-field="nama_pelapor"
         caption="Nama Pelapor"
@@ -162,7 +162,7 @@
       />
       <DxColumn
         css-class="custom-table-column"
-        :width="170"
+        :width="250"
         alignment="center"
         data-field="alamat_pelapor"
         caption="Alamat Pelapor"
@@ -174,7 +174,7 @@
         alignment="center"
         data-field="no_telp_pelapor"
         caption="No Telp Pelapor"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -194,7 +194,7 @@
       />
       <DxColumn
         css-class="custom-table-column"
-        :width="170"
+        :width="250"
         alignment="center"
         data-field="nama_posko_lama"
         caption="Posko"
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
index ea8aff1..1afcd81 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
@@ -6,7 +6,7 @@
         {
           id: 1,
           name: 'Dibawah  / Sesuai SLA (<= 3 Jam)',
-          min: '1',
+          min: '0',
           max: '180'
         },
         {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 405a29c..30eb498 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -60,50 +60,187 @@
       <DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
         :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
       <DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="avg_durasi_dispatch" data-type="number"
-          caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" cell-template="formatDPT" />
-        <DxColumn :width="150" alignment="center" data-field="max_durasi_dispatch" data-type="number" caption="Max"
-          :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
-        <DxColumn :width="150" alignment="center" data-field="min_durasi_dispatch" data-type="number" caption="Min"
-          :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
-        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_dispatch" data-type="number"
-          caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
-        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_dispatch" data-type="number"
-          caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="avg_durasi_dispatch"
+          data-type="number"
+          caption="Rata-Rata"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          cell-template="formatDPT"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="max_durasi_dispatch"
+          data-type="number"
+          caption="Max"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          cell-template="formatTime"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="min_durasi_dispatch"
+          data-type="number"
+          caption="Min"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          cell-template="formatTime"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_diatas_sla_dispatch"
+          data-type="number"
+          caption=">SLA"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_dibawah_sla_dispatch"
+          data-type="number"
+          caption="≤SLA"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
-          caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" cell-template="formatRPT" />
-        <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-          :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
-        <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-          :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
-        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-          caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
-        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-          caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="avg_durasi_response"
+          data-type="number"
+          caption="Rata-Rata"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          cell-template="formatRPT"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="max_durasi_response"
+          data-type="number"
+          caption="Max"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          cell-template="formatTime"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="min_durasi_response"
+          data-type="number"
+          caption="Min"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          cell-template="formatTime"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_diatas_sla_response"
+          data-type="number"
+          caption=">SLA"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_dibawah_sla_response"
+          data-type="number"
+          caption="≤SLA"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
-          caption="Rata-Rata" :allow-resizing="false" cs s-class="custom-table-column" cell-template="formatRCT" />
-        <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
-          :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
-        <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-          :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
-        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
-          caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
-        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
-          caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="avg_durasi_recovery"
+          data-type="number"
+          caption="Rata-Rata"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          cell-template="formatRCT"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="max_durasi_recovery"
+          data-type="number"
+          caption="Max"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          cell-template="formatTime"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="min_durasi_recovery"
+          data-type="number"
+          caption="Min"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          cell-template="formatTime"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_diatas_sla_recovery"
+          data-type="number"
+          caption=">SLA"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_dibawah_sla_recovery"
+          data-type="number"
+          caption="≤SLA"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
       </DxColumn>
 
       <DxSummary :calculate-custom-summary="calculateCustomSummary">
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="total" column="total"
-          summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="total_selesai" column="total_selesai"
-          summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="persen_selesai" column="persen_selesai"
-          summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="total"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="total_selesai"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="persen_selesai"
+          summary-type="avg"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
         <!-- <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
@@ -112,48 +249,143 @@
           summary-type="custom"
           css-class="!text-right"
         /> -->
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="total_inproses" column="total_inproses"
-          summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="persen_inproses"
-          column="persen_inproses" summary-type="custom" css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_dispatch"
-          summary-type="avg" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="total_inproses"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="persen_inproses"
+          summary-type="avg"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="avg_durasi_dispatch"
+          summary-type="avg"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
 
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_dispatch"
-          summary-type="max" css-class="!text-center"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_dispatch"
-          summary-type="min" css-class="!text-center"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_dispatch"
-          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_dispatch"
-          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_response"
-          summary-type="avg" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_response"
-          summary-type="max" css-class="!text-center"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_response"
-          summary-type="min" css-class="!text-center"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_response"
-          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_response"
-          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_recovery"
-          summary-type="avg" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_recovery"
-          summary-type="max" css-class="!text-center"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_recovery"
-          summary-type="min" css-class="!text-center"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_recovery"
-          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_recovery"
-          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="max_durasi_dispatch"
+          summary-type="max"
+          css-class="!text-center"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="min_durasi_dispatch"
+          summary-type="min"
+          css-class="!text-center"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="total_diatas_sla_dispatch"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="total_dibawah_sla_dispatch"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="avg_durasi_response"
+          summary-type="avg"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="max_durasi_response"
+          summary-type="max"
+          css-class="!text-center"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="min_durasi_response"
+          summary-type="min"
+          css-class="!text-center"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="total_diatas_sla_response"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="total_dibawah_sla_response"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="avg_durasi_recovery"
+          summary-type="avg"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="max_durasi_recovery"
+          summary-type="max"
+          css-class="!text-center"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="min_durasi_recovery"
+          summary-type="min"
+          css-class="!text-center"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="total_diatas_sla_recovery"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="total_dibawah_sla_recovery"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
       </DxSummary>
 
       <template #formatText="{ data }">
@@ -571,57 +803,22 @@ const setAgreementDialog = (column: string) => {
     agreeToShowDialog.value = false
   }
 }
-let total_selesai = 0;
-let total_inproses = 0;
-let total = 0;
+
 const calculateCustomSummary = (options: any) => {
+  if (options.name == 'persenSelesai') {
+    console.log(options.component.persen_selesai)
 
-  if (options.name === 'total') {
-    if (options.summaryProcess === 'calculate') {
-      total += options.value;
-    } else if (options.summaryProcess === 'finalize') {
-      options.totalValue = total
-
-    }
-  }
-  if (options.name === 'total_inproses') {
-    if (options.summaryProcess === 'calculate') {
-      total_inproses += options.value;
-    } else if (options.summaryProcess === 'finalize') {
-      options.totalValue = total_inproses
-    }
-  }
-
-  if (options.name === 'total_selesai') {
-    if (options.summaryProcess === 'calculate') {
-      total_selesai += options.value;
-
-    } else if (options.summaryProcess === 'finalize') {
-      options.totalValue = total_selesai
-    }
-
-  }
-
-  if (options.name === 'persen_selesai') {
-    if (options.summaryProcess === 'start') {
-      total_selesai = 0;
-      total = 0;
-    } else if (options.summaryProcess === 'calculate') {
-
-    } else if (options.summaryProcess === 'finalize') {
-
-      options.totalValue = (total_selesai / total) * 100;
-    }
-  }
-  if (options.name === 'persen_inproses') {
-    if (options.summaryProcess === 'start') {
-      total_inproses = 0;
-      total = 0;
-    } else if (options.summaryProcess === 'calculate') {
-
-    } else if (options.summaryProcess === 'finalize') {
-
-      options.totalValue = (total_inproses / total) * 100;
+    switch (options.summaryProcess) {
+      case 'start':
+        // Initializing "totalValue" here
+        options.totalValue = 1
+        break
+      case 'calculate':
+        // Modifying "totalValue" here
+        break
+      case 'finalize':
+        // Assigning the final value to "totalValue" here
+        break
     }
   }
 }
@@ -782,7 +979,7 @@ const showDetail = () => {
   if (agreeToShowDialog.value) {
     dataSub.value = []
     dataSubSelected.value = null
-    //     getDetail()
+    getDetail()
   }
 }
 
@@ -832,29 +1029,29 @@ onMounted(() => {
         nama_ulp: 'ULP DOMPU',
         id_posko: 443201,
         nama_posko: 'POSKO ULP DOMPU',
-        total: 34,
-        total_selesai: 34,
-        persen_selesai: 100,
-        total_inproses: 0,
-        persen_inproses: 0,
-        avg_durasi_dispatch: 4.735294117647059,
-        min_durasi_dispatch: 11,
-        max_durasi_dispatch: 2562,
-        total_dibawah_sla_dispatch: 19,
-        total_diatas_sla_dispatch: 15,
-        avg_durasi_response: 29.848484848484848,
-        min_durasi_response: 625,
-        max_durasi_response: 4202,
-        total_dibawah_sla_response: 27,
-        total_diatas_sla_response: 6,
-        avg_durasi_recovery: 50.53125,
-        min_durasi_recovery: 1282,
-        max_durasi_recovery: 5794,
-        total_dibawah_sla_recovery: 32,
+        total: 426,
+        total_selesai: 374,
+        persen_selesai: 87.79342723004694,
+        total_inproses: 52,
+        persen_inproses: 12.206572769953052,
+        avg_durasi_dispatch: 2.4715447154471546,
+        min_durasi_dispatch: 0,
+        max_durasi_dispatch: 723,
+        total_dibawah_sla_dispatch: 331,
+        total_diatas_sla_dispatch: 38,
+        avg_durasi_response: 12.729411764705882,
+        min_durasi_response: 160,
+        max_durasi_response: 2004,
+        total_dibawah_sla_response: 340,
+        total_diatas_sla_response: 0,
+        avg_durasi_recovery: 21.4070796460177,
+        min_durasi_recovery: 160,
+        max_durasi_recovery: 2619,
+        total_dibawah_sla_recovery: 339,
         total_diatas_sla_recovery: 0,
-        total_dispatch: 34,
-        total_response: 33,
-        total_recovery: 32
+        count_durasi_dispatch: 394,
+        count_durasi_response: 365,
+        count_durasi_recovery: 364
       },
       {
         id: 316201,
@@ -867,29 +1064,64 @@ onMounted(() => {
         nama_ulp: 'ULP MARISA',
         id_posko: 316201,
         nama_posko: 'POSKO ULP MARISA',
-        total: 19,
-        total_selesai: 19,
-        persen_selesai: 100,
-        total_inproses: 0,
-        persen_inproses: 0,
-        avg_durasi_dispatch: 1.6111111111111112,
-        min_durasi_dispatch: 12,
-        max_durasi_dispatch: 437,
-        total_dibawah_sla_dispatch: 16,
-        total_diatas_sla_dispatch: 2,
-        avg_durasi_response: 17.22222222222222,
-        min_durasi_response: 483,
-        max_durasi_response: 2541,
-        total_dibawah_sla_response: 18,
+        total: 152,
+        total_selesai: 121,
+        persen_selesai: 79.60526315789474,
+        total_inproses: 31,
+        persen_inproses: 20.394736842105264,
+        avg_durasi_dispatch: 1.5221238938053097,
+        min_durasi_dispatch: 1,
+        max_durasi_dispatch: 1748,
+        total_dibawah_sla_dispatch: 101,
+        total_diatas_sla_dispatch: 12,
+        avg_durasi_response: 10.786516853932584,
+        min_durasi_response: 54,
+        max_durasi_response: 2349,
+        total_dibawah_sla_response: 89,
         total_diatas_sla_response: 0,
-        avg_durasi_recovery: 31.38888888888889,
-        min_durasi_recovery: 1183,
-        max_durasi_recovery: 3216,
-        total_dibawah_sla_recovery: 18,
+        avg_durasi_recovery: 19.32183908045977,
+        min_durasi_recovery: 54,
+        max_durasi_recovery: 3723,
+        total_dibawah_sla_recovery: 87,
         total_diatas_sla_recovery: 0,
-        total_dispatch: 18,
-        total_response: 18,
-        total_recovery: 18
+        count_durasi_dispatch: 118,
+        count_durasi_response: 94,
+        count_durasi_recovery: 92
+      },
+      {
+        id: 422401,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 42,
+        nama_uid: 'WILAYAH PAPUA DAN PAPUA BARAT',
+        id_up3: 422,
+        nama_up3: 'UP3 BIAK',
+        id_ulp: 42240,
+        nama_ulp: 'ULP WAROPEN',
+        id_posko: 422401,
+        nama_posko: 'POSKO ULP WAROPEN',
+        total: 15,
+        total_selesai: 13,
+        persen_selesai: 86.66666666666667,
+        total_inproses: 2,
+        persen_inproses: 13.333333333333334,
+        avg_durasi_dispatch: 1.0769230769230769,
+        min_durasi_dispatch: 0,
+        max_durasi_dispatch: 218,
+        total_dibawah_sla_dispatch: 13,
+        total_diatas_sla_dispatch: 0,
+        avg_durasi_response: 11.833333333333334,
+        min_durasi_response: 119,
+        max_durasi_response: 1756,
+        total_dibawah_sla_response: 12,
+        total_diatas_sla_response: 0,
+        avg_durasi_recovery: 20.545454545454547,
+        min_durasi_recovery: 119,
+        max_durasi_recovery: 1908,
+        total_dibawah_sla_recovery: 11,
+        total_diatas_sla_recovery: 0,
+        count_durasi_dispatch: 15,
+        count_durasi_response: 14,
+        count_durasi_recovery: 13
       },
       {
         id: 433801,
@@ -902,29 +1134,29 @@ onMounted(() => {
         nama_ulp: 'ULP SUMBA BARAT DAYA',
         id_posko: 433801,
         nama_posko: 'POSKO ULP SUMBA BARAT DAYA',
-        total: 34,
-        total_selesai: 34,
-        persen_selesai: 100,
-        total_inproses: 0,
-        persen_inproses: 0,
-        avg_durasi_dispatch: 2.5185185185185186,
-        min_durasi_dispatch: 17,
-        max_durasi_dispatch: 473,
-        total_dibawah_sla_dispatch: 23,
-        total_diatas_sla_dispatch: 4,
-        avg_durasi_response: 35.34615384615385,
-        min_durasi_response: 768,
-        max_durasi_response: 5726,
-        total_dibawah_sla_response: 19,
-        total_diatas_sla_response: 7,
-        avg_durasi_recovery: 57.34615384615385,
-        min_durasi_recovery: 1571,
-        max_durasi_recovery: 7213,
-        total_dibawah_sla_recovery: 26,
+        total: 188,
+        total_selesai: 162,
+        persen_selesai: 86.17021276595744,
+        total_inproses: 26,
+        persen_inproses: 13.829787234042554,
+        avg_durasi_dispatch: 1.4675324675324675,
+        min_durasi_dispatch: 2,
+        max_durasi_dispatch: 567,
+        total_dibawah_sla_dispatch: 147,
+        total_diatas_sla_dispatch: 7,
+        avg_durasi_response: 12.777777777777779,
+        min_durasi_response: 241,
+        max_durasi_response: 2772,
+        total_dibawah_sla_response: 134,
+        total_diatas_sla_response: 1,
+        avg_durasi_recovery: 26.119402985074625,
+        min_durasi_recovery: 453,
+        max_durasi_recovery: 3755,
+        total_dibawah_sla_recovery: 134,
         total_diatas_sla_recovery: 0,
-        total_dispatch: 27,
-        total_response: 26,
-        total_recovery: 26
+        count_durasi_dispatch: 158,
+        count_durasi_response: 139,
+        count_durasi_recovery: 138
       },
       {
         id: 514603,
@@ -937,29 +1169,29 @@ onMounted(() => {
         nama_ulp: 'ULP NGANJUK',
         id_posko: 514603,
         nama_posko: 'POSKO ULP NGANJUK',
-        total: 183,
-        total_selesai: 183,
-        persen_selesai: 100,
-        total_inproses: 0,
-        persen_inproses: 0,
-        avg_durasi_dispatch: 11.38888888888889,
-        min_durasi_dispatch: 12,
-        max_durasi_dispatch: 4932,
-        total_dibawah_sla_dispatch: 53,
-        total_diatas_sla_dispatch: 37,
-        avg_durasi_response: 14.10204081632653,
-        min_durasi_response: 315,
-        max_durasi_response: 2385,
-        total_dibawah_sla_response: 49,
-        total_diatas_sla_response: 0,
-        avg_durasi_recovery: 21.73469387755102,
-        min_durasi_recovery: 424,
-        max_durasi_recovery: 3989,
-        total_dibawah_sla_recovery: 49,
+        total: 1436,
+        total_selesai: 1238,
+        persen_selesai: 86.2116991643454,
+        total_inproses: 198,
+        persen_inproses: 13.788300835654596,
+        avg_durasi_dispatch: 7.207339449541284,
+        min_durasi_dispatch: 4,
+        max_durasi_dispatch: 2760,
+        total_dibawah_sla_dispatch: 508,
+        total_diatas_sla_dispatch: 582,
+        avg_durasi_response: 21.72106824925816,
+        min_durasi_response: 130,
+        max_durasi_response: 5415,
+        total_dibawah_sla_response: 945,
+        total_diatas_sla_response: 66,
+        avg_durasi_recovery: 27.93168316831683,
+        min_durasi_recovery: 130,
+        max_durasi_recovery: 5978,
+        total_dibawah_sla_recovery: 1010,
         total_diatas_sla_recovery: 0,
-        total_dispatch: 90,
-        total_response: 49,
-        total_recovery: 49
+        count_durasi_dispatch: 1180,
+        count_durasi_response: 1101,
+        count_durasi_recovery: 1100
       },
       {
         id: 532931,
@@ -972,29 +1204,169 @@ onMounted(() => {
         nama_ulp: 'ULP LELES',
         id_posko: 532931,
         nama_posko: 'POSKO ULP LELES',
-        total: 36,
-        total_selesai: 36,
-        persen_selesai: 100,
-        total_inproses: 0,
-        persen_inproses: 0,
-        avg_durasi_dispatch: 0.6388888888888888,
-        min_durasi_dispatch: 5,
-        max_durasi_dispatch: 271,
-        total_dibawah_sla_dispatch: 36,
-        total_diatas_sla_dispatch: 0,
-        avg_durasi_response: 10.38888888888889,
-        min_durasi_response: 295,
-        max_durasi_response: 1270,
-        total_dibawah_sla_response: 36,
-        total_diatas_sla_response: 0,
-        avg_durasi_recovery: 21.63888888888889,
-        min_durasi_recovery: 926,
-        max_durasi_recovery: 1886,
-        total_dibawah_sla_recovery: 36,
+        total: 370,
+        total_selesai: 324,
+        persen_selesai: 87.56756756756758,
+        total_inproses: 46,
+        persen_inproses: 12.432432432432433,
+        avg_durasi_dispatch: 0.9965635738831615,
+        min_durasi_dispatch: 3,
+        max_durasi_dispatch: 1495,
+        total_dibawah_sla_dispatch: 285,
+        total_diatas_sla_dispatch: 6,
+        avg_durasi_response: 16.597173144876326,
+        min_durasi_response: 247,
+        max_durasi_response: 5372,
+        total_dibawah_sla_response: 261,
+        total_diatas_sla_response: 22,
+        avg_durasi_recovery: 25.93594306049822,
+        min_durasi_recovery: 475,
+        max_durasi_recovery: 7354,
+        total_dibawah_sla_recovery: 281,
         total_diatas_sla_recovery: 0,
-        total_dispatch: 36,
-        total_response: 36,
-        total_recovery: 36
+        count_durasi_dispatch: 295,
+        count_durasi_response: 287,
+        count_durasi_recovery: 285
+      },
+      {
+        id: 543601,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 2,
+        nama_uid: 'DISTRIBUSI JAKARTA RAYA',
+        id_up3: 9,
+        nama_up3: 'UP3 CIPUTAT',
+        id_ulp: 54360,
+        nama_ulp: 'UP3 CIPUTAT',
+        id_posko: 543601,
+        nama_posko: 'POSKO CIPUTAT',
+        total: 3446,
+        total_selesai: 2826,
+        persen_selesai: 82.0081253627394,
+        total_inproses: 620,
+        persen_inproses: 17.99187463726059,
+        avg_durasi_dispatch: 3.46793930494371,
+        min_durasi_dispatch: 1,
+        max_durasi_dispatch: 2761,
+        total_dibawah_sla_dispatch: 1740,
+        total_diatas_sla_dispatch: 303,
+        avg_durasi_response: 30.737704918032787,
+        min_durasi_response: 29,
+        max_durasi_response: 8303,
+        total_dibawah_sla_response: 1465,
+        total_diatas_sla_response: 243,
+        avg_durasi_recovery: 49.72835112692764,
+        min_durasi_recovery: 29,
+        max_durasi_recovery: 10280,
+        total_dibawah_sla_recovery: 1686,
+        total_diatas_sla_recovery: 0,
+        count_durasi_dispatch: 2123,
+        count_durasi_response: 1789,
+        count_durasi_recovery: 1768
+      },
+      {
+        id: 327601,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 32,
+        nama_uid: 'WILAYAH SULAWESI SELATAN, TENGGARA DAN BARAT',
+        id_up3: 32700,
+        nama_up3: 'UP3 BULUKUMBA',
+        id_ulp: 32760,
+        nama_ulp: 'ULP SINJAI',
+        id_posko: 327601,
+        nama_posko: 'POSKO ULP SINJAI',
+        total: 401,
+        total_selesai: 344,
+        persen_selesai: 85.785536159601,
+        total_inproses: 57,
+        persen_inproses: 14.214463840399002,
+        avg_durasi_dispatch: 1.3757396449704142,
+        min_durasi_dispatch: 1,
+        max_durasi_dispatch: 2875,
+        total_dibawah_sla_dispatch: 319,
+        total_diatas_sla_dispatch: 19,
+        avg_durasi_response: 17.36760124610592,
+        min_durasi_response: 615,
+        max_durasi_response: 3359,
+        total_dibawah_sla_response: 318,
+        total_diatas_sla_response: 3,
+        avg_durasi_recovery: 31.22429906542056,
+        min_durasi_recovery: 994,
+        max_durasi_recovery: 3849,
+        total_dibawah_sla_recovery: 321,
+        total_diatas_sla_recovery: 0,
+        count_durasi_dispatch: 340,
+        count_durasi_response: 323,
+        count_durasi_recovery: 323
+      },
+      {
+        id: 146301,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 140,
+        nama_uid: 'WILAYAH SUMATERA SELATAN, JAMBI & BENGKULU (S2JB)',
+        id_up3: 1403,
+        nama_up3: 'UP3 BENGKULU',
+        id_ulp: 14630,
+        nama_ulp: 'ULP MUARA AMAN',
+        id_posko: 146301,
+        nama_posko: 'POSKO ULP MUARA AMAN',
+        total: 16,
+        total_selesai: 14,
+        persen_selesai: 87.5,
+        total_inproses: 2,
+        persen_inproses: 12.5,
+        avg_durasi_dispatch: 3.8,
+        min_durasi_dispatch: 91,
+        max_durasi_dispatch: 991,
+        total_dibawah_sla_dispatch: 9,
+        total_diatas_sla_dispatch: 1,
+        avg_durasi_response: 13.555555555555555,
+        min_durasi_response: 625,
+        max_durasi_response: 1117,
+        total_dibawah_sla_response: 9,
+        total_diatas_sla_response: 0,
+        avg_durasi_recovery: 24.444444444444443,
+        min_durasi_recovery: 1305,
+        max_durasi_recovery: 1825,
+        total_dibawah_sla_recovery: 9,
+        total_diatas_sla_recovery: 0,
+        count_durasi_dispatch: 10,
+        count_durasi_response: 9,
+        count_durasi_recovery: 9
+      },
+      {
+        id: 561201,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 56,
+        nama_uid: 'DISTRIBUSI BANTEN',
+        id_up3: 534,
+        nama_up3: 'UP3 BANTEN UTARA',
+        id_ulp: 56120,
+        nama_ulp: 'ULP CILEGON',
+        id_posko: 561201,
+        nama_posko: 'POSKO ULP CILEGON',
+        total: 1177,
+        total_selesai: 1057,
+        persen_selesai: 89.80458793542905,
+        total_inproses: 120,
+        persen_inproses: 10.195412064570943,
+        avg_durasi_dispatch: 2.6475972540045767,
+        min_durasi_dispatch: 2,
+        max_durasi_dispatch: 2544,
+        total_dibawah_sla_dispatch: 796,
+        total_diatas_sla_dispatch: 78,
+        avg_durasi_response: 19.35131396957123,
+        min_durasi_response: 90,
+        max_durasi_response: 4412,
+        total_dibawah_sla_response: 713,
+        total_diatas_sla_response: 10,
+        avg_durasi_recovery: 32.180281690140845,
+        min_durasi_recovery: 90,
+        max_durasi_recovery: 4951,
+        total_dibawah_sla_recovery: 710,
+        total_diatas_sla_recovery: 0,
+        count_durasi_dispatch: 894,
+        count_durasi_response: 743,
+        count_durasi_recovery: 730
       }
     ]
     dataSub.value = []
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
index 3fa738e..bd68796 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
@@ -79,7 +79,7 @@
         data-field="posko_in"
         caption="Posko IN"
         css-class="custom-table-column"
-        cell-template="formatNumber"
+        cell-template="formatNumberPoskoIn"
       />
       <DxColumn
         :width="180"
@@ -87,7 +87,7 @@
         data-field="posko_out"
         caption="Posko OUT"
         css-class="custom-table-column"
-        cell-template="formatNumber"
+        cell-template="formatNumberPoskoOut"
       />
 
       <DxSummary>
@@ -96,6 +96,7 @@
           column="number"
           display-format="Total"
           css-class="!text-left"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -103,6 +104,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -110,17 +112,42 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </DxSummary>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setPoskoSelected('')">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setPoskoSelected('')">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberPoskoIn="{ data }">
+        <p class="text-right cursor-pointer" @click="setPoskoSelected('in')">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberPoskoOut="{ data }">
+        <p class="text-right cursor-pointer" @click="setPoskoSelected('out')">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -522,23 +549,27 @@ const reportMeta = ref({
   posko: { id: 0, name: 'Semua Posko' },
   periode: ''
 })
+const poskoSelected = ref('')
+const setPoskoSelected = (value: string) => {
+  poskoSelected.value = value
+}
 
 const getDetail = async () => {
   loadingSubData.value = true
   const dateValue = filters.value.periode.split(' s/d ')
   const ref = dataSelected.value
 
-  const query = {
+  var query: any = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    idUid: ref.id_uid,
-    idUp3: ref.id_up3,
-    idPoskoLama: ref.id_posko_lama,
-    idPoskoBaru: ref.id_posko_baru
+    idUid: 0,
+    idUp3: 0,
+    idPoskoLama: poskoSelected.value == 'out' ? ref.id_posko_lama : 0,
+    idPoskoBaru: poskoSelected.value == 'in' ? ref.id_posko_baru : 0
   }
 
   await requestGraphQl(queries.gangguan.rekap.gangguanAlihPoskoDetail, query)
@@ -567,8 +598,9 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  // dialogDetail.value = true
-  getDetail()
+  if (poskoSelected.value != '') {
+    getDetail()
+  }
 }
 
 const closeDialog = () => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
index 40ee4b0..971f72d 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@@ -562,7 +562,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (date.value != '') {
-    //     getDetail()
+    getDetail()
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
index a42800c..a533ade 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
@@ -544,7 +544,7 @@ const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
   if (monthSelected.value != null) {
-    //     getDetail()
+    getDetail()
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
index 1a2921f..8d14690 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
@@ -69,9 +69,9 @@
         "
       />
       <DxColumn
-        :width="150"
+        :width="250"
         alignment="center"
-        data-field="jenisGangguan"
+        data-field="tipe_permasalahan"
         caption="Jenis Gangguan"
         css-class="custom-table-column"
         cell-template="formatText"
@@ -80,7 +80,7 @@
         <DxColumn
           :width="120"
           alignment="center"
-          data-field="laporan.total"
+          data-field="total"
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
@@ -90,7 +90,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="laporan.sudahSelesai.jml"
+            data-field="total_selesai"
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
@@ -99,7 +99,7 @@
           <DxColumn
             :width="70"
             alignment="center"
-            data-field="laporan.sudahSelesai.persen"
+            data-field="persen_selesai"
             data-type="number"
             caption="%"
             css-class="custom-table-column"
@@ -110,7 +110,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="laporan.belumSelesai.jml"
+            data-field="total_inproses"
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
@@ -119,7 +119,7 @@
           <DxColumn
             :width="70"
             alignment="center"
-            data-field="laporan.belumSelesai.persen"
+            data-field="persen_inproses"
             data-type="number"
             caption="%"
             css-class="custom-table-column"
@@ -132,7 +132,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.menit.total"
+            data-field="total_durasi_response"
             data-type="number"
             caption="Total"
             css-class="custom-table-column"
@@ -141,7 +141,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.menit.rataRata"
+            data-field="avg_durasi_response"
             data-type="number"
             caption="Rata-Rata"
             css-class="custom-table-column"
@@ -150,7 +150,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.menit.max"
+            data-field="max_durasi_response"
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
@@ -159,7 +159,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.menit.min"
+            data-field="min_durasi_response"
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
@@ -170,7 +170,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.laporan.lebihSla"
+            data-field="total_diatas_sla_response"
             data-type="number"
             caption=">SLA"
             css-class="custom-table-column"
@@ -179,7 +179,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.laporan.kurangSla"
+            data-field="total_dibawah_sla_response"
             data-type="number"
             caption="≤SLA"
             css-class="custom-table-column"
@@ -192,7 +192,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.menit.total"
+            data-field="total_durasi_recovery"
             data-type="number"
             caption="Total"
             css-class="custom-table-column"
@@ -201,7 +201,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.menit.rataRata"
+            data-field="avg_durasi_recovery"
             data-type="number"
             caption="Rata-Rata"
             css-class="custom-table-column"
@@ -210,7 +210,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.menit.max"
+            data-field="max_durasi_recovery"
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
@@ -219,7 +219,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.menit.min"
+            data-field="min_durasi_recovery"
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
@@ -230,7 +230,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.laporan.lebihSla"
+            data-field="total_diatas_sla_recovery"
             data-type="number"
             caption=">SLA"
             css-class="custom-table-column"
@@ -239,7 +239,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.laporan.kurangSla"
+            data-field="total_dibawah_sla_recovery"
             data-type="number"
             caption="≤SLA"
             css-class="custom-table-column"
@@ -248,7 +248,7 @@
         </DxColumn>
       </DxColumn>
 
-      <DxSummary>
+      <DxSummary :calculate-custom-summary="calculateCustomSummary">
         <DxGroupItem
           :show-in-group-footer="true"
           column="no"
@@ -257,7 +257,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.total"
+          column="total"
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
@@ -265,7 +265,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.sudahSelesai.jml"
+          column="total_selesai"
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
@@ -273,7 +273,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.sudahSelesai.persen"
+          column="persen_selesai"
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
@@ -281,7 +281,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.belumSelesai.jml"
+          column="total_inproses"
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
@@ -289,7 +289,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.belumSelesai.persen"
+          column="persen_inproses"
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
@@ -297,7 +297,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.menit.total"
+          column="total_durasi_response"
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
@@ -305,7 +305,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.menit.rataRata"
+          column="avg_durasi_response"
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
@@ -313,7 +313,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.menit.max"
+          column="max_durasi_response"
           summary-type="max"
           display-format="{0}"
           css-class="!text-right"
@@ -321,7 +321,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.menit.min"
+          column="min_durasi_response"
           summary-type="min"
           display-format="{0}"
           css-class="!text-right"
@@ -329,7 +329,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.laporan.lebihSla"
+          column="total_diatas_sla_response"
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
@@ -337,7 +337,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.laporan.kurangSla"
+          column="total_dibawah_sla_response"
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
@@ -345,7 +345,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.menit.total"
+          column="total_durasi_recovery"
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
@@ -353,7 +353,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.menit.rataRata"
+          column="avg_durasi_recovery"
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
@@ -361,7 +361,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.menit.max"
+          column="max_durasi_recovery"
           summary-type="max"
           display-format="{0}"
           css-class="!text-right"
@@ -369,7 +369,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.menit.min"
+          column="min_durasi_recovery"
           summary-type="min"
           display-format="{0}"
           css-class="!text-right"
@@ -377,7 +377,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.laporan.lebihSla"
+          column="total_diatas_sla_recovery"
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
@@ -385,7 +385,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.laporan.kurangSla"
+          column="total_dibawah_sla_recovery"
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
@@ -563,46 +563,8 @@ const filterData = async (params: any) => {
         data.value = [...result.data.data.rekapitulasiPerJenisGangguan].map(
           (item: any, index: number) => {
             return {
-              no: ++index,
-              sub_kelompok: item.sub_kelompok,
-              nama_sub_kelompok: item.nama_sub_kelompok,
-              kode: item.kode,
-              jenisGangguan: item.tipe_permasalahan,
-              laporan: {
-                total: item.total,
-                sudahSelesai: {
-                  jml: item.total_selesai,
-                  persen: item.persen_selesai
-                },
-                belumSelesai: {
-                  jml: item.total_inproses,
-                  persen: item.persen_inproses
-                }
-              },
-              responseTime: {
-                menit: {
-                  total: item.total_durasi_response,
-                  rataRata: item.avg_durasi_response,
-                  max: item.max_durasi_response,
-                  min: item.min_durasi_response
-                },
-                laporan: {
-                  lebihSla: item.total_diatas_sla_response,
-                  kurangSla: item.total_dibawah_sla_response
-                }
-              },
-              recoveryTime: {
-                menit: {
-                  total: item.total_durasi_recovery,
-                  rataRata: item.avg_durasi_recovery,
-                  max: item.max_durasi_recovery,
-                  min: item.min_durasi_recovery
-                },
-                laporan: {
-                  lebihSla: item.total_diatas_sla_recovery,
-                  kurangSla: item.total_dibawah_sla_recovery
-                }
-              }
+              ...item,
+              no: ++index
             }
           }
         )
@@ -619,6 +581,50 @@ const filterData = async (params: any) => {
     })
 }
 
+let total = 0
+let total_selesai = 0
+let total_inproses = 0
+let count_durasi_dispatch = 0
+let total_durasi_dispatch = 0
+let count_durasi_response = 0
+let total_durasi_response = 0
+let count_durasi_recovery = 0
+let total_durasi_recovery = 0
+const calculateCustomSummary = (options: any) => {
+  if (options.name === 'total') {
+    if (options.summaryProcess === 'calculate') {
+      total += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total
+    }
+  }
+
+  if (options.name === 'total_selesai') {
+    if (options.summaryProcess === 'calculate') {
+      total_selesai += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_selesai
+    }
+  }
+
+  if (options.name === 'total_inproses') {
+    if (options.summaryProcess === 'calculate') {
+      total_inproses += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_inproses
+    }
+  }
+
+  if (options.name === 'persen_selesai') {
+    if (options.summaryProcess === 'start') {
+      total = 0
+      total_selesai = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = (total_selesai / total) * 100
+    }
+  }
+}
+
 const filters = ref()
 onMounted(() => {
   if (import.meta.env.DEV) {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index 010b76a..f5b1872 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@@ -75,6 +75,15 @@
         name="UIDGroup"
         :group-index="2"
       />
+      <DxColumn
+        alignment="center"
+        data-field="nama_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        name="UP3Group"
+        :group-index="3"
+      />
       <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
         <DxColumn
           alignment="center"
@@ -1174,6 +1183,7 @@ const setMonth = (month: any) => {
 
 const getDetail = async () => {
   loadingSubData.value = true
+  const { jenisTransaksi } = filters.value
   const dateValue = filters.value.periode.split(' s/d ')
   const ref = dataSelected.value
   const compDate = dateValue[0].split('-').reverse().join('-').split('-')
@@ -1185,11 +1195,35 @@ const getDetail = async () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    posko: ref?.id_posko ? ref?.id_posko : 0,
+    posko: ref?.id_ulp ? ref?.id_ulp : 0,
     idUid: ref?.id_uid ? ref?.id_uid : 0,
     idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
     bulan: monthSelected.value,
-    tahun: parseInt(compDate[0])
+    tahun: parseInt(compDate[0]),
+    is_transaksi_individual:
+      jenisTransaksi.length == 4 || jenisTransaksi.length == 0
+        ? 0
+        : jenisTransaksi.includes('Koreksi Transaksi Individual')
+          ? 1
+          : 2,
+    is_cleansing_transaksi_tm:
+      jenisTransaksi.length == 4 || jenisTransaksi.length == 0
+        ? 0
+        : jenisTransaksi.includes('Cleansing Traksaksi TM')
+          ? 1
+          : 2,
+    is_koreksi_transaksi_tm:
+      jenisTransaksi.length == 4 || jenisTransaksi.length == 0
+        ? 0
+        : jenisTransaksi.includes('Koreksi Transaksi TM')
+          ? 1
+          : 2,
+    is_koreksi_gangguan_dan_anev:
+      jenisTransaksi.length == 4 || jenisTransaksi.length == 0
+        ? 0
+        : jenisTransaksi.includes('Koreksi Kode Gangguan dan Anev')
+          ? 1
+          : 2
   }
 
   loadingSubData.value = true
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index b15482e..d87b76f 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -6,7 +6,7 @@
     :report-button="true"
     class="mb-4"
   >
-    <Type9 @update:filters="(value) => updateFilters(value)" />
+    <Type9 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
@@ -998,11 +998,6 @@ const closeDialog = () => {
   dialogDetail.value = false
 }
 
-const updateFilters = (value: any) => {
-  filters.value = value
-  reportMeta.value.groupBy = value.groupBy
-}
-
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index cff22f2..4906491 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -6,7 +6,7 @@
     :report-button="true"
     class="mb-4"
   >
-    <Type9 @update:filters="(value) => updateFilters(value)" />
+    <Type9 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
@@ -53,7 +53,7 @@
         :width="120"
         alignment="center"
         data-field="nama_uid"
-        caption="Nama UID"
+        caption="UID"
         css-class="custom-table-column"
         group-index="0"
         v-if="isGroupBy"
@@ -296,6 +296,155 @@
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
+
+      <DxSummary :calculate-custom-summary="calculateCustomSummary">
+        <DxTotalItem
+          display-format="TOTAL"
+          show-in-column="tanggal"
+          css-class="text-white !text-left"
+        />
+        <DxTotalItem
+          column="total"
+          name="total"
+          summary-type="custom"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          column="total_selesai"
+          name="total_selesai"
+          summary-type="custom"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          column="persen_selesai"
+          name="persen_selesai"
+          summary-type="custom"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
+
+        <DxTotalItem
+          column="total_inproses"
+          name="total_inproses"
+          summary-type="custom"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          column="persen_inproses"
+          name="persen_inproses"
+          summary-type="custom"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
+
+        <DxTotalItem
+          column="total_durasi_response"
+          name="total_durasi_response"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          column="avg_durasi_response"
+          name="avg_durasi_response"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          column="max_durasi_response"
+          name="max_durasi_response"
+          summary-type="max"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatWaktu(e.value)"
+        />
+        <DxTotalItem
+          column="min_durasi_response"
+          name="min_durasi_response"
+          summary-type="min"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatWaktu(e.value)"
+        />
+
+        <DxTotalItem
+          column="total_diatas_sla_response"
+          name="total_diatas_sla_response"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          column="total_dibawah_sla_response"
+          name="total_dibawah_sla_response"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+
+        <DxTotalItem
+          column="total_durasi_recovery"
+          name="total_durasi_recovery"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          column="avg_durasi_recovery"
+          name="avg_durasi_recovery"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          column="max_durasi_recovery"
+          name="max_durasi_recovery"
+          summary-type="max"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatWaktu(e.value)"
+        />
+        <DxTotalItem
+          column="min_durasi_recovery"
+          name="min_durasi_recovery"
+          summary-type="min"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatWaktu(e.value)"
+        />
+
+        <DxTotalItem
+          column="total_diatas_sla_recovery"
+          name="total_diatas_sla_recovery"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          column="total_dibawah_sla_recovery"
+          name="total_dibawah_sla_recovery"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+      </DxSummary>
     </DxDataGrid>
   </div>
 
@@ -645,7 +794,9 @@ import {
   DxPaging,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxSummary,
+  DxTotalItem
 } from 'devextreme-vue/data-grid'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
@@ -767,11 +918,6 @@ const onExportingDetail = (e: any) => {
   }
 }
 
-const updateFilters = (value: any) => {
-  filters.value = value
-  reportMeta.value.groupBy = value.groupBy
-}
-
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
@@ -835,6 +981,55 @@ const filterData = async (params: any) => {
     })
 }
 
+let total = 0
+let total_selesai = 0
+let persen_selesai = 0
+let total_inproses = 0
+let persen_inproses = 0
+const calculateCustomSummary = (options: any) => {
+  if (options.name === 'total') {
+    if (options.summaryProcess === 'calculate') {
+      total += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total
+    }
+  }
+
+  if (options.name === 'total_selesai') {
+    if (options.summaryProcess === 'calculate') {
+      total_selesai += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_selesai
+    }
+  }
+
+  if (options.name === 'total_inproses') {
+    if (options.summaryProcess === 'calculate') {
+      total_inproses += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_inproses
+    }
+  }
+
+  if (options.name === 'persen_selesai') {
+    if (options.summaryProcess === 'start') {
+      total = 0
+      total_selesai = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = (total_selesai / total) * 100
+    }
+  }
+
+  if (options.name === 'persen_inproses') {
+    if (options.summaryProcess === 'start') {
+      total = 0
+      total_inproses = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = (total_inproses / total) * 100
+    }
+  }
+}
+
 onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = [
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index bb6f00a..1b54708 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -684,7 +684,59 @@ const reportMeta = ref({
 })
 const agreeToShowDialog = ref(false)
 const progressSelected = ref(0)
+// const ratingToShow = ref(0)
+// const nonRating = ref(0)
 
+// const setAgreementDialog = (
+//   status: boolean,
+//   progress: number,
+//   rating: number,
+//   ratingStatus: number
+// ) => {
+//   agreeToShowDialog.value = status
+//   progressSelected.value = progress
+//   ratingToShow.value = rating
+//   nonRating.value = ratingStatus
+// }
+
+// const getDetail = async () => {
+//   const dateValue = filters.value.periode.split(' s/d ')
+//   const ref = dataSelected.value
+
+//   const query = {
+//     dateFrom: dateValue[0]
+//       ? dateValue[0].split('-').reverse().join('-')
+//       : new Date().toISOString().slice(0, 10),
+//     dateTo: dateValue[1]
+//       ? dateValue[1].split('-').reverse().join('-')
+//       : new Date().toISOString().slice(0, 10),
+//     posko: ref?.id_ulp ? ref?.id_ulp : 0,
+//     idUid: ref?.id_uid ? ref?.id_uid : 0,
+//     idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
+//     idRegu: ref?.id_regu ? ref?.id_regu : 0,
+//     namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
+//     isSelesai: progressSelected.value,
+//     isNonRating: nonRating.value,
+//     nilaiRating: ratingToShow.value
+//   }
+
+//   loadingSubData.value = true
+//   await requestGraphQl(queries.gangguan.rekap.gangguanRatingDetail, query)
+//     .then((result) => {
+//       if (result.data.data != undefined) {
+//         dataSub.value = result.data.data.detailRekapitulasiGangguanBerdasarkanRating
+//       } else {
+//         dataSub.value = []
+//       }
+//     })
+//     .catch((err) => {
+//       console.error(err)
+//     })
+//     .finally(() => {
+//       loadingSubData.value = false
+//       dialogDetail.value = true
+//     })
+// }
 const setAgreementDialog = (status: boolean, progress: number) => {
   agreeToShowDialog.value = status
   progressSelected.value = progress
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
index 1ed7a16..8150799 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
@@ -6,13 +6,13 @@
         {
           id: 1,
           name: 'Dibawah  / Sesuai SLA (<= 3 hari)',
-          min: '1',
-          max: '4381'
+          min: '0',
+          max: '4320'
         },
         {
           id: 2,
           name: 'Melebihi SLA (> 3 hari)',
-          min: '4382',
+          min: '4321',
           max: `${99999 * 60 * 24}`
         }
       ]"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
index 6c50125..e7513d0 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
@@ -6,13 +6,13 @@
         {
           id: 1,
           name: 'Dibawah  / Sesuai SLA (<= 1 hari)',
-          min: '1',
-          max: '1501'
+          min: '0',
+          max: '1440'
         },
         {
           id: 2,
           name: 'Melebihi SLA (> 1 hari)',
-          min: '1502',
+          min: '1441',
           max: `${99999 * 60 * 24}`
         }
       ]"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index de6e6c5..4d95660 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -8,6 +8,7 @@
   >
     <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div>
     <DxDataGrid
       @cell-click="onCellClicked"
@@ -503,6 +504,7 @@
       </div>
     </div>
   </DetailDialog>
+
   <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
@@ -511,7 +513,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -532,7 +534,12 @@ 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 { exportToPDF, exportDetailToPDF } from '@/report/Keluhan/Rekap/RKeluhan_ALL'
+import {
+  exportToPDF,
+  exportDetailToPDF,
+  exportToXLSX,
+  exportDetailToXLSX
+} from '@/report/Keluhan/Rekap/RKeluhan_ALL'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
@@ -766,6 +773,7 @@ const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
   } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
   }
 }
@@ -774,6 +782,7 @@ const onExportingDetail = (e: any) => {
   if (e.format === 'pdf') {
     exportDetailToPDF(reportMeta.value, dataSub.value)
   } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
   } else {
   }
 }
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
index f95fb11..f85c5c4 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -132,7 +133,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -467,18 +468,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 { useQuery } from '@vue/apollo-composable'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 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,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Keluhan/Rekap/RKeluhan_BerdasarMedia'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -495,6 +496,12 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 const date = ref('2023-02-04')
+const reportMeta = ref({
+  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' },
+  periode: ''
+})
 
 const setDate = (value: any) => {
   if (isNumber(value)) {
@@ -539,6 +546,8 @@ const filterData = async (params: any) => {
       } else {
         data.value = []
       }
+
+      reportMeta.value = filters.value
     })
     .catch((err) => {
       console.error(err)
@@ -602,30 +611,19 @@ 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
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
index c2eeab3..42a16a9 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -445,7 +446,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -763,6 +764,7 @@
       </div>
     </div>
   </DetailDialog>
+
   <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
@@ -771,7 +773,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type13 from '@/components/Form/FiltersType/Type13.vue'
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -787,18 +789,18 @@ import {
   DxSelection,
   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 { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, isNumber, formatPercentage } 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,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Keluhan/Rekap/RKeluhan_PerFungsiBidang'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -817,6 +819,13 @@ const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
 const progressSelected = ref(0)
 const isGroupBy = ref(false)
+const reportMeta = ref({
+  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' },
+  periode: '',
+  groupBy: false
+})
 
 const setAgreementDialog = (status: boolean, progress: number) => {
   agreeToShowDialog.value = status
@@ -863,6 +872,14 @@ const filterData = async (params: any) => {
             }
           )
         }
+
+        reportMeta.value = {
+          uid: uid ? uid : { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+          up3: up3 ? up3 : { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+          ulp: ulp ? ulp : { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+          periode: params.periode,
+          groupBy: params.groupBy
+        }
       } else {
         data.value = []
       }
@@ -930,30 +947,19 @@ 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
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
index 16492a2..4cdd0b6 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -588,7 +589,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -906,6 +907,7 @@
       </div>
     </div>
   </DetailDialog>
+
   <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
@@ -914,7 +916,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -931,18 +933,18 @@ 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 { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, isNumber, formatPercentage } 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,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Keluhan/Rekap/RKeluhan_PerJenisKeluhan'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -960,6 +962,12 @@ const loadingData = ref(false)
 const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
 const progressSelected = ref(0)
+const reportMeta = ref({
+  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' },
+  periode: ''
+})
 
 const setAgreementDialog = (status: boolean, progress: number) => {
   agreeToShowDialog.value = status
@@ -1003,6 +1011,8 @@ const filterData = async (params: any) => {
       } else {
         data.value = []
       }
+
+      reportMeta.value = filters.value
     })
     .catch((err) => {
       console.error(err)
@@ -1067,30 +1077,19 @@ 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
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
index a1fad5a..24644c1 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -457,7 +458,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -778,7 +779,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type13 from '@/components/Form/FiltersType/Type13.vue'
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -794,18 +795,18 @@ import {
   DxSelection,
   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 { formatWaktu } from '@/components/Form/FiltersType/reference'
 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,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -824,6 +825,13 @@ const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
 const progressSelected = ref(0)
 const isGroupBy = ref(false)
+const reportMeta = ref({
+  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' },
+  periode: '',
+  groupBy: false
+})
 
 const setAgreementDialog = (status: boolean, progress: number) => {
   agreeToShowDialog.value = status
@@ -868,6 +876,14 @@ const filterData = async (params: any) => {
       } else {
         data.value = []
       }
+
+      reportMeta.value = {
+        uid: uid ? uid : { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+        up3: up3 ? up3 : { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+        ulp: ulp ? ulp : { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+        periode: params.periode,
+        groupBy: params.groupBy
+      }
     })
     .catch((err) => {
       console.error(err)
@@ -932,30 +948,19 @@ 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
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index 09b1945..0becdc4 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -459,7 +460,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -780,7 +781,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type13 from '@/components/Form/FiltersType/Type13.vue'
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -796,12 +797,6 @@ import {
   DxSelection,
   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 { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
@@ -809,6 +804,12 @@ import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import { reformatDate } from '@/utils/texts'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Keluhan/Rekap/RKeluhan_PerTanggal'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -827,6 +828,13 @@ const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
 const progressSelected = ref(0)
 const isGroupBy = ref(false)
+const reportMeta = ref({
+  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' },
+  periode: '',
+  groupBy: false
+})
 
 const setAgreementDialog = (status: boolean, progress: number) => {
   agreeToShowDialog.value = status
@@ -864,6 +872,14 @@ const filterData = async (params: any) => {
       } else {
         data.value = []
       }
+
+      reportMeta.value = {
+        uid: uid ? uid : { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+        up3: up3 ? up3 : { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+        ulp: ulp ? ulp : { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+        periode: params.periode,
+        groupBy: params.groupBy
+      }
     })
     .catch((err) => {
       console.error(err)
@@ -930,30 +946,19 @@ 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
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
index ea90ff1..4f7ae3b 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -590,7 +591,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -927,18 +928,18 @@ 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 { formatWaktu } from '@/components/Form/FiltersType/reference'
 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,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Keluhan/Rekap/RKeluhan_PerUnit'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -956,6 +957,11 @@ const loadingData = ref(false)
 const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
 const progressSelected = ref(0)
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  periode: ''
+})
 
 const setAgreementDialog = (status: boolean, progress: number) => {
   agreeToShowDialog.value = status
@@ -998,6 +1004,12 @@ const filterData = async (params: any) => {
       } else {
         data.value = []
       }
+
+      reportMeta.value = {
+        uid: uid ? uid : { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+        up3: up3 ? up3 : { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+        periode: params.periode
+      }
     })
     .catch((err) => {
       console.error(err)
@@ -1062,30 +1074,19 @@ 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
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
diff --git a/src/components/Pages/Material/Daftar/Material_DGMYG.vue b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
index 39042a3..f868180 100755
--- a/src/components/Pages/Material/Daftar/Material_DGMYG.vue
+++ b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
@@ -2,19 +2,21 @@
   <Filters @run-search="() => filterData(filters)" class="mb-4">
     <Type14 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed=""
+      @selection-changed="onSelectionChanged"
       :column-width="100"
-      @exporting=""
+      @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
@@ -41,49 +43,56 @@
         :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
+        cell-template="formatNumber"
       />
 
       <DxColumn
         css-class="custom-table-column"
         :width="170"
         alignment="center"
-        data-field="nomo_gangguan"
+        data-field="no_laporan"
         caption="Nomor Gangguan"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
         :width="170"
         alignment="center"
-        data-field="nama_pelanggan"
+        data-field="nama_pelapor"
         caption="Nama Pelanggan"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
-        :width="170"
+        :width="300"
         alignment="center"
-        data-field="isi_laporan"
+        data-field="keterangan_pelapor"
         caption="Isi Laporan"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
-        :width="170"
+        :width="300"
         alignment="center"
-        data-field="penyebab_gangguan"
+        data-field="penyebab"
         caption="Penyebab Gangguan"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
         :width="170"
         alignment="center"
-        data-field="waktu_padam"
+        data-field="waktu_lapor"
         caption="Tgl Padam"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="waktu_recovery"
         caption="Tgl Nyala"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -91,40 +100,123 @@
         alignment="center"
         data-field="regu"
         caption="Regu"
+        cell-template="formatText"
       />
       <DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
         <DxColumn
           css-class="custom-table-column"
           :width="170"
           alignment="center"
-          data-field="sumber"
+          data-field="media"
           caption="Sumber"
+          cell-template="formatText"
         />
         <DxColumn
           css-class="custom-table-column"
           :width="170"
           alignment="center"
-          data-field=""
+          data-field="nama_material"
           caption="Nama"
+          cell-template="formatText"
         />
         <DxColumn
           css-class="custom-table-column"
           :width="170"
           alignment="center"
-          data-field="satuan"
+          data-field="satuan_material"
           caption="Satuan"
+          cell-template="formatText"
         />
         <DxColumn
           css-class="custom-table-column"
           :width="170"
           alignment="center"
-          data-field="volume"
+          data-field="volume_material"
           caption="Vol"
+          cell-template="formatText"
         />
       </DxColumn>
+
+      <template #formatText="{ data }">
+        <p class="text-left">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #formatNumber="{ data }">
+        <p class="text-right">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
-  <BufferDialog v-if="loading" />
+
+  <DetailDialog :open="dialogDetail" title="Detail Gangguan dan Material" @on-close="closeDialog">
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Gangguan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Isi Laporan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.keterangan_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab Gangguan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.penyebab" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Padam:</h3>
+        <InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Nyala:</h3>
+        <InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Regu:</h3>
+        <InputText :readonly="true" :value="dataSelected?.regu" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber:</h3>
+        <InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama:</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_material" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Satuan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.satuan_material" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Vol:</h3>
+        <InputText :readonly="true" :value="dataSelected?.volume_material" class-name="flex-1" />
+      </div>
+    </div>
+  </DetailDialog>
+
+  <BufferDialog v-if="loadingData" />
 </template>
 
 <script setup lang="ts">
@@ -141,16 +233,38 @@ import {
 } from 'devextreme-vue/data-grid'
 import Filters from '@/components/Form/Filters.vue'
 import { Type14 } from '@/components/Form/FiltersType'
-import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
+import { exportToPDF, exportToXLSX } from '@/report/Material/Daftar/Material_DGMYG'
+
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const loading = ref(false)
+const dataSub = ref<any[]>([])
+const dataSelected = ref<any>()
+const dataSubSelected = ref<any>()
+const dialogDetail = ref(false)
+const loadingData = ref(false)
+const reportMeta = ref({
+  uid: {
+    id: 0,
+    name: 'Semua Distribusi/Wilayah'
+  },
+  up3: {
+    id: 0,
+    name: 'Semua Area'
+  },
+  posko: {
+    id: 0,
+    name: 'Semua Unit Layanan Pelanggan'
+  },
+  periode: ''
+})
 
 const resetData = () => {
   data.value = []
@@ -159,7 +273,7 @@ const resetData = () => {
 const filterData = async (params: any) => {
   resetData()
   const dateValue = params.periode.split(' s/d ')
-  const { posko, idUid, idUp3 } = params
+  const { posko, uid, up3 } = params
 
   const query = {
     dateFrom: dateValue[0]
@@ -168,12 +282,12 @@ const filterData = async (params: any) => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    idUid: idUid ? idUid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
-    posko: posko ? posko.id : 0
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    idPosko: posko ? posko.id : 0
   }
 
-  loading.value = true
+  loadingData.value = true
   await requestGraphQl(queries.material.daftar.daftarGangguanDanMaterialDipakai, query)
     .then((result) => {
       if (result.data.data != undefined) {
@@ -181,13 +295,47 @@ const filterData = async (params: any) => {
       } else {
         data.value = []
       }
+
+      reportMeta.value = filters.value
     })
     .catch((err) => {
       console.error(err)
     })
     .finally(() => {
-      loading.value = false
+      loadingData.value = false
     })
 }
+
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+const showDetail = () => {
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+}
+const closeDialog = () => {
+  dialogDetail.value = false
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
+}
+
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    exportToPDF(reportMeta, data)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta, e)
+  } else {
+  }
+}
+
 const filters = ref()
 </script>
diff --git a/src/components/Pages/Material/Rekap/Material_RPM.vue b/src/components/Pages/Material/Rekap/Material_RPM.vue
index 56ecc2d..6c6ae8a 100755
--- a/src/components/Pages/Material/Rekap/Material_RPM.vue
+++ b/src/components/Pages/Material/Rekap/Material_RPM.vue
@@ -7,14 +7,15 @@
       ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed=""
+      @selection-changed="onSelectionChanged"
       :column-width="100"
-      @exporting=""
+      @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
@@ -41,14 +42,16 @@
         :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
+        cell-template="formatNumber"
       />
 
       <DxColumn
         css-class="custom-table-column"
         :width="170"
         alignment="center"
-        data-field="kode_material"
+        data-field="kode"
         caption="Kode Material"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -56,6 +59,7 @@
         alignment="center"
         data-field="nama_material"
         caption="Nama Material"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -63,6 +67,7 @@
         alignment="center"
         data-field="satuan"
         caption="Satuan"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -70,6 +75,7 @@
         alignment="center"
         data-field="sumber_material"
         caption="Sumber Material"
+        cell-template="formatText"
       />
       <DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
         <DxColumn
@@ -80,11 +86,77 @@
           data-type="number"
           :caption="i"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="total"
+        caption="Jumlah"
+        cell-template="formatNumber"
+      />
+
+      <template #formatText="{ data }">
+        <p class="text-left">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #formatNumber="{ data }">
+        <p class="text-right">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
-  <BufferDialog v-if="loading" />
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Detail Rekapitulasi Pemakaian Material"
+    @on-close="closeDialog"
+  >
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Kode Material:</h3>
+        <InputText :readonly="true" :value="dataSelected?.kode" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Material:</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_material" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Satuan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.satuan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Material:</h3>
+        <InputText :readonly="true" :value="dataSelected?.sumber_material" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full" v-for="i in 31">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl {{ i }}:</h3>
+        <InputText :readonly="true" :value="dataSelected[`tgl${i}`]" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Jumlah:</h3>
+        <InputText :readonly="true" :value="dataSelected?.total" class-name="flex-1" />
+      </div>
+    </div>
+  </DetailDialog>
+
+  <BufferDialog v-if="loadingData" />
 </template>
 
 <script setup lang="ts">
@@ -105,12 +177,36 @@ import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
+import { exportToPDF, exportToXLSX } from '@/report/Material/Rekapitulasi/Material_RPM'
+
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const loading = ref(false)
+const dataSub = ref<any[]>([])
+const dataSelected = ref<any>()
+const dataSubSelected = ref<any>()
+const dialogDetail = ref(false)
+const loadingData = ref(false)
+const reportMeta = ref({
+  uid: {
+    id: 0,
+    name: 'Semua Distribusi/Wilayah'
+  },
+  up3: {
+    id: 0,
+    name: 'Semua Area'
+  },
+  posko: {
+    id: 0,
+    name: 'Semua Unit Layanan Pelanggan'
+  },
+  periode: ''
+})
 
 const resetData = () => {
   data.value = []
@@ -119,7 +215,7 @@ const resetData = () => {
 const filterData = async (params: any) => {
   resetData()
   const dateValue = params.periode.split(' s/d ')
-  const { posko, idUid, idUp3 } = params
+  const { posko, uid, up3 } = params
   const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
@@ -127,12 +223,12 @@ const filterData = async (params: any) => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    idUid: idUid ? idUid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
     posko: posko ? posko.id : 0
   }
 
-  loading.value = true
+  loadingData.value = true
   await requestGraphQl(queries.material.rekap.rekapitulasiPemakaianMaterial, query)
     .then((result) => {
       if (result.data.data != undefined) {
@@ -140,13 +236,47 @@ const filterData = async (params: any) => {
       } else {
         data.value = []
       }
+
+      reportMeta.value = filters.value
     })
     .catch((err) => {
       console.error(err)
     })
     .finally(() => {
-      loading.value = false
+      loadingData.value = false
     })
 }
+
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+const showDetail = () => {
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+}
+const closeDialog = () => {
+  dialogDetail.value = false
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
+}
+
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    exportToPDF(reportMeta, data)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta, e)
+  } else {
+  }
+}
+
 const filters = ref()
 </script>
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
index 6e6955d..ab179c2 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     :report-button="true"
     @run-search="() => filterData(filters)"
@@ -92,7 +93,7 @@
             data-type="number"
             :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberMomLastMonthLastYear"
           />
           <DxColumn
             :width="150"
@@ -101,7 +102,7 @@
             data-type="number"
             :caption="`${getMonthName(currentMonth)} ${currentYear}`"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberMomCurrentMonthCurrentYear"
           />
           <DxColumn
             :width="70"
@@ -121,7 +122,7 @@
             data-type="number"
             :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberYoyCurrentMonthLastYear"
           />
           <DxColumn
             :width="150"
@@ -130,7 +131,7 @@
             data-type="number"
             :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberYoyCurrentMonthCurrentYear"
           />
           <DxColumn
             :width="70"
@@ -252,7 +253,67 @@
       </DxSummary>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setRequirements('', 0, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberMomLastMonthLastYear="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="setRequirements('mom', lastMonth, lastYearMoM)"
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberMomCurrentMonthCurrentYear="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="setRequirements('mom', currentMonth, currentYear)"
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberYoyCurrentMonthLastYear="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="setRequirements('yoy', currentMonth, lastYear)"
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberYoyCurrentMonthCurrentYear="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="setRequirements('yoy', currentMonth, currentYear)"
+        >
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -264,7 +325,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="!text-left cursor-pointer">
+        <p class="!text-left cursor-pointer" @click="setRequirements('', 0, 0)">
           {{ data.text }}
         </p>
       </template>
@@ -710,12 +771,6 @@ import {
   DxSummary,
   DxTotalItem
 } 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'
@@ -725,6 +780,12 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import InputText from '@/components/InputText.vue'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -747,33 +808,45 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const dataType = ref('')
+const dataYear = ref(new Date().getFullYear())
+const dataMonth = ref(new Date().getMonth())
+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: '',
+  lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
+  lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
+  currentMonth: new Date().getMonth(),
+  currentYear: new Date().getFullYear(),
+  lastYear: new Date().getFullYear() - 1
+})
+
+const setRequirements = (type: string, month: number, year: number) => {
+  dataType.value = type
+  dataYear.value = year
+  dataMonth.value = month
+}
 
 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 {
   }
 }
 
@@ -801,6 +874,21 @@ 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}`,
+        lastMonth: lastMonth.value,
+        lastYearMoM: lastYearMoM.value,
+        currentMonth: currentMonth.value,
+        currentYear: currentYear.value,
+        lastYear: lastYear.value
+      }
     })
     .catch((err) => {
       console.error(err)
@@ -816,32 +904,30 @@ const filterData = async (params: any) => {
 }
 
 const getDetail = async () => {
-  const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
   const query = {
-    dateFrom: dateValue[0]
-      ? dateValue[0].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    dateTo: dateValue[1]
-      ? dateValue[1].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
+    bulan: dataMonth.value,
+    tahun: dataYear.value,
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
-    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
-    media: selected?.media ? selected?.media : '',
-    isSelesai: 0,
-    tanggal: '',
-    namaIssuetype: '',
-    namaSubissuetype: ''
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
   loadingSubData.value = true
-  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+  await requestGraphQl(
+    dataType.value == 'yoy'
+      ? queries.monalisa.gangguan.rekap.dispatchingTimeGangguanDetailYoy
+      : queries.monalisa.gangguan.rekap.dispatchingTimeGangguanDetailMom,
+    query
+  )
     .then((result) => {
       if (result.data.data != undefined) {
-        dataSub.value = result.data.data.detailKeluhanAll
+        if (dataType.value == 'yoy') {
+          dataSub.value = result.data.data.detailMonalisaDispatchingTimeGangguanYoy
+        } else {
+          dataSub.value = result.data.data.detailMonalisaDispatchingTimeGangguanMoM
+        }
       } else {
         dataSub.value = []
       }
@@ -863,7 +949,9 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  getDetail()
+  if (dataType.value == 'yoy' || dataType.value == 'mom') {
+    getDetail()
+  }
 }
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
@@ -877,8 +965,6 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const onExportingDetail = (e: any) => {}
-
 const filters = ref()
 onMounted(() => {
   if (import.meta.env.DEV) {
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
index 49e996e..3e8d408 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -285,18 +286,13 @@ import {
   DxSummary,
   DxTotalItem
 } 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/Gangguan/Rekap/MonalisaGR_ENSGangguan'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -319,6 +315,20 @@ 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: '',
+  lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
+  lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
+  currentMonth: new Date().getMonth(),
+  currentYear: new Date().getFullYear(),
+  lastYear: new Date().getFullYear() - 1
+})
 
 const resetData = () => {
   data.value = []
@@ -351,6 +361,21 @@ 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}`,
+        lastMonth: lastMonth.value,
+        lastYearMoM: lastYearMoM.value,
+        currentMonth: currentMonth.value,
+        currentYear: currentYear.value,
+        lastYear: lastYear.value
+      }
     })
     .catch((err) => {
       console.error(err)
@@ -362,30 +387,10 @@ const filterData = async (params: any) => {
 
 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/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
index 7cb5bc7..021b1c9 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -203,7 +204,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -500,6 +501,7 @@
       </div>
     </div>
   </DetailDialog>
+
   <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
@@ -523,12 +525,6 @@ import {
   DxSummary,
   DxTotalItem
 } 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 DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@@ -537,6 +533,13 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 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/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -555,6 +558,15 @@ 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: ''
+})
 
 const closeDialog = () => {
   dialogDetail.value = false
@@ -589,6 +601,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)
@@ -600,33 +622,21 @@ const filterData = async (params: any) => {
 
 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 {
+  }
+}
 const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
index bf90517..5dfc426 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -152,17 +153,16 @@ import {
   DxSummary,
   DxTotalItem
 } 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 { 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
+} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -181,6 +181,15 @@ 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: ''
+})
 
 const resetData = () => {
   data.value = []
@@ -207,6 +216,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)
@@ -218,30 +237,10 @@ const filterData = async (params: any) => {
 
 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 () => {
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
index 1c881b6..0d92d1b 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -7,6 +8,7 @@
   >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div>
     <DxDataGrid
       ref="dataGridRef"
@@ -379,18 +381,16 @@ 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 { 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/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -408,6 +408,17 @@ 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 resetData = () => {
   data.value = []
@@ -433,6 +444,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: bulan.id,
+        currentYear: tahun.id
+      }
     })
     .catch((err) => {
       console.error(err)
@@ -447,30 +470,10 @@ const filterData = async (params: any) => {
 
 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 () => {
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
index 7ac0339..68c3849 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     :report-button="true"
     @reset-form="data = []"
     @run-search="filterData(filters)"
@@ -287,17 +288,15 @@ import {
   DxSummary,
   DxTotalItem
 } 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 { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import {
+  exportToPDF,
+  exportToXLSX
+} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -313,33 +312,27 @@ 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: '',
+  lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
+  lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
+  currentMonth: new Date().getMonth(),
+  currentYear: new Date().getFullYear(),
+  lastYear: new Date().getFullYear() - 1
+})
 
 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 lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
@@ -381,6 +374,21 @@ 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}`,
+        lastMonth: lastMonth.value,
+        lastYearMoM: lastYearMoM.value,
+        currentMonth: currentMonth.value,
+        currentYear: currentYear.value,
+        lastYear: lastYear.value
+      }
     })
     .catch((err) => {
       console.error(err)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
index c24dcd5..d9142a5 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -287,18 +288,13 @@ import {
   DxSummary,
   DxTotalItem
 } 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/Gangguan/Rekap/MonalisaGR_LaporUlang'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -321,6 +317,20 @@ 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: '',
+  lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
+  lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
+  currentMonth: new Date().getMonth(),
+  currentYear: new Date().getFullYear(),
+  lastYear: new Date().getFullYear() - 1
+})
 
 const resetData = () => {
   data.value = []
@@ -353,6 +363,21 @@ 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}`,
+        lastMonth: lastMonth.value,
+        lastYearMoM: lastYearMoM.value,
+        currentMonth: currentMonth.value,
+        currentYear: currentYear.value,
+        lastYear: lastYear.value
+      }
     })
     .catch((err) => {
       console.error(err)
@@ -363,30 +388,10 @@ const filterData = async (params: any) => {
 }
 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 () => {
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
index 76ae1e0..24a0b1f 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     :report-button="true"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
@@ -270,6 +271,7 @@
       </template>
     </DxDataGrid>
   </div>
+
   <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
@@ -292,18 +294,16 @@ import {
   DxSummary,
   DxTotalItem
 } 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/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -326,6 +326,20 @@ 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: '',
+  lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
+  lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
+  currentMonth: new Date().getMonth(),
+  currentYear: new Date().getFullYear(),
+  lastYear: new Date().getFullYear() - 1
+})
 
 const resetData = () => {
   data.value = []
@@ -358,6 +372,21 @@ 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}`,
+        lastMonth: lastMonth.value,
+        lastYearMoM: lastYearMoM.value,
+        currentMonth: currentMonth.value,
+        currentYear: currentYear.value,
+        lastYear: lastYear.value
+      }
     })
     .catch((err) => {
       console.error(err)
@@ -369,30 +398,10 @@ const filterData = async (params: any) => {
 
 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 () => {
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
index f841121..10cf2ef 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     :report-button="true"
     @run-search="() => filterData(filters)"
@@ -270,6 +271,7 @@
       </template>
     </DxDataGrid>
   </div>
+
   <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
@@ -292,18 +294,16 @@ import {
   DxSummary,
   DxTotalItem
 } 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/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -326,6 +326,20 @@ 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: '',
+  lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
+  lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
+  currentMonth: new Date().getMonth(),
+  currentYear: new Date().getFullYear(),
+  lastYear: new Date().getFullYear() - 1
+})
 
 const resetData = () => {
   data.value = []
@@ -358,6 +372,21 @@ 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}`,
+        lastMonth: lastMonth.value,
+        lastYearMoM: lastYearMoM.value,
+        currentMonth: currentMonth.value,
+        currentYear: currentYear.value,
+        lastYear: lastYear.value
+      }
     })
     .catch((err) => {
       console.error(err)
@@ -369,30 +398,10 @@ const filterData = async (params: any) => {
 
 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 () => {
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
index 7832c5c..a656c9c 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -138,17 +139,16 @@ import {
   DxSummary,
   DxTotalItem
 } 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 { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 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
+} from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -168,33 +168,22 @@ const filters = ref()
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth() + 1)
 const lastYear = ref(new Date().getFullYear() - 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
   }
 }
 
@@ -284,6 +273,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/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
index d4275be..4f94d3f 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -47,6 +48,14 @@
         css-class="custom-table-column"
         cell-template="formatText"
       />
+      <DxColumn
+        alignment="center"
+        data-field=""
+        caption="NASIONAL"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        :group-index="0"
+      />
       <DxColumn
         alignment="center"
         :min-width="170"
@@ -381,18 +390,16 @@ 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 { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 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/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -411,33 +418,24 @@ const loadingSubData = ref(false)
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth() + 1)
 const lastYear = ref(new Date().getFullYear() - 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 () => {
@@ -527,6 +525,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: bulan.id,
+        currentYear: tahun.id
+      }
     })
     .catch((err) => {
       console.error(err)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
index d6b1cd2..4f44c05 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @run-search="() => filterData(filters)"
     :report-button="true"
     @reset-form="data = []"
@@ -260,6 +261,7 @@
       </template>
     </DxDataGrid>
   </div>
+
   <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
@@ -283,17 +285,15 @@ import {
   DxSummary,
   DxTotalItem
 } 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 { 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/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -316,33 +316,27 @@ const lastYearMoM = 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: '',
+  lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
+  lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
+  currentMonth: new Date().getMonth(),
+  currentYear: new Date().getFullYear(),
+  lastYear: new Date().getFullYear() - 1
+})
 
 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
   }
 }
 
@@ -377,6 +371,21 @@ 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}`,
+        lastMonth: lastMonth.value,
+        lastYearMoM: lastYearMoM.value,
+        currentMonth: currentMonth.value,
+        currentYear: currentYear.value,
+        lastYear: lastYear.value
+      }
     })
     .catch((err) => {
       console.error(err)
@@ -399,7 +408,8 @@ const getDetail = async () => {
       : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    isSelesai: 0
   }
 
   loadingSubData.value = true
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
index 05fda30..5f5f8cc 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -193,6 +194,323 @@
       </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Detail Keluhan Belum Selesai"
+    @on-close="closedialogDetail"
+    :full-width="true"
+  >
+    <div class="w-full mb-4 lg:w-[70%] lg:float-left">
+      <div class="p-4 bg-white rounded-xl lg:mr-4">
+        <DxDataGrid
+          :allow-column-reordering="true"
+          class="max-h-[calc(100vh-140px)]"
+          :data-source="dataSub"
+          :show-column-lines="true"
+          :show-row-lines="false"
+          :show-borders="true"
+          :row-alternation-enabled="true"
+          :hover-state-enabled="true"
+          @selection-changed="onDataSubSelectionChanged"
+          :column-width="100"
+          @exporting="onExportingDetail"
+          :allow-column-resizing="true"
+          column-resizing-mode="widget"
+        >
+          <DxSelection mode="single" />
+          <DxPaging :page-size="20" :enabled="true" />
+          <DxPager
+            :visible="true"
+            :allowed-page-sizes="[20, 50, 100]"
+            display-mode="full"
+            :show-page-size-selector="true"
+            :show-info="true"
+            :show-navigation-buttons="true"
+          />
+
+          <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+          <DxExport
+            :enabled="true"
+            :formats="['pdf', 'xlsx', 'document']"
+            :allow-export-selected-data="false"
+          />
+
+          <DxColumn
+            css-class="custom-table-column"
+            :width="50"
+            alignment="center"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            data-type="number"
+            caption="No"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="No Laporan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_uid"
+            caption="UID/UIW"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_up3"
+            caption="UP3"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_ulp"
+            caption="ULP"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="id_pelanggan"
+            caption="ID Pelanggan"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field="nama_pelapor"
+            caption="Nama Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field="alamat_pelapor"
+            caption="Alamat Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_telp_pelapor"
+            caption="No Telp Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field="keterangan_pelapor"
+            caption="Keterangan Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field="penyebab"
+            caption="Penyebab"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="kode_gangguan"
+            caption="Kode Gangguan"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field=""
+            caption="Jenis Gangguan"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_response_time"
+            caption="Durasi Response Time"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_recovery_time"
+            caption="Durasi Recovery Time:"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Lapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+
+          <template #formatText="{ data }">
+            <p class="text-left cursor-pointer">
+              {{ data.text }}
+            </p>
+          </template>
+
+          <template #formatNumber="{ data }">
+            <p class="text-right cursor-pointer">
+              {{ data.text }}
+            </p>
+          </template>
+
+          <template #formatTime="{ data }">
+            <p>
+              {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+            </p>
+          </template>
+        </DxDataGrid>
+      </div>
+    </div>
+
+    <div class="w-full mb-4 lg:w-[30%] lg:float-right">
+      <div class="p-4 space-y-2 bg-white rounded-xl">
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">UID/UIW:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_uid" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">UP3:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_up3" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">ULP:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">ID Pelanggan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.id_pengguna" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_pelapor" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.alamat_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.no_telp_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.keterangan_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Kode Gangguan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.kode_gangguan" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Jenis Gangguan:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.nama_jenis_gangguan"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_response_time)
+                ? formatWaktu(dataSubSelected?.durasi_response_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recoery Time:</h3>
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_recovery_time)
+                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+      </div>
+    </div>
+  </DetailDialog>
   <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
@@ -208,6 +526,7 @@ import {
   DxGroupItem,
   DxGrouping,
   DxLoadPanel,
+  DxPager,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
@@ -215,16 +534,20 @@ import {
   DxSummary,
   DxTotalItem
 } 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 { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
 import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import InputText from '@/components/InputText.vue'
+import { getMonthName } from '@/utils/texts'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -244,33 +567,31 @@ 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 onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 const getDetail = async () => {
@@ -278,22 +599,19 @@ const getDetail = async () => {
   const selected = dataSelected.value
 
   const query = {
-    dateFrom: dateValue[0]
-      ? dateValue[0].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    dateTo: dateValue[1]
-      ? dateValue[1].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    bulan: currentMonth.value,
+    tahun: currentYear.value
   }
 
   loadingSubData.value = true
-  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+  await requestGraphQl(queries.monalisa.keluhan.rekap.keluhanBelumSelesaiDetail, query)
     .then((result) => {
       if (result.data.data != undefined) {
-        dataSub.value = result.data.data.detailKeluhanAll
+        dataSub.value = result.data.data.detailMonalisaKeluhanBelumSelesai
       } else {
         dataSub.value = []
       }
@@ -360,6 +678,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/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
index 4b96dd2..fc46978 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -287,18 +288,15 @@ import {
   DxSummary,
   DxTotalItem
 } 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 gql from 'graphql-tag'
 import { getMonthName } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import {
+  exportToPDF,
+  exportToXLSX
+} from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -322,33 +320,27 @@ 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: '',
+  lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
+  lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
+  currentMonth: new Date().getMonth(),
+  currentYear: new Date().getFullYear(),
+  lastYear: new Date().getFullYear() - 1
+})
 
 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 () => {
@@ -439,6 +431,21 @@ 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}`,
+        lastMonth: lastMonth.value,
+        lastYearMoM: lastYearMoM.value,
+        currentMonth: currentMonth.value,
+        currentYear: currentYear.value,
+        lastYear: lastYear.value
+      }
     })
     .catch((err) => {
       console.error(err)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
index 0367891..fa08cd6 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -292,18 +293,16 @@ import {
   DxTotalItem,
   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/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -326,36 +325,29 @@ const lastYearMoM = 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: '',
+  lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
+  lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
+  currentMonth: new Date().getMonth(),
+  currentYear: new Date().getFullYear(),
+  lastYear: new Date().getFullYear() - 1
+})
 
 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 resetData = () => {
   data.value = []
   dataSub.value = []
@@ -387,6 +379,21 @@ 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}`,
+        lastMonth: lastMonth.value,
+        lastYearMoM: lastYearMoM.value,
+        currentMonth: currentMonth.value,
+        currentYear: currentYear.value,
+        lastYear: lastYear.value
+      }
     })
     .catch((err) => {
       console.error(err)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
index fade4e5..5dc2260 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
@@ -1,5 +1,6 @@
 <template>
   <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
     @reset-form="data = []"
     @run-search="() => filterData(filters)"
     :report-button="true"
@@ -292,16 +293,14 @@ import {
   DxTotalItem,
   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 { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import {
+  exportToPDF,
+  exportToXLSX
+} from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -315,6 +314,20 @@ 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: '',
+  lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
+  lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
+  currentMonth: new Date().getMonth(),
+  currentYear: new Date().getFullYear(),
+  lastYear: new Date().getFullYear() - 1
+})
 
 const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
 const lastYearMoM = ref(
@@ -326,30 +339,10 @@ const lastYear = ref(currentYear.value - 1)
 
 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
   }
 }
 
@@ -384,6 +377,21 @@ 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}`,
+        lastMonth: lastMonth.value,
+        lastYearMoM: lastYearMoM.value,
+        currentMonth: currentMonth.value,
+        currentYear: currentYear.value,
+        lastYear: lastYear.value
+      }
     })
     .catch((err) => {
       console.error(err)
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
index 2ea55e2..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)"
@@ -79,7 +80,7 @@
           alignment="center"
           :min-width="170"
           data-type="text"
-          data-field="na  ma_ulp"
+          data-field="nama_ulp"
           caption="Nama Unit"
           css-class="custom-table-column"
           name="namaULP"
@@ -168,35 +169,34 @@
 
       <DxSummary>
         <DxTotalItem
-          summary-type="sum"
           display-format="RATA-RATA NASIONAL"
-          show-in-column="nama_ulp"
+          column="nama_ulp"
           css-class="text-white !text-left"
         />
         <DxTotalItem
           column="avg_durasi_recovery_gangguan"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="sla_gangguan"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="avg_durasi_recovery_keluhan"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="sla_keluhan"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
@@ -229,7 +229,7 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           column="avg_durasi_recovery_gangguan"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -239,7 +239,7 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           column="sla_gangguan"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -249,7 +249,7 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           column="avg_durasi_recovery_keluhan"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -259,7 +259,7 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           column="sla_keluhan"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -346,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"
         >
@@ -648,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'
@@ -662,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)
@@ -681,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 {
   }
 }
 
@@ -798,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 1ce6717..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"
@@ -168,35 +169,34 @@
 
       <DxSummary>
         <DxTotalItem
-          summary-type="sum"
           display-format="RATA-RATA NASIONAL"
           show-in-column="nama_ulp"
           css-class="text-white !text-left"
         />
         <DxTotalItem
           column="avg_durasi_recovery_gangguan"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="sla_gangguan"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="avg_durasi_recovery_keluhan"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="sla_keluhan"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
@@ -235,7 +235,7 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           column="avg_durasi_recovery_gangguan"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -245,7 +245,7 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           column="sla_gangguan"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -255,7 +255,7 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           column="avg_durasi_recovery_keluhan"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -265,7 +265,7 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           column="sla_keluhan"
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -354,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)
@@ -379,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 () => {
@@ -492,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/components/Pages/Transaksi/Transaksi.vue b/src/components/Pages/Transaksi/Transaksi.vue
index 5747583..daeec91 100755
--- a/src/components/Pages/Transaksi/Transaksi.vue
+++ b/src/components/Pages/Transaksi/Transaksi.vue
@@ -7,6 +7,7 @@
       ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -118,7 +119,7 @@
       />
     </DxDataGrid>
   </div>
-  <BufferDialog v-if="loading" />
+  <BufferDialog v-if="loadingData" />
 </template>
 
 <script setup lang="ts">
@@ -142,13 +143,17 @@ import { Workbook } from 'exceljs'
 import { Type17 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
+const data = ref<any[]>([])
+const dataSub = ref<any[]>([])
 const dataSelected = ref<any>()
+const dataSubSelected = ref<any>()
 const dialogDetail = ref(false)
-const loading = ref(false)
+const loadingData = ref(false)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -182,9 +187,21 @@ const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
 }
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+const showDetail = () => {
   clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+}
+const closeDialog = () => {
+  dialogDetail.value = false
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
 }
 
 const onRowPrepared = (e: any) => {
@@ -199,53 +216,41 @@ const onRowPrepared = (e: any) => {
   }
 }
 
-const data = [
-  {
-    noLapor: 'K2316081000039',
-    tipeIsu: 'PDPB',
-    nama: 'BAPAK HAIRUL',
-    unit: 'ULP BARABAI',
-    noTelp: '081350000000',
-    permasalahan: 'MCB KWH SERING TURUN',
-    deskripsi: '-',
-    tglBuat: '10/08/2016 07:18:17',
-    lapUlang: 0,
-    ketLapUlang: '-',
-    status: 'Dalam Proses Manager Unit',
-    durasi: '2638 01:59:17'
-  },
-  {
-    noLapor: 'K2316081000039',
-    tipeIsu: 'PDPB',
-    nama: 'BAPAK HAIRUL',
-    unit: 'ULP BARABAI',
-    noTelp: '081350000000',
-    permasalahan: 'MCB KWH SERING TURUN',
-    deskripsi: '-',
-    tglBuat: '10/08/2016 07:18:17',
-    lapUlang: 0,
-    ketLapUlang: '-',
-    status: 'Dalam Proses Manager Unit',
-    durasi: '2638 01:59:17'
-  },
-  {
-    noLapor: 'K2316081000039',
-    tipeIsu: 'PDPB',
-    nama: 'BAPAK HAIRUL',
-    unit: 'ULP BARABAI',
-    noTelp: '081350000000',
-    permasalahan: 'MCB KWH SERING TURUN',
-    deskripsi: '-',
-    tglBuat: '10/08/2016 07:18:17',
-    lapUlang: 0,
-    ketLapUlang: '-',
-    status: 'Dalam Proses Manager Unit',
-    durasi: '2638 01:59:17'
-  }
-]
-
 const filters = ref()
-const filterData = (filters: any) => {
-  console.log(filters)
+const resetData = () => {
+  data.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
+  const dateValue = params.periode.split(' s/d ')
+  const { posko, idUid, idUp3 } = params
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    posko: posko ? posko.id : 0
+  }
+
+  loadingData.value = true
+  await requestGraphQl(queries.transaksi.transaksiAPKT, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiPemakaianMaterial
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 </script>
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 }
diff --git a/src/report/Cico/LaporanCICO.ts b/src/report/Cico/LaporanCICO.ts
new file mode 100644
index 0000000..319615d
--- /dev/null
+++ b/src/report/Cico/LaporanCICO.ts
@@ -0,0 +1,540 @@
+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 Check In Check Out (CICO)'
+const fontSize = 5
+const detailFontSize = 3
+
+const formatData = (rawData: any) => {
+  const formattedData: any = []
+
+  const total: any = {
+    jumlah_wo_gangguan_individual: 0,
+    avg_durasi_wo_gangguan_individual: [],
+    avg_rpt_wo_gangguan_individual: [],
+    avg_rct_wo_gangguan_individual: [],
+    jumlah_wo_penugasan_khusus: 0,
+    avg_wo_penugasan_khusus: []
+  }
+
+  rawData.forEach((data: any) => {
+    formattedData.push([
+      data.user_regu,
+      data.personil_yantek,
+      data.jumlah_wo_gangguan_individual,
+      data.avg_durasi_wo_gangguan_individual,
+      data.avg_rpt_wo_gangguan_individual,
+      data.avg_rct_wo_gangguan_individual,
+      data.jumlah_wo_penugasan_khusus,
+      data.avg_wo_penugasan_khusus
+    ])
+
+    total.jumlah_wo_gangguan_individual += data.jumlah_wo_gangguan_individual
+    total.avg_durasi_wo_gangguan_individual.push(data.avg_durasi_wo_gangguan_individual)
+    total.avg_rpt_wo_gangguan_individual.push(data.avg_rpt_wo_gangguan_individual)
+    total.avg_rct_wo_gangguan_individual.push(data.avg_rct_wo_gangguan_individual)
+    total.jumlah_wo_penugasan_khusus += data.jumlah_wo_penugasan_khusus
+    total.avg_wo_penugasan_khusus.push(data.avg_wo_penugasan_khusus)
+  })
+
+  formattedData.push([
+    {
+      content: 'TOTAL',
+      colSpan: 2
+    },
+    formatNumber(total.jumlah_wo_gangguan_individual),
+    formatNumber(
+      total.avg_durasi_wo_gangguan_individual.reduce((a: any, b: any) => a + b, 0) /
+        total.avg_durasi_wo_gangguan_individual.length
+    ),
+    formatNumber(
+      total.avg_rpt_wo_gangguan_individual.reduce((a: any, b: any) => a + b, 0) /
+        total.avg_rpt_wo_gangguan_individual.length
+    ),
+    formatNumber(
+      total.avg_rct_wo_gangguan_individual.reduce((a: any, b: any) => a + b, 0) /
+        total.avg_rct_wo_gangguan_individual.length
+    ),
+    formatNumber(total.jumlah_wo_penugasan_khusus),
+    formatNumber(
+      total.avg_wo_penugasan_khusus.reduce((a: any, b: any) => a + b, 0) /
+        total.avg_wo_penugasan_khusus.length
+    )
+  ])
+
+  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)
+  console.log(data)
+  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()
+      ],
+      [
+        'POSKO',
+        ':',
+        reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.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: 23
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'User Regu',
+        'Personil Yantek',
+        'Jumlah WO Gangguan Individual',
+        'Rata-rata Durasi WO Gangguan',
+        'Rata-rata RPT WO Gangguan',
+        'Rata-rata RCT WO Gangguan',
+        'Jumlah WO Penugasan Khusus',
+        'Rata-rata WO Penugasan Khusus'
+      ]
+    ],
+    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: [
+      [`${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',
+        'UID/UIW',
+        'UP3',
+        'Posko',
+        'Sumber Lapor',
+        'Create By',
+        'Dispacth By',
+        'User Regu',
+        'Nama Regu',
+        'Nama Petugas',
+        'Shift',
+        'Check In Petugas',
+        'No Laporan',
+        'Tgl Lapor',
+        'Tgl Penugasan Baru',
+        'Tgl Dalam Perjalanan',
+        'Tgl Pengerjaan',
+        'Tgl Nyala Sementara',
+        'Tgl Nyala',
+        'Tgl Selesai',
+        'Durasi Perjalanan',
+        'Durasi WO',
+        'Check Out Petugas',
+        'RPT',
+        'RCT',
+        'Rating',
+        'Jml Pelanggan Padam',
+        'Fasilitas',
+        'Sub Fasilitas',
+        'Peralatan',
+        'Dampak Kerusakan',
+        'Penyebab',
+        'Kelompok Penyebab',
+        'Cuaca',
+        'Keterangan Pelapor',
+        'Keterangan',
+        'Penyebab Padam',
+        'Tindakan',
+        'APKT Status',
+        'Referensi Marking',
+        'BLTH'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.nama_uid,
+      item.nama_up3,
+      item.nama_posko,
+      item.media,
+      item.pembuat_laporan,
+      item.dispacth_by,
+      item.waktu_dispacth,
+      item.user_regu,
+      item.nama_regu,
+      item.personil_yantek,
+      item.shift,
+      item.check_in_petugas,
+      item.no_laporan,
+      item.waktu_lapor,
+      item.waktu_dispacth,
+      item.waktu_perjalanan,
+      item.waktu_response,
+      item.waktu_nyala_sementara,
+      item.waktu_nyala,
+      item.waktu_selesai,
+      item.durasi_waktu_response,
+      item.durasi_wo,
+      item.check_out_petugas,
+      item.durasi_menit_response,
+      item.durasi_menit_recovery,
+      item.rating,
+      item.jml_pelanggan_padam,
+      item.fasilitas,
+      item.sub_fasilitas,
+      item.peralatan,
+      item.dampak_kerusakan,
+      item.penyebab,
+      item.kelompok_penyebab,
+      item.cuaca,
+      item.keterangan_pelapor,
+      item.keterangan,
+      item.penyebab_padam,
+      item.tindakan,
+      item.status_akhir,
+      item.referensi_marking,
+      item.blth
+    ]),
+    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',
+      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,
+    `POSKO : ${
+      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    7,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:H1')
+  worksheet.mergeCells('A2:H2')
+  worksheet.mergeCells('A3:H3')
+  worksheet.mergeCells('A4:H4')
+  worksheet.mergeCells('A6:H6')
+  worksheet.mergeCells('A7:H7')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 9, 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('A3:AP3')
+  worksheet.mergeCells('A4:AP4')
+
+  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/Ctt/CTT_LaporanCttKwhPeriksa.ts b/src/report/Ctt/CTT_LaporanCttKwhPeriksa.ts
new file mode 100644
index 0000000..c3a7066
--- /dev/null
+++ b/src/report/Ctt/CTT_LaporanCttKwhPeriksa.ts
@@ -0,0 +1,525 @@
+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 = 'Laporan CTT & KWH Periksa'
+const fontSize = 5
+const detailFontSize = 4
+
+const formatData = (rawData: any) => {
+  const formattedData: any = []
+  const total: any = {
+    wo_cc123: 0,
+    wo_pln_mobile: 0,
+    wo_comcen: 0,
+    // wo_total
+    rekomendasi_mendatangkan_petugas: 0,
+    rekomendasi_diberikan_ke_pelanggan: 0,
+    dpld: 0,
+    history_p2lt: 0
+  }
+
+  rawData.forEach((item: any) => {
+    total.wo_cc123 += item.wo_cc123
+    total.wo_pln_mobile += item.wo_pln_mobile
+    total.wo_comcen += item.wo_comcen
+    total.rekomendasi_mendatangkan_petugas += item.rekomendasi_mendatangkan_petugas
+    total.rekomendasi_diberikan_ke_pelanggan += item.rekomendasi_diberikan_ke_pelanggan
+    total.dpld += item.dpld
+    total.history_p2lt += item.history_p2lt
+  })
+
+  const wo_total = total.wo_cc123 + total.wo_pln_mobile + total.wo_comcen
+
+  formattedData.push([
+    'Semua Unit',
+    formatNumber(total.wo_cc123),
+    formatNumber(total.wo_pln_mobile),
+    formatNumber(total.wo_comcen),
+    formatNumber(wo_total),
+    formatNumber(total.rekomendasi_mendatangkan_petugas),
+    formatNumber(total.rekomendasi_diberikan_ke_pelanggan),
+    formatNumber(total.dpld),
+    formatNumber(total.history_p2lt)
+  ])
+
+  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()
+      ]
+    ],
+    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: 4
+        },
+        {
+          content: 'Rekomendasi Sistem',
+          colSpan: 2
+        },
+        'DLPD',
+        'Histori P2LT'
+      ],
+      [
+        'CC 123',
+        'PLN Mobile',
+        'Comcen',
+        'Total',
+        'Mendatangkan Petugas',
+        'Diberikan ke Pelanggan',
+        {
+          content: 'g',
+          rowSpan: 2
+        },
+        {
+          content: 'h',
+          rowSpan: 2
+        }
+      ],
+      ['a', 'b', 'c', 'd=a+b+c', '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 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',
+        'UIW/D',
+        'UP3',
+        'Rayon',
+        'IDPEL',
+        'NOMETER',
+        'No. Telepon',
+        'Nama',
+        'Alamat',
+        'Sumber Lapor',
+        'No Laporan',
+        '08',
+        '70',
+        '71',
+        '41',
+        '44',
+        '45',
+        '46',
+        '37',
+        '47',
+        'Jenis DLPD',
+        'Keterangan DLPD',
+        'Bulan Tahun DLPD',
+        'No. Agenda P2TL',
+        'Tgl Mohon P2T',
+        'Tgl Sah P2TL',
+        'Rekomendasi Sistem',
+        'Tgl/Jam Lapor',
+        'Petugas Regu',
+        'User VCC'
+      ]
+    ],
+    body: rawData
+      ? rawData.map((item: any, i: any) => [
+          { content: i + 1, styles: { halign: 'right' } },
+          item.nama_uid,
+          item.nama_up3,
+          item.nama_ulp,
+          item.id_pelanggan,
+          item.nomormeter,
+          item.no_telp_pelapor,
+          item.nama_pelapor,
+          item.alamat_pelapor,
+          item.media,
+          item.no_laporan,
+          item.r08,
+          item.r70,
+          item.r71,
+          item.r41,
+          item.r44,
+          item.r45,
+          item.r46,
+          item.r37,
+          item.r47,
+          item.jenis_dlpd,
+          item.keterangan_dlpd,
+          item.blth_dlpd,
+          item.no_agenda_p2tl,
+          item.tgl_mohon_p2tl,
+          item.tgl_sah_p2tl,
+          item.rekomendasi_sistem,
+          item.waktu_lapor,
+          item.petugas_regu,
+          item.user_vcc
+        ])
+      : [],
+    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',
+      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, 6, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    7,
+    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('A6:I6')
+  worksheet.mergeCells('A7:I7')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 9, 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:AD1')
+  worksheet.mergeCells('A3:AD3')
+  worksheet.mergeCells('A4:AD4')
+
+  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/Gangguan/Daftar/DGangguan_BM.ts b/src/report/Gangguan/Daftar/DGangguan_BM.ts
index fc0ae4f..2824dee 100644
--- a/src/report/Gangguan/Daftar/DGangguan_BM.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_BM.ts
@@ -32,15 +32,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Gangguan/Daftar/DGangguan_DKPL.ts b/src/report/Gangguan/Daftar/DGangguan_DKPL.ts
index 8dcbd48..b7035bd 100644
--- a/src/report/Gangguan/Daftar/DGangguan_DKPL.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_DKPL.ts
@@ -34,15 +34,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Gangguan/Daftar/DGangguan_DMAPKT.ts b/src/report/Gangguan/Daftar/DGangguan_DMAPKT.ts
index 60ec1bb..786c10e 100644
--- a/src/report/Gangguan/Daftar/DGangguan_DMAPKT.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_DMAPKT.ts
@@ -32,15 +32,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Gangguan/Daftar/DGangguan_MLD1K.ts b/src/report/Gangguan/Daftar/DGangguan_MLD1K.ts
index 194429a..8e2c96c 100644
--- a/src/report/Gangguan/Daftar/DGangguan_MLD1K.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_MLD1K.ts
@@ -32,15 +32,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Gangguan/Daftar/DGangguan_RecoveryTime.ts b/src/report/Gangguan/Daftar/DGangguan_RecoveryTime.ts
index 62be1a3..ff817f7 100644
--- a/src/report/Gangguan/Daftar/DGangguan_RecoveryTime.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_RecoveryTime.ts
@@ -43,15 +43,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return {
diff --git a/src/report/Gangguan/Daftar/DGangguan_ResponseTime.ts b/src/report/Gangguan/Daftar/DGangguan_ResponseTime.ts
index f427ff7..9b55b9b 100644
--- a/src/report/Gangguan/Daftar/DGangguan_ResponseTime.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_ResponseTime.ts
@@ -43,15 +43,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return {
diff --git a/src/report/Gangguan/Daftar/DGangguan_STIDP.ts b/src/report/Gangguan/Daftar/DGangguan_STIDP.ts
index 1290145..a1dd587 100644
--- a/src/report/Gangguan/Daftar/DGangguan_STIDP.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_STIDP.ts
@@ -32,15 +32,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Gangguan/Rekap/RGangguan_ALL.ts b/src/report/Gangguan/Rekap/RGangguan_ALL.ts
index 7295879..e91d037 100644
--- a/src/report/Gangguan/Rekap/RGangguan_ALL.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_ALL.ts
@@ -279,15 +279,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts b/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
index cd24071..2a98dd4 100644
--- a/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
@@ -101,15 +101,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts b/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
index 4bb6f11..56575fa 100644
--- a/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
@@ -78,15 +78,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Gangguan/Rekap/RGangguan_CTTM.ts b/src/report/Gangguan/Rekap/RGangguan_CTTM.ts
index 313cf40..c6afc4e 100644
--- a/src/report/Gangguan/Rekap/RGangguan_CTTM.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_CTTM.ts
@@ -107,15 +107,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts b/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
index e233b7a..f9391ee 100644
--- a/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
@@ -109,15 +109,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts b/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
index 3b62883..93e6cad 100644
--- a/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
@@ -256,15 +256,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
@@ -272,7 +272,6 @@ const formatMetaData = (reportMeta: any) => {
 
 const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
   const data = formatData(rawData)
-  console.log(data)
   const meta = formatMetaData(reportMeta)
   const doc = new jsPDF({
     orientation: 'landscape'
diff --git a/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts b/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts
index 1e1e63e..e05b752 100644
--- a/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts
@@ -240,15 +240,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Gangguan/Rekap/RGangguan_KTI.ts b/src/report/Gangguan/Rekap/RGangguan_KTI.ts
index 70be78a..7dd9baf 100644
--- a/src/report/Gangguan/Rekap/RGangguan_KTI.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_KTI.ts
@@ -107,15 +107,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts b/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
index 695a363..cd4dc03 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
@@ -239,15 +239,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts b/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
index e9b8ca1..a9370c2 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
@@ -292,15 +292,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
@@ -686,27 +686,27 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     }`
   )
 
-  setHeaderStyle(worksheet, 7, 8, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
   setHeaderStyle(
     worksheet,
-    8,
-    8,
+    7,
+    1,
     `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
     true
   )
 
-  worksheet.mergeCells('A1:F1')
-  worksheet.mergeCells('A2:F2')
-  worksheet.mergeCells('A3:F3')
-  worksheet.mergeCells('A4:F4')
-  worksheet.mergeCells('H7:J7')
-  worksheet.mergeCells('H8:J8')
+  worksheet.mergeCells('A1:T1')
+  worksheet.mergeCells('A2:T2')
+  worksheet.mergeCells('A3:T3')
+  worksheet.mergeCells('A4:T4')
+  worksheet.mergeCells('A6:T6')
+  worksheet.mergeCells('A7:T7')
 
   exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 },
+    topLeftCell: { row: 9, column: 1 },
     loadPanel: {
       enabled: false
     }
@@ -725,17 +725,18 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
   const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
 
   setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
-  setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
   setHeaderStyle(
     worksheet,
     4,
-    8,
+    1,
     `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
     true
   )
 
-  worksheet.mergeCells('H3:J3')
-  worksheet.mergeCells('H4:J4')
+  worksheet.mergeCells('A1:Q1')
+  worksheet.mergeCells('A3:Q3')
+  worksheet.mergeCells('A4:Q4')
 
   exportToExcel({
     component: e.component,
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts b/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
index 937205a..c2d411d 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
@@ -290,15 +290,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts b/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
index fb6b4bf..41f9fdf 100644
--- a/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
@@ -84,15 +84,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts b/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
index 7a6a9df..0cc6fe3 100644
--- a/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
@@ -59,15 +59,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Keluhan/Daftar/DKeluhan_BerdasarMedia.ts b/src/report/Keluhan/Daftar/DKeluhan_BerdasarMedia.ts
index c7756f4..06cc51c 100644
--- a/src/report/Keluhan/Daftar/DKeluhan_BerdasarMedia.ts
+++ b/src/report/Keluhan/Daftar/DKeluhan_BerdasarMedia.ts
@@ -34,15 +34,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Keluhan/Daftar/DKeluhan_DKUL.ts b/src/report/Keluhan/Daftar/DKeluhan_DKUL.ts
index 57591b5..af2c07f 100644
--- a/src/report/Keluhan/Daftar/DKeluhan_DKUL.ts
+++ b/src/report/Keluhan/Daftar/DKeluhan_DKUL.ts
@@ -34,15 +34,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts b/src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts
index 4b135c1..f96b76e 100644
--- a/src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts
+++ b/src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts
@@ -34,15 +34,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Keluhan/Daftar/DKeluhan_RecoveryTime.ts b/src/report/Keluhan/Daftar/DKeluhan_RecoveryTime.ts
index dc20fe4..2bdfbff 100644
--- a/src/report/Keluhan/Daftar/DKeluhan_RecoveryTime.ts
+++ b/src/report/Keluhan/Daftar/DKeluhan_RecoveryTime.ts
@@ -45,15 +45,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime }
diff --git a/src/report/Keluhan/Daftar/DKeluhan_ResponseTime.ts b/src/report/Keluhan/Daftar/DKeluhan_ResponseTime.ts
index 5fecc58..50c74d6 100644
--- a/src/report/Keluhan/Daftar/DKeluhan_ResponseTime.ts
+++ b/src/report/Keluhan/Daftar/DKeluhan_ResponseTime.ts
@@ -45,15 +45,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime }
diff --git a/src/report/Keluhan/Daftar/DKeluhan_STIDP.ts b/src/report/Keluhan/Daftar/DKeluhan_STIDP.ts
index d0e8777..d3d4bcf 100644
--- a/src/report/Keluhan/Daftar/DKeluhan_STIDP.ts
+++ b/src/report/Keluhan/Daftar/DKeluhan_STIDP.ts
@@ -34,15 +34,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Keluhan/Daftar/DKeluhan_SelesaiCC.ts b/src/report/Keluhan/Daftar/DKeluhan_SelesaiCC.ts
index b03bc42..53ff08e 100644
--- a/src/report/Keluhan/Daftar/DKeluhan_SelesaiCC.ts
+++ b/src/report/Keluhan/Daftar/DKeluhan_SelesaiCC.ts
@@ -34,15 +34,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
diff --git a/src/report/Keluhan/Rekap/RKeluhan_ALL.ts b/src/report/Keluhan/Rekap/RKeluhan_ALL.ts
index 100cda0..5975f41 100644
--- a/src/report/Keluhan/Rekap/RKeluhan_ALL.ts
+++ b/src/report/Keluhan/Rekap/RKeluhan_ALL.ts
@@ -224,15 +224,15 @@ const formatMetaData = (reportMeta: any) => {
     const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
     const dateTo = new Date(periode[1].split('-').reverse().join('-'))
 
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateFrom.getFullYear()}`
 
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
       month: 'long'
     })}-${dateTo.getFullYear()}`
 
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+    dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
   }
 
   return { dateFromFormat, dateToFormat, dayTo }
@@ -567,32 +567,37 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     4,
     1,
-    `POSKO : ${
-      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    `UNIT LAYANAN PELANGGAN : ${
+      reportMeta.ulp
+        ? reportMeta.ulp.name.toUpperCase()
+        : 'Semua Unit Layanan Pelanggan'.toUpperCase()
     }`
   )
 
-  setHeaderStyle(worksheet, 7, 8, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
   setHeaderStyle(
     worksheet,
-    8,
-    8,
+    7,
+    1,
     `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
     true
   )
 
-  worksheet.mergeCells('A1:F1')
-  worksheet.mergeCells('A2:F2')
-  worksheet.mergeCells('A3:F3')
-  worksheet.mergeCells('A4:F4')
-  worksheet.mergeCells('H7:J7')
-  worksheet.mergeCells('H8:J8')
+  worksheet.mergeCells('A1:Q1')
+  worksheet.mergeCells('A2:Q2')
+  worksheet.mergeCells('A3:Q3')
+  worksheet.mergeCells('A4:Q4')
+  worksheet.mergeCells('A6:Q6')
+  worksheet.mergeCells('A7:Q7')
 
   exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 9, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -608,23 +613,27 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
   const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
 
   setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
-  setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
   setHeaderStyle(
     worksheet,
     4,
-    8,
+    1,
     `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
     true
   )
 
-  worksheet.mergeCells('H3:J3')
-  worksheet.mergeCells('H4:J4')
+  worksheet.mergeCells('A1:P1')
+  worksheet.mergeCells('A3:P3')
+  worksheet.mergeCells('A4:P4')
 
   exportToExcel({
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(
diff --git a/src/report/Keluhan/Rekap/RKeluhan_BerdasarMedia.ts b/src/report/Keluhan/Rekap/RKeluhan_BerdasarMedia.ts
new file mode 100644
index 0000000..2654886
--- /dev/null
+++ b/src/report/Keluhan/Rekap/RKeluhan_BerdasarMedia.ts
@@ -0,0 +1,529 @@
+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 = 'Rekapitulasi Keluhan Berdasarkan Media'
+const fontSize = 5
+const detailFontSize = 5
+
+const formatData = (rawData: any) => {
+  const formattedData: any = []
+  const total: any = {
+    tgl1: 0,
+    tgl2: 0,
+    tgl3: 0,
+    tgl4: 0,
+    tgl5: 0,
+    tgl6: 0,
+    tgl7: 0,
+    tgl8: 0,
+    tgl9: 1,
+    tgl10: 0,
+    tgl11: 0,
+    tgl12: 0,
+    tgl13: 0,
+    tgl14: 0,
+    tgl15: 2,
+    tgl16: 0,
+    tgl17: 0,
+    tgl18: 0,
+    tgl19: 0,
+    tgl20: 0,
+    tgl21: 0,
+    tgl22: 0,
+    tgl23: 0,
+    tgl24: 0,
+    tgl25: 0,
+    tgl26: 0,
+    tgl27: 0,
+    tgl28: 0,
+    tgl29: 0,
+    tgl30: 0,
+    tgl31: 0
+  }
+
+  formattedData.push(
+    ...rawData.map((item: any, i: any) => {
+      for (const key in total) {
+        if (key !== 'total') {
+          total[key] += item[key]
+        }
+      }
+
+      return [
+        { content: ++i, styles: { halign: 'right' } },
+        item.media,
+        formatNumber(item.tgl1),
+        formatNumber(item.tgl2),
+        formatNumber(item.tgl3),
+        formatNumber(item.tgl4),
+        formatNumber(item.tgl5),
+        formatNumber(item.tgl6),
+        formatNumber(item.tgl7),
+        formatNumber(item.tgl8),
+        formatNumber(item.tgl9),
+        formatNumber(item.tgl10),
+        formatNumber(item.tgl11),
+        formatNumber(item.tgl12),
+        formatNumber(item.tgl13),
+        formatNumber(item.tgl14),
+        formatNumber(item.tgl15),
+        formatNumber(item.tgl16),
+        formatNumber(item.tgl17),
+        formatNumber(item.tgl18),
+        formatNumber(item.tgl19),
+        formatNumber(item.tgl20),
+        formatNumber(item.tgl21),
+        formatNumber(item.tgl22),
+        formatNumber(item.tgl23),
+        formatNumber(item.tgl24),
+        formatNumber(item.tgl25),
+        formatNumber(item.tgl26),
+        formatNumber(item.tgl27),
+        formatNumber(item.tgl28),
+        formatNumber(item.tgl29),
+        formatNumber(item.tgl30),
+        formatNumber(item.tgl31)
+      ]
+    })
+  )
+
+  formattedData.push([
+    { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+    ...Array.from({ length: 31 }, (_, i) => formatNumber(total[`tgl${i + 1}`]))
+  ])
+
+  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()
+      ]
+    ],
+    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: 23
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'No',
+          rowSpan: 2
+        },
+        {
+          content: 'Nama Media',
+          rowSpan: 2
+        },
+        {
+          content: 'Tanggal',
+          colSpan: 31
+        }
+      ],
+      [...Array.from({ length: 31 }, (_, i) => (i + 1).toString())]
+    ],
+    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: [
+      [`${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,
+      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, 6, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    7,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:AG1')
+  worksheet.mergeCells('A2:AG2')
+  worksheet.mergeCells('A3:AG3')
+  worksheet.mergeCells('A4:AG4')
+  worksheet.mergeCells('A6:AG6')
+  worksheet.mergeCells('A7:AG7')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 9, 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/Keluhan/Rekap/RKeluhan_PerFungsiBidang.ts b/src/report/Keluhan/Rekap/RKeluhan_PerFungsiBidang.ts
new file mode 100644
index 0000000..b82669d
--- /dev/null
+++ b/src/report/Keluhan/Rekap/RKeluhan_PerFungsiBidang.ts
@@ -0,0 +1,757 @@
+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 = 'Rekapitulasi Keluhan Per Fungsi Bidang'
+const fontSize = 5
+const detailFontSize = 3
+
+const groupingData = (data: any) => {
+  const groupedData: any = {}
+
+  data.forEach((item: any) => {
+    const { nama_uid } = item
+
+    if (!groupedData[nama_uid]) {
+      groupedData[nama_uid] = []
+    }
+
+    groupedData[nama_uid].push(item)
+  })
+
+  return groupedData
+}
+
+const formatData = (rawData: any, groupBy: boolean) => {
+  const formattedData: any = []
+  const grandTotal: any = {
+    total_laporan: 0,
+    total_laporan_sudah_selesai: 0,
+    total_laporan_belum_selesai: 0,
+    total_response_time_total: 0,
+    total_response_time_rata_rata: [],
+    total_response_time_max: [],
+    total_response_time_min: [],
+    total_response_time_lebih_sla: 0,
+    total_response_time_kurang_sla: 0,
+    total_recovery_time_total: 0,
+    total_recovery_time_rata_rata: [],
+    total_recovery_time_max: [],
+    total_recovery_time_min: [],
+    total_recovery_time_lebih_sla: 0,
+    total_recovery_time_kurang_sla: 0
+  }
+
+  if (groupBy) {
+    const data = groupingData(rawData)
+
+    for (const nama_uid in data) {
+      const total: any = {
+        total_laporan: 0,
+        total_laporan_sudah_selesai: 0,
+        total_laporan_belum_selesai: 0,
+        total_response_time_total: 0,
+        total_response_time_rata_rata: [],
+        total_response_time_max: [],
+        total_response_time_min: [],
+        total_response_time_lebih_sla: 0,
+        total_response_time_kurang_sla: 0,
+        total_recovery_time_total: 0,
+        total_recovery_time_rata_rata: [],
+        total_recovery_time_max: [],
+        total_recovery_time_min: [],
+        total_recovery_time_lebih_sla: 0,
+        total_recovery_time_kurang_sla: 0
+      }
+
+      formattedData.push([{ content: nama_uid, colSpan: 19, styles: { fontStyle: 'bold' } }])
+
+      for (let i = 0; i < data[nama_uid].length; i++) {
+        formattedData.push([
+          { content: i + 1, styles: { halign: 'right' } },
+          data[nama_uid][i].fungsi_bidang,
+          formatNumber(data[nama_uid][i].total),
+          formatNumber(data[nama_uid][i].total_selesai),
+          formatPercentage(
+            !data[nama_uid][i].total || !data[nama_uid][i].total_selesai
+              ? '0%'
+              : (data[nama_uid][i].total_selesai / data[nama_uid][i].total) * 100
+          ),
+          formatNumber(data[nama_uid][i].total_inproses),
+          formatPercentage(
+            !data[nama_uid][i].total_inproses || !data[nama_uid][i].total
+              ? '0%'
+              : (data[nama_uid][i].total_inproses / data[nama_uid][i].total) * 100
+          ),
+          formatNumber(data[nama_uid][i].total_durasi_response),
+          formatNumber(data[nama_uid][i].avg_durasi_response),
+          formatWaktu(data[nama_uid][i].max_durasi_response),
+          formatWaktu(data[nama_uid][i].min_durasi_response),
+          formatNumber(data[nama_uid][i].total_diatas_sla_response),
+          formatNumber(data[nama_uid][i].total_dibawah_sla_response),
+          formatNumber(data[nama_uid][i].total_durasi_recovery),
+          formatNumber(data[nama_uid][i].avg_durasi_recovery),
+          formatWaktu(data[nama_uid][i].max_durasi_recovery),
+          formatWaktu(data[nama_uid][i].min_durasi_recovery),
+          formatNumber(data[nama_uid][i].total_diatas_sla_recovery),
+          formatNumber(data[nama_uid][i].total_dibawah_sla_recovery)
+        ])
+
+        total.total_laporan += data[nama_uid][i].total
+        total.total_laporan_sudah_selesai += data[nama_uid][i].total_selesai
+        total.total_laporan_belum_selesai += data[nama_uid][i].total_inproses
+        total.total_response_time_total += data[nama_uid][i].total_durasi_response
+        total.total_response_time_rata_rata.push(data[nama_uid][i].avg_durasi_response)
+        total.total_response_time_max.push(data[nama_uid][i].max_durasi_response)
+        total.total_response_time_min.push(data[nama_uid][i].min_durasi_response)
+        total.total_response_time_lebih_sla += data[nama_uid][i].total_diatas_sla_response
+        total.total_response_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_response
+        total.total_recovery_time_total += data[nama_uid][i].total_durasi_recovery
+        total.total_recovery_time_rata_rata.push(data[nama_uid][i].avg_durasi_recovery)
+        total.total_recovery_time_max.push(data[nama_uid][i].max_durasi_recovery)
+        total.total_recovery_time_min.push(data[nama_uid][i].min_durasi_recovery)
+        total.total_recovery_time_lebih_sla += data[nama_uid][i].total_diatas_sla_recovery
+        total.total_recovery_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_recovery
+
+        grandTotal.total_laporan += data[nama_uid][i].total
+        grandTotal.total_laporan_sudah_selesai += data[nama_uid][i].total_selesai
+        grandTotal.total_laporan_belum_selesai += data[nama_uid][i].total_inproses
+        grandTotal.total_response_time_total += data[nama_uid][i].total_durasi_response
+        grandTotal.total_response_time_rata_rata.push(data[nama_uid][i].avg_durasi_response)
+        grandTotal.total_response_time_max.push(data[nama_uid][i].max_durasi_response)
+        grandTotal.total_response_time_min.push(data[nama_uid][i].min_durasi_response)
+        grandTotal.total_response_time_lebih_sla += data[nama_uid][i].total_diatas_sla_response
+        grandTotal.total_response_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_response
+        grandTotal.total_recovery_time_total += data[nama_uid][i].total_durasi_recovery
+        grandTotal.total_recovery_time_rata_rata.push(data[nama_uid][i].avg_durasi_recovery)
+        grandTotal.total_recovery_time_max.push(data[nama_uid][i].max_durasi_recovery)
+        grandTotal.total_recovery_time_min.push(data[nama_uid][i].min_durasi_recovery)
+        grandTotal.total_recovery_time_lebih_sla += data[nama_uid][i].total_diatas_sla_recovery
+        grandTotal.total_recovery_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_recovery
+      }
+
+      formattedData.push([
+        { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+        formatNumber(total.total_laporan),
+        formatNumber(total.total_laporan_sudah_selesai),
+        formatPercentage(
+          !total.total_laporan || !total.total_laporan_sudah_selesai
+            ? '0%'
+            : (total.total_laporan_sudah_selesai / total.total_laporan) * 100
+        ),
+        formatNumber(total.total_laporan_belum_selesai),
+        formatPercentage(
+          !total.total_laporan || !total.total_laporan_belum_selesai
+            ? '0%'
+            : (total.total_laporan_belum_selesai / total.total_laporan) * 100
+        ),
+        formatNumber(total.total_response_time_total),
+        formatNumber(
+          total.total_response_time_rata_rata.length
+            ? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
+                total.total_response_time_rata_rata.length
+            : 0
+        ),
+        formatWaktu(Math.max(...total.total_response_time_max)),
+        formatWaktu(Math.min(...total.total_response_time_min)),
+        formatNumber(total.total_response_time_lebih_sla),
+        formatNumber(total.total_response_time_kurang_sla),
+        formatNumber(total.total_recovery_time_total),
+        formatNumber(
+          total.total_recovery_time_rata_rata.length
+            ? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
+                total.total_recovery_time_rata_rata.length
+            : 0
+        ),
+        formatWaktu(Math.max(...total.total_recovery_time_max)),
+        formatWaktu(Math.min(...total.total_recovery_time_min)),
+        formatNumber(total.total_recovery_time_lebih_sla),
+        formatNumber(total.total_recovery_time_kurang_sla)
+      ])
+    }
+  } else {
+    for (let i = 0; i < rawData.length; i++) {
+      formattedData.push([
+        { content: i + 1, styles: { halign: 'right' } },
+        rawData[i].fungsi_bidang,
+        formatNumber(rawData[i].total),
+        formatNumber(rawData[i].total_selesai),
+        formatPercentage(
+          !rawData[i].total || !rawData[i].total_selesai
+            ? '0%'
+            : (rawData[i].total_selesai / rawData[i].total) * 100
+        ),
+        formatNumber(rawData[i].total_inproses),
+        formatPercentage(
+          !rawData[i].total_inproses || !rawData[i].total
+            ? '0%'
+            : (rawData[i].total_inproses / rawData[i].total) * 100
+        ),
+        formatNumber(rawData[i].total_durasi_response),
+        formatNumber(rawData[i].avg_durasi_response),
+        formatWaktu(rawData[i].max_durasi_response),
+        formatWaktu(rawData[i].min_durasi_response),
+        formatNumber(rawData[i].total_diatas_sla_response),
+        formatNumber(rawData[i].total_dibawah_sla_response),
+        formatNumber(rawData[i].total_durasi_recovery),
+        formatNumber(rawData[i].avg_durasi_recovery),
+        formatWaktu(rawData[i].max_durasi_recovery),
+        formatWaktu(rawData[i].min_durasi_recovery),
+        formatNumber(rawData[i].total_diatas_sla_recovery),
+        formatNumber(rawData[i].total_dibawah_sla_recovery)
+      ])
+
+      grandTotal.total_laporan += rawData[i].total
+      grandTotal.total_laporan_sudah_selesai += rawData[i].total_selesai
+      grandTotal.total_laporan_belum_selesai += rawData[i].total_inproses
+      grandTotal.total_response_time_total += rawData[i].total_durasi_response
+      grandTotal.total_response_time_rata_rata.push(rawData[i].avg_durasi_response)
+      grandTotal.total_response_time_max.push(rawData[i].max_durasi_response)
+      grandTotal.total_response_time_min.push(rawData[i].min_durasi_response)
+      grandTotal.total_response_time_lebih_sla += rawData[i].total_diatas_sla_response
+      grandTotal.total_response_time_kurang_sla += rawData[i].total_dibawah_sla_response
+      grandTotal.total_recovery_time_total += rawData[i].total
+      grandTotal.total_recovery_time_rata_rata.push(rawData[i].avg_durasi_recovery)
+      grandTotal.total_recovery_time_max.push(rawData[i].max_durasi_recovery)
+      grandTotal.total_recovery_time_min.push(rawData[i].min_durasi_recovery)
+      grandTotal.total_recovery_time_lebih_sla += rawData[i].total_diatas_sla_recovery
+      grandTotal.total_recovery_time_kurang_sla += rawData[i].total_dibawah_sla_recovery
+    }
+  }
+
+  formattedData.push([
+    { content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+    formatNumber(grandTotal.total_laporan),
+    formatNumber(grandTotal.total_laporan_sudah_selesai),
+    formatPercentage(
+      !grandTotal.total_laporan || !grandTotal.total_laporan_sudah_selesai
+        ? '0%'
+        : (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
+    ),
+    formatNumber(grandTotal.total_laporan_belum_selesai),
+    formatPercentage(
+      !grandTotal.total_laporan || !grandTotal.total_laporan_belum_selesai
+        ? '0%'
+        : (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
+    ),
+    formatNumber(grandTotal.total_response_time_total),
+    formatNumber(
+      grandTotal.total_response_time_rata_rata.length
+        ? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
+            grandTotal.total_response_time_rata_rata.length
+        : 0
+    ),
+    formatWaktu(Math.max(...grandTotal.total_response_time_max)),
+    formatWaktu(Math.min(...grandTotal.total_response_time_min)),
+    formatNumber(grandTotal.total_response_time_lebih_sla),
+    formatNumber(grandTotal.total_response_time_kurang_sla),
+    formatNumber(grandTotal.total_recovery_time_total),
+    formatNumber(
+      grandTotal.total_recovery_time_rata_rata.length
+        ? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
+            grandTotal.total_recovery_time_rata_rata.length
+        : 0
+    ),
+    formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
+    formatWaktu(Math.min(...grandTotal.total_recovery_time_min)),
+    formatNumber(grandTotal.total_recovery_time_lebih_sla),
+    formatNumber(grandTotal.total_recovery_time_kurang_sla)
+  ])
+
+  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, reportMeta.groupBy)
+  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()
+      ]
+    ],
+    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: 23
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'No',
+          rowSpan: 3
+        },
+        {
+          content: 'Fungsi Bidang',
+          rowSpan: 3
+        },
+        {
+          content: 'Laporan',
+          colSpan: 5
+        },
+        {
+          content: 'Response Time',
+          colSpan: 6
+        },
+        {
+          content: 'Penyelesaian',
+          colSpan: 6
+        }
+      ],
+      [
+        {
+          content: 'Total',
+          rowSpan: 2
+        },
+        {
+          content: 'Sudah Selesai',
+          colSpan: 2
+        },
+        {
+          content: 'Belum Selesai',
+          colSpan: 2
+        },
+        {
+          content: 'Hari',
+          colSpan: 4
+        },
+        {
+          content: 'Laporan',
+          colSpan: 2
+        },
+        {
+          content: 'Hari',
+          colSpan: 4
+        },
+        {
+          content: 'Laporan',
+          colSpan: 2
+        }
+      ],
+      [
+        'Jml',
+        '%',
+        'Jml',
+        '%',
+        'Total',
+        'Rata-Rata',
+        'Max',
+        'Min',
+        '>Sla',
+        '<Sla',
+        'Total',
+        'Rata-Rata',
+        'Max',
+        'Min',
+        '>Sla',
+        '<Sla'
+      ]
+    ],
+    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'
+        }
+      }
+
+      if (data.cell.text[0] === 'GRAND 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: [
+      [`${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.durasi_response_time,
+      item.durasi_recovery_time,
+      '',
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      '',
+      '',
+      ''
+    ]),
+    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, 6, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    7,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:S1')
+  worksheet.mergeCells('A2:S2')
+  worksheet.mergeCells('A3:S3')
+  worksheet.mergeCells('A4:S4')
+  worksheet.mergeCells('A6:S6')
+  worksheet.mergeCells('A7:S7')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 9, 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, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
diff --git a/src/report/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.ts b/src/report/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.ts
new file mode 100644
index 0000000..000d401
--- /dev/null
+++ b/src/report/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.ts
@@ -0,0 +1,730 @@
+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 = 'Rekapitulasi Keluhan Per Jenis Keluhan'
+const fontSize = 5
+const detailFontSize = 3
+
+const groupingData = (data: any) => {
+  const groupedData: any = {}
+
+  data.forEach((item: any) => {
+    const { grouping_tipe_keluhan } = item
+
+    if (!groupedData[grouping_tipe_keluhan]) {
+      groupedData[grouping_tipe_keluhan] = []
+    }
+
+    groupedData[grouping_tipe_keluhan].push(item)
+  })
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+  const grandTotal: any = {
+    total_laporan: 0,
+    total_laporan_sudah_selesai: 0,
+    total_laporan_belum_selesai: 0,
+    total_response_time_total: 0,
+    total_response_time_rata_rata: [],
+    total_response_time_max: [],
+    total_response_time_min: [],
+    total_response_time_lebih_sla: 0,
+    total_response_time_kurang_sla: 0,
+    total_recovery_time_total: 0,
+    total_recovery_time_rata_rata: [],
+    total_recovery_time_max: [],
+    total_recovery_time_min: [],
+    total_recovery_time_lebih_sla: 0,
+    total_recovery_time_kurang_sla: 0
+  }
+
+  for (const key of Object.keys(data)) {
+    const grouping_tipe_keluhan = key
+
+    const total: any = {
+      total_laporan: 0,
+      total_laporan_sudah_selesai: 0,
+      total_laporan_belum_selesai: 0,
+      total_response_time_total: 0,
+      total_response_time_rata_rata: [],
+      total_response_time_max: [],
+      total_response_time_min: [],
+      total_response_time_lebih_sla: 0,
+      total_response_time_kurang_sla: 0,
+      total_recovery_time_total: 0,
+      total_recovery_time_rata_rata: [],
+      total_recovery_time_max: [],
+      total_recovery_time_min: [],
+      total_recovery_time_lebih_sla: 0,
+      total_recovery_time_kurang_sla: 0
+    }
+
+    formattedData.push([
+      {
+        content: grouping_tipe_keluhan,
+        colSpan: 19,
+        styles: { fontStyle: 'bold' }
+      }
+    ])
+
+    for (let i = 0; i < data[grouping_tipe_keluhan].length; i++) {
+      formattedData.push([
+        { content: i + 1, styles: { halign: 'right' } },
+        data[grouping_tipe_keluhan][i].tipe_keluhan,
+        formatNumber(data[grouping_tipe_keluhan][i].total),
+        formatNumber(data[grouping_tipe_keluhan][i].total_selesai),
+        formatPercentage(
+          !data[grouping_tipe_keluhan][i].total || !data[grouping_tipe_keluhan][i].total_selesai
+            ? '0%'
+            : (data[grouping_tipe_keluhan][i].total_selesai /
+                data[grouping_tipe_keluhan][i].total) *
+                100
+        ),
+        formatNumber(data[grouping_tipe_keluhan][i].total_inproses),
+        formatPercentage(
+          !data[grouping_tipe_keluhan][i].total_inproses || !data[grouping_tipe_keluhan][i].total
+            ? '0%'
+            : (data[grouping_tipe_keluhan][i].total_inproses /
+                data[grouping_tipe_keluhan][i].total) *
+                100
+        ),
+        formatNumber(data[grouping_tipe_keluhan][i].total_durasi_response),
+        formatNumber(data[grouping_tipe_keluhan][i].avg_durasi_response),
+        formatWaktu(data[grouping_tipe_keluhan][i].max_durasi_response),
+        formatWaktu(data[grouping_tipe_keluhan][i].min_durasi_response),
+        formatNumber(data[grouping_tipe_keluhan][i].total_diatas_sla_response),
+        formatNumber(data[grouping_tipe_keluhan][i].total_dibawah_sla_response),
+        formatNumber(data[grouping_tipe_keluhan][i].total_durasi_recovery),
+        formatNumber(data[grouping_tipe_keluhan][i].avg_durasi_recovery),
+        formatWaktu(data[grouping_tipe_keluhan][i].max_durasi_recovery),
+        formatWaktu(data[grouping_tipe_keluhan][i].min_durasi_recovery),
+        formatNumber(data[grouping_tipe_keluhan][i].total_diatas_sla_recovery),
+        formatNumber(data[grouping_tipe_keluhan][i].total_dibawah_sla_recovery)
+      ])
+
+      total.total_laporan += data[grouping_tipe_keluhan][i].total
+      total.total_laporan_sudah_selesai += data[grouping_tipe_keluhan][i].total_selesai
+      total.total_laporan_belum_selesai += data[grouping_tipe_keluhan][i].total_inproses
+      total.total_response_time_total += data[grouping_tipe_keluhan][i].total_durasi_response
+      total.total_response_time_rata_rata.push(data[grouping_tipe_keluhan][i].avg_durasi_response)
+      total.total_response_time_max.push(data[grouping_tipe_keluhan][i].max_durasi_response)
+      total.total_response_time_min.push(data[grouping_tipe_keluhan][i].min_durasi_response)
+      total.total_response_time_lebih_sla +=
+        data[grouping_tipe_keluhan][i].total_diatas_sla_response
+      total.total_response_time_kurang_sla +=
+        data[grouping_tipe_keluhan][i].total_dibawah_sla_response
+      total.total_recovery_time_total += data[grouping_tipe_keluhan][i].total_durasi_recovery
+      total.total_recovery_time_rata_rata.push(data[grouping_tipe_keluhan][i].avg_durasi_recovery)
+      total.total_recovery_time_max.push(data[grouping_tipe_keluhan][i].max_durasi_recovery)
+      total.total_recovery_time_min.push(data[grouping_tipe_keluhan][i].min_durasi_recovery)
+      total.total_recovery_time_lebih_sla +=
+        data[grouping_tipe_keluhan][i].total_diatas_sla_recovery
+      total.total_recovery_time_kurang_sla +=
+        data[grouping_tipe_keluhan][i].total_dibawah_sla_recovery
+
+      grandTotal.total_laporan += data[grouping_tipe_keluhan][i].total
+      grandTotal.total_laporan_sudah_selesai += data[grouping_tipe_keluhan][i].total_selesai
+      grandTotal.total_laporan_belum_selesai += data[grouping_tipe_keluhan][i].total_inproses
+      grandTotal.total_response_time_total += data[grouping_tipe_keluhan][i].total_durasi_response
+      grandTotal.total_response_time_rata_rata.push(
+        data[grouping_tipe_keluhan][i].avg_durasi_response
+      )
+      grandTotal.total_response_time_max.push(data[grouping_tipe_keluhan][i].max_durasi_response)
+      grandTotal.total_response_time_min.push(data[grouping_tipe_keluhan][i].min_durasi_response)
+      grandTotal.total_response_time_lebih_sla +=
+        data[grouping_tipe_keluhan][i].total_diatas_sla_response
+      grandTotal.total_response_time_kurang_sla +=
+        data[grouping_tipe_keluhan][i].total_dibawah_sla_response
+      grandTotal.total_recovery_time_total += data[grouping_tipe_keluhan][i].total_durasi_recovery
+      grandTotal.total_recovery_time_rata_rata.push(
+        data[grouping_tipe_keluhan][i].avg_durasi_recovery
+      )
+      grandTotal.total_recovery_time_max.push(data[grouping_tipe_keluhan][i].max_durasi_recovery)
+      grandTotal.total_recovery_time_min.push(data[grouping_tipe_keluhan][i].min_durasi_recovery)
+      grandTotal.total_recovery_time_lebih_sla +=
+        data[grouping_tipe_keluhan][i].total_diatas_sla_recovery
+      grandTotal.total_recovery_time_kurang_sla +=
+        data[grouping_tipe_keluhan][i].total_dibawah_sla_recovery
+    }
+
+    formattedData.push([
+      { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+      formatNumber(total.total_laporan),
+      formatNumber(total.total_laporan_sudah_selesai),
+      formatPercentage(
+        !total.total_laporan_sudah_selesai || !total.total_laporan
+          ? '0%'
+          : (total.total_laporan_sudah_selesai / total.total_laporan) * 100
+      ),
+      formatNumber(total.total_laporan_belum_selesai),
+      formatPercentage(
+        !total.total_laporan_belum_selesai || !total.total_laporan
+          ? '0%'
+          : (total.total_laporan_belum_selesai / total.total_laporan) * 100
+      ),
+      formatNumber(total.total_response_time_total),
+      formatNumber(
+        total.total_response_time_rata_rata.length
+          ? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
+              total.total_response_time_rata_rata.length
+          : 0
+      ),
+      formatWaktu(Math.max(...total.total_response_time_max)),
+      formatWaktu(Math.min(...total.total_response_time_min)),
+      formatNumber(total.total_response_time_lebih_sla),
+      formatNumber(total.total_response_time_kurang_sla),
+      formatNumber(total.total_recovery_time_total),
+      formatNumber(
+        total.total_recovery_time_rata_rata.length
+          ? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
+              total.total_recovery_time_rata_rata.length
+          : 0
+      ),
+      formatWaktu(Math.max(...total.total_recovery_time_max)),
+      formatWaktu(Math.min(...total.total_recovery_time_min)),
+      formatNumber(total.total_recovery_time_lebih_sla),
+      formatNumber(total.total_recovery_time_kurang_sla)
+    ])
+  }
+
+  formattedData.push([
+    { content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+    formatNumber(grandTotal.total_laporan),
+    formatNumber(grandTotal.total_laporan_sudah_selesai),
+    formatPercentage(
+      !grandTotal.total_laporan || !grandTotal.total_laporan_sudah_selesai
+        ? '0%'
+        : (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
+    ),
+    formatNumber(grandTotal.total_laporan_belum_selesai),
+    formatPercentage(
+      !grandTotal.total_laporan || !grandTotal.total_laporan_belum_selesai
+        ? '0%'
+        : (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
+    ),
+    formatNumber(grandTotal.total_response_time_total),
+    formatNumber(
+      grandTotal.total_response_time_rata_rata.length
+        ? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
+            grandTotal.total_response_time_rata_rata.length
+        : 0
+    ),
+    formatWaktu(Math.max(...grandTotal.total_response_time_max)),
+    formatWaktu(Math.min(...grandTotal.total_response_time_min)),
+    formatNumber(grandTotal.total_response_time_lebih_sla),
+    formatNumber(grandTotal.total_response_time_kurang_sla),
+    formatNumber(grandTotal.total_recovery_time_total),
+    formatNumber(
+      grandTotal.total_recovery_time_rata_rata.length
+        ? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
+            grandTotal.total_recovery_time_rata_rata.length
+        : 0
+    ),
+    formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
+    formatWaktu(Math.min(...grandTotal.total_recovery_time_min)),
+    formatNumber(grandTotal.total_recovery_time_lebih_sla),
+    formatNumber(grandTotal.total_recovery_time_kurang_sla)
+  ])
+
+  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()
+      ]
+    ],
+    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: 23
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'No',
+          rowSpan: 3
+        },
+        {
+          content: 'Jenis Keluhan',
+          rowSpan: 3
+        },
+        {
+          content: 'Laporan',
+          colSpan: 5
+        },
+        {
+          content: 'Response Time',
+          colSpan: 6
+        },
+        {
+          content: 'Penyelesaian',
+          colSpan: 6
+        }
+      ],
+      [
+        {
+          content: 'Total',
+          rowSpan: 2
+        },
+        {
+          content: 'Sudah Selesai',
+          colSpan: 2
+        },
+        {
+          content: 'Belum Selesai',
+          colSpan: 2
+        },
+        {
+          content: 'Hari',
+          colSpan: 4
+        },
+        {
+          content: 'Laporan',
+          colSpan: 2
+        },
+        {
+          content: 'Hari',
+          colSpan: 4
+        },
+        {
+          content: 'Laporan',
+          colSpan: 2
+        }
+      ],
+      [
+        'Jml',
+        '%',
+        'Jml',
+        '%',
+        'Total',
+        'Rata-Rata',
+        'Max',
+        'Min',
+        '>Sla',
+        '<Sla',
+        'Total',
+        'Rata-Rata',
+        'Max',
+        'Min',
+        '>Sla',
+        '<Sla'
+      ]
+    ],
+    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'
+        }
+      }
+
+      if (data.cell.text[0] === 'GRAND 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: [
+      [`${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,
+      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, 6, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    7,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:S1')
+  worksheet.mergeCells('A2:S2')
+  worksheet.mergeCells('A3:S3')
+  worksheet.mergeCells('A4:S4')
+  worksheet.mergeCells('A6:S6')
+  worksheet.mergeCells('A7:S7')
+
+  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/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.ts b/src/report/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.ts
new file mode 100644
index 0000000..169c4e2
--- /dev/null
+++ b/src/report/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.ts
@@ -0,0 +1,757 @@
+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 = 'Rekapitulasi Keluhan Per Kelompok Keluhan'
+const fontSize = 5
+const detailFontSize = 3
+
+const groupingData = (data: any) => {
+  const groupedData: any = {}
+
+  data.forEach((item: any) => {
+    const { nama_uid } = item
+
+    if (!groupedData[nama_uid]) {
+      groupedData[nama_uid] = []
+    }
+
+    groupedData[nama_uid].push(item)
+  })
+
+  return groupedData
+}
+
+const formatData = (rawData: any, groupBy: boolean) => {
+  const formattedData: any = []
+  const grandTotal: any = {
+    total_laporan: 0,
+    total_laporan_sudah_selesai: 0,
+    total_laporan_belum_selesai: 0,
+    total_response_time_total: 0,
+    total_response_time_rata_rata: [],
+    total_response_time_max: [],
+    total_response_time_min: [],
+    total_response_time_lebih_sla: 0,
+    total_response_time_kurang_sla: 0,
+    total_recovery_time_total: 0,
+    total_recovery_time_rata_rata: [],
+    total_recovery_time_max: [],
+    total_recovery_time_min: [],
+    total_recovery_time_lebih_sla: 0,
+    total_recovery_time_kurang_sla: 0
+  }
+
+  if (groupBy) {
+    const data = groupingData(rawData)
+
+    for (const nama_uid in data) {
+      const total: any = {
+        total_laporan: 0,
+        total_laporan_sudah_selesai: 0,
+        total_laporan_belum_selesai: 0,
+        total_response_time_total: 0,
+        total_response_time_rata_rata: [],
+        total_response_time_max: [],
+        total_response_time_min: [],
+        total_response_time_lebih_sla: 0,
+        total_response_time_kurang_sla: 0,
+        total_recovery_time_total: 0,
+        total_recovery_time_rata_rata: [],
+        total_recovery_time_max: [],
+        total_recovery_time_min: [],
+        total_recovery_time_lebih_sla: 0,
+        total_recovery_time_kurang_sla: 0
+      }
+
+      formattedData.push([{ content: nama_uid, colSpan: 19, styles: { fontStyle: 'bold' } }])
+
+      for (let i = 0; i < data[nama_uid].length; i++) {
+        formattedData.push([
+          { content: i + 1, styles: { halign: 'right' } },
+          data[nama_uid][i].kelompok,
+          formatNumber(data[nama_uid][i].total),
+          formatNumber(data[nama_uid][i].total_selesai),
+          formatPercentage(
+            !data[nama_uid][i].total || !data[nama_uid][i].total_selesai
+              ? '0%'
+              : (data[nama_uid][i].total_selesai / data[nama_uid][i].total) * 100
+          ),
+          formatNumber(data[nama_uid][i].total_inproses),
+          formatPercentage(
+            !data[nama_uid][i].total_inproses || !data[nama_uid][i].total
+              ? '0%'
+              : (data[nama_uid][i].total_inproses / data[nama_uid][i].total) * 100
+          ),
+          formatNumber(data[nama_uid][i].total_durasi_response),
+          formatNumber(data[nama_uid][i].avg_durasi_response),
+          formatWaktu(data[nama_uid][i].max_durasi_response),
+          formatWaktu(data[nama_uid][i].min_durasi_response),
+          formatNumber(data[nama_uid][i].total_diatas_sla_response),
+          formatNumber(data[nama_uid][i].total_dibawah_sla_response),
+          formatNumber(data[nama_uid][i].total_durasi_recovery),
+          formatNumber(data[nama_uid][i].avg_durasi_recovery),
+          formatWaktu(data[nama_uid][i].max_durasi_recovery),
+          formatWaktu(data[nama_uid][i].min_durasi_recovery),
+          formatNumber(data[nama_uid][i].total_diatas_sla_recovery),
+          formatNumber(data[nama_uid][i].total_dibawah_sla_recovery)
+        ])
+
+        total.total_laporan += data[nama_uid][i].total
+        total.total_laporan_sudah_selesai += data[nama_uid][i].total_selesai
+        total.total_laporan_belum_selesai += data[nama_uid][i].total_inproses
+        total.total_response_time_total += data[nama_uid][i].total_durasi_response
+        total.total_response_time_rata_rata.push(data[nama_uid][i].avg_durasi_response)
+        total.total_response_time_max.push(data[nama_uid][i].max_durasi_response)
+        total.total_response_time_min.push(data[nama_uid][i].min_durasi_response)
+        total.total_response_time_lebih_sla += data[nama_uid][i].total_diatas_sla_response
+        total.total_response_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_response
+        total.total_recovery_time_total += data[nama_uid][i].total_durasi_recovery
+        total.total_recovery_time_rata_rata.push(data[nama_uid][i].avg_durasi_recovery)
+        total.total_recovery_time_max.push(data[nama_uid][i].max_durasi_recovery)
+        total.total_recovery_time_min.push(data[nama_uid][i].min_durasi_recovery)
+        total.total_recovery_time_lebih_sla += data[nama_uid][i].total_diatas_sla_recovery
+        total.total_recovery_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_recovery
+
+        grandTotal.total_laporan += data[nama_uid][i].total
+        grandTotal.total_laporan_sudah_selesai += data[nama_uid][i].total_selesai
+        grandTotal.total_laporan_belum_selesai += data[nama_uid][i].total_inproses
+        grandTotal.total_response_time_total += data[nama_uid][i].total_durasi_response
+        grandTotal.total_response_time_rata_rata.push(data[nama_uid][i].avg_durasi_response)
+        grandTotal.total_response_time_max.push(data[nama_uid][i].max_durasi_response)
+        grandTotal.total_response_time_min.push(data[nama_uid][i].min_durasi_response)
+        grandTotal.total_response_time_lebih_sla += data[nama_uid][i].total_diatas_sla_response
+        grandTotal.total_response_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_response
+        grandTotal.total_recovery_time_total += data[nama_uid][i].total_durasi_recovery
+        grandTotal.total_recovery_time_rata_rata.push(data[nama_uid][i].avg_durasi_recovery)
+        grandTotal.total_recovery_time_max.push(data[nama_uid][i].max_durasi_recovery)
+        grandTotal.total_recovery_time_min.push(data[nama_uid][i].min_durasi_recovery)
+        grandTotal.total_recovery_time_lebih_sla += data[nama_uid][i].total_diatas_sla_recovery
+        grandTotal.total_recovery_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_recovery
+      }
+
+      formattedData.push([
+        { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+        formatNumber(total.total_laporan),
+        formatNumber(total.total_laporan_sudah_selesai),
+        formatPercentage(
+          !total.total_laporan || !total.total_laporan_sudah_selesai
+            ? '0%'
+            : (total.total_laporan_sudah_selesai / total.total_laporan) * 100
+        ),
+        formatNumber(total.total_laporan_belum_selesai),
+        formatPercentage(
+          !total.total_laporan || !total.total_laporan_belum_selesai
+            ? '0%'
+            : (total.total_laporan_belum_selesai / total.total_laporan) * 100
+        ),
+        formatNumber(total.total_response_time_total),
+        formatNumber(
+          total.total_response_time_rata_rata.length
+            ? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
+                total.total_response_time_rata_rata.length
+            : 0
+        ),
+        formatWaktu(Math.max(...total.total_response_time_max)),
+        formatWaktu(Math.min(...total.total_response_time_min)),
+        formatNumber(total.total_response_time_lebih_sla),
+        formatNumber(total.total_response_time_kurang_sla),
+        formatNumber(total.total_recovery_time_total),
+        formatNumber(
+          total.total_recovery_time_rata_rata.length
+            ? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
+                total.total_recovery_time_rata_rata.length
+            : 0
+        ),
+        formatWaktu(Math.max(...total.total_recovery_time_max)),
+        formatWaktu(Math.min(...total.total_recovery_time_min)),
+        formatNumber(total.total_recovery_time_lebih_sla),
+        formatNumber(total.total_recovery_time_kurang_sla)
+      ])
+    }
+  } else {
+    for (let i = 0; i < rawData.length; i++) {
+      formattedData.push([
+        { content: i + 1, styles: { halign: 'right' } },
+        rawData[i].kelompok,
+        formatNumber(rawData[i].total),
+        formatNumber(rawData[i].total_selesai),
+        formatPercentage(
+          !rawData[i].total || !rawData[i].total_selesai
+            ? '0%'
+            : (rawData[i].total_selesai / rawData[i].total) * 100
+        ),
+        formatNumber(rawData[i].total_inproses),
+        formatPercentage(
+          !rawData[i].total_inproses || !rawData[i].total
+            ? '0%'
+            : (rawData[i].total_inproses / rawData[i].total) * 100
+        ),
+        formatNumber(rawData[i].total_durasi_response),
+        formatNumber(rawData[i].avg_durasi_response),
+        formatWaktu(rawData[i].max_durasi_response),
+        formatWaktu(rawData[i].min_durasi_response),
+        formatNumber(rawData[i].total_diatas_sla_response),
+        formatNumber(rawData[i].total_dibawah_sla_response),
+        formatNumber(rawData[i].total_durasi_recovery),
+        formatNumber(rawData[i].avg_durasi_recovery),
+        formatWaktu(rawData[i].max_durasi_recovery),
+        formatWaktu(rawData[i].min_durasi_recovery),
+        formatNumber(rawData[i].total_diatas_sla_recovery),
+        formatNumber(rawData[i].total_dibawah_sla_recovery)
+      ])
+
+      grandTotal.total_laporan += rawData[i].total
+      grandTotal.total_laporan_sudah_selesai += rawData[i].total_selesai
+      grandTotal.total_laporan_belum_selesai += rawData[i].total_inproses
+      grandTotal.total_response_time_total += rawData[i].total_durasi_response
+      grandTotal.total_response_time_rata_rata.push(rawData[i].avg_durasi_response)
+      grandTotal.total_response_time_max.push(rawData[i].max_durasi_response)
+      grandTotal.total_response_time_min.push(rawData[i].min_durasi_response)
+      grandTotal.total_response_time_lebih_sla += rawData[i].total_diatas_sla_response
+      grandTotal.total_response_time_kurang_sla += rawData[i].total_dibawah_sla_response
+      grandTotal.total_recovery_time_total += rawData[i].total
+      grandTotal.total_recovery_time_rata_rata.push(rawData[i].avg_durasi_recovery)
+      grandTotal.total_recovery_time_max.push(rawData[i].max_durasi_recovery)
+      grandTotal.total_recovery_time_min.push(rawData[i].min_durasi_recovery)
+      grandTotal.total_recovery_time_lebih_sla += rawData[i].total_diatas_sla_recovery
+      grandTotal.total_recovery_time_kurang_sla += rawData[i].total_dibawah_sla_recovery
+    }
+  }
+
+  formattedData.push([
+    { content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+    formatNumber(grandTotal.total_laporan),
+    formatNumber(grandTotal.total_laporan_sudah_selesai),
+    formatPercentage(
+      !grandTotal.total_laporan || !grandTotal.total_laporan_sudah_selesai
+        ? '0%'
+        : (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
+    ),
+    formatNumber(grandTotal.total_laporan_belum_selesai),
+    formatPercentage(
+      !grandTotal.total_laporan || !grandTotal.total_laporan_belum_selesai
+        ? '0%'
+        : (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
+    ),
+    formatNumber(grandTotal.total_response_time_total),
+    formatNumber(
+      grandTotal.total_response_time_rata_rata.length
+        ? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
+            grandTotal.total_response_time_rata_rata.length
+        : 0
+    ),
+    formatWaktu(Math.max(...grandTotal.total_response_time_max)),
+    formatWaktu(Math.min(...grandTotal.total_response_time_min)),
+    formatNumber(grandTotal.total_response_time_lebih_sla),
+    formatNumber(grandTotal.total_response_time_kurang_sla),
+    formatNumber(grandTotal.total_recovery_time_total),
+    formatNumber(
+      grandTotal.total_recovery_time_rata_rata.length
+        ? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
+            grandTotal.total_recovery_time_rata_rata.length
+        : 0
+    ),
+    formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
+    formatWaktu(Math.min(...grandTotal.total_recovery_time_min)),
+    formatNumber(grandTotal.total_recovery_time_lebih_sla),
+    formatNumber(grandTotal.total_recovery_time_kurang_sla)
+  ])
+
+  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, reportMeta.groupBy)
+  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()
+      ]
+    ],
+    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: 23
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'No',
+          rowSpan: 3
+        },
+        {
+          content: 'Kelompok Keluhan',
+          rowSpan: 3
+        },
+        {
+          content: 'Laporan',
+          colSpan: 5
+        },
+        {
+          content: 'Response Time',
+          colSpan: 6
+        },
+        {
+          content: 'Penyelesaian',
+          colSpan: 6
+        }
+      ],
+      [
+        {
+          content: 'Total',
+          rowSpan: 2
+        },
+        {
+          content: 'Sudah Selesai',
+          colSpan: 2
+        },
+        {
+          content: 'Belum Selesai',
+          colSpan: 2
+        },
+        {
+          content: 'Hari',
+          colSpan: 4
+        },
+        {
+          content: 'Laporan',
+          colSpan: 2
+        },
+        {
+          content: 'Hari',
+          colSpan: 4
+        },
+        {
+          content: 'Laporan',
+          colSpan: 2
+        }
+      ],
+      [
+        'Jml',
+        '%',
+        'Jml',
+        '%',
+        'Total',
+        'Rata-Rata',
+        'Max',
+        'Min',
+        '>Sla',
+        '<Sla',
+        'Total',
+        'Rata-Rata',
+        'Max',
+        'Min',
+        '>Sla',
+        '<Sla'
+      ]
+    ],
+    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'
+        }
+      }
+
+      if (data.cell.text[0] === 'GRAND 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: [
+      [`${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,
+      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, 6, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    7,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:S1')
+  worksheet.mergeCells('A2:S2')
+  worksheet.mergeCells('A3:S3')
+  worksheet.mergeCells('A4:S4')
+  worksheet.mergeCells('A6:S6')
+  worksheet.mergeCells('A7:S7')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 9, 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, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
diff --git a/src/report/Keluhan/Rekap/RKeluhan_PerTanggal.ts b/src/report/Keluhan/Rekap/RKeluhan_PerTanggal.ts
new file mode 100644
index 0000000..6149313
--- /dev/null
+++ b/src/report/Keluhan/Rekap/RKeluhan_PerTanggal.ts
@@ -0,0 +1,757 @@
+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 = 'Rekapitulasi Keluhan Per Tanggal'
+const fontSize = 5
+const detailFontSize = 3
+
+const groupingData = (data: any) => {
+  const groupedData: any = {}
+
+  data.forEach((item: any) => {
+    const { nama_uid } = item
+
+    if (!groupedData[nama_uid]) {
+      groupedData[nama_uid] = []
+    }
+
+    groupedData[nama_uid].push(item)
+  })
+
+  return groupedData
+}
+
+const formatData = (rawData: any, groupBy: boolean) => {
+  const formattedData: any = []
+  const grandTotal: any = {
+    total_laporan: 0,
+    total_laporan_sudah_selesai: 0,
+    total_laporan_belum_selesai: 0,
+    total_response_time_total: 0,
+    total_response_time_rata_rata: [],
+    total_response_time_max: [],
+    total_response_time_min: [],
+    total_response_time_lebih_sla: 0,
+    total_response_time_kurang_sla: 0,
+    total_recovery_time_total: 0,
+    total_recovery_time_rata_rata: [],
+    total_recovery_time_max: [],
+    total_recovery_time_min: [],
+    total_recovery_time_lebih_sla: 0,
+    total_recovery_time_kurang_sla: 0
+  }
+
+  if (groupBy) {
+    const data = groupingData(rawData)
+
+    for (const nama_uid in data) {
+      const total: any = {
+        total_laporan: 0,
+        total_laporan_sudah_selesai: 0,
+        total_laporan_belum_selesai: 0,
+        total_response_time_total: 0,
+        total_response_time_rata_rata: [],
+        total_response_time_max: [],
+        total_response_time_min: [],
+        total_response_time_lebih_sla: 0,
+        total_response_time_kurang_sla: 0,
+        total_recovery_time_total: 0,
+        total_recovery_time_rata_rata: [],
+        total_recovery_time_max: [],
+        total_recovery_time_min: [],
+        total_recovery_time_lebih_sla: 0,
+        total_recovery_time_kurang_sla: 0
+      }
+
+      formattedData.push([{ content: nama_uid, colSpan: 19, styles: { fontStyle: 'bold' } }])
+
+      for (let i = 0; i < data[nama_uid].length; i++) {
+        formattedData.push([
+          { content: i + 1, styles: { halign: 'right' } },
+          data[nama_uid][i].tanggal_lapor,
+          formatNumber(data[nama_uid][i].total),
+          formatNumber(data[nama_uid][i].total_selesai),
+          formatPercentage(
+            !data[nama_uid][i].total || !data[nama_uid][i].total_selesai
+              ? '0%'
+              : (data[nama_uid][i].total_selesai / data[nama_uid][i].total) * 100
+          ),
+          formatNumber(data[nama_uid][i].total_inproses),
+          formatPercentage(
+            !data[nama_uid][i].total_inproses || !data[nama_uid][i].total
+              ? '0%'
+              : (data[nama_uid][i].total_inproses / data[nama_uid][i].total) * 100
+          ),
+          formatNumber(data[nama_uid][i].total_durasi_response),
+          formatNumber(data[nama_uid][i].avg_durasi_response),
+          formatWaktu(data[nama_uid][i].max_durasi_response),
+          formatWaktu(data[nama_uid][i].min_durasi_response),
+          formatNumber(data[nama_uid][i].total_diatas_sla_response),
+          formatNumber(data[nama_uid][i].total_dibawah_sla_response),
+          formatNumber(data[nama_uid][i].total_durasi_recovery),
+          formatNumber(data[nama_uid][i].avg_durasi_recovery),
+          formatWaktu(data[nama_uid][i].max_durasi_recovery),
+          formatWaktu(data[nama_uid][i].min_durasi_recovery),
+          formatNumber(data[nama_uid][i].total_diatas_sla_recovery),
+          formatNumber(data[nama_uid][i].total_dibawah_sla_recovery)
+        ])
+
+        total.total_laporan += data[nama_uid][i].total
+        total.total_laporan_sudah_selesai += data[nama_uid][i].total_selesai
+        total.total_laporan_belum_selesai += data[nama_uid][i].total_inproses
+        total.total_response_time_total += data[nama_uid][i].total_durasi_response
+        total.total_response_time_rata_rata.push(data[nama_uid][i].avg_durasi_response)
+        total.total_response_time_max.push(data[nama_uid][i].max_durasi_response)
+        total.total_response_time_min.push(data[nama_uid][i].min_durasi_response)
+        total.total_response_time_lebih_sla += data[nama_uid][i].total_diatas_sla_response
+        total.total_response_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_response
+        total.total_recovery_time_total += data[nama_uid][i].total_durasi_recovery
+        total.total_recovery_time_rata_rata.push(data[nama_uid][i].avg_durasi_recovery)
+        total.total_recovery_time_max.push(data[nama_uid][i].max_durasi_recovery)
+        total.total_recovery_time_min.push(data[nama_uid][i].min_durasi_recovery)
+        total.total_recovery_time_lebih_sla += data[nama_uid][i].total_diatas_sla_recovery
+        total.total_recovery_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_recovery
+
+        grandTotal.total_laporan += data[nama_uid][i].total
+        grandTotal.total_laporan_sudah_selesai += data[nama_uid][i].total_selesai
+        grandTotal.total_laporan_belum_selesai += data[nama_uid][i].total_inproses
+        grandTotal.total_response_time_total += data[nama_uid][i].total_durasi_response
+        grandTotal.total_response_time_rata_rata.push(data[nama_uid][i].avg_durasi_response)
+        grandTotal.total_response_time_max.push(data[nama_uid][i].max_durasi_response)
+        grandTotal.total_response_time_min.push(data[nama_uid][i].min_durasi_response)
+        grandTotal.total_response_time_lebih_sla += data[nama_uid][i].total_diatas_sla_response
+        grandTotal.total_response_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_response
+        grandTotal.total_recovery_time_total += data[nama_uid][i].total_durasi_recovery
+        grandTotal.total_recovery_time_rata_rata.push(data[nama_uid][i].avg_durasi_recovery)
+        grandTotal.total_recovery_time_max.push(data[nama_uid][i].max_durasi_recovery)
+        grandTotal.total_recovery_time_min.push(data[nama_uid][i].min_durasi_recovery)
+        grandTotal.total_recovery_time_lebih_sla += data[nama_uid][i].total_diatas_sla_recovery
+        grandTotal.total_recovery_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_recovery
+      }
+
+      formattedData.push([
+        { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+        formatNumber(total.total_laporan),
+        formatNumber(total.total_laporan_sudah_selesai),
+        formatPercentage(
+          !total.total_laporan || !total.total_laporan_sudah_selesai
+            ? '0%'
+            : (total.total_laporan_sudah_selesai / total.total_laporan) * 100
+        ),
+        formatNumber(total.total_laporan_belum_selesai),
+        formatPercentage(
+          !total.total_laporan || !total.total_laporan_belum_selesai
+            ? '0%'
+            : (total.total_laporan_belum_selesai / total.total_laporan) * 100
+        ),
+        formatNumber(total.total_response_time_total),
+        formatNumber(
+          total.total_response_time_rata_rata.length
+            ? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
+                total.total_response_time_rata_rata.length
+            : 0
+        ),
+        formatWaktu(Math.max(...total.total_response_time_max)),
+        formatWaktu(Math.min(...total.total_response_time_min)),
+        formatNumber(total.total_response_time_lebih_sla),
+        formatNumber(total.total_response_time_kurang_sla),
+        formatNumber(total.total_recovery_time_total),
+        formatNumber(
+          total.total_recovery_time_rata_rata.length
+            ? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
+                total.total_recovery_time_rata_rata.length
+            : 0
+        ),
+        formatWaktu(Math.max(...total.total_recovery_time_max)),
+        formatWaktu(Math.min(...total.total_recovery_time_min)),
+        formatNumber(total.total_recovery_time_lebih_sla),
+        formatNumber(total.total_recovery_time_kurang_sla)
+      ])
+    }
+  } else {
+    for (let i = 0; i < rawData.length; i++) {
+      formattedData.push([
+        { content: i + 1, styles: { halign: 'right' } },
+        rawData[i].tanggal_lapor,
+        formatNumber(rawData[i].total),
+        formatNumber(rawData[i].total_selesai),
+        formatPercentage(
+          !rawData[i].total || !rawData[i].total_selesai
+            ? '0%'
+            : (rawData[i].total_selesai / rawData[i].total) * 100
+        ),
+        formatNumber(rawData[i].total_inproses),
+        formatPercentage(
+          !rawData[i].total_inproses || !rawData[i].total
+            ? '0%'
+            : (rawData[i].total_inproses / rawData[i].total) * 100
+        ),
+        formatNumber(rawData[i].total_durasi_response),
+        formatNumber(rawData[i].avg_durasi_response),
+        formatWaktu(rawData[i].max_durasi_response),
+        formatWaktu(rawData[i].min_durasi_response),
+        formatNumber(rawData[i].total_diatas_sla_response),
+        formatNumber(rawData[i].total_dibawah_sla_response),
+        formatNumber(rawData[i].total_durasi_recovery),
+        formatNumber(rawData[i].avg_durasi_recovery),
+        formatWaktu(rawData[i].max_durasi_recovery),
+        formatWaktu(rawData[i].min_durasi_recovery),
+        formatNumber(rawData[i].total_diatas_sla_recovery),
+        formatNumber(rawData[i].total_dibawah_sla_recovery)
+      ])
+
+      grandTotal.total_laporan += rawData[i].total
+      grandTotal.total_laporan_sudah_selesai += rawData[i].total_selesai
+      grandTotal.total_laporan_belum_selesai += rawData[i].total_inproses
+      grandTotal.total_response_time_total += rawData[i].total_durasi_response
+      grandTotal.total_response_time_rata_rata.push(rawData[i].avg_durasi_response)
+      grandTotal.total_response_time_max.push(rawData[i].max_durasi_response)
+      grandTotal.total_response_time_min.push(rawData[i].min_durasi_response)
+      grandTotal.total_response_time_lebih_sla += rawData[i].total_diatas_sla_response
+      grandTotal.total_response_time_kurang_sla += rawData[i].total_dibawah_sla_response
+      grandTotal.total_recovery_time_total += rawData[i].total
+      grandTotal.total_recovery_time_rata_rata.push(rawData[i].avg_durasi_recovery)
+      grandTotal.total_recovery_time_max.push(rawData[i].max_durasi_recovery)
+      grandTotal.total_recovery_time_min.push(rawData[i].min_durasi_recovery)
+      grandTotal.total_recovery_time_lebih_sla += rawData[i].total_diatas_sla_recovery
+      grandTotal.total_recovery_time_kurang_sla += rawData[i].total_dibawah_sla_recovery
+    }
+  }
+
+  formattedData.push([
+    { content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+    formatNumber(grandTotal.total_laporan),
+    formatNumber(grandTotal.total_laporan_sudah_selesai),
+    formatPercentage(
+      !grandTotal.total_laporan || !grandTotal.total_laporan_sudah_selesai
+        ? '0%'
+        : (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
+    ),
+    formatNumber(grandTotal.total_laporan_belum_selesai),
+    formatPercentage(
+      !grandTotal.total_laporan || !grandTotal.total_laporan_belum_selesai
+        ? '0%'
+        : (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
+    ),
+    formatNumber(grandTotal.total_response_time_total),
+    formatNumber(
+      grandTotal.total_response_time_rata_rata.length
+        ? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
+            grandTotal.total_response_time_rata_rata.length
+        : 0
+    ),
+    formatWaktu(Math.max(...grandTotal.total_response_time_max)),
+    formatWaktu(Math.min(...grandTotal.total_response_time_min)),
+    formatNumber(grandTotal.total_response_time_lebih_sla),
+    formatNumber(grandTotal.total_response_time_kurang_sla),
+    formatNumber(grandTotal.total_recovery_time_total),
+    formatNumber(
+      grandTotal.total_recovery_time_rata_rata.length
+        ? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
+            grandTotal.total_recovery_time_rata_rata.length
+        : 0
+    ),
+    formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
+    formatWaktu(Math.min(...grandTotal.total_recovery_time_min)),
+    formatNumber(grandTotal.total_recovery_time_lebih_sla),
+    formatNumber(grandTotal.total_recovery_time_kurang_sla)
+  ])
+
+  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, reportMeta.groupBy)
+  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()
+      ]
+    ],
+    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: 23
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'No',
+          rowSpan: 3
+        },
+        {
+          content: 'Tanggal Lapor',
+          rowSpan: 3
+        },
+        {
+          content: 'Laporan',
+          colSpan: 5
+        },
+        {
+          content: 'Response Time',
+          colSpan: 6
+        },
+        {
+          content: 'Penyelesaian',
+          colSpan: 6
+        }
+      ],
+      [
+        {
+          content: 'Total',
+          rowSpan: 2
+        },
+        {
+          content: 'Sudah Selesai',
+          colSpan: 2
+        },
+        {
+          content: 'Belum Selesai',
+          colSpan: 2
+        },
+        {
+          content: 'Hari',
+          colSpan: 4
+        },
+        {
+          content: 'Laporan',
+          colSpan: 2
+        },
+        {
+          content: 'Hari',
+          colSpan: 4
+        },
+        {
+          content: 'Laporan',
+          colSpan: 2
+        }
+      ],
+      [
+        'Jml',
+        '%',
+        'Jml',
+        '%',
+        'Total',
+        'Rata-Rata',
+        'Max',
+        'Min',
+        '>Sla',
+        '<Sla',
+        'Total',
+        'Rata-Rata',
+        'Max',
+        'Min',
+        '>Sla',
+        '<Sla'
+      ]
+    ],
+    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'
+        }
+      }
+
+      if (data.cell.text[0] === 'GRAND 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: [
+      [`${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,
+      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, 6, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    7,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:S1')
+  worksheet.mergeCells('A2:S2')
+  worksheet.mergeCells('A3:S3')
+  worksheet.mergeCells('A4:S4')
+  worksheet.mergeCells('A6:S6')
+  worksheet.mergeCells('A7:S7')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 9, 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, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
diff --git a/src/report/Keluhan/Rekap/RKeluhan_PerUnit.ts b/src/report/Keluhan/Rekap/RKeluhan_PerUnit.ts
new file mode 100644
index 0000000..d7ce089
--- /dev/null
+++ b/src/report/Keluhan/Rekap/RKeluhan_PerUnit.ts
@@ -0,0 +1,696 @@
+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 = 'Rekapitulasi Keluhan Per Unit'
+const fontSize = 5
+const detailFontSize = 3
+
+const groupingData = (data: any) => {
+  const groupedData: any = {}
+
+  data.forEach((item: any) => {
+    const { nama_up3 } = item
+
+    if (!groupedData[nama_up3]) {
+      groupedData[nama_up3] = []
+    }
+
+    groupedData[nama_up3].push(item)
+  })
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+  const grandTotal: any = {
+    total_laporan: 0,
+    total_laporan_sudah_selesai: 0,
+    total_laporan_belum_selesai: 0,
+    total_response_time_total: 0,
+    total_response_time_rata_rata: [],
+    total_response_time_max: [],
+    total_response_time_min: [],
+    total_response_time_lebih_sla: 0,
+    total_response_time_kurang_sla: 0,
+    total_recovery_time_total: 0,
+    total_recovery_time_rata_rata: [],
+    total_recovery_time_max: [],
+    total_recovery_time_min: [],
+    total_recovery_time_lebih_sla: 0,
+    total_recovery_time_kurang_sla: 0
+  }
+
+  for (const key of Object.keys(data)) {
+    const nama_up3 = key
+
+    const total: any = {
+      total_laporan: 0,
+      total_laporan_sudah_selesai: 0,
+      total_laporan_belum_selesai: 0,
+      total_response_time_total: 0,
+      total_response_time_rata_rata: [],
+      total_response_time_max: [],
+      total_response_time_min: [],
+      total_response_time_lebih_sla: 0,
+      total_response_time_kurang_sla: 0,
+      total_recovery_time_total: 0,
+      total_recovery_time_rata_rata: [],
+      total_recovery_time_max: [],
+      total_recovery_time_min: [],
+      total_recovery_time_lebih_sla: 0,
+      total_recovery_time_kurang_sla: 0
+    }
+
+    formattedData.push([
+      {
+        content: nama_up3,
+        colSpan: 19,
+        styles: { fontStyle: 'bold' }
+      }
+    ])
+
+    for (let i = 0; i < data[nama_up3].length; i++) {
+      formattedData.push([
+        { content: i + 1, styles: { halign: 'right' } },
+        data[nama_up3][i].nama_ulp,
+        formatNumber(data[nama_up3][i].total),
+        formatNumber(data[nama_up3][i].total_selesai),
+        formatPercentage(
+          !data[nama_up3][i].total || !data[nama_up3][i].total_selesai
+            ? '0%'
+            : (data[nama_up3][i].total_selesai / data[nama_up3][i].total) * 100
+        ),
+        formatNumber(data[nama_up3][i].total_inproses),
+        formatPercentage(
+          !data[nama_up3][i].total_inproses || !data[nama_up3][i].total
+            ? '0%'
+            : (data[nama_up3][i].total_inproses / data[nama_up3][i].total) * 100
+        ),
+        formatNumber(data[nama_up3][i].total_durasi_response),
+        formatNumber(data[nama_up3][i].avg_durasi_response),
+        formatWaktu(data[nama_up3][i].max_durasi_response),
+        formatWaktu(data[nama_up3][i].min_durasi_response),
+        formatNumber(data[nama_up3][i].total_diatas_sla_response),
+        formatNumber(data[nama_up3][i].total_dibawah_sla_response),
+        formatNumber(data[nama_up3][i].total_durasi_recovery),
+        formatNumber(data[nama_up3][i].avg_durasi_recovery),
+        formatWaktu(data[nama_up3][i].max_durasi_recovery),
+        formatWaktu(data[nama_up3][i].min_durasi_recovery),
+        formatNumber(data[nama_up3][i].total_diatas_sla_recovery),
+        formatNumber(data[nama_up3][i].total_dibawah_sla_recovery)
+      ])
+
+      total.total_laporan += data[nama_up3][i].total
+      total.total_laporan_sudah_selesai += data[nama_up3][i].total_selesai
+      total.total_laporan_belum_selesai += data[nama_up3][i].total_inproses
+      total.total_response_time_total += data[nama_up3][i].total_durasi_response
+      total.total_response_time_rata_rata.push(data[nama_up3][i].avg_durasi_response)
+      total.total_response_time_max.push(data[nama_up3][i].max_durasi_response)
+      total.total_response_time_min.push(data[nama_up3][i].min_durasi_response)
+      total.total_response_time_lebih_sla += data[nama_up3][i].total_diatas_sla_response
+      total.total_response_time_kurang_sla += data[nama_up3][i].total_dibawah_sla_response
+      total.total_recovery_time_total += data[nama_up3][i].total_durasi_recovery
+      total.total_recovery_time_rata_rata.push(data[nama_up3][i].avg_durasi_recovery)
+      total.total_recovery_time_max.push(data[nama_up3][i].max_durasi_recovery)
+      total.total_recovery_time_min.push(data[nama_up3][i].min_durasi_recovery)
+      total.total_recovery_time_lebih_sla += data[nama_up3][i].total_diatas_sla_recovery
+      total.total_recovery_time_kurang_sla += data[nama_up3][i].total_dibawah_sla_recovery
+
+      grandTotal.total_laporan += data[nama_up3][i].total
+      grandTotal.total_laporan_sudah_selesai += data[nama_up3][i].total_selesai
+      grandTotal.total_laporan_belum_selesai += data[nama_up3][i].total_inproses
+      grandTotal.total_response_time_total += data[nama_up3][i].total_durasi_response
+      grandTotal.total_response_time_rata_rata.push(data[nama_up3][i].avg_durasi_response)
+      grandTotal.total_response_time_max.push(data[nama_up3][i].max_durasi_response)
+      grandTotal.total_response_time_min.push(data[nama_up3][i].min_durasi_response)
+      grandTotal.total_response_time_lebih_sla += data[nama_up3][i].total_diatas_sla_response
+      grandTotal.total_response_time_kurang_sla += data[nama_up3][i].total_dibawah_sla_response
+      grandTotal.total_recovery_time_total += data[nama_up3][i].total_durasi_recovery
+      grandTotal.total_recovery_time_rata_rata.push(data[nama_up3][i].avg_durasi_recovery)
+      grandTotal.total_recovery_time_max.push(data[nama_up3][i].max_durasi_recovery)
+      grandTotal.total_recovery_time_min.push(data[nama_up3][i].min_durasi_recovery)
+      grandTotal.total_recovery_time_lebih_sla += data[nama_up3][i].total_diatas_sla_recovery
+      grandTotal.total_recovery_time_kurang_sla += data[nama_up3][i].total_dibawah_sla_recovery
+    }
+
+    formattedData.push([
+      { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+      formatNumber(total.total_laporan),
+      formatNumber(total.total_laporan_sudah_selesai),
+      formatPercentage(
+        !total.total_laporan_sudah_selesai || !total.total_laporan
+          ? '0%'
+          : (total.total_laporan_sudah_selesai / total.total_laporan) * 100
+      ),
+      formatNumber(total.total_laporan_belum_selesai),
+      formatPercentage(
+        !total.total_laporan_belum_selesai || !total.total_laporan
+          ? '0%'
+          : (total.total_laporan_belum_selesai / total.total_laporan) * 100
+      ),
+      formatNumber(total.total_response_time_total),
+      formatNumber(
+        total.total_response_time_rata_rata.length
+          ? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
+              total.total_response_time_rata_rata.length
+          : 0
+      ),
+      formatWaktu(Math.max(...total.total_response_time_max)),
+      formatWaktu(Math.min(...total.total_response_time_min)),
+      formatNumber(total.total_response_time_lebih_sla),
+      formatNumber(total.total_response_time_kurang_sla),
+      formatNumber(total.total_recovery_time_total),
+      formatNumber(
+        total.total_recovery_time_rata_rata.length
+          ? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
+              total.total_recovery_time_rata_rata.length
+          : 0
+      ),
+      formatWaktu(Math.max(...total.total_recovery_time_max)),
+      formatWaktu(Math.min(...total.total_recovery_time_min)),
+      formatNumber(total.total_recovery_time_lebih_sla),
+      formatNumber(total.total_recovery_time_kurang_sla)
+    ])
+  }
+
+  formattedData.push([
+    { content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+    formatNumber(grandTotal.total_laporan),
+    formatNumber(grandTotal.total_laporan_sudah_selesai),
+    formatPercentage(
+      !grandTotal.total_laporan || !grandTotal.total_laporan_sudah_selesai
+        ? '0%'
+        : (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
+    ),
+    formatNumber(grandTotal.total_laporan_belum_selesai),
+    formatPercentage(
+      !grandTotal.total_laporan || !grandTotal.total_laporan_belum_selesai
+        ? '0%'
+        : (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
+    ),
+    formatNumber(grandTotal.total_response_time_total),
+    formatNumber(
+      grandTotal.total_response_time_rata_rata.length
+        ? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
+            grandTotal.total_response_time_rata_rata.length
+        : 0
+    ),
+    formatWaktu(Math.max(...grandTotal.total_response_time_max)),
+    formatWaktu(Math.min(...grandTotal.total_response_time_min)),
+    formatNumber(grandTotal.total_response_time_lebih_sla),
+    formatNumber(grandTotal.total_response_time_kurang_sla),
+    formatNumber(grandTotal.total_recovery_time_total),
+    formatNumber(
+      grandTotal.total_recovery_time_rata_rata.length
+        ? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
+            grandTotal.total_recovery_time_rata_rata.length
+        : 0
+    ),
+    formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
+    formatWaktu(Math.min(...grandTotal.total_recovery_time_min)),
+    formatNumber(grandTotal.total_recovery_time_lebih_sla),
+    formatNumber(grandTotal.total_recovery_time_kurang_sla)
+  ])
+
+  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()
+      ]
+    ],
+    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: 23
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'No',
+          rowSpan: 3
+        },
+        {
+          content: 'Unit',
+          rowSpan: 3
+        },
+        {
+          content: 'Laporan',
+          colSpan: 5
+        },
+        {
+          content: 'Response Time',
+          colSpan: 6
+        },
+        {
+          content: 'Penyelesaian',
+          colSpan: 6
+        }
+      ],
+      [
+        {
+          content: 'Total',
+          rowSpan: 2
+        },
+        {
+          content: 'Sudah Selesai',
+          colSpan: 2
+        },
+        {
+          content: 'Belum Selesai',
+          colSpan: 2
+        },
+        {
+          content: 'Hari',
+          colSpan: 4
+        },
+        {
+          content: 'Laporan',
+          colSpan: 2
+        },
+        {
+          content: 'Hari',
+          colSpan: 4
+        },
+        {
+          content: 'Laporan',
+          colSpan: 2
+        }
+      ],
+      [
+        'Jml',
+        '%',
+        'Jml',
+        '%',
+        'Total',
+        'Rata-Rata',
+        'Max',
+        'Min',
+        '>Sla',
+        '<Sla',
+        'Total',
+        'Rata-Rata',
+        'Max',
+        'Min',
+        '>Sla',
+        '<Sla'
+      ]
+    ],
+    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'
+        }
+      }
+
+      if (data.cell.text[0] === 'GRAND 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: [
+      [`${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,
+      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, 5, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    6,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:S1')
+  worksheet.mergeCells('A2:S2')
+  worksheet.mergeCells('A3:S3')
+  worksheet.mergeCells('A5:S5')
+  worksheet.mergeCells('A6:S6')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 8, 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/Material/Daftar/Material_DGMYG.ts b/src/report/Material/Daftar/Material_DGMYG.ts
new file mode 100644
index 0000000..a7444f8
--- /dev/null
+++ b/src/report/Material/Daftar/Material_DGMYG.ts
@@ -0,0 +1,283 @@
+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'
+
+const reportName = 'Daftar Gangguan Dan Material Yang Dipakai'
+const fontSize = 5
+
+const formatMetaData = (reportMeta: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.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, data: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'DISTRIBUSI/WILAYAH', styles: { cellWidth: 35 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.value.uid
+          ? reportMeta.value.uid.name.toUpperCase()
+          : 'Semua Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'AREA',
+        ':',
+        reportMeta.value.up3 ? reportMeta.value.up3.name.toUpperCase() : 'Semua Area'.toUpperCase()
+      ],
+      [
+        'POSKO',
+        ':',
+        reportMeta.value.posko
+          ? reportMeta.value.posko.name.toUpperCase()
+          : 'Semua Posko'.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: 'No',
+          rowSpan: 2
+        },
+        {
+          content: 'Nomor Gangguan',
+          rowSpan: 2
+        },
+        {
+          content: 'Nama Pelanggan',
+          rowSpan: 2
+        },
+        {
+          content: 'Isi Laporan',
+          rowSpan: 2
+        },
+        {
+          content: 'Penyebab Gangguan',
+          rowSpan: 2
+        },
+        {
+          content: 'Tgl Padam',
+          rowSpan: 2
+        },
+        {
+          content: 'Tgl Nyala',
+          rowSpan: 2
+        },
+        {
+          content: 'Regu',
+          rowSpan: 2
+        },
+        {
+          content: 'Material Yang Dipakai',
+          colSpan: 4
+        }
+      ],
+      ['Sumber', 'Nama', 'Satuan', 'Vol']
+    ],
+    body: data.value.map((item: any, i: any) => [
+      { content: ++i, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.nama_pelapor,
+      item.keterangan_pelapor,
+      item.penyebab,
+      item.waktu_lapor,
+      item.waktu_recovery,
+      item.regu,
+      item.media,
+      item.nama_material,
+      item.satuan_material,
+      item.volume_material
+    ]),
+    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'
+    },
+    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: 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 }
+  })
+
+  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,
+    `DISTRIBUSI/WILAYAH : ${
+      reportMeta.value.uid
+        ? reportMeta.value.uid.name.toUpperCase()
+        : 'Semua Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `AREA : ${
+      reportMeta.value.up3 ? reportMeta.value.up3.name.toUpperCase() : 'Semua Area'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `POSKO : ${
+      reportMeta.value.posko
+        ? reportMeta.value.posko.name.toUpperCase()
+        : 'Semua Posko'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    7,
+    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('A6:L6')
+  worksheet.mergeCells('A7:L7')
+
+  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/Material/Rekapitulasi/Material_RPM.ts b/src/report/Material/Rekapitulasi/Material_RPM.ts
new file mode 100644
index 0000000..9c6b97a
--- /dev/null
+++ b/src/report/Material/Rekapitulasi/Material_RPM.ts
@@ -0,0 +1,273 @@
+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'
+
+const reportName = 'Rekapitulasi Pemakaian Material'
+const fontSize = 5
+
+const formatMetaData = (reportMeta: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.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, data: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'DISTRIBUSI/WILAYAH', styles: { cellWidth: 35 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.value.uid
+          ? reportMeta.value.uid.name.toUpperCase()
+          : 'Semua Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'AREA',
+        ':',
+        reportMeta.value.up3 ? reportMeta.value.up3.name.toUpperCase() : 'Semua Area'.toUpperCase()
+      ],
+      [
+        'POSKO',
+        ':',
+        reportMeta.value.posko
+          ? reportMeta.value.posko.name.toUpperCase()
+          : 'Semua Posko'.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: 'No',
+          rowSpan: 2
+        },
+        {
+          content: 'Kode Material',
+          rowSpan: 2
+        },
+        {
+          content: 'Nama Material',
+          rowSpan: 2
+        },
+        {
+          content: 'Satuan',
+          rowSpan: 2
+        },
+        {
+          content: 'Sumber Material',
+          rowSpan: 2
+        },
+        {
+          content: 'Tanggal',
+          colSpan: 31
+        },
+        {
+          content: 'Jumlah',
+          rowSpan: 2
+        }
+      ],
+      [
+        ...Array.from({ length: 31 }, (_, i) => i + 1).map((item) => ({
+          content: item.toString()
+        }))
+      ]
+    ],
+    body: data.value.map((item: any, i: any) => [
+      { content: ++i, styles: { halign: 'right' } },
+      item.kode,
+      item.nama_material,
+      item.satuan,
+      item.sumber_material,
+      ...Array.from({ length: 31 }, (_, i) => item[`tgl${i + 1}`]),
+      item.total
+    ]),
+    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'
+    },
+    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: 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 }
+  })
+
+  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,
+    `DISTRIBUSI/WILAYAH : ${
+      reportMeta.value.uid
+        ? reportMeta.value.uid.name.toUpperCase()
+        : 'Semua Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `AREA : ${
+      reportMeta.value.up3 ? reportMeta.value.up3.name.toUpperCase() : 'Semua Area'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `POSKO : ${
+      reportMeta.value.posko
+        ? reportMeta.value.posko.name.toUpperCase()
+        : 'Semua Posko'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    7,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:AK1')
+  worksheet.mergeCells('A2:AK2')
+  worksheet.mergeCells('A3:AK3')
+  worksheet.mergeCells('A4:AK4')
+  worksheet.mergeCells('A6:AK6')
+  worksheet.mergeCells('A7:AK7')
+
+  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/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.ts b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.ts
new file mode 100644
index 0000000..b077e0d
--- /dev/null
+++ b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.ts
@@ -0,0 +1,563 @@
+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'
+import { getMonthName } from '@/utils/texts'
+
+const reportName = 'Dispacthing Time (DT) Gangguan'
+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 = {
+          mom_bulan_kemarin: 0,
+          mom_bulan_ini: 0,
+          persen_mom: [],
+          yoy_tahun_kemarin: 0,
+          yoy_tahun_ini: 0,
+          persen_yoy: []
+        }
+      }
+
+      groupedData[regional].summary.mom_bulan_kemarin += item.mom_bulan_kemarin
+      groupedData[regional].summary.mom_bulan_ini += item.mom_bulan_ini
+      groupedData[regional].summary.persen_mom.push(item.persen_mom)
+      groupedData[regional].summary.yoy_tahun_kemarin += item.yoy_tahun_kemarin
+      groupedData[regional].summary.yoy_tahun_ini += item.yoy_tahun_ini
+      groupedData[regional].summary.persen_yoy.push(item.persen_yoy)
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    mom_bulan_kemarin: [],
+    mom_bulan_ini: [],
+    yoy_tahun_kemarin: [],
+    yoy_tahun_ini: []
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 7, styles: { fontStyle: 'bold' } }])
+
+  let no = 1
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    formattedData.push([
+      { content: no++, styles: { halign: 'right' } },
+      regional,
+      formatNumber(summary.mom_bulan_kemarin),
+      formatNumber(summary.mom_bulan_ini),
+      formatPercentage(
+        !summary.mom_bulan_ini || !summary.mom_bulan_kemarin
+          ? '0%'
+          : ((summary.mom_bulan_kemarin - summary.mom_bulan_ini) / summary.mom_bulan_kemarin) * 100
+      ),
+      formatNumber(summary.yoy_tahun_kemarin),
+      formatNumber(summary.yoy_tahun_ini),
+      formatPercentage(
+        !summary.yoy_tahun_ini || !summary.yoy_tahun_kemarin
+          ? '0%'
+          : ((summary.yoy_tahun_kemarin - summary.yoy_tahun_ini) / summary.yoy_tahun_kemarin) * 100
+      )
+    ])
+
+    total.mom_bulan_kemarin.push(summary.mom_bulan_kemarin)
+    total.mom_bulan_ini.push(summary.mom_bulan_ini)
+    total.yoy_tahun_kemarin.push(summary.yoy_tahun_kemarin)
+    total.yoy_tahun_ini.push(summary.yoy_tahun_ini)
+  }
+
+  const totalMoMBulanKemarin =
+    total.mom_bulan_kemarin.reduce((a: number, b: number) => a + b, 0) /
+    total.mom_bulan_kemarin.length
+  const totalMoMBulanIni =
+    total.mom_bulan_ini.reduce((a: number, b: number) => a + b, 0) / total.mom_bulan_ini.length
+  const totalYoYTahunKemarin =
+    total.yoy_tahun_kemarin.reduce((a: number, b: number) => a + b, 0) /
+    total.yoy_tahun_kemarin.length
+  const totalYoYTahunIni =
+    total.yoy_tahun_ini.reduce((a: number, b: number) => a + b, 0) / total.yoy_tahun_ini.length
+
+  formattedData.push([
+    { content: 'TOTAL RATA-RATA', colSpan: 2, styles: { fontStyle: 'bold' } },
+    formatNumber(totalMoMBulanKemarin),
+    formatNumber(totalMoMBulanIni),
+    formatPercentage(
+      !totalMoMBulanIni || !totalMoMBulanKemarin
+        ? '0%'
+        : ((totalMoMBulanKemarin - totalMoMBulanIni) / totalMoMBulanKemarin) * 100
+    ),
+    formatNumber(totalYoYTahunKemarin),
+    formatNumber(totalYoYTahunIni),
+    formatPercentage(
+      !totalYoYTahunIni || !totalYoYTahunKemarin
+        ? '0%'
+        : ((totalYoYTahunKemarin - totalYoYTahunIni) / totalYoYTahunKemarin) * 100
+    )
+  ])
+
+  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: 'No',
+          rowSpan: 3
+        },
+        {
+          content: 'Nama Unit',
+          rowSpan: 3
+        },
+        {
+          content: 'Jumlah Dispacthing Time Gangguan',
+          colSpan: 6
+        }
+      ],
+      [
+        {
+          content: 'MOM',
+          colSpan: 3
+        },
+        {
+          content: 'YOY',
+          colSpan: 3
+        }
+      ],
+      [
+        `${getMonthName(reportMeta.lastMonth)} ${reportMeta.lastYearMoM}`,
+        `${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%',
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.lastYear}`,
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%'
+      ]
+    ],
+    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 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',
+        'ULP',
+        'No Laporan',
+        'Tgl/ Jam Lapor',
+        'Tgl/ Jam Datang',
+        'Tgl/ Jam Nyala',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Durasi Penugasan Regu',
+        'Durasi Perjalanan Regu',
+        'Dispatch Oleh',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Sumber Lapor',
+        'Diselesaikan Oleh',
+        'Status',
+        'Referensi Marking',
+        'Kode Gangguan',
+        'Jenis Gangguan',
+        'Tindakan'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.nama_ulp,
+      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.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      '',
+      '',
+      item.status_akhir,
+      '',
+      '',
+      '',
+      ''
+    ]),
+    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:G1')
+  worksheet.mergeCells('A2:G2')
+  worksheet.mergeCells('A3:G3')
+  worksheet.mergeCells('A4:G4')
+  worksheet.mergeCells('A5:G5')
+  worksheet.mergeCells('A7:G7')
+  worksheet.mergeCells('A8:G8')
+
+  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:W1')
+  worksheet.mergeCells('A3:W3')
+  worksheet.mergeCells('A4:W4')
+
+  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/Gangguan/Rekap/MonalisaGR_ENSGangguan.ts b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.ts
new file mode 100644
index 0000000..fceccf7
--- /dev/null
+++ b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.ts
@@ -0,0 +1,372 @@
+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 { getMonthName } from '@/utils/texts'
+
+const reportName = 'Rekapitulasi ENS Gangguan'
+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 = {
+          mom_bulan_kemarin: 0,
+          mom_bulan_ini: 0,
+          persen_mom: [],
+          yoy_tahun_kemarin: 0,
+          yoy_tahun_ini: 0,
+          persen_yoy: []
+        }
+      }
+
+      groupedData[regional].summary.mom_bulan_kemarin += item.mom_bulan_kemarin
+      groupedData[regional].summary.mom_bulan_ini += item.mom_bulan_ini
+      groupedData[regional].summary.persen_mom.push(item.persen_mom)
+      groupedData[regional].summary.yoy_tahun_kemarin += item.yoy_tahun_kemarin
+      groupedData[regional].summary.yoy_tahun_ini += item.yoy_tahun_ini
+      groupedData[regional].summary.persen_yoy.push(item.persen_yoy)
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    mom_bulan_kemarin: 0,
+    mom_bulan_ini: 0,
+    yoy_tahun_kemarin: 0,
+    yoy_tahun_ini: 0
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 7, styles: { fontStyle: 'bold' } }])
+
+  let no = 1
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    formattedData.push([
+      { content: no++, styles: { halign: 'right' } },
+      regional,
+      formatNumber(summary.mom_bulan_kemarin),
+      formatNumber(summary.mom_bulan_ini),
+      formatPercentage(
+        !summary.mom_bulan_ini || !summary.mom_bulan_kemarin
+          ? '0%'
+          : ((summary.mom_bulan_kemarin - summary.mom_bulan_ini) / summary.mom_bulan_kemarin) * 100
+      ),
+      formatNumber(summary.yoy_tahun_kemarin),
+      formatNumber(summary.yoy_tahun_ini),
+      formatPercentage(
+        !summary.yoy_tahun_ini || !summary.yoy_tahun_kemarin
+          ? '0%'
+          : ((summary.yoy_tahun_kemarin - summary.yoy_tahun_ini) / summary.yoy_tahun_kemarin) * 100
+      )
+    ])
+
+    total.mom_bulan_kemarin += summary.mom_bulan_kemarin
+    total.mom_bulan_ini += summary.mom_bulan_ini
+    total.yoy_tahun_kemarin += summary.yoy_tahun_kemarin
+    total.yoy_tahun_ini += summary.yoy_tahun_ini
+  }
+
+  formattedData.push([
+    { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+    formatNumber(total.mom_bulan_kemarin),
+    formatNumber(total.mom_bulan_ini),
+    formatPercentage(
+      !total.mom_bulan_ini || !total.mom_bulan_kemarin
+        ? '0%'
+        : ((total.mom_bulan_kemarin - total.mom_bulan_ini) / total.mom_bulan_kemarin) * 100
+    ),
+    formatNumber(total.yoy_tahun_kemarin),
+    formatNumber(total.yoy_tahun_ini),
+    formatPercentage(
+      !total.yoy_tahun_ini || !total.yoy_tahun_kemarin
+        ? '0%'
+        : ((total.yoy_tahun_kemarin - total.yoy_tahun_ini) / total.yoy_tahun_kemarin) * 100
+    )
+  ])
+
+  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: 'No',
+          rowSpan: 3
+        },
+        {
+          content: 'Nama Unit',
+          rowSpan: 3
+        },
+        {
+          content: 'ENS Gangguan',
+          colSpan: 6
+        }
+      ],
+      [
+        {
+          content: 'MOM',
+          colSpan: 3
+        },
+        {
+          content: 'YOY',
+          colSpan: 3
+        }
+      ],
+      [
+        `${getMonthName(reportMeta.lastMonth)} ${reportMeta.lastYearMoM}`,
+        `${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%',
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.lastYear}`,
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%'
+      ]
+    ],
+    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:G1')
+  worksheet.mergeCells('A2:G2')
+  worksheet.mergeCells('A3:G3')
+  worksheet.mergeCells('A4:G4')
+  worksheet.mergeCells('A5:G5')
+  worksheet.mergeCells('A7:G7')
+  worksheet.mergeCells('A8:G8')
+
+  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/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.ts b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.ts
new file mode 100644
index 0000000..9c513f7
--- /dev/null
+++ b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.ts
@@ -0,0 +1,493 @@
+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'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+
+const reportName = 'Rekapitulasi Gangguan Belum Selesai'
+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 = {
+          jumlah_gangguan: 0,
+          jumlah_informasi: 0,
+          total: 0
+        }
+      }
+
+      groupedData[regional].summary.jumlah_gangguan += item.jumlah_gangguan
+      groupedData[regional].summary.jumlah_informasi += item.jumlah_informasi
+      groupedData[regional].summary.total += item.total
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    jumlah_gangguan: 0,
+    jumlah_informasi: 0,
+    total: 0
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 5, styles: { fontStyle: 'bold' } }])
+
+  let no = 1
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    formattedData.push([
+      { content: no++, styles: { halign: 'right' } },
+      regional,
+      formatNumber(summary.jumlah_gangguan),
+      formatNumber(summary.jumlah_informasi),
+      formatNumber(summary.total)
+    ])
+
+    total.jumlah_gangguan += summary.jumlah_gangguan
+    total.jumlah_informasi += summary.jumlah_informasi
+    total.total += summary.total
+  }
+
+  formattedData.push([
+    { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+    formatNumber(total.jumlah_gangguan),
+    formatNumber(total.jumlah_informasi),
+    formatNumber(total.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: 'No',
+          rowSpan: 2
+        },
+        {
+          content: 'Nama Unit',
+          rowSpan: 2
+        },
+        {
+          content: 'Tahun',
+          colSpan: 3
+        }
+      ],
+      ['Gangguan', 'Informasi', 'Total']
+    ],
+    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 Pelapor',
+        '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_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:E1')
+  worksheet.mergeCells('A2:E2')
+  worksheet.mergeCells('A3:E3')
+  worksheet.mergeCells('A4:E4')
+  worksheet.mergeCells('A5:E5')
+  worksheet.mergeCells('A7:E7')
+  worksheet.mergeCells('A8:E8')
+
+  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 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 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: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/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.ts b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.ts
new file mode 100644
index 0000000..e2f7db6
--- /dev/null
+++ b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.ts
@@ -0,0 +1,286 @@
+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 = 'Rekapitulasi Gangguan Per Jenis Gangguan'
+const fontSize = 5
+
+const formatData = (rawData: any) => {
+  const formattedData: any = []
+
+  const total: any = {
+    jumlah: 0,
+    persen: []
+  }
+
+  rawData.forEach((data: any, index: any) => {
+    formattedData.push([
+      { content: ++index, styles: { halign: 'right' } },
+      data.id_jenis_gangguan,
+      data.nama_jenis_gangguan,
+      formatNumber(data.jumlah),
+      formatPercentage(data.persen)
+    ])
+
+    total.jumlah += data.jumlah
+    total.persen.push(data.persen)
+  })
+
+  formattedData.push([
+    {
+      content: 'TOTAL',
+      colSpan: 3
+    },
+    formatNumber(total.jumlah),
+    formatPercentage(total.persen.reduce((a: any, b: any) => a + b, 0) / total.persen.length)
+  ])
+
+  formattedData.push([
+    {
+      content: 'ENS',
+      colSpan: 3
+    },
+    {
+      content: '19.169.174,65',
+      colSpan: 2
+    }
+  ])
+
+  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: [['No', 'ID Gangguan', 'Jenis Gangguan', 'Jumlah', '%']],
+    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'
+        }
+      }
+
+      if (data.cell.text[0] === 'ENS') {
+        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:E1')
+  worksheet.mergeCells('A2:E2')
+  worksheet.mergeCells('A3:E3')
+  worksheet.mergeCells('A4:E4')
+  worksheet.mergeCells('A5:E5')
+  worksheet.mergeCells('A7:E7')
+  worksheet.mergeCells('A8:E8')
+
+  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/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.ts b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.ts
new file mode 100644
index 0000000..98dd461
--- /dev/null
+++ b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.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'
+import { getMonthName } from '@/utils/texts'
+
+const reportName = 'Jumlah dan Durasi RPT RCT Gangguan'
+const fontSize = 5
+
+const formatData = (rawData: any) => {
+  const formattedData: any = []
+
+  const total: any = {
+    total_durasi_response_time_bulan_ini: 0,
+    count_durasi_response_time_bulan_ini: 0,
+    total_durasi_recovery_time_bulan_ini: 0,
+    count_durasi_recovery_time_bulan_ini: 0,
+    total_durasi_response_time_tahun_ini: 0,
+    count_durasi_response_time_tahun_ini: 0,
+    total_durasi_recovery_time_tahun_ini: 0,
+    count_durasi_recovery_time_tahun_ini: 0
+  }
+
+  rawData.forEach((data: any) => {
+    total.total_durasi_response_time_bulan_ini += data.total_durasi_response_time_bulan_ini
+    total.count_durasi_response_time_bulan_ini += data.count_durasi_response_time_bulan_ini
+    total.total_durasi_recovery_time_bulan_ini += data.total_durasi_recovery_time_bulan_ini
+    total.count_durasi_recovery_time_bulan_ini += data.count_durasi_recovery_time_bulan_ini
+    total.total_durasi_response_time_tahun_ini += data.total_durasi_response_time_tahun_ini
+    total.count_durasi_response_time_tahun_ini += data.count_durasi_response_time_tahun_ini
+    total.total_durasi_recovery_time_tahun_ini += data.total_durasi_recovery_time_tahun_ini
+    total.count_durasi_recovery_time_tahun_ini += data.count_durasi_recovery_time_tahun_ini
+  })
+
+  formattedData.push([
+    'NASIONAL',
+    formatNumber(total.total_durasi_response_time_bulan_ini),
+    formatNumber(total.count_durasi_response_time_bulan_ini),
+    formatNumber(
+      total.total_durasi_response_time_bulan_ini / total.count_durasi_response_time_bulan_ini
+    ),
+    formatNumber(total.total_durasi_recovery_time_bulan_ini),
+    formatNumber(total.count_durasi_recovery_time_bulan_ini),
+    formatPercentage(
+      total.total_durasi_recovery_time_bulan_ini / total.count_durasi_recovery_time_bulan_ini
+    ),
+    formatNumber(total.total_durasi_response_time_tahun_ini),
+    formatNumber(total.count_durasi_response_time_tahun_ini),
+    formatPercentage(
+      total.total_durasi_response_time_tahun_ini / total.count_durasi_response_time_tahun_ini
+    ),
+    formatNumber(total.total_durasi_recovery_time_tahun_ini),
+    formatNumber(total.count_durasi_recovery_time_tahun_ini),
+    formatPercentage(
+      total.total_durasi_recovery_time_tahun_ini / total.count_durasi_recovery_time_tahun_ini
+    )
+  ])
+
+  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: 4
+        },
+        {
+          content: 'Jumlah dan Durasi RPT & RCT Gangguan',
+          colSpan: 12
+        }
+      ],
+      [
+        {
+          content: getMonthName(reportMeta.currentMonth) + ' ' + reportMeta.currentYear,
+          colSpan: 6
+        },
+        {
+          content:
+            's.d' + ' ' + getMonthName(reportMeta.currentMonth) + ' ' + reportMeta.currentYear,
+          colSpan: 6
+        }
+      ],
+      [
+        'Total RPT',
+        'Jumlah Gangguan',
+        'RPT Gangguan',
+        'Total RCT',
+        'Jumlah Gangguan',
+        'RCT Gangguan',
+        'Total RPT',
+        'Jumlah Gangguan',
+        'RPT Gangguan',
+        'Total RCT',
+        'Jumlah Gangguan',
+        'RCT Gangguan'
+      ],
+      ['a', 'b', 'c=a/b', 'd', 'e', 'f=d/e', 'a', 'b', 'c=a/b', 'd', 'e', 'f=d/e']
+    ],
+    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:M1')
+  worksheet.mergeCells('A2:M2')
+  worksheet.mergeCells('A3:M3')
+  worksheet.mergeCells('A4:M4')
+  worksheet.mergeCells('A5:M5')
+  worksheet.mergeCells('A7:M7')
+  worksheet.mergeCells('A8:M8')
+
+  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/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.ts b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.ts
new file mode 100644
index 0000000..14863a9
--- /dev/null
+++ b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.ts
@@ -0,0 +1,374 @@
+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'
+import { getMonthName } from '@/utils/texts'
+
+const reportName = 'Jumlah Kali Gangguan'
+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 = {
+          mom_bulan_kemarin: 0,
+          mom_bulan_ini: 0,
+          persen_mom: [],
+          yoy_tahun_kemarin: 0,
+          yoy_tahun_ini: 0,
+          persen_yoy: []
+        }
+      }
+
+      groupedData[regional].summary.mom_bulan_kemarin += item.mom_bulan_kemarin
+      groupedData[regional].summary.mom_bulan_ini += item.mom_bulan_ini
+      groupedData[regional].summary.persen_mom.push(item.persen_mom)
+      groupedData[regional].summary.yoy_tahun_kemarin += item.yoy_tahun_kemarin
+      groupedData[regional].summary.yoy_tahun_ini += item.yoy_tahun_ini
+      groupedData[regional].summary.persen_yoy.push(item.persen_yoy)
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    mom_bulan_kemarin: 0,
+    mom_bulan_ini: 0,
+    yoy_tahun_kemarin: 0,
+    yoy_tahun_ini: 0
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 7, styles: { fontStyle: 'bold' } }])
+
+  let no = 1
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    formattedData.push([
+      { content: no++, styles: { halign: 'right' } },
+      regional,
+      formatNumber(summary.mom_bulan_kemarin),
+      formatNumber(summary.mom_bulan_ini),
+      formatPercentage(
+        !summary.mom_bulan_ini || !summary.mom_bulan_kemarin
+          ? '0%'
+          : ((summary.mom_bulan_kemarin - summary.mom_bulan_ini) / summary.mom_bulan_kemarin) * 100
+      ),
+      formatNumber(summary.yoy_tahun_kemarin),
+      formatNumber(summary.yoy_tahun_ini),
+      formatPercentage(
+        !summary.yoy_tahun_ini || !summary.yoy_tahun_kemarin
+          ? '0%'
+          : ((summary.yoy_tahun_kemarin - summary.yoy_tahun_ini) / summary.yoy_tahun_kemarin) * 100
+      )
+    ])
+
+    total.mom_bulan_kemarin += summary.mom_bulan_kemarin
+    total.mom_bulan_ini += summary.mom_bulan_ini
+    total.yoy_tahun_kemarin += summary.yoy_tahun_kemarin
+    total.yoy_tahun_ini += summary.yoy_tahun_ini
+  }
+
+  formattedData.push([
+    { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+    formatNumber(total.mom_bulan_kemarin),
+    formatNumber(total.mom_bulan_ini),
+    formatPercentage(
+      !total.mom_bulan_ini || !total.mom_bulan_kemarin
+        ? '0%'
+        : ((total.mom_bulan_kemarin - total.mom_bulan_ini) / total.mom_bulan_kemarin) * 100
+    ),
+    formatNumber(total.yoy_tahun_kemarin),
+    formatNumber(total.yoy_tahun_ini),
+    formatPercentage(
+      !total.yoy_tahun_ini || !total.yoy_tahun_kemarin
+        ? '0%'
+        : ((total.yoy_tahun_kemarin - total.yoy_tahun_ini) / total.yoy_tahun_kemarin) * 100
+    )
+  ])
+
+  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: 'No',
+          rowSpan: 3
+        },
+        {
+          content: 'Nama Unit',
+          rowSpan: 3
+        },
+        {
+          content: 'Jumlah Kali Gangguan',
+          colSpan: 6
+        }
+      ],
+      [
+        {
+          content: 'MOM',
+          colSpan: 3
+        },
+        {
+          content: 'YOY',
+          colSpan: 3
+        }
+      ],
+      [
+        `${getMonthName(reportMeta.lastMonth)} ${reportMeta.lastYearMoM}`,
+        `${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%',
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.lastYear}`,
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%'
+      ]
+    ],
+    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:G1')
+  worksheet.mergeCells('A2:G2')
+  worksheet.mergeCells('A3:G3')
+  worksheet.mergeCells('A4:G4')
+  worksheet.mergeCells('A5:G5')
+  worksheet.mergeCells('A7:G7')
+  worksheet.mergeCells('A8:G8')
+
+  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/Gangguan/Rekap/MonalisaGR_LaporUlang.ts b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.ts
new file mode 100644
index 0000000..ef93902
--- /dev/null
+++ b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.ts
@@ -0,0 +1,372 @@
+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 { getMonthName } from '@/utils/texts'
+
+const reportName = 'Rekapitulasi Lapor Ulang Gangguan'
+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 = {
+          mom_bulan_kemarin: 0,
+          mom_bulan_ini: 0,
+          persen_mom: [],
+          yoy_tahun_kemarin: 0,
+          yoy_tahun_ini: 0,
+          persen_yoy: []
+        }
+      }
+
+      groupedData[regional].summary.mom_bulan_kemarin += item.mom_bulan_kemarin
+      groupedData[regional].summary.mom_bulan_ini += item.mom_bulan_ini
+      groupedData[regional].summary.persen_mom.push(item.persen_mom)
+      groupedData[regional].summary.yoy_tahun_kemarin += item.yoy_tahun_kemarin
+      groupedData[regional].summary.yoy_tahun_ini += item.yoy_tahun_ini
+      groupedData[regional].summary.persen_yoy.push(item.persen_yoy)
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    mom_bulan_kemarin: 0,
+    mom_bulan_ini: 0,
+    yoy_tahun_kemarin: 0,
+    yoy_tahun_ini: 0
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 7, styles: { fontStyle: 'bold' } }])
+
+  let no = 1
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    formattedData.push([
+      { content: no++, styles: { halign: 'right' } },
+      regional,
+      formatNumber(summary.mom_bulan_kemarin),
+      formatNumber(summary.mom_bulan_ini),
+      formatPercentage(
+        !summary.mom_bulan_ini || !summary.mom_bulan_kemarin
+          ? '0%'
+          : ((summary.mom_bulan_kemarin - summary.mom_bulan_ini) / summary.mom_bulan_kemarin) * 100
+      ),
+      formatNumber(summary.yoy_tahun_kemarin),
+      formatNumber(summary.yoy_tahun_ini),
+      formatPercentage(
+        !summary.yoy_tahun_ini || !summary.yoy_tahun_kemarin
+          ? '0%'
+          : ((summary.yoy_tahun_kemarin - summary.yoy_tahun_ini) / summary.yoy_tahun_kemarin) * 100
+      )
+    ])
+
+    total.mom_bulan_kemarin += summary.mom_bulan_kemarin
+    total.mom_bulan_ini += summary.mom_bulan_ini
+    total.yoy_tahun_kemarin += summary.yoy_tahun_kemarin
+    total.yoy_tahun_ini += summary.yoy_tahun_ini
+  }
+
+  formattedData.push([
+    { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+    formatNumber(total.mom_bulan_kemarin),
+    formatNumber(total.mom_bulan_ini),
+    formatPercentage(
+      !total.mom_bulan_ini || !total.mom_bulan_kemarin
+        ? '0%'
+        : ((total.mom_bulan_kemarin - total.mom_bulan_ini) / total.mom_bulan_kemarin) * 100
+    ),
+    formatNumber(total.yoy_tahun_kemarin),
+    formatNumber(total.yoy_tahun_ini),
+    formatPercentage(
+      !total.yoy_tahun_ini || !total.yoy_tahun_kemarin
+        ? '0%'
+        : ((total.yoy_tahun_kemarin - total.yoy_tahun_ini) / total.yoy_tahun_kemarin) * 100
+    )
+  ])
+
+  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: 'No',
+          rowSpan: 3
+        },
+        {
+          content: 'Nama Unit',
+          rowSpan: 3
+        },
+        {
+          content: 'Lapor Ulang Gangguan',
+          colSpan: 6
+        }
+      ],
+      [
+        {
+          content: 'MOM',
+          colSpan: 3
+        },
+        {
+          content: 'YOY',
+          colSpan: 3
+        }
+      ],
+      [
+        `${getMonthName(reportMeta.lastMonth)} ${reportMeta.lastYearMoM}`,
+        `${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%',
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.lastYear}`,
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%'
+      ]
+    ],
+    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:G1')
+  worksheet.mergeCells('A2:G2')
+  worksheet.mergeCells('A3:G3')
+  worksheet.mergeCells('A4:G4')
+  worksheet.mergeCells('A5:G5')
+  worksheet.mergeCells('A7:G7')
+  worksheet.mergeCells('A8:G8')
+
+  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/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.ts b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.ts
new file mode 100644
index 0000000..28c3aae
--- /dev/null
+++ b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.ts
@@ -0,0 +1,384 @@
+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'
+import { getMonthName } from '@/utils/texts'
+
+const reportName = 'Recovery Time (RCT) Gangguan'
+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 = {
+          mom_bulan_kemarin: 0,
+          mom_bulan_ini: 0,
+          persen_mom: [],
+          yoy_tahun_kemarin: 0,
+          yoy_tahun_ini: 0,
+          persen_yoy: []
+        }
+      }
+
+      groupedData[regional].summary.mom_bulan_kemarin += item.mom_bulan_kemarin
+      groupedData[regional].summary.mom_bulan_ini += item.mom_bulan_ini
+      groupedData[regional].summary.persen_mom.push(item.persen_mom)
+      groupedData[regional].summary.yoy_tahun_kemarin += item.yoy_tahun_kemarin
+      groupedData[regional].summary.yoy_tahun_ini += item.yoy_tahun_ini
+      groupedData[regional].summary.persen_yoy.push(item.persen_yoy)
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    mom_bulan_kemarin: [],
+    mom_bulan_ini: [],
+    yoy_tahun_kemarin: [],
+    yoy_tahun_ini: []
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 7, styles: { fontStyle: 'bold' } }])
+
+  let no = 1
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    formattedData.push([
+      { content: no++, styles: { halign: 'right' } },
+      regional,
+      formatNumber(summary.mom_bulan_kemarin),
+      formatNumber(summary.mom_bulan_ini),
+      formatPercentage(
+        !summary.mom_bulan_ini || !summary.mom_bulan_kemarin
+          ? '0%'
+          : ((summary.mom_bulan_kemarin - summary.mom_bulan_ini) / summary.mom_bulan_kemarin) * 100
+      ),
+      formatNumber(summary.yoy_tahun_kemarin),
+      formatNumber(summary.yoy_tahun_ini),
+      formatPercentage(
+        !summary.yoy_tahun_ini || !summary.yoy_tahun_kemarin
+          ? '0%'
+          : ((summary.yoy_tahun_kemarin - summary.yoy_tahun_ini) / summary.yoy_tahun_kemarin) * 100
+      )
+    ])
+
+    total.mom_bulan_kemarin.push(summary.mom_bulan_kemarin)
+    total.mom_bulan_ini.push(summary.mom_bulan_ini)
+    total.yoy_tahun_kemarin.push(summary.yoy_tahun_kemarin)
+    total.yoy_tahun_ini.push(summary.yoy_tahun_ini)
+  }
+
+  const totalMoMBulanKemarin =
+    total.mom_bulan_kemarin.reduce((a: number, b: number) => a + b, 0) /
+    total.mom_bulan_kemarin.length
+  const totalMoMBulanIni =
+    total.mom_bulan_ini.reduce((a: number, b: number) => a + b, 0) / total.mom_bulan_ini.length
+  const totalYoYTahunKemarin =
+    total.yoy_tahun_kemarin.reduce((a: number, b: number) => a + b, 0) /
+    total.yoy_tahun_kemarin.length
+  const totalYoYTahunIni =
+    total.yoy_tahun_ini.reduce((a: number, b: number) => a + b, 0) / total.yoy_tahun_ini.length
+
+  formattedData.push([
+    { content: 'RATA-RATA', colSpan: 2, styles: { fontStyle: 'bold' } },
+    formatNumber(totalMoMBulanKemarin),
+    formatNumber(totalMoMBulanIni),
+    formatPercentage(
+      !totalMoMBulanIni || !totalMoMBulanKemarin
+        ? '0%'
+        : ((totalMoMBulanKemarin - totalMoMBulanIni) / totalMoMBulanKemarin) * 100
+    ),
+    formatNumber(totalYoYTahunKemarin),
+    formatNumber(totalYoYTahunIni),
+    formatPercentage(
+      !totalYoYTahunIni || !totalYoYTahunKemarin
+        ? '0%'
+        : ((totalYoYTahunKemarin - totalYoYTahunIni) / totalYoYTahunKemarin) * 100
+    )
+  ])
+
+  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: 'No',
+          rowSpan: 3
+        },
+        {
+          content: 'Nama Unit',
+          rowSpan: 3
+        },
+        {
+          content: 'Jumlah RCT Kali Gangguan',
+          colSpan: 6
+        }
+      ],
+      [
+        {
+          content: 'MOM',
+          colSpan: 3
+        },
+        {
+          content: 'YOY',
+          colSpan: 3
+        }
+      ],
+      [
+        `${getMonthName(reportMeta.lastMonth)} ${reportMeta.lastYearMoM}`,
+        `${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%',
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.lastYear}`,
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%'
+      ]
+    ],
+    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:G1')
+  worksheet.mergeCells('A2:G2')
+  worksheet.mergeCells('A3:G3')
+  worksheet.mergeCells('A4:G4')
+  worksheet.mergeCells('A5:G5')
+  worksheet.mergeCells('A7:G7')
+  worksheet.mergeCells('A8:G8')
+
+  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/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.ts b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.ts
new file mode 100644
index 0000000..8faf15a
--- /dev/null
+++ b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.ts
@@ -0,0 +1,384 @@
+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'
+import { getMonthName } from '@/utils/texts'
+
+const reportName = 'Response Time (RPT) Gangguan'
+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 = {
+          mom_bulan_kemarin: 0,
+          mom_bulan_ini: 0,
+          persen_mom: [],
+          yoy_tahun_kemarin: 0,
+          yoy_tahun_ini: 0,
+          persen_yoy: []
+        }
+      }
+
+      groupedData[regional].summary.mom_bulan_kemarin += item.mom_bulan_kemarin
+      groupedData[regional].summary.mom_bulan_ini += item.mom_bulan_ini
+      groupedData[regional].summary.persen_mom.push(item.persen_mom)
+      groupedData[regional].summary.yoy_tahun_kemarin += item.yoy_tahun_kemarin
+      groupedData[regional].summary.yoy_tahun_ini += item.yoy_tahun_ini
+      groupedData[regional].summary.persen_yoy.push(item.persen_yoy)
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    mom_bulan_kemarin: [],
+    mom_bulan_ini: [],
+    yoy_tahun_kemarin: [],
+    yoy_tahun_ini: []
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 7, styles: { fontStyle: 'bold' } }])
+
+  let no = 1
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    formattedData.push([
+      { content: no++, styles: { halign: 'right' } },
+      regional,
+      formatNumber(summary.mom_bulan_kemarin),
+      formatNumber(summary.mom_bulan_ini),
+      formatPercentage(
+        !summary.mom_bulan_ini || !summary.mom_bulan_kemarin
+          ? '0%'
+          : ((summary.mom_bulan_kemarin - summary.mom_bulan_ini) / summary.mom_bulan_kemarin) * 100
+      ),
+      formatNumber(summary.yoy_tahun_kemarin),
+      formatNumber(summary.yoy_tahun_ini),
+      formatPercentage(
+        !summary.yoy_tahun_ini || !summary.yoy_tahun_kemarin
+          ? '0%'
+          : ((summary.yoy_tahun_kemarin - summary.yoy_tahun_ini) / summary.yoy_tahun_kemarin) * 100
+      )
+    ])
+
+    total.mom_bulan_kemarin.push(summary.mom_bulan_kemarin)
+    total.mom_bulan_ini.push(summary.mom_bulan_ini)
+    total.yoy_tahun_kemarin.push(summary.yoy_tahun_kemarin)
+    total.yoy_tahun_ini.push(summary.yoy_tahun_ini)
+  }
+
+  const totalMoMBulanKemarin =
+    total.mom_bulan_kemarin.reduce((a: number, b: number) => a + b, 0) /
+    total.mom_bulan_kemarin.length
+  const totalMoMBulanIni =
+    total.mom_bulan_ini.reduce((a: number, b: number) => a + b, 0) / total.mom_bulan_ini.length
+  const totalYoYTahunKemarin =
+    total.yoy_tahun_kemarin.reduce((a: number, b: number) => a + b, 0) /
+    total.yoy_tahun_kemarin.length
+  const totalYoYTahunIni =
+    total.yoy_tahun_ini.reduce((a: number, b: number) => a + b, 0) / total.yoy_tahun_ini.length
+
+  formattedData.push([
+    { content: 'RATA-RATA', colSpan: 2, styles: { fontStyle: 'bold' } },
+    formatNumber(totalMoMBulanKemarin),
+    formatNumber(totalMoMBulanIni),
+    formatPercentage(
+      !totalMoMBulanIni || !totalMoMBulanKemarin
+        ? '0%'
+        : ((totalMoMBulanKemarin - totalMoMBulanIni) / totalMoMBulanKemarin) * 100
+    ),
+    formatNumber(totalYoYTahunKemarin),
+    formatNumber(totalYoYTahunIni),
+    formatPercentage(
+      !totalYoYTahunIni || !totalYoYTahunKemarin
+        ? '0%'
+        : ((totalYoYTahunKemarin - totalYoYTahunIni) / totalYoYTahunKemarin) * 100
+    )
+  ])
+
+  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: 'No',
+          rowSpan: 3
+        },
+        {
+          content: 'Nama Unit',
+          rowSpan: 3
+        },
+        {
+          content: 'Jumlah RCT Kali Gangguan',
+          colSpan: 6
+        }
+      ],
+      [
+        {
+          content: 'MOM',
+          colSpan: 3
+        },
+        {
+          content: 'YOY',
+          colSpan: 3
+        }
+      ],
+      [
+        `${getMonthName(reportMeta.lastMonth)} ${reportMeta.lastYearMoM}`,
+        `${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%',
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.lastYear}`,
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%'
+      ]
+    ],
+    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:G1')
+  worksheet.mergeCells('A2:G2')
+  worksheet.mergeCells('A3:G3')
+  worksheet.mergeCells('A4:G4')
+  worksheet.mergeCells('A5:G5')
+  worksheet.mergeCells('A7:G7')
+  worksheet.mergeCells('A8:G8')
+
+  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/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.ts b/src/report/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.ts
new file mode 100644
index 0000000..5ba4c74
--- /dev/null
+++ b/src/report/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.ts
@@ -0,0 +1,275 @@
+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 = '(Monalisa) Rekapitulasi Keluhan Per Jenis Keluhan'
+const fontSize = 5
+
+const formatData = (rawData: any) => {
+  const formattedData: any = []
+
+  const total: any = {
+    jumlah: 0,
+    persen: []
+  }
+
+  rawData.forEach((data: any, index: any) => {
+    formattedData.push([
+      { content: ++index, styles: { halign: 'right' } },
+      data.id_jenis_keluhan,
+      data.nama_jenis_keluhan,
+      formatNumber(data.jumlah),
+      formatPercentage(data.persen)
+    ])
+
+    total.jumlah += data.jumlah
+    total.persen.push(data.persen)
+  })
+
+  formattedData.push([
+    {
+      content: 'TOTAL',
+      colSpan: 3
+    },
+    formatNumber(total.jumlah),
+    formatPercentage(total.persen.reduce((a: any, b: any) => a + b, 0) / total.persen.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: [['No', 'ID Gangguan', 'Jenis Gangguan', 'Jumlah', '%']],
+    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'
+        }
+      }
+
+      if (data.cell.text[0] === 'ENS') {
+        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:E1')
+  worksheet.mergeCells('A2:E2')
+  worksheet.mergeCells('A3:E3')
+  worksheet.mergeCells('A4:E4')
+  worksheet.mergeCells('A5:E5')
+  worksheet.mergeCells('A7:E7')
+  worksheet.mergeCells('A8:E8')
+
+  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/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.ts b/src/report/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.ts
new file mode 100644
index 0000000..0698704
--- /dev/null
+++ b/src/report/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.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'
+import { getMonthName } from '@/utils/texts'
+
+const reportName = 'Jumlah dan Durasi RPT RCT Keluhan'
+const fontSize = 5
+
+const formatData = (rawData: any) => {
+  const formattedData: any = []
+
+  const total: any = {
+    total_durasi_response_time_bulan_ini: 0,
+    count_durasi_response_time_bulan_ini: 0,
+    total_durasi_recovery_time_bulan_ini: 0,
+    count_durasi_recovery_time_bulan_ini: 0,
+    total_durasi_response_time_tahun_ini: 0,
+    count_durasi_response_time_tahun_ini: 0,
+    total_durasi_recovery_time_tahun_ini: 0,
+    count_durasi_recovery_time_tahun_ini: 0
+  }
+
+  rawData.forEach((data: any) => {
+    total.total_durasi_response_time_bulan_ini += data.total_durasi_response_time_bulan_ini
+    total.count_durasi_response_time_bulan_ini += data.count_durasi_response_time_bulan_ini
+    total.total_durasi_recovery_time_bulan_ini += data.total_durasi_recovery_time_bulan_ini
+    total.count_durasi_recovery_time_bulan_ini += data.count_durasi_recovery_time_bulan_ini
+    total.total_durasi_response_time_tahun_ini += data.total_durasi_response_time_tahun_ini
+    total.count_durasi_response_time_tahun_ini += data.count_durasi_response_time_tahun_ini
+    total.total_durasi_recovery_time_tahun_ini += data.total_durasi_recovery_time_tahun_ini
+    total.count_durasi_recovery_time_tahun_ini += data.count_durasi_recovery_time_tahun_ini
+  })
+
+  formattedData.push([
+    'NASIONAL',
+    formatNumber(total.total_durasi_response_time_bulan_ini),
+    formatNumber(total.count_durasi_response_time_bulan_ini),
+    formatNumber(
+      total.total_durasi_response_time_bulan_ini / total.count_durasi_response_time_bulan_ini
+    ),
+    formatNumber(total.total_durasi_recovery_time_bulan_ini),
+    formatNumber(total.count_durasi_recovery_time_bulan_ini),
+    formatPercentage(
+      total.total_durasi_recovery_time_bulan_ini / total.count_durasi_recovery_time_bulan_ini
+    ),
+    formatNumber(total.total_durasi_response_time_tahun_ini),
+    formatNumber(total.count_durasi_response_time_tahun_ini),
+    formatPercentage(
+      total.total_durasi_response_time_tahun_ini / total.count_durasi_response_time_tahun_ini
+    ),
+    formatNumber(total.total_durasi_recovery_time_tahun_ini),
+    formatNumber(total.count_durasi_recovery_time_tahun_ini),
+    formatPercentage(
+      total.total_durasi_recovery_time_tahun_ini / total.count_durasi_recovery_time_tahun_ini
+    )
+  ])
+
+  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: 4
+        },
+        {
+          content: 'Jumlah dan Durasi RPT & RCT Keluhan',
+          colSpan: 12
+        }
+      ],
+      [
+        {
+          content: getMonthName(reportMeta.currentMonth) + ' ' + reportMeta.currentYear,
+          colSpan: 6
+        },
+        {
+          content:
+            's.d' + ' ' + getMonthName(reportMeta.currentMonth) + ' ' + reportMeta.currentYear,
+          colSpan: 6
+        }
+      ],
+      [
+        'Total RPT',
+        'Jumlah Keluhan',
+        'RPT Keluhan',
+        'Total RCT',
+        'Jumlah Keluhan',
+        'RCT Keluhan',
+        'Total RPT',
+        'Jumlah Keluhan',
+        'RPT Keluhan',
+        'Total RCT',
+        'Jumlah Keluhan',
+        'RCT Keluhan'
+      ],
+      ['a', 'b', 'c=a/b', 'd', 'e', 'f=d/e', 'a', 'b', 'c=a/b', 'd', 'e', 'f=d/e']
+    ],
+    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:M1')
+  worksheet.mergeCells('A2:M2')
+  worksheet.mergeCells('A3:M3')
+  worksheet.mergeCells('A4:M4')
+  worksheet.mergeCells('A5:M5')
+  worksheet.mergeCells('A7:M7')
+  worksheet.mergeCells('A8:M8')
+
+  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/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.ts b/src/report/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.ts
new file mode 100644
index 0000000..29834e8
--- /dev/null
+++ b/src/report/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.ts
@@ -0,0 +1,373 @@
+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 { getMonthName } from '@/utils/texts'
+
+const reportName = 'Jumlah Kali Keluhan'
+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 = {
+          mom_bulan_kemarin: 0,
+          mom_bulan_ini: 0,
+          persen_mom: [],
+          yoy_tahun_kemarin: 0,
+          yoy_tahun_ini: 0,
+          persen_yoy: []
+        }
+      }
+
+      groupedData[regional].summary.mom_bulan_kemarin += item.mom_bulan_kemarin
+      groupedData[regional].summary.mom_bulan_ini += item.mom_bulan_ini
+      groupedData[regional].summary.persen_mom.push(item.persen_mom)
+      groupedData[regional].summary.yoy_tahun_kemarin += item.yoy_tahun_kemarin
+      groupedData[regional].summary.yoy_tahun_ini += item.yoy_tahun_ini
+      groupedData[regional].summary.persen_yoy.push(item.persen_yoy)
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    mom_bulan_kemarin: 0,
+    mom_bulan_ini: 0,
+    yoy_tahun_kemarin: 0,
+    yoy_tahun_ini: 0
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 7, styles: { fontStyle: 'bold' } }])
+
+  let no = 1
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    formattedData.push([
+      { content: no++, styles: { halign: 'right' } },
+      regional,
+      formatNumber(summary.mom_bulan_kemarin),
+      formatNumber(summary.mom_bulan_ini),
+      formatPercentage(
+        !summary.mom_bulan_ini || !summary.mom_bulan_kemarin
+          ? '0%'
+          : ((summary.mom_bulan_kemarin - summary.mom_bulan_ini) / summary.mom_bulan_kemarin) * 100
+      ),
+      formatNumber(summary.yoy_tahun_kemarin),
+      formatNumber(summary.yoy_tahun_ini),
+      formatPercentage(
+        !summary.yoy_tahun_ini || !summary.yoy_tahun_kemarin
+          ? '0%'
+          : ((summary.yoy_tahun_kemarin - summary.yoy_tahun_ini) / summary.yoy_tahun_kemarin) * 100
+      )
+    ])
+
+    total.mom_bulan_kemarin += summary.mom_bulan_kemarin
+    total.mom_bulan_ini += summary.mom_bulan_ini
+    total.yoy_tahun_kemarin += summary.yoy_tahun_kemarin
+    total.yoy_tahun_ini += summary.yoy_tahun_ini
+  }
+
+  formattedData.push([
+    { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+    formatNumber(total.mom_bulan_kemarin),
+    formatNumber(total.mom_bulan_ini),
+    formatPercentage(
+      !total.mom_bulan_ini || !total.mom_bulan_kemarin
+        ? '0%'
+        : ((total.mom_bulan_kemarin - total.mom_bulan_ini) / total.mom_bulan_kemarin) * 100
+    ),
+    formatNumber(total.yoy_tahun_kemarin),
+    formatNumber(total.yoy_tahun_ini),
+    formatPercentage(
+      !total.yoy_tahun_ini || !total.yoy_tahun_kemarin
+        ? '0%'
+        : ((total.yoy_tahun_kemarin - total.yoy_tahun_ini) / total.yoy_tahun_kemarin) * 100
+    )
+  ])
+
+  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: 'No',
+          rowSpan: 3
+        },
+        {
+          content: 'Nama Unit',
+          rowSpan: 3
+        },
+        {
+          content: 'Jumlah Kali Gangguan',
+          colSpan: 6
+        }
+      ],
+      [
+        {
+          content: 'MOM',
+          colSpan: 3
+        },
+        {
+          content: 'YOY',
+          colSpan: 3
+        }
+      ],
+      [
+        `${getMonthName(reportMeta.lastMonth)} ${reportMeta.lastYearMoM}`,
+        `${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%',
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.lastYear}`,
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%'
+      ]
+    ],
+    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:G1')
+  worksheet.mergeCells('A2:G2')
+  worksheet.mergeCells('A3:G3')
+  worksheet.mergeCells('A4:G4')
+  worksheet.mergeCells('A5:G5')
+  worksheet.mergeCells('A7:G7')
+  worksheet.mergeCells('A8:G8')
+
+  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/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.ts b/src/report/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.ts
new file mode 100644
index 0000000..a6325b9
--- /dev/null
+++ b/src/report/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.ts
@@ -0,0 +1,489 @@
+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'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+
+const reportName = 'Rekapitulasi Keluhan Belum Selesai'
+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 = {
+          jumlah_keluhan: 0,
+          jumlah_informasi: 0,
+          total: 0
+        }
+      }
+
+      groupedData[regional].summary.jumlah_keluhan += item.jumlah_keluhan
+      groupedData[regional].summary.jumlah_informasi += item.jumlah_informasi
+      groupedData[regional].summary.total += item.total
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    jumlah_keluhan: 0,
+    jumlah_informasi: 0,
+    total: 0
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 5, styles: { fontStyle: 'bold' } }])
+
+  let no = 1
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    formattedData.push([
+      { content: no++, styles: { halign: 'right' } },
+      regional,
+      formatNumber(summary.jumlah_keluhan),
+      formatNumber(summary.jumlah_informasi),
+      formatNumber(summary.total)
+    ])
+
+    total.jumlah_keluhan += summary.jumlah_keluhan
+    total.jumlah_informasi += summary.jumlah_informasi
+    total.total += summary.total
+  }
+
+  formattedData.push([
+    { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+    formatNumber(total.jumlah_keluhan),
+    formatNumber(total.jumlah_informasi),
+    formatNumber(total.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: 'No',
+          rowSpan: 2
+        },
+        {
+          content: 'Nama Unit',
+          rowSpan: 2
+        },
+        {
+          content: 'Tahun',
+          colSpan: 3
+        }
+      ],
+      ['Keluhan', 'Informasi', 'Total']
+    ],
+    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 Pelapor',
+        '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_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:E1')
+  worksheet.mergeCells('A2:E2')
+  worksheet.mergeCells('A3:E3')
+  worksheet.mergeCells('A4:E4')
+  worksheet.mergeCells('A5:E5')
+  worksheet.mergeCells('A7:E7')
+  worksheet.mergeCells('A8:E8')
+
+  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: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/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.ts b/src/report/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.ts
new file mode 100644
index 0000000..5fdd239
--- /dev/null
+++ b/src/report/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.ts
@@ -0,0 +1,372 @@
+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 { getMonthName } from '@/utils/texts'
+
+const reportName = 'Rekapitulasi Lapor Ulang Keluhan'
+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 = {
+          mom_bulan_kemarin: 0,
+          mom_bulan_ini: 0,
+          persen_mom: [],
+          yoy_tahun_kemarin: 0,
+          yoy_tahun_ini: 0,
+          persen_yoy: []
+        }
+      }
+
+      groupedData[regional].summary.mom_bulan_kemarin += item.mom_bulan_kemarin
+      groupedData[regional].summary.mom_bulan_ini += item.mom_bulan_ini
+      groupedData[regional].summary.persen_mom.push(item.persen_mom)
+      groupedData[regional].summary.yoy_tahun_kemarin += item.yoy_tahun_kemarin
+      groupedData[regional].summary.yoy_tahun_ini += item.yoy_tahun_ini
+      groupedData[regional].summary.persen_yoy.push(item.persen_yoy)
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    mom_bulan_kemarin: 0,
+    mom_bulan_ini: 0,
+    yoy_tahun_kemarin: 0,
+    yoy_tahun_ini: 0
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 7, styles: { fontStyle: 'bold' } }])
+
+  let no = 1
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    formattedData.push([
+      { content: no++, styles: { halign: 'right' } },
+      regional,
+      formatNumber(summary.mom_bulan_kemarin),
+      formatNumber(summary.mom_bulan_ini),
+      formatPercentage(
+        !summary.mom_bulan_ini || !summary.mom_bulan_kemarin
+          ? '0%'
+          : ((summary.mom_bulan_kemarin - summary.mom_bulan_ini) / summary.mom_bulan_kemarin) * 100
+      ),
+      formatNumber(summary.yoy_tahun_kemarin),
+      formatNumber(summary.yoy_tahun_ini),
+      formatPercentage(
+        !summary.yoy_tahun_ini || !summary.yoy_tahun_kemarin
+          ? '0%'
+          : ((summary.yoy_tahun_kemarin - summary.yoy_tahun_ini) / summary.yoy_tahun_kemarin) * 100
+      )
+    ])
+
+    total.mom_bulan_kemarin += summary.mom_bulan_kemarin
+    total.mom_bulan_ini += summary.mom_bulan_ini
+    total.yoy_tahun_kemarin += summary.yoy_tahun_kemarin
+    total.yoy_tahun_ini += summary.yoy_tahun_ini
+  }
+
+  formattedData.push([
+    { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+    formatNumber(total.mom_bulan_kemarin),
+    formatNumber(total.mom_bulan_ini),
+    formatPercentage(
+      !total.mom_bulan_ini || !total.mom_bulan_kemarin
+        ? '0%'
+        : ((total.mom_bulan_kemarin - total.mom_bulan_ini) / total.mom_bulan_kemarin) * 100
+    ),
+    formatNumber(total.yoy_tahun_kemarin),
+    formatNumber(total.yoy_tahun_ini),
+    formatPercentage(
+      !total.yoy_tahun_ini || !total.yoy_tahun_kemarin
+        ? '0%'
+        : ((total.yoy_tahun_kemarin - total.yoy_tahun_ini) / total.yoy_tahun_kemarin) * 100
+    )
+  ])
+
+  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: 'No',
+          rowSpan: 3
+        },
+        {
+          content: 'Nama Unit',
+          rowSpan: 3
+        },
+        {
+          content: 'Lapor Ulang Keluhan',
+          colSpan: 6
+        }
+      ],
+      [
+        {
+          content: 'MOM',
+          colSpan: 3
+        },
+        {
+          content: 'YOY',
+          colSpan: 3
+        }
+      ],
+      [
+        `${getMonthName(reportMeta.lastMonth)} ${reportMeta.lastYearMoM}`,
+        `${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%',
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.lastYear}`,
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%'
+      ]
+    ],
+    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:G1')
+  worksheet.mergeCells('A2:G2')
+  worksheet.mergeCells('A3:G3')
+  worksheet.mergeCells('A4:G4')
+  worksheet.mergeCells('A5:G5')
+  worksheet.mergeCells('A7:G7')
+  worksheet.mergeCells('A8:G8')
+
+  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/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.ts b/src/report/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.ts
new file mode 100644
index 0000000..5258b65
--- /dev/null
+++ b/src/report/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.ts
@@ -0,0 +1,383 @@
+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 { getMonthName } from '@/utils/texts'
+
+const reportName = 'Recovery Time (RCT) Keluhan'
+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 = {
+          mom_bulan_kemarin: 0,
+          mom_bulan_ini: 0,
+          persen_mom: [],
+          yoy_tahun_kemarin: 0,
+          yoy_tahun_ini: 0,
+          persen_yoy: []
+        }
+      }
+
+      groupedData[regional].summary.mom_bulan_kemarin += item.mom_bulan_kemarin
+      groupedData[regional].summary.mom_bulan_ini += item.mom_bulan_ini
+      groupedData[regional].summary.persen_mom.push(item.persen_mom)
+      groupedData[regional].summary.yoy_tahun_kemarin += item.yoy_tahun_kemarin
+      groupedData[regional].summary.yoy_tahun_ini += item.yoy_tahun_ini
+      groupedData[regional].summary.persen_yoy.push(item.persen_yoy)
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    mom_bulan_kemarin: [],
+    mom_bulan_ini: [],
+    yoy_tahun_kemarin: [],
+    yoy_tahun_ini: []
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 7, styles: { fontStyle: 'bold' } }])
+
+  let no = 1
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    formattedData.push([
+      { content: no++, styles: { halign: 'right' } },
+      regional,
+      formatNumber(summary.mom_bulan_kemarin),
+      formatNumber(summary.mom_bulan_ini),
+      formatPercentage(
+        !summary.mom_bulan_ini || !summary.mom_bulan_kemarin
+          ? '0%'
+          : ((summary.mom_bulan_kemarin - summary.mom_bulan_ini) / summary.mom_bulan_kemarin) * 100
+      ),
+      formatNumber(summary.yoy_tahun_kemarin),
+      formatNumber(summary.yoy_tahun_ini),
+      formatPercentage(
+        !summary.yoy_tahun_ini || !summary.yoy_tahun_kemarin
+          ? '0%'
+          : ((summary.yoy_tahun_kemarin - summary.yoy_tahun_ini) / summary.yoy_tahun_kemarin) * 100
+      )
+    ])
+
+    total.mom_bulan_kemarin.push(summary.mom_bulan_kemarin)
+    total.mom_bulan_ini.push(summary.mom_bulan_ini)
+    total.yoy_tahun_kemarin.push(summary.yoy_tahun_kemarin)
+    total.yoy_tahun_ini.push(summary.yoy_tahun_ini)
+  }
+
+  const totalMoMBulanKemarin =
+    total.mom_bulan_kemarin.reduce((a: number, b: number) => a + b, 0) /
+    total.mom_bulan_kemarin.length
+  const totalMoMBulanIni =
+    total.mom_bulan_ini.reduce((a: number, b: number) => a + b, 0) / total.mom_bulan_ini.length
+  const totalYoYTahunKemarin =
+    total.yoy_tahun_kemarin.reduce((a: number, b: number) => a + b, 0) /
+    total.yoy_tahun_kemarin.length
+  const totalYoYTahunIni =
+    total.yoy_tahun_ini.reduce((a: number, b: number) => a + b, 0) / total.yoy_tahun_ini.length
+
+  formattedData.push([
+    { content: 'RATA-RATA', colSpan: 2, styles: { fontStyle: 'bold' } },
+    formatNumber(totalMoMBulanKemarin),
+    formatNumber(totalMoMBulanIni),
+    formatPercentage(
+      !totalMoMBulanIni || !totalMoMBulanKemarin
+        ? '0%'
+        : ((totalMoMBulanKemarin - totalMoMBulanIni) / totalMoMBulanKemarin) * 100
+    ),
+    formatNumber(totalYoYTahunKemarin),
+    formatNumber(totalYoYTahunIni),
+    formatPercentage(
+      !totalYoYTahunIni || !totalYoYTahunKemarin
+        ? '0%'
+        : ((totalYoYTahunKemarin - totalYoYTahunIni) / totalYoYTahunKemarin) * 100
+    )
+  ])
+
+  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: 'No',
+          rowSpan: 3
+        },
+        {
+          content: 'Nama Unit',
+          rowSpan: 3
+        },
+        {
+          content: 'Jumlah RCT Kali Keluhan',
+          colSpan: 6
+        }
+      ],
+      [
+        {
+          content: 'MOM',
+          colSpan: 3
+        },
+        {
+          content: 'YOY',
+          colSpan: 3
+        }
+      ],
+      [
+        `${getMonthName(reportMeta.lastMonth)} ${reportMeta.lastYearMoM}`,
+        `${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%',
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.lastYear}`,
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%'
+      ]
+    ],
+    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:G1')
+  worksheet.mergeCells('A2:G2')
+  worksheet.mergeCells('A3:G3')
+  worksheet.mergeCells('A4:G4')
+  worksheet.mergeCells('A5:G5')
+  worksheet.mergeCells('A7:G7')
+  worksheet.mergeCells('A8:G8')
+
+  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/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.ts b/src/report/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.ts
new file mode 100644
index 0000000..65044a8
--- /dev/null
+++ b/src/report/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.ts
@@ -0,0 +1,383 @@
+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 { getMonthName } from '@/utils/texts'
+
+const reportName = 'Response Time (RPT) Keluhan'
+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 = {
+          mom_bulan_kemarin: 0,
+          mom_bulan_ini: 0,
+          persen_mom: [],
+          yoy_tahun_kemarin: 0,
+          yoy_tahun_ini: 0,
+          persen_yoy: []
+        }
+      }
+
+      groupedData[regional].summary.mom_bulan_kemarin += item.mom_bulan_kemarin
+      groupedData[regional].summary.mom_bulan_ini += item.mom_bulan_ini
+      groupedData[regional].summary.persen_mom.push(item.persen_mom)
+      groupedData[regional].summary.yoy_tahun_kemarin += item.yoy_tahun_kemarin
+      groupedData[regional].summary.yoy_tahun_ini += item.yoy_tahun_ini
+      groupedData[regional].summary.persen_yoy.push(item.persen_yoy)
+    })
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  const total: any = {
+    mom_bulan_kemarin: [],
+    mom_bulan_ini: [],
+    yoy_tahun_kemarin: [],
+    yoy_tahun_ini: []
+  }
+
+  formattedData.push([{ content: 'NASIONAL', colSpan: 7, styles: { fontStyle: 'bold' } }])
+
+  let no = 1
+  for (const regional in data) {
+    const summary = data[regional].summary
+
+    formattedData.push([
+      { content: no++, styles: { halign: 'right' } },
+      regional,
+      formatNumber(summary.mom_bulan_kemarin),
+      formatNumber(summary.mom_bulan_ini),
+      formatPercentage(
+        !summary.mom_bulan_ini || !summary.mom_bulan_kemarin
+          ? '0%'
+          : ((summary.mom_bulan_kemarin - summary.mom_bulan_ini) / summary.mom_bulan_kemarin) * 100
+      ),
+      formatNumber(summary.yoy_tahun_kemarin),
+      formatNumber(summary.yoy_tahun_ini),
+      formatPercentage(
+        !summary.yoy_tahun_ini || !summary.yoy_tahun_kemarin
+          ? '0%'
+          : ((summary.yoy_tahun_kemarin - summary.yoy_tahun_ini) / summary.yoy_tahun_kemarin) * 100
+      )
+    ])
+
+    total.mom_bulan_kemarin.push(summary.mom_bulan_kemarin)
+    total.mom_bulan_ini.push(summary.mom_bulan_ini)
+    total.yoy_tahun_kemarin.push(summary.yoy_tahun_kemarin)
+    total.yoy_tahun_ini.push(summary.yoy_tahun_ini)
+  }
+
+  const totalMoMBulanKemarin =
+    total.mom_bulan_kemarin.reduce((a: number, b: number) => a + b, 0) /
+    total.mom_bulan_kemarin.length
+  const totalMoMBulanIni =
+    total.mom_bulan_ini.reduce((a: number, b: number) => a + b, 0) / total.mom_bulan_ini.length
+  const totalYoYTahunKemarin =
+    total.yoy_tahun_kemarin.reduce((a: number, b: number) => a + b, 0) /
+    total.yoy_tahun_kemarin.length
+  const totalYoYTahunIni =
+    total.yoy_tahun_ini.reduce((a: number, b: number) => a + b, 0) / total.yoy_tahun_ini.length
+
+  formattedData.push([
+    { content: 'RATA-RATA', colSpan: 2, styles: { fontStyle: 'bold' } },
+    formatNumber(totalMoMBulanKemarin),
+    formatNumber(totalMoMBulanIni),
+    formatPercentage(
+      !totalMoMBulanIni || !totalMoMBulanKemarin
+        ? '0%'
+        : ((totalMoMBulanKemarin - totalMoMBulanIni) / totalMoMBulanKemarin) * 100
+    ),
+    formatNumber(totalYoYTahunKemarin),
+    formatNumber(totalYoYTahunIni),
+    formatPercentage(
+      !totalYoYTahunIni || !totalYoYTahunKemarin
+        ? '0%'
+        : ((totalYoYTahunKemarin - totalYoYTahunIni) / totalYoYTahunKemarin) * 100
+    )
+  ])
+
+  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: 'No',
+          rowSpan: 3
+        },
+        {
+          content: 'Nama Unit',
+          rowSpan: 3
+        },
+        {
+          content: 'Jumlah RPT Kali Keluhan',
+          colSpan: 6
+        }
+      ],
+      [
+        {
+          content: 'MOM',
+          colSpan: 3
+        },
+        {
+          content: 'YOY',
+          colSpan: 3
+        }
+      ],
+      [
+        `${getMonthName(reportMeta.lastMonth)} ${reportMeta.lastYearMoM}`,
+        `${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%',
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.lastYear}`,
+        `s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
+        '%'
+      ]
+    ],
+    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:G1')
+  worksheet.mergeCells('A2:G2')
+  worksheet.mergeCells('A3:G3')
+  worksheet.mergeCells('A4:G4')
+  worksheet.mergeCells('A5:G5')
+  worksheet.mergeCells('A7:G7')
+  worksheet.mergeCells('A8:G8')
+
+  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_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 }
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 666698b..bd06e69 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -862,6 +862,71 @@ export const queries = {
           }
         }
       `,
+      gangguanRatingDetail: gql`
+        query detailRekapitulasiGangguanBerdasarkanRating(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $idRegu: Int!
+          $namaRegional: String!
+          $isSelesai: Int
+          $isNonRating: Int
+          $nilaiRating: Int
+        ) {
+          detailRekapitulasiGangguanBerdasarkanRating(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            idRegu: $idRegu
+            namaRegional: $namaRegional
+            isSelesai: $isSelesai
+            isNonRating: $isNonRating
+            nilaiRating: $nilaiRating
+          ) {
+            alamat_pelapor
+            diselesaikan_oleh
+            dispatch_oleh
+            durasi_dispatch_time
+            durasi_recovery_time
+            durasi_response_time
+            id
+            idpel_nometer
+            id_posko
+            id_uid
+            id_ulp
+            id_up3
+            is_marking
+            is_non_rating
+            is_selesai
+            jarak_closing
+            jenis_gangguan
+            keterangan_pelapor
+            kode_gangguan
+            media
+            nama_pelapor
+            nama_posko
+            nama_regional
+            nama_uid
+            nama_ulp
+            nama_up3
+            nilai_rating
+            no_laporan
+            no_telp_pelapor
+            pembuat_laporan
+            penyebab
+            referensi_marking
+            status_akhir
+            tindakan
+            waktu_lapor
+            waktu_recovery
+            waktu_response
+          }
+        }
+      `,
       gangguanRatingPerPosko: gql`
         query rekapitulasiGangguanRatingPerPosko(
           $dateFrom: Date!
@@ -1090,6 +1155,10 @@ export const queries = {
           $posko: Int!
           $idUid: Int!
           $idUp3: Int!
+          $is_transaksi_individual: Int!
+          $is_cleansing_transaksi_tm: Int!
+          $is_koreksi_transaksi_tm: Int!
+          $is_koreksi_gangguan_dan_anev: Int!
         ) {
           detailGangguanKoreksiTransaksiIndividu(
             dateFrom: $dateFrom
@@ -1097,6 +1166,10 @@ export const queries = {
             posko: $posko
             idUid: $idUid
             idUp3: $idUp3
+            is_transaksi_individual: $is_transaksi_individual
+            is_cleansing_transaksi_tm: $is_cleansing_transaksi_tm
+            is_koreksi_transaksi_tm: $is_koreksi_transaksi_tm
+            is_koreksi_gangguan_dan_anev: $is_koreksi_gangguan_dan_anev
           ) {
             id
             no_laporan
@@ -1550,6 +1623,9 @@ export const queries = {
             max_durasi_recovery
             total_dibawah_sla_recovery
             total_diatas_sla_recovery
+            count_durasi_dispatch
+            count_durasi_response
+            count_durasi_recovery
           }
         }
       `,
@@ -1653,16 +1729,16 @@ export const queries = {
           $dateTo: Date!
           $idUid: Int!
           $idUp3: Int!
-          $idPoskoLama: Int!
           $idPoskoBaru: Int!
+          $idPoskoLama: Int!
         ) {
           detailGangguanAlihPosko(
             dateFrom: $dateFrom
             dateTo: $dateTo
             idUid: $idUid
             idUp3: $idUp3
-            idPoskoLama: $idPoskoLama
             idPoskoBaru: $idPoskoBaru
+            idPoskoLama: $idPoskoLama
           ) {
             id
             nama_regional
@@ -1961,6 +2037,116 @@ export const queries = {
   monalisa: {
     gangguan: {
       rekap: {
+        dispatchingTimeGangguanDetailYoy: gql`
+          query detailMonalisaDispatchingTimeGangguanYoY(
+            $bulan: Int!
+            $tahun: Int!
+            $idUlp: Int!
+            $idUid: Int!
+            $idUp3: Int!
+          ) {
+            detailMonalisaDispatchingTimeGangguanYoY(
+              bulan: $bulan
+              tahun: $tahun
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
+            ) {
+              id
+              id
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              id_posko
+              nama_posko
+              no_laporan
+              pembuat_laporan
+              waktu_lapor
+              waktu_dispatch
+              waktu_response
+              waktu_recovery
+              durasi_dispatch_time
+              durasi_response_time
+              durasi_recovery_time
+              status_akhir
+              is_marking
+              referensi_marking
+              idpel_nometer
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              media
+              jarak_closing
+              dispatch_oleh
+              diselesaikan_oleh
+              penyebab
+              tindakan
+              kode_gangguan
+              jenis_gangguan
+              nilai_rating
+            }
+          }
+        `,
+        dispatchingTimeGangguanDetailMom: gql`
+          query detailMonalisaDispatchingTimeGangguanMoM(
+            $bulan: Int!
+            $tahun: Int!
+            $idUlp: Int!
+            $idUid: Int!
+            $idUp3: Int!
+          ) {
+            detailMonalisaDispatchingTimeGangguanMoM(
+              bulan: $bulan
+              tahun: $tahun
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
+            ) {
+              id
+              id
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              id_posko
+              nama_posko
+              no_laporan
+              pembuat_laporan
+              waktu_lapor
+              waktu_dispatch
+              waktu_response
+              waktu_recovery
+              durasi_dispatch_time
+              durasi_response_time
+              durasi_recovery_time
+              status_akhir
+              is_marking
+              referensi_marking
+              idpel_nometer
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              media
+              jarak_closing
+              dispatch_oleh
+              diselesaikan_oleh
+              penyebab
+              tindakan
+              kode_gangguan
+              jenis_gangguan
+              nilai_rating
+            }
+          }
+        `,
         dispatchingTimeGangguan: gql`
           query monalisaDispatchingTimeGangguan(
             $namaRegional: String
@@ -2497,6 +2683,47 @@ export const queries = {
             }
           }
         `,
+        keluhanBelumSelesaiDetail: gql`
+          query detailMonalisaKeluhanBelumSelesai(
+            $bulan: Int!
+            $tahun: Int!
+            $namaRegional: String!
+            $idUlp: Int!
+            $idUid: Int!
+            $idUp3: Int!
+          ) {
+            detailMonalisaKeluhanBelumSelesai(
+              bulan: $bulan
+              tahun: $tahun
+              namaRegional: $namaRegional
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
+            ) {
+              id
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              id_pelanggan
+              nama_pelanggan
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              penyebab
+              kode_gangguan
+              nama_subissuetype
+              durasi_response_time
+              durasi_recovery_time
+              no_laporan
+              waktu_lapor
+            }
+          }
+        `,
         keluhanBelumSelesai: gql`
           query monalisaRekapitulasiKeluhanBelumSelesai(
             $bulan: Int!
@@ -3306,22 +3533,24 @@ export const queries = {
           }
         }
       `,
-      petugasBerulangDetail: gql`
-        query detailAnomaliPenangananPengaduanGangguanPetugasBerulang(
+      petugasBerulangDetailSub: gql`
+        query subDetailAnomaliPenangananPengaduanGangguanPetugasBerulang(
           $namaRegional: String!
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
           $media: String
           $isMarking: Int!
+          $idPetugas: Int!
         ) {
-          detailAnomaliPenangananPengaduanGangguanPetugasBerulang(
+          subDetailAnomaliPenangananPengaduanGangguanPetugasBerulang(
             namaRegional: $namaRegional
             idUlp: $idUlp
             idUid: $idUid
             idUp3: $idUp3
             media: $media
             isMarking: $isMarking
+            idPetugas: $idPetugas
           ) {
             id
             nama_regional
@@ -3357,6 +3586,51 @@ export const queries = {
           }
         }
       `,
+      petugasBerulangDetail: gql`
+        query detailAnomaliPenangananPengaduanGangguanPetugasBerulang(
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String
+          $isMarking: Int!
+        ) {
+          detailAnomaliPenangananPengaduanGangguanPetugasBerulang(
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+            isMarking: $isMarking
+          ) {
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            id_posko
+            nama_posko
+            nama_petugas
+            nama_unit
+            wo_cc123
+            wo_pln_mobile
+            wo_loket
+            wo_total
+            wo_lainnya
+            anomali_pln_mobile_marking
+            anomali_pln_mobile_non_marking
+            anomali_cc123_marking
+            anomali_cc123_non_marking
+            total_anomali_cc123
+            total_anomali_pln_mobile
+            total_anomali
+            persen_anomali_cc123
+            persen_anomali_pln_mobile
+            persen_anomali
+          }
+        }
+      `,
       petugasBerulang: gql`
         query anomaliPenangananPengaduanGangguanPetugasBerulang(
           $dateFrom: Date!
@@ -3396,8 +3670,8 @@ export const queries = {
           }
         }
       `,
-      petugasRatingNegatifDetail: gql`
-        query detailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif(
+      petugasRatingNegatifDetailSub: gql`
+        query subDetailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif(
           $dateFrom: Date!
           $dateTo: Date!
           $namaRegional: String!
@@ -3406,8 +3680,9 @@ export const queries = {
           $idUp3: Int!
           $media: String
           $isMarking: Int!
+          $idPetugas: Int!
         ) {
-          detailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif(
+          subDetailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif(
             dateFrom: $dateFrom
             dateTo: $dateTo
             namaRegional: $namaRegional
@@ -3416,6 +3691,7 @@ export const queries = {
             idUp3: $idUp3
             media: $media
             isMarking: $isMarking
+            idPetugas: $idPetugas
           ) {
             id
             nama_regional
@@ -3451,6 +3727,51 @@ export const queries = {
           }
         }
       `,
+      petugasRatingNegatifDetail: gql`
+        query detailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif(
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String
+          $isMarking: Int!
+        ) {
+          detailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif(
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+            isMarking: $isMarking
+          ) {
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            id_posko
+            nama_posko
+            nama_petugas
+            nama_unit
+            wo_cc123
+            wo_pln_mobile
+            wo_loket
+            wo_total
+            wo_lainnya
+            anomali_pln_mobile_marking
+            anomali_pln_mobile_non_marking
+            anomali_cc123_marking
+            anomali_cc123_non_marking
+            total_anomali_cc123
+            total_anomali_pln_mobile
+            total_anomali
+            persen_anomali_cc123
+            persen_anomali_pln_mobile
+            persen_anomali
+          }
+        }
+      `,
       petugasRatingNegatif: gql`
         query anomaliPenangananPengaduanGangguanPetugasRatingNegatif(
           $dateFrom: Date!
@@ -3490,8 +3811,8 @@ export const queries = {
           }
         }
       `,
-      petugasSkipStepDetail: gql`
-        query detailAnomaliPenangananPengaduanGangguanPetugasSkipStep(
+      petugasSkipStepDetailSub: gql`
+        query subDetailAnomaliPenangananPengaduanGangguanPetugasSkipStep(
           $dateFrom: Date!
           $dateTo: Date!
           $namaRegional: String!
@@ -3500,8 +3821,9 @@ export const queries = {
           $idUp3: Int!
           $media: String
           $isMarking: Int!
+          $idPetugas: Int!
         ) {
-          detailAnomaliPenangananPengaduanGangguanPetugasSkipStep(
+          subDetailAnomaliPenangananPengaduanGangguanPetugasSkipStep(
             dateFrom: $dateFrom
             dateTo: $dateTo
             namaRegional: $namaRegional
@@ -3510,6 +3832,7 @@ export const queries = {
             idUp3: $idUp3
             media: $media
             isMarking: $isMarking
+            idPetugas: $idPetugas
           ) {
             id
             nama_regional
@@ -3545,6 +3868,51 @@ export const queries = {
           }
         }
       `,
+      petugasSkipStepDetail: gql`
+        query detailAnomaliPenangananPengaduanGangguanPetugasSkipStep(
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String
+          $isMarking: Int!
+        ) {
+          detailAnomaliPenangananPengaduanGangguanPetugasSkipStep(
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+            isMarking: $isMarking
+          ) {
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            id_posko
+            nama_posko
+            nama_petugas
+            nama_unit
+            wo_cc123
+            wo_pln_mobile
+            wo_loket
+            wo_total
+            wo_lainnya
+            anomali_pln_mobile_marking
+            anomali_pln_mobile_non_marking
+            anomali_cc123_marking
+            anomali_cc123_non_marking
+            total_anomali_cc123
+            total_anomali_pln_mobile
+            total_anomali
+            persen_anomali_cc123
+            persen_anomali_pln_mobile
+            persen_anomali
+          }
+        }
+      `,
       petugasSkipStep: gql`
         query anomaliPenangananPengaduanGangguanPetugasSkipStep(
           $dateFrom: Date!
@@ -3872,6 +4240,70 @@ export const queries = {
           history_p2lt
         }
       }
+    `,
+    laporanCttKwhPeriksaDetail: gql`
+      query detailLaporanCttKwhPeriksa(
+        $dateFrom: Date!
+        $dateTo: Date!
+        $tipeWo: Int!
+        $rekomendasiSistem: Int!
+        $isDlpd: Int!
+        $idUlp: Int!
+        $idPosko: Int!
+        $idUid: Int!
+        $idUp3: Int!
+        $namaRegional: String
+        $isHistoriP2tl: Int!
+      ) {
+        detailLaporanCttKwhPeriksa(
+          dateFrom: $dateFrom
+          dateTo: $dateTo
+          tipeWo: $tipeWo
+          rekomendasiSistem: $rekomendasiSistem
+          isDlpd: $isDlpd
+          idUlp: $idUlp
+          idPosko: $idPosko
+          idUid: $idUid
+          idUp3: $idUp3
+          namaRegional: $namaRegional
+          isHistoriP2tl: $isHistoriP2tl
+        ) {
+          id
+          nama_regional
+          id_uid
+          nama_uid
+          id_up3
+          nama_up3
+          id_ulp
+          nama_ulp
+          id_pelanggan
+          nomormeter
+          no_telp_pelapor
+          nama_pelapor
+          alamat_pelapor
+          media
+          no_laporan
+          r08
+          r70
+          r71
+          r41
+          r44
+          r45
+          r46
+          r37
+          r47
+          jenis_dlpd
+          keterangan_dlpd
+          blth_dlpd
+          no_agenda_p2tl
+          tgl_mohon_p2tl
+          tgl_sah_p2tl
+          rekomendasi_sistem
+          waktu_lapor
+          petugas_regu
+          user_vcc
+        }
+      }
     `
   },
   material: {
@@ -3880,27 +4312,29 @@ export const queries = {
         query DaftardaftarGangguanDanMaterialDipakai(
           $dateFrom: Date!
           $dateTo: Date!
-          $posko: String
+          $idPosko: Int
           $idUid: Int
           $idUp3: Int
         ) {
           daftarGangguanDanMaterialDipakai(
             dateFrom: $dateFrom
             dateTo: $dateTo
-            distribusi: $idUid
-            area: $idUp3
-            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            idPosko: $idPosko
           ) {
-            isi_laporan
-            nama_material
-            nama_pelanggan
-            nomor_gangguan
-            penyebab_gangguan
+            id
+            no_laporan
+            nama_pelapor
+            keterangan_pelapor
+            penyebab
+            waktu_lapor
+            waktu_recovery
             regu
-            satuan
-            sumber
-            volume
-            waktu_padam
+            media
+            nama_material
+            satuan_material
+            volume_material
           }
         }
       `
@@ -3910,18 +4344,19 @@ export const queries = {
         query DaftarrekapitulasiPemakaianMaterial(
           $dateFrom: Date!
           $dateTo: Date!
-          $posko: String
+          $idPosko: Int
           $idUid: Int
           $idUp3: Int
         ) {
           rekapitulasiPemakaianMaterial(
             dateFrom: $dateFrom
             dateTo: $dateTo
-            distribusi: $idUid
-            area: $idUp3
-            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            idPosko: $idPosko
           ) {
-            kode_material
+            id
+            kode
             nama_material
             satuan
             sumber_material
@@ -3956,9 +4391,52 @@ export const queries = {
             tgl7
             tgl8
             tgl9
+            total
           }
         }
       `
     }
+  },
+  transaksi: {
+    transaksiAPKT: gql`
+      query transaksiApkt(
+        $dateFrom: Date!
+        $dateTo: Date!
+        $idPosko: Int!
+        $idUid: Int!
+        $idUp3: Int!
+        $tipe_sla: Int!
+        $operator_sla: String!
+        $is_sla: Int!
+        $status_akhir: String!
+        $no_laporan: String!
+      ) {
+        transaksiApkt(
+          dateFrom: $dateFrom
+          dateTo: $dateTo
+          idPosko: $idPosko
+          idUid: $idUid
+          idUp3: $idUp3
+          tipe_sla: $tipe_sla
+          operator_sla: $operator_sla
+          is_sla: $is_sla
+          status_akhir: $status_akhir
+          no_laporan: $no_laporan
+        ) {
+          no_laporan
+          issuetype
+          nama_pelapor
+          nama_posko
+          no_telp_pelapor
+          penyebab
+          keterangan_pelapor
+          waktu_lapor
+          jumlah_lapor
+          tipe_sla
+          operator_sla
+          is_sla
+        }
+      }
+    `
   }
 }