From 3d9c6c08440a51b1a5a208661c9e46a06932453a Mon Sep 17 00:00:00 2001
From: Eko Haryadi <ekoharyadi416@gmail.com>
Date: Mon, 1 Apr 2024 10:31:33 +0700
Subject: [PATCH 1/6] test

---
 .../Pages/Gangguan/Rekap/RGangguan_ALL.vue    | 1068 ++++-------------
 .../Rekap/RGangguan_BerdasarMedia.vue         |    2 +-
 .../Pages/Keluhan/Rekap/RKeluhan_ALL.vue      |  778 +++---------
 3 files changed, 403 insertions(+), 1445 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 61d97ac..75f1082 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -1,30 +1,15 @@
 <template>
-  <Filters
-    :report-button="true"
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    @run-report="() => exportToPDF(reportMeta, data, true)"
-    class="mb-4"
-  >
+  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)"
+    @run-report="() => exportToPDF(reportMeta, data, true)" class="mb-4">
     <Type1 @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" @cell-click="handleCellClick"
+      @row-click="handleRowClick" @selection-changed="onDataSelectionChanged" @exporting="onExporting"
+      :allow-column-resizing="true" column-resizing-mode="widget">
       <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
       <DxSelection mode="single" />
       <!-- <DxPaging :page-size="40" :enabled="true" />
@@ -36,21 +21,10 @@
         :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="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" />
       <!-- <DxColumn
         css-class="custom-table-column"
         :width="50"
@@ -60,51 +34,18 @@
         caption="No"
         cell-template="formatNumber"
       /> -->
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="nama_posko"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
+      <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Nama Unit"
+        css-class="custom-table-column" cell-template="formatText" />
 
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field=""
-        caption="Semua Unit"
-        css-class="custom-table-column"
-        cell-template="formatText"
-        :group-index="0"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="nama_regional"
-        caption="Regional"
-        css-class="custom-table-column"
-        cell-template="formatText"
-        :group-index="1"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="nama_uid"
-        caption="UID"
-        css-class="custom-table-column"
-        cell-template="formatText"
-        :group-index="2"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="nama_up3"
-        caption="UP3"
-        css-class="custom-table-column"
-        cell-template="formatText"
-        :group-index="3"
-      />
+      <DxColumn :width="150" alignment="center" data-field="" caption="Semua Unit" css-class="custom-table-column"
+        cell-template="formatText" :group-index="0" />
+
+      <DxColumn :width="150" alignment="center" key-expr="nama_regional" data-field="nama_regional" caption="Regional"
+        css-class="custom-table-column" cell-template="formatText" :group-index="1" />
+      <DxColumn :width="150" alignment="center" data-field="nama_uid" caption="UID" css-class="custom-table-column"
+        cell-template="formatText" :group-index="2" />
+      <DxColumn :width="150" alignment="center" data-field="nama_up3" caption="UP3" css-class="custom-table-column"
+        cell-template="formatText" :group-index="3" />
       <!-- <DxColumn
         :width="150"
         alignment="center"
@@ -116,237 +57,62 @@
         :group-index="3"
       /> -->
 
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="total"
-        data-type="number"
-        caption="Total"
-        :allow-resizing="false"
-        css-class="custom-table-column"
-        cell-template="formatNumber"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="total_selesai"
-        caption="Selesai"
-        :allow-resizing="false"
-        css-class="custom-table-column"
-        cell-template="formatNumber"
-      />
-      <DxColumn
-        :width="70"
-        alignment="center"
-        data-field="persen_selesai"
-        data-type="number"
-        caption="%"
-        :allow-resizing="false"
-        css-class="custom-table-column"
-        cell-template="formatNumber"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="total_inproses"
-        data-type="number"
-        caption="In Progress"
-        :allow-resizing="false"
-        css-class="custom-table-column"
-        cell-template="formatNumber"
-      />
-      <DxColumn
-        :width="70"
-        alignment="center"
-        data-field="persen_inproses"
-        data-type="number"
-        caption="%"
-        :allow-resizing="false"
-        css-class="custom-table-column"
-        cell-template="formatNumber"
-      />
+      <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
+        :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber">
+
+      </DxColumn>
+      <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="Selesai" :allow-resizing="false"
+        css-class="custom-table-column" cell-template="formatNumber" />
+      <DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+        :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
+      <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="In Progress"
+        :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
+      <DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+        :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
       <DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="avg_durasi_dispatch"
-          data-type="number"
-          caption="Rata-Rata"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatDPT"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="max_durasi_dispatch"
-          data-type="number"
-          caption="Max"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatTime"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="min_durasi_dispatch"
-          data-type="number"
-          caption="Min"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatTime"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_diatas_sla_dispatch"
-          data-type="number"
-          caption=">SLA"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_dibawah_sla_dispatch"
-          data-type="number"
-          caption="≤SLA"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_dispatch" data-type="number"
+          caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" cell-template="formatDPT" />
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_dispatch" data-type="number" caption="Max"
+          :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_dispatch" data-type="number" caption="Min"
+          :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_dispatch" data-type="number"
+          caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_dispatch" data-type="number"
+          caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="avg_durasi_response"
-          data-type="number"
-          caption="Rata-Rata"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatRPT"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="max_durasi_response"
-          data-type="number"
-          caption="Max"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatTime"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="min_durasi_response"
-          data-type="number"
-          caption="Min"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatTime"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_diatas_sla_response"
-          data-type="number"
-          caption=">SLA"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_dibawah_sla_response"
-          data-type="number"
-          caption="≤SLA"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
+          caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" cell-template="formatRPT" />
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
+          :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
+          :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+          caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+          caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="avg_durasi_recovery"
-          data-type="number"
-          caption="Rata-Rata"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatRCT"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="max_durasi_recovery"
-          data-type="number"
-          caption="Max"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatTime"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="min_durasi_recovery"
-          data-type="number"
-          caption="Min"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatTime"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_diatas_sla_recovery"
-          data-type="number"
-          caption=">SLA"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_dibawah_sla_recovery"
-          data-type="number"
-          caption="≤SLA"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+          caption="Rata-Rata" :allow-resizing="false" cs s-class="custom-table-column" cell-template="formatRCT" />
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
+          :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
+          :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+          caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+          caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
       </DxColumn>
 
       <DxSummary :calculate-custom-summary="calculateCustomSummary">
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_selesai"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="persen_selesai"
-          summary-type="avg"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total" summary-type="sum"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_selesai" summary-type="sum"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="persen_selesai" summary-type="avg"
+          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
         <!-- <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
@@ -355,143 +121,47 @@
           summary-type="custom"
           css-class="!text-right"
         /> -->
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_inproses"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="persen_inproses"
-          summary-type="avg"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="avg_durasi_dispatch"
-          summary-type="avg"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_inproses" summary-type="sum"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="persen_inproses" summary-type="avg"
+          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_dispatch"
+          summary-type="avg" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
 
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="max_durasi_dispatch"
-          summary-type="max"
-          css-class="!text-center"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="min_durasi_dispatch"
-          summary-type="min"
-          css-class="!text-center"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_diatas_sla_dispatch"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_dibawah_sla_dispatch"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="avg_durasi_response"
-          summary-type="avg"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="max_durasi_response"
-          summary-type="max"
-          css-class="!text-center"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="min_durasi_response"
-          summary-type="min"
-          css-class="!text-center"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_diatas_sla_response"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_dibawah_sla_response"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="avg_durasi_recovery"
-          summary-type="avg"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="max_durasi_recovery"
-          summary-type="max"
-          css-class="!text-center"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="min_durasi_recovery"
-          summary-type="min"
-          css-class="!text-center"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_diatas_sla_recovery"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_dibawah_sla_recovery"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_dispatch"
+          summary-type="max" css-class="!text-center"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_dispatch"
+          summary-type="min" css-class="!text-center"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_dispatch"
+          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_dispatch"
+          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_response"
+          summary-type="avg" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_response"
+          summary-type="max" css-class="!text-center"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_response"
+          summary-type="min" css-class="!text-center"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_response"
+          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_response"
+          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_recovery"
+          summary-type="avg" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_recovery"
+          summary-type="max" css-class="!text-center"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_recovery"
+          summary-type="min" css-class="!text-center"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_recovery"
+          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_recovery"
+          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
       </DxSummary>
 
       <template #formatText="{ data }">
@@ -503,12 +173,12 @@
       <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer" @click="setAgreementDialog(data.column.caption)">
           {{
-            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>
 
@@ -519,326 +189,113 @@
       </template>
 
       <template #formatDPT="{ data }">
-        <p
-          class="text-right cursor-pointer"
-          :class="[data.text < 5 ? 'text-green-500' : 'text-red-500']"
-          @click="setAgreementDialog(data.column.caption)"
-        >
+        <p class="text-right cursor-pointer" :class="[data.text < 5 ? 'text-green-500' : 'text-red-500']"
+          @click="setAgreementDialog(data.column.caption)">
           {{
-            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>
 
       <template #formatRPT="{ data }">
-        <p
-          class="text-right cursor-pointer"
-          :class="[data.text < 45 ? 'text-green-500' : 'text-red-500']"
-          @click="setAgreementDialog(data.column.caption)"
-        >
+        <p class="text-right cursor-pointer" :class="[data.text < 45 ? 'text-green-500' : 'text-red-500']"
+          @click="setAgreementDialog(data.column.caption)">
           {{
-            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>
 
       <template #formatRCT="{ data }">
-        <p
-          class="text-right cursor-pointer"
-          :class="[data.text < 180 ? 'text-green-500' : 'text-red-500']"
-          @click="setAgreementDialog(data.column.caption)"
-        >
+        <p class="text-right cursor-pointer" :class="[data.text < 180 ? 'text-green-500' : 'text-red-500']"
+          @click="setAgreementDialog(data.column.caption)">
           {{
-            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>
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="dialogDetail"
-    title="Detail Gangguan All"
-    @on-close="closedialogDetail"
-    :full-width="true"
-  >
+  <DetailDialog :open="dialogDetail" title="Detail Gangguan All" @on-close="closedialogDetail" :full-width="true">
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
-        <DxDataGrid
-          :allow-column-reordering="true"
-          class="max-h-[calc(100vh-140px)]"
-          :data-source="dataSub"
-          :show-column-lines="true"
-          :show-row-lines="false"
-          :show-borders="true"
-          :row-alternation-enabled="true"
-          :hover-state-enabled="true"
-          @selection-changed="onDataSubSelectionChanged"
-          :column-width="100"
-          @exporting="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: any) => i == item) + 1"
-            data-type="number"
-            caption="No"
-            cell-template="formatNumber"
-          />
-          <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="no_laporan"
-            caption="No Lapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_lapor"
-            caption="Tgl/Jam Lapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_response"
-            caption="Tgl/Jam Datang"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_recovery"
-            caption="Tgl/Jam Nyala"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_response_time"
-            caption="Durasi Response Time"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_recovery_time"
-            caption="Durasi Recovery Time"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Durasi Penugasan Regu"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Durasi Perjalanan Regu"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="jarak_closing"
-            caption="Jarak Closing (m)"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="dispatch_oleh"
-            caption="Dispatch Oleh"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="idpel_nometer"
-            caption="IDPEL/NO METER"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="nama_pelapor"
-            caption="Nama Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            alignment="center"
-            data-field="alamat_pelapor"
-            caption="Alamat Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_telp_pelapor"
-            caption="No Telp Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            alignment="center"
-            data-field="keterangan_pelapor"
-            caption="Keterangan Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="pembuat_laporan"
-            caption="Sumber Lapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="diselesaikan_oleh"
-            caption="Diselesaikan Oleh"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="status_akhir"
-            caption="Status"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="referensi_marking"
-            caption="Referensi Marking"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="kode_gangguan"
-            caption="Kode Gangguan"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="jenis_gangguan"
-            caption="Jenis Gangguan"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="penyebab"
-            caption="Penyebab"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="tindakan"
-            caption="Tindakan"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
+          <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item: any) => dataSub.findIndex((i: any) => i == item) + 1" data-type="number"
+            caption="No" cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Lapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl/Jam Lapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl/Jam Datang"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl/Jam Nyala"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="" caption="Durasi Penugasan Regu"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="" caption="Durasi Perjalanan Regu"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="jarak_closing" caption="Jarak Closing (m)"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="dispatch_oleh" caption="Dispatch Oleh"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="200" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="pembuat_laporan" caption="Sumber Lapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="diselesaikan_oleh" caption="Diselesaikan Oleh"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="kode_gangguan" caption="Kode Gangguan"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="jenis_gangguan" caption="Jenis Gangguan"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tindakan" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
 
           <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
@@ -879,72 +336,44 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Datang:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.waktu_response"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_response" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Nyala:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.waktu_recovery"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_response_time)
-                ? formatWaktu(dataSubSelected?.durasi_response_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
+    ? formatWaktu(dataSubSelected?.durasi_response_time)
+    : '-'
+    " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_recovery_time)
-                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
+    ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+    : '-'
+    " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Penugasan Regu:</h3>
-          <InputText
-            :readonly="true"
-            class-name="flex-1"
-            :value="
-              parseInt(dataSubSelected?.durasi_recovery_time)
-                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
-                : '-'
-            "
-          />
+          <InputText :readonly="true" class-name="flex-1" :value="parseInt(dataSubSelected?.durasi_recovery_time)
+    ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+    : '-'
+    " />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Perjalanan Regu:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_dispatch_time)
-                ? formatWaktu(dataSubSelected?.durasi_dispatch_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_dispatch_time)
+    ? formatWaktu(dataSubSelected?.durasi_dispatch_time)
+    : '-'
+    " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -969,48 +398,27 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            type="textarea"
-            :value="dataSubSelected?.alamat_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" type="textarea" :value="dataSubSelected?.alamat_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">NO Telp Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.no_telp_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.keterangan_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Sumber Lapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.pembuat_laporan"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.pembuat_laporan" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Diselesaikan Oleh:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.diselesaikan_oleh"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.diselesaikan_oleh" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -1020,11 +428,7 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.referensi_marking"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.referensi_marking" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -1034,11 +438,7 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Jenis Gangguan:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.jenis_gangguan"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.jenis_gangguan" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -1070,7 +470,7 @@ import {
   DxSelection,
   DxSummary,
   DxGroupItem,
-  DxGrouping
+  DxGrouping,
 } from 'devextreme-vue/data-grid'
 import { onMounted, ref, watch } from 'vue'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -1259,7 +659,23 @@ const showDetail = () => {
     getDetail()
   }
 }
+const handleRowClick = (e: any) => {
+  if (e.rowType === 'group') {
+    // Retrieve the group value
+    const groupValue = e.data.key;
+    // Perform actions based on the group value
+    // console.log('Group Value:', groupValue);
+  }
+}
+const handleCellClick = (e: any) => {
+  console.log(e.values)
+  const rowType = e.rowType;
+  const columnName = e.column.dataField;
 
+  // Perform actions based on row type and column name
+  console.log('Row Type:', rowType);
+  console.log('Column Name:', columnName);
+}
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
index 6330dee..c9ac2e5 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@@ -115,7 +115,7 @@
         <DxTotalItem
           display-format="Total"
           show-in-column="media"
-          css-class="text-white !text-left"
+          css-class="text-white !text-l eft"
         />
         <DxTotalItem
           v-for="i in 31"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index 11772d9..0a51b24 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -1,393 +1,116 @@
 <template>
-  <Filters
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div>
-    <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
-        alignment="center"
-        :width="200"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
+      <DxColumn alignment="center" :width="200" data-field="nama_ulp" caption="Nama Unit"
+        css-class="custom-table-column" />
 
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field=""
-        caption="Semua Unit"
-        css-class="custom-table-column"
-        :group-index="0"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="nama_regional"
-        caption="Regional"
-        css-class="custom-table-column"
-        :group-index="1"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="nama_uid"
-        caption="UID"
-        css-class="custom-table-column"
-        :group-index="2"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="nama_up3"
-        caption="UP3"
-        css-class="custom-table-column"
-        :group-index="3"
-      />
+      <DxColumn :width="150" alignment="center" data-field="" caption="Semua Unit" css-class="custom-table-column"
+        :group-index="0" />
+      <DxColumn :width="150" alignment="center" data-field="nama_regional" caption="Regional"
+        css-class="custom-table-column" :group-index="1" />
+      <DxColumn :width="150" alignment="center" data-field="nama_uid" caption="UID" css-class="custom-table-column"
+        :group-index="2" />
+      <DxColumn :width="150" alignment="center" data-field="nama_up3" caption="UP3" css-class="custom-table-column"
+        :group-index="3" />
 
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total"
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_selesai"
-          data-type="number"
-          caption="Selesai"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="70"
-          alignment="center"
-          data-field="persen_selesai"
-          data-type="number"
-          caption="%"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_inproses"
-          data-type="number"
-          caption="InProgress"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="70"
-          alignment="center"
-          data-field="persen_inproses"
-          data-type="number"
-          caption="%"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="avg_durasi_response"
-          data-type="number"
-          caption="Rata-Rata"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="max_durasi_response"
-          data-type="number"
-          caption="Max"
-          css-class="custom-table-column"
-          cell-template="formatTime"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="min_durasi_response"
-          data-type="number"
-          caption="Min"
-          css-class="custom-table-column"
-          cell-template="formatTime"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_diatas_sla_response"
-          data-type="number"
-          caption="> SLA"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_dibawah_sla_response"
-          data-type="number"
-          caption="≤ SLA"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
+        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
+          css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Selesai"
+          css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+          css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="InProgress"
+          css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+          css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
+          caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
+          css-class="custom-table-column" cell-template="formatTime" />
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
+          css-class="custom-table-column" cell-template="formatTime" />
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+          caption="> SLA" css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+          caption="≤ SLA" css-class="custom-table-column" cell-template="formatNumber" />
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="avg_durasi_recovery"
-          data-type="number"
-          caption="Rata-Rata"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="max_durasi_recovery"
-          data-type="number"
-          caption="Max"
-          css-class="custom-table-column"
-          cell-template="formatTime"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="min_durasi_recovery"
-          data-type="number"
-          caption="Min"
-          css-class="custom-table-column"
-          cell-template="formatTime"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_diatas_sla_recovery"
-          data-type="number"
-          caption="> SLA"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_dibawah_sla_recovery"
-          data-type="number"
-          caption="≤ SLA"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+          caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
+          css-class="custom-table-column" cell-template="formatTime" />
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
+          css-class="custom-table-column" cell-template="formatTime" />
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+          caption="> SLA" css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+          caption="≤ SLA" css-class="custom-table-column" cell-template="formatNumber" />
       </DxColumn>
 
       <DxSummary>
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_selesai"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="persen_selesai"
-          summary-type="avg"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_inproses"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="persen_inproses"
-          summary-type="avg"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="avg_durasi_dispatch"
-          summary-type="avg"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total" summary-type="sum"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_selesai" summary-type="sum"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="persen_selesai" summary-type="avg"
+          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_inproses" summary-type="sum"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="persen_inproses" summary-type="avg"
+          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_dispatch"
+          summary-type="avg" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
 
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="max_durasi_dispatch"
-          summary-type="max"
-          css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="min_durasi_dispatch"
-          summary-type="min"
-          css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_diatas_sla_dispatch"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_dibawah_sla_dispatch"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="avg_durasi_response"
-          summary-type="avg"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="max_durasi_response"
-          summary-type="max"
-          css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="min_durasi_response"
-          summary-type="min"
-          css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_diatas_sla_response"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_dibawah_sla_response"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="avg_durasi_recovery"
-          summary-type="avg"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="max_durasi_recovery"
-          summary-type="max"
-          css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="min_durasi_recovery"
-          summary-type="min"
-          css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_diatas_sla_recovery"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_dibawah_sla_recovery"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_dispatch"
+          summary-type="max" css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_dispatch"
+          summary-type="min" css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_dispatch"
+          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_dispatch"
+          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_response"
+          summary-type="avg" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_response"
+          summary-type="max" css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_response"
+          summary-type="min" css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_response"
+          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_response"
+          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_recovery"
+          summary-type="avg" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_recovery"
+          summary-type="max" css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_recovery"
+          summary-type="min" css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_recovery"
+          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_recovery"
+          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
       </DxSummary>
 
       <template #formatTime="{ data }">
@@ -399,12 +122,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>
 
@@ -416,197 +139,56 @@
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="dialogDetail"
-    title="Detail Rekapitulasi Keluhan All"
-    @on-close="closedialogDetail"
-    :full-width="true"
-  >
+  <DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Keluhan All" @on-close="closedialogDetail"
+    :full-width="true">
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
-        <DxDataGrid
-          :allow-column-reordering="true"
-          class="max-h-[calc(100vh-140px)]"
-          :data-source="dataSub"
-          :show-column-lines="true"
-          :show-row-lines="false"
-          :show-borders="true"
-          :row-alternation-enabled="true"
-          :hover-state-enabled="true"
-          @selection-changed="onDataSubSelectionChanged"
-          :column-width="100"
-          @exporting="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="waktu_lapor"
-            caption="Tgl Lapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Dalam Proses Bidang"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Selesai Bidang Unit"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_response_time"
-            caption="Durasi Response Time"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_recovery_time"
-            caption="Durasi Recovery Time"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Status"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="idpel_nometer"
-            caption="IDPEL/NO METER"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="nama_pelapor"
-            caption="Nama Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            alignment="center"
-            data-field="alamat_pelapor"
-            caption="Alamat Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_telp_pelapor"
-            caption="No Tlp Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            alignment="center"
-            data-field="keterangan_pelapor"
-            caption="Keterangan Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Rayon"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Uraian"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Respon Pelanggan"
-            :allow-resizing="false"
-            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="waktu_lapor" caption="Tgl Lapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="" caption="Dalam Proses Bidang" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="" caption="Selesai Bidang Unit" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="" caption="Status" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="200" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Tlp Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="" caption="Rayon" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="" caption="Uraian" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="" caption="Respon Pelanggan" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
 
           <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
@@ -643,46 +225,28 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.dalam_proses_bidang"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.dalam_proses_bidang" 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">Selesai Bidang Unit:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.selesai_bidang_unit"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.selesai_bidang_unit" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_response_time)
-                ? formatWaktu(dataSubSelected?.durasi_response_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
+    ? formatWaktu(dataSubSelected?.durasi_response_time)
+    : '-'
+    " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_recovery_time)
-                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
+    ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+    : '-'
+    " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -702,30 +266,17 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            type="textarea"
-            :value="dataSubSelected?.alamat_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" type="textarea" :value="dataSubSelected?.alamat_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">NO Telp Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.no_telp_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.keterangan_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -735,22 +286,13 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Uraian:</h3>
-          <InputText
-            :readonly="true"
-            type="textarea"
-            :value="dataSubSelected?.uraian"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" type="textarea" :value="dataSubSelected?.uraian" 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">Response Pelanggan:</h3>
-          <InputText
-            :readonly="true"
-            type="textarea"
-            :value="dataSubSelected?.response_pelanggan"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" type="textarea" :value="dataSubSelected?.response_pelanggan"
+            class-name="flex-1" />
         </div>
       </div>
     </div>

From 0c13c7d3d20a21fea87ba13474a401fbda82bab9 Mon Sep 17 00:00:00 2001
From: Eko Haryadi <ekoharyadi416@gmail.com>
Date: Mon, 1 Apr 2024 10:34:14 +0700
Subject: [PATCH 2/6] Fix bug in login functionality

---
 .../Pages/Keluhan/Rekap/RKeluhan_ALL.vue      | 387 ++++++++++++++----
 1 file changed, 300 insertions(+), 87 deletions(-)

diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index 6df4961..79cb077 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -1,19 +1,42 @@
 <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"
+  >
     <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div>
-    <DxDataGrid @cell-click="onCellClicked" 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
+      @cell-click="onCellClicked"
+      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"
+    >
       <DxPaging :enabled="false" />
       <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
       <DxSelection mode="single" />
-      <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" />
 
@@ -78,36 +101,102 @@
         <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_dispatch"
           summary-type="avg" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
 
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_dispatch"
-          summary-type="max" css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_dispatch"
-          summary-type="min" css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_response"
-          summary-type="avg" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_response"
-          summary-type="max" css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_response"
-          summary-type="min" css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_response"
-          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_response"
-          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_recovery"
-          summary-type="avg" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_recovery"
-          summary-type="max" css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_recovery"
-          summary-type="min" css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_recovery"
-          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_recovery"
-          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="max_durasi_dispatch"
+          summary-type="max"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="min_durasi_dispatch"
+          summary-type="min"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="avg_durasi_response"
+          summary-type="avg"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="max_durasi_response"
+          summary-type="max"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="min_durasi_response"
+          summary-type="min"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="total_diatas_sla_response"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="total_dibawah_sla_response"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="avg_durasi_recovery"
+          summary-type="avg"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="max_durasi_recovery"
+          summary-type="max"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="min_durasi_recovery"
+          summary-type="min"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="total_diatas_sla_recovery"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="total_dibawah_sla_recovery"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
       </DxSummary>
 
       <template #formatTime="{ data }">
@@ -119,12 +208,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>
 
@@ -153,39 +242,148 @@
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-          <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
-            caption="No" cell-template="formatNumber" />
-          <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Dalam Proses Bidang"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Selesai Bidang Unit"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
-          <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
-          <DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status" :allow-resizing="false"
-            css-class="custom-table-column" cell-template="formatTime" />
-          <DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
-          <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="200" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Tlp Pelapor"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Rayon" :allow-resizing="false"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="uraian" caption="Uraian" :allow-resizing="false"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="respon_pelanggan" caption="Respon Pelanggan"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn
+            css-class="custom-table-column"
+            :width="50"
+            alignment="center"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            data-type="number"
+            caption="No"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_laporan"
+            caption="No Laporan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_lapor"
+            caption="Tgl Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_response"
+            caption="Dalam Proses Bidang"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_recovery"
+            caption="Selesai Bidang Unit"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_response_time"
+            caption="Durasi Response Time"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_recovery_time"
+            caption="Durasi Recovery Time"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="status_akhir"
+            caption="Status"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="idpel_nometer"
+            caption="IDPEL/NO METER"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_pelapor"
+            caption="Nama Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field="alamat_pelapor"
+            caption="Alamat Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_telp_pelapor"
+            caption="No Tlp Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field="keterangan_pelapor"
+            caption="Keterangan Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_ulp"
+            caption="Rayon"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="uraian"
+            caption="Uraian"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="respon_pelanggan"
+            caption="Respon Pelanggan"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
 
           <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
@@ -232,18 +430,28 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
-          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
-      ? formatWaktu(dataSubSelected?.durasi_response_time)
-      : '-'
-      " class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_response_time)
+                ? formatWaktu(dataSubSelected?.durasi_response_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
-          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
-      ? formatWaktu(dataSubSelected?.durasi_recovery_time)
-      : '-'
-      " class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_recovery_time)
+                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -288,7 +496,12 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Response Pelanggan:</h3>
-          <InputText :readonly="true" type="textarea" :value="dataSubSelected?.respon_pelanggan" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            type="textarea"
+            :value="dataSubSelected?.respon_pelanggan"
+            class-name="flex-1"
+          />
         </div>
       </div>
     </div>

From a1b88c8939a136e528daf1ae0c9f7933c4ee0ea7 Mon Sep 17 00:00:00 2001
From: Eko Haryadi <ekoharyadi416@gmail.com>
Date: Mon, 1 Apr 2024 16:20:07 +0700
Subject: [PATCH 3/6] -

---
 .../Pages/Gangguan/Rekap/RGangguan_ALL.vue    | 417 ++++++------------
 1 file changed, 128 insertions(+), 289 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index aadc4a7..95cbad5 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -5,33 +5,15 @@
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      @cell-click="onCellClicked"
-      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 @cell-click="onCellClicked" 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" />
       <DxSelection mode="single" />
-      <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" />
       <!-- <DxColumn
@@ -116,12 +98,13 @@
       </DxColumn>
 
       <DxSummary :calculate-custom-summary="calculateCustomSummary">
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total" summary-type="sum"
-          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_selesai" summary-type="sum"
-          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="persen_selesai" summary-type="avg"
-          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="total" column="total"
+          summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="total_selesai" column="total_selesai"
+          summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="persen_selesai" column="persen_selesai"
+          summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
         <!-- <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
@@ -130,10 +113,11 @@
           summary-type="custom"
           css-class="!text-right"
         /> -->
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_inproses" summary-type="sum"
-          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="persen_inproses" summary-type="avg"
-          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="total_inproses" column="total_inproses"
+          summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="persen_inproses"
+          column="persen_inproses" summary-type="custom" css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
         <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_dispatch"
           summary-type="avg" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
 
@@ -241,21 +225,10 @@
   <DetailDialog :open="dialogDetail" title="Detail Gangguan All" @on-close="closedialogDetail" :full-width="true">
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
-        <DxDataGrid
-          :allow-column-reordering="true"
-          class="max-h-[calc(100vh-140px)]"
-          :data-source="dataSub"
-          :show-column-lines="true"
-          :show-row-lines="false"
-          :show-borders="true"
-          :row-alternation-enabled="true"
-          :hover-state-enabled="true"
-          @selection-changed="onDataSubSelectionChanged"
-          :column-width="100"
-          @exporting="onExportingDetail"
-          :allow-column-resizing="true"
-          column-resizing-mode="widget"
-        >
+        <DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
+          :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
+          :hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
+          @exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
           <DxSelection mode="single" />
           <DxPaging :page-size="20" :enabled="true" />
           <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
@@ -265,228 +238,57 @@
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-          <DxColumn
-            css-class="custom-table-column"
-            :width="50"
-            alignment="center"
-            :calculate-display-value="(item: any) => dataSub.findIndex((i: any) => i == item) + 1"
-            data-type="number"
-            caption="No"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="nama_posko"
-            caption="Posko"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_laporan"
-            caption="No Lapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_lapor"
-            caption="Tgl/Jam Lapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_response"
-            caption="Tgl/Jam Datang"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_recovery"
-            caption="Tgl/Jam Nyala"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_response_time"
-            caption="Durasi Response Time"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_recovery_time"
-            caption="Durasi Recovery Time"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Durasi Penugasan Regu"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Durasi Perjalanan Regu"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="jarak_closing"
-            caption="Jarak Closing (m)"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="dispatch_oleh"
-            caption="Dispatch Oleh"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="idpel_nometer"
-            caption="IDPEL/NO METER"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="nama_pelapor"
-            caption="Nama Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            alignment="center"
-            data-field="alamat_pelapor"
-            caption="Alamat Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_telp_pelapor"
-            caption="No Telp Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            alignment="center"
-            data-field="keterangan_pelapor"
-            caption="Keterangan Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="pembuat_laporan"
-            caption="Sumber Lapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="diselesaikan_oleh"
-            caption="Diselesaikan Oleh"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="status_akhir"
-            caption="Status"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="referensi_marking"
-            caption="Referensi Marking"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="kode_gangguan"
-            caption="Kode Gangguan"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="jenis_gangguan"
-            caption="Jenis Gangguan"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="penyebab"
-            caption="Penyebab"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="tindakan"
-            caption="Tindakan"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
+          <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i: any) => i == item) + 1" data-type="number"
+            caption="No" cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Lapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl/Jam Lapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl/Jam Datang"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl/Jam Nyala"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="" caption="Durasi Penugasan Regu"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="" caption="Durasi Perjalanan Regu"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="jarak_closing" caption="Jarak Closing (m)"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="dispatch_oleh" caption="Dispatch Oleh"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="200" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="pembuat_laporan" caption="Sumber Lapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="diselesaikan_oleh" caption="Diselesaikan Oleh"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="kode_gangguan" caption="Kode Gangguan"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="jenis_gangguan" caption="Jenis Gangguan"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tindakan" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
 
           <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
@@ -662,8 +464,9 @@ import {
   DxSummary,
   DxGroupItem,
   DxGrouping,
+
 } from 'devextreme-vue/data-grid'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
@@ -681,7 +484,9 @@ import {
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_ALL'
 import { getDataRowGroup } from '@/utils/helper'
-
+const calculateGroupValue = (e: any) => {
+  console.log(e)
+}
 const client = apolloClient()
 provideApolloClient(client)
 const position = { of: '#data' }
@@ -765,22 +570,57 @@ const setAgreementDialog = (column: string) => {
     agreeToShowDialog.value = false
   }
 }
-
+let total_selesai = 0;
+let total_inproses = 0;
+let total = 0;
 const calculateCustomSummary = (options: any) => {
-  if (options.name == 'persenSelesai') {
-    console.log(options.component.persen_selesai)
 
-    switch (options.summaryProcess) {
-      case 'start':
-        // Initializing "totalValue" here
-        options.totalValue = 1
-        break
-      case 'calculate':
-        // Modifying "totalValue" here
-        break
-      case 'finalize':
-        // Assigning the final value to "totalValue" here
-        break
+  if (options.name === 'total') {
+    if (options.summaryProcess === 'calculate') {
+      total += options.value;
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total
+
+    }
+  }
+  if (options.name === 'total_inproses') {
+    if (options.summaryProcess === 'calculate') {
+      total_inproses += options.value;
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_inproses
+    }
+  }
+
+  if (options.name === 'total_selesai') {
+    if (options.summaryProcess === 'calculate') {
+      total_selesai += options.value;
+
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_selesai
+    }
+
+  }
+
+  if (options.name === 'persen_selesai') {
+    if (options.summaryProcess === 'start') {
+      total_selesai = 0;
+      total = 0;
+    } else if (options.summaryProcess === 'calculate') {
+
+    } else if (options.summaryProcess === 'finalize') {
+
+      options.totalValue = (total_selesai / total) * 100;
+    }
+  }
+  if (options.name === 'persen_inproses') {
+    if (options.summaryProcess === 'start') {
+      total_inproses = 0;
+      total = 0;
+    } else if (options.summaryProcess === 'calculate') {
+
+    } else if (options.summaryProcess === 'finalize') {
+
+      options.totalValue = (total_inproses / total) * 100;
     }
   }
 }
@@ -1176,4 +1016,3 @@ onMounted(() => {
   }
 })
 </script>
-@/utils/helper

From 0ea9140e6b6cc90c809b3cf21d4ebbf71e11c9e4 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 4 Apr 2024 16:45:31 +0700
Subject: [PATCH 4/6] Refactor filterData function to use destructuring
 assignment

---
 src/components/Pages/Material/Daftar/Material_DGMYG.vue | 6 +++---
 src/components/Pages/Material/Rekap/Material_RPM.vue    | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Pages/Material/Daftar/Material_DGMYG.vue b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
index 8b65304..1073a4d 100755
--- a/src/components/Pages/Material/Daftar/Material_DGMYG.vue
+++ b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
@@ -257,7 +257,7 @@ const resetData = () => {
 const filterData = async (params: any) => {
   resetData()
   const dateValue = params.periode.split(' s/d ')
-  const { posko, idUid, idUp3 } = params
+  const { posko, uid, up3 } = params
 
   const query = {
     dateFrom: dateValue[0]
@@ -266,8 +266,8 @@ const filterData = async (params: any) => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    idUid: idUid ? idUid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
     idPosko: posko ? posko.id : 0
   }
 
diff --git a/src/components/Pages/Material/Rekap/Material_RPM.vue b/src/components/Pages/Material/Rekap/Material_RPM.vue
index e8a42f7..8436be5 100755
--- a/src/components/Pages/Material/Rekap/Material_RPM.vue
+++ b/src/components/Pages/Material/Rekap/Material_RPM.vue
@@ -198,7 +198,7 @@ const resetData = () => {
 const filterData = async (params: any) => {
   resetData()
   const dateValue = params.periode.split(' s/d ')
-  const { posko, idUid, idUp3 } = params
+  const { posko, uid, up3 } = params
   const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
@@ -206,8 +206,8 @@ const filterData = async (params: any) => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    idUid: idUid ? idUid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
     posko: posko ? posko.id : 0
   }
 

From db757a65bba449bd8102ca0280cd3835ca61b63e Mon Sep 17 00:00:00 2001
From: Eko Haryadi <ekoharyadi416@gmail.com>
Date: Thu, 4 Apr 2024 21:34:42 +0700
Subject: [PATCH 5/6] Update function to handle edge case

---
 .../Pages/Gangguan/Rekap/RGangguan_ALL.vue    | 320 ++++++++++++++++--
 1 file changed, 291 insertions(+), 29 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 30eb498..6bb3634 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -70,6 +70,36 @@
           css-class="custom-table-column"
           cell-template="formatDPT"
         />
+        <DxColumn
+          :visible="false"
+          :width="150"
+          alignment="center"
+          data-field="count_durasi_dispatch"
+          data-type="number"
+          caption="Jumlah Dispatch"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          :visible="false"
+          :width="150"
+          alignment="center"
+          data-type="number"
+          caption="Total Durasi Dispatch"
+          name="total_durasi_dispatch"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          :calculate-display-value="
+            (rowData: any) =>
+              parseFloat(rowData.count_durasi_dispatch) * parseFloat(rowData.avg_durasi_dispatch)
+          "
+          :calculate-cell-value="
+            (rowData: any) =>
+              parseFloat(rowData.count_durasi_dispatch) * parseFloat(rowData.avg_durasi_dispatch)
+          "
+          cell-template="formatNumber"
+        />
         <DxColumn
           :width="150"
           alignment="center"
@@ -122,6 +152,36 @@
           css-class="custom-table-column"
           cell-template="formatRPT"
         />
+        <DxColumn
+          :visible="false"
+          :width="150"
+          alignment="center"
+          data-field="count_durasi_response"
+          data-type="number"
+          caption="Jumlah Response"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          :visible="false"
+          :width="150"
+          alignment="center"
+          data-type="number"
+          caption="Total Durasi Response"
+          name="total_durasi_response"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          :calculate-display-value="
+            (rowData: any) =>
+              parseFloat(rowData.count_durasi_response) * parseFloat(rowData.avg_durasi_response)
+          "
+          :calculate-cell-value="
+            (rowData: any) =>
+              parseFloat(rowData.count_durasi_response) * parseFloat(rowData.avg_durasi_response)
+          "
+          cell-template="formatNumber"
+        />
         <DxColumn
           :width="150"
           alignment="center"
@@ -174,6 +234,36 @@
           css-class="custom-table-column"
           cell-template="formatRCT"
         />
+        <DxColumn
+          :visible="false"
+          :width="150"
+          alignment="center"
+          data-field="count_durasi_recovery"
+          data-type="number"
+          caption="Jumlah Recovery"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          :visible="false"
+          :width="150"
+          alignment="center"
+          data-type="number"
+          caption="Total Durasi Recovery"
+          name="total_durasi_recovery"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+          :calculate-display-value="
+            (rowData: any) =>
+              parseFloat(rowData.count_durasi_recovery) * parseFloat(rowData.avg_durasi_recovery)
+          "
+          :calculate-cell-value="
+            (rowData: any) =>
+              parseFloat(rowData.count_durasi_recovery) * parseFloat(rowData.avg_durasi_recovery)
+          "
+          cell-template="formatNumber"
+        />
         <DxColumn
           :width="150"
           alignment="center"
@@ -221,7 +311,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           column="total"
-          summary-type="sum"
+          name="total"
+          summary-type="custom"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -229,7 +320,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           column="total_selesai"
-          summary-type="sum"
+          name="total_selesai"
+          summary-type="custom"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -237,23 +329,17 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           column="persen_selesai"
-          summary-type="avg"
+          name="persen_selesai"
+          summary-type="custom"
           css-class="!text-right"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
-        <!-- <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="persen_selesai"
-          name="persenSelesai"
-          summary-type="custom"
-          css-class="!text-right"
-        /> -->
         <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
           column="total_inproses"
-          summary-type="sum"
+          name="total_inproses"
+          summary-type="custom"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -261,7 +347,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           column="persen_inproses"
-          summary-type="avg"
+          name="persen_inproses"
+          summary-type="custom"
           css-class="!text-right"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
@@ -269,7 +356,26 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           column="avg_durasi_dispatch"
-          summary-type="avg"
+          name="avg_durasi_dispatch"
+          summary-type="custom"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="total_durasi_dispatch"
+          name="total_durasi_dispatch"
+          summary-type="custom"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="count_durasi_dispatch"
+          name="count_durasi_dispatch"
+          summary-type="custom"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -310,7 +416,26 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           column="avg_durasi_response"
-          summary-type="avg"
+          name="avg_durasi_response"
+          summary-type="custom"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="total_durasi_response"
+          name="total_durasi_response"
+          summary-type="custom"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="count_durasi_response"
+          name="count_durasi_response"
+          summary-type="custom"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -350,7 +475,26 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           column="avg_durasi_recovery"
-          summary-type="avg"
+          name="avg_durasi_recovery"
+          summary-type="custom"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="total_durasi_recovery"
+          name="total_durasi_recovery"
+          summary-type="custom"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="count_durasi_recovery"
+          name="count_durasi_recovery"
+          summary-type="custom"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -804,21 +948,139 @@ const setAgreementDialog = (column: string) => {
   }
 }
 
+let total = 0
+let total_selesai = 0
+let total_inproses = 0
+let count_durasi_dispatch = 0
+let total_durasi_dispatch = 0
+let count_durasi_response = 0
+let total_durasi_response = 0
+let count_durasi_recovery = 0
+let total_durasi_recovery = 0
 const calculateCustomSummary = (options: any) => {
-  if (options.name == 'persenSelesai') {
-    console.log(options.component.persen_selesai)
+  if (options.name === 'total') {
+    if (options.summaryProcess === 'calculate') {
+      total += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total
+    }
+  }
 
-    switch (options.summaryProcess) {
-      case 'start':
-        // Initializing "totalValue" here
-        options.totalValue = 1
-        break
-      case 'calculate':
-        // Modifying "totalValue" here
-        break
-      case 'finalize':
-        // Assigning the final value to "totalValue" here
-        break
+  if (options.name === 'total_selesai') {
+    if (options.summaryProcess === 'calculate') {
+      total_selesai += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_selesai
+    }
+  }
+
+  if (options.name === 'total_inproses') {
+    if (options.summaryProcess === 'calculate') {
+      total_inproses += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_inproses
+    }
+  }
+
+  if (options.name === 'persen_selesai') {
+    if (options.summaryProcess === 'start') {
+      total = 0
+      total_selesai = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = (total_selesai / total) * 100
+    }
+  }
+
+  if (options.name === 'persen_inproses') {
+    if (options.summaryProcess === 'start') {
+      total = 0
+      total_inproses = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = (total_inproses / total) * 100
+    }
+  }
+
+  if (options.name === 'persen_selesai') {
+    if (options.summaryProcess === 'start') {
+      total = 0
+      total_selesai = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = (total_selesai / total) * 100
+    }
+  }
+
+  if (options.name === 'count_durasi_dispatch') {
+    if (options.summaryProcess === 'calculate') {
+      count_durasi_dispatch += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = count_durasi_dispatch
+    }
+  }
+
+  if (options.name === 'total_durasi_dispatch') {
+    if (options.summaryProcess === 'calculate') {
+      total_durasi_dispatch += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_durasi_dispatch
+    }
+  }
+
+  if (options.name === 'avg_durasi_dispatch') {
+    if (options.summaryProcess === 'start') {
+      count_durasi_dispatch = 0
+      total_durasi_dispatch = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_durasi_dispatch / count_durasi_dispatch
+    }
+  }
+
+  if (options.name === 'count_durasi_response') {
+    if (options.summaryProcess === 'calculate') {
+      count_durasi_response += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = count_durasi_response
+    }
+  }
+
+  if (options.name === 'total_durasi_response') {
+    if (options.summaryProcess === 'calculate') {
+      total_durasi_response += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_durasi_response
+    }
+  }
+
+  if (options.name === 'avg_durasi_response') {
+    if (options.summaryProcess === 'start') {
+      count_durasi_response = 0
+      total_durasi_response = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_durasi_response / count_durasi_response
+    }
+  }
+
+  if (options.name === 'count_durasi_recovery') {
+    if (options.summaryProcess === 'calculate') {
+      count_durasi_recovery += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = count_durasi_recovery
+    }
+  }
+
+  if (options.name === 'total_durasi_recovery') {
+    if (options.summaryProcess === 'calculate') {
+      total_durasi_recovery += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_durasi_recovery
+    }
+  }
+
+  if (options.name === 'avg_durasi_recovery') {
+    if (options.summaryProcess === 'start') {
+      count_durasi_recovery = 0
+      total_durasi_recovery = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_durasi_recovery / count_durasi_recovery
     }
   }
 }

From 444c59d0b51f75432cb906dadd5c6a66125c56ef Mon Sep 17 00:00:00 2001
From: Eko Haryadi <ekoharyadi416@gmail.com>
Date: Fri, 5 Apr 2024 17:01:31 +0700
Subject: [PATCH 6/6] DOCUMENT rekapitulasi

---
 package-lock.json                             | 1993 ++++++++---------
 package.json                                  |    3 +-
 .../Pages/Gangguan/Rekap/RGangguan_ALL.vue    |  604 ++---
 .../Gangguan/Rekap/RGangguan_AlihPosko.vue    |  447 +---
 .../Rekap/RGangguan_BerdasarMedia.vue         |  403 +---
 .../Pages/Gangguan/Rekap/RGangguan_CTTM.vue   |  376 +---
 .../Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue |  640 ++----
 .../Rekap/RGangguan_JenisGangguan.vue         |  458 +---
 .../Rekap/RGangguan_JenisGangguanSE.vue       |  770 ++-----
 .../Pages/Gangguan/Rekap/RGangguan_KTI.vue    | 1044 ++-------
 .../Gangguan/Rekap/RGangguan_PerPosko.vue     |    6 +-
 .../Gangguan/Rekap/RGangguan_PerRegu.vue      |    9 +-
 .../Gangguan/Rekap/RGangguan_PerTanggal.vue   |  769 ++-----
 .../Rekap/RGangguan_RatingPerPosko.vue        |    6 +-
 .../Rekap/RGangguan_RatingPerRegu.vue         |  577 ++---
 .../Keluhan/Rekap/RKeluhan_PerTanggal.vue     |  764 ++-----
 src/report/Gangguan/Rekap/RGangguan_ALL.ts    |   41 +-
 .../Gangguan/Rekap/RGangguan_AlihPosko.ts     |   28 +-
 .../Gangguan/Rekap/RGangguan_BerdasarMedia.ts |   27 +-
 src/report/Gangguan/Rekap/RGangguan_CTTM.ts   |   10 +-
 src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts |   27 +-
 .../Gangguan/Rekap/RGangguan_JenisGangguan.ts |   42 +-
 .../Rekap/RGangguan_JenisGangguanSE.ts        |   34 +-
 src/report/Gangguan/Rekap/RGangguan_KTI.ts    |   27 +-
 .../Gangguan/Rekap/RGangguan_PerPosko.ts      |   45 +-
 .../Gangguan/Rekap/RGangguan_PerRegu.ts       |   49 +-
 .../Gangguan/Rekap/RGangguan_PerTanggal.ts    |   35 +-
 .../Rekap/RGangguan_RatingPerPosko.ts         |   24 +-
 .../Gangguan/Rekap/RGangguan_RatingPerRegu.ts |   26 +-
 .../Gangguan/Rekap/doc/RGangguan_ALL_DOC.ts   |  282 +++
 .../Rekap/doc/RGangguan_AlihPosko_DOC.ts      |  251 +++
 .../Rekap/doc/RGangguan_BerdasarMedia_DOC.ts  |  280 +++
 .../Gangguan/Rekap/doc/RGangguan_CTTM_DOC.ts  |  279 +++
 .../Rekap/doc/RGangguan_DMAPKT_DOC.ts         |  315 +++
 .../doc/RGangguan_JenisGangguanSE_DOC.ts      |  280 +++
 .../Rekap/doc/RGangguan_JenisGangguan_DOC.ts  |  280 +++
 .../Gangguan/Rekap/doc/RGangguan_KTI_DOC.ts   |  293 +++
 .../Rekap/doc/RGangguan_PerPosko_DOC.ts       |  278 +++
 .../Rekap/doc/RGangguan_PerRegu_DOC.ts        |  281 +++
 .../Rekap/doc/RGangguan_PerTanggal_DOC.ts     |  278 +++
 .../Rekap/doc/RGangguan_RatingPerPosko_DOC.ts |  276 +++
 .../Rekap/doc/RGangguan_RatingPerRegu_DOC.ts  |  276 +++
 .../Keluhan/Rekap/RKeluhan_BerdasarMedia.ts   |   28 +-
 .../Keluhan/Rekap/RKeluhan_PerTanggal.ts      |   31 +-
 44 files changed, 6420 insertions(+), 6572 deletions(-)
 create mode 100644 src/report/Gangguan/Rekap/doc/RGangguan_ALL_DOC.ts
 create mode 100755 src/report/Gangguan/Rekap/doc/RGangguan_AlihPosko_DOC.ts
 create mode 100644 src/report/Gangguan/Rekap/doc/RGangguan_BerdasarMedia_DOC.ts
 create mode 100644 src/report/Gangguan/Rekap/doc/RGangguan_CTTM_DOC.ts
 create mode 100644 src/report/Gangguan/Rekap/doc/RGangguan_DMAPKT_DOC.ts
 create mode 100644 src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguanSE_DOC.ts
 create mode 100644 src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguan_DOC.ts
 create mode 100644 src/report/Gangguan/Rekap/doc/RGangguan_KTI_DOC.ts
 create mode 100644 src/report/Gangguan/Rekap/doc/RGangguan_PerPosko_DOC.ts
 create mode 100644 src/report/Gangguan/Rekap/doc/RGangguan_PerRegu_DOC.ts
 create mode 100644 src/report/Gangguan/Rekap/doc/RGangguan_PerTanggal_DOC.ts
 create mode 100644 src/report/Gangguan/Rekap/doc/RGangguan_RatingPerPosko_DOC.ts
 create mode 100644 src/report/Gangguan/Rekap/doc/RGangguan_RatingPerRegu_DOC.ts

diff --git a/package-lock.json b/package-lock.json
index 12de4bc..ea808ee 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
         "qs": "^6.11.2",
         "uuid": "^9.0.1",
         "vue": "^3.3.4",
+        "vue-html-to-paper": "^2.0.3",
         "vue-router": "^4.2.2",
         "vue-tailwind-datepicker": "^1.6.1",
         "vue3-star-ratings": "^3.0.5"
@@ -92,22 +93,22 @@
       }
     },
     "node_modules/@ampproject/remapping": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
-      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
       "dev": true,
       "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.0",
-        "@jridgewell/trace-mapping": "^0.3.9"
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
       },
       "engines": {
         "node": ">=6.0.0"
       }
     },
     "node_modules/@apollo/client": {
-      "version": "3.9.5",
-      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.9.5.tgz",
-      "integrity": "sha512-7y+c8MTPU+hhTwvcGVtMMGIgWduzrvG1mz5yJMRyqYbheBkkky3Lki6ADWVSBXG1lZoOtPYvB2zDgVfKb2HSsw==",
+      "version": "3.9.10",
+      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.9.10.tgz",
+      "integrity": "sha512-w8i/Lk1P0vvWZF0Xb00XPonn79/0rgRJ1vopBlVudVuy9QP29/NZXK0rI2xJIN6VrKuEqJZaVGJC+7k23I2sfA==",
       "dependencies": {
         "@graphql-typed-document-node/core": "^3.1.1",
         "@wry/caches": "^1.0.0",
@@ -117,7 +118,7 @@
         "hoist-non-react-statics": "^3.3.2",
         "optimism": "^0.18.0",
         "prop-types": "^15.7.2",
-        "rehackt": "0.0.5",
+        "rehackt": "0.0.6",
         "response-iterator": "^0.2.6",
         "symbol-observable": "^4.0.0",
         "ts-invariant": "^0.10.3",
@@ -161,43 +162,43 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
-      "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
+      "version": "7.24.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
+      "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
       "dev": true,
       "dependencies": {
-        "@babel/highlight": "^7.23.4",
-        "chalk": "^2.4.2"
+        "@babel/highlight": "^7.24.2",
+        "picocolors": "^1.0.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
-      "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.4.tgz",
+      "integrity": "sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.9.tgz",
-      "integrity": "sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.4.tgz",
+      "integrity": "sha512-MBVlMXP+kkl5394RBLSxxk/iLTeVGuXTV3cIDXavPpMMqnSnt6apKgan/U8O3USWZCWZT/TbgfEpKa4uMgN4Dg==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.23.5",
-        "@babel/generator": "^7.23.6",
+        "@babel/code-frame": "^7.24.2",
+        "@babel/generator": "^7.24.4",
         "@babel/helper-compilation-targets": "^7.23.6",
         "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helpers": "^7.23.9",
-        "@babel/parser": "^7.23.9",
-        "@babel/template": "^7.23.9",
-        "@babel/traverse": "^7.23.9",
-        "@babel/types": "^7.23.9",
+        "@babel/helpers": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "@babel/template": "^7.24.0",
+        "@babel/traverse": "^7.24.1",
+        "@babel/types": "^7.24.0",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -213,14 +214,14 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
-      "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.4.tgz",
+      "integrity": "sha512-Xd6+v6SnjWVx/nus+y0l1sxMOTOMBkyL4+BIdbALyatQnAe/SRVjANeDPSCYaX+i1iJmuGSKf3Z+E+V/va1Hvw==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.23.6",
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "@jridgewell/trace-mapping": "^0.3.17",
+        "@babel/types": "^7.24.0",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
         "jsesc": "^2.5.1"
       },
       "engines": {
@@ -256,9 +257,9 @@
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.23.10",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.10.tgz",
-      "integrity": "sha512-2XpP2XhkXzgxecPNEEK8Vz8Asj9aRxt08oKOqtiZoqV2UGZ5T+EkyP9sXQ9nwMxBIG34a7jmasVqoMop7VdPUw==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.4.tgz",
+      "integrity": "sha512-lG75yeuUSVu0pIcbhiYMXBXANHrpUPaOfu7ryAzskCgKUHuAxRQI5ssrtmF0X9UXldPlvT0XM/A4F44OXRt6iQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.22.5",
@@ -266,7 +267,7 @@
         "@babel/helper-function-name": "^7.23.0",
         "@babel/helper-member-expression-to-functions": "^7.23.0",
         "@babel/helper-optimise-call-expression": "^7.22.5",
-        "@babel/helper-replace-supers": "^7.22.20",
+        "@babel/helper-replace-supers": "^7.24.1",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
         "semver": "^6.3.1"
@@ -325,12 +326,12 @@
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
-      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+      "version": "7.24.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz",
+      "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.22.15"
+        "@babel/types": "^7.24.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -368,22 +369,22 @@
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz",
+      "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-replace-supers": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz",
-      "integrity": "sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.24.1.tgz",
+      "integrity": "sha512-QCR1UqC9BzG5vZl8BMicmZ28RuUBnHhAMddD8yHFHDRH9lLTZ9uUPehX8ctVPT8l0TKblJidqcgUUKGVrePleQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-member-expression-to-functions": "^7.22.15",
+        "@babel/helper-member-expression-to-functions": "^7.23.0",
         "@babel/helper-optimise-call-expression": "^7.22.5"
       },
       "engines": {
@@ -430,9 +431,9 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.23.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
-      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
+      "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -457,37 +458,38 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.9.tgz",
-      "integrity": "sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.4.tgz",
+      "integrity": "sha512-FewdlZbSiwaVGlgT1DPANDuCHaDMiOo+D/IDYRFYjHOuv66xMSJ7fQwwODwRNAPkADIO/z1EoF/l2BCWlWABDw==",
       "dev": true,
       "dependencies": {
-        "@babel/template": "^7.23.9",
-        "@babel/traverse": "^7.23.9",
-        "@babel/types": "^7.23.9"
+        "@babel/template": "^7.24.0",
+        "@babel/traverse": "^7.24.1",
+        "@babel/types": "^7.24.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.23.4",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
-      "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
+      "version": "7.24.2",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.2.tgz",
+      "integrity": "sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==",
       "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.20",
         "chalk": "^2.4.2",
-        "js-tokens": "^4.0.0"
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
-      "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.4.tgz",
+      "integrity": "sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -496,12 +498,12 @@
       }
     },
     "node_modules/@babel/plugin-syntax-jsx": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz",
-      "integrity": "sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.1.tgz",
+      "integrity": "sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.22.5"
+        "@babel/helper-plugin-utils": "^7.24.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -511,12 +513,12 @@
       }
     },
     "node_modules/@babel/plugin-syntax-typescript": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.23.3.tgz",
-      "integrity": "sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.1.tgz",
+      "integrity": "sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.22.5"
+        "@babel/helper-plugin-utils": "^7.24.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -526,15 +528,15 @@
       }
     },
     "node_modules/@babel/plugin-transform-typescript": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.23.6.tgz",
-      "integrity": "sha512-6cBG5mBvUu4VUD04OHKnYzbuHNP8huDsD3EDqqpIpsswTDoqHCjLoHb6+QgsV1WsT2nipRqCPgxD3LXnEO7XfA==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.24.4.tgz",
+      "integrity": "sha512-79t3CQ8+oBGk/80SQ8MN3Bs3obf83zJ0YZjDmDaEZN8MqhMI760apl5z6a20kFeMXBwJX99VpKT8CKxEBp5H1g==",
       "dev": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-create-class-features-plugin": "^7.23.6",
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/plugin-syntax-typescript": "^7.23.3"
+        "@babel/helper-create-class-features-plugin": "^7.24.4",
+        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/plugin-syntax-typescript": "^7.24.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -544,9 +546,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
-      "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz",
+      "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -555,33 +557,33 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz",
-      "integrity": "sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz",
+      "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.23.5",
-        "@babel/parser": "^7.23.9",
-        "@babel/types": "^7.23.9"
+        "@babel/parser": "^7.24.0",
+        "@babel/types": "^7.24.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz",
-      "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.1.tgz",
+      "integrity": "sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==",
       "dev": true,
       "dependencies": {
-        "@babel/code-frame": "^7.23.5",
-        "@babel/generator": "^7.23.6",
+        "@babel/code-frame": "^7.24.1",
+        "@babel/generator": "^7.24.1",
         "@babel/helper-environment-visitor": "^7.22.20",
         "@babel/helper-function-name": "^7.23.0",
         "@babel/helper-hoist-variables": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.23.9",
-        "@babel/types": "^7.23.9",
+        "@babel/parser": "^7.24.1",
+        "@babel/types": "^7.24.0",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -590,9 +592,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz",
-      "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
+      "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
       "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.23.4",
@@ -627,9 +629,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
-      "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
       "cpu": [
         "ppc64"
       ],
@@ -1057,9 +1059,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.56.0.tgz",
-      "integrity": "sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==",
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
+      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1157,9 +1159,9 @@
       }
     },
     "node_modules/@heroicons/vue": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.1.1.tgz",
-      "integrity": "sha512-Yi5nh/89L193ALgHyJUQUdNLsKXPrrE3yj5yiR8WAlo7nZyXGxGauQcEAmBsa2XJGMhBMuEdoOiuZ8wEwTBxVQ==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.1.3.tgz",
+      "integrity": "sha512-CP4ipIwFbV4NEn8ULUCN110wkV0wZq6dsViDL3HwgIh+jn5yQGlRm6QaRN+Mv+o+UsUBbRDei3Je/q0NZHf5Gg==",
       "peerDependencies": {
         "vue": ">= 3"
       }
@@ -1214,9 +1216,9 @@
       }
     },
     "node_modules/@humanwhocodes/object-schema": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz",
-      "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
       "dev": true
     },
     "node_modules/@isaacs/cliui": {
@@ -1321,13 +1323,13 @@
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
-      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
       "dependencies": {
-        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
-        "@jridgewell/trace-mapping": "^0.3.9"
+        "@jridgewell/trace-mapping": "^0.3.24"
       },
       "engines": {
         "node": ">=6.0.0"
@@ -1342,9 +1344,9 @@
       }
     },
     "node_modules/@jridgewell/set-array": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
-      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
       "engines": {
         "node": ">=6.0.0"
       }
@@ -1355,9 +1357,9 @@
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.22",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz",
-      "integrity": "sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==",
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -1458,12 +1460,6 @@
         "url": "https://opencollective.com/unts"
       }
     },
