From 358e99b9680c7b63d91400fc151ef702b015a461 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Thu, 28 Mar 2024 12:00:56 +0700
Subject: [PATCH] feat: create export pdf in rekapitulasi gangguan koreksi
 transaksi individual

---
 .../Pages/Gangguan/Rekap/RGangguan_KTI.vue    | 1065 +++++++++++++----
 src/report/Gangguan/Rekap/RGangguan_KTI.ts    |  279 +++++
 2 files changed, 1124 insertions(+), 220 deletions(-)
 create mode 100644 src/report/Gangguan/Rekap/RGangguan_KTI.ts

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index ab0f3c2..b42274e 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@@ -1,82 +1,281 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
+  <Filters
+    @reset-form="data = []"
+    @run-search="() => filterData(filters)"
+    :report-button="true"
+    class="mb-4"
+  >
     <Type18 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
-    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
-      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+    <DxDataGrid
+      ref="dataGridRef"
+      :allow-column-reordering="true"
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onDataSelectionChanged"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        :show-pane="showPane" :shading="shading" v-model:visible="loadingData" :enabled="true" />
+      <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-model:visible="loadingData"
+        :enabled="true"
+      />
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="200" alignment="center" data-field="nama_ulp" caption="Nama Unit"
-        css-class="custom-table-column" cell-template="formatText" />
-      <DxColumn alignment="center" data-field="" caption="Seluruh Unit" css-class="custom-table-column"
-        cell-template="formatText" name="AllUnitGroup" :group-index="0" />
-      <DxColumn alignment="center" data-field="nama_regional" caption="Regional" css-class="custom-table-column"
-        cell-template="formatText" name="RegionalGroup" :group-index="1" />
-      <DxColumn alignment="center" data-field="nama_uid" caption="UID" css-class="custom-table-column"
-        cell-template="formatText" name="UIDGroup" :group-index="2" />
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        alignment="center"
+        data-field=""
+        caption="Seluruh Unit"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        name="AllUnitGroup"
+        :group-index="0"
+      />
+      <DxColumn
+        alignment="center"
+        data-field="nama_regional"
+        caption="Regional"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        name="RegionalGroup"
+        :group-index="1"
+      />
+      <DxColumn
+        alignment="center"
+        data-field="nama_uid"
+        caption="UID"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        name="UIDGroup"
+        :group-index="2"
+      />
       <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
-        <DxColumn alignment="center" data-field="month1" data-type="number" caption="Januari"
-          css-class="custom-table-column" cell-template="formatNumber" />
-        <DxColumn alignment="center" data-field="month2" data-type="number" caption="Februari"
-          css-class="custom-table-column" cell-template="formatNumber" />
-        <DxColumn alignment="center" data-field="month3" data-type="number" caption="Maret"
-          css-class="custom-table-column" cell-template="formatNumber" />
-        <DxColumn alignment="center" data-field="month4" data-type="number" caption="April"
-          css-class="custom-table-column" cell-template="formatNumber" />
-        <DxColumn alignment="center" data-field="month5" data-type="number" caption="Mei"
-          css-class="custom-table-column" cell-template="formatNumber" />
-        <DxColumn alignment="center" data-field="month6" data-type="number" caption="Juni"
-          css-class="custom-table-column" cell-template="formatNumber" />
-        <DxColumn alignment="center" data-field="month7" data-type="number" caption="Juli"
-          css-class="custom-table-column" cell-template="formatNumber" />
-        <DxColumn alignment="center" data-field="month8" data-type="number" caption="Agustus"
-          css-class="custom-table-column" cell-template="formatNumber" />
-        <DxColumn alignment="center" data-field="month9" data-type="number" caption="September"
-          css-class="custom-table-column" cell-template="formatNumber" />
-        <DxColumn alignment="center" data-field="month10" data-type="number" caption="Oktober"
-          css-class="custom-table-column" cell-template="formatNumber" />
-        <DxColumn alignment="center" data-field="month11" data-type="number" caption="November"
-          css-class="custom-table-column" cell-template="formatNumber" />
-        <DxColumn alignment="center" data-field="month12" data-type="number" caption="Desember"
-          css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn
+          alignment="center"
+          data-field="month1"
+          data-type="number"
+          caption="Januari"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month2"
+          data-type="number"
+          caption="Februari"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month3"
+          data-type="number"
+          caption="Maret"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month4"
+          data-type="number"
+          caption="April"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month5"
+          data-type="number"
+          caption="Mei"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month6"
+          data-type="number"
+          caption="Juni"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month7"
+          data-type="number"
+          caption="Juli"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month8"
+          data-type="number"
+          caption="Agustus"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month9"
+          data-type="number"
+          caption="September"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month10"
+          data-type="number"
+          caption="Oktober"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month11"
+          data-type="number"
+          caption="November"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month12"
+          data-type="number"
+          caption="Desember"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
       </DxColumn>
       <DxSummary>
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="month1" 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="month2" 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="month3" 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="month4" 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="month5" 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="month6" 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="month7" 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="month8" 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="month9" 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="month10" 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="month11" 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="month12" 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="month1"
+          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="month2"
+          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="month3"
+          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="month4"
+          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="month5"
+          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="month6"
+          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="month7"
+          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="month8"
+          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="month9"
+          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="month10"
+          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="month11"
+          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="month12"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
       </DxSummary>
 
       <template #formatText="{ data }">
