From cdd23b3cc9218c67f2cbd6aa05941ced425dacfe Mon Sep 17 00:00:00 2001
From: Eko Haryadi <ekoharyadi416@gmail.com>
Date: Fri, 5 Apr 2024 22:32:46 +0700
Subject: [PATCH] fix kumulatif kpi ens & monalisa gangguan lapor ulang

---
 .../Gangguan/Rekap/MonalisaGR_LaporUlang.vue  | 304 +++++-------------
 .../Kumulatif/MonalisaLK_EnergyNotSales.vue   | 281 ++++------------
 2 files changed, 136 insertions(+), 449 deletions(-)

diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
index 5b09ea6..d6009a0 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
@@ -1,153 +1,65 @@
 <template>
-  <Filters
-    @run-report="() => exportToPDF(reportMeta, data, true)"
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
+  <Filters @run-report="() => exportToPDF(reportMeta, data, true)" @reset-form="data = []"
+    @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onDataSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxGrouping :context-menu-enabled="true" expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        alignment="center"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_regional"
-        caption="Regional"
-        css-class="custom-table-column"
-        :group-index="0"
-        name="namaRegional"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="id_uid"
-        caption="UIW"
-        css-class="custom-table-column"
-        :group-index="1"
-        name="namaUID"
-        :calculate-group-value="(rowData: any) => rowData.nama_uid"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="id_up3"
-        caption="UP3"
-        css-class="custom-table-column"
-        :group-index="1"
-        name="namaUID"
-        :calculate-group-value="(rowData: any) => rowData.nama_up3"
-      />
+      <DxColumn alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
+        cell-template="formatText" />
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional" caption="Regional"
+        css-class="custom-table-column" :group-index="0" name="namaRegional" />
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="id_uid" caption="UIW"
+        css-class="custom-table-column" :group-index="1" name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid" />
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="id_up3" caption="UP3"
+        css-class="custom-table-column" :group-index="1" name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3" />
       <DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_kemarin"
-            data-type="number"
-            :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_ini"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_mom"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
+            :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
+            cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
+            cell-template="formatNumber" />
+          <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
+            css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_kemarin"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_ini"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_yoy"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column"
+            cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
+            cell-template="formatNumber" />
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
+            css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
       </DxColumn>
 
       <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>
 
@@ -158,111 +70,40 @@
       </template>
 
       <DxSummary>
-        <DxTotalItem
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="mom_bulan_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="mom_bulan_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_mom"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxTotalItem
-          column="yoy_tahun_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="persen_mom" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxTotalItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
 
-        <DxTotalItem
-          column="yoy_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_yoy"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
+        <DxTotalItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="persen_yoy" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
 
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          display-format="{0}"
-          show-in-column="mom_bulan_kemarin"
-          column="mom_bulan_kemarin"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="mom_bulan_ini"
-          column="mom_bulan_ini"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="persen_mom"
-          column="persen_mom"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="yoy_tahun_kemarin"
-          column="yoy_tahun_kemarin"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="yoy_tahun_ini"
-          column="yoy_tahun_ini"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="persen_yoy"
-          column="persen_yoy"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum" display-format="{0}"
+          show-in-column="mom_bulan_kemarin" column="mom_bulan_kemarin" css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
+          show-in-column="mom_bulan_ini" column="mom_bulan_ini" css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
+          show-in-column="persen_mom" column="persen_mom" css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
+          show-in-column="yoy_tahun_kemarin" column="yoy_tahun_kemarin" css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
+          show-in-column="yoy_tahun_ini" column="yoy_tahun_ini" css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
+          show-in-column="persen_yoy" column="persen_yoy" css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
       </DxSummary>
     </DxDataGrid>
   </div>