-    "node_modules/@pkgr/utils/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "extraneous": true
-    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -1474,9 +1470,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.0.tgz",
-      "integrity": "sha512-+ac02NL/2TCKRrJu2wffk1kZ+RyqxVUlbjSagNgPm94frxtr+XDL12E5Ll1enWskLrtrZ2r8L3wED1orIibV/w==",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.0.tgz",
+      "integrity": "sha512-jwXtxYbRt1V+CdQSy6Z+uZti7JF5irRKF8hlKfEnF/xJpcNGuuiZMBvuoYM+x9sr9iWGnzrlM0+9hvQ1kgkf1w==",
       "cpu": [
         "arm"
       ],
@@ -1487,9 +1483,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.12.0.tgz",
-      "integrity": "sha512-OBqcX2BMe6nvjQ0Nyp7cC90cnumt8PXmO7Dp3gfAju/6YwG0Tj74z1vKrfRz7qAv23nBcYM8BCbhrsWqO7PzQQ==",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.0.tgz",
+      "integrity": "sha512-fI9nduZhCccjzlsA/OuAwtFGWocxA4gqXGTLvOyiF8d+8o0fZUeSztixkYjcGq1fGZY3Tkq4yRvHPFxU+jdZ9Q==",
       "cpu": [
         "arm64"
       ],
@@ -1500,9 +1496,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.12.0.tgz",
-      "integrity": "sha512-X64tZd8dRE/QTrBIEs63kaOBG0b5GVEd3ccoLtyf6IdXtHdh8h+I56C2yC3PtC9Ucnv0CpNFJLqKFVgCYe0lOQ==",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.0.tgz",
+      "integrity": "sha512-BcnSPRM76/cD2gQC+rQNGBN6GStBs2pl/FpweW8JYuz5J/IEa0Fr4AtrPv766DB/6b2MZ/AfSIOSGw3nEIP8SA==",
       "cpu": [
         "arm64"
       ],
@@ -1513,9 +1509,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.12.0.tgz",
-      "integrity": "sha512-cc71KUZoVbUJmGP2cOuiZ9HSOP14AzBAThn3OU+9LcA1+IUqswJyR1cAJj3Mg55HbjZP6OLAIscbQsQLrpgTOg==",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.0.tgz",
+      "integrity": "sha512-LDyFB9GRolGN7XI6955aFeI3wCdCUszFWumWU0deHA8VpR3nWRrjG6GtGjBrQxQKFevnUTHKCfPR4IvrW3kCgQ==",
       "cpu": [
         "x64"
       ],
@@ -1526,9 +1522,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.12.0.tgz",
-      "integrity": "sha512-a6w/Y3hyyO6GlpKL2xJ4IOh/7d+APaqLYdMf86xnczU3nurFTaVN9s9jOXQg97BE4nYm/7Ga51rjec5nfRdrvA==",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.0.tgz",
+      "integrity": "sha512-ygrGVhQP47mRh0AAD0zl6QqCbNsf0eTo+vgwkY6LunBcg0f2Jv365GXlDUECIyoXp1kKwL5WW6rsO429DBY/bA==",
       "cpu": [
         "arm"
       ],
@@ -1539,9 +1535,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.12.0.tgz",
-      "integrity": "sha512-0fZBq27b+D7Ar5CQMofVN8sggOVhEtzFUwOwPppQt0k+VR+7UHMZZY4y+64WJ06XOhBTKXtQB/Sv0NwQMXyNAA==",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.0.tgz",
+      "integrity": "sha512-x+uJ6MAYRlHGe9wi4HQjxpaKHPM3d3JjqqCkeC5gpnnI6OWovLdXTpfa8trjxPLnWKyBsSi5kne+146GAxFt4A==",
       "cpu": [
         "arm64"
       ],
@@ -1552,9 +1548,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.12.0.tgz",
-      "integrity": "sha512-eTvzUS3hhhlgeAv6bfigekzWZjaEX9xP9HhxB0Dvrdbkk5w/b+1Sxct2ZuDxNJKzsRStSq1EaEkVSEe7A7ipgQ==",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.0.tgz",
+      "integrity": "sha512-nrRw8ZTQKg6+Lttwqo6a2VxR9tOroa2m91XbdQ2sUUzHoedXlsyvY1fN4xWdqz8PKmf4orDwejxXHjh7YBGUCA==",
       "cpu": [
         "arm64"
       ],
@@ -1564,10 +1560,23 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.0.tgz",
+      "integrity": "sha512-xV0d5jDb4aFu84XKr+lcUJ9y3qpIWhttO3Qev97z8DKLXR62LC3cXT/bMZXrjLF9X+P5oSmJTzAhqwUbY96PnA==",
+      "cpu": [
+        "ppc64le"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.12.0.tgz",
-      "integrity": "sha512-ix+qAB9qmrCRiaO71VFfY8rkiAZJL8zQRXveS27HS+pKdjwUfEhqo2+YF2oI+H/22Xsiski+qqwIBxVewLK7sw==",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.0.tgz",
+      "integrity": "sha512-SDDhBQwZX6LPRoPYjAZWyL27LbcBo7WdBFWJi5PI9RPCzU8ijzkQn7tt8NXiXRiFMJCVpkuMkBf4OxSxVMizAw==",
       "cpu": [
         "riscv64"
       ],
@@ -1577,10 +1586,23 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.0.tgz",
+      "integrity": "sha512-RxB/qez8zIDshNJDufYlTT0ZTVut5eCpAZ3bdXDU9yTxBzui3KhbGjROK2OYTTor7alM7XBhssgoO3CZ0XD3qA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.12.0.tgz",
-      "integrity": "sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA==",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.0.tgz",
+      "integrity": "sha512-C6y6z2eCNCfhZxT9u+jAM2Fup89ZjiG5pIzZIDycs1IwESviLxwkQcFRGLjnDrP+PT+v5i4YFvlcfAs+LnreXg==",
       "cpu": [
         "x64"
       ],
@@ -1591,9 +1613,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.12.0.tgz",
-      "integrity": "sha512-LfFdRhNnW0zdMvdCb5FNuWlls2WbbSridJvxOvYWgSBOYZtgBfW9UGNJG//rwMqTX1xQE9BAodvMH9tAusKDUw==",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.0.tgz",
+      "integrity": "sha512-i0QwbHYfnOMYsBEyjxcwGu5SMIi9sImDVjDg087hpzXqhBSosxkE7gyIYFHgfFl4mr7RrXksIBZ4DoLoP4FhJg==",
       "cpu": [
         "x64"
       ],
@@ -1604,9 +1626,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.12.0.tgz",
-      "integrity": "sha512-JPDxovheWNp6d7AHCgsUlkuCKvtu3RB55iNEkaQcf0ttsDU/JZF+iQnYcQJSk/7PtT4mjjVG8N1kpwnI9SLYaw==",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.0.tgz",
+      "integrity": "sha512-Fq52EYb0riNHLBTAcL0cun+rRwyZ10S9vKzhGKKgeD+XbwunszSY0rVMco5KbOsTlwovP2rTOkiII/fQ4ih/zQ==",
       "cpu": [
         "arm64"
       ],
@@ -1617,9 +1639,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.12.0.tgz",
-      "integrity": "sha512-fjtuvMWRGJn1oZacG8IPnzIV6GF2/XG+h71FKn76OYFqySXInJtseAqdprVTDTyqPxQOG9Exak5/E9Z3+EJ8ZA==",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.0.tgz",
+      "integrity": "sha512-e/PBHxPdJ00O9p5Ui43+vixSgVf4NlLsmV6QneGERJ3lnjIua/kim6PRFe3iDueT1rQcgSkYP8ZBBXa/h4iPvw==",
       "cpu": [
         "ia32"
       ],
@@ -1630,9 +1652,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.12.0.tgz",
-      "integrity": "sha512-ZYmr5mS2wd4Dew/JjT0Fqi2NPB/ZhZ2VvPp7SmvPZb4Y1CG/LRcS6tcRo2cYU7zLK5A7cdbhWnnWmUjoI4qapg==",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.0.tgz",
+      "integrity": "sha512-aGg7iToJjdklmxlUlJh/PaPNa4PmqHfyRMLunbL3eaMO0gp656+q1zOKkpJ/CVe9CryJv6tAN1HDoR8cNGzkag==",
       "cpu": [
         "x64"
       ],
@@ -1643,9 +1665,9 @@
       ]
     },
     "node_modules/@rushstack/eslint-patch": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.7.2.tgz",
-      "integrity": "sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.1.tgz",
+      "integrity": "sha512-S3Kq8e7LqxkA9s7HKLqXGTGck1uwis5vAXan3FnU5yw1Ec5hsSGnq4s/UCaSqABPOnOTg7zASLyst7+ohgWexg==",
       "dev": true
     },
     "node_modules/@sinclair/typebox": {
@@ -1685,9 +1707,9 @@
       }
     },
     "node_modules/@tailwindcss/typography": {
-      "version": "0.5.10",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
-      "integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==",
+      "version": "0.5.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.12.tgz",
+      "integrity": "sha512-CNwpBpconcP7ppxmuq3qvaCxiRWnbhANpY/ruH4L5qs2GCiVDJXde/pjj2HWPV1+Q4G9+V/etrwUYopdcjAlyg==",
       "dev": true,
       "dependencies": {
         "lodash.castarray": "^4.4.0",
@@ -1700,20 +1722,20 @@
       }
     },
     "node_modules/@tanstack/virtual-core": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.1.1.tgz",