@@ -94,12 +293,12 @@
       <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer">
           {{
-    isNumber(data.text)
-      ? data.column.caption == '%'
-        ? formatPercentage(data.text)
-        : formatNumber(data.text)
-      : data.text
-  }}
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
         </p>
       </template>
 
@@ -111,114 +310,416 @@
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Koreksi Transaksi Individual" @on-close="closeDialog"
-    :full-width="true">
+  <DetailDialog
+    :open="dialogDetail"
+    title="Detail Rekapitulasi Koreksi Transaksi Individual"
+    @on-close="closeDialog"
+    :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="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+        <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="onExporting"
+          :allow-column-resizing="true"
+          column-resizing-mode="widget"
+        >
           <DxSelection mode="single" />
           <DxPaging :page-size="20" :enabled="true" />
-          <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
-            :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-          <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-            :show-pane="showPane" :shading="shading" v-model:visible="loadingSubData" :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"
+          />
+          <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
+            :position="position"
+            :show-indicator="showIndicator"
+            :show-pane="showPane"
+            :shading="shading"
+            v-model:visible="loadingSubData"
+            :enabled="true"
+          />
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-          <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+          <DxExport
+            :enabled="true"
+            :formats="['pdf', 'xlsx', 'document']"
+            :allow-export-selected-data="false"
+          />
 