@@ -294,7 +135,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
-import { exportToPDF, exportToXLSX,exportToDOCX} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang'
+import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -392,6 +233,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 const getDetail = async () => {
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
index fc5fa74..a350b4d 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
@@ -1,244 +1,89 @@
 <template>
-  <Filters
-    @run-report="() => exportToPDF(reportMeta, data, true)"
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
+  <Filters @run-report="() => exportToPDF(reportMeta, data, true)" @reset-form="data = []"
+    @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onDataSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        alignment="center"
-        :caption="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
-        css-class="custom-table-column"
-      >
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_regional"
-          caption="Regional"
-          css-class="custom-table-column"
-          :group-index="0"
-          name="namaRegional"
-        />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="id_uid"
-          caption="UID"
-          css-class="custom-table-column"
-          :group-index="1"
-          name="namaUID"
-          :calculate-group-value="(rowData: any) => rowData.nama_uid"
-        />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="id_up3"
-          caption="UP3"
-          css-class="custom-table-column"
-          :group-index="1"
-          name="namaUID"
-          :calculate-group-value="(rowData: any) => rowData.nama_up3"
-        />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_ulp"
-          caption="Nama Unit"
-          css-class="custom-table-column"
-          name="namaULP"
-          cell-template="formatText"
-        />
+      <DxColumn alignment="center" :caption="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
+        css-class="custom-table-column">
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional" caption="Regional"
+          css-class="custom-table-column" :group-index="0" name="namaRegional" />
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="id_uid" caption="UID"
+          css-class="custom-table-column" :group-index="1" name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_uid" />
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="id_up3" caption="UP3"
+          css-class="custom-table-column" :group-index="1" name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_up3" />
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
+          css-class="custom-table-column" name="namaULP" cell-template="formatText" />
       </DxColumn>
       <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="terencana"
-          data-type="number"
-          caption="Terencana"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="tidak_terencana"
-          data-type="number"
-          caption="Tidak Terencana"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="bencana_alam"
-          data-type="number"
-          caption="Bencana Alam"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
+        <DxColumn :width="150" alignment="center" data-field="terencana" data-type="number" caption="Terencana"
+          css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="tidak_terencana" data-type="number"
+          caption="Tidak Terencana" css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="bencana_alam" data-type="number" caption="Bencana Alam"
+          css-class="custom-table-column" cell-template="formatNumber" />
       </DxColumn>
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="total"
-        data-type="number"
-        caption="Total"
-        css-class="custom-table-column"
-        cell-template="formatNumber"
-      />
-      <DxColumn
-        :min-width="170"
-        alignment="center"
-        data-field="kpi_ens"
-        data-type="number"
-        caption="KPI ENS"
-        css-class="custom-table-column"
-        cell-template="formatNumber"
-      />
+      <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
+        css-class="custom-table-column" cell-template="formatNumber" />
+      <DxColumn :min-width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
+        css-class="custom-table-column" cell-template="formatNumber" />
 
       <DxSummary>
-        <DxTotalItem
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="terencana"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="tidak_terencana"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="bencana_alam"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="kpi_ens"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="terencana" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="tidak_terencana" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="bencana_alam" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="kpi_ens" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
 
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="terencana"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="terencana"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="tidak_terencana"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="tidak_terencana"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="bencana_alam"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="bencana_alam"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="kpi_ens"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="kpi_ens"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
+        <DxGroupItem css-class="!text-right" show-in-column="terencana" :show-in-group-footer="false"
+          :align-by-column="true" column="terencana" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="tidak_terencana" :show-in-group-footer="false"
+          :align-by-column="true" column="tidak_terencana" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="bencana_alam" :show-in-group-footer="false"
+          :align-by-column="true" column="bencana_alam" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="total" :show-in-group-footer="false"
+          :align-by-column="true" column="total" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="kpi_ens" :show-in-group-footer="false"
+          :align-by-column="true" column="kpi_ens" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
       </DxSummary>
 
       <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+      isNumber(data.text)
+        ? data.column.caption == '%'
+          ? formatPercentage(data.text)
+          : formatNumber(data.text)
+        : data.text
+    }}
         </p>
       </template>
 
@@ -318,7 +163,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
-    exportToDOCX(reportMeta.value, e)
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 const getDetail = async () => {