-      "integrity": "sha512-I5lerX+RWxLM+zw35gwwQIoLvtkOm0ecuQUlEjNey+Ga6TnR66WKLBnSHre59onugxhpDLT2nofRYzxf+izDFQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.2.0.tgz",
+      "integrity": "sha512-P5XgYoAw/vfW65byBbJQCw+cagdXDT/qH6wmABiLt4v4YBT2q2vqCOhihe+D1Nt325F/S/0Tkv6C5z0Lv+VBQQ==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@tanstack/vue-virtual": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.1.1.tgz",
-      "integrity": "sha512-62am497kFAOEdOlK7ECEqKiZPxgaPk5BbK4ah+PhTrvz1yNRCHbUbYGe8JwV1DIoY9k1MNXGBLUW5hAa5tvnzQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.2.0.tgz",
+      "integrity": "sha512-KbmQVvw1k5Js2Fk4DJw9aDxFT5+e8a2Ba4UBJAFCRnWBCnzd3NlmEHI9JCeLv1tYDZ/iHwwv+Z9Le0BENIEP8A==",
       "dependencies": {
-        "@tanstack/virtual-core": "3.1.1"
+        "@tanstack/virtual-core": "3.2.0"
       },
       "funding": {
         "type": "github",
@@ -1768,15 +1790,15 @@
       "dev": true
     },
     "node_modules/@types/lodash": {
-      "version": "4.14.202",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
-      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
+      "version": "4.17.0",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.0.tgz",
+      "integrity": "sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==",
       "optional": true
     },
     "node_modules/@types/node": {
-      "version": "18.19.17",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.17.tgz",
-      "integrity": "sha512-SzyGKgwPzuWp2SHhlpXKzCX0pIOfcI4V2eF37nNBJOhwlegQ83omtVQ1XxZpDE06V/d6AQvfQdPfnw0tRC//Ng==",
+      "version": "18.19.29",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.29.tgz",
+      "integrity": "sha512-5pAX7ggTmWZdhUrhRWLPf+5oM7F80bcKVCBbr0zwEkTNzTJL2CWQjznpFgHYy6GrzkYi2Yjy7DHKoynFxqPV8g==",
       "devOptional": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -1788,9 +1810,9 @@
       "integrity": "sha512-YBtzT2ztNF6R/9+UXj2wTGFnC9NklAnASt3sC0h2m1bbH7G6FyBIkt4AN8ThZpNfxUo1b2iMVO0UawiJymEt8A=="
     },
     "node_modules/@types/qs": {
-      "version": "6.9.12",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.12.tgz",
-      "integrity": "sha512-bZcOkJ6uWrL0Qb2NAWKa7TBU+mJHPzhx9jjLL1KHF+XpzEcR7EXHvjbHlGtR/IsP1vyPrehuS6XqkmaePy//mg=="
+      "version": "6.9.14",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.14.tgz",
+      "integrity": "sha512-5khscbd3SwWMhFqylJBLQ0zIu7c1K6Vz0uBIt915BI3zV0q1nfjRQD3RqSBcPaO6PHEF4ov/t9y89fSiyThlPA=="
     },
     "node_modules/@types/raf": {
       "version": "3.4.3",
@@ -1805,9 +1827,9 @@
       "optional": true
     },
     "node_modules/@types/semver": {
-      "version": "7.5.7",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.7.tgz",
-      "integrity": "sha512-/wdoPq1QqkSj9/QOeKkFquEuPzQbHTWAMPH/PaUMB+JuR31lXhlWXRZ52IpfDYVlDOUBvX09uBrPwxGT1hjNBg==",
+      "version": "7.5.8",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
+      "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
       "dev": true
     },
     "node_modules/@types/tough-cookie": {
@@ -2204,13 +2226,13 @@
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.3.1.tgz",
-      "integrity": "sha512-xofQFwIzfdmLLlHa6ag0dPV8YsnKOCP1KdAeVVh34vSjN2dcUiXYCD9htu/9eM7t8Xln4v03U9HLxLpPlsXdZw==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.4.0.tgz",
+      "integrity": "sha512-Jths0sWCJZ8BxjKe+p+eKsoqev1/T8lYcrjavEaz8auEJ4jAVY0GwW3JKmdVU4mmNPLPHixh4GNXP7GFtAiDHA==",
       "dev": true,
       "dependencies": {
-        "@vitest/spy": "1.3.1",
-        "@vitest/utils": "1.3.1",
+        "@vitest/spy": "1.4.0",
+        "@vitest/utils": "1.4.0",
         "chai": "^4.3.10"
       },
       "funding": {
@@ -2218,12 +2240,12 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.3.1.tgz",
-      "integrity": "sha512-5FzF9c3jG/z5bgCnjr8j9LNq/9OxV2uEBAITOXfoe3rdZJTdO7jzThth7FXv/6b+kdY65tpRQB7WaKhNZwX+Kg==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.4.0.tgz",
+      "integrity": "sha512-EDYVSmesqlQ4RD2VvWo3hQgTJ7ZrFQ2VSJdfiJiArkCerDAGeyF1i6dHkmySqk573jLp6d/cfqCN+7wUB5tLgg==",
       "dev": true,
       "dependencies": {
-        "@vitest/utils": "1.3.1",
+        "@vitest/utils": "1.4.0",
         "p-limit": "^5.0.0",
         "pathe": "^1.1.1"
       },
@@ -2259,9 +2281,9 @@
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.3.1.tgz",
-      "integrity": "sha512-EF++BZbt6RZmOlE3SuTPu/NfwBF6q4ABS37HHXzs2LUVPBLx2QoY/K0fKpRChSo8eLiuxcbCVfqKgx/dplCDuQ==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.4.0.tgz",
+      "integrity": "sha512-saAFnt5pPIA5qDGxOHxJ/XxhMFKkUSBJmVt5VgDsAqPTX6JP326r5C/c9UuCMPoXNzuudTPsYDZCoJ5ilpqG2A==",
       "dev": true,
       "dependencies": {
         "magic-string": "^0.30.5",
@@ -2273,9 +2295,9 @@
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.3.1.tgz",
-      "integrity": "sha512-xAcW+S099ylC9VLU7eZfdT9myV67Nor9w9zhf0mGCYJSO+zM2839tOeROTdikOi/8Qeusffvxb/MyBSOja1Uig==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.4.0.tgz",
+      "integrity": "sha512-Ywau/Qs1DzM/8Uc+yA77CwSegizMlcgTJuYGAi0jujOteJOUf1ujunHThYo243KG9nAyWT3L9ifPYZ5+As/+6Q==",
       "dev": true,
       "dependencies": {
         "tinyspy": "^2.2.0"
@@ -2285,9 +2307,9 @@
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.3.1.tgz",
-      "integrity": "sha512-d3Waie/299qqRyHTm2DjADeTaNdNSVsnwHPWrs20JMpjh6eiVq7ggggweO8rc4arhf6rRkWuHKwvxGvejUXZZQ==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.4.0.tgz",
+      "integrity": "sha512-mx3Yd1/6e2Vt/PUC98DcqTirtfxUyAZ32uK82r8rZzbtBeBo+nqgnjx/LvqQdWsrvNtm14VmurNgcf4nqY5gJg==",
       "dev": true,
       "dependencies": {
         "diff-sequences": "^29.6.3",
@@ -2309,30 +2331,30 @@
       }
     },
     "node_modules/@volar/language-core": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.1.1.tgz",
-      "integrity": "sha512-oVbZcj97+5zlowkHMSJMt3aaAFuFyhXeXoOEHcqGECxFvw1TPCNnMM9vxhqNpoiNeWKHvggoq9WCk/HzJHtP8A==",
+      "version": "2.2.0-alpha.5",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.0-alpha.5.tgz",
+      "integrity": "sha512-RqERQ8HXxKC/HAGpDg7oG/Yg8n3rC3KEnYE3D7lcKIblU59JEZX73IWD/L3fdjzyeSglDWjL91iOblU8MuKEoA==",
       "dev": true,
       "dependencies": {
-        "@volar/source-map": "2.1.1"
+        "@volar/source-map": "2.2.0-alpha.5"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.1.1.tgz",
-      "integrity": "sha512-OOtxrEWB2eZ+tnCy5JwDkcCPGlN3+ioNNzkywXE9k4XA7p4cN36frR7QPAOksvd7RXKUGHzSjq6XrYnTPa4z4Q==",
+      "version": "2.2.0-alpha.5",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.0-alpha.5.tgz",
+      "integrity": "sha512-Lw1LOPgt1QGaQX9HstRTlBz5x6d5mGq9ZTFMeyWVr8/5YOv3hCU0ehtMTwmCiAX/ZyNSINFI01ODePy2hwy06A==",
       "dev": true,
       "dependencies": {
         "muggle-string": "^0.4.0"
       }
     },
     "node_modules/@volar/typescript": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.1.1.tgz",
-      "integrity": "sha512-5K41AWvFZCMMKZCx8bbFvbkyiKHr0s9k8P0M1FVXLX/9HYHzK5C9B8cX4uhATSehAytFIRnR4fTXVQtWp/Yzag==",
+      "version": "2.2.0-alpha.5",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.0-alpha.5.tgz",
+      "integrity": "sha512-9UKZSDTcgvKMXz9TiU1kHmu3uMuH8+M7oZ6/CzBt8LvFda+ec/ZDcvBjQg2rU5EVn4d+YPYcqenkeHre3tO7Og==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "2.1.1",
+        "@volar/language-core": "2.2.0-alpha.5",
         "path-browserify": "^1.0.1"
       }
     },
@@ -2348,9 +2370,9 @@
       }
     },
     "node_modules/@vue/apollo-composable": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@vue/apollo-composable/-/apollo-composable-4.0.1.tgz",
-      "integrity": "sha512-mUiC2ucO4CeRhedC5wcEzzoweuDLB/rgKPAcZEtDYBpErRTeK3CQ1ffygp1E9GbibuTfKms11k5P/DgDYdzhZA==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@vue/apollo-composable/-/apollo-composable-4.0.2.tgz",
+      "integrity": "sha512-/yfEktliXw+oMy/6n9C0J05woYoKlM+kcffVXMh0qljbXdrioyj0WkR/LgPdpnRf6TglFnjIgCKKicd5Gyzpnw==",
       "dependencies": {
         "throttle-debounce": "^5.0.0",
         "ts-essentials": "^9.4.0",
@@ -2406,25 +2428,25 @@
       }
     },
     "node_modules/@vue/babel-helper-vue-transform-on": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.2.1.tgz",
-      "integrity": "sha512-jtEXim+pfyHWwvheYwUwSXm43KwQo8nhOBDyjrUITV6X2tB7lJm6n/+4sqR8137UVZZul5hBzWHdZ2uStYpyRQ==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.2.2.tgz",
+      "integrity": "sha512-nOttamHUR3YzdEqdM/XXDyCSdxMA9VizUKoroLX6yTyRtggzQMHXcmwh8a7ZErcJttIBIc9s68a1B8GZ+Dmvsw==",
       "dev": true
     },
     "node_modules/@vue/babel-plugin-jsx": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.2.1.tgz",
-      "integrity": "sha512-Yy9qGktktXhB39QE99So/BO2Uwm/ZG+gpL9vMg51ijRRbINvgbuhyJEi4WYmGRMx/MSTfK0xjgZ3/MyY+iLCEg==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.2.2.tgz",
+      "integrity": "sha512-nYTkZUVTu4nhP199UoORePsql0l+wj7v/oyQjtThUVhJl1U+6qHuoVhIvR3bf7eVKjbCK+Cs2AWd7mi9Mpz9rA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-module-imports": "^7.22.15",
+        "@babel/helper-module-imports": "~7.22.15",
         "@babel/helper-plugin-utils": "^7.22.5",
         "@babel/plugin-syntax-jsx": "^7.23.3",
-        "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.23.7",
-        "@babel/types": "^7.23.6",
-        "@vue/babel-helper-vue-transform-on": "1.2.1",
-        "@vue/babel-plugin-resolve-type": "1.2.1",
+        "@babel/template": "^7.23.9",
+        "@babel/traverse": "^7.23.9",
+        "@babel/types": "^7.23.9",
+        "@vue/babel-helper-vue-transform-on": "1.2.2",
+        "@vue/babel-plugin-resolve-type": "1.2.2",
         "camelcase": "^6.3.0",
         "html-tags": "^3.3.1",
         "svg-tags": "^1.0.0"
@@ -2438,66 +2460,90 @@
         }
       }
     },
+    "node_modules/@vue/babel-plugin-jsx/node_modules/@babel/helper-module-imports": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
+      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.15"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@vue/babel-plugin-resolve-type": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-1.2.1.tgz",
-      "integrity": "sha512-IOtnI7pHunUzHS/y+EG/yPABIAp0VN8QhQ0UCS09jeMVxgAnI9qdOzO85RXdQGxq+aWCdv8/+k3W0aYO6j/8fQ==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-1.2.2.tgz",
+      "integrity": "sha512-EntyroPwNg5IPVdUJupqs0CFzuf6lUrVvCspmv2J1FITLeGnUCuoGNNk78dgCusxEiYj6RMkTJflGSxk5aIC4A==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.23.5",
-        "@babel/helper-module-imports": "^7.22.15",
+        "@babel/helper-module-imports": "~7.22.15",
         "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/parser": "^7.23.6",
+        "@babel/parser": "^7.23.9",
         "@vue/compiler-sfc": "^3.4.15"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@vue/babel-plugin-resolve-type/node_modules/@babel/helper-module-imports": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
+      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.15"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@vue/compiler-core": {
-      "version": "3.4.19",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.19.tgz",
-      "integrity": "sha512-gj81785z0JNzRcU0Mq98E56e4ltO1yf8k5PQ+tV/7YHnbZkrM0fyFyuttnN8ngJZjbpofWE/m4qjKBiLl8Ju4w==",
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz",
+      "integrity": "sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==",
       "dependencies": {
         "@babel/parser": "^7.23.9",
-        "@vue/shared": "3.4.19",
+        "@vue/shared": "3.4.21",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.4.19",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.19.tgz",
-      "integrity": "sha512-vm6+cogWrshjqEHTzIDCp72DKtea8Ry/QVpQRYoyTIg9k7QZDX6D8+HGURjtmatfgM8xgCFtJJaOlCaRYRK3QA==",
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz",
+      "integrity": "sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==",
       "dependencies": {
-        "@vue/compiler-core": "3.4.19",
-        "@vue/shared": "3.4.19"
+        "@vue/compiler-core": "3.4.21",
+        "@vue/shared": "3.4.21"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.4.19",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.19.tgz",
-      "integrity": "sha512-LQ3U4SN0DlvV0xhr1lUsgLCYlwQfUfetyPxkKYu7dkfvx7g3ojrGAkw0AERLOKYXuAGnqFsEuytkdcComei3Yg==",
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz",
+      "integrity": "sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==",
       "dependencies": {
         "@babel/parser": "^7.23.9",
-        "@vue/compiler-core": "3.4.19",
-        "@vue/compiler-dom": "3.4.19",
-        "@vue/compiler-ssr": "3.4.19",
-        "@vue/shared": "3.4.19",
+        "@vue/compiler-core": "3.4.21",
+        "@vue/compiler-dom": "3.4.21",
+        "@vue/compiler-ssr": "3.4.21",
+        "@vue/shared": "3.4.21",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.6",
-        "postcss": "^8.4.33",
+        "magic-string": "^0.30.7",
+        "postcss": "^8.4.35",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.4.19",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.19.tgz",
-      "integrity": "sha512-P0PLKC4+u4OMJ8sinba/5Z/iDT84uMRRlrWzadgLA69opCpI1gG4N55qDSC+dedwq2fJtzmGald05LWR5TFfLw==",
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz",
+      "integrity": "sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.19",
-        "@vue/shared": "3.4.19"
+        "@vue/compiler-dom": "3.4.21",
+        "@vue/shared": "3.4.21"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -2544,12 +2590,12 @@
       }
     },
     "node_modules/@vue/language-core": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.5.tgz",
-      "integrity": "sha512-knGXuQqhDSO7QJr8LFklsiWa23N2ikehkdVxtc9UKgnyqsnusughS2Tkg7VN8Hqed35X0B52Z+OGI5OrT/8uxQ==",
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.10.tgz",
+      "integrity": "sha512-3ULtX6hSPJNdNChi6aJ4FfdJNs5EShBLxnwLFTqrk2N1385WOwGVlbHeS2R6W9s9lXZ0+mC2bv4VlFSyeNPNGA==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "~2.1.1",
+        "@volar/language-core": "~2.2.0-alpha.5",
         "@vue/compiler-dom": "^3.4.0",
         "@vue/shared": "^3.4.0",
         "computeds": "^0.0.1",
@@ -2567,66 +2613,57 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.4.19",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.19.tgz",
-      "integrity": "sha512-+VcwrQvLZgEclGZRHx4O2XhyEEcKaBi50WbxdVItEezUf4fqRh838Ix6amWTdX0CNb/b6t3Gkz3eOebfcSt+UA==",
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.21.tgz",
+      "integrity": "sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==",
       "dependencies": {
-        "@vue/shared": "3.4.19"
+        "@vue/shared": "3.4.21"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.4.19",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.19.tgz",
-      "integrity": "sha512-/Z3tFwOrerJB/oyutmJGoYbuoadphDcJAd5jOuJE86THNZji9pYjZroQ2NFsZkTxOq0GJbb+s2kxTYToDiyZzw==",
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.21.tgz",
+      "integrity": "sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==",
       "dependencies": {
-        "@vue/reactivity": "3.4.19",
-        "@vue/shared": "3.4.19"
+        "@vue/reactivity": "3.4.21",
+        "@vue/shared": "3.4.21"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.4.19",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.19.tgz",
-      "integrity": "sha512-IyZzIDqfNCF0OyZOauL+F4yzjMPN2rPd8nhqPP2N1lBn3kYqJpPHHru+83Rkvo2lHz5mW+rEeIMEF9qY3PB94g==",
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.21.tgz",
+      "integrity": "sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==",
       "dependencies": {
-        "@vue/runtime-core": "3.4.19",
-        "@vue/shared": "3.4.19",
+        "@vue/runtime-core": "3.4.21",
+        "@vue/shared": "3.4.21",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.4.19",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.19.tgz",
-      "integrity": "sha512-eAj2p0c429RZyyhtMRnttjcSToch+kTWxFPHlzGMkR28ZbF1PDlTcmGmlDxccBuqNd9iOQ7xPRPAGgPVj+YpQw==",
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.21.tgz",
+      "integrity": "sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.4.19",
-        "@vue/shared": "3.4.19"
+        "@vue/compiler-ssr": "3.4.21",
+        "@vue/shared": "3.4.21"
       },
       "peerDependencies": {
-        "vue": "3.4.19"
+        "vue": "3.4.21"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.4.19",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.19.tgz",
-      "integrity": "sha512-/KliRRHMF6LoiThEy+4c1Z4KB/gbPrGjWwJR+crg2otgrf/egKzRaCPvJ51S5oetgsgXLfc4Rm5ZgrKHZrtMSw=="
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
+      "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
     },
     "node_modules/@vue/test-utils": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.4.tgz",
-      "integrity": "sha512-8jkRxz8pNhClAf4Co4ZrpAoFISdvT3nuSkUlY6Ys6rmTpw3DMWG/X3mw3gQ7QJzgCZO9f+zuE2kW57fi09MW7Q==",
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.5.tgz",
+      "integrity": "sha512-oo2u7vktOyKUked36R93NB7mg2B+N7Plr8lxp2JBGwr18ch6EggFjixSCdIVVLkT6Qr0z359Xvnafc9dcKyDUg==",
       "dev": true,
       "dependencies": {
         "js-beautify": "^1.14.9",
-        "vue-component-type-helpers": "^1.8.21"
-      },
-      "peerDependencies": {
-        "@vue/server-renderer": "^3.0.1",
-        "vue": "^3.0.1"
-      },
-      "peerDependenciesMeta": {
-        "@vue/server-renderer": {
-          "optional": true
-        }
+        "vue-component-type-helpers": "^2.0.0"
       }
     },
     "node_modules/@vue/tsconfig": {
@@ -2636,14 +2673,14 @@
       "dev": true
     },
     "node_modules/@vueuse/core": {
-      "version": "10.7.2",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.7.2.tgz",
-      "integrity": "sha512-AOyAL2rK0By62Hm+iqQn6Rbu8bfmbgaIMXcE3TSr7BdQ42wnSFlwIdPjInO62onYsEMK/yDMU8C6oGfDAtZ2qQ==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
+      "integrity": "sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.20",
-        "@vueuse/metadata": "10.7.2",
-        "@vueuse/shared": "10.7.2",
-        "vue-demi": ">=0.14.6"
+        "@vueuse/metadata": "10.9.0",
+        "@vueuse/shared": "10.9.0",
+        "vue-demi": ">=0.14.7"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -2675,19 +2712,19 @@
       }
     },
     "node_modules/@vueuse/metadata": {
-      "version": "10.7.2",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.7.2.tgz",
-      "integrity": "sha512-kCWPb4J2KGrwLtn1eJwaJD742u1k5h6v/St5wFe8Quih90+k2a0JP8BS4Zp34XUuJqS2AxFYMb1wjUL8HfhWsQ==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.9.0.tgz",
+      "integrity": "sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/shared": {
-      "version": "10.7.2",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.7.2.tgz",
-      "integrity": "sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==",
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.9.0.tgz",
+      "integrity": "sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==",
       "dependencies": {
-        "vue-demi": ">=0.14.6"
+        "vue-demi": ">=0.14.7"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -2910,36 +2947,17 @@
         "node": ">= 6"
       }
     },
-    "node_modules/archiver-utils/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
-    },
-    "node_modules/archiver-utils/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+    "node_modules/archiver/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
       "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/archiver-utils/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-    },
-    "node_modules/archiver-utils/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
       }
     },
     "node_modules/arg": {
@@ -2963,14 +2981,13 @@
       }
     },
     "node_modules/asn1.js": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
-      "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz",
+      "integrity": "sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==",
       "dependencies": {
         "bn.js": "^4.0.0",
         "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0",
-        "safer-buffer": "^2.1.0"
+        "minimalistic-assert": "^1.0.0"
       }
     },
     "node_modules/asn1.js/node_modules/bn.js": {
@@ -3009,9 +3026,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.17",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.17.tgz",
-      "integrity": "sha512-/cpVNRLSfhOtcGflT13P2794gVSgmPgTR+erw5ifnMLZb0UnSlkK4tquLmkd3BhA+nLo5tX8Cu0upUsGKvKbmg==",
+      "version": "10.4.19",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
+      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
       "dev": true,
       "funding": [
         {
@@ -3028,8 +3045,8 @@
         }
       ],
       "dependencies": {
-        "browserslist": "^4.22.2",
-        "caniuse-lite": "^1.0.30001578",
+        "browserslist": "^4.23.0",
+        "caniuse-lite": "^1.0.30001599",
         "fraction.js": "^4.3.7",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -3046,11 +3063,11 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
-      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
       "dependencies": {
-        "follow-redirects": "^1.15.4",
+        "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
         "proxy-from-env": "^1.1.0"
       }
@@ -3109,11 +3126,14 @@
       }
     },
     "node_modules/binary-extensions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/bl": {
@@ -3126,6 +3146,19 @@
         "readable-stream": "^3.4.0"
       }
     },
+    "node_modules/bl/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/bluebird": {
       "version": "3.4.7",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
@@ -3210,22 +3243,23 @@
       }
     },
     "node_modules/browserify-sign": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.2.tgz",
-      "integrity": "sha512-1rudGyeYY42Dk6texmv7c4VcQ0EsvVbLwZkA+AQB7SxvXxmcD93jcHie8bzecJ+ChDlmAm2Qyu0+Ccg5uhZXCg==",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.3.tgz",
+      "integrity": "sha512-JWCZW6SKhfhjJxO8Tyiiy+XYB7cqd2S5/+WeYHsKdNKFlCBhKbblba1A/HN/90YwtxKc8tCErjffZl++UNmGiw==",
       "dependencies": {
         "bn.js": "^5.2.1",
         "browserify-rsa": "^4.1.0",
         "create-hash": "^1.2.0",
         "create-hmac": "^1.1.7",
-        "elliptic": "^6.5.4",
+        "elliptic": "^6.5.5",
+        "hash-base": "~3.0",
         "inherits": "^2.0.4",
-        "parse-asn1": "^5.1.6",
-        "readable-stream": "^3.6.2",
+        "parse-asn1": "^5.1.7",
+        "readable-stream": "^2.3.8",
         "safe-buffer": "^5.2.1"
       },
       "engines": {
-        "node": ">= 4"
+        "node": ">= 0.12"
       }
     },
     "node_modules/browserslist": {
@@ -3380,9 +3414,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001588",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001588.tgz",
-      "integrity": "sha512-+hVY9jE44uKLkH0SrUTqxjxqNTOWHsbnQDIKjwkZ3lNTzUUVdBLBGXtj/q5Mp5u98r3droaZAewQuEDzjQdZlQ==",
+      "version": "1.0.30001605",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001605.tgz",
+      "integrity": "sha512-nXwGlFWo34uliI9z3n6Qc0wZaf7zaZWA1CPZ169La5mV3I/gem7bst0vr5XQH5TJXZIMfDeZyOrZnSlVzKxxHQ==",
       "dev": true,
       "funding": [
         {
@@ -3584,6 +3618,19 @@
         "node": ">= 10"
       }
     },
+    "node_modules/compress-commons/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/computeds": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
@@ -3612,9 +3659,9 @@
       "dev": true
     },
     "node_modules/core-js": {
-      "version": "3.36.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.36.0.tgz",
-      "integrity": "sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==",
+      "version": "3.36.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.36.1.tgz",
+      "integrity": "sha512-BTvUrwxVBezj5SZ3f10ImnX2oRByMxql3EimVqMysepbC9EeMUOpLwdy6Eoili2x6E4kf+ZUB5k/+Jv55alPfA==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -3649,6 +3696,19 @@
         "node": ">= 10"
       }
     },
+    "node_modules/crc32-stream/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -3795,12 +3855,12 @@
       }
     },
     "node_modules/date-fns-tz": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.0.tgz",
-      "integrity": "sha512-OAtcLdB9vxSXTWHdT8b398ARImVwQMyjfYGkKD2zaGpHseG2UPHbHjXELReErZFxWdSLph3c2zOaaTyHfOhERQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.1.tgz",
+      "integrity": "sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==",
       "optional": true,
       "peerDependencies": {
-        "date-fns": ">=2.0.0"
+        "date-fns": "2.x"
       }
     },
     "node_modules/dayjs": {
@@ -4049,30 +4109,13 @@
       }
     },
     "node_modules/docx/node_modules/@types/node": {
-      "version": "20.11.30",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz",
-      "integrity": "sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==",
+      "version": "20.12.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.4.tgz",
+      "integrity": "sha512-E+Fa9z3wSQpzgYQdYmme5X3OTuejnnTx88A6p6vkkJosR3KBz+HpE3kqNm98VE6cfLFcISx7zW7MsJkH6KwbTw==",
       "dependencies": {
         "undici-types": "~5.26.4"
       }
     },
-    "node_modules/docx/node_modules/nanoid": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.6.tgz",
-      "integrity": "sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "bin": {
-        "nanoid": "bin/nanoid.js"
-      },
-      "engines": {
-        "node": "^18 || >=20"
-      }
-    },
     "node_modules/domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@@ -4092,15 +4135,15 @@
       "integrity": "sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ=="
     },
     "node_modules/dompurify": {
-      "version": "2.4.7",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.7.tgz",
-      "integrity": "sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ==",
+      "version": "2.4.9",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.9.tgz",
+      "integrity": "sha512-iHtnxYMotKgOTvxIqq677JsKHvCOkAFqj9x8Mek2zdeHW1XjuFKwjpmZeMaXQRQ8AbJZDbcRz/+r1QhwvFtmQg==",
       "optional": true
     },
     "node_modules/dotenv": {
-      "version": "16.4.4",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.4.tgz",
-      "integrity": "sha512-XvPXc8XAQThSjAbY6cQ/9PcBXmFoWuw1sQ3b8HqUCR6ziGXjkTi//kB9SWa2UwqlgdAIuRqAa/9hVljzPehbYg==",
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
       "engines": {
         "node": ">=12"
       },
@@ -4116,38 +4159,6 @@
         "readable-stream": "^2.0.2"
       }
     },
-    "node_modules/duplexer2/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
-    },
-    "node_modules/duplexer2/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/duplexer2/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-    },
-    "node_modules/duplexer2/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -4220,15 +4231,15 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.673",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.673.tgz",
-      "integrity": "sha512-zjqzx4N7xGdl5468G+vcgzDhaHkaYgVcf9MqgexcTqsl2UHSCmOj/Bi3HAprg4BZCpC7HyD8a6nZl6QAZf72gw==",
+      "version": "1.4.728",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.728.tgz",
+      "integrity": "sha512-Ud1v7hJJYIqehlUJGqR6PF1Ek8l80zWwxA6nGxigBsGJ9f9M2fciHyrIiNMerSHSH3p+0/Ia7jIlnDkt41h5cw==",
       "dev": true
     },
     "node_modules/elliptic": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
-      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
+      "version": "6.5.5",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.5.tgz",
+      "integrity": "sha512-7EjbcmUm17NQFu4Pmgmq2olYMj8nwMnpcddByChSUjArp8F5DQWcIcpriwO4ZToLNAJig0yiyjswfyGNje/ixw==",
       "dependencies": {
         "bn.js": "^4.11.9",
         "brorand": "^1.1.0",
@@ -4359,16 +4370,16 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.56.0.tgz",
-      "integrity": "sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==",
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
+      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
         "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.56.0",
-        "@humanwhocodes/config-array": "^0.11.13",
+        "@eslint/js": "8.57.0",
+        "@humanwhocodes/config-array": "^0.11.14",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
         "@ungap/structured-clone": "^1.2.0",
@@ -4456,16 +4467,17 @@
       }
     },
     "node_modules/eslint-plugin-vue": {
-      "version": "9.21.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.21.1.tgz",
-      "integrity": "sha512-XVtI7z39yOVBFJyi8Ljbn7kY9yHzznKXL02qQYn+ta63Iy4A9JFBw6o4OSB9hyD2++tVT+su9kQqetUyCCwhjw==",
+      "version": "9.24.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.24.0.tgz",
+      "integrity": "sha512-9SkJMvF8NGMT9aQCwFc5rj8Wo1XWSMSHk36i7ZwdI614BU7sIOR28ZjuFPKp8YGymZN12BSEbiSwa7qikp+PBw==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
+        "globals": "^13.24.0",
         "natural-compare": "^1.4.0",
         "nth-check": "^2.1.1",
-        "postcss-selector-parser": "^6.0.13",
-        "semver": "^7.5.4",
+        "postcss-selector-parser": "^6.0.15",
+        "semver": "^7.6.0",
         "vue-eslint-parser": "^9.4.2",
         "xml-name-validator": "^4.0.0"
       },
@@ -4476,6 +4488,21 @@
         "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/eslint-plugin-vue/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/eslint-plugin-vue/node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -4489,9 +4516,9 @@
       }
     },
     "node_modules/eslint-plugin-vue/node_modules/postcss-selector-parser": {
-      "version": "6.0.15",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz",
-      "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==",
+      "version": "6.0.16",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
+      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
       "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -4766,6 +4793,19 @@
         "node": ">=8.3.0"
       }
     },
+    "node_modules/exceljs/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/exceljs/node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
@@ -4930,9 +4970,9 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.2.9",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz",
-      "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
+      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
     "node_modules/follow-redirects": {
@@ -5032,17 +5072,6 @@
         "node": ">=0.6"
       }
     },
-    "node_modules/fstream/node_modules/mkdirp": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-      "dependencies": {
-        "minimist": "^1.2.6"
-      },
-      "bin": {
-        "mkdirp": "bin/cmd.js"
-      }
-    },
     "node_modules/fstream/node_modules/rimraf": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
@@ -5284,13 +5313,12 @@
       }
     },
     "node_modules/hash-base": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz",
-      "integrity": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.0.4.tgz",
+      "integrity": "sha512-EeeoJKjTyt868liAlVmcv2ZsUfGHlE3Q+BICOXcZiwN3osr5Q/zFGYmTJpoIzuaSTAwndFy+GqhEwlU4L3j4Ow==",
       "dependencies": {
-        "inherits": "^2.0.4",
-        "readable-stream": "^3.6.0",
-        "safe-buffer": "^5.2.0"
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
       },
       "engines": {
         "node": ">=4"
@@ -5306,9 +5334,9 @@
       }
     },
     "node_modules/hasown": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
-      "integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -5627,6 +5655,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -5679,16 +5712,16 @@
       }
     },
     "node_modules/js-beautify/node_modules/glob": {
-      "version": "10.3.10",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
-      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
+      "version": "10.3.12",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
+      "integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
       "dev": true,
       "dependencies": {
         "foreground-child": "^3.1.0",
-        "jackspeak": "^2.3.5",
+        "jackspeak": "^2.3.6",
         "minimatch": "^9.0.1",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
-        "path-scurry": "^1.10.1"
+        "minipass": "^7.0.4",
+        "path-scurry": "^1.10.2"
       },
       "bin": {
         "glob": "dist/esm/bin.mjs"
@@ -5864,43 +5897,11 @@
         "setimmediate": "^1.0.5"
       }
     },
-    "node_modules/jszip/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
-    },
     "node_modules/jszip/node_modules/pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
       "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
     },
-    "node_modules/jszip/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/jszip/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-    },
-    "node_modules/jszip/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -5921,38 +5922,6 @@
         "node": ">= 0.6.3"
       }
     },
-    "node_modules/lazystream/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
-    },
-    "node_modules/lazystream/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/lazystream/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-    },
-    "node_modules/lazystream/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -6173,9 +6142,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.7",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
-      "integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==",
+      "version": "0.30.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.9.tgz",
+      "integrity": "sha512-S1+hd+dIrC8EZqKyT9DstTH/0Z+f76kmmvZnkfQVmOpDEF9iVgdYif3Q/pIWHmCoo59bQVGW0kVL3e2nl+9+Sw==",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -6309,17 +6278,28 @@
       }
     },
     "node_modules/minipass": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
-      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
+      "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
       "engines": {
-        "node": ">=8"
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
       }
     },
     "node_modules/mlly": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.5.0.tgz",
-      "integrity": "sha512-NPVQvAY1xr1QoVeG0cy8yUYC7FQcOx6evl/RjT1wL5FvzPnzOysoqB/jmx/DhssT2dYa8nxECLAaFI/+gVLhDQ==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.6.1.tgz",
+      "integrity": "sha512-vLgaHvaeunuOXHSmEbZ9izxPx3USsk8KCQ8iC+aTlp5sKRSoZvwhHh5L9VbKSaVC6sJDqbyohIS76E2VmHIPAA==",
       "dev": true,
       "dependencies": {
         "acorn": "^8.11.3",
@@ -6351,9 +6331,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.6.tgz",
+      "integrity": "sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA==",
       "funding": [
         {
           "type": "github",
@@ -6361,10 +6341,10 @@
         }
       ],
       "bin": {
-        "nanoid": "bin/nanoid.cjs"
+        "nanoid": "bin/nanoid.js"
       },
       "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+        "node": "^18 || >=20"
       }
     },
     "node_modules/natural-compare": {
@@ -6412,9 +6392,9 @@
       }
     },
     "node_modules/npm-run-path": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.2.0.tgz",
-      "integrity": "sha512-W4/tgAXFqFA0iL7fk0+uQ3g7wkL8xJmx3XdK0VGb4cHW//eZTtKGvFBBoRKVTpY7n6ze4NL9ly7rgXcHufqXKg==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+      "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
       "dev": true,
       "dependencies": {
         "path-key": "^4.0.0"
@@ -6603,15 +6583,19 @@
       }
     },
     "node_modules/parse-asn1": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz",