-          <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number" caption="No"
-            cell-template="formatNumber" />
-          <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="tgl_lapor" caption="Tgl Lapor"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="tgl_lapor_sblm" caption="Tgl Lapor Sebelum"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="tgl_lapor_sdh" caption="Tgl Lapor Koreksi"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="tgl_penugasan_sblm" caption="Tgl Penugasan Sebelum"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="tgl_penugasan_sdh" caption="Tgl Penugasan Koreksi"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="tgl_perjalanan_sblm" caption="Tgl Perjalanan Sebelum"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="tgl_perjalanan_sdh" caption="Tgl Perjalanan Koreksi"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="tgl_pengerjaan_sblm" caption="Tgl Pengerjaan Sebelum"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="tgl_pengerjaan_sdh" caption="Tgl Pengerjaan Koreksi"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="tgl_nyala_sementara_sblm"
-            caption="Tgl Nyala Sementara Sebelum" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="tgl_nyala_sementara_sdh"
-            caption="Tgl Nyala Sementara Koreksi" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="tgl_nyala_sblm" caption="Tgl Nyala Sebelum"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="tgl_nyala_sdh" caption="Tgl Nyala Koreksi"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="tgl_selesai_sblm" caption="Tgl Selesai Sebelum"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="tgl_selesai_sdh" caption="Tgl Selesai Koreksi"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="durasi_response_time_sblm"
-            caption="Durasi Respon Time Sebelum" css-class="custom-table-column" cell-template="formatTime" />
-          <DxColumn :width="150" alignment="center" data-field="durasi_response_time_sdh"
-            caption="Durasi Respon Time Koreksi" css-class="custom-table-column" cell-template="formatTime" />
-          <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time_sdh"
-            caption="Durasi Recovery Time Koreksi" css-class="custom-table-column" cell-template="formatTime" />
-          <DxColumn :width="150" alignment="center" data-field="kelompok_sblm" caption="Kelompok ID Sebelum"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="kelompok_sdh" caption="Kelompok ID Koreksi"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="sub_kelompok_sblm" caption="Sub Kelompok ID Sebelum"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="sub_kelompok_sdh" caption="Sub Kelopok ID Koreksi"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="fasilitas_id_sblm" caption="Fasilitas ID Sebelum"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="fasilitas_id_sdh" caption="Fasilitas ID Koreksi"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="sub_fasilitas_id_sblm"
-            caption="Sub Fasilitas ID Sebelum" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="sub_fasilitas_id_sdh" caption="Sub Fasilitas ID Koreksi"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="equipment_id_sblm" caption="Equipment ID Sebelum"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="equipment_id_sdh" caption="Equipment ID Koreksi"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="event_damage_sblm" caption="Event Damage ID Sebelum"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="event_damage_sdh" caption="Event Damage ID Koreksi"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="cause_id_sblm" caption="Cause ID Sebelum"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="cause_id_sdh" caption="Cause ID Koreksi"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="cause_group_id_sblm" caption="Cause Group ID Sebelum"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="cause_group_id_sdh" caption="Cause Group ID Koreksi"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="weather_id_sblm" caption="Weather ID Sebelum"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="weather_id_sdh" caption="Weather ID Koreksi"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="grup_koreksi" caption="Group Koreksi"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="alasan" caption="ALASAN" 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="keterangan_pelapor" caption="Keterangan Pelapor"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
-            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" />
-          <DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab"
-            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn
+            css-class="custom-table-column"
+            :width="50"
+            alignment="center"
+            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            data-type="number"
+            caption="No"
+            cell-template="formatNumber"
+          />
+          <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="tgl_lapor"
+            caption="Tgl Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tgl_lapor_sblm"
+            caption="Tgl Lapor Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tgl_lapor_sdh"
+            caption="Tgl Lapor Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tgl_penugasan_sblm"
+            caption="Tgl Penugasan Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tgl_penugasan_sdh"
+            caption="Tgl Penugasan Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tgl_perjalanan_sblm"
+            caption="Tgl Perjalanan Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tgl_perjalanan_sdh"
+            caption="Tgl Perjalanan Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tgl_pengerjaan_sblm"
+            caption="Tgl Pengerjaan Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tgl_pengerjaan_sdh"
+            caption="Tgl Pengerjaan Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tgl_nyala_sementara_sblm"
+            caption="Tgl Nyala Sementara Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tgl_nyala_sementara_sdh"
+            caption="Tgl Nyala Sementara Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tgl_nyala_sblm"
+            caption="Tgl Nyala Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tgl_nyala_sdh"
+            caption="Tgl Nyala Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tgl_selesai_sblm"
+            caption="Tgl Selesai Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tgl_selesai_sdh"
+            caption="Tgl Selesai Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_response_time_sblm"
+            caption="Durasi Respon Time Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_response_time_sdh"
+            caption="Durasi Respon Time Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_recovery_time_sdh"
+            caption="Durasi Recovery Time Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="kelompok_sblm"
+            caption="Kelompok ID Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="kelompok_sdh"
+            caption="Kelompok ID Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="sub_kelompok_sblm"
+            caption="Sub Kelompok ID Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="sub_kelompok_sdh"
+            caption="Sub Kelopok ID Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="fasilitas_id_sblm"
+            caption="Fasilitas ID Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="fasilitas_id_sdh"
+            caption="Fasilitas ID Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="sub_fasilitas_id_sblm"
+            caption="Sub Fasilitas ID Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="sub_fasilitas_id_sdh"
+            caption="Sub Fasilitas ID Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="equipment_id_sblm"
+            caption="Equipment ID Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="equipment_id_sdh"
+            caption="Equipment ID Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="event_damage_sblm"
+            caption="Event Damage ID Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="event_damage_sdh"
+            caption="Event Damage ID Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="cause_id_sblm"
+            caption="Cause ID Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="cause_id_sdh"
+            caption="Cause ID Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="cause_group_id_sblm"
+            caption="Cause Group ID Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="cause_group_id_sdh"
+            caption="Cause Group ID Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="weather_id_sblm"
+            caption="Weather ID Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="weather_id_sdh"
+            caption="Weather ID Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="grup_koreksi"
+            caption="Group Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="alasan"
+            caption="ALASAN"
+            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="keterangan_pelapor"
+            caption="Keterangan Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_posko"
+            caption="Posko"
+            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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="penyebab"
+            caption="Penyebab"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
 
           <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