-      "integrity": "sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==",
+      "version": "5.1.7",
+      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.7.tgz",
+      "integrity": "sha512-CTM5kuWR3sx9IFamcl5ErfPl6ea/N8IYwiJ+vpeB2g+1iknv7zBl5uPwbMbRVznRVbrNY6lGuDoE5b30grmbqg==",
       "dependencies": {
-        "asn1.js": "^5.2.0",
-        "browserify-aes": "^1.0.0",
-        "evp_bytestokey": "^1.0.0",
-        "pbkdf2": "^3.0.3",
-        "safe-buffer": "^5.1.1"
+        "asn1.js": "^4.10.1",
+        "browserify-aes": "^1.2.0",
+        "evp_bytestokey": "^1.0.3",
+        "hash-base": "~3.0",
+        "pbkdf2": "^3.1.2",
+        "safe-buffer": "^5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
       }
     },
     "node_modules/parse5": {
@@ -6663,11 +6647,11 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-scurry": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz",
-      "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==",
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.2.tgz",
+      "integrity": "sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==",
       "dependencies": {
-        "lru-cache": "^9.1.1 || ^10.0.0",
+        "lru-cache": "^10.2.0",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
       },
       "engines": {
@@ -6746,6 +6730,14 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/pinia": {
       "version": "2.1.7",
       "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
@@ -6816,9 +6808,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.35",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
-      "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
       "funding": [
         {
           "type": "opencollective",
@@ -6836,7 +6828,7 @@
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -6940,9 +6932,9 @@
       }
     },
     "node_modules/postcss-nested/node_modules/postcss-selector-parser": {
-      "version": "6.0.15",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz",
-      "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==",
+      "version": "6.0.16",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
+      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -6969,6 +6961,23 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/postcss/node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -7097,11 +7106,11 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.11.2",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
-      "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
+      "version": "6.12.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.0.tgz",
+      "integrity": "sha512-trVZiI6RMOkO476zLGaBIzszOdFPnCCXHPG9kn0yuS1uz6xdVxPfZdB3vUig9pxPFDM9BRAgz/YUIVQ1/vuiUg==",
       "dependencies": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.0.6"
       },
       "engines": {
         "node": ">=0.6"
@@ -7174,33 +7183,6 @@
         "safe-buffer": "^5.1.0"
       }
     },
-    "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
-      },
-      "peerDependencies": {
-        "react": "^18.2.0"
-      }
-    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -7214,26 +7196,24 @@
         "pify": "^2.3.0"
       }
     },
-    "node_modules/read-cache/node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "engines": {
-        "node": ">=0.10.0"
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
       }
     },
-    "node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
+    "node_modules/readable-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "node_modules/readdir-glob": {
       "version": "1.1.3",
@@ -7271,9 +7251,9 @@
       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "node_modules/rehackt": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/rehackt/-/rehackt-0.0.5.tgz",
-      "integrity": "sha512-BI1rV+miEkaHj8zd2n+gaMgzu/fKz7BGlb4zZ6HAiY9adDmJMkaDcmuXlJFv0eyKUob+oszs3/2gdnXUrzx2Tg==",
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/rehackt/-/rehackt-0.0.6.tgz",
+      "integrity": "sha512-l3WEzkt4ntlEc/IB3/mF6SRgNHA6zfQR7BlGOgBTOmx7IJJXojDASav+NsgXHFjHn+6RmwqsGPFgZpabWpeOdw==",
       "peerDependencies": {
         "@types/react": "*",
         "react": "*"
@@ -7361,6 +7341,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -7453,7 +7434,8 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
     },
     "node_modules/sax": {
       "version": "1.3.0",
@@ -7471,16 +7453,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
-    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -7491,16 +7463,16 @@
       }
     },
     "node_modules/set-function-length": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
-      "integrity": "sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
       "dependencies": {
-        "define-data-property": "^1.1.2",
+        "define-data-property": "^1.1.4",
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.3",
+        "get-intrinsic": "^1.2.4",
         "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.1"
+        "has-property-descriptors": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -7594,9 +7566,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7623,13 +7595,18 @@
       "dev": true
     },
     "node_modules/string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
       "dependencies": {
-        "safe-buffer": "~5.2.0"
+        "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -7705,21 +7682,21 @@
       }
     },
     "node_modules/strip-literal": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-2.0.0.tgz",
-      "integrity": "sha512-f9vHgsCWBq2ugHAkGMiiYY+AYG0D/cbloKKg0nhaaaSNsujdGIpVXCNsrJpCKr5M0f4aI31mr13UjY6GAuXCKA==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-2.1.0.tgz",
+      "integrity": "sha512-Op+UycaUt/8FbN/Z2TWPBLge3jWrP3xj10f3fnYxf052bKuS3EKs1ZQcVGjnEMdsNVAM+plXRdmjrZ/KgG3Skw==",
       "dev": true,
       "dependencies": {
-        "js-tokens": "^8.0.2"
+        "js-tokens": "^9.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/strip-literal/node_modules/js-tokens": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-8.0.3.tgz",
-      "integrity": "sha512-UfJMcSJc+SEXEl9lH/VLHSZbThQyLpw1vLO1Lb+j4RWDvG3N2f7yj3PVQA3cmkTBNldJ9eFnM+xEXxHIXrYiJw==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.0.tgz",
+      "integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==",
       "dev": true
     },
     "node_modules/sucrase": {
@@ -7752,15 +7729,15 @@
       }
     },
     "node_modules/sucrase/node_modules/glob": {
-      "version": "10.3.10",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
-      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
+      "version": "10.3.12",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
+      "integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
       "dependencies": {
         "foreground-child": "^3.1.0",
-        "jackspeak": "^2.3.5",
+        "jackspeak": "^2.3.6",
         "minimatch": "^9.0.1",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
-        "path-scurry": "^1.10.1"
+        "minipass": "^7.0.4",
+        "path-scurry": "^1.10.2"
       },
       "bin": {
         "glob": "dist/esm/bin.mjs"
@@ -7841,9 +7818,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
-      "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
+      "integrity": "sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -7853,7 +7830,7 @@
         "fast-glob": "^3.3.0",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "jiti": "^1.19.1",
+        "jiti": "^1.21.0",
         "lilconfig": "^2.1.0",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
@@ -7877,9 +7854,9 @@
       }
     },
     "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
-      "version": "6.0.15",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz",
-      "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==",
+      "version": "6.0.16",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
+      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -7903,6 +7880,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/tar-stream/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/text-segmentation": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
@@ -7952,9 +7942,9 @@
       "dev": true
     },
     "node_modules/tinypool": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.8.2.tgz",
-      "integrity": "sha512-SUszKYe5wgsxnNOVlBYO6IC+8VGWdVGZWAqUxp3UErNBtptZvWbwyUOyzNL59zigz2rCA92QiL3wvG+JDSdJdQ==",
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.8.3.tgz",
+      "integrity": "sha512-Ud7uepAklqRH1bvwy22ynrliC7Dljz7Tm8M/0RBUW+YRa4YHhZ6e4PpgE+fu1zr/WqB1kbeuVrdfeuyIBpy4tw==",
       "dev": true,
       "engines": {
         "node": ">=14.0.0"
@@ -7970,14 +7960,11 @@
       }
     },
     "node_modules/tmp": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
-      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
-      "dependencies": {
-        "rimraf": "^3.0.0"
-      },
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
+      "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==",
       "engines": {
-        "node": ">=8.17.0"
+        "node": ">=14.14"
       }
     },
     "node_modules/to-fast-properties": {
@@ -8036,9 +8023,9 @@
       }
     },
     "node_modules/ts-api-utils": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.2.1.tgz",
-      "integrity": "sha512-RIYA36cJn2WiH9Hy77hdF9r7oEwxAtB/TS9/S4Qd90Ap4z5FSiin5zEiTL44OII1Y3IIlEvxwxFUVgrHSZ/UpA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
+      "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
       "dev": true,
       "engines": {
         "node": ">=16"
@@ -8082,9 +8069,9 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/turndown": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/turndown/-/turndown-7.1.2.tgz",
-      "integrity": "sha512-ntI9R7fcUKjqBP6QU8rBK2Ehyt8LAzt3UBT9JR9tgo6GtuKvyUzpayWmeMKJw1DPdXzktvtIT8m2mVXz+bL/Qg==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/turndown/-/turndown-7.1.3.tgz",
+      "integrity": "sha512-Z3/iJ6IWh8VBiACWQJaA5ulPQE5E1QwvBHj00uGzdQxdRnd8fh1DPqNOJqzQDu6DkOstORrtXzf/9adB+vMtEA==",
       "dependencies": {
         "domino": "^2.1.6"
       }
@@ -8136,9 +8123,9 @@
       }
     },
     "node_modules/ufo": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.4.0.tgz",
-      "integrity": "sha512-Hhy+BhRBleFjpJ2vchUNN40qgkh0366FWJGqVLYBHev0vpHTrXSA0ryT+74UiW6KWsldNurQMKGqCm1M2zBciQ==",
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.3.tgz",
+      "integrity": "sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==",
       "dev": true
     },
     "node_modules/undici-types": {
@@ -8172,38 +8159,6 @@
         "setimmediate": "~1.0.4"
       }
     },
-    "node_modules/unzipper/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
-    },
-    "node_modules/unzipper/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/unzipper/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-    },
-    "node_modules/unzipper/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
@@ -8298,9 +8253,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
-      "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
+      "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
       "dependencies": {
         "esbuild": "^0.18.10",
         "postcss": "^8.4.27",
@@ -8352,9 +8307,9 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.3.1.tgz",
-      "integrity": "sha512-azbRrqRxlWTJEVbzInZCTchx0X69M/XPTCz4H+TLvlTcR/xH/3hkRqhOakT41fMJCMzXTu4UvegkZiEoJAWvng==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.4.0.tgz",
+      "integrity": "sha512-VZDAseqjrHgNd4Kh8icYHWzTKSCZMhia7GyHfhtzLW33fZlG9SwsB6CEhgyVOWkJfJ2pFLrp/Gj1FSfAiqH9Lw==",
       "dev": true,
       "dependencies": {
         "cac": "^6.7.14",
@@ -8374,9 +8329,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/android-arm": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
-      "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
       "cpu": [
         "arm"
       ],
@@ -8390,9 +8345,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/android-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
-      "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
       "cpu": [
         "arm64"
       ],
@@ -8406,9 +8361,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/android-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
-      "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
       "cpu": [
         "x64"
       ],
@@ -8422,9 +8377,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/darwin-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
-      "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
       "cpu": [
         "arm64"
       ],
@@ -8438,9 +8393,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/darwin-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
-      "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
       "cpu": [
         "x64"
       ],
@@ -8454,9 +8409,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
-      "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
       "cpu": [
         "arm64"
       ],
@@ -8470,9 +8425,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/freebsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
-      "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
       "cpu": [
         "x64"
       ],
@@ -8486,9 +8441,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/linux-arm": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
-      "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
       "cpu": [
         "arm"
       ],
@@ -8502,9 +8457,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/linux-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
-      "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
       "cpu": [
         "arm64"
       ],
@@ -8518,9 +8473,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/linux-ia32": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
-      "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
       "cpu": [
         "ia32"
       ],
@@ -8534,9 +8489,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/linux-loong64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
-      "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
       "cpu": [
         "loong64"
       ],
@@ -8550,9 +8505,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/linux-mips64el": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
-      "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
       "cpu": [
         "mips64el"
       ],
@@ -8566,9 +8521,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/linux-ppc64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
-      "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
       "cpu": [
         "ppc64"
       ],
@@ -8582,9 +8537,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/linux-riscv64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
-      "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
       "cpu": [
         "riscv64"
       ],
@@ -8598,9 +8553,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/linux-s390x": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
-      "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
       "cpu": [
         "s390x"
       ],
@@ -8614,9 +8569,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/linux-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz",
-      "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
       "cpu": [
         "x64"
       ],
@@ -8630,9 +8585,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/netbsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
-      "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
       "cpu": [
         "x64"
       ],
@@ -8646,9 +8601,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/openbsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
-      "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
       "cpu": [
         "x64"
       ],
@@ -8662,9 +8617,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/sunos-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
-      "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
       "cpu": [
         "x64"
       ],
@@ -8678,9 +8633,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/win32-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
-      "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
       "cpu": [
         "arm64"
       ],
@@ -8694,9 +8649,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/win32-ia32": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
-      "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
       "cpu": [
         "ia32"
       ],
@@ -8710,9 +8665,9 @@
       }
     },
     "node_modules/vite-node/node_modules/@esbuild/win32-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
-      "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
       "cpu": [
         "x64"
       ],
@@ -8726,9 +8681,9 @@
       }
     },
     "node_modules/vite-node/node_modules/esbuild": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
-      "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
@@ -8738,35 +8693,35 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.19.12",
-        "@esbuild/android-arm": "0.19.12",
-        "@esbuild/android-arm64": "0.19.12",
-        "@esbuild/android-x64": "0.19.12",
-        "@esbuild/darwin-arm64": "0.19.12",
-        "@esbuild/darwin-x64": "0.19.12",
-        "@esbuild/freebsd-arm64": "0.19.12",
-        "@esbuild/freebsd-x64": "0.19.12",
-        "@esbuild/linux-arm": "0.19.12",
-        "@esbuild/linux-arm64": "0.19.12",
-        "@esbuild/linux-ia32": "0.19.12",
-        "@esbuild/linux-loong64": "0.19.12",
-        "@esbuild/linux-mips64el": "0.19.12",
-        "@esbuild/linux-ppc64": "0.19.12",
-        "@esbuild/linux-riscv64": "0.19.12",
-        "@esbuild/linux-s390x": "0.19.12",
-        "@esbuild/linux-x64": "0.19.12",
-        "@esbuild/netbsd-x64": "0.19.12",
-        "@esbuild/openbsd-x64": "0.19.12",
-        "@esbuild/sunos-x64": "0.19.12",
-        "@esbuild/win32-arm64": "0.19.12",
-        "@esbuild/win32-ia32": "0.19.12",
-        "@esbuild/win32-x64": "0.19.12"
+        "@esbuild/aix-ppc64": "0.20.2",
+        "@esbuild/android-arm": "0.20.2",
+        "@esbuild/android-arm64": "0.20.2",
+        "@esbuild/android-x64": "0.20.2",
+        "@esbuild/darwin-arm64": "0.20.2",
+        "@esbuild/darwin-x64": "0.20.2",
+        "@esbuild/freebsd-arm64": "0.20.2",
+        "@esbuild/freebsd-x64": "0.20.2",
+        "@esbuild/linux-arm": "0.20.2",
+        "@esbuild/linux-arm64": "0.20.2",
+        "@esbuild/linux-ia32": "0.20.2",
+        "@esbuild/linux-loong64": "0.20.2",
+        "@esbuild/linux-mips64el": "0.20.2",
+        "@esbuild/linux-ppc64": "0.20.2",
+        "@esbuild/linux-riscv64": "0.20.2",
+        "@esbuild/linux-s390x": "0.20.2",
+        "@esbuild/linux-x64": "0.20.2",
+        "@esbuild/netbsd-x64": "0.20.2",
+        "@esbuild/openbsd-x64": "0.20.2",
+        "@esbuild/sunos-x64": "0.20.2",
+        "@esbuild/win32-arm64": "0.20.2",
+        "@esbuild/win32-ia32": "0.20.2",
+        "@esbuild/win32-x64": "0.20.2"
       }
     },
     "node_modules/vite-node/node_modules/rollup": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.12.0.tgz",
-      "integrity": "sha512-wz66wn4t1OHIJw3+XU7mJJQV/2NAfw5OAk6G6Hoo3zcvz/XOfQ52Vgi+AN4Uxoxi0KBBwk2g8zPrTDA4btSB/Q==",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.0.tgz",
+      "integrity": "sha512-Qe7w62TyawbDzB4yt32R0+AbIo6m1/sqO7UPzFS8Z/ksL5mrfhA0v4CavfdmFav3D+ub4QeAgsGEe84DoWe/nQ==",
       "dev": true,
       "dependencies": {
         "@types/estree": "1.0.5"
@@ -8779,31 +8734,33 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.12.0",
-        "@rollup/rollup-android-arm64": "4.12.0",
-        "@rollup/rollup-darwin-arm64": "4.12.0",
-        "@rollup/rollup-darwin-x64": "4.12.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.12.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.12.0",
-        "@rollup/rollup-linux-arm64-musl": "4.12.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.12.0",
-        "@rollup/rollup-linux-x64-gnu": "4.12.0",
-        "@rollup/rollup-linux-x64-musl": "4.12.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.12.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.12.0",
-        "@rollup/rollup-win32-x64-msvc": "4.12.0",
+        "@rollup/rollup-android-arm-eabi": "4.14.0",
+        "@rollup/rollup-android-arm64": "4.14.0",
+        "@rollup/rollup-darwin-arm64": "4.14.0",
+        "@rollup/rollup-darwin-x64": "4.14.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.14.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.14.0",
+        "@rollup/rollup-linux-arm64-musl": "4.14.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.14.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.14.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.14.0",
+        "@rollup/rollup-linux-x64-gnu": "4.14.0",
+        "@rollup/rollup-linux-x64-musl": "4.14.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.14.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.14.0",
+        "@rollup/rollup-win32-x64-msvc": "4.14.0",
         "fsevents": "~2.3.2"
       }
     },
     "node_modules/vite-node/node_modules/vite": {
-      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.5.tgz",
-      "integrity": "sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q==",
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+      "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
       "dev": true,
       "dependencies": {
-        "esbuild": "^0.19.3",
-        "postcss": "^8.4.35",
-        "rollup": "^4.2.0"
+        "esbuild": "^0.20.1",
+        "postcss": "^8.4.38",
+        "rollup": "^4.13.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -8851,24 +8808,24 @@
       }
     },
     "node_modules/vite-plugin-css-injected-by-js": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-3.4.0.tgz",
-      "integrity": "sha512-wS5+UYtJXQ/vNornsqTQxOLBVO/UjXU54ZsYMeX0mj2OrbStMQ4GLgvneVDQGPwyGJcm/ntBPawc2lA7xx+Lpg==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-3.5.0.tgz",
+      "integrity": "sha512-d0QaHH9kS93J25SwRqJNEfE29PSuQS5jn51y9N9i2Yoq0FRO7rjuTeLvjM5zwklZlRrIn6SUdtOEDKyHokgJZg==",
       "peerDependencies": {
         "vite": ">2.0.0-0"
       }
     },
     "node_modules/vitest": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.3.1.tgz",
-      "integrity": "sha512-/1QJqXs8YbCrfv/GPQ05wAZf2eakUPLPa18vkJAKE7RXOKfVHqMZZ1WlTjiwl6Gcn65M5vpNUB6EFLnEdRdEXQ==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.4.0.tgz",
+      "integrity": "sha512-gujzn0g7fmwf83/WzrDTnncZt2UiXP41mHuFYFrdwaLRVQ6JYQEiME2IfEjU3vcFL3VKa75XhI3lFgn+hfVsQw==",
       "dev": true,
       "dependencies": {
-        "@vitest/expect": "1.3.1",
-        "@vitest/runner": "1.3.1",
-        "@vitest/snapshot": "1.3.1",
-        "@vitest/spy": "1.3.1",
-        "@vitest/utils": "1.3.1",
+        "@vitest/expect": "1.4.0",
+        "@vitest/runner": "1.4.0",
+        "@vitest/snapshot": "1.4.0",
+        "@vitest/spy": "1.4.0",
+        "@vitest/utils": "1.4.0",
         "acorn-walk": "^8.3.2",
         "chai": "^4.3.10",
         "debug": "^4.3.4",
@@ -8882,7 +8839,7 @@
         "tinybench": "^2.5.1",
         "tinypool": "^0.8.2",
         "vite": "^5.0.0",
-        "vite-node": "1.3.1",
+        "vite-node": "1.4.0",
         "why-is-node-running": "^2.2.2"
       },
       "bin": {
@@ -8897,8 +8854,8 @@
       "peerDependencies": {
         "@edge-runtime/vm": "*",
         "@types/node": "^18.0.0 || >=20.0.0",
-        "@vitest/browser": "1.3.1",
-        "@vitest/ui": "1.3.1",
+        "@vitest/browser": "1.4.0",
+        "@vitest/ui": "1.4.0",
         "happy-dom": "*",
         "jsdom": "*"
       },
@@ -8924,9 +8881,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/android-arm": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
-      "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
       "cpu": [
         "arm"
       ],
@@ -8940,9 +8897,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/android-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
-      "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
       "cpu": [
         "arm64"
       ],
@@ -8956,9 +8913,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/android-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
-      "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
       "cpu": [
         "x64"
       ],
@@ -8972,9 +8929,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/darwin-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
-      "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
       "cpu": [
         "arm64"
       ],
@@ -8988,9 +8945,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/darwin-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
-      "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
       "cpu": [
         "x64"
       ],
@@ -9004,9 +8961,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
-      "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
       "cpu": [
         "arm64"
       ],
@@ -9020,9 +8977,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/freebsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
-      "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
       "cpu": [
         "x64"
       ],
@@ -9036,9 +8993,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/linux-arm": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
-      "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
       "cpu": [
         "arm"
       ],
@@ -9052,9 +9009,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/linux-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
-      "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
       "cpu": [
         "arm64"
       ],
@@ -9068,9 +9025,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/linux-ia32": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
-      "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
       "cpu": [
         "ia32"
       ],
@@ -9084,9 +9041,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/linux-loong64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
-      "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
       "cpu": [
         "loong64"
       ],
@@ -9100,9 +9057,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/linux-mips64el": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
-      "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
       "cpu": [
         "mips64el"
       ],
@@ -9116,9 +9073,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/linux-ppc64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
-      "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
       "cpu": [
         "ppc64"
       ],
@@ -9132,9 +9089,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/linux-riscv64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
-      "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
       "cpu": [
         "riscv64"
       ],
@@ -9148,9 +9105,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/linux-s390x": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
-      "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
       "cpu": [
         "s390x"
       ],
@@ -9164,9 +9121,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/linux-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz",
-      "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
       "cpu": [
         "x64"
       ],
@@ -9180,9 +9137,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/netbsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
-      "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
       "cpu": [
         "x64"
       ],
@@ -9196,9 +9153,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/openbsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
-      "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
       "cpu": [
         "x64"
       ],
@@ -9212,9 +9169,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/sunos-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
-      "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
       "cpu": [
         "x64"
       ],
@@ -9228,9 +9185,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/win32-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
-      "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
       "cpu": [
         "arm64"
       ],
@@ -9244,9 +9201,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/win32-ia32": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
-      "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
       "cpu": [
         "ia32"
       ],
@@ -9260,9 +9217,9 @@
       }
     },
     "node_modules/vitest/node_modules/@esbuild/win32-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
-      "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
       "cpu": [
         "x64"
       ],
@@ -9276,9 +9233,9 @@
       }
     },
     "node_modules/vitest/node_modules/esbuild": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
-      "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
@@ -9288,35 +9245,35 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.19.12",
-        "@esbuild/android-arm": "0.19.12",
-        "@esbuild/android-arm64": "0.19.12",
-        "@esbuild/android-x64": "0.19.12",
-        "@esbuild/darwin-arm64": "0.19.12",
-        "@esbuild/darwin-x64": "0.19.12",
-        "@esbuild/freebsd-arm64": "0.19.12",
-        "@esbuild/freebsd-x64": "0.19.12",
-        "@esbuild/linux-arm": "0.19.12",
-        "@esbuild/linux-arm64": "0.19.12",
-        "@esbuild/linux-ia32": "0.19.12",
-        "@esbuild/linux-loong64": "0.19.12",
-        "@esbuild/linux-mips64el": "0.19.12",
-        "@esbuild/linux-ppc64": "0.19.12",
-        "@esbuild/linux-riscv64": "0.19.12",
-        "@esbuild/linux-s390x": "0.19.12",
-        "@esbuild/linux-x64": "0.19.12",
-        "@esbuild/netbsd-x64": "0.19.12",
-        "@esbuild/openbsd-x64": "0.19.12",
-        "@esbuild/sunos-x64": "0.19.12",
-        "@esbuild/win32-arm64": "0.19.12",
-        "@esbuild/win32-ia32": "0.19.12",
-        "@esbuild/win32-x64": "0.19.12"
+        "@esbuild/aix-ppc64": "0.20.2",
+        "@esbuild/android-arm": "0.20.2",
+        "@esbuild/android-arm64": "0.20.2",
+        "@esbuild/android-x64": "0.20.2",
+        "@esbuild/darwin-arm64": "0.20.2",
+        "@esbuild/darwin-x64": "0.20.2",
+        "@esbuild/freebsd-arm64": "0.20.2",
+        "@esbuild/freebsd-x64": "0.20.2",
+        "@esbuild/linux-arm": "0.20.2",
+        "@esbuild/linux-arm64": "0.20.2",
+        "@esbuild/linux-ia32": "0.20.2",
+        "@esbuild/linux-loong64": "0.20.2",
+        "@esbuild/linux-mips64el": "0.20.2",
+        "@esbuild/linux-ppc64": "0.20.2",
+        "@esbuild/linux-riscv64": "0.20.2",
+        "@esbuild/linux-s390x": "0.20.2",
+        "@esbuild/linux-x64": "0.20.2",
+        "@esbuild/netbsd-x64": "0.20.2",
+        "@esbuild/openbsd-x64": "0.20.2",
+        "@esbuild/sunos-x64": "0.20.2",
+        "@esbuild/win32-arm64": "0.20.2",
+        "@esbuild/win32-ia32": "0.20.2",
+        "@esbuild/win32-x64": "0.20.2"
       }
     },
     "node_modules/vitest/node_modules/rollup": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.12.0.tgz",
-      "integrity": "sha512-wz66wn4t1OHIJw3+XU7mJJQV/2NAfw5OAk6G6Hoo3zcvz/XOfQ52Vgi+AN4Uxoxi0KBBwk2g8zPrTDA4btSB/Q==",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.0.tgz",
+      "integrity": "sha512-Qe7w62TyawbDzB4yt32R0+AbIo6m1/sqO7UPzFS8Z/ksL5mrfhA0v4CavfdmFav3D+ub4QeAgsGEe84DoWe/nQ==",
       "dev": true,
       "dependencies": {
         "@types/estree": "1.0.5"
@@ -9329,31 +9286,33 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.12.0",
-        "@rollup/rollup-android-arm64": "4.12.0",
-        "@rollup/rollup-darwin-arm64": "4.12.0",
-        "@rollup/rollup-darwin-x64": "4.12.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.12.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.12.0",
-        "@rollup/rollup-linux-arm64-musl": "4.12.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.12.0",
-        "@rollup/rollup-linux-x64-gnu": "4.12.0",
-        "@rollup/rollup-linux-x64-musl": "4.12.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.12.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.12.0",
-        "@rollup/rollup-win32-x64-msvc": "4.12.0",
+        "@rollup/rollup-android-arm-eabi": "4.14.0",
+        "@rollup/rollup-android-arm64": "4.14.0",
+        "@rollup/rollup-darwin-arm64": "4.14.0",
+        "@rollup/rollup-darwin-x64": "4.14.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.14.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.14.0",
+        "@rollup/rollup-linux-arm64-musl": "4.14.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.14.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.14.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.14.0",
+        "@rollup/rollup-linux-x64-gnu": "4.14.0",
+        "@rollup/rollup-linux-x64-musl": "4.14.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.14.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.14.0",
+        "@rollup/rollup-win32-x64-msvc": "4.14.0",
         "fsevents": "~2.3.2"
       }
     },
     "node_modules/vitest/node_modules/vite": {
-      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.5.tgz",
-      "integrity": "sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q==",
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+      "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
       "dev": true,
       "dependencies": {
-        "esbuild": "^0.19.3",
-        "postcss": "^8.4.35",
-        "rollup": "^4.2.0"
+        "esbuild": "^0.20.1",
+        "postcss": "^8.4.38",
+        "rollup": "^4.13.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -9401,15 +9360,15 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.4.19",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.19.tgz",
-      "integrity": "sha512-W/7Fc9KUkajFU8dBeDluM4sRGc/aa4YJnOYck8dkjgZoXtVsn3OeTGni66FV1l3+nvPA7VBFYtPioaGKUmEADw==",
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz",
+      "integrity": "sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.19",
-        "@vue/compiler-sfc": "3.4.19",
-        "@vue/runtime-dom": "3.4.19",
-        "@vue/server-renderer": "3.4.19",
-        "@vue/shared": "3.4.19"
+        "@vue/compiler-dom": "3.4.21",
+        "@vue/compiler-sfc": "3.4.21",
+        "@vue/runtime-dom": "3.4.21",
+        "@vue/server-renderer": "3.4.21",
+        "@vue/shared": "3.4.21"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -9421,9 +9380,9 @@
       }
     },
     "node_modules/vue-component-type-helpers": {
-      "version": "1.8.27",
-      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-1.8.27.tgz",
-      "integrity": "sha512-0vOfAtI67UjeO1G6UiX5Kd76CqaQ67wrRZiOe7UAb9Jm6GzlUr/fC7CV90XfwapJRjpCMaZFhv1V0ajWRmE9Dg==",
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.10.tgz",
+      "integrity": "sha512-FC5fKJjDks3Ue/KRSYBdsiCaZa0kUPQfs8yQpb8W9mlO6BenV8G1z58xobeRMzevnmEcDa09LLwuXDwb4f6NMQ==",
       "dev": true
     },
     "node_modules/vue-eslint-parser": {
@@ -9483,12 +9442,20 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/vue-html-to-paper": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/vue-html-to-paper/-/vue-html-to-paper-2.0.3.tgz",
+      "integrity": "sha512-2Kbud/3yZNw1oho05vJgkYfqoXkHlpB7C06BdF89OkQgzKRLYeatVhJgPwXHnH+HskmhNWjSKzJyay9HnN4QvQ==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
-      "integrity": "sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz",
+      "integrity": "sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==",
       "dependencies": {
-        "@vue/devtools-api": "^6.5.0"
+        "@vue/devtools-api": "^6.5.1"
       },
       "funding": {
         "url": "https://github.com/sponsors/posva"
@@ -9507,9 +9474,9 @@
       }
     },
     "node_modules/vue-tailwind-datepicker": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmjs.org/vue-tailwind-datepicker/-/vue-tailwind-datepicker-1.6.5.tgz",
-      "integrity": "sha512-j6OpfNYD8ZNX8QUaek6ng0aVaUfNc2T1e+goZRLg07o72cmoCSlUfvPWYBYbbFe0hOXe1TLigWLunNoDT5K7zg==",
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/vue-tailwind-datepicker/-/vue-tailwind-datepicker-1.7.3.tgz",
+      "integrity": "sha512-Yytfh9EhsdnzSZ+OAMAFsKa3jtwktZtqlIwLO3rfM7ydvNIP+TC3fwDGeSMmX3OvkxXJdaT+1qkHvJKmpx51+w==",
       "dependencies": {
         "@vueuse/core": "^10.5.0",
         "vite-plugin-css-injected-by-js": "^3.3.0"
@@ -9531,13 +9498,13 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.5.tgz",
-      "integrity": "sha512-e8WCgOVTrbmC04XPnI+IpaMTFYKaTm5s/MXFcvxO1l9kxzn+9FpGNVrBSlQE8VpTJaJg4kaBK1nj3NC20VJzjw==",
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.10.tgz",
+      "integrity": "sha512-XD9GuUuc40fdL6VrfbFS5PehxK6exhKGEkzCbMjT01HcJVNuJxXaPFIhMEfxn581eryX7LBygAH6YYqnXQGElA==",
       "dev": true,
       "dependencies": {
-        "@volar/typescript": "~2.1.1",
-        "@vue/language-core": "2.0.5",
+        "@volar/typescript": "~2.2.0-alpha.5",
+        "@vue/language-core": "2.0.10",
         "semver": "^7.5.4"
       },
       "bin": {
@@ -9837,9 +9804,12 @@
       "dev": true
     },
     "node_modules/yaml": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
-      "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz",
+      "integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
       "engines": {
         "node": ">= 14"
       }
@@ -9926,6 +9896,19 @@
       "engines": {
         "node": ">= 10"
       }
+    },
+    "node_modules/zip-stream/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 72be3b0..c67ac5a 100755
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "qs": "^6.11.2",
     "uuid": "^9.0.1",
     "vue": "^3.3.4",
+    "vue-html-to-paper": "^2.0.3",
     "vue-router": "^4.2.2",
     "vue-tailwind-datepicker": "^1.6.1",
     "vue3-star-ratings": "^3.0.5"
@@ -78,4 +79,4 @@
     "vitest": "^1.3.1",
     "vue-tsc": "^2.0.5"
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 6bb3634..a52b2cc 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -60,476 +60,139 @@
       <DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
         :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
       <DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="avg_durasi_dispatch"
-          data-type="number"
-          caption="Rata-Rata"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatDPT"
-        />
-        <DxColumn
-          :visible="false"
-          :width="150"
-          alignment="center"
-          data-field="count_durasi_dispatch"
-          data-type="number"
-          caption="Jumlah Dispatch"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :visible="false"
-          :width="150"
-          alignment="center"
-          data-type="number"
-          caption="Total Durasi Dispatch"
-          name="total_durasi_dispatch"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          :calculate-display-value="
-            (rowData: any) =>
-              parseFloat(rowData.count_durasi_dispatch) * parseFloat(rowData.avg_durasi_dispatch)
-          "
-          :calculate-cell-value="
-            (rowData: any) =>
-              parseFloat(rowData.count_durasi_dispatch) * parseFloat(rowData.avg_durasi_dispatch)
-          "
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="max_durasi_dispatch"
-          data-type="number"
-          caption="Max"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatTime"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="min_durasi_dispatch"
-          data-type="number"
-          caption="Min"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatTime"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_diatas_sla_dispatch"
-          data-type="number"
-          caption=">SLA"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_dibawah_sla_dispatch"
-          data-type="number"
-          caption="≤SLA"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_dispatch" data-type="number"
+          caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" cell-template="formatDPT" />
+        <DxColumn :visible="false" :width="150" alignment="center" data-field="count_durasi_dispatch" data-type="number"
+          caption="Jumlah Dispatch" :allow-resizing="false" css-class="custom-table-column"
+          cell-template="formatNumber" />
+        <DxColumn :visible="false" :width="150" alignment="center" data-type="number" caption="Total Durasi Dispatch"
+          name="total_durasi_dispatch" :allow-resizing="false" css-class="custom-table-column" :calculate-display-value="(rowData: any) =>
+    parseFloat(rowData.count_durasi_dispatch) * parseFloat(rowData.avg_durasi_dispatch)
+    " :calculate-cell-value="(rowData: any) =>
+    parseFloat(rowData.count_durasi_dispatch) * parseFloat(rowData.avg_durasi_dispatch)
+    " cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_dispatch" data-type="number" caption="Max"
+          :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_dispatch" data-type="number" caption="Min"
+          :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_dispatch" data-type="number"
+          caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_dispatch" data-type="number"
+          caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="avg_durasi_response"
-          data-type="number"
-          caption="Rata-Rata"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatRPT"
-        />
-        <DxColumn
-          :visible="false"
-          :width="150"
-          alignment="center"
-          data-field="count_durasi_response"
-          data-type="number"
-          caption="Jumlah Response"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :visible="false"
-          :width="150"
-          alignment="center"
-          data-type="number"
-          caption="Total Durasi Response"
-          name="total_durasi_response"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          :calculate-display-value="
-            (rowData: any) =>
-              parseFloat(rowData.count_durasi_response) * parseFloat(rowData.avg_durasi_response)
-          "
-          :calculate-cell-value="
-            (rowData: any) =>
-              parseFloat(rowData.count_durasi_response) * parseFloat(rowData.avg_durasi_response)
-          "
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="max_durasi_response"
-          data-type="number"
-          caption="Max"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatTime"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="min_durasi_response"
-          data-type="number"
-          caption="Min"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatTime"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_diatas_sla_response"
-          data-type="number"
-          caption=">SLA"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_dibawah_sla_response"
-          data-type="number"
-          caption="≤SLA"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
+          caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" cell-template="formatRPT" />
+        <DxColumn :visible="false" :width="150" alignment="center" data-field="count_durasi_response" data-type="number"
+          caption="Jumlah Response" :allow-resizing="false" css-class="custom-table-column"
+          cell-template="formatNumber" />
+        <DxColumn :visible="false" :width="150" alignment="center" data-type="number" caption="Total Durasi Response"
+          name="total_durasi_response" :allow-resizing="false" css-class="custom-table-column" :calculate-display-value="(rowData: any) =>
+    parseFloat(rowData.count_durasi_response) * parseFloat(rowData.avg_durasi_response)
+    " :calculate-cell-value="(rowData: any) =>
+    parseFloat(rowData.count_durasi_response) * parseFloat(rowData.avg_durasi_response)
+    " cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
+          :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
+          :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+          caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+          caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="avg_durasi_recovery"
-          data-type="number"
-          caption="Rata-Rata"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatRCT"
-        />
-        <DxColumn
-          :visible="false"
-          :width="150"
-          alignment="center"
-          data-field="count_durasi_recovery"
-          data-type="number"
-          caption="Jumlah Recovery"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :visible="false"
-          :width="150"
-          alignment="center"
-          data-type="number"
-          caption="Total Durasi Recovery"
-          name="total_durasi_recovery"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          :calculate-display-value="
-            (rowData: any) =>
-              parseFloat(rowData.count_durasi_recovery) * parseFloat(rowData.avg_durasi_recovery)
-          "
-          :calculate-cell-value="
-            (rowData: any) =>
-              parseFloat(rowData.count_durasi_recovery) * parseFloat(rowData.avg_durasi_recovery)
-          "
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="max_durasi_recovery"
-          data-type="number"
-          caption="Max"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatTime"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="min_durasi_recovery"
-          data-type="number"
-          caption="Min"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatTime"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_diatas_sla_recovery"
-          data-type="number"
-          caption=">SLA"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_dibawah_sla_recovery"
-          data-type="number"
-          caption="≤SLA"
-          :allow-resizing="false"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+          caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" cell-template="formatRCT" />
+        <DxColumn :visible="false" :width="150" alignment="center" data-field="count_durasi_recovery" data-type="number"
+          caption="Jumlah Recovery" :allow-resizing="false" css-class="custom-table-column"
+          cell-template="formatNumber" />
+        <DxColumn :visible="false" :width="150" alignment="center" data-type="number" caption="Total Durasi Recovery"
+          name="total_durasi_recovery" :allow-resizing="false" css-class="custom-table-column" :calculate-display-value="(rowData: any) =>
+    parseFloat(rowData.count_durasi_recovery) * parseFloat(rowData.avg_durasi_recovery)
+    " :calculate-cell-value="(rowData: any) =>
+    parseFloat(rowData.count_durasi_recovery) * parseFloat(rowData.avg_durasi_recovery)
+    " cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
+          :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
+          :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+          caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+          caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
       </DxColumn>
 
       <DxSummary :calculate-custom-summary="calculateCustomSummary">
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total"
-          name="total"
-          summary-type="custom"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_selesai"
-          name="total_selesai"
-          summary-type="custom"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="persen_selesai"
-          name="persen_selesai"
-          summary-type="custom"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_inproses"
-          name="total_inproses"
-          summary-type="custom"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="persen_inproses"
-          name="persen_inproses"
-          summary-type="custom"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="avg_durasi_dispatch"
-          name="avg_durasi_dispatch"
-          summary-type="custom"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_durasi_dispatch"
-          name="total_durasi_dispatch"
-          summary-type="custom"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="count_durasi_dispatch"
-          name="count_durasi_dispatch"
-          summary-type="custom"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total" name="total"
+          summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_selesai" name="total_selesai"
+          summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="persen_selesai" name="persen_selesai"
+          summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_inproses" name="total_inproses"
+          summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="persen_inproses"
+          name="persen_inproses" summary-type="custom" css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_dispatch"
+          name="avg_durasi_dispatch" summary-type="custom" css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_durasi_dispatch"
+          name="total_durasi_dispatch" summary-type="custom" css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="count_durasi_dispatch"
+          name="count_durasi_dispatch" summary-type="custom" css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
 
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="max_durasi_dispatch"
-          summary-type="max"
-          css-class="!text-center"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="min_durasi_dispatch"
-          summary-type="min"
-          css-class="!text-center"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_diatas_sla_dispatch"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_dibawah_sla_dispatch"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="avg_durasi_response"
-          name="avg_durasi_response"
-          summary-type="custom"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_durasi_response"
-          name="total_durasi_response"
-          summary-type="custom"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="count_durasi_response"
-          name="count_durasi_response"
-          summary-type="custom"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="max_durasi_response"
-          summary-type="max"
-          css-class="!text-center"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="min_durasi_response"
-          summary-type="min"
-          css-class="!text-center"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_diatas_sla_response"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_dibawah_sla_response"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="avg_durasi_recovery"
-          name="avg_durasi_recovery"
-          summary-type="custom"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_durasi_recovery"
-          name="total_durasi_recovery"
-          summary-type="custom"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="count_durasi_recovery"
-          name="count_durasi_recovery"
-          summary-type="custom"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="max_durasi_recovery"
-          summary-type="max"
-          css-class="!text-center"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="min_durasi_recovery"
-          summary-type="min"
-          css-class="!text-center"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_diatas_sla_recovery"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_dibawah_sla_recovery"
-          summary-type="sum"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_dispatch"
+          summary-type="max" css-class="!text-center"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_dispatch"
+          summary-type="min" css-class="!text-center"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_dispatch"
+          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_dispatch"
+          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_response"
+          name="avg_durasi_response" summary-type="custom" css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_durasi_response"
+          name="total_durasi_response" summary-type="custom" css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="count_durasi_response"
+          name="count_durasi_response" summary-type="custom" css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_response"
+          summary-type="max" css-class="!text-center"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_response"
+          summary-type="min" css-class="!text-center"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_response"
+          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_response"
+          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_recovery"
+          name="avg_durasi_recovery" summary-type="custom" css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_durasi_recovery"
+          name="total_durasi_recovery" summary-type="custom" css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="count_durasi_recovery"
+          name="count_durasi_recovery" summary-type="custom" css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_recovery"
+          summary-type="max" css-class="!text-center"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_recovery"
+          summary-type="min" css-class="!text-center"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_recovery"
+          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_recovery"
+          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
       </DxSummary>
 
       <template #formatText="{ data }">
@@ -606,14 +269,8 @@
           @exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
           <DxSelection mode="single" />
           <DxPaging :page-size="20" :enabled="true" />
-          <DxPager
-            :visible="true"
-            :allowed-page-sizes="[20, 50, 100]"
-            display-mode="full"
-            :show-page-size-selector="true"
-            :show-info="true"
-            :show-navigation-buttons="true"
-          />
+          <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
+            :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
           <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@@ -859,7 +516,9 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Gangguan/Rekap/RGangguan_ALL'
 import { getDataRowGroup } from '@/utils/helper'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
@@ -1246,11 +905,13 @@ const showDetail = () => {
 }
 
 const onExporting = (e: any) => {
+
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -1260,6 +921,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
index bd68796..22ebe90 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
@@ -1,31 +1,14 @@
 <template>
-  <Filters
-    @reset-form="data = []"
-    :report-button="true"
-    @run-search="() => filterData(filters)"
-    @run-report="() => exportToPDF(reportMeta, data, true)"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)"
+    @run-report="() => exportToPDF(reportMeta, data, true)" class="mb-4">
     <Type1 @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" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
@@ -33,87 +16,30 @@
       <!--  -->
 
       <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
-        css-class="custom-table-column"
-        :width="50"
-        alignment="center"
-        data-field="number"
-        caption="No"
-        cell-template="formatNumber"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="180"
-        data-field="nama_up3"
-        caption="Nama UP3"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="180"
-        data-field="nama_uid"
-        caption="Nama UID"
-        css-class="custom-table-column"
-        :group-index="0"
-      />
+      <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="number" caption="No"
+        cell-template="formatNumber" />
+      <DxColumn alignment="center" :min-width="180" data-field="nama_up3" caption="Nama UP3"
+        css-class="custom-table-column" cell-template="formatText" />
+      <DxColumn alignment="center" :min-width="180" data-field="nama_uid" caption="Nama UID"
+        css-class="custom-table-column" :group-index="0" />
 
-      <DxColumn
-        alignment="center"
-        :min-width="180"
-        data-field="nama_posko"
-        caption="Nama Posko"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
-      <DxColumn
-        :width="180"
-        alignment="center"
-        data-field="posko_in"
-        caption="Posko IN"
-        css-class="custom-table-column"
-        cell-template="formatNumberPoskoIn"
-      />
-      <DxColumn
-        :width="180"
-        alignment="center"
-        data-field="posko_out"
-        caption="Posko OUT"
-        css-class="custom-table-column"
-        cell-template="formatNumberPoskoOut"
-      />
+      <DxColumn alignment="center" :min-width="180" data-field="nama_posko" caption="Nama Posko"
+        css-class="custom-table-column" cell-template="formatText" />
+      <DxColumn :width="180" alignment="center" data-field="posko_in" caption="Posko IN" css-class="custom-table-column"
+        cell-template="formatNumberPoskoIn" />
+      <DxColumn :width="180" alignment="center" data-field="posko_out" caption="Posko OUT"
+        css-class="custom-table-column" cell-template="formatNumberPoskoOut" />
 
       <DxSummary>
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="number"
-          display-format="Total"
-          css-class="!text-left"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="posko_in"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="posko_out"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
+        <DxGroupItem :show-in-group-footer="true" column="number" display-format="Total" css-class="!text-left"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="posko_in" summary-type="sum" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="posko_out" summary-type="sum" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
       </DxSummary>
 
       <template #formatText="{ data }">