@@ -254,7 +755,11 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor Sebelum:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.tgl_lapor_sblm" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_lapor_sblm"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -264,47 +769,83 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Penugasan Sebelum:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.tgl_penugasan_sblm" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_penugasan_sblm"
+            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 Penugasan Koreksi:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.tgl_penugasan_sdh" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_penugasan_sdh"
+            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 Perjalanan Sebelum:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.tgl_perjalanan_sblm" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_perjalanan_sblm"
+            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 Perjalanan Koreksi:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.tgl_perjalanan_sdh" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_perjalanan_sdh"
+            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 Pengerjaan Sebelum:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.tgl_pengerjaan_sblm" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_pengerjaan_sblm"
+            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 Pengerjaan Koreksi:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.tgl_pengerjaan_sdh" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_pengerjaan_sdh"
+            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 Nyala Sementara Sebelum:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.tgl_nyala_sementara_sblm" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_nyala_sementara_sblm"
+            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 Nyala Sementara Koreksi:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.tgl_nyala_sementara_sdh" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_nyala_sementara_sdh"
+            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 Nyala Sebelum:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.tgl_nyala_sblm" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_nyala_sblm"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -314,36 +855,59 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Selesai Sebelum:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.tgl_selesai_sblm" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_selesai_sblm"
+            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 Selesai Koreksi:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.tgl_selesai_sdh" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_selesai_sdh"
+            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 Respon Time Sebelum:</h3>
-          <InputText :readonly="true" :value="parseInt(dataSelected?.durasi_response_time_sblm)
-      ? formatWaktu(dataSelected?.durasi_response_time_sblm)
-      : '-'
-    " class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSelected?.durasi_response_time_sblm)
+                ? formatWaktu(dataSelected?.durasi_response_time_sblm)
+                : '-'
+            "
+            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 Respon Time Koreksi:</h3>
-          <InputText :readonly="true" :value="parseInt(dataSelected?.durasi_response_time_sdh)
-      ? formatWaktu(dataSelected?.durasi_response_time_sdh)
-      : '-'
-    " class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSelected?.durasi_response_time_sdh)
+                ? formatWaktu(dataSelected?.durasi_response_time_sdh)
+                : '-'
+            "
+            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 Koreksi:</h3>
-          <InputText :readonly="true" :value="parseInt(dataSelected?.durasi_recovery_time_sdh)
-      ? formatWaktu(dataSelected?.durasi_recovery_time_sdh)
-      : '-'
-    " class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSelected?.durasi_recovery_time_sdh)
+                ? formatWaktu(dataSelected?.durasi_recovery_time_sdh)
+                : '-'
+            "
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -358,52 +922,92 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Sub Kelompok ID Sebelum:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.sub_kelompok_sblm" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.sub_kelompok_sblm"
+            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">Sub Kelopok ID Koreksi:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.sub_kelompok_sdh" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.sub_kelompok_sdh"
+            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">Fasilitas ID Sebelum:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.fasilitas_id_sblm" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.fasilitas_id_sblm"
+            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">Fasilitas ID Koreksi:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.fasilitas_id_sdh" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.fasilitas_id_sdh"
+            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">Sub Fasilitas ID Sebelum:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.sub_fasilitas_id_sblm" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.sub_fasilitas_id_sblm"
+            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">Sub Fasilitas ID Koreksi:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.sub_fasilitas_id_sdh" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.sub_fasilitas_id_sdh"
+            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">Equipment ID Sebelum:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.equipment_id_sblm" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.equipment_id_sblm"
+            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">Equipment ID Koreksi:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.equipment_id_sdh" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.equipment_id_sdh"
+            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">Event Damage ID Sebelum:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.event_damage_sblm" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.event_damage_sblm"
+            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">Event Damage ID Koreksi:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.event_damage_sdh" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.event_damage_sdh"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -418,22 +1022,38 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Cause Group ID Sebelum:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.cause_group_id_sblm" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.cause_group_id_sblm"
+            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">Cause Group ID Koreksi:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.cause_group_id_sdh" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.cause_group_id_sdh"
+            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">Weather ID Sebelum:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.weather_id_sblm" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.weather_id_sblm"
+            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">Weather ID Koreksi:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.weather_id_sdh" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.weather_id_sdh"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -453,7 +1073,11 @@
 
         <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" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.keterangan_pelapor"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -507,6 +1131,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_KTI'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -521,6 +1146,12 @@ const dataSubSelected = ref()
 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 getDetail = () => {
   loadingSubData.value = true
@@ -578,15 +1209,7 @@ 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, true)
   } else {
     const workbook = new Workbook()
     const worksheet = workbook.addWorksheet('Employees')
@@ -641,6 +1264,8 @@ const filterData = (params: any) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
     }