@@ -125,227 +51,94 @@
       <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer" @click="setPoskoSelected('')">
           {{
-            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>
 
       <template #formatNumberPoskoIn="{ data }">
         <p class="text-right cursor-pointer" @click="setPoskoSelected('in')">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
       <template #formatNumberPoskoOut="{ data }">
         <p class="text-right cursor-pointer" @click="setPoskoSelected('out')">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="dialogDetail"
-    title="Detail Rekapitulasi Gangguan Alih Posko"
-    @on-close="closeDialog"
-    :full-width="true"
-  >
+  <DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Gangguan Alih Posko" @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="onExportingDetail"
-          :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="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
           <DxSelection mode="single" />
           <DxPaging :page-size="20" :enabled="true" />
-          <DxPager
-            :visible="true"
-            :allowed-page-sizes="[20, 50, 100]"
-            display-mode="full"
-            :show-page-size-selector="true"
-            :show-info="true"
-            :show-navigation-buttons="true"
-          />
+          <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
+            :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
           <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-          <DxExport
-            :enabled="true"
-            :formats="['pdf', 'xlsx', 'document']"
-            :allow-export-selected-data="false"
-          />
+          <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-          <DxColumn
-            css-class="custom-table-column"
-            :width="50"
-            alignment="center"
-            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
-            data-type="number"
-            caption="No"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_laporan"
-            caption="No Laporan"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_lapor"
-            caption="Tgl Lapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_response"
-            caption="Tgl Datang"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_recovery"
-            caption="Tgl Nyala"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_response_time"
-            caption="Durasi Response Time"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_recovery_time"
-            caption="Durasi Recovery Time"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="status_akhir"
-            caption="Status"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="idpel_nometer"
-            caption="IDPEL/NO METER"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="nama_pelapor"
-            caption="Nama Pelapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="alamat_pelapor"
-            caption="Alamat Pelapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_telp_pelapor"
-            caption="No Telp Pelapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            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="media"
-            caption="Sumber Lapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Nama Petugas"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Posko Asal"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Posko Tujuan"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
+          <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
+            caption="No" cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="200" 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="media" caption="Sumber Lapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="" caption="Nama Petugas" css-class="custom-table-column"
+            cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="" caption="Posko Asal" css-class="custom-table-column"
+            cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="" caption="Posko Tujuan" css-class="custom-table-column"
+            cell-template="formatText" />
 
           <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
@@ -381,46 +174,28 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.waktu_response"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_response" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.waktu_recovery"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_response_time)
-                ? formatWaktu(dataSubSelected?.durasi_response_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
+    ? formatWaktu(dataSubSelected?.durasi_response_time)
+    : '-'
+    " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_recovery_time)
-                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
+    ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+    : '-'
+    " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -440,29 +215,17 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.alamat_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.no_telp_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.keterangan_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -526,7 +289,9 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToXLSX,
-  exportDetailToPDF
+  exportDetailToPDF,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Gangguan/Rekap/RGangguan_AlihPosko'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
@@ -613,6 +378,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -622,6 +388,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
index 971f72d..2175b2c 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@@ -1,84 +1,35 @@
 <template>
-  <Filters
-    @reset-form="data = []"
-    :report-button="true"
-    @run-search="() => filterData(filters)"
-    @run-report="() => exportToPDF(reportMeta, data, true)"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)"
+    @run-report="() => exportToPDF(reportMeta, data, true)" class="mb-4">
     <Type1 @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"
-      :column-width="100"
-      @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"
+      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      :word-wrap-enabled="true">
       <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
-        css-class="custom-table-column"
-        :width="50"
-        alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
-        data-type="number"
-        caption="No"
-        data-field="no"
-        cell-template="formatNumber"
-      />
-      <DxColumn
-        :width="170"
-        data-field="media"
-        caption="Nama Media"
-        alignment="center"
-        cell-template="formatText"
-        css-class="custom-table-column"
-        header-cell-template="title-header"
-      />
+      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
+        data-field="no" cell-template="formatNumber" />
+      <DxColumn :width="170" data-field="media" caption="Nama Media" alignment="center" cell-template="formatText"
+        css-class="custom-table-column" header-cell-template="title-header" />
       <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-        <DxColumn
-          v-for="i in 31"
-          :width="100"
-          alignment="center"
-          :data-field="`tgl${i}`"
-          data-type="number"
-          :caption="i"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
+        <DxColumn v-for="i in 31" :width="100" alignment="center" :data-field="`tgl${i}`" data-type="number"
+          :caption="i" css-class="custom-table-column" cell-template="formatNumber" />
       </DxColumn>
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="total"
-        caption="Total"
-        css-class="custom-table-column"
-        cell-template="formatNumber"
-      />
+      <DxColumn :width="170" alignment="center" data-field="total" caption="Total" css-class="custom-table-column"
+        cell-template="formatNumber" />
 
       <template #formatText="{ data }">
         <p class="text-left cursor-pointer" @click="setDate(data.column.caption)">
@@ -89,12 +40,12 @@
       <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer" @click="setDate(data.column.caption)">
           {{
-            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>
 
@@ -105,208 +56,66 @@
       </template>
 
       <DxSummary>
-        <DxTotalItem
-          display-format="Total"
-          show-in-column="media"
-          css-class="text-white !text-l eft"
-        />
-        <DxTotalItem
-          v-for="i in 31"
-          summary-type="sum"
-          display-format="{0}"
-          :column="`tgl${i}`"
-          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 display-format="Total" show-in-column="media" css-class="text-white !text-l eft" />
+        <DxTotalItem v-for="i in 31" summary-type="sum" display-format="{0}" :column="`tgl${i}`"
+          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)" />
       </DxSummary>
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="dialogDetail"
-    title="Detail Rekapitulasi Gangguan Berdasarkan Media"
-    @on-close="closeDialog"
-    :full-width="true"
-  >
+  <DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Gangguan Berdasarkan Media" @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="onExportingDetail"
-          :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="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
           <DxSelection mode="single" />
           <DxPaging :page-size="20" :enabled="true" />
-          <DxPager
-            :visible="true"
-            :allowed-page-sizes="[20, 50, 100]"
-            display-mode="full"
-            :show-page-size-selector="true"
-            :show-info="true"
-            :show-navigation-buttons="true"
-          />
+          <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
+            :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
           <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-          <DxExport
-            :enabled="true"
-            :formats="['pdf', 'xlsx', 'document']"
-            :allow-export-selected-data="false"
-          />
+          <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-          <DxColumn
-            css-class="custom-table-column"
-            :width="50"
-            alignment="center"
-            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
-            data-type="number"
-            caption="No"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_laporan"
-            caption="No Laporan"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_lapor"
-            caption="Tgl Lapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_response"
-            caption="Tgl Datang"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_recovery"
-            caption="Tgl Nyala"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_response_time"
-            caption="Durasi Response Time"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_recovery_time"
-            caption="Durasi Recovery Time"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="status_akhir"
-            caption="Status"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="referensi_marking"
-            caption="Referensi Marking"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="idpel_nometer"
-            caption="IDPEL/NO METER"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="nama_pelapor"
-            caption="Nama Pelapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="alamat_pelapor"
-            caption="Alamat Pelapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_telp_pelapor"
-            caption="No Telp Pelapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            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="Tidakan"
-            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"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
+            caption="No" cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="200" 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="Tidakan"
+            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">
@@ -342,46 +151,28 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.waktu_response"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_response" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.waktu_recovery"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_response_time)
-                ? formatWaktu(dataSubSelected?.durasi_response_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
+      ? formatWaktu(dataSubSelected?.durasi_response_time)
+      : '-'
+    " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_recovery_time)
-                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
+      ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+      : '-'
+    " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -391,11 +182,7 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.referensi_marking"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.referensi_marking" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -410,29 +197,17 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.alamat_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.no_telp_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.keterangan_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -485,7 +260,9 @@ import {
   exportToPDF,
   exportDetailToPDF,
   exportToXLSX,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Gangguan/Rekap/RGangguan_BerdasarMedia'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
@@ -576,6 +353,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -585,6 +363,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
index a533ade..416f5a2 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
@@ -1,149 +1,50 @@
 <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">
     <Type1 @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">
       <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
-        width="200"
-        alignment="center"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
+      <DxColumn width="200" alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
+        cell-template="formatText" />
       <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>
 
       <template #formatText="{ data }">
@@ -155,153 +56,56 @@
       <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer" @click="setMonth(data.column.caption)">
           {{
-            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>
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="dialogDetail"
-    title="Data Detail Cleansing Transaksi TM"
-    @on-close="closedialogDetail"
-    :full-width="true"
-  >
+  <DetailDialog :open="dialogDetail" title="Data Detail Cleansing Transaksi TM" @on-close="closedialogDetail"
+    :full-width="true">
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
-        <DxDataGrid
-          :allow-column-reordering="true"
-          class="max-h-[calc(100vh-140px)]"
-          :data-source="dataSub"
-          :show-column-lines="true"
-          :show-row-lines="false"
-          :show-borders="true"
-          :row-alternation-enabled="true"
-          :hover-state-enabled="true"
-          @selection-changed="onDataSubSelectionChanged"
-          :column-width="100"
-          @exporting="onExportingDetail"
-          :allow-column-resizing="true"
-          column-resizing-mode="widget"
-        >
+        <DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
+          :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
+          :hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
+          @exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
           <DxSelection mode="single" />
           <DxPaging :page-size="20" :enabled="true" />
-          <DxPager
-            :visible="true"
-            :allowed-page-sizes="[20, 50, 100]"
-            display-mode="full"
-            :show-page-size-selector="true"
-            :show-info="true"
-            :show-navigation-buttons="true"
-          />
+          <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
+            :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
           <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-          <DxExport
-            :enabled="true"
-            :formats="['pdf', 'xlsx', 'document']"
-            :allow-export-selected-data="false"
-          />
+          <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-          <DxColumn
-            css-class="custom-table-column"
-            :width="50"
-            alignment="center"
-            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
-            data-type="number"
-            caption="No"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_laporan"
-            caption="No Laporan"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="tgl_catat"
-            caption="Tgl Catat"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="tgl_pekerjaan"
-            caption="Tgl Pekerjaan"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="tgl_nyala"
-            caption="Tgl Nyala"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_pencatatan"
-            caption="Durasi Pencatatan"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_recovery_time"
-            caption="Durasi Recovery Time"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="keterangan_cleansing"
-            caption="Keterangan Cleansing"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="nama_posko"
-            caption="Posko"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="tindakan"
-            caption="Tindakan"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="penyebab"
-            caption="Penyebab"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
+          <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
+            caption="No" cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="tgl_catat" caption="Tgl Catat"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="tgl_pekerjaan" caption="Tgl Pekerjaan"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="tgl_nyala" caption="Tgl Nyala"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_pencatatan" caption="Durasi Pencatatan"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="keterangan_cleansing" caption="Keterangan Cleansing"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tindakan" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
 
           <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
@@ -348,37 +152,23 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Pencatatan:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_pencatatan)
-                ? formatWaktu(dataSubSelected?.durasi_pencatatan)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_pencatatan)
+        ? formatWaktu(dataSubSelected?.durasi_pencatatan)
+        : '-'
+      " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_recovery_time)
-                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
+        ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+        : '-'
+      " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan CLeansing:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.keterangan_cleansing"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.keterangan_cleansing" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -429,7 +219,9 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Gangguan/Rekap/RGangguan_CTTM'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
@@ -567,6 +359,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -576,6 +369,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
index 1e85f82..ab02a50 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
@@ -1,135 +1,60 @@
 <template>
-  <Filters
-    @reset-form="data = []"
-    @run-report="() => exportToPDF(reportMeta, data, true)"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" @run-report="() => exportToPDF(reportMeta, data, true)"
+    @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type1 @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">
       <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
-        :width="50"
-        alignment="center"
-        caption="NO"
-        css-class="custom-table-column"
-        rowspan="4"
-        colspan="2"
-      >
-        <DxColumn
-          :width="50"
-          alignment="center"
-          :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
-          caption="a"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
+      <DxColumn :width="50" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2">
+        <DxColumn :width="50" alignment="center"
+          :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" caption="a"
+          css-class="custom-table-column" cell-template="formatNumber" />
       </DxColumn>
       <DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="nama_regu"
-          caption="b"
-          css-class="custom-table-column"
-          cell-template="formatText"
-        />
+        <DxColumn :width="150" alignment="center" data-field="nama_regu" caption="b" css-class="custom-table-column"
+          cell-template="formatText" />
       </DxColumn>
       <DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="kode_regu"
-          caption="c"
-          css-class="custom-table-column"
-          cell-template="formatText"
-        />
+        <DxColumn :width="150" alignment="center" data-field="kode_regu" caption="c" css-class="custom-table-column"
+          cell-template="formatText" />
       </DxColumn>
 
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total"
-            caption="d=(e+g)"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total" caption="d=(e+g)" css-class="custom-table-column"
+            cell-template="formatNumber" />
         </DxColumn>
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              data-field="total_selesai"
-              caption="e"
-              css-class="custom-table-column"
-              cell-template="formatNumber"
-            />
+            <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="e"
+              css-class="custom-table-column" cell-template="formatNumber" />
           </DxColumn>
           <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              data-field="persen_selesai"
-              caption="f=(e/d)*100"
-              css-class="custom-table-column"
-              cell-template="formatPercentage"
-            />
+            <DxColumn :width="150" alignment="center" data-field="persen_selesai" caption="f=(e/d)*100"
+              css-class="custom-table-column" cell-template="formatPercentage" />
           </DxColumn>
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              data-field="total_inproses"
-              caption="g"
-              css-class="custom-table-column"
-              cell-template="formatNumber"
-            />
+            <DxColumn :width="150" alignment="center" data-field="total_inproses" caption="g"
+              css-class="custom-table-column" cell-template="formatNumber" />
           </DxColumn>
           <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              data-field="persen_inproses"
-              caption="h=(g/d)*100"
-              css-class="custom-table-column"
-              cell-template="formatPercentage"
-            />
+            <DxColumn :width="150" alignment="center" data-field="persen_inproses" caption="h=(g/d)*100"
+              css-class="custom-table-column" cell-template="formatPercentage" />
           </DxColumn>
         </DxColumn>
       </DxColumn>
@@ -139,47 +64,23 @@
           <DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="total_mobile_nonmarking"
-                  caption="i"
-                  css-class="custom-table-column"
-                  cell-template="formatNumber"
-                />
+                <DxColumn :width="150" alignment="center" data-field="total_mobile_nonmarking" caption="i"
+                  css-class="custom-table-column" cell-template="formatNumber" />
               </DxColumn>
               <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field=""
-                  caption="j=(i/d)*100"
-                  css-class="custom-table-column"
-                  cell-template="formatPercentage"
-                />
+                <DxColumn :width="150" alignment="center" data-field="" caption="j=(i/d)*100"
+                  css-class="custom-table-column" cell-template="formatPercentage" />
               </DxColumn>
             </DxColumn>
 
             <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="avg_durasi_response_time_mobile_nonmarking"
-                  caption="k"
-                  css-class="custom-table-column"
-                  cell-template="formatNumber"
-                />
+                <DxColumn :width="150" alignment="center" data-field="avg_durasi_response_time_mobile_nonmarking"
+                  caption="k" css-class="custom-table-column" cell-template="formatNumber" />
               </DxColumn>
               <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="avg_durasi_recovery_time_mobile_nonmarking"
-                  caption="l"
-                  css-class="custom-table-column"
-                  cell-template="formatNumber"
-                />
+                <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_time_mobile_nonmarking"
+                  caption="l" css-class="custom-table-column" cell-template="formatNumber" />
               </DxColumn>
             </DxColumn>
           </DxColumn>
@@ -187,47 +88,23 @@
           <DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="total_mobile_marking"
-                  caption="m"
-                  css-class="custom-table-column"
-                  cell-template="formatNumber"
-                />
+                <DxColumn :width="150" alignment="center" data-field="total_mobile_marking" caption="m"
+                  css-class="custom-table-column" cell-template="formatNumber" />
               </DxColumn>
               <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field=""
-                  caption="n=(m/d)*100"
-                  css-class="custom-table-column"
-                  cell-template="formatPercentage"
-                />
+                <DxColumn :width="150" alignment="center" data-field="" caption="n=(m/d)*100"
+                  css-class="custom-table-column" cell-template="formatPercentage" />
               </DxColumn>
             </DxColumn>
 
             <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="avg_durasi_response_time_mobile_marking"
-                  caption="o"
-                  css-class="custom-table-column"
-                  cell-template="formatNumber"
-                />
+                <DxColumn :width="150" alignment="center" data-field="avg_durasi_response_time_mobile_marking"
+                  caption="o" css-class="custom-table-column" cell-template="formatNumber" />
               </DxColumn>
               <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="avg_durasi_recovery_time_mobile_marking"
-                  caption="p"
-                  css-class="custom-table-column"
-                  cell-template="formatNumber"
-                />
+                <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_time_mobile_marking"
+                  caption="p" css-class="custom-table-column" cell-template="formatNumber" />
               </DxColumn>
             </DxColumn>
           </DxColumn>
@@ -237,47 +114,23 @@
           <DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="total_nonmobile_nonmarking"
-                  caption="q"
-                  css-class="custom-table-column"
-                  cell-template="formatNumber"
-                />
+                <DxColumn :width="150" alignment="center" data-field="total_nonmobile_nonmarking" caption="q"
+                  css-class="custom-table-column" cell-template="formatNumber" />
               </DxColumn>
               <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field=""
-                  caption="r=(q/d)*100"
-                  css-class="custom-table-column"
-                  cell-template="formatPercentage"
-                />
+                <DxColumn :width="150" alignment="center" data-field="" caption="r=(q/d)*100"
+                  css-class="custom-table-column" cell-template="formatPercentage" />
               </DxColumn>
             </DxColumn>
 
             <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="avg_durasi_response_time_nonmobile_nonmarking"
-                  caption="s"
-                  css-class="custom-table-column"
-                  cell-template="formatNumber"
-                />
+                <DxColumn :width="150" alignment="center" data-field="avg_durasi_response_time_nonmobile_nonmarking"
+                  caption="s" css-class="custom-table-column" cell-template="formatNumber" />
               </DxColumn>
               <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="avg_durasi_recovery_time_nonmobile_nonmarking"
-                  caption="t"
-                  css-class="custom-table-column"
-                  cell-template="formatNumber"
-                />
+                <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_time_nonmobile_nonmarking"
+                  caption="t" css-class="custom-table-column" cell-template="formatNumber" />
               </DxColumn>
             </DxColumn>
           </DxColumn>
@@ -285,47 +138,23 @@
           <DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="total_nonmobile_marking"
-                  caption="u"
-                  css-class="custom-table-column"
-                  cell-template="formatNumber"
-                />
+                <DxColumn :width="150" alignment="center" data-field="total_nonmobile_marking" caption="u"
+                  css-class="custom-table-column" cell-template="formatNumber" />
               </DxColumn>
               <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field=""
-                  caption="v=(u/d)*100"
-                  css-class="custom-table-column"
-                  cell-template="formatPercentage"
-                />
+                <DxColumn :width="150" alignment="center" data-field="" caption="v=(u/d)*100"
+                  css-class="custom-table-column" cell-template="formatPercentage" />
               </DxColumn>
             </DxColumn>
 
             <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="avg_durasi_response_time_nonmobile_marking"
-                  caption="w"
-                  css-class="custom-table-column"
-                  cell-template="formatNumber"
-                />
+                <DxColumn :width="150" alignment="center" data-field="avg_durasi_response_time_nonmobile_marking"
+                  caption="w" css-class="custom-table-column" cell-template="formatNumber" />
               </DxColumn>
               <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                <DxColumn
-                  :width="150"
-                  alignment="center"
-                  data-field="avg_durasi_recovery_time_nonmobile_marking"
-                  caption="x"
-                  css-class="custom-table-column"
-                  cell-template="formatNumber"
-                />
+                <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_time_nonmobile_marking"
+                  caption="x" css-class="custom-table-column" cell-template="formatNumber" />
               </DxColumn>
             </DxColumn>
           </DxColumn>
@@ -341,12 +170,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>
 
@@ -363,235 +192,74 @@
       </template>
 
       <DxSummary>
-        <DxTotalItem
-          display-format="TOTAL"
-          show-in-column="nama_regu"
-          css-class="text-white !text-right"
-        />
-        <DxTotalItem
-          column="total"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_selesai"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_mobile_marking"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_mobile_nonmarking"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_nonmobile_marking"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_nonmobile_nonmarking"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
+        <DxTotalItem display-format="TOTAL" show-in-column="nama_regu" css-class="text-white !text-right" />
+        <DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_selesai" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_mobile_marking" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_mobile_nonmarking" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_nonmobile_marking" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_nonmobile_nonmarking" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
       </DxSummary>
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="dialogDetail"
-    title="Detail Rekapitulasi Gangguan Diselesaikan Mobile APKT"
-    @on-close="closeDialog"
-    :full-width="true"
-  >
+  <DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Gangguan Diselesaikan Mobile APKT"
+    @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="onExportingDetail"
-          :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="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
           <DxSelection mode="single" />
           <DxPaging :page-size="20" :enabled="true" />
-          <DxPager
-            :visible="true"
-            :allowed-page-sizes="[20, 50, 100]"
-            display-mode="full"
-            :show-page-size-selector="true"
-            :show-info="true"
-            :show-navigation-buttons="true"
-          />
+          <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
+            :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
           <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-          <DxExport
-            :enabled="true"
-            :formats="['pdf', 'xlsx', 'document']"
-            :allow-export-selected-data="false"
-          />
+          <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-          <DxColumn
-            css-class="custom-table-column"
-            :width="50"
-            alignment="center"
-            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
-            data-type="number"
-            caption="No"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_laporan"
-            caption="No Laporan"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_lapor"
-            caption="Tgl Lapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_response"
-            caption="Tgl Datang"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_recovery"
-            caption="Tgl Nyala"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_response_time"
-            caption="Durasi Response Time"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_recovery_time"
-            caption="Durasi Recovery Time"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="status_akhir"
-            caption="Status"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="referensi_marking"
-            caption="Referensi Marking"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="idpel_nometer"
-            caption="IDPEL/NO METER"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="nama_pelapor"
-            caption="Nama Pelapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="alamat_pelapor"
-            caption="Alamat Pelapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_telp_pelapor"
-            caption="No Telp Pelapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            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="Tidakan"
-            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"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
+            caption="No" cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="200" 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="Tidakan"
+            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">
@@ -627,46 +295,28 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.waktu_response"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_response" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.waktu_recovery"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_response_time)
-                ? formatWaktu(dataSubSelected?.durasi_response_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
+      ? formatWaktu(dataSubSelected?.durasi_response_time)
+      : '-'
+      " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_recovery_time)
-                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
+      ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+      : '-'
+      " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -676,11 +326,7 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.referensi_marking"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.referensi_marking" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -695,29 +341,17 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.alamat_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.no_telp_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.keterangan_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -770,7 +404,9 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Gangguan/Rekap/RGangguan_DMAPKT'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
@@ -853,6 +489,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -862,6 +499,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
index 8d14690..85d6571 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
@@ -1,396 +1,123 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan -->
 
 <template>
-  <Filters
-    :report-button="true"
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    @run-report="() => exportToPDF(reportMeta, data, true)"
-    class="mb-4"
-  >
+  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)"
+    @run-report="() => exportToPDF(reportMeta, data, true)" class="mb-4">
     <Type1 @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">
       <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" />
       <DxGrouping :auto-expand-all="true" :context-menu-enabled="true" expand-mode="rowClick" />
 
-      <DxColumn
-        :width="60"
-        alignment="center"
-        data-field="no"
-        caption="NO"
-        css-class="custom-table-column"
-        cell-template="formatNumber"
-      />
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field="kode"
-        caption="Kode"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field="sub_kelompok"
-        css-class="custom-table-column"
-        :group-index="0"
-        caption=""
-        cell-template="formatText"
-        :calculate-group-value="
-          (rowData: any) => `${rowData.sub_kelompok} (${rowData.nama_sub_kelompok})`
-        "
-      />
-      <DxColumn
-        :width="250"
-        alignment="center"
-        data-field="tipe_permasalahan"
-        caption="Jenis Gangguan"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
+      <DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column"
+        cell-template="formatNumber" />
+      <DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column"
+        cell-template="formatText" />
+      <DxColumn :width="120" alignment="center" data-field="sub_kelompok" css-class="custom-table-column"
+        :group-index="0" caption="" cell-template="formatText" :calculate-group-value="(rowData: any) => `${rowData.sub_kelompok} (${rowData.nama_sub_kelompok})`
+    " />
+      <DxColumn :width="250" alignment="center" data-field="tipe_permasalahan" caption="Jenis Gangguan"
+        css-class="custom-table-column" cell-template="formatText" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
-          :width="120"
-          alignment="center"
-          data-field="total"
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
+        <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
+          css-class="custom-table-column" cell-template="formatNumber" />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_selesai"
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_selesai"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
+            css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+            css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_inproses"
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_inproses"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
+            css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+            css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_durasi_response"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="avg_durasi_response"
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="max_durasi_response"
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="min_durasi_response"
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
+            caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
+            css-class="custom-table-column" cell-template="formatTime" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_diatas_sla_response"
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_dibawah_sla_response"
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+            caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_durasi_recovery"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="avg_durasi_recovery"
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="max_durasi_recovery"
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="min_durasi_recovery"
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
+            caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
+            css-class="custom-table-column" cell-template="formatTime" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_diatas_sla_recovery"
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_dibawah_sla_recovery"
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+            caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
       </DxColumn>
 
       <DxSummary :calculate-custom-summary="calculateCustomSummary">
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="no"
-          display-format="Total"
-          css-class="!text-left"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="total"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="total_selesai"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="persen_selesai"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="total_inproses"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="persen_inproses"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="total_durasi_response"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="avg_durasi_response"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="max_durasi_response"
-          summary-type="max"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="min_durasi_response"
-          summary-type="min"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="total_diatas_sla_response"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="total_dibawah_sla_response"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="total_durasi_recovery"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="avg_durasi_recovery"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="max_durasi_recovery"
-          summary-type="max"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="min_durasi_recovery"
-          summary-type="min"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="total_diatas_sla_recovery"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="total_dibawah_sla_recovery"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
+        <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" css-class="!text-left" />
+        <DxGroupItem :show-in-group-footer="true" column="total" summary-type="sum" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="total_selesai" summary-type="sum" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="persen_selesai" summary-type="avg" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="total_inproses" summary-type="sum" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="persen_inproses" summary-type="avg" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="total_durasi_response" summary-type="sum" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="avg_durasi_response" summary-type="avg" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="max_durasi_response" summary-type="max" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="true" column="min_durasi_response" summary-type="min" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="true" column="total_diatas_sla_response" summary-type="sum"
+          display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="total_dibawah_sla_response" summary-type="sum"
+          display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="total_durasi_recovery" summary-type="sum" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="avg_durasi_recovery" summary-type="avg" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="max_durasi_recovery" summary-type="max" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="true" column="min_durasi_recovery" summary-type="min" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="true" column="total_diatas_sla_recovery" summary-type="sum"
+          display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="total_dibawah_sla_recovery" summary-type="sum"
+          display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
       </DxSummary>
 
       <template #formatText="{ data }">
@@ -402,12 +129,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>
 
@@ -444,7 +171,7 @@ import {
 } from 'devextreme-vue/data-grid'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-import { exportToPDF, exportToXLSX } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguan'
+import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguan'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
@@ -476,6 +203,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
index 5345672..d7b86c6 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@@ -1,45 +1,24 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
 
 <template>
-  <Filters
-    @reset-form="data = []"
-    :report-button="true"
-    @run-report="() => exportToPDF(reportMeta, data, true)"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" :report-button="true" @run-report="() => exportToPDF(reportMeta, data, true)"
+    @run-search="() => filterData(filters)" class="mb-4">
     <Type1 @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"
-      :column-width="100"
-      @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"
+      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" />
       <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
@@ -49,201 +28,62 @@
         :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="No"
       /> -->
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field="kode"
-        caption="Kode"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field="id_fasilitas"
-        caption=""
-        css-class="custom-table-column"
-        cell-template="formatText"
-        name="idFasilitasGroup"
-        :group-index="0"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="sub_kelompok"
-        caption="Sub Kelompok (Equipment)"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
+      <DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column"
+        cell-template="formatText" />
+      <DxColumn :width="120" alignment="center" data-field="id_fasilitas" caption="" css-class="custom-table-column"
+        cell-template="formatText" name="idFasilitasGroup" :group-index="0" />
+      <DxColumn :width="150" alignment="center" data-field="sub_kelompok" caption="Sub Kelompok (Equipment)"
+        css-class="custom-table-column" cell-template="formatText" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
-          :width="120"
-          alignment="center"
-          data-field="total"
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-          cell-template="formatNumberLaporanTotal"
-        />
+        <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
+          css-class="custom-table-column" cell-template="formatNumberLaporanTotal" />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_selesai"
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-            cell-template="formatNumberLaporanJmlSelesai"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_selesai"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
+            css-class="custom-table-column" cell-template="formatNumberLaporanJmlSelesai" />
+          <DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+            css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_inproses"
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-            cell-template="formatNumberLaporanJmlBelumSelesai"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_inproses"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
+            css-class="custom-table-column" cell-template="formatNumberLaporanJmlBelumSelesai" />
+          <DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+            css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_durasi_response"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="avg_durasi_response"
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="max_durasi_response"
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="min_durasi_response"
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
+            caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
+            css-class="custom-table-column" cell-template="formatTime" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_diatas_sla_response"
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_dibawah_sla_response"
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+            caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_durasi_recovery"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="avg_durasi_recovery"
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="max_durasi_recovery"
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="min_durasi_recovery"
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
+            caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
+            css-class="custom-table-column" cell-template="formatTime" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_diatas_sla_recovery"
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_dibawah_sla_recovery"
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+            caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
       </DxColumn>
 
@@ -256,48 +96,48 @@
       <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{
-            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>
 
       <template #formatNumberLaporanTotal="{ data }">
         <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
           {{
-            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>
 
       <template #formatNumberLaporanJmlSelesai="{ data }">
         <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
           {{
-            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>
 
       <template #formatNumberLaporanJmlBelumSelesai="{ data }">
         <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
           {{
-            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>
 
@@ -308,330 +148,96 @@
       </template>
 
       <DxSummary>
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="Kode"
-          display-format="Total"
-          css-class="!text-left"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="total"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="total_selesai"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="persen_selesai"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="total_inproses"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="persen_inproses"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="total_durasi_response"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="avg_durasi_response"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="max_durasi_response"
-          summary-type="max"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="min_durasi_response"
-          summary-type="min"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="total_diatas_sla_response"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="total_dibawah_sla_response"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="total_durasi_recovery"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="avg_durasi_recovery"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="max_durasi_recovery"
-          summary-type="max"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="min_durasi_recovery"
-          summary-type="min"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="total_diatas_sla_recovery"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="true"
-          column="total_dibawah_sla_recovery"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
+        <DxGroupItem :show-in-group-footer="true" column="Kode" display-format="Total" css-class="!text-left" />
+        <DxGroupItem :show-in-group-footer="true" column="total" summary-type="sum" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="total_selesai" summary-type="sum" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="persen_selesai" summary-type="avg" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="total_inproses" summary-type="sum" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="persen_inproses" summary-type="avg" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="total_durasi_response" summary-type="sum" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="avg_durasi_response" summary-type="avg" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="max_durasi_response" summary-type="max" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="true" column="min_durasi_response" summary-type="min" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="true" column="total_diatas_sla_response" summary-type="sum"
+          display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="total_dibawah_sla_response" summary-type="sum"
+          display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="total_durasi_recovery" summary-type="sum" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="avg_durasi_recovery" summary-type="avg" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="max_durasi_recovery" summary-type="max" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="true" column="min_durasi_recovery" summary-type="min" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxGroupItem :show-in-group-footer="true" column="total_diatas_sla_recovery" summary-type="sum"
+          display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="true" column="total_dibawah_sla_recovery" summary-type="sum"
+          display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
       </DxSummary>
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="dialogDetail"
-    title="Detail Rekapitulasi Gangguan/Jenis Gangguan SE 004"
-    @on-close="closeDialog"
-    :full-width="true"
-  >
+  <DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Gangguan/Jenis Gangguan SE 004" @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="onExportingDetail"
-          :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="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
           <DxSelection mode="single" />
           <DxPaging :page-size="20" :enabled="true" />
-          <DxPager
-            :visible="true"
-            :allowed-page-sizes="[20, 50, 100]"
-            display-mode="full"
-            :show-page-size-selector="true"
-            :show-info="true"
-            :show-navigation-buttons="true"
-          />
+          <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
+            :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
           <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-          <DxExport
-            :enabled="true"
-            :formats="['pdf', 'xlsx', 'document']"
-            :allow-export-selected-data="false"
-          />
+          <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-          <DxColumn
-            css-class="custom-table-column"
-            :width="50"
-            alignment="center"
-            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
-            data-type="number"
-            caption="No"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_laporan"
-            caption="No Laporan"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_lapor"
-            caption="Tgl Lapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_response"
-            caption="Tgl Datang"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_recovery"
-            caption="Tgl Nyala"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_response_time"
-            caption="Durasi Response Time"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_recovery_time"
-            caption="Durasi Recovery Time"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="status_akhir"
-            caption="Status"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="referensi_marking"
-            caption="Referensi Marking"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="id_pelnomormeter"
-            caption="IDPEL/NO METER"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="nama_pelapor"
-            caption="Nama Pelapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="alamat_pelapor"
-            caption="Alamat Pelapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_telp_pelapor"
-            caption="No Telp Pelapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            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="Tidakan"
-            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"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
+            caption="No" cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="id_pelnomormeter" caption="IDPEL/NO METER"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="200" 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="Tidakan"
+            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">
@@ -667,46 +273,28 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.waktu_response"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_response" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.waktu_recovery"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_response_time)
-                ? formatWaktu(dataSubSelected?.durasi_response_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
+      ? formatWaktu(dataSubSelected?.durasi_response_time)
+      : '-'
+    " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_recovery_time)
-                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
+      ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+      : '-'
+    " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -716,20 +304,12 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.referensi_marking"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.referensi_marking" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.id_pelnomormeter"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.id_pelnomormeter" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -739,29 +319,17 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.alamat_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.no_telp_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.keterangan_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -815,7 +383,9 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguanSE'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
@@ -856,6 +426,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -865,6 +436,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index f5b1872..1b4c6cc 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@@ -1,31 +1,15 @@
 <template>
-  <Filters
-    @reset-form="data = []"
-    @run-report="() => exportToPDF(reportMeta, data, true)"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" @run-report="() => exportToPDF(reportMeta, data, true)"
+    @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type18 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      @cell-click="onCellClicked"
-      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 @cell-click="onCellClicked" 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" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
@@ -33,252 +17,70 @@
       <!--  -->
 
       <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
-        alignment="center"
-        data-field="nama_up3"
-        caption="UP3"
-        css-class="custom-table-column"
-        cell-template="formatText"
-        name="UP3Group"
-        :group-index="3"
-      />
+      <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" data-field="nama_up3" caption="UP3" css-class="custom-table-column"
+        cell-template="formatText" name="UP3Group" :group-index="3" />
       <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
-        <DxColumn
-          alignment="center"
-          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 }">
@@ -296,12 +98,12 @@
       <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer" @click="setMonth(data.column.caption)">
           {{
-            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>
 
@@ -313,408 +115,113 @@
     </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="onExportingDetail"
-          :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="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
           <DxSelection mode="single" />
           <DxPaging :page-size="20" :enabled="true" />
-          <DxPager
-            :visible="true"
-            :allowed-page-sizes="[20, 50, 100]"
-            display-mode="full"
-            :show-page-size-selector="true"
-            :show-info="true"
-            :show-navigation-buttons="true"
-          />
+          <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
+            :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
           <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-          <DxExport
-            :enabled="true"
-            :formats="['pdf', 'xlsx', 'document']"
-            :allow-export-selected-data="false"
-          />
+          <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-          <DxColumn
-            css-class="custom-table-column"
-            :width="50"
-            alignment="center"
-            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
-            data-type="number"
-            caption="No"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="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"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
+            caption="No" cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="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">
@@ -750,11 +257,7 @@
 
         <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">
@@ -764,83 +267,47 @@
 
         <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">
@@ -850,59 +317,36 @@
 
         <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">
@@ -917,92 +361,52 @@
 
         <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">
@@ -1017,38 +421,22 @@
 
         <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">
@@ -1068,11 +456,7 @@
 
         <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">
@@ -1126,7 +510,9 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Gangguan/Rekap/RGangguan_KTI'
 import { getMonthNumber } from '@/utils/texts'
 import { getDataRowGroup } from '@/utils/helper'
@@ -1269,6 +655,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -1278,6 +665,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
index a4c4413..7622f95 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
@@ -899,7 +899,9 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Gangguan/Rekap/RGangguan_PerPosko'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
@@ -993,6 +995,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -1002,6 +1005,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index d87b76f..b8888be 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -907,7 +907,10 @@ import {
   exportToPDF,
   exportDetailToPDF,
   exportToXLSX,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
+
 } from '@/report/Gangguan/Rekap/RGangguan_PerRegu'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
@@ -1004,6 +1007,8 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
+
   }
 }
 
@@ -1013,6 +1018,8 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
+
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index 4906491..56df85f 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -1,239 +1,81 @@
 <template>
-  <Filters
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    @run-report="() => exportToPDF(reportMeta, data, true)"
-    :report-button="true"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)"
+    @run-report="() => exportToPDF(reportMeta, data, true)" :report-button="true" class="mb-4">
     <Type9 @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"
-      :column-width="100"
-      @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"
+      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      :word-wrap-enabled="true">
       <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
-        css-class="custom-table-column"
-        :width="50"
-        alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
-        data-type="number"
-        caption="No"
-        cell-template="formatNumber"
-      />
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field="nama_uid"
-        caption="UID"
-        css-class="custom-table-column"
-        group-index="0"
-        v-if="isGroupBy"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="tanggal"
-        caption="Tanggal Lapor"
-        css-class="custom-table-column"
-      />
+      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
+        cell-template="formatNumber" />
+      <DxColumn :width="120" alignment="center" data-field="nama_uid" caption="UID" css-class="custom-table-column"
+        group-index="0" v-if="isGroupBy" />
+      <DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
+        css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
-          :width="120"
-          alignment="center"
-          data-field="total"
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-          cell-template="formatNumberLaporanTotal"
-        />
+        <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
+          css-class="custom-table-column" cell-template="formatNumberLaporanTotal" />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_selesai"
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-            cell-template="formatNumberLaporanJmlSelesai"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_selesai"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
+            css-class="custom-table-column" cell-template="formatNumberLaporanJmlSelesai" />
+          <DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+            css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_inproses"
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-            cell-template="formatNumberLaporanJmlBelumSelesai"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_inproses"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
+            css-class="custom-table-column" cell-template="formatNumberLaporanJmlBelumSelesai" />
+          <DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+            css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_durasi_response"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="avg_durasi_response"
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="max_durasi_response"
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="min_durasi_response"
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
+            caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
+            css-class="custom-table-column" cell-template="formatTime" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_diatas_sla_response"
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_dibawah_sla_response"
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+            caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_durasi_recovery"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="avg_durasi_recovery"
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="max_durasi_recovery"
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="min_durasi_recovery"
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
+            caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
+            css-class="custom-table-column" cell-template="formatTime" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_diatas_sla_recovery"
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_dibawah_sla_recovery"
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+            caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
       </DxColumn>
 
@@ -246,48 +88,48 @@
       <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{
-            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>
 
       <template #formatNumberLaporanTotal="{ data }">
         <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
           {{
-            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>
 
       <template #formatNumberLaporanJmlSelesai="{ data }">
         <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
           {{
-            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>
 
       <template #formatNumberLaporanJmlBelumSelesai="{ data }">
         <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
           {{
-            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>
 
@@ -298,334 +140,101 @@
       </template>
 
       <DxSummary :calculate-custom-summary="calculateCustomSummary">
-        <DxTotalItem
-          display-format="TOTAL"
-          show-in-column="tanggal"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="total"
-          name="total"
-          summary-type="custom"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_selesai"
-          name="total_selesai"
-          summary-type="custom"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_selesai"
-          name="persen_selesai"
-          summary-type="custom"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
+        <DxTotalItem display-format="TOTAL" show-in-column="tanggal" css-class="text-white !text-left" />
+        <DxTotalItem column="total" name="total" summary-type="custom" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_selesai" name="total_selesai" summary-type="custom" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="persen_selesai" name="persen_selesai" summary-type="custom" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
 
-        <DxTotalItem
-          column="total_inproses"
-          name="total_inproses"
-          summary-type="custom"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_inproses"
-          name="persen_inproses"
-          summary-type="custom"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
+        <DxTotalItem column="total_inproses" name="total_inproses" summary-type="custom" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="persen_inproses" name="persen_inproses" summary-type="custom" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
 
-        <DxTotalItem
-          column="total_durasi_response"
-          name="total_durasi_response"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="avg_durasi_response"
-          name="avg_durasi_response"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="max_durasi_response"
-          name="max_durasi_response"
-          summary-type="max"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatWaktu(e.value)"
-        />
-        <DxTotalItem
-          column="min_durasi_response"
-          name="min_durasi_response"
-          summary-type="min"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatWaktu(e.value)"
-        />
+        <DxTotalItem column="total_durasi_response" name="total_durasi_response" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="avg_durasi_response" name="avg_durasi_response" summary-type="avg" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="max_durasi_response" name="max_durasi_response" summary-type="max" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatWaktu(e.value)" />
+        <DxTotalItem column="min_durasi_response" name="min_durasi_response" summary-type="min" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatWaktu(e.value)" />
 
-        <DxTotalItem
-          column="total_diatas_sla_response"
-          name="total_diatas_sla_response"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_dibawah_sla_response"
-          name="total_dibawah_sla_response"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
+        <DxTotalItem column="total_diatas_sla_response" name="total_diatas_sla_response" summary-type="sum"
+          display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_dibawah_sla_response" name="total_dibawah_sla_response" summary-type="sum"
+          display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
 
-        <DxTotalItem
-          column="total_durasi_recovery"
-          name="total_durasi_recovery"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="avg_durasi_recovery"
-          name="avg_durasi_recovery"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="max_durasi_recovery"
-          name="max_durasi_recovery"
-          summary-type="max"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatWaktu(e.value)"
-        />
-        <DxTotalItem
-          column="min_durasi_recovery"
-          name="min_durasi_recovery"
-          summary-type="min"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatWaktu(e.value)"
-        />
+        <DxTotalItem column="total_durasi_recovery" name="total_durasi_recovery" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="avg_durasi_recovery" name="avg_durasi_recovery" summary-type="avg" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="max_durasi_recovery" name="max_durasi_recovery" summary-type="max" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatWaktu(e.value)" />
+        <DxTotalItem column="min_durasi_recovery" name="min_durasi_recovery" summary-type="min" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatWaktu(e.value)" />
 
-        <DxTotalItem
-          column="total_diatas_sla_recovery"
-          name="total_diatas_sla_recovery"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_dibawah_sla_recovery"
-          name="total_dibawah_sla_recovery"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
+        <DxTotalItem column="total_diatas_sla_recovery" name="total_diatas_sla_recovery" summary-type="sum"
+          display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_dibawah_sla_recovery" name="total_dibawah_sla_recovery" summary-type="sum"
+          display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
       </DxSummary>
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="dialogDetail"
-    title="Detail Rekapitulasi Gangguan/Tanggal"
-    @on-close="closeDialog"
-    :full-width="true"
-  >
+  <DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Gangguan/Tanggal" @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="onExportingDetail"
-          :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="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
           <DxSelection mode="single" />
           <DxPaging :page-size="20" :enabled="true" />
-          <DxPager
-            :visible="true"
-            :allowed-page-sizes="[20, 50, 100]"
-            display-mode="full"
-            :show-page-size-selector="true"
-            :show-info="true"
-            :show-navigation-buttons="true"
-          />
+          <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
+            :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
           <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-          <DxExport
-            :enabled="true"
-            :formats="['pdf', 'xlsx', 'document']"
-            :allow-export-selected-data="false"
-          />
+          <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-          <DxColumn
-            css-class="custom-table-column"
-            :width="50"
-            alignment="center"
-            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
-            data-type="number"
-            caption="No"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_laporan"
-            caption="No Laporan"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_lapor"
-            caption="Tgl Lapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_response"
-            caption="Tgl Datang"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_recovery"
-            caption="Tgl Nyala"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_response_time"
-            caption="Durasi Response Time"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_recovery_time"
-            caption="Durasi Recovery Time"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="status_akhir"
-            caption="Status"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="referensi_marking"
-            caption="Referensi Marking"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="id_pelnomormeter"
-            caption="IDPEL/NO METER"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="nama_pelapor"
-            caption="Nama Pelapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="alamat_pelapor"
-            caption="Alamat Pelapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_telp_pelapor"
-            caption="No Telp Pelapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            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="Tidakan"
-            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"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
+            caption="No" cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="id_pelnomormeter" caption="IDPEL/NO METER"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="200" 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="Tidakan"
+            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">
@@ -661,46 +270,28 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.waktu_response"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_response" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.waktu_recovery"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_response_time)
-                ? formatWaktu(dataSubSelected?.durasi_response_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
+        ? formatWaktu(dataSubSelected?.durasi_response_time)
+        : '-'
+      " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_recovery_time)
-                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
+        ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+        : '-'
+      " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -710,20 +301,12 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.referensi_marking"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.referensi_marking" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.id_pelnomormeter"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.id_pelnomormeter" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -733,29 +316,17 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.alamat_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.no_telp_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.keterangan_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -808,7 +379,9 @@ import {
   exportToPDF,
   exportDetailToPDF,
   exportToXLSX,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Gangguan/Rekap/RGangguan_PerTanggal'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
@@ -906,6 +479,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -915,6 +489,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index 1b54708..ca3cc7a 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -660,7 +660,9 @@ import {
   exportToPDF,
   exportToXLSX,
   exportDetailToPDF,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Gangguan/Rekap/RGangguan_RatingPerPosko'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
@@ -807,6 +809,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
   }
 }
 
@@ -816,6 +819,7 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index 0c86971..1490000 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -1,194 +1,70 @@
 <template>
-  <Filters
-    @reset-form="data = []"
-    @run-report="() => exportToPDF(reportMeta, data, true)"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" @run-report="() => exportToPDF(reportMeta, data, true)"
+    @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type1 @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">
       <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
-        :width="50"
-        alignment="center"
-        caption="NO"
-        data-type="number"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
-        css-class="custom-table-column"
-        cell-template="formatNumber"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="kode_regu"
-        caption="Kode"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
-      <DxColumn
-        :width="200"
-        alignment="center"
-        data-field="nama_regu"
-        caption="Nama Regu"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
+      <DxColumn :width="50" alignment="center" caption="NO" data-type="number"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" css-class="custom-table-column"
+        cell-template="formatNumber" />
+      <DxColumn :width="150" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column"
+        cell-template="formatText" />
+      <DxColumn :width="200" alignment="center" data-field="nama_regu" caption="Nama Regu"
+        css-class="custom-table-column" cell-template="formatText" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
-          alignment="center"
-          data-field="total"
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-          cell-template="formatNumberLaporanTotal"
-        />
+        <DxColumn alignment="center" data-field="total" data-type="number" caption="Total"
+          css-class="custom-table-column" cell-template="formatNumberLaporanTotal" />
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn
-            alignment="center"
-            data-field="total_inproses"
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-            cell-template="formatNumberLaporanJmlBelumSelesai"
-          />
-          <DxColumn
-            alignment="center"
-            data-field="persen_inproses"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
+            css-class="custom-table-column" cell-template="formatNumberLaporanJmlBelumSelesai" />
+          <DxColumn alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+            css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-          <DxColumn
-            alignment="center"
-            data-field="total_selesai"
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-            cell-template="formatNumberLaporanJmlSelesai"
-          />
-          <DxColumn
-            alignment="center"
-            data-field="persen_selesai"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
+            css-class="custom-table-column" cell-template="formatNumberLaporanJmlSelesai" />
+          <DxColumn alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+            css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
-          <DxColumn
-            alignment="center"
-            data-field="total_rating"
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            alignment="center"
-            data-field="nilai_rating1"
-            data-type="number"
-            caption="1"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            alignment="center"
-            data-field="nilai_rating2"
-            data-type="number"
-            caption="2"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            alignment="center"
-            data-field="nilai_rating3"
-            data-type="number"
-            caption="3"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            alignment="center"
-            data-field="nilai_rating4"
-            data-type="number"
-            caption="4"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            alignment="center"
-            data-field="nilai_rating5"
-            data-type="number"
-            caption="5"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            alignment="center"
-            data-field="indeks_rating"
-            data-type="number"
-            caption="Index"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn alignment="center" data-field="total_rating" data-type="number" caption="Jml"
+            css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn alignment="center" data-field="nilai_rating1" data-type="number" caption="1"
+            css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn alignment="center" data-field="nilai_rating2" data-type="number" caption="2"
+            css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn alignment="center" data-field="nilai_rating3" data-type="number" caption="3"
+            css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn alignment="center" data-field="nilai_rating4" data-type="number" caption="4"
+            css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn alignment="center" data-field="nilai_rating5" data-type="number" caption="5"
+            css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn alignment="center" data-field="indeks_rating" data-type="number" caption="Index"
+            css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
       </DxColumn>
 
       <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total_nonrating"
-          data-type="number"
-          caption="Jml"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="70"
-          alignment="center"
-          data-field="persen_nonrating"
-          data-type="number"
-          caption="%"
-          css-class="custom-table-column"
-          cell-template="formatPercentage"
-        />
+        <DxColumn :width="150" alignment="center" data-field="total_nonrating" data-type="number" caption="Jml"
+          css-class="custom-table-column" cell-template="formatNumber" />
+        <DxColumn :width="70" alignment="center" data-field="persen_nonrating" data-type="number" caption="%"
+          css-class="custom-table-column" cell-template="formatPercentage" />
       </DxColumn>
 
       <template #formatText="{ data }">
@@ -206,48 +82,48 @@
       <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{
-            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>
 
       <template #formatNumberLaporanTotal="{ data }">
         <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
           {{
-            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>
 
       <template #formatNumberLaporanJmlSelesai="{ data }">
         <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
           {{
-            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>
 
       <template #formatNumberLaporanJmlBelumSelesai="{ data }">
         <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
           {{
-            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>
 
@@ -259,192 +135,58 @@
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="dialogDetail"
-    title="Detail Rating Per Regu"
-    @on-close="closeDialog"
-    :full-width="true"
-  >
+  <DetailDialog :open="dialogDetail" title="Detail Rating Per Regu" @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="onExportingDetail"
-          :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="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
           <DxSelection mode="single" />
           <DxPaging :page-size="20" :enabled="true" />
-          <DxPager
-            :visible="true"
-            :allowed-page-sizes="[20, 50, 100]"
-            display-mode="full"
-            :show-page-size-selector="true"
-            :show-info="true"
-            :show-navigation-buttons="true"
-          />
+          <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
+            :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
           <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-          <DxExport
-            :enabled="true"
-            :formats="['pdf', 'xlsx', 'document']"
-            :allow-export-selected-data="false"
-          />
+          <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-          <DxColumn
-            css-class="custom-table-column"
-            :width="50"
-            alignment="center"
-            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
-            data-type="number"
-            caption="No"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_laporan"
-            caption="No Laporan"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="nilai_rating"
-            caption="Rating"
-            css-class="custom-table-column"
-            cell-template="formatRating"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_lapor"
-            caption="Tgl Lapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_response"
-            caption="Tgl Datang"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_recovery"
-            caption="Tgl Nyala"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_response_time"
-            caption="Durasi Response Time"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_recovery_time"
-            caption="Durasi Recovery Time"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="status_akhir"
-            caption="Status"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="referensi_marking"
-            caption="Referensi Marking"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="idpel_nometer"
-            caption="IDPEL/NO METER"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="nama_pelapor"
-            caption="Nama Pelapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="alamat_pelapor"
-            caption="Alamat Pelapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_telp_pelapor"
-            caption="No Telp Pelapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            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="Tidakan"
-            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"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
+            caption="No" cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="nilai_rating" caption="Rating"
+            css-class="custom-table-column" cell-template="formatRating" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="200" 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="Tidakan"
+            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">
@@ -466,14 +208,8 @@
 
           <template #formatRating="{ data }">
             <div class="flex justify-center cursor-pointer">
-              <vue3starRatings
-                v-model="data.text"
-                :starSize="20"
-                starColor="#CCCC00"
-                inactiveColor="#D1D5DB"
-                :numberOfStars="5"
-                :disableClick="true"
-              />
+              <vue3starRatings v-model="data.text" :starSize="20" starColor="#CCCC00" inactiveColor="#D1D5DB"
+                :numberOfStars="5" :disableClick="true" />
             </div>
           </template>
         </DxDataGrid>
@@ -488,17 +224,12 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Rating:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.nilai_rating)
-                ? parseInt(dataSubSelected?.nilai_rating) > 0
-                  ? `${parseInt(dataSubSelected?.nilai_rating)} Bintang`
-                  : `Tidak Ada Bintang`
-                : `Tidak Ada Bintang`
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.nilai_rating)
+        ? parseInt(dataSubSelected?.nilai_rating) > 0
+          ? `${parseInt(dataSubSelected?.nilai_rating)} Bintang`
+          : `Tidak Ada Bintang`
+        : `Tidak Ada Bintang`
+      " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -508,46 +239,28 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.waktu_response"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_response" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.waktu_recovery"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_response_time)
-                ? formatWaktu(dataSubSelected?.durasi_response_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
+        ? formatWaktu(dataSubSelected?.durasi_response_time)
+        : '-'
+      " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_recovery_time)
-                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
+        ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+        : '-'
+      " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -557,11 +270,7 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.referensi_marking"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.referensi_marking" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -576,29 +285,17 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.alamat_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.no_telp_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.keterangan_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -650,7 +347,9 @@ import {
   exportToPDF,
   exportDetailToPDF,
   exportToXLSX,
-  exportDetailToXLSX
+  exportDetailToXLSX,
+  exportToDOCX,
+  exportDetailToDOCX
 } from '@/report/Gangguan/Rekap/RGangguan_RatingPerRegu'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
@@ -750,6 +449,8 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+    exportToDOCX(reportMeta.value, data.value)
+
   }
 }
 
@@ -759,6 +460,8 @@ const onExportingDetail = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportDetailToXLSX(reportMeta.value, e)
   } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
+
   }
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index 0becdc4..fd115f7 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -1,378 +1,127 @@
 <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">
     <Type13 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div>
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :data-source="data"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onDataSelectionChanged"
-      :column-width="100"
-      @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"
+      :show-column-lines="true" :show-row-lines="false" :show-borders="true" :data-source="data"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
+      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" />
       <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
-        :width="50"
-        alignment="center"
-        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
-        caption="NO"
-        css-class="custom-table-column"
-        data-type="number"
-        cell-template="formatNumber"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="tanggal_lapor"
-        caption="Tanggal Lapor"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="nama_uid"
-        caption="UID"
-        css-class="custom-table-column"
-        :group-index="0"
-        v-if="isGroupBy"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field=""
-        caption="Seluruh Distribusi"
-        css-class="custom-table-column"
-        :group-index="0"
-        v-else
-      />
+      <DxColumn :width="50" alignment="center"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO"
+        css-class="custom-table-column" data-type="number" cell-template="formatNumber" />
+      <DxColumn :width="170" alignment="center" data-field="tanggal_lapor" caption="Tanggal Lapor"
+        css-class="custom-table-column" cell-template="formatText" />
+      <DxColumn :width="170" alignment="center" data-field="nama_uid" caption="UID" css-class="custom-table-column"
+        :group-index="0" v-if="isGroupBy" />
+      <DxColumn :width="170" alignment="center" data-field="" caption="Seluruh Distribusi"
+        css-class="custom-table-column" :group-index="0" v-else />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total"
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-          cell-template="formatNumberLaporanTotal"
-        />
+        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
+          css-class="custom-table-column" cell-template="formatNumberLaporanTotal" />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_selesai"
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-            cell-template="formatNumberLaporanJmlSelesai"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_selesai"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
+            css-class="custom-table-column" cell-template="formatNumberLaporanJmlSelesai" />
+          <DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+            css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_inproses"
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-            cell-template="formatNumberLaporanJmlBelumSelesai"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_inproses"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
+            css-class="custom-table-column" cell-template="formatNumberLaporanJmlBelumSelesai" />
+          <DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+            css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_durasi_response"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="avg_durasi_response"
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="max_durasi_response"
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="min_durasi_response"
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_durasi_response" data-type="number"
+            caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
+            css-class="custom-table-column" cell-template="formatTime" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_diatas_sla_response"
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_dibawah_sla_response"
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+            caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_durasi_recovery"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="avg_durasi_recovery"
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="max_durasi_recovery"
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="min_durasi_recovery"
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_durasi_recovery" data-type="number"
+            caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
+            css-class="custom-table-column" cell-template="formatTime" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_diatas_sla_recovery"
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_dibawah_sla_recovery"
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+            caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
         </DxColumn>
       </DxColumn>
 
       <DxSummary>
-        <DxTotalItem
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="tanggal_lapor"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="total"
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="tanggal_lapor"
+          css-class="text-white !text-left" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="total" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="total_selesai" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem summary-type="avg" display-format="{0}" column="persen_selesai" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="total_inproses" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem summary-type="avg" display-format="{0}" column="persen_inproses" css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="total_durasi_response"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem summary-type="avg" display-format="{0}" column="avg_durasi_response"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem summary-type="min" display-format="{0}" column="min_durasi_response"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="total_selesai"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxTotalItem summary-type="max" display-format="{0}" column="max_durasi_response"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          summary-type="avg"
-          display-format="{0}"
-          column="persen_selesai"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="total_diatas_sla_response"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="total_dibawah_sla_response"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="total_durasi_recovery"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem summary-type="avg" display-format="{0}" column="avg_durasi_recovery"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem summary-type="min" display-format="{0}" column="min_durasi_recovery"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="total_inproses"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxTotalItem summary-type="max" display-format="{0}" column="max_durasi_recovery"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          summary-type="avg"
-          display-format="{0}"
-          column="persen_inproses"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="total_durasi_response"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          summary-type="avg"
-          display-format="{0}"
-          column="avg_durasi_response"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          summary-type="min"
-          display-format="{0}"
-          column="min_durasi_response"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxTotalItem
-          summary-type="max"
-          display-format="{0}"
-          column="max_durasi_response"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="total_diatas_sla_response"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="total_dibawah_sla_response"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="total_durasi_recovery"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          summary-type="avg"
-          display-format="{0}"
-          column="avg_durasi_recovery"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          summary-type="min"
-          display-format="{0}"
-          column="min_durasi_recovery"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxTotalItem
-          summary-type="max"
-          display-format="{0}"
-          column="max_durasi_recovery"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="total_diatas_sla_recovery"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="total_dibawah_sla_recovery"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="total_diatas_sla_recovery"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="total_dibawah_sla_recovery"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
       </DxSummary>
 
       <template #formatTime="{ data }">
@@ -388,48 +137,48 @@
       <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{
-            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>
 
       <template #formatNumberLaporanTotal="{ data }">
         <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
           {{
-            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>
 
       <template #formatNumberLaporanJmlSelesai="{ data }">
         <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
           {{
-            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>
 
       <template #formatNumberLaporanJmlBelumSelesai="{ data }">
         <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
           {{
-            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>
 
@@ -441,189 +190,55 @@
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="dialogDetail"
-    title="Rekapitulasi Keluhan Per Tanggal"
-    @on-close="closedialogDetail"
-    :full-width="true"
-  >
+  <DetailDialog :open="dialogDetail" title="Rekapitulasi Keluhan Per Tanggal" @on-close="closedialogDetail"
+    :full-width="true">
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
-        <DxDataGrid
-          :allow-column-reordering="true"
-          class="max-h-[calc(100vh-140px)]"
-          :data-source="dataSub"
-          :show-column-lines="true"
-          :show-row-lines="false"
-          :show-borders="true"
-          :row-alternation-enabled="true"
-          :hover-state-enabled="true"
-          @selection-changed="onDataSubSelectionChanged"
-          :column-width="100"
-          @exporting="onExportingDetail"
-          :allow-column-resizing="true"
-          column-resizing-mode="widget"
-        >
+        <DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
+          :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
+          :hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
+          @exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
           <DxSelection mode="single" />
           <DxPaging :page-size="20" :enabled="true" />
-          <DxPager
-            :visible="true"
-            :allowed-page-sizes="[20, 50, 100]"
-            display-mode="full"
-            :show-page-size-selector="true"
-            :show-info="true"
-            :show-navigation-buttons="true"
-          />
+          <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
+            :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
 
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-          <DxExport
-            :enabled="true"
-            :formats="['pdf', 'xlsx', 'document']"
-            :allow-export-selected-data="false"
-          />
+          <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-          <DxColumn
-            css-class="custom-table-column"
-            :width="50"
-            alignment="center"
-            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
-            data-type="number"
-            caption="No"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_laporan"
-            caption="No Laporan"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_lapor"
-            caption="Tgl Lapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_response"
-            caption="Dalam Proses Bidang"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_recovery"
-            caption="Selesai Bidang Unit"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_response_time"
-            caption="Durasi Response Time"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_recovery_time"
-            caption="Durasi Recovery Time"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="status_akhir"
-            caption="Status"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="idpel_nometer"
-            caption="IDPEL/NO METER"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="nama_pelapor"
-            caption="Nama Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            alignment="center"
-            data-field="alamat_pelapor"
-            caption="Alamat Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_telp_pelapor"
-            caption="No Tlp Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            alignment="center"
-            data-field="keterangan_pelapor"
-            caption="Keterangan Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="nama_ulp"
-            caption="Rayon"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="uraian"
-            caption="Uraian"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="respon_pelanggan"
-            caption="Respon Pelanggan"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
+          <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
+            caption="No" cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Dalam Proses Bidang"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Selesai Bidang Unit"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="200" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Tlp Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Rayon" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="uraian" caption="Uraian" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="respon_pelanggan" caption="Respon Pelanggan"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
 
           <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
@@ -660,46 +275,28 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.waktu_response"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_response" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.waktu_recovery"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_response_time)
-                ? formatWaktu(dataSubSelected?.durasi_response_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
+      ? formatWaktu(dataSubSelected?.durasi_response_time)
+      : '-'
+      " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_recovery_time)
-                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
+      ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+      : '-'
+      " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -719,30 +316,17 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            type="textarea"
-            :value="dataSubSelected?.alamat_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" type="textarea" :value="dataSubSelected?.alamat_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">NO Telp Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.no_telp_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.keterangan_pelapor"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -752,22 +336,12 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Uraian:</h3>
-          <InputText
-            :readonly="true"
-            type="textarea"
-            :value="dataSubSelected?.uraian"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" type="textarea" :value="dataSubSelected?.uraian" 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">Response Pelanggan:</h3>
-          <InputText
-            :readonly="true"
-            type="textarea"
-            :value="dataSubSelected?.respon_pelanggan"
-            class-name="flex-1"
-          />
+          <InputText :readonly="true" type="textarea" :value="dataSubSelected?.respon_pelanggan" class-name="flex-1" />
         </div>
       </div>
     </div>
@@ -777,6 +351,7 @@
 </template>
 
 <script setup lang="ts">
+
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
@@ -950,6 +525,7 @@ const onExporting = (e: any) => {
   } else if (e.format === 'xlsx') {
     exportToXLSX(reportMeta.value, e)
   } else {
+
   }
 }
 
diff --git a/src/report/Gangguan/Rekap/RGangguan_ALL.ts b/src/report/Gangguan/Rekap/RGangguan_ALL.ts
index e91d037..00c35ab 100644
--- a/src/report/Gangguan/Rekap/RGangguan_ALL.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_ALL.ts
@@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { exportDetailToWord, exportToWord } from '@/report/Gangguan/Rekap/doc/RGangguan_ALL_DOC'
 
 const reportName = 'Rekapitulasi Gangguan All'
 const fontSize = 5
@@ -153,15 +154,15 @@ const formatData = (rawData: any) => {
       const summary = data[regional][uid].summary
       const avgDurasiDispatch = summary.avg_durasi_dispatch.length
         ? summary.avg_durasi_dispatch.reduce((a: any, b: any) => a + b) /
-          summary.avg_durasi_dispatch.length
+        summary.avg_durasi_dispatch.length
         : 0
       const avgDurasiResponse = summary.avg_durasi_response.length
         ? summary.avg_durasi_response.reduce((a: any, b: any) => a + b) /
-          summary.avg_durasi_response.length
+        summary.avg_durasi_response.length
         : 0
       const avgDurasiRecovery = summary.avg_durasi_recovery.length
         ? summary.avg_durasi_recovery.reduce((a: any, b: any) => a + b) /
-          summary.avg_durasi_recovery.length
+        summary.avg_durasi_recovery.length
         : 0
 
       formattedData.push([
@@ -235,7 +236,7 @@ const formatData = (rawData: any) => {
       formatNumber(
         total.avg_durasi_dispatch.length
           ? total.avg_durasi_dispatch.reduce((a: any, b: any) => a + b) /
-              total.avg_durasi_dispatch.length
+          total.avg_durasi_dispatch.length
           : 0
       ),
       formatWaktu(Math.max(...total.max_durasi_dispatch)),
@@ -245,7 +246,7 @@ const formatData = (rawData: any) => {
       formatNumber(
         total.avg_durasi_response.length
           ? total.avg_durasi_response.reduce((a: any, b: any) => a + b) /
-              total.avg_durasi_response.length
+          total.avg_durasi_response.length
           : 0
       ),
       formatWaktu(Math.max(...total.max_durasi_response)),
@@ -255,7 +256,7 @@ const formatData = (rawData: any) => {
       formatNumber(
         total.avg_durasi_recovery.length
           ? total.avg_durasi_recovery.reduce((a: any, b: any) => a + b) /
-              total.avg_durasi_recovery.length
+          total.avg_durasi_recovery.length
           : 0
       ),
       formatWaktu(Math.max(...total.max_durasi_recovery)),
@@ -299,7 +300,7 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   const doc = new jsPDF({
     orientation: 'landscape'
   })
-
+  console.log(data)
   autoTable(doc, {
     head: [
       ['PT. PLN(Persero)', '', ''],
@@ -642,28 +643,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     2,
     1,
-    `UNIT INDUK : ${
-      reportMeta.uid
-        ? reportMeta.uid.name.toUpperCase()
-        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    `UNIT INDUK : ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     3,
     1,
-    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
-      reportMeta.up3
-        ? reportMeta.up3.name.toUpperCase()
-        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     4,
     1,
-    `POSKO : ${
-      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    `POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
     }`
   )
 
@@ -737,5 +735,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
-
-export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), reportName, formatMetaData(reportMeta))
+}
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  exportDetailToWord(reportMeta, rawData, `Detail ${reportName}`, formatMetaData(reportMeta))
+}
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts b/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
index 2a98dd4..53fa8d8 100644
--- a/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
@@ -16,9 +16,9 @@ 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'
+import { exportToWord, exportDetailToWord } from '@/report/Gangguan/Rekap/doc/RGangguan_AlihPosko_DOC'
 
 const reportName = 'Rekapitulasi Gangguan Alih Posko'
 const fontSize = 5
@@ -397,28 +397,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     2,
     1,
-    `UNIT INDUK : ${
-      reportMeta.uid
-        ? reportMeta.uid.name.toUpperCase()
-        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    `UNIT INDUK : ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     3,
     1,
-    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
-      reportMeta.up3
-        ? reportMeta.up3.name.toUpperCase()
-        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     4,
     1,
-    `POSKO : ${
-      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    `POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
     }`
   )
 
@@ -490,5 +487,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
-
-export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
+}
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
+}
+export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts b/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
index 56575fa..37f0274 100644
--- a/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
@@ -18,6 +18,7 @@ import autoTable from 'jspdf-autotable'
 import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber } from '@/utils/numbers'
+import { exportDetailToWord, exportToWord } from './doc/RGangguan_BerdasarMedia_DOC'
 
 const reportName = 'Rekapitulasi Gangguan Berdasarkan Media'
 const fontSize = 5
@@ -399,28 +400,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     2,
     1,
-    `UNIT INDUK : ${
-      reportMeta.uid
-        ? reportMeta.uid.name.toUpperCase()
-        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    `UNIT INDUK : ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     3,
     1,
-    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
-      reportMeta.up3
-        ? reportMeta.up3.name.toUpperCase()
-        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     4,
     1,
-    `POSKO : ${
-      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    `POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
     }`
   )
 
@@ -494,5 +492,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
-
-export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
+}
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
+}
+export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_CTTM.ts b/src/report/Gangguan/Rekap/RGangguan_CTTM.ts
index c6afc4e..689a538 100644
--- a/src/report/Gangguan/Rekap/RGangguan_CTTM.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_CTTM.ts
@@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber } from '@/utils/numbers'
+import { exportDetailToWord, exportToWord } from './doc/RGangguan_CTTM_DOC'
 
 const reportName = 'Rekapitulasi Cleansing Transaksi TM'
 const fontSize = 5
@@ -505,5 +506,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
-
-export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
+}
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
+}
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX ,exportToDOCX,exportDetailToDOCX}
diff --git a/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts b/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
index f9391ee..bef530c 100644
--- a/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
@@ -18,6 +18,7 @@ import autoTable from 'jspdf-autotable'
 import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { exportDetailToWord, exportToWord } from './doc/RGangguan_DMAPKT_DOC'
 
 const reportName = 'Rekapitulasi Gangguan Diselesaikan Mobile APKT'
 const fontSize = 4
@@ -557,28 +558,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     2,
     1,
-    `UNIT INDUK : ${
-      reportMeta.uid
-        ? reportMeta.uid.name.toUpperCase()
-        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    `UNIT INDUK : ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     3,
     1,
-    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
-      reportMeta.up3
-        ? reportMeta.up3.name.toUpperCase()
-        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     4,
     1,
-    `POSKO : ${
-      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    `POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
     }`
   )
 
@@ -652,5 +650,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
-
-export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
+}
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
+}
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts b/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
index 93e6cad..da497e8 100644
--- a/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
@@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { exportToWord } from './doc/RGangguan_JenisGangguan_DOC'
 
 const reportName = 'Rekapitulasi Gangguan Jenis Gangguan'
 
@@ -59,7 +60,7 @@ const formatData = (rawData: any) => {
     total_recovery_time_kurang_sla: 0
   }
 
-  for (const sub_kelompok of data) {
+  for (const sub_kelompok of Object.keys(data)) {
     const total: any = {
       total_laporan: 0,
       total_laporan_sudah_selesai: 0,
@@ -97,16 +98,16 @@ const formatData = (rawData: any) => {
           !data[sub_kelompok][i].laporan.sudahSelesai.jml || !data[sub_kelompok][i].laporan.total
             ? '0%'
             : (data[sub_kelompok][i].laporan.sudahSelesai.jml /
-                data[sub_kelompok][i].laporan.total) *
-                100
+              data[sub_kelompok][i].laporan.total) *
+            100
         ),
         formatNumber(data[sub_kelompok][i].laporan.belumSelesai.jml),
         formatPercentage(
           !data[sub_kelompok][i].laporan.belumSelesai.jml || !data[sub_kelompok][i].laporan.total
             ? '0%'
             : (data[sub_kelompok][i].laporan.belumSelesai.jml /
-                data[sub_kelompok][i].laporan.total) *
-                100
+              data[sub_kelompok][i].laporan.total) *
+            100
         ),
         formatNumber(data[sub_kelompok][i].responseTime.menit.total),
         formatNumber(data[sub_kelompok][i].responseTime.menit.rataRata),
@@ -182,7 +183,7 @@ const formatData = (rawData: any) => {
       formatNumber(
         total.total_response_time_rata_rata.length
           ? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
-              total.total_response_time_rata_rata.length
+          total.total_response_time_rata_rata.length
           : 0
       ),
       formatWaktu(Math.max(...total.total_response_time_max)),
@@ -193,7 +194,7 @@ const formatData = (rawData: any) => {
       formatNumber(
         total.total_recovery_time_rata_rata.length
           ? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
-              total.total_recovery_time_rata_rata.length
+          total.total_recovery_time_rata_rata.length
           : 0
       ),
       formatWaktu(Math.max(...total.total_recovery_time_max)),
@@ -222,7 +223,7 @@ const formatData = (rawData: any) => {
     formatNumber(
       grandTotal.total_response_time_rata_rata.length
         ? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
-            grandTotal.total_response_time_rata_rata.length
+        grandTotal.total_response_time_rata_rata.length
         : 0
     ),
     formatWaktu(Math.max(...grandTotal.total_response_time_max)),
@@ -233,7 +234,7 @@ const formatData = (rawData: any) => {
     formatNumber(
       grandTotal.total_recovery_time_rata_rata.length
         ? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
-            grandTotal.total_recovery_time_rata_rata.length
+        grandTotal.total_recovery_time_rata_rata.length
         : 0
     ),
     formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
@@ -492,28 +493,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     2,
     1,
-    `UNIT INDUK : ${
-      reportMeta.uid
-        ? reportMeta.uid.name.toUpperCase()
-        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    `UNIT INDUK : ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     3,
     1,
-    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
-      reportMeta.up3
-        ? reportMeta.up3.name.toUpperCase()
-        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     4,
     1,
-    `POSKO : ${
-      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    `POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
     }`
   )
 
@@ -549,5 +547,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
-
-export { exportToPDF, exportToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
+}
+export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts b/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts
index e05b752..0091f1e 100644
--- a/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts
@@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { exportDetailToWord, exportToWord } from './doc/RGangguan_JenisGangguanSE_DOC'
 
 const reportName = 'Rekapitulasi Gangguan Jenis Gangguan SE 004'
 const fontSize = 5
@@ -166,7 +167,7 @@ const formatData = (rawData: any) => {
       formatNumber(
         total.total_response_time_rata_rata.length
           ? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
-              total.total_response_time_rata_rata.length
+          total.total_response_time_rata_rata.length
           : 0
       ),
       formatWaktu(Math.max(...total.total_response_time_max)),
@@ -177,7 +178,7 @@ const formatData = (rawData: any) => {
       formatNumber(
         total.total_recovery_time_rata_rata.length
           ? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
-              total.total_recovery_time_rata_rata.length
+          total.total_recovery_time_rata_rata.length
           : 0
       ),
       formatWaktu(Math.max(...total.total_recovery_time_max)),
@@ -206,7 +207,7 @@ const formatData = (rawData: any) => {
     formatNumber(
       grandTotal.total_response_time_rata_rata.length
         ? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
-            grandTotal.total_response_time_rata_rata.length
+        grandTotal.total_response_time_rata_rata.length
         : 0
     ),
     formatWaktu(Math.max(...grandTotal.total_response_time_max)),
@@ -217,7 +218,7 @@ const formatData = (rawData: any) => {
     formatNumber(
       grandTotal.total_recovery_time_rata_rata.length
         ? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
-            grandTotal.total_recovery_time_rata_rata.length
+        grandTotal.total_recovery_time_rata_rata.length
         : 0
     ),
     formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
@@ -610,28 +611,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     2,
     1,
-    `UNIT INDUK : ${
-      reportMeta.uid
-        ? reportMeta.uid.name.toUpperCase()
-        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    `UNIT INDUK : ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     3,
     1,
-    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
-      reportMeta.up3
-        ? reportMeta.up3.name.toUpperCase()
-        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     4,
     1,
-    `POSKO : ${
-      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    `POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
     }`
   )
 
@@ -706,4 +704,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
+}
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
+}
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_KTI.ts b/src/report/Gangguan/Rekap/RGangguan_KTI.ts
index 7dd9baf..d2d0e23 100644
--- a/src/report/Gangguan/Rekap/RGangguan_KTI.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_KTI.ts
@@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber } from '@/utils/numbers'
+import { exportDetailToWord, exportToWord } from './doc/RGangguan_KTI_DOC'
 
 const reportName = 'Rekapitulasi Koreksi Transaksi Individual'
 const fontSize = 5
@@ -476,28 +477,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     2,
     1,
-    `UNIT INDUK : ${
-      reportMeta.uid
-        ? reportMeta.uid.name.toUpperCase()
-        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    `UNIT INDUK : ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     3,
     1,
-    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
-      reportMeta.up3
-        ? reportMeta.up3.name.toUpperCase()
-        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     4,
     1,
-    `POSKO : ${
-      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    `POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
     }`
   )
 
@@ -571,5 +569,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
-
-export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
+}
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
+}
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts b/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
index cd4dc03..3aed933 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
@@ -1,17 +1,5 @@
 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'
@@ -19,6 +7,7 @@ import { Workbook } from 'exceljs'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { exportDetailToWord, exportToWord } from './doc/RGangguan_PerPosko_DOC'
 
 const reportName = 'Rekapitulasi Gangguan Per Posko'
 const fontSize = 5
@@ -165,7 +154,7 @@ const formatData = (rawData: any) => {
       formatNumber(
         total.total_response_time_rata_rata.length
           ? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
-              total.total_response_time_rata_rata.length
+          total.total_response_time_rata_rata.length
           : 0
       ),
       formatWaktu(Math.max(...total.total_response_time_max)),
@@ -176,7 +165,7 @@ const formatData = (rawData: any) => {
       formatNumber(
         total.total_recovery_time_rata_rata.length
           ? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
-              total.total_recovery_time_rata_rata.length
+          total.total_recovery_time_rata_rata.length
           : 0
       ),
       formatWaktu(Math.max(...total.total_recovery_time_max)),
@@ -205,7 +194,7 @@ const formatData = (rawData: any) => {
     formatNumber(
       grandTotal.total_response_time_rata_rata.length
         ? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
-            grandTotal.total_response_time_rata_rata.length
+        grandTotal.total_response_time_rata_rata.length
         : 0
     ),
     formatWaktu(Math.max(...grandTotal.total_response_time_max)),
@@ -216,7 +205,7 @@ const formatData = (rawData: any) => {
     formatNumber(
       grandTotal.total_recovery_time_rata_rata.length
         ? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
-            grandTotal.total_recovery_time_rata_rata.length
+        grandTotal.total_recovery_time_rata_rata.length
         : 0
     ),
     formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
@@ -599,20 +588,18 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     2,
     1,
-    `UNIT INDUK : ${
-      reportMeta.uid
-        ? reportMeta.uid.name.toUpperCase()
-        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    `UNIT INDUK : ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     3,
     1,
-    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
-      reportMeta.up3
-        ? reportMeta.up3.name.toUpperCase()
-        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
     }`
   )
 
@@ -686,4 +673,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
+}
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
+}
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts b/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
index a9370c2..4ec4d6e 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
@@ -1,17 +1,5 @@
 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'
@@ -19,6 +7,8 @@ import { Workbook } from 'exceljs'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { exportDetailToWord } from './doc/RGangguan_PerRegu_DOC'
+import { exportToWord } from './doc/RGangguan_PerPosko_DOC'
 
 const reportName = 'Rekapitulasi Gangguan Per Regu'
 const fontSize = 5
@@ -168,7 +158,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
         formatNumber(
           total.total_response_time_rata_rata.length
             ? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
-                total.total_response_time_rata_rata.length
+            total.total_response_time_rata_rata.length
             : 0
         ),
         formatWaktu(Math.max(...total.total_response_time_max)),
@@ -179,7 +169,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
         formatNumber(
           total.total_recovery_time_rata_rata.length
             ? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
-                total.total_recovery_time_rata_rata.length
+            total.total_recovery_time_rata_rata.length
             : 0
         ),
         formatWaktu(Math.max(...total.total_recovery_time_max)),
@@ -258,7 +248,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
     formatNumber(
       grandTotal.total_response_time_rata_rata.length
         ? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
-            grandTotal.total_response_time_rata_rata.length
+        grandTotal.total_response_time_rata_rata.length
         : 0
     ),
     formatWaktu(Math.max(...grandTotal.total_response_time_max)),
@@ -269,7 +259,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
     formatNumber(
       grandTotal.total_recovery_time_rata_rata.length
         ? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
-            grandTotal.total_recovery_time_rata_rata.length
+        grandTotal.total_recovery_time_rata_rata.length
         : 0
     ),
     formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
@@ -661,28 +651,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     2,
     1,
-    `UNIT INDUK : ${
-      reportMeta.uid
-        ? reportMeta.uid.name.toUpperCase()
-        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    `UNIT INDUK : ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     3,
     1,
-    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
-      reportMeta.up3
-        ? reportMeta.up3.name.toUpperCase()
-        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     4,
     1,
-    `POSKO : ${
-      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    `POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
     }`
   )
 
@@ -758,4 +745,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData, reportMeta.groupBy), `Laporan ${reportName}`, formatMetaData(reportMeta))
+}
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
+}
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts b/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
index c2d411d..cecbe97 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
@@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { exportDetailToWord, exportToWord } from './doc/RGangguan_PerTanggal_DOC'
 
 const reportName = 'Rekapitulasi Gangguan Per Tanggal'
 const fontSize = 5
@@ -167,7 +168,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
         formatNumber(
           total.total_response_time_rata_rata.length
             ? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
-                total.total_response_time_rata_rata.length
+            total.total_response_time_rata_rata.length
             : 0
         ),
         formatWaktu(Math.max(...total.total_response_time_max)),
@@ -178,7 +179,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
         formatNumber(
           total.total_recovery_time_rata_rata.length
             ? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
-                total.total_recovery_time_rata_rata.length
+            total.total_recovery_time_rata_rata.length
             : 0
         ),
         formatWaktu(Math.max(...total.total_recovery_time_max)),
@@ -256,7 +257,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
     formatNumber(
       grandTotal.total_response_time_rata_rata.length
         ? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
-            grandTotal.total_response_time_rata_rata.length
+        grandTotal.total_response_time_rata_rata.length
         : 0
     ),
     formatWaktu(Math.max(...grandTotal.total_response_time_max)),
@@ -267,7 +268,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
     formatNumber(
       grandTotal.total_recovery_time_rata_rata.length
         ? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
-            grandTotal.total_recovery_time_rata_rata.length
+        grandTotal.total_recovery_time_rata_rata.length
         : 0
     ),
     formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
@@ -655,28 +656,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     2,
     1,
-    `UNIT INDUK : ${
-      reportMeta.uid
-        ? reportMeta.uid.name.toUpperCase()
-        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    `UNIT INDUK : ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     3,
     1,
-    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
-      reportMeta.up3
-        ? reportMeta.up3.name.toUpperCase()
-        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     4,
     1,
-    `POSKO : ${
-      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    `POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
     }`
   )
 
@@ -750,5 +748,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
-
-export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData, reportMeta.groupBy), `Laporan ${reportName}`, formatMetaData(reportMeta))
+}
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
+}
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts b/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
index 41f9fdf..9bb7ac2 100644
--- a/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
@@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 import { numberToStars } from '@/report/utils/rating'
+import { exportDetailToWord, exportToWord } from './doc/RGangguan_RatingPerPosko_DOC'
 
 const reportName = 'Rekapitulasi Rating Per Posko'
 const fontSize = 5
@@ -415,20 +416,18 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     2,
     1,
-    `UNIT INDUK : ${
-      reportMeta.uid
-        ? reportMeta.uid.name.toUpperCase()
-        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    `UNIT INDUK : ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     3,
     1,
-    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
-      reportMeta.up3
-        ? reportMeta.up3.name.toUpperCase()
-        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
     }`
   )
 
@@ -501,5 +500,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
-
-export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
+}
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
+}
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts b/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
index 0cc6fe3..c2f9f47 100644
--- a/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
@@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 import { numberToStars } from '@/report/utils/rating'
+import { exportDetailToWord, exportToWord } from './doc/RGangguan_RatingPerRegu_DOC'
 
 const reportName = 'Rekapitulasi Rating Per Regu'
 const fontSize = 5
@@ -395,28 +396,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     2,
     1,
-    `UNIT INDUK : ${
-      reportMeta.uid
-        ? reportMeta.uid.name.toUpperCase()
-        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    `UNIT INDUK : ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     3,
     1,
-    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
-      reportMeta.up3
-        ? reportMeta.up3.name.toUpperCase()
-        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     4,
     1,
-    `POSKO : ${
-      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    `POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
     }`
   )
 
@@ -491,4 +489,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
-export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
+const exportToDOCX = (reportMeta: any, rawData: any) => {
+  exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
+}
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
+}
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_ALL_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_ALL_DOC.ts
new file mode 100644
index 0000000..78ccfe2
--- /dev/null
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_ALL_DOC.ts
@@ -0,0 +1,282 @@
+
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var column = `<tr>`;
+    let styleTotal = '';
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i];
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
+        styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
+      }
+      i === 0 ?
+        column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+        <tr>
+            <th align="center" rowspan="2">Nama Unit</th>
+            <th align="center" rowspan="2">Total</th>
+            <th align="center" rowspan="2">SELESAI</th>
+            <th align="center" rowspan="2">%</th>
+            <th align="center" rowspan="2">IN PROSES</th>
+            <th align="center" rowspan="2">%</th>
+            <th align="center" colspan="5">DISPATCHING TIME</th>
+            <th align="center" colspan="5">RESPONSE TIME</th>
+            <th align="center" colspan="5">RECOVERY TIME</th>
+        </tr> 
+        <tr>
+            <th align="center">RATA-RATA</th>
+            <th align="center">MAX</th>
+            <th align="center">MIN</th>
+            <th align="center">>SLA</th>
+            <th align="center"><SLA</th>
+            <th align="center">RATA-RATA</th>
+            <th align="center">MAX</th>
+            <th align="center">MIN</th>
+            <th align="center">>SLA</th>
+            <th align="center"><SLA</th>
+            <th align="center">RATA-RATA</th>
+            <th align="center">MAX</th>
+            <th align="center">MIN</th>
+            <th align="center">>SLA</th>
+            <th align="center"><SLA</th>
+        </tr>
+    </thead>
+    <tbody>
+      ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+  <style type="text/css" media="print">
+    @page Section1 {
+        size:841.95pt 21.0cm;
+        mso-page-orientation:landscape;
+        margin:72.0pt 72.0pt 72.0pt 72.0pt;
+        mso-header-margin:35.4pt;
+        mso-footer-margin:35.4pt;
+        mso-paper-source:0;
+    }
+    @page{
+      size: landscape;
+      font-size: 5px;
+    }
+    div.Section1 {
+      page:Section1;
+    }
+    table.main {
+      border-collapse: collapse;
+      width: 100%;
+      text-transform: uppercase;
+      font-size: 8px;
+    }
+    table.main thead tr {
+      background-color: #c0c0c0;
+    }
+</style>
+  </head><body>
+ <div class="Section1">
+ `;
+  var tbody = ``;
+  var cr = '';
+  rawData.map((item: any, i: any) => {
+    cr += `<tr>`;
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.nama_posko}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time}</td>`;
+    cr += `<td>${item.durasi_recovery_time}</td>`;
+    cr += `<td></td>`;
+    cr += `<td></td>`;
+    cr += `<td>${item.jarak_closing}</td>`;
+    cr += `<td>${item.dispatch_oleh}</td>`;
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += `<td>${item.pembuat_laporan}</td>`;
+    cr += `<td>${item.diselesaikan_oleh}</td>`;
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += `<td>${item.referensi_marking}</td>`;
+    cr += `<td>${item.kode_gangguan}</td>`;
+    cr += `<td>${item.jenis_gangguan}</td>`;
+    cr += `<td>${item.penyebab}</td>`;
+    cr += `<td>${item.tindakan}</td>`;
+    cr += `</tr>`;
+  })
+  tbody += cr;
+
+  var body = `
+  <table border=0 style="border:none">
+  <tr>
+      <td colspan="3"> ${company.toUpperCase()}</td>
+  </tr>
+  <tr>
+    <td> Unit Induk Distribusi/Wilayah  </td>
+    <td>:</td>
+    <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+  <tr>
+    <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+    <td>:</td>
+    <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+  </tr>
+  <tr>
+    <td> Posko</td>
+    <td>:</td>
+    <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+  </tr>
+  </table>
+  <center><h6>${filename.toUpperCase()}</h6></center>
+  <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+  <table class="main">
+     <thead>
+     <tr>
+      <th>No</th>
+      <th>Posko</th>
+      <th>No Lapor</th>
+      <th>Tgl/Jam Lapor</th>
+      <th>Tgl/Jam Datang</th>
+      <th>Tgl/Jam Nyala</th>
+      <th>Durasi Response Time</th>
+      <th>Durasi Recovery Time</th>
+      <th>Durasi Penugasan Regu</th>
+      <th>Durasi Perjalanan Regu</th>
+      <th>Jarak Closing (m)</th>
+      <th>Dispatch Oleh</th>
+      <th>IDPEL/NO METER</th>
+      <th>Nama Pelapor</th>
+      <th>Alamat Pelapor</th>
+      <th>No Telp Pelapor</th>
+      <th>Keterangan Pelapor</th>
+      <th>Sumber Lapor</th>
+      <th>Diselesaikan Oleh</th>
+      <th>Status</th>
+      <th>Referensi Marking</th>
+      <th>Kode Gangguan</th>
+      <th>Jenis Gangguan</th>
+      <th>Tindakan</th>
+      <th>Penyebab</th>
+   </tr>
+  </thead>
+  <tbody>${tbody}</tbody>
+  </table>
+ `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_AlihPosko_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_AlihPosko_DOC.ts
new file mode 100755
index 0000000..ccf3f1e
--- /dev/null
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_AlihPosko_DOC.ts
@@ -0,0 +1,251 @@
+
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < 5; index++) {
+    const element = rawData[index];
+    var column = `<tr>`;
+    let styleTotal = '';
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i];
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
+        styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
+      }
+      i === 0 ?
+        column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+        <tr>
+            <th align="center">No</th>
+            <th align="center">Nama Up3</th>
+            <th align="center">Nama Posko</th>
+            <th align="center">Posko In</th>
+            <th align="center">Posko Out</th>
+        </tr> 
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time}</td>`;
+    cr += `<td>${item.durasi_recovery_time}</td>`;
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += `<td>${item.nama_posko}</td>`;
+    cr += `<td>${item.media}</td>`;
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '<td></td>';
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+       <tr>
+       <th>No</th>
+       <th>No Laporan</th>
+       <th>Tgl Lapor</th>
+       <th>Tgl Datang</th>
+       <th>Tgl Nyala</th>
+       <th>Durasi Response Time</th>
+       <th>Durasi Recovery Time</th>
+       <th>Status</th>
+       <th>IDPEL/NO METER</th>
+       <th>Nama Pelapor</th>
+       <th>Alamat Pelapor</th>
+       <th>No Telp Pelapor</th>
+       <th>Keterangan Pelapor</th>
+       <th>Posko</th>
+       <th>Sumber Lapor</th>
+       <th>Nama Petugas</th>
+       <th>Posko Asal</th>
+       <th>Posko Tujuan</th>
+     </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_BerdasarMedia_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_BerdasarMedia_DOC.ts
new file mode 100644
index 0000000..e1e8913
--- /dev/null
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_BerdasarMedia_DOC.ts
@@ -0,0 +1,280 @@
+
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  console.log(rawData)
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var column = `<tr>`;
+    let styleTotal = '';
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i];
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content.content === 'GRAND TOTAL') {
+        styleTotal = 'style="background-color: #c0c0c0"'
+      };
+      i === 0 ?
+        column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  const header =
+    [
+      {
+        content: 'No',
+        rowSpan: 2
+      },
+      {
+        content: 'Nama Media',
+        rowSpan: 2
+      },
+      {
+        content: 'Tanggal',
+        colSpan: 31
+      },
+      {
+        content: 'Total',
+        rowSpan: 2
+      }
+    ];
+  var columnHeader = '';
+  for (let i = 0; i < header.length; i++) {
+    const content = header[i];
+    const rowSpan = content.rowSpan ? `rowspan="${content.rowSpan}"` : '';
+    const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+    columnHeader += `<th ${rowSpan} ${colSpan} align="center">${content.content}</th>`;
+  }
+  var columnTanggal = '';
+  for (let index = 1; index <= 31; index++) {
+    columnTanggal += `<td>${index}</td>`;
+  }
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+        <tr>
+            ${columnHeader}
+        </tr> 
+        <tr>
+          ${columnTanggal}
+        </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time}</td>`;
+    cr += `<td>${item.durasi_recovery_time}</td>`;
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += `<td>${item.referensi_marking}</td>`;
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += `<td>${item.nama_posko}</td>`;
+    cr += `<td>${item.tindakan}</td>`;
+    cr += `<td>${item.penyebab}</td>`;
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+       <tr>
+        <th>No</th>
+        <th>No Laporan</th>
+        <th>Tgl Lapor</th>
+        <th>Tgl Datang</th>
+        <th>Tgl Nyala</th>
+        <th>Durasi Response Time</th>
+        <th>Durasi Recovery Time</th>
+        <th>Status</th>
+        <th>Referensi Marking</th>
+        <th>IDPEL/NO METER</th>
+        <th>Nama Pelapor</th>
+        <th>Alamat Pelapor</th>
+        <th>No Telp Pelapor</th>
+        <th>Keterangan Pelapor</th>
+        <th>Posko</th>
+        <th>Tidakan</th>
+        <th>Penyebab</th>
+      </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_CTTM_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_CTTM_DOC.ts
new file mode 100644
index 0000000..e80f140
--- /dev/null
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_CTTM_DOC.ts
@@ -0,0 +1,279 @@
+
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  console.log(rawData)
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var column = `<tr>`;
+    let styleTotal = '';
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i];
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content.content === 'GRAND TOTAL') {
+        styleTotal = 'style="background-color: #c0c0c0"'
+      };
+      i === 0 ?
+        column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += `</tr>`;
+    tbody += column;
+  }
+  const header =
+    [
+      {
+        content: 'No',
+        rowSpan: 2
+      },
+      {
+        content: 'Nama Unit',
+        rowSpan: 2
+      },
+      {
+        content: 'Bulan',
+        colSpan: 12
+      }
+    ];
+  const bulan = [
+    'Januari',
+    'Februari',
+    'Maret',
+    'April',
+    'Mei',
+    'Juni',
+    'Juli',
+    'Agustus',
+    'September',
+    'Oktober',
+    'November',
+    'Desember'
+  ];
+  var columnHeader = '';
+  for (let i = 0; i < header.length; i++) {
+    const content = header[i];
+    const rowSpan = content.rowSpan ? `rowspan="${content.rowSpan}"` : '';
+    const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+    columnHeader += `<th ${rowSpan} ${colSpan} align="center">${content.content}</th>`;
+  }
+  var columnBulan = '';
+  for (let index = 0; index < 12; index++) {
+    columnBulan += `<td>${bulan[index]}</td>`;
+  }
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+        <tr>
+            ${columnHeader}
+        </tr> 
+        <tr>
+          ${columnBulan}
+        </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.tgl_catat}</td>`;
+    cr += `<td>${item.tgl_pekerjaan}</td>`;
+    cr += `<td>${item.tgl_nyala}</td>`;
+    cr += `<td>${item.durasi_pencatatan}</td>`;
+    cr += `<td>${item.durasi_recovery_time}</td>`;
+    cr += `<td>${item.keterangan_cleansing}</td>`;
+    cr += `<td>${item.nama_posko}</td>`;
+    cr += `<td>${item.tindakan}</td>`;
+    cr += `<td>${item.penyebab}</td>`;
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+       <tr>
+          <th>No</th>
+          <th>No Laporan</th>
+          <th>Tgl Catat</th>
+          <th>Tgl Pekerjaan</th>
+          <th>Tgl Nyala</th>
+          <th>Durasi Pencatatan</th>
+          <th>Durasi Recovery Time</th>
+          <th>Keterangan Cleansing</th>
+          <th>Posko</th>
+          <th>Tindakan</th>
+          <th>Penyebab</th>
+       </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_DMAPKT_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_DMAPKT_DOC.ts
new file mode 100644
index 0000000..0d78a6d
--- /dev/null
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_DMAPKT_DOC.ts
@@ -0,0 +1,315 @@
+
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 5px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = '';
+  var column = '';
+  for (let index = 0; index < rawData.length; index++) {
+    const content = rawData[index];
+
+    column += '<tr>';
+
+    for (let i = 0; i < content.length; i++) {
+      const item = content[i];
+      const colSpan = item ?
+        item.colSpan ? `colspan="${item.colSpan}"`
+          : '' : '';
+      i === 0 ?
+        column += `<td ${colSpan} align="left">${item.content}</td>`
+        : column += `<td>${item}</td>`;
+    }
+    column += `</tr>`;
+  }
+  tbody += column;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+       <tbody><tr>
+       <td height="20" align="center" valign="top"><b><font face="Cambria">NO</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">Nama Regu</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">Kode Regu</font></b></td>
+       <td colspan="5" align="center" valign="top"><b><font face="Cambria">Laporan</font></b></td>
+       <td colspan="16" align="center" valign="top"><b><font face="Cambria">Penyelesaian</font></b></td>
+       </tr>
+     <tr>
+       <td rowspan="5" height="100" align="center" valign="top"><b><font face="Cambria">a</font></b></td>
+       <td rowspan="5" align="center" valign="top"><b><font face="Cambria">b</font></b></td>
+       <td rowspan="5" align="center" valign="top"><b><font face="Cambria">c</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">Total</font></b></td>
+       <td colspan="2" align="center" valign="top"><b><font face="Cambria">Sudah Selesai</font></b></td>
+       <td colspan="2" align="center" valign="top"><b><font face="Cambria">Belum Selesai</font></b></td>
+       <td colspan="8" align="center" valign="top"><b><font face="Cambria">Mobile</font></b></td>
+       <td colspan="8" align="center" valign="top"><b><font face="Cambria">Non Mobile</font></b></td>
+       </tr>
+     <tr>
+       <td rowspan="4" align="center" valign="top"><b><font face="Cambria">d=(e+g)</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">Jml</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">%</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">Jml</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">%</font></b></td>
+       <td colspan="4" align="center" valign="top"><b><font face="Cambria">Non Marking</font></b></td>
+       <td colspan="4" align="center" valign="top"><b><font face="Cambria">Marking</font></b></td>
+       <td colspan="4" align="center" valign="top"><b><font face="Cambria">Non Marking</font></b></td>
+       <td colspan="4" align="center" valign="top"><b><font face="Cambria">Marking</font></b></td>
+       </tr>
+     <tr>
+       <td rowspan="3" align="center" valign="top"><b><font face="Cambria">e</font></b></td>
+       <td rowspan="3" align="center" valign="top"><b><font face="Cambria">f=(e/d)*100</font></b></td>
+       <td rowspan="3" align="center" valign="top"><b><font face="Cambria">g</font></b></td>
+       <td rowspan="3" align="center" valign="top"><b><font face="Cambria">h=(g/d)*100</font></b></td>
+       <td colspan="2" align="center" valign="top"><b><font face="Cambria">Total</font></b></td>
+       <td colspan="2" align="center" valign="top"><b><font face="Cambria">Waktu Rata-Rata</font></b></td>
+       <td colspan="2" align="center" valign="top"><b><font face="Cambria">Total</font></b></td>
+       <td colspan="2" align="center" valign="top"><b><font face="Cambria">Waktu Rata-Rata</font></b></td>
+       <td colspan="2" align="center" valign="top"><b><font face="Cambria">Total</font></b></td>
+       <td colspan="2" align="center" valign="top"><b><font face="Cambria">Waktu Rata-Rata</font></b></td>
+       <td colspan="2" align="center" valign="top"><b><font face="Cambria">Total</font></b></td>
+       <td colspan="2" align="center" valign="top"><b><font face="Cambria">Waktu Rata-Rata</font></b></td>
+       </tr>
+     <tr>
+       <td align="center" valign="top"><b><font face="Cambria">Laporan</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">%</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">Response</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">Recovery</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">Laporan</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">%</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">Response</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">Recovery</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">Laporan</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">%</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">Response</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">Recovery</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">Laporan</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">%</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">Response</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">Recovery</font></b></td>
+     </tr>
+     <tr>
+       <td align="center" valign="top"><b><font face="Cambria">i</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">j=(i/d)*100</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">k</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">l</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">m</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">n=(m/d)*100</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">o</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">p</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">q</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">r=(q/d)*100</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">s</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">t</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">u</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">v=(u/d)*100</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">w</font></b></td>
+       <td align="center" valign="top"><b><font face="Cambria">x</font></b></td>
+     </tr>
+       </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time}</td>`;
+    cr += `<td>${item.durasi_recovery_time}</td>`;
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += `<td>${item.referensi_marking}</td>`;
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += `<td>${item.nama_posko}</td>`;
+    cr += `<td>${item.tindakan}</td>`;
+    cr += `<td>${item.penyebab}</td>`;
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+       <tr>
+          <th>No</th>
+          <th>No Laporan</th>
+          <th>Tgl Catat</th>
+          <th>Tgl Pekerjaan</th>
+          <th>Tgl Nyala</th>
+          <th>Durasi Pencatatan</th>
+          <th>Durasi Recovery Time</th>
+          <th>Keterangan Cleansing</th>
+          <th>Posko</th>
+          <th>Tindakan</th>
+          <th>Penyebab</th>
+       </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguanSE_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguanSE_DOC.ts
new file mode 100644
index 0000000..b0a2d76
--- /dev/null
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguanSE_DOC.ts
@@ -0,0 +1,280 @@
+
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  console.log(rawData)
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = '';
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var column = '<tr>';
+    let styleTotal = '';
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i];
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
+        styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
+      }
+      i === 0 ?
+        column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += '</tr>';
+    tbody += column;
+  }
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+       <tr>
+       <th rowspan="3">No</th>
+       <th rowspan="3">Kode</th>
+       <th rowspan="3" style="width: 25%">Sub Kelompok (Equipment)</th>
+       <th colspan="5">Laporan</th>
+       <th colspan="6">Response Time</th>
+       <th colspan="6">Recovery Time</th>
+     </tr>
+     <tr>
+       <th rowspan="2">Total</th>
+       <th colspan="2">Sudah Selesai</th>
+       <th colspan="2">Belum Selesai</th>
+       <th colspan="4">Menit</th>
+       <th colspan="2">Laporan</th>
+       <th colspan="4">Menit</th>
+       <th colspan="2">Laporan</th>
+     </tr>
+     <tr>
+       <th>Jml</th>
+       <th>%</th>
+       <th>Jml</th>
+       <th>%</th>
+       <th>Total</th>
+       <th>Rata-Rata</th>
+       <th>Max</th>
+       <th>Min</th>
+       <th>>Sla</th>
+       <th><Sla</th>
+       <th>Total</th>
+       <th>Rata-Rata</th>
+       <th>Max</th>
+       <th>Min</th>
+       <th>>Sla</th>
+       <th><Sla</th>
+     </tr>
+     
+       </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td> ${item.no_laporan}</td>`;
+    cr += `<td> ${item.waktu_lapor}</td>`;
+    cr += `<td> ${item.waktu_response}</td>`;
+    cr += `<td> ${item.waktu_recovery}</td>`;
+    cr += `<td> ${item.durasi_response_time}</td>`;
+    cr += `<td> ${item.durasi_recovery_time}</td>`;
+    cr += `<td> ${item.status_akhir}</td>`;
+    cr += `<td> ${item.referensi_marking}</td>`;
+    cr += `<td> ${item.id_pelnomormeter}</td>`;
+    cr += `<td> ${item.nama_pelapor}</td>`;
+    cr += `<td> ${item.alamat_pelapor}</td>`;
+    cr += `<td> ${item.no_telp_pelapor}</td>`;
+    cr += `<td> ${item.keterangan_pelapor}</td>`;
+    cr += `<td> ${item.nama_posko}</td>`;
+    cr += `<td> ${item.tindakan}</td>`;
+    cr += `<td> ${item.penyebab}</td>`;
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+        <tr>
+          <th>No</th>
+          <th>No Laporan</th>
+          <th>Tgl Lapor</th>
+          <th>Tgl Datang</th>
+          <th>Tgl Nyala</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Status</th>
+          <th>Referensi Marking</th>
+          <th>IDPEL/NO METER</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Posko</th>
+          <th>Tindakan</th>
+          <th>Penyebab</th>
+      </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguan_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguan_DOC.ts
new file mode 100644
index 0000000..89e0bed
--- /dev/null
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguan_DOC.ts
@@ -0,0 +1,280 @@
+
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  console.log(rawData)
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = '';
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var column = '<tr>';
+    let styleTotal = '';
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i];
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content.content === 'TOTAL') {
+        styleTotal = 'style="background-color: #c0c0c0"'
+      };
+      i === 0 ?
+        column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += '</tr>';
+    tbody += column;
+  }
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+       <tr>
+       <th rowspan="3">No</th>
+       <th rowspan="3">Kode</th>
+       <th rowspan="3" style="width: 25%">Sub Kelompok (Equipment)</th>
+       <th colspan="5">Laporan</th>
+       <th colspan="6">Response Time</th>
+       <th colspan="6">Recovery Time</th>
+     </tr>
+     <tr>
+       <th rowspan="2">Total</th>
+       <th colspan="2">Sudah Selesai</th>
+       <th colspan="2">Belum Selesai</th>
+       <th colspan="4">Menit</th>
+       <th colspan="2">Laporan</th>
+       <th colspan="4">Menit</th>
+       <th colspan="2">Laporan</th>
+     </tr>
+     <tr>
+       <th>Jml</th>
+       <th>%</th>
+       <th>Jml</th>
+       <th>%</th>
+       <th>Total</th>
+       <th>Rata-Rata</th>
+       <th>Max</th>
+       <th>Min</th>
+       <th>>Sla</th>
+       <th><Sla</th>
+       <th>Total</th>
+       <th>Rata-Rata</th>
+       <th>Max</th>
+       <th>Min</th>
+       <th>>Sla</th>
+       <th><Sla</th>
+     </tr>
+     
+       </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td> ${item.no_laporan}</td>`;
+    cr += `<td> ${item.waktu_lapor}</td>`;
+    cr += `<td> ${item.waktu_response}</td>`;
+    cr += `<td> ${item.waktu_recovery}</td>`;
+    cr += `<td> ${item.durasi_response_time}</td>`;
+    cr += `<td> ${item.durasi_recovery_time}</td>`;
+    cr += `<td> ${item.status_akhir}</td>`;
+    cr += `<td> ${item.referensi_marking}</td>`;
+    cr += `<td> ${item.id_pelnomormeter}</td>`;
+    cr += `<td> ${item.nama_pelapor}</td>`;
+    cr += `<td> ${item.alamat_pelapor}</td>`;
+    cr += `<td> ${item.no_telp_pelapor}</td>`;
+    cr += `<td> ${item.keterangan_pelapor}</td>`;
+    cr += `<td> ${item.nama_posko}</td>`;
+    cr += `<td> ${item.tindakan}</td>`;
+    cr += `<td> ${item.penyebab}</td>`;
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+        <tr>
+          <th>No</th>
+          <th>No Laporan</th>
+          <th>Tgl Lapor</th>
+          <th>Tgl Datang</th>
+          <th>Tgl Nyala</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Status</th>
+          <th>Referensi Marking</th>
+          <th>IDPEL/NO METER</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Posko</th>
+          <th>Tindakan</th>
+          <th>Penyebab</th>
+      </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_KTI_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_KTI_DOC.ts
new file mode 100644
index 0000000..516e4cb
--- /dev/null
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_KTI_DOC.ts
@@ -0,0 +1,293 @@
+
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  console.log(rawData)
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = '';
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var column = '<tr>';
+    let styleTotal = '';
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i];
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
+        styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
+      }
+      i === 0 ?
+        column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += '</tr>';
+    tbody += column;
+  }
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+     <tr>
+       <th rowspan="2">No</th>
+       <th rowspan="2">Nama Unit</th>
+       <th colspan="12">Bulan</th>
+     </tr>
+     <tr>
+       <th>Januari</th>
+       <th>Februari</th>
+       <th>Maret</th>
+       <th>April</th>
+       <th>Mei</th>
+       <th>Juni</th>
+       <th>Juli</th>
+       <th>Agustus</th>
+       <th>September</th>
+       <th>Oktober</th>
+       <th>November</th>
+       <th>Desember</th>
+     </tr>
+     
+     
+       </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.tgl_lapor}</td>`;
+    cr += `<td>${item.tgl_lapor_sblm}</td>`;
+    cr += `<td>${item.tgl_lapor_sdh}</td>`;
+    cr += `<td>${item.tgl_penugasan_sblm}</td>`;
+    cr += `<td>${item.tgl_penugasan_sdh}</td>`;
+    cr += `<td>${item.tgl_perjalanan_sblm}</td>`;
+    cr += `<td>${item.tgl_perjalanan_sdh}</td>`;
+    cr += `<td>${item.tgl_pengerjaan_sblm}</td>`;
+    cr += `<td>${item.tgl_pengerjaan_sdh}</td>`;
+    cr += `<td>${item.tgl_nyala_sementara_sblm}</td>`;
+    cr += `<td>${item.tgl_nyala_sementara_sdh}</td>`;
+    cr += `<td>${item.tgl_nyala_sblm}</td>`;
+    cr += `<td>${item.tgl_nyala_sdh}</td>`;
+    cr += `<td>${item.tgl_selesai_sblm}</td>`;
+    cr += `<td>${item.tgl_selesai_sdh}</td>`;
+    cr += `<td>${item.durasi_response_time_sblm}</td>`;
+    cr += `<td>${item.durasi_response_time_sdh}</td>`;
+    cr += `<td>${item.durasi_recovery_time_sdh}</td>`;
+    cr += `<td>${item.kelompok_sblm}</td>`;
+    cr += `<td>${item.kelompok_sdh}</td>`;
+    cr += `<td>${item.sub_kelompok_sblm}</td>`;
+    cr += `<td>${item.sub_kelompok_sdh}</td>`;
+    cr += `<td>${item.fasilitas_id_sblm}</td>`;
+    cr += `<td>${item.fasilitas_id_sdh}</td>`;
+    cr += `<td>${item.sub_fasilitas_id_sblm}</td>`;
+    cr += `<td>${item.sub_fasilitas_id_sdh}</td>`;
+    cr += `<td>${item.equipment_id_sblm}</td>`;
+    cr += `<td>${item.equipment_id_sdh}</td>`;
+    cr += `<td>${item.event_damage_sblm}</td>`;
+    cr += `<td>${item.event_damage_sdh}</td>`;
+    cr += `<td>${item.cause_id_sblm}</td>`;
+    cr += `<td>${item.cause_id_sdh}</td>`;
+    cr += `<td>${item.cause_group_id_sblm}</td>`;
+    cr += `<td>${item.cause_group_id_sdh}</td>`;
+    cr += `<td>${item.weather_id_sblm}</td>`;
+    cr += `<td>${item.weather_id_sdh}</td>`;
+    cr += `<td>${item.group_koreksi}</td>`;
+    cr += `<td>${item.alasan}</td>`;
+    cr += `<td>${item.idpel_no_meter}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += `<td>${item.nama_posko}</td>`;
+    cr += `<td>${item.tindakan}</td>`;
+    cr += `<td>${item.penyebab}</td>`;
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+        <tr>
+          <th>No</th>
+          <th>No Laporan</th>
+          <th>Tgl Lapor</th>
+          <th>Tgl Datang</th>
+          <th>Tgl Nyala</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Status</th>
+          <th>Referensi Marking</th>
+          <th>IDPEL/NO METER</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Posko</th>
+          <th>Tindakan</th>
+          <th>Penyebab</th>
+      </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_PerPosko_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_PerPosko_DOC.ts
new file mode 100644
index 0000000..ef6b257
--- /dev/null
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_PerPosko_DOC.ts
@@ -0,0 +1,278 @@
+
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = '';
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var column = '<tr>';
+    let styleTotal = '';
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i];
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
+        styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
+      }
+      i === 0 ?
+        column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += '</tr>';
+    tbody += column;
+  }
+  var columnHeader = `<thead>
+  <tr>
+  <th rowspan="3">No</th>
+  <th rowspan="3">Posko</th>
+  <th colspan="5">Laporan</th>
+  <th colspan="6">Response Time</th>
+  <th colspan="6">Recovery Time</th>
+</tr>
+<tr>
+  <th rowspan="2">Total</th>
+  <th colspan="2">Sudah Selesai</th>
+  <th colspan="2">Belum Selesai</th>
+  <th colspan="4">Menit</th>
+  <th colspan="2">Laporan</th>
+  <th colspan="4">Menit</th>
+  <th colspan="2">Laporan</th>
+</tr>
+<tr>
+  <th>Jml</th>
+  <th>%</th>
+  <th>Jml</th>
+  <th>%</th>
+  <th>Total</th>
+  <th>Rata-Rata</th>
+  <th>Max</th>
+  <th>Min</th>
+  <th>>Sla</th>
+  <th><Sla</th>
+  <th>Total</th>
+  <th>Rata-Rata</th>
+  <th>Max</th>
+  <th>Min</th>
+  <th>>Sla</th>
+  <th><Sla</th>
+</tr>
+</thead>
+`;
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+          ${columnHeader}
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time}</td>`;
+    cr += `<td>${item.durasi_recovery_time}</td>`;
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += `<td>${item.referensi_marking}</td>`;
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += `<td>${item.nama_posko}</td>`;
+    cr += `<td>${item.tindakan}</td>`;
+    cr += `<td>${item.penyebab}</td>`;
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+        <tr>
+          <th>No</th>
+          <th>No Laporan</th>
+          <th>Tgl Lapor</th>
+          <th>Tgl Datang</th>
+          <th>Tgl Nyala</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Status</th>
+          <th>Referensi Marking</th>
+          <th>IDPEL/NO METER</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Posko</th>
+          <th>Tindakan</th>
+          <th>Penyebab</th>
+      </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_PerRegu_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_PerRegu_DOC.ts
new file mode 100644
index 0000000..2e55bec
--- /dev/null
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_PerRegu_DOC.ts
@@ -0,0 +1,281 @@
+import { Column } from "jspdf-autotable";
+
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = '';
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var column = '<tr>';
+    let styleTotal = '';
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i];
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
+        styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
+      }
+      i === 0 ?
+        column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += '</tr>';
+    tbody += column;
+  }
+  var columnHeader = `<thead>
+      <tr>
+        <th rowspan="3">No</th>
+        <th rowspan="3">Kode</th>
+        <th rowspan="3">Nama Regu</th>
+        <th colspan="5">Laporan</th>
+        <th colspan="6">Response Time</th>
+        <th colspan="6">Recovery Time</th>
+      </tr>
+      <tr>
+        <th rowspan="2">Total</th>
+        <th colspan="2">Sudah Selesai</th>
+        <th colspan="2">Belum Selesai</th>
+        <th colspan="4">Menit</th>
+        <th colspan="2">Laporan</th>
+        <th colspan="4">Menit</th>
+        <th colspan="2">Laporan</th>
+      </tr>
+      <tr>
+        <th>Jml</th>
+        <th>%</th>
+        <th>Jml</th>
+        <th>%</th>
+        <th>Total</th>
+        <th>Rata-Rata</th>
+        <th>Max</th>
+        <th>Min</th>
+        <th>>Sla</th>
+        <th><Sla</th>
+        <th>Total</th>
+        <th>Rata-Rata</th>
+        <th>Max</th>
+        <th>Min</th>
+        <th>>Sla</th>
+        <th><Sla</th>
+      </tr>
+    </thead>`;
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+    ${columnHeader}
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time}</td>`;
+    cr += `<td>${item.durasi_recovery_time}</td>`;
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += `<td>${item.referensi_marking}</td>`;
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += `<td>${item.nama_posko}</td>`;
+    cr += `<td>${item.tindakan}</td>`;
+    cr += `<td>${item.penyebab}</td>`;
+    cr += '</tr>';
+  });
+  tbody += cr;
+  var columnHeader = `<thead>
+    <tr>
+    <th>No</th>
+    <th>No Laporan</th>
+    <th>Tgl Lapor</th>
+    <th>Tgl Datang</th>
+    <th>Tgl Nyala</th>
+    <th>Durasi Response Time</th>
+    <th>Durasi Recovery Time</th>
+    <th>Status</th>
+    <th>Referensi Marking</th>
+    <th>IDPEL/NO METER</th>
+    <th>Nama Pelapor</th>
+    <th>Alamat Pelapor</th>
+    <th>No Telp Pelapor</th>
+    <th>Keterangan Pelapor</th>
+    <th>Posko</th>
+    <th>Tindakan</th>
+    <th>Penyebab</th>
+    </tr>
+    </thead>`;
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+   ${columnHeader}
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_PerTanggal_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_PerTanggal_DOC.ts
new file mode 100644
index 0000000..ebc71f4
--- /dev/null
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_PerTanggal_DOC.ts
@@ -0,0 +1,278 @@
+
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = '';
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var column = '<tr>';
+    let styleTotal = '';
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i];
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
+        styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
+      }
+      i === 0 ?
+        column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += '</tr>';
+    tbody += column;
+  }
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+       <tr>
+       <th rowspan="3">No</th>
+       <th rowspan="3">Tanggal Lapor</th>
+       <th colspan="5">Laporan</th>
+       <th colspan="6">Response Time</th>
+       <th colspan="6">Recovery Time</th>
+     </tr>
+     <tr>
+       <th rowspan="2">Total</th>
+       <th colspan="2">Sudah Selesai</th>
+       <th colspan="2">Belum Selesai</th>
+       <th colspan="4">Menit</th>
+       <th colspan="2">Laporan</th>
+       <th colspan="4">Menit</th>
+       <th colspan="2">Laporan</th>
+     </tr>
+     <tr>
+       <th>Jml</th>
+       <th>%</th>
+       <th>Jml</th>
+       <th>%</th>
+       <th>Total</th>
+       <th>Rata-Rata</th>
+       <th>Max</th>
+       <th>Min</th>
+       <th>>Sla</th>
+       <th><Sla</th>
+       <th>Total</th>
+       <th>Rata-Rata</th>
+       <th>Max</th>
+       <th>Min</th>
+       <th>>Sla</th>
+       <th><Sla</th>
+     </tr>
+       </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time}</td>`;
+    cr += `<td>${item.durasi_recovery_time}</td>`;
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += `<td>${item.referensi_marking}</td>`;
+    cr += `<td>${item.id_pelnomormeter}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += `<td>${item.nama_posko}</td>`;
+    cr += `<td>${item.tindakan}</td>`;
+    cr += `<td>${item.penyebab}</td>`;
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+       <tr>
+       <th>No</th>
+       <th>No Laporan</th>
+       <th>Tgl Lapor</th>
+       <th>Tgl Datang</th>
+       <th>Tgl Nyala</th>
+       <th>Durasi Response Time</th>
+       <th>Durasi Recovery Time</th>
+       <th>Status</th>
+       <th>Referensi Marking</th>
+       <th>IDPEL/NO METER</th>
+       <th>Nama Pelapor</th>
+       <th>Alamat Pelapor</th>
+       <th>No Telp Pelapor</th>
+       <th>Keterangan Pelapor</th>
+       <th>Posko</th>
+       <th>Tindakan</th>
+       <th>Penyebab</th>
+     </tr>
+     
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_RatingPerPosko_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_RatingPerPosko_DOC.ts
new file mode 100644
index 0000000..22149b4
--- /dev/null
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_RatingPerPosko_DOC.ts
@@ -0,0 +1,276 @@
+import { numberToStars } from "@/report/utils/rating";
+
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = '';
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var column = '<tr>';
+    let styleTotal = '';
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i];
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
+        styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
+      }
+      i === 0 ?
+        column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += '</tr>';
+    tbody += column;
+  }
+  var columnHeader = `<thead>
+  <tr>
+  <th rowspan="3">No</th>
+  <th rowspan="3">Kode</th>
+  <th rowspan="3">Nama Regu</th>
+  <th colspan="5">Laporan</th>
+  <th colspan="7">Rating</th>
+  <th colspan="2">Non Rating</th>
+</tr>
+<tr>
+  <th rowspan="2">Total</th>
+  <th colspan="2">Belum Selesai</th>
+  <th colspan="2">Sudah Selesai</th>
+  <th colspan="7">Bintang</th>
+  <th rowspan="2">Jml</th>
+  <th rowspan="2">%</th>
+</tr>
+<tr>
+  <th>Jml</th>
+  <th>%</th>
+  <th>Jml</th>
+  <th>%</th>
+  <th>Jml</th>
+  <th>1</th>
+  <th>2</th>
+  <th>3</th>
+  <th>4</th>
+  <th>5</th>
+  <th>Index</th>
+</tr>
+
+</thead>
+`;
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+          ${columnHeader}
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${numberToStars(item.nilai_rating)}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time}</td>`;
+    cr += `<td>${item.durasi_recovery_time}</td>`;
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += `<td>${item.referensi_marking}</td>`;
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += `<td>${item.nama_posko}</td>`;
+    cr += `<td>${item.tindakan}</td>`;
+    cr += `<td>${item.penyebab}</td>`;
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+       <tr>
+          <th>No</th>
+          <th>No Laporan</th>
+          <th>Rating</th>
+          <th>Tgl Lapor</th>
+          <th>Tgl Datang</th>
+          <th>Tgl Nyala</th>
+          <th>Durasi Response Time</th>
+          <th>Durasi Recovery Time</th>
+          <th>Status</th>
+          <th>Referensi Marking</th>
+          <th>IDPEL/NO METER</th>
+          <th>Nama Pelapor</th>
+          <th>Alamat Pelapor</th>
+          <th>No Telp Pelapor</th>
+          <th>Keterangan Pelapor</th>
+          <th>Posko</th>
+          <th>Tindakan</th>
+          <th>Penyebab</th>
+     </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Gangguan/Rekap/doc/RGangguan_RatingPerRegu_DOC.ts b/src/report/Gangguan/Rekap/doc/RGangguan_RatingPerRegu_DOC.ts
new file mode 100644
index 0000000..9f22428
--- /dev/null
+++ b/src/report/Gangguan/Rekap/doc/RGangguan_RatingPerRegu_DOC.ts
@@ -0,0 +1,276 @@
+import { numberToStars } from "@/report/utils/rating";
+
+const company = "PT. PLN (Persero)";
+const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = '';
+  for (let index = 0; index < rawData.length; index++) {
+    const element = rawData[index];
+    var column = '<tr>';
+    let styleTotal = '';
+    for (let i = 0; i < element.length; i++) {
+      const content = element[i];
+      const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
+
+      if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
+        styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
+      }
+      i === 0 ?
+        column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
+        : column += `<td ${styleTotal}>${content}</td>`;
+    }
+    column += '</tr>';
+    tbody += column;
+  }
+  var columnHeader = `<thead>
+  <tr>
+  <th rowspan="3">No</th>
+  <th rowspan="3">Kode</th>
+  <th rowspan="3">Nama Regu</th>
+  <th colspan="5">Laporan</th>
+  <th colspan="7">Rating</th>
+  <th colspan="2">Non Rating</th>
+</tr>
+<tr>
+  <th rowspan="2">Total</th>
+  <th colspan="2">Belum Selesai</th>
+  <th colspan="2">Sudah Selesai</th>
+  <th colspan="7">Bintang</th>
+  <th rowspan="2">Jml</th>
+  <th rowspan="2">%</th>
+</tr>
+<tr>
+  <th>Jml</th>
+  <th>%</th>
+  <th>Jml</th>
+  <th>%</th>
+  <th>Jml</th>
+  <th>1</th>
+  <th>2</th>
+  <th>3</th>
+  <th>4</th>
+  <th>5</th>
+  <th>Index</th>
+</tr>
+</thead>
+`;
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+          ${columnHeader}
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
+    <style type="text/css" media="print">
+      @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:72.0pt 72.0pt 72.0pt 72.0pt;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+      }
+      @page{
+        size: landscape;
+        font-size: 5px;
+      }
+      div.Section1 {
+        page:Section1;
+      }
+      table.main {
+        border-collapse: collapse;
+        width: 100%;
+        text-transform: uppercase;
+        font-size: 8px;
+      }
+      table.main thead tr {
+        background-color: #c0c0c0;
+      }
+  </style>
+    </head><body>
+   <div class="Section1">
+   `;
+  var tbody = ``;
+  var cr = ``;
+  rawData.map((item: any, i: any) => {
+    cr += '<tr>';
+    cr += `<td>${i + 1}</td>`;
+    cr += `<td>${item.no_laporan}</td>`;
+    cr += `<td>${numberToStars(item.nilai_rating)}</td>`;
+    cr += `<td>${item.waktu_lapor}</td>`;
+    cr += `<td>${item.waktu_response}</td>`;
+    cr += `<td>${item.waktu_recovery}</td>`;
+    cr += `<td>${item.durasi_response_time}</td>`;
+    cr += `<td>${item.durasi_recovery_time}</td>`;
+    cr += `<td>${item.status_akhir}</td>`;
+    cr += `<td>${item.referensi_marking}</td>`;
+    cr += `<td>${item.idpel_nometer}</td>`;
+    cr += `<td>${item.nama_pelapor}</td>`;
+    cr += `<td>${item.alamat_pelapor}</td>`;
+    cr += `<td>${item.no_telp_pelapor}</td>`;
+    cr += `<td>${item.keterangan_pelapor}</td>`;
+    cr += `<td>${item.nama_posko}</td>`;
+    cr += `<td>${item.tindakan}</td>`;
+    cr += `<td>${item.penyebab}</td>`;
+    cr += '</tr>';
+  });
+  tbody += cr;
+
+  var body = `
+    <table border=0 style="border:none">
+    <tr>
+        <td colspan="3"> ${company.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Unit Induk Distribusi/Wilayah  </td>
+      <td>:</td>
+      <td> ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
+    <tr>
+      <td> Unit Pelaksanaan Pelayanan Pelanggan</td>
+      <td>:</td>
+      <td>  ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
+    </tr>
+    <tr>
+      <td> Posko</td>
+      <td>:</td>
+      <td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
+    </tr>
+    </table>
+    <center><h6>${filename.toUpperCase()}</h6></center>
+    <center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
+    <table class="main">
+       <thead>
+       <tr>
+        <td>No</td>
+        <td>No Laporan</td>
+        <td>Rating</td>
+        <td>Tgl Lapor</td>
+        <td>Tgl Datang</td>
+        <td>Tgl Nyala</td>
+        <td>Durasi Response Time</td>
+        <td>Durasi Recovery Time</td>
+        <td>Status</td>
+        <td>Referensi Marking</td>
+        <td>IDPEL/NO METER</td>
+        <td>Nama Pelapor</td>
+        <td>Alamat Pelapor</td>
+        <td>No Telp Pelapor</td>
+        <td>Keterangan Pelapor</td>
+        <td>Posko</td>
+        <td>Tindakan</td>
+        <td>Penyebab</td>
+    </tr>
+    </thead>
+    <tbody>
+    ${tbody} 
+    </tbody>
+    </table>
+   `
+
+  var postHtml = "</div></body></html>";
+
+  var html = preHtml + body + postHtml;
+
+  var url =
+    "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
+
+  filename = filename ? filename + ".doc" : "document.doc";
+
+  var downloadLink = document.createElement("a");
+
+  document.body.appendChild(downloadLink);
+
+  downloadLink.href = url;
+
+  downloadLink.download = filename;
+
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+}
+
+export { exportToWord, exportDetailToWord }
\ No newline at end of file
diff --git a/src/report/Keluhan/Rekap/RKeluhan_BerdasarMedia.ts b/src/report/Keluhan/Rekap/RKeluhan_BerdasarMedia.ts
index 2654886..fc3c31a 100644
--- a/src/report/Keluhan/Rekap/RKeluhan_BerdasarMedia.ts
+++ b/src/report/Keluhan/Rekap/RKeluhan_BerdasarMedia.ts
@@ -427,30 +427,27 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     2,
     1,
-    `UNIT INDUK : ${
-      reportMeta.uid
-        ? reportMeta.uid.name.toUpperCase()
-        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    `UNIT INDUK : ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     3,
     1,
-    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
-      reportMeta.up3
-        ? reportMeta.up3.name.toUpperCase()
-        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     4,
     1,
-    `UNIT LAYANAN PELANGGAN : ${
-      reportMeta.ulp
-        ? reportMeta.ulp.name.toUpperCase()
-        : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+    `UNIT LAYANAN PELANGGAN : ${reportMeta.ulp
+      ? reportMeta.ulp.name.toUpperCase()
+      : 'Semua Unit Layanan Pelanggan'.toUpperCase()
     }`
   )
 
@@ -525,5 +522,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
 
   e.cancel = true
 }
-
+const exportToDOCX = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  exportToDOCX(reportMeta, rawData, filename, periode)
+}
+const exportDetailToDOCX = (reportMeta: any, rawData: any, filename: any, periode: any) => {
+  exportDetailToDOCX(reportMeta, rawData, filename, periode)
+}
 export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
diff --git a/src/report/Keluhan/Rekap/RKeluhan_PerTanggal.ts b/src/report/Keluhan/Rekap/RKeluhan_PerTanggal.ts
index 6149313..cea2c21 100644
--- a/src/report/Keluhan/Rekap/RKeluhan_PerTanggal.ts
+++ b/src/report/Keluhan/Rekap/RKeluhan_PerTanggal.ts
@@ -19,11 +19,9 @@ import { Workbook } from 'exceljs'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
-
 const reportName = 'Rekapitulasi Keluhan Per Tanggal'
 const fontSize = 5
 const detailFontSize = 3
-
 const groupingData = (data: any) => {
   const groupedData: any = {}
 
@@ -167,7 +165,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
         formatNumber(
           total.total_response_time_rata_rata.length
             ? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
-                total.total_response_time_rata_rata.length
+            total.total_response_time_rata_rata.length
             : 0
         ),
         formatWaktu(Math.max(...total.total_response_time_max)),
@@ -178,7 +176,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
         formatNumber(
           total.total_recovery_time_rata_rata.length
             ? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
-                total.total_recovery_time_rata_rata.length
+            total.total_recovery_time_rata_rata.length
             : 0
         ),
         formatWaktu(Math.max(...total.total_recovery_time_max)),
@@ -256,7 +254,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
     formatNumber(
       grandTotal.total_response_time_rata_rata.length
         ? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
-            grandTotal.total_response_time_rata_rata.length
+        grandTotal.total_response_time_rata_rata.length
         : 0
     ),
     formatWaktu(Math.max(...grandTotal.total_response_time_max)),
@@ -267,7 +265,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
     formatNumber(
       grandTotal.total_recovery_time_rata_rata.length
         ? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
-            grandTotal.total_recovery_time_rata_rata.length
+        grandTotal.total_recovery_time_rata_rata.length
         : 0
     ),
     formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
@@ -655,30 +653,27 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     worksheet,
     2,
     1,
-    `UNIT INDUK : ${
-      reportMeta.uid
-        ? reportMeta.uid.name.toUpperCase()
-        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    `UNIT INDUK : ${reportMeta.uid
+      ? reportMeta.uid.name.toUpperCase()
+      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     3,
     1,
-    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
-      reportMeta.up3
-        ? reportMeta.up3.name.toUpperCase()
-        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
+      ? reportMeta.up3.name.toUpperCase()
+      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
     }`
   )
   setHeaderStyle(
     worksheet,
     4,
     1,
-    `UNIT LAYANAN PELANGGAN : ${
-      reportMeta.ulp
-        ? reportMeta.ulp.name.toUpperCase()
-        : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+    `UNIT LAYANAN PELANGGAN : ${reportMeta.ulp
+      ? reportMeta.ulp.name.toUpperCase()
+      : 'Semua Unit Layanan Pelanggan'.toUpperCase()
     }`
   )