+
+    reportMeta.value = filters.value
   })
 
   onError((error) => {
diff --git a/src/report/Gangguan/Rekap/RGangguan_KTI.ts b/src/report/Gangguan/Rekap/RGangguan_KTI.ts
new file mode 100644
index 0000000..1678ac7
--- /dev/null
+++ b/src/report/Gangguan/Rekap/RGangguan_KTI.ts
@@ -0,0 +1,279 @@
+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 } from '@/utils/numbers'
+
+const reportName = 'Rekapitulasi Koreksi Transaksi Individual'
+
+const formatData = (rawData: any) => {
+  const formattedData: any = []
+  const total: any = {
+    month1: 0,
+    month2: 1,
+    month3: 0,
+    month4: 0,
+    month5: 0,
+    month6: 0,
+    month7: 0,
+    month8: 0,
+    month9: 0,
+    month10: 0,
+    month11: 0,
+    month12: 0
+  }
+
+  formattedData.push([{ content: 'SELURUH UNIT', colSpan: 14, styles: { fontStyle: 'bold' } }])
+
+  formattedData.push(
+    ...rawData.map((item: any, i: any) => {
+      total.month1 += item.month1
+      total.month2 += item.month2
+      total.month3 += item.month3
+      total.month4 += item.month4
+      total.month5 += item.month5
+      total.month6 += item.month6
+      total.month7 += item.month7
+      total.month8 += item.month8
+      total.month9 += item.month9
+      total.month10 += item.month10
+      total.month11 += item.month11
+      total.month12 += item.month12
+
+      return [
+        { content: ++i, styles: { halign: 'right' } },
+        item.nama_uid,
+        formatNumber(item.month1),
+        formatNumber(item.month2),
+        formatNumber(item.month3),
+        formatNumber(item.month4),
+        formatNumber(item.month5),
+        formatNumber(item.month6),
+        formatNumber(item.month7),
+        formatNumber(item.month8),
+        formatNumber(item.month9),
+        formatNumber(item.month10),
+        formatNumber(item.month11),
+        formatNumber(item.month12)
+      ]
+    })
+  )
+
+  formattedData.push([
+    { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+    total.month1,
+    total.month2,
+    total.month3,
+    total.month4,
+    total.month5,
+    total.month6,
+    total.month7,
+    total.month8,
+    total.month9,
+    total.month10,
+    total.month11,
+    total.month12
+  ])
+
+  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('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { 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'
+  })
+  const fontSize = 5
+
+  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: [
+      [
+        {
+          content: 'No',
+          rowSpan: 2
+        },
+        {
+          content: 'Nama Unit',
+          rowSpan: 2
+        },
+        {
+          content: 'Bulan',
+          colSpan: 12
+        }
+      ],
+      [
+        'Januari',
+        'Februari',
+        'Maret',
+        'April',
+        'Mei',
+        'Juni',
+        'Juli',
+        'Agustus',
+        'September',
+        'Oktober',
+        'November',
+        'Desember'
+      ]
+    ],
+    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) {
+    window.open(doc.output('bloburl'))
+  } else {
+    doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+      console.log('pdf berhasil disimpan')
+    })
+  }
+}
+
+export { exportToPDF }