From cd1ca307d051ec7ff09b2545addefd70554bbcb6 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Thu, 29 Feb 2024 10:43:15 +0700
Subject: [PATCH] fix: add margin bottom to all table

---
 .env.development                              |   4 +-
 src/assets/css/style.css                      |   8 +
 src/components/Pages/Anomali/Table_61.vue     | 507 ++++++++-----
 src/components/Pages/Anomali/Table_62.vue     | 185 +++--
 src/components/Pages/Anomali/Table_63.vue     | 424 ++++++-----
 src/components/Pages/Anomali/Table_64.vue     | 394 +++++++----
 src/components/Pages/Anomali/Table_65.vue     | 417 +++++++----
 src/components/Pages/Anomali/Table_66.vue     | 184 +++--
 src/components/Pages/Cico/Table_60.vue        | 305 +++++---
 src/components/Pages/Ctt/Table_67.vue         | 132 +++-
 src/components/Pages/Gangguan/Table_1.vue     |   2 +-
 src/components/Pages/Gangguan/Table_10.vue    |   2 +-
 src/components/Pages/Gangguan/Table_11.vue    |   2 +-
 src/components/Pages/Gangguan/Table_12.vue    |   1 -
 src/components/Pages/Gangguan/Table_13.vue    |   2 +-
 src/components/Pages/Gangguan/Table_14.vue    |  31 +-
 src/components/Pages/Gangguan/Table_15.vue    |  38 +-
 src/components/Pages/Gangguan/Table_16.vue    | 667 +++++++++++-------
 src/components/Pages/Gangguan/Table_17.vue    | 500 ++++++++-----
 src/components/Pages/Gangguan/Table_18.vue    | 391 ++++++----
 src/components/Pages/Gangguan/Table_19.vue    | 382 ++++++----
 src/components/Pages/Gangguan/Table_2.vue     | 217 ++++--
 src/components/Pages/Gangguan/Table_20.vue    | 330 ++++++---
 src/components/Pages/Gangguan/Table_3.vue     | 218 ++++--
 src/components/Pages/Gangguan/Table_4.vue     |   2 +-
 src/components/Pages/Gangguan/Table_5.vue     |   2 +-
 src/components/Pages/Gangguan/Table_6.vue     |   2 +-
 src/components/Pages/Gangguan/Table_7.vue     |   2 +-
 src/components/Pages/Gangguan/Table_8.vue     |   2 +-
 src/components/Pages/Gangguan/Table_9.vue     |  14 +-
 src/components/Pages/Keluhan/Table_21.vue     |   2 +-
 src/components/Pages/Keluhan/Table_22.vue     | 221 ++++--
 src/components/Pages/Keluhan/Table_23.vue     | 201 ++++--
 src/components/Pages/Keluhan/Table_24.vue     | 201 ++++--
 src/components/Pages/Keluhan/Table_25.vue     | 211 ++++--
 src/components/Pages/Keluhan/Table_26.vue     | 218 ++++--
 src/components/Pages/Keluhan/Table_27.vue     |   2 +-
 src/components/Pages/Keluhan/Table_28.vue     | 346 +++++----
 src/components/Pages/Keluhan/Table_29.vue     | 408 +++++++----
 src/components/Pages/Keluhan/Table_30.vue     | 460 +++++++-----
 src/components/Pages/Keluhan/Table_31.vue     | 462 +++++++-----
 src/components/Pages/Keluhan/Table_32.vue     | 238 +++++--
 src/components/Pages/Keluhan/Table_33.vue     | 237 +++++--
 src/components/Pages/Keluhan/Table_34.vue     |  77 +-
 src/components/Pages/Keluhan/Table_35.vue     | 442 ++++++++----
 src/components/Pages/Material/Table_68.vue    | 299 +++++---
 src/components/Pages/Material/Table_69.vue    | 290 +++++---
 src/components/Pages/Monalisa/Table_36.vue    |   4 +-
 src/components/Pages/Monalisa/Table_37.vue    |   2 +-
 src/components/Pages/Monalisa/Table_38.vue    |   2 +-
 src/components/Pages/Monalisa/Table_39.vue    |   2 +-
 src/components/Pages/Monalisa/Table_40.vue    | 178 ++++-
 src/components/Pages/Monalisa/Table_41.vue    | 232 +++---
 src/components/Pages/Monalisa/Table_42.vue    | 274 ++++---
 src/components/Pages/Monalisa/Table_43.vue    | 274 ++++---
 src/components/Pages/Monalisa/Table_44.vue    | 245 ++++---
 src/components/Pages/Monalisa/Table_45.vue    | 264 ++++---
 src/components/Pages/Monalisa/Table_46.vue    | 275 +++++---
 src/components/Pages/Monalisa/Table_47.vue    | 300 +++++---
 src/components/Pages/Monalisa/Table_48.vue    | 380 ++++++----
 src/components/Pages/Monalisa/Table_49.vue    | 230 +++---
 src/components/Pages/Monalisa/Table_50.vue    | 271 ++++---
 src/components/Pages/Monalisa/Table_51.vue    |  74 +-
 src/components/Pages/Monalisa/Table_52.vue    | 510 ++++++++-----
 src/components/Pages/Monalisa/Table_53.vue    | 163 ++++-
 src/components/Pages/Monalisa/Table_54.vue    | 127 +++-
 src/components/Pages/Monalisa/Table_55.vue    | 133 +++-
 src/components/Pages/Monalisa/Table_56.vue    | 182 +++--
 src/components/Pages/Monalisa/Table_57.vue    | 158 ++++-
 src/components/Pages/Monalisa/Table_58.vue    | 145 +++-
 src/components/Pages/Monalisa/Table_59.vue    | 128 +++-
 .../Pages/PencarianData/Table_71.vue          | 197 ++++--
 src/components/Pages/Transaksi/Table_70.vue   | 323 ++++++---
 73 files changed, 9991 insertions(+), 4764 deletions(-)

diff --git a/.env.development b/.env.development
index 37809dd..73a96a0 100755
--- a/.env.development
+++ b/.env.development
@@ -2,5 +2,5 @@ VITE_BASE_URL=http://localhost:5173
 VITE_BASE_DIRECTORY=/
 VITE_APP_VERSION=0.0.1
 VITE_APP_NAME='Executive Information System'
-VITE_APP_GRAPHQL_ENDPOINT=http://192.168.5.213:32169/graphql
-VITE_APP_REST_ENDPOINT=http://192.168.5.213:32180
\ No newline at end of file
+VITE_APP_GRAPHQL_ENDPOINT=http://192.168.191.163:32169/graphql
+VITE_APP_REST_ENDPOINT=http://192.168.191.163:32180
\ No newline at end of file
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 41362eb..43b09f7 100755
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1373,6 +1373,14 @@ body {
   margin-top: 1.5rem;
 }
 
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
 .box-border {
   box-sizing: border-box;
 }
diff --git a/src/components/Pages/Anomali/Table_61.vue b/src/components/Pages/Anomali/Table_61.vue
index 7026dc0..7c26661 100755
--- a/src/components/Pages/Anomali/Table_61.vue
+++ b/src/components/Pages/Anomali/Table_61.vue
@@ -1,112 +1,255 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type4 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div class="mt-4 lg:mt-6 max-w-7xl">
-        <h1 class="text-xl font-medium md:text-2xl text-dark">
-            Laporan Pengaduan Total
-        </h1>
-    </div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-        :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-        @selection-changed="onSelectionChanged" :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" />
-        <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-            v-if="loading" v-model:visible="loading" :enabled="true" />
-        <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-        <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type4 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div class="mt-4 lg:mt-6 max-w-7xl">
+    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
+  </div>
+  <DxDataGrid
+    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="onSelectionChanged"
+    :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" />
+    <DxLoadPanel
+      :position="position"
+      :show-indicator="showIndicator"
+      :show-pane="showPane"
+      :shading="shading"
+      v-if="loading"
+      v-model:visible="loading"
+      :enabled="true"
+    />
+    <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+    <DxExport
+      :enabled="true"
+      :formats="['pdf', 'xlsx', 'document']"
+      :allow-export-selected-data="false"
+    />
+    <DxColumnFixing :enabled="true" />
 
-        <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-        <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
-            <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e=a+b+c+d"
-                    css-class="custom-table-column" />
-            </DxColumn>
+    <DxColumn
+      :width="170"
+      alignment="center"
+      data-field=""
+      caption="Nama Unit"
+      css-class="custom-table-column"
+    />
+    <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="a"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="b"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="c"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="d"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="e=a+b+c+d"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxColumn>
+    <DxColumn
+      alignment="center"
+      caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="f" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Marking"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Non Marking"
+            css-class="custom-table-column"
+          />
         </DxColumn>
-        <DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
-            css-class="custom-table-column">
-            <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="f" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="g" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="h=f+g" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="g" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Marking"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Non Marking"
+            css-class="custom-table-column"
+          />
         </DxColumn>
-
-        <DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
-            <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="i=f/e" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="j=g/e" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="k=i+j" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="h=f+g" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Marking"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Non Marking"
+            css-class="custom-table-column"
+          />
         </DxColumn>
+      </DxColumn>
+    </DxColumn>
 
-    </DxDataGrid>
+    <DxColumn
+      alignment="center"
+      caption="% Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="i=f/e" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Marking"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Non Marking"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="j=g/e" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Marking"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Non Marking"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="k=i+j" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Marking"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Non Marking"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+    </DxColumn>
+  </DxDataGrid>
 
-    <AnomaliTable2 />
+  <AnomaliTable2 />
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -117,48 +260,54 @@ import { Type4 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
-  query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+  query laporanAnomaliPenangananPengaduanGangguanPetugas(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+  ) {
     laporanAnomaliPenangananPengaduanGangguanPetugas(
       dateFrom: $dateFrom
       dateTo: $dateTo
@@ -166,61 +315,65 @@ const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-        nama_posko
-        persen_penyelesaian_petugas_anomali_cc_123_marking
-        persen_penyelesaian_petugas_anomali_cc_123_non_marking
-        persen_penyelesaian_petugas_anomali_marking
-        persen_penyelesaian_petugas_anomali_non_marking
-        persen_penyelesaian_petugas_anomali_pln_mobile_marking
-        persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
-        total_penyelesaian_petugas_anomali_cc_123_marking
-        total_penyelesaian_petugas_anomali_cc_123_non_marking
-        total_penyelesaian_petugas_anomali_marking
-        total_penyelesaian_petugas_anomali_non_marking
-        total_penyelesaian_petugas_anomali_pln_mobile_marking
-        total_penyelesaian_petugas_anomali_pln_mobile_non_marking
-        total_petugas
+      nama_posko
+      persen_penyelesaian_petugas_anomali_cc_123_marking
+      persen_penyelesaian_petugas_anomali_cc_123_non_marking
+      persen_penyelesaian_petugas_anomali_marking
+      persen_penyelesaian_petugas_anomali_non_marking
+      persen_penyelesaian_petugas_anomali_pln_mobile_marking
+      persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
+      total_penyelesaian_petugas_anomali_cc_123_marking
+      total_penyelesaian_petugas_anomali_cc_123_non_marking
+      total_penyelesaian_petugas_anomali_marking
+      total_penyelesaian_petugas_anomali_non_marking
+      total_penyelesaian_petugas_anomali_pln_mobile_marking
+      total_penyelesaian_petugas_anomali_pln_mobile_non_marking
+      total_petugas
     }
   }
 `
 const filterData = (params: any) => {
-    const { posko, uid, up3 } = params
-    const dateValue = params.periode.split(' s/d ')
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-                data.value = [
-                    ...data.value,
-                    {
-                        ...item,
-                    }
-                ]
-            })
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const { posko, uid, up3 } = params
+  const dateValue = params.periode.split(' s/d ')
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : '',
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const { onResult, onError, loading, refetch } = useQuery(
-    GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
-    {
-        dateFrom: new Date().toISOString().slice(0, 10),
-        dateTo: new Date().toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
-    }
+  GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
+  {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+  }
 )
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Anomali/Table_62.vue b/src/components/Pages/Anomali/Table_62.vue
index 6d04224..7d07bdc 100755
--- a/src/components/Pages/Anomali/Table_62.vue
+++ b/src/components/Pages/Anomali/Table_62.vue
@@ -1,87 +1,144 @@
 <template>
-    <div class="mt-4 lg:mt-6 max-w-7xl">
-        <h1 class="text-xl font-medium md:text-2xl text-dark">
-            Laporan Pengaduan PLN Mobile
-        </h1>
-    </div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]"  :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-        :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-        @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" />
-           <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
-        <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-        <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        <DxColumnFixing :enabled="true" />
+  <div class="mt-4 lg:mt-6 max-w-7xl">
+    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
+  </div>
+  <DxDataGrid
+    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="onSelectionChanged"
+    @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" />
+    <DxLoadPanel
+      :position="position"
+      :show-indicator="showIndicator"
+      :show-pane="showPane"
+      :shading="shading"
+      v-if="loading"
+      v-model:visible="loading"
+      :enabled="true"
+    />
+    <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+    <DxExport
+      :enabled="true"
+      :formats="['pdf', 'xlsx', 'document']"
+      :allow-export-selected-data="false"
+    />
+    <DxColumnFixing :enabled="true" />
 
-        <DxColumn alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-        <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="a"
-                css-class="custom-table-column" />
-        </DxColumn>
-        <DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
-            css-class="custom-table-column">
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="b"
-                css-class="custom-table-column" />
-        </DxColumn>
-        <DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="c=b/a"
-                css-class="custom-table-column" />
-        </DxColumn>
-
-    </DxDataGrid>
+    <DxColumn
+      alignment="center"
+      data-field=""
+      caption="Nama Unit"
+      css-class="custom-table-column"
+    />
+    <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        data-type="number"
+        caption="a"
+        css-class="custom-table-column"
+      />
+    </DxColumn>
+    <DxColumn
+      alignment="center"
+      caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        data-type="number"
+        caption="b"
+        css-class="custom-table-column"
+      />
+    </DxColumn>
+    <DxColumn
+      alignment="center"
+      caption="% Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        data-type="number"
+        caption="c=b/a"
+        css-class="custom-table-column"
+      />
+    </DxColumn>
+  </DxDataGrid>
 </template>
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { ref } from 'vue'
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const loading = ref(true)
 const data = ref<any[]>([])
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Anomali/Table_63.vue b/src/components/Pages/Anomali/Table_63.vue
index 50753a7..0bd0d4f 100755
--- a/src/components/Pages/Anomali/Table_63.vue
+++ b/src/components/Pages/Anomali/Table_63.vue
@@ -1,85 +1,180 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type4 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div class="mt-4 lg:mt-6 max-w-7xl">
-        <h1 class="text-xl font-medium md:text-2xl text-dark">
-            Laporan Pengaduan Total
-        </h1>
-    </div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-        :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-        :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" />
-        <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-            v-if="loading" v-model:visible="loading" :enabled="true" />
-        <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-        <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type4 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div class="mt-4 lg:mt-6 max-w-7xl">
+    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
+  </div>
+  <DxDataGrid
+    class="max-h-[calc(100vh-140px)] mb-10"
+    :show-column-lines="true"
+    :show-row-lines="false"
+    :show-borders="true"
+    :row-alternation-enabled="true"
+    :hover-state-enabled="true"
+    @selection-changed="onSelectionChanged"
+    :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" />
+    <DxLoadPanel
+      :position="position"
+      :show-indicator="showIndicator"
+      :show-pane="showPane"
+      :shading="shading"
+      v-if="loading"
+      v-model:visible="loading"
+      :enabled="true"
+    />
+    <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+    <DxExport
+      :enabled="true"
+      :formats="['pdf', 'xlsx', 'document']"
+      :allow-export-selected-data="false"
+    />
+    <DxColumnFixing :enabled="true" />
 
-        <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
-            css-class="custom-table-column" />
-        <DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
-            <DxColumn :width="170" alignment="center" data-field="total_petugas" caption="a"
-                css-class="custom-table-column" />
+    <DxColumn
+      :width="170"
+      alignment="center"
+      data-field="nama_posko"
+      caption="Nama Unit"
+      css-class="custom-table-column"
+    />
+    <DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="total_petugas"
+        caption="a"
+        css-class="custom-table-column"
+      />
+    </DxColumn>
+    <DxColumn
+      alignment="center"
+      caption="Total Petugas Yang Pengaduan Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_penyelesaian_petugas_anomali_pln_mobile"
+          data-type="number"
+          caption="b"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_penyelesaian_petugas_anomali_cc_123"
+          data-type="number"
+          caption="c"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_penyelesaian_petugas_anomali"
+          data-type="number"
+          caption="d=b+c"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxColumn>
+    <DxColumn
+      alignment="center"
+      caption="% Petugas Yang Pengaduan Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="e=b/a" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking"
+            data-type="number"
+            caption="Marking"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking"
+            data-type="number"
+            caption="Non Marking"
+            css-class="custom-table-column"
+          />
         </DxColumn>
-        <DxColumn alignment="center" caption="Total Petugas Yang Pengaduan Diselesaikan Secara Anomali"
-            css-class="custom-table-column">
-            <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
-                    data-type="number" caption="b" css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
-                    data-type="number" caption="c" css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
-                    caption="d=b+c" css-class="custom-table-column" />
-            </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="f=c/a" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_penyelesaian_petugas_anomali_cc_123_marking"
+            data-type="number"
+            caption="Marking"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking"
+            data-type="number"
+            caption="Non Marking"
+            css-class="custom-table-column"
+          />
         </DxColumn>
-        <DxColumn alignment="center" caption="% Petugas Yang Pengaduan Diselesaikan Secara Anomali"
-            css-class="custom-table-column">
-            <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="e=b/a" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center"
-                        data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking" data-type="number"
-                        caption="Marking" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center"
-                        data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking" data-type="number"
-                        caption="Non Marking" css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="f=c/a" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123_marking"
-                        data-type="number" caption="Marking" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center"
-                        data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking" data-type="number"
-                        caption="Non Marking" css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="g=e+f" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_marking"
-                        data-type="number" caption="Marking" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_non_marking"
-                        data-type="number" caption="Non Marking" css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="g=e+f" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_penyelesaian_petugas_anomali_marking"
+            data-type="number"
+            caption="Marking"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_penyelesaian_petugas_anomali_non_marking"
+            data-type="number"
+            caption="Non Marking"
+            css-class="custom-table-column"
+          />
         </DxColumn>
-    </DxDataGrid>
+      </DxColumn>
+    </DxColumn>
+  </DxDataGrid>
 
-    <AnomaliTable4 :filters-detail="filters" />
+  <AnomaliTable4 :filters-detail="filters" />
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -91,115 +186,130 @@ import gql from 'graphql-tag'
 import { Type4 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
-  query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, 
-  $dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
+  query laporanAnomaliPenangananPengaduanGangguanPetugas(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $jenisLaporan: Int
+    $idUid: Int
+    $idUp3: Int
+    $posko: String
+  ) {
     laporanAnomaliPenangananPengaduanGangguanPetugas(
       dateFrom: $dateFrom
       dateTo: $dateTo
-      jenisLaporan :$jenisLaporan
+      jenisLaporan: $jenisLaporan
       idUid: $idUid
       idUp3: $idUp3
       posko: $posko
-
     ) {
-        nama_posko
-        persen_penyelesaian_petugas_anomali_cc_123_marking
-        persen_penyelesaian_petugas_anomali_cc_123_non_marking
-        persen_penyelesaian_petugas_anomali_marking
-        persen_penyelesaian_petugas_anomali_non_marking
-        persen_penyelesaian_petugas_anomali_pln_mobile_marking
-        persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
-        total_penyelesaian_petugas_anomali_cc_123_marking
-        total_penyelesaian_petugas_anomali_cc_123_non_marking
-        total_penyelesaian_petugas_anomali_marking
-        total_penyelesaian_petugas_anomali_non_marking
-        total_penyelesaian_petugas_anomali_pln_mobile_marking
-        total_penyelesaian_petugas_anomali_pln_mobile_non_marking
-        total_petugas
+      nama_posko
+      persen_penyelesaian_petugas_anomali_cc_123_marking
+      persen_penyelesaian_petugas_anomali_cc_123_non_marking
+      persen_penyelesaian_petugas_anomali_marking
+      persen_penyelesaian_petugas_anomali_non_marking
+      persen_penyelesaian_petugas_anomali_pln_mobile_marking
+      persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
+      total_penyelesaian_petugas_anomali_cc_123_marking
+      total_penyelesaian_petugas_anomali_cc_123_non_marking
+      total_penyelesaian_petugas_anomali_marking
+      total_penyelesaian_petugas_anomali_non_marking
+      total_penyelesaian_petugas_anomali_pln_mobile_marking
+      total_penyelesaian_petugas_anomali_pln_mobile_non_marking
+      total_petugas
     }
   }
 `
 const filterData = (params: any) => {
-    const { posko, uid, up3 } = params
-    const dateValue = params.periode.split(' s/d ')
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-                data.value = [
-                    ...data.value,
-                    {
-                        ...item,
-                        total_penyelesaian_petugas_anomali_cc_123: item.total_penyelesaian_petugas_anomali_cc_123_marking + item.total_penyelesaian_petugas_anomali_cc_123_non_marking,
-                        total_penyelesaian_petugas_anomali_pln_mobile: item.total_penyelesaian_petugas_anomali_pln_mobile_marking + item.total_penyelesaian_petugas_anomali_pln_mobile_non_marking,
-                        total_penyelesaian_petugas_anomali: item.total_penyelesaian_petugas_anomali_marking + item.total_penyelesaian_petugas_anomali_non_marking,
-                    }
-                ]
-            })
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const { posko, uid, up3 } = params
+  const dateValue = params.periode.split(' s/d ')
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : '',
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item,
+            total_penyelesaian_petugas_anomali_cc_123:
+              item.total_penyelesaian_petugas_anomali_cc_123_marking +
+              item.total_penyelesaian_petugas_anomali_cc_123_non_marking,
+            total_penyelesaian_petugas_anomali_pln_mobile:
+              item.total_penyelesaian_petugas_anomali_pln_mobile_marking +
+              item.total_penyelesaian_petugas_anomali_pln_mobile_non_marking,
+            total_penyelesaian_petugas_anomali:
+              item.total_penyelesaian_petugas_anomali_marking +
+              item.total_penyelesaian_petugas_anomali_non_marking
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const { onResult, onError, loading, refetch } = useQuery(
-    GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
-    {
-        dateFrom: new Date().toISOString().slice(0, 10),
-        dateTo: new Date().toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
-    }
+  GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
+  {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+  }
 )
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Anomali/Table_64.vue b/src/components/Pages/Anomali/Table_64.vue
index 47baed2..65360e6 100755
--- a/src/components/Pages/Anomali/Table_64.vue
+++ b/src/components/Pages/Anomali/Table_64.vue
@@ -1,74 +1,165 @@
 <template>
-    <div class="mt-4 lg:mt-6 max-w-7xl">
-        <h1 class="text-xl font-medium md:text-2xl text-dark">
-            Laporan Pengaduan PLN Mobile
-        </h1>
-    </div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-        :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-        @selection-changed="onSelectionChanged" :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" />
-        <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-            v-if="loading" v-model:visible="loading" :enabled="true" />
-        <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-        <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        <DxColumnFixing :enabled="true" />
+  <div class="mt-4 lg:mt-6 max-w-7xl">
+    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
+  </div>
+  <DxDataGrid
+    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="onSelectionChanged"
+    :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" />
+    <DxLoadPanel
+      :position="position"
+      :show-indicator="showIndicator"
+      :show-pane="showPane"
+      :shading="shading"
+      v-if="loading"
+      v-model:visible="loading"
+      :enabled="true"
+    />
+    <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+    <DxExport
+      :enabled="true"
+      :formats="['pdf', 'xlsx', 'document']"
+      :allow-export-selected-data="false"
+    />
+    <DxColumnFixing :enabled="true" />
 
-        <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
-            css-class="custom-table-column" />
-        <DxColumn :width="170" alignment="center" data-field="nama_petugas" caption="Nama Petugas"
-            css-class="custom-table-column" />
-        <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
-            <DxColumn alignment="center" caption="(PLN Mobile, CC123, DLL)" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="a"
-                    css-class="custom-table-column" />
-            </DxColumn>
-        </DxColumn>
-        <DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
-            css-class="custom-table-column">
-            <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
-                    data-type="number" caption="b" css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
-                    data-type="number" caption="c" css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
-                    caption="d=b+c" css-class="custom-table-column" />
-            </DxColumn>
-        </DxColumn>
-        <DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
-            <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_pln_mobile"
-                    data-type="number" caption="e=b/a" css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_cc_123"
-                    data-type="number" caption="f=c/a" css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali"
-                    data-type="number" caption="g=e+f" css-class="custom-table-column" />
-            </DxColumn>
-        </DxColumn>
-
-    </DxDataGrid>
+    <DxColumn
+      :width="170"
+      alignment="center"
+      data-field="nama_posko"
+      caption="Nama Unit"
+      css-class="custom-table-column"
+    />
+    <DxColumn
+      :width="170"
+      alignment="center"
+      data-field="nama_petugas"
+      caption="Nama Petugas"
+      css-class="custom-table-column"
+    />
+    <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
+      <DxColumn
+        alignment="center"
+        caption="(PLN Mobile, CC123, DLL)"
+        css-class="custom-table-column"
+      >
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_wo"
+          data-type="number"
+          caption="a"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxColumn>
+    <DxColumn
+      alignment="center"
+      caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_penyelesaian_petugas_anomali_pln_mobile"
+          data-type="number"
+          caption="b"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_penyelesaian_petugas_anomali_cc_123"
+          data-type="number"
+          caption="c"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_penyelesaian_petugas_anomali"
+          data-type="number"
+          caption="d=b+c"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxColumn>
+    <DxColumn
+      alignment="center"
+      caption="% Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="persen_penyelesaian_petugas_anomali_pln_mobile"
+          data-type="number"
+          caption="e=b/a"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="persen_penyelesaian_petugas_anomali_cc_123"
+          data-type="number"
+          caption="f=c/a"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="persen_penyelesaian_petugas_anomali"
+          data-type="number"
+          caption="g=e+f"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxColumn>
+  </DxDataGrid>
 </template>
 
 <script setup lang="ts">
 defineProps({
-    filtersDetail: {
-        type: Object as PropType<any>,
-        required: true
-    }
+  filtersDetail: {
+    type: Object as PropType<any>,
+    required: true
+  }
 })
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -77,110 +168,123 @@ import { Workbook } from 'exceljs'
 import { ref, watch, type PropType } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
-const filtersDetail = ref({}); // Declare the 'filters' variable
-watch(() => filtersDetail.value, (newValue) => { // Access the 'value' property of the 'filters' ref
+const filtersDetail = ref({}) // Declare the 'filters' variable
+watch(
+  () => filtersDetail.value,
+  (newValue) => {
+    // Access the 'value' property of the 'filters' ref
     filterData(newValue)
-}, { immediate: true })
+  },
+  { immediate: true }
+)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 const laporanAnomaliDetailPetugasPenangananPengaduanGangguan = gql`
-  query laporanAnomaliDetailPetugasPenangananPengaduanGangguan($dateFrom: Date!, 
-  $dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
+  query laporanAnomaliDetailPetugasPenangananPengaduanGangguan(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $jenisLaporan: Int
+    $idUid: Int
+    $idUp3: Int
+    $posko: String
+  ) {
     laporanAnomaliDetailPetugasPenangananPengaduanGangguan(
       dateFrom: $dateFrom
       dateTo: $dateTo
-      jenisLaporan :$jenisLaporan
+      jenisLaporan: $jenisLaporan
       idUid: $idUid
       idUp3: $idUp3
       posko: $posko
-
     ) {
-        nama_petugas
-        nama_posko
-        persen_penyelesaian_petugas_anomali
-        persen_penyelesaian_petugas_anomali_cc_123
-        persen_penyelesaian_petugas_anomali_pln_mobile
-        total_penyelesaian_petugas_anomali
-        total_penyelesaian_petugas_anomali_cc_123
-        total_penyelesaian_petugas_anomali_pln_mobile
-        total_wo
+      nama_petugas
+      nama_posko
+      persen_penyelesaian_petugas_anomali
+      persen_penyelesaian_petugas_anomali_cc_123
+      persen_penyelesaian_petugas_anomali_pln_mobile
+      total_penyelesaian_petugas_anomali
+      total_penyelesaian_petugas_anomali_cc_123
+      total_penyelesaian_petugas_anomali_pln_mobile
+      total_wo
     }
   }
 `
 const filterData = (params: any) => {
-    const { posko, uid, up3 } = params
-    const dateValue = params.periode.split(' s/d ')
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-                data.value = [
-                    ...data.value,
-                    {
-                        ...item,
-                    }
-                ]
-            })
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const { posko, uid, up3 } = params
+  const dateValue = params.periode.split(' s/d ')
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : '',
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const { onResult, onError, loading, refetch } = useQuery(
-    laporanAnomaliDetailPetugasPenangananPengaduanGangguan,
-    {
-        dateFrom: new Date().toISOString().slice(0, 10),
-        dateTo: new Date().toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
-    }
+  laporanAnomaliDetailPetugasPenangananPengaduanGangguan,
+  {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+  }
 )
-
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Anomali/Table_65.vue b/src/components/Pages/Anomali/Table_65.vue
index c6edbe8..946cbf8 100755
--- a/src/components/Pages/Anomali/Table_65.vue
+++ b/src/components/Pages/Anomali/Table_65.vue
@@ -1,82 +1,179 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type4 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div class="mt-4 lg:mt-6 max-w-7xl">
-        <h1 class="text-xl font-medium md:text-2xl text-dark">
-            Laporan Pengaduan Total
-        </h1>
-    </div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-        :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-        :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" />
-        <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-            v-if="loading" v-model:visible="loading" :enabled="true" />
-        <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-        <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type4 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div class="mt-4 lg:mt-6 max-w-7xl">
+    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
+  </div>
+  <DxDataGrid
+    class="max-h-[calc(100vh-140px)] mb-10"
+    :show-column-lines="true"
+    :show-row-lines="false"
+    :show-borders="true"
+    :row-alternation-enabled="true"
+    :hover-state-enabled="true"
+    @selection-changed="onSelectionChanged"
+    :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" />
+    <DxLoadPanel
+      :position="position"
+      :show-indicator="showIndicator"
+      :show-pane="showPane"
+      :shading="shading"
+      v-if="loading"
+      v-model:visible="loading"
+      :enabled="true"
+    />
+    <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+    <DxExport
+      :enabled="true"
+      :formats="['pdf', 'xlsx', 'document']"
+      :allow-export-selected-data="false"
+    />
+    <DxColumnFixing :enabled="true" />
 
-        <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-        <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
-            <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e=a+b+c+d"
-                    css-class="custom-table-column" />
-            </DxColumn>
-        </DxColumn>
-        <DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
-            css-class="custom-table-column">
-            <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="h=f+g"
-                    css-class="custom-table-column" />
-            </DxColumn>
-        </DxColumn>
+    <DxColumn
+      :width="170"
+      alignment="center"
+      data-field=""
+      caption="Nama Unit"
+      css-class="custom-table-column"
+    />
+    <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="a"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="b"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="c"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="d"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="e=a+b+c+d"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxColumn>
+    <DxColumn
+      alignment="center"
+      caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="f"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="g"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="h=f+g"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxColumn>
 
-        <DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
-            <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="i=f/e"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="j=g/e"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="k=i+j"
-                    css-class="custom-table-column" />
-            </DxColumn>
-        </DxColumn>
+    <DxColumn
+      alignment="center"
+      caption="% Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
+      <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="i=f/e"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="j=g/e"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="k=i+j"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxColumn>
+  </DxDataGrid>
 
-    </DxDataGrid>
-
-    <AnomaliTable6 />
+  <AnomaliTable6 />
 </template>
 
 <script setup lang="ts">
@@ -84,7 +181,16 @@ import Filters from '@/components/Form/Filters.vue'
 
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -94,48 +200,54 @@ import { AnomaliTable6 } from '.'
 import { Type4 } from '@/components/Form/FiltersType'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 const GET_laporanCheckInCheckOut = gql`
-  query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+  query laporanCheckInCheckOut(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+  ) {
     laporanCheckInCheckOut(
       dateFrom: $dateFrom
       dateTo: $dateTo
@@ -143,55 +255,56 @@ const GET_laporanCheckInCheckOut = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-    avg_durasi_wo_gangguan_individual
-    avg_durasi_wo_penugasan_khusus
-    avg_rct_wo_gangguan_individual
-    avg_rpt_wo_gangguan_individual
-    jumlah_wo_gangguan_individual
-    jumlah_wo_penugasan_khusus
-    personil_yantek
-    user_regu
+      avg_durasi_wo_gangguan_individual
+      avg_durasi_wo_penugasan_khusus
+      avg_rct_wo_gangguan_individual
+      avg_rpt_wo_gangguan_individual
+      jumlah_wo_gangguan_individual
+      jumlah_wo_penugasan_khusus
+      personil_yantek
+      user_regu
     }
   }
 `
 const filterData = (params: any) => {
-    const { posko, uid, up3 } = params
-    const dateValue = params.periode.split(' s/d ')
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-                data.value = [
-                    ...data.value,
-                    {
-                        ...item,
-                    }
-                ]
-            })
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
-}
-const { onResult, onError, loading, refetch } = useQuery(
-    GET_laporanCheckInCheckOut,
-    {
-        dateFrom: new Date().toISOString().slice(0, 10),
-        dateTo: new Date().toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
+  const { posko, uid, up3 } = params
+  const dateValue = params.periode.split(' s/d ')
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : '',
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
     }
-)
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
+}
+const { onResult, onError, loading, refetch } = useQuery(GET_laporanCheckInCheckOut, {
+  dateFrom: new Date().toISOString().slice(0, 10),
+  dateTo: new Date().toISOString().slice(0, 10),
+  posko: '',
+  idUid: 0,
+  idUp3: 0
+})
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Anomali/Table_66.vue b/src/components/Pages/Anomali/Table_66.vue
index 456b5df..37daba0 100755
--- a/src/components/Pages/Anomali/Table_66.vue
+++ b/src/components/Pages/Anomali/Table_66.vue
@@ -1,87 +1,143 @@
 <template>
-    <div class="mt-4 lg:mt-6 max-w-7xl">
-        <h1 class="text-xl font-medium md:text-2xl text-dark">
-            Laporan Pengaduan PLN Mobile
-        </h1>
-    </div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-        :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-        @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" />
-        <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-            v-if="loading" v-model:visible="loading" :enabled="true" />
-        <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-        <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        <DxColumnFixing :enabled="true" />
+  <div class="mt-4 lg:mt-6 max-w-7xl">
+    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
+  </div>
+  <DxDataGrid
+    class="max-h-[calc(100vh-140px)] mb-10"
+    :show-column-lines="true"
+    :show-row-lines="false"
+    :show-borders="true"
+    :row-alternation-enabled="true"
+    :hover-state-enabled="true"
+    @selection-changed="onSelectionChanged"
+    @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" />
+    <DxLoadPanel
+      :position="position"
+      :show-indicator="showIndicator"
+      :show-pane="showPane"
+      :shading="shading"
+      v-if="loading"
+      v-model:visible="loading"
+      :enabled="true"
+    />
+    <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+    <DxExport
+      :enabled="true"
+      :formats="['pdf', 'xlsx', 'document']"
+      :allow-export-selected-data="false"
+    />
+    <DxColumnFixing :enabled="true" />
 
-        <DxColumn alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-        <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="a"
-                css-class="custom-table-column" />
-        </DxColumn>
-        <DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
-            css-class="custom-table-column">
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="b"
-                css-class="custom-table-column" />
-        </DxColumn>
-        <DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="c=b/a"
-                css-class="custom-table-column" />
-        </DxColumn>
-
-    </DxDataGrid>
+    <DxColumn
+      alignment="center"
+      data-field=""
+      caption="Nama Unit"
+      css-class="custom-table-column"
+    />
+    <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        data-type="number"
+        caption="a"
+        css-class="custom-table-column"
+      />
+    </DxColumn>
+    <DxColumn
+      alignment="center"
+      caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        data-type="number"
+        caption="b"
+        css-class="custom-table-column"
+      />
+    </DxColumn>
+    <DxColumn
+      alignment="center"
+      caption="% Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        data-type="number"
+        caption="c=b/a"
+        css-class="custom-table-column"
+      />
+    </DxColumn>
+  </DxDataGrid>
 </template>
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { ref } from 'vue'
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
 const loading = ref(false)
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Cico/Table_60.vue b/src/components/Pages/Cico/Table_60.vue
index f1cb5ed..7e7b99d 100755
--- a/src/components/Pages/Cico/Table_60.vue
+++ b/src/components/Pages/Cico/Table_60.vue
@@ -1,47 +1,122 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type1 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :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" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type1 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="user_regu" caption="User Regu"
-                css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="personil_yantek" caption="Personil Yantek"
-                css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="jumlah_wo_gangguan_individual" data-type="number"
-                caption="Jumlah WO Gangguan Individual" css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_gangguan_individual" data-type="number"
-                caption="Rata-rata Durasi WO Gangguan" css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="avg_rpt_wo_gangguan_individual" data-type="number"
-                caption="Rata-rata RPT WO Gangguan" css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="avg_rct_wo_gangguan_individual" data-type="number"
-                caption="Rata-rata RCT WO Gangguan" css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="jumlah_wo_penugasan_khusus" data-type="number"
-                caption="Jumlah Wo Penugasan Khusus" css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_penugasan_khusus" data-type="number"
-                caption="Rata-rata Durasi WO Penugasan" css-class="custom-table-column" />
-
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="user_regu"
+        caption="User Regu"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="personil_yantek"
+        caption="Personil Yantek"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="jumlah_wo_gangguan_individual"
+        data-type="number"
+        caption="Jumlah WO Gangguan Individual"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="avg_durasi_wo_gangguan_individual"
+        data-type="number"
+        caption="Rata-rata Durasi WO Gangguan"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="avg_rpt_wo_gangguan_individual"
+        data-type="number"
+        caption="Rata-rata RPT WO Gangguan"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="avg_rct_wo_gangguan_individual"
+        data-type="number"
+        caption="Rata-rata RCT WO Gangguan"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="jumlah_wo_penugasan_khusus"
+        data-type="number"
+        caption="Jumlah Wo Penugasan Khusus"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="avg_durasi_wo_penugasan_khusus"
+        data-type="number"
+        caption="Rata-rata Durasi WO Penugasan"
+        css-class="custom-table-column"
+      />
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
-
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -59,44 +134,50 @@ const dataDetail = ref<any>()
 const data = ref<any[]>([])
 const showDetail = ref(false)
 const showData = () => {
-    showDetail.value = true
+  showDetail.value = true
 }
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    dataDetail.value = data
-    console.log(data)
+  const data = selectedRowsData[0]
+  dataDetail.value = data
+  console.log(data)
 }
 
 const GET_laporanCheckInCheckOut = gql`
-  query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+  query laporanCheckInCheckOut(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+  ) {
     laporanCheckInCheckOut(
       dateFrom: $dateFrom
       dateTo: $dateTo
@@ -104,57 +185,57 @@ const GET_laporanCheckInCheckOut = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-    avg_durasi_wo_gangguan_individual
-    avg_durasi_wo_penugasan_khusus
-    avg_rct_wo_gangguan_individual
-    avg_rpt_wo_gangguan_individual
-    jumlah_wo_gangguan_individual
-    jumlah_wo_penugasan_khusus
-    personil_yantek
-    user_regu
+      avg_durasi_wo_gangguan_individual
+      avg_durasi_wo_penugasan_khusus
+      avg_rct_wo_gangguan_individual
+      avg_rpt_wo_gangguan_individual
+      jumlah_wo_gangguan_individual
+      jumlah_wo_penugasan_khusus
+      personil_yantek
+      user_regu
     }
   }
 `
 const filterData = (params: any) => {
-    const { posko, uid, up3 } = params
-    const dateValue = params.periode.split(' s/d ')
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-                data.value = [
-                    ...data.value,
-                    {
-                        ...item,
-                    }
-                ]
-            })
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
-}
-const { onResult, onError, loading, refetch } = useQuery(
-    GET_laporanCheckInCheckOut,
-    {
-        dateFrom: new Date().toISOString().slice(0, 10),
-        dateTo: new Date().toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
+  const { posko, uid, up3 } = params
+  const dateValue = params.periode.split(' s/d ')
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : '',
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
     }
-)
-
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
+}
+const { onResult, onError, loading, refetch } = useQuery(GET_laporanCheckInCheckOut, {
+  dateFrom: new Date().toISOString().slice(0, 10),
+  dateTo: new Date().toISOString().slice(0, 10),
+  posko: '',
+  idUid: 0,
+  idUp3: 0
+})
 
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Ctt/Table_67.vue b/src/components/Pages/Ctt/Table_67.vue
index 5534f52..cfb0f40 100755
--- a/src/components/Pages/Ctt/Table_67.vue
+++ b/src/components/Pages/Ctt/Table_67.vue
@@ -1,58 +1,136 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type3 @update:filters="(value) => filters = value" />
+    <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-      :word-wrap-enabled="true">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :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" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
-        css-class="custom-table-column" />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
       <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
         <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_wo_cc123" data-type="number" caption="a"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_wo_cc123"
+            data-type="number"
+            caption="a"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_wo_pln_mobile" data-type="number" caption="b"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_wo_pln_mobile"
+            data-type="number"
+            caption="b"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_wo_comcen" data-type="number" caption="c"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_wo_comcen"
+            data-type="number"
+            caption="c"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="d=b+c"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_wo"
+            data-type="number"
+            caption="d=b+c"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Rekomendasi sistem" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Mendatangkan Petugas" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="rekomendasi_sistem_mendatangkan_petugas"
-            data-type="number" caption="e" css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rekomendasi_sistem_mendatangkan_petugas"
+            data-type="number"
+            caption="e"
+            css-class="custom-table-column"
+          />
         </DxColumn>
-        <DxColumn alignment="center" caption="Diberikan ke Pelanggan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_wo_loket" data-type="number" caption="f"
-            css-class="custom-table-column" />
+        <DxColumn
+          alignment="center"
+          caption="Diberikan ke Pelanggan"
+          css-class="custom-table-column"
+        >
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_wo_loket"
+            data-type="number"
+            caption="f"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="DLPD" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="dlpd" data-type="number" caption="g"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="dlpd"
+          data-type="number"
+          caption="g"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="history_p2ti" data-type="number" caption="h"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="history_p2ti"
+          data-type="number"
+          caption="h"
+          css-class="custom-table-column"
+        />
       </DxColumn>
     </DxDataGrid>
   </div>
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 610d6d7..5bced53 100755
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -5,7 +5,7 @@
 
   <div id="dataTable">
     <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
+      class="max-h-[calc(100vh-140px)] mb-10"
       :remote-operations="true"
       :data-source="data"
       key-expr="no_laporan"
diff --git a/src/components/Pages/Gangguan/Table_10.vue b/src/components/Pages/Gangguan/Table_10.vue
index 4b087d9..bc70ce0 100755
--- a/src/components/Pages/Gangguan/Table_10.vue
+++ b/src/components/Pages/Gangguan/Table_10.vue
@@ -11,7 +11,7 @@
 
   <div id="data">
     <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
+      class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
diff --git a/src/components/Pages/Gangguan/Table_11.vue b/src/components/Pages/Gangguan/Table_11.vue
index 4dc017c..3994895 100755
--- a/src/components/Pages/Gangguan/Table_11.vue
+++ b/src/components/Pages/Gangguan/Table_11.vue
@@ -11,7 +11,7 @@
 
   <div id="data">
     <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
+      class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
diff --git a/src/components/Pages/Gangguan/Table_12.vue b/src/components/Pages/Gangguan/Table_12.vue
index 9653365..1cf5b15 100755
--- a/src/components/Pages/Gangguan/Table_12.vue
+++ b/src/components/Pages/Gangguan/Table_12.vue
@@ -351,7 +351,6 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
-  DxGroupItem,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
diff --git a/src/components/Pages/Gangguan/Table_13.vue b/src/components/Pages/Gangguan/Table_13.vue
index 6df1ec7..9857454 100755
--- a/src/components/Pages/Gangguan/Table_13.vue
+++ b/src/components/Pages/Gangguan/Table_13.vue
@@ -5,7 +5,7 @@
 
   <div id="data">
     <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
+      class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
diff --git a/src/components/Pages/Gangguan/Table_14.vue b/src/components/Pages/Gangguan/Table_14.vue
index e00ea06..952e6ed 100755
--- a/src/components/Pages/Gangguan/Table_14.vue
+++ b/src/components/Pages/Gangguan/Table_14.vue
@@ -9,7 +9,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
+      class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
@@ -46,11 +46,12 @@
 
       <DxColumn
         css-class="custom-table-column"
-        :width="50"
+        :width="100"
         alignment="center"
         :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
+        data-field="no"
       />
       <DxColumn
         :width="170"
@@ -90,6 +91,28 @@
           {{ data.column.caption }}
         </p>
       </template>
+
+      <DxSummary>
+        <DxTotalItem
+          summary-type="sum"
+          display-format="Call PLN 123"
+          show-in-column="no"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          v-for="i in 31"
+          summary-type="sum"
+          display-format="{0}"
+          :column="`tgl${i}`"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="total"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+      </DxSummary>
     </DxDataGrid>
   </div>
 </template>
@@ -107,7 +130,9 @@ import {
   DxPaging,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxSummary,
+  DxTotalItem
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
diff --git a/src/components/Pages/Gangguan/Table_15.vue b/src/components/Pages/Gangguan/Table_15.vue
index 583504b..cad7fa1 100755
--- a/src/components/Pages/Gangguan/Table_15.vue
+++ b/src/components/Pages/Gangguan/Table_15.vue
@@ -10,7 +10,7 @@
 
   <div id="data">
     <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
+      class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
@@ -54,30 +54,56 @@
       />
       <DxColumn
         alignment="center"
+        :min-width="180"
         data-field="nama_up3"
         caption="Nama UP3"
         css-class="custom-table-column"
       />
       <DxColumn
         alignment="center"
+        :min-width="180"
+        data-field="nama_up3"
+        caption="Nama UP3"
+        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"
       />
       <DxColumn
-        :width="100"
+        :width="180"
         alignment="center"
         data-field="posko_in"
         caption="Posko IN"
         css-class="custom-table-column"
       />
       <DxColumn
-        :width="100"
+        :width="180"
         alignment="center"
         data-field="posko_out"
         caption="Posko OUT"
         css-class="custom-table-column"
       />
+
+      <DxSummary>
+        <DxGroupItem :show-in-group-footer="true" column="nama_up3" display-format="Total" />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="posko_in"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="posko_out"
+          summary-type="sum"
+          display-format="{0}"
+        />
+      </DxSummary>
     </DxDataGrid>
   </div>
 </template>
@@ -85,7 +111,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -95,7 +121,9 @@ import {
   DxPaging,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxSummary,
+  DxGroupItem
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
diff --git a/src/components/Pages/Gangguan/Table_16.vue b/src/components/Pages/Gangguan/Table_16.vue
index 9c3074b..8617dff 100755
--- a/src/components/Pages/Gangguan/Table_16.vue
+++ b/src/components/Pages/Gangguan/Table_16.vue
@@ -1,171 +1,319 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type1 @update:filters="(value) => {
-            filters = value
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type1
+      @update:filters="
+        (value) => {
+          filters = value
         }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" @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" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
-                v-model:visible="loading" :enabled="true" />
+      "
+    />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      @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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
 
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <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"
-                    :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="a"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="regu" caption="b" css-class="custom-table-column" />
-            </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" />
+      <DxColumn
+        :width="50"
+        alignment="center"
+        caption="NO"
+        css-class="custom-table-column"
+        rowspan="4"
+        colspan="2"
+      >
+        <DxColumn
+          :width="50"
+          alignment="center"
+          :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+          caption="a"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="regu"
+          caption="b"
+          css-class="custom-table-column"
+        />
+      </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"
+        />
+      </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_laporan"
+            caption="d=(e+g)"
+            css-class="custom-table-column"
+          />
+        </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"
+            />
+          </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"
+            />
+          </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_belum_selesai"
+              caption="g"
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="%" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              data-field="persen_belum_selesai"
+              caption="h=(g/d)*100"
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+        </DxColumn>
+      </DxColumn>
+
+      <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Mobile" css-class="custom-table-column">
+          <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_laporan_mobile_nonmarking"
+                  caption="i"
+                  css-class="custom-table-column"
+                />
+              </DxColumn>
+              <DxColumn alignment="center" caption="%" css-class="custom-table-column">
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="persen_laporan_mobile_nonmarking"
+                  caption="j=(i/d)*100"
+                  css-class="custom-table-column"
+                />
+              </DxColumn>
             </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_laporan" caption="d=(e+g)"
-                        css-class="custom-table-column" />
-                </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" />
-                    </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" />
-                    </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_belum_selesai" caption="g"
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" data-field="persen_belum_selesai" caption="h=(g/d)*100"
-                            css-class="custom-table-column" />
-                    </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_waktu_response_mobile_nonmarking"
+                  caption="k"
+                  css-class="custom-table-column"
+                />
+              </DxColumn>
+              <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="avg_waktu_recovery_mobile_nonmarking"
+                  caption="l"
+                  css-class="custom-table-column"
+                />
+              </DxColumn>
+            </DxColumn>
+          </DxColumn>
+
+          <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_laporan_mobile_marking"
+                  caption="m"
+                  css-class="custom-table-column"
+                />
+              </DxColumn>
+              <DxColumn alignment="center" caption="%" css-class="custom-table-column">
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="persen_laporan_mobile_marking"
+                  caption="n=(m/d)*100"
+                  css-class="custom-table-column"
+                />
+              </DxColumn>
             </DxColumn>
 
-            <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Mobile" css-class="custom-table-column">
-                    <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_laporan_mobile_nonmarking"
-                                    caption="i" css-class="custom-table-column" />
-                            </DxColumn>
-                            <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_nonmarking"
-                                    caption="j=(i/d)*100" css-class="custom-table-column" />
-                            </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_waktu_response_mobile_marking"
+                  caption="o"
+                  css-class="custom-table-column"
+                />
+              </DxColumn>
+              <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="avg_waktu_recovery_mobile_marking"
+                  caption="p"
+                  css-class="custom-table-column"
+                />
+              </DxColumn>
+            </DxColumn>
+          </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_waktu_response_mobile_nonmarking"
-                                    caption="k" css-class="custom-table-column" />
-                            </DxColumn>
-                            <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_nonmarking"
-                                    caption="l" css-class="custom-table-column" />
-                            </DxColumn>
-                        </DxColumn>
-                    </DxColumn>
-
-                    <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_laporan_mobile_marking"
-                                    caption="m" css-class="custom-table-column" />
-                            </DxColumn>
-                            <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_marking"
-                                    caption="n=(m/d)*100" css-class="custom-table-column" />
-                            </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_waktu_response_mobile_marking"
-                                    caption="o" css-class="custom-table-column" />
-                            </DxColumn>
-                            <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_marking"
-                                    caption="p" css-class="custom-table-column" />
-                            </DxColumn>
-                        </DxColumn>
-                    </DxColumn>
-                </DxColumn>
-
-                <DxColumn alignment="center" caption="Non Mobile" css-class="custom-table-column">
-                    <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_laporan_nonmobile_nonmarking"
-                                    caption="q" css-class="custom-table-column" />
-                            </DxColumn>
-                            <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_nonmarking"
-                                    caption="r=(q/d)*100" css-class="custom-table-column" />
-                            </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_waktu_response_nonmobile_nonmarking" caption="s"
-                                    css-class="custom-table-column" />
-                            </DxColumn>
-                            <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center"
-                                    data-field="avg_waktu_recovery_nonmobile_nonmarking" caption="t"
-                                    css-class="custom-table-column" />
-                            </DxColumn>
-                        </DxColumn>
-                    </DxColumn>
-
-                    <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_laporan_nonmobile_marking"
-                                    caption="u" css-class="custom-table-column" />
-                            </DxColumn>
-                            <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_marking"
-                                    caption="v=(u/d)*100" css-class="custom-table-column" />
-                            </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_waktu_response_nonmobile_marking"
-                                    caption="w" css-class="custom-table-column" />
-                            </DxColumn>
-                            <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_marking"
-                                    caption="x" css-class="custom-table-column" />
-                            </DxColumn>
-                        </DxColumn>
-                    </DxColumn>
-                </DxColumn>
+        <DxColumn alignment="center" caption="Non Mobile" css-class="custom-table-column">
+          <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_laporan_nonmobile_nonmarking"
+                  caption="q"
+                  css-class="custom-table-column"
+                />
+              </DxColumn>
+              <DxColumn alignment="center" caption="%" css-class="custom-table-column">
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="persen_laporan_nonmobile_nonmarking"
+                  caption="r=(q/d)*100"
+                  css-class="custom-table-column"
+                />
+              </DxColumn>
             </DxColumn>
 
-        </DxDataGrid>
-    </div>
+            <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_waktu_response_nonmobile_nonmarking"
+                  caption="s"
+                  css-class="custom-table-column"
+                />
+              </DxColumn>
+              <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="avg_waktu_recovery_nonmobile_nonmarking"
+                  caption="t"
+                  css-class="custom-table-column"
+                />
+              </DxColumn>
+            </DxColumn>
+          </DxColumn>
+
+          <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_laporan_nonmobile_marking"
+                  caption="u"
+                  css-class="custom-table-column"
+                />
+              </DxColumn>
+              <DxColumn alignment="center" caption="%" css-class="custom-table-column">
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="persen_laporan_nonmobile_marking"
+                  caption="v=(u/d)*100"
+                  css-class="custom-table-column"
+                />
+              </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_waktu_response_nonmobile_marking"
+                  caption="w"
+                  css-class="custom-table-column"
+                />
+              </DxColumn>
+              <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="avg_waktu_recovery_nonmobile_marking"
+                  caption="x"
+                  css-class="custom-table-column"
+                />
+              </DxColumn>
+            </DxColumn>
+          </DxColumn>
+        </DxColumn>
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -174,7 +322,16 @@ import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -182,120 +339,122 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 const data = ref<any[]>([])
 const GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT = gql`
-query rekapitulasiGangguanDiselesaikanMobileAPKT
-(
+  query rekapitulasiGangguanDiselesaikanMobileAPKT(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
-    rekapitulasiGangguanDiselesaikanMobileAPKT
-(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    rekapitulasiGangguanDiselesaikanMobileAPKT(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        avg_waktu_recovery_mobile_marking
-        avg_waktu_recovery_mobile_nonmarking
-        avg_waktu_recovery_nonmobile_marking
-        avg_waktu_recovery_nonmobile_nonmarking
-        avg_waktu_response_mobile_marking
-        avg_waktu_response_mobile_nonmarking
-        avg_waktu_response_nonmobile_marking
-        avg_waktu_response_nonmobile_nonmarking
-        kode_regu
-        persen_belum_selesai
-        persen_laporan_mobile_marking
-        persen_laporan_mobile_nonmarking
-        persen_laporan_nonmobile_marking
-        persen_laporan_nonmobile_nonmarking
-        persen_selesai
-        regu
-        total_belum_selesai
-        total_laporan
-        total_laporan_mobile_marking
-        total_laporan_mobile_nonmarking
-        total_laporan_nonmobile_marking
-        total_laporan_nonmobile_nonmarking
-        total_selesai
-        }
-}`;
-const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT, {
-    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+      avg_waktu_recovery_mobile_marking
+      avg_waktu_recovery_mobile_nonmarking
+      avg_waktu_recovery_nonmobile_marking
+      avg_waktu_recovery_nonmobile_nonmarking
+      avg_waktu_response_mobile_marking
+      avg_waktu_response_mobile_nonmarking
+      avg_waktu_response_nonmobile_marking
+      avg_waktu_response_nonmobile_nonmarking
+      kode_regu
+      persen_belum_selesai
+      persen_laporan_mobile_marking
+      persen_laporan_mobile_nonmarking
+      persen_laporan_nonmobile_marking
+      persen_laporan_nonmobile_nonmarking
+      persen_selesai
+      regu
+      total_belum_selesai
+      total_laporan
+      total_laporan_mobile_marking
+      total_laporan_mobile_nonmarking
+      total_laporan_nonmobile_marking
+      total_laporan_nonmobile_nonmarking
+      total_selesai
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(
+  GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT,
+  {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     posko: 0,
     idUid: 0,
-    idUp3: 0,
-})
+    idUp3: 0
+  }
+)
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : 0,
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0,
-    })
-    const filters = useFiltersStore()
-
-
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiGangguanDiselesaikanMobileAPKT
-                ;
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const dateValue = params.periode.split(' s/d ')
+  const { posko, uid, up3 } = params
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  const filters = useFiltersStore()
 
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiGangguanDiselesaikanMobileAPKT
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref();
-
-</script>
\ No newline at end of file
+const filters = ref()
+</script>
diff --git a/src/components/Pages/Gangguan/Table_17.vue b/src/components/Pages/Gangguan/Table_17.vue
index dd53d37..aec08ed 100755
--- a/src/components/Pages/Gangguan/Table_17.vue
+++ b/src/components/Pages/Gangguan/Table_17.vue
@@ -1,73 +1,198 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type1 @update:filters="(value) => {
-            filters = value
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type1
+      @update:filters="
+        (value) => {
+          filters = value
         }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
-                v-model:visible="loading" :enabled="true" />
+      "
+    />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
 
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                caption="NO" data-type="number" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                    css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="1"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="2"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="3"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="4"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="5"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Index"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
+      <DxColumn
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO"
+        data-type="number"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field=""
+        caption="Kode Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field=""
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
+        <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="1"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="2"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="3"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="4"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="5"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Index"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
 
-            <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                    css-class="custom-table-column" />
-            </DxColumn>
-
-        </DxDataGrid>
-    </div>
+      <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="Jml"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="%"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -75,7 +200,16 @@ import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { onMounted, ref } from 'vue'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -85,144 +219,146 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const createDummy = () => {
-    for (let i = 0; i < 100; i++) {
-        data.value.push({
-            id: i,
-            nama_unit: '-',
-            total: 0,
-            selesai: '-',
-            in_progress: 0,
-            avg: 0,
-            max: 0,
-            min: 0,
-            dt_avg: 0,
-            dt_max: 0,
-            dt_min: 0,
-            dt_more_sla: 0,
-            dt_less_sla: 0,
-            rt_avg: 0,
-            rt_max: 0,
-            rt_min: 0,
-            rt_more_sla: 0,
-            rt_less_sla: 0,
-            ret_avg: 0,
-            ret_max: 0,
-            ret_min: 0,
-            ret_more_sla: 0,
-            ret_less_sla: 0,
-        });
-    }
+  for (let i = 0; i < 100; i++) {
+    data.value.push({
+      id: i,
+      nama_unit: '-',
+      total: 0,
+      selesai: '-',
+      in_progress: 0,
+      avg: 0,
+      max: 0,
+      min: 0,
+      dt_avg: 0,
+      dt_max: 0,
+      dt_min: 0,
+      dt_more_sla: 0,
+      dt_less_sla: 0,
+      rt_avg: 0,
+      rt_max: 0,
+      rt_min: 0,
+      rt_more_sla: 0,
+      rt_less_sla: 0,
+      ret_avg: 0,
+      ret_max: 0,
+      ret_min: 0,
+      ret_more_sla: 0,
+      ret_less_sla: 0
+    })
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 const data = ref<any[]>([])
 const GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO = gql`
-query rekapitulasiGangguanRatingPerPosko
-(
+  query rekapitulasiGangguanRatingPerPosko(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
-    rekapitulasiGangguanRatingPerPosko
-(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    rekapitulasiGangguanRatingPerPosko(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        in_process 
-        indeks_rating 
-        jumlah_non_rating 
-        jumlah_rating 
-        nama_posko      
-        persen_in_process 
-        persen_non_rating 
-        persen_rating 
-        persen_selesai 
-        rating_1 
-        rating_2 
-        rating_3 
-        rating_4 
-        rating_5 
-        regu        
-        selesai 
-        total 
-        }
-}`;
+      in_process
+      indeks_rating
+      jumlah_non_rating
+      jumlah_rating
+      nama_posko
+      persen_in_process
+      persen_non_rating
+      persen_rating
+      persen_selesai
+      rating_1
+      rating_2
+      rating_3
+      rating_4
+      rating_5
+      regu
+      selesai
+      total
+    }
+  }
+`
 
-
-const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO, {
-    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+const { onResult, onError, loading, refetch } = useQuery(
+  GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO,
+  {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     posko: 0,
     idUid: 0,
-    idUp3: 0,
-})
+    idUp3: 0
+  }
+)
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : 0,
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0,
-    })
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
-                ;
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
-
+  const dateValue = params.periode.split(' s/d ')
+  const { posko, uid, up3 } = params
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref();
-
-</script>
\ No newline at end of file
+const filters = ref()
+</script>
diff --git a/src/components/Pages/Gangguan/Table_18.vue b/src/components/Pages/Gangguan/Table_18.vue
index 7e69920..81e2301 100755
--- a/src/components/Pages/Gangguan/Table_18.vue
+++ b/src/components/Pages/Gangguan/Table_18.vue
@@ -1,73 +1,198 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1 @update:filters="(value) => {
-        filters = value
-      }
-      " />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type1
+      @update:filters="
+        (value) => {
+          filters = value
+        }
+      "
+    />
   </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
-                v-model:visible="loading" :enabled="true" />
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
 
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" 
-            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" caption="NO" data-type="number"
-                css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                    css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="1"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="2"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="3"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="4"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="5"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Index"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
+      <DxColumn
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO"
+        data-type="number"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field=""
+        caption="Kode"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field=""
+        caption="Nama Regu"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
+        <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="1"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="2"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="3"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="4"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="5"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Index"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
 
-            <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                    css-class="custom-table-column" />
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="Jml"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="%"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -77,14 +202,14 @@ import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -93,42 +218,42 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 const data = ref<any[]>([])
@@ -166,37 +291,39 @@ const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
       total
     }
   }
-`  
-const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
-        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
-    })
+`
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  posko: '',
+  idUid: 0,
+  idUp3: 0
+})
 const filterData = (params: any) => {
-  
-    const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : 0,
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0,
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
-   
+  const dateValue = params.periode.split(' s/d ')
+  const { posko, uid, up3 } = params
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>
diff --git a/src/components/Pages/Gangguan/Table_19.vue b/src/components/Pages/Gangguan/Table_19.vue
index 6c3e4fa..c5e7819 100755
--- a/src/components/Pages/Gangguan/Table_19.vue
+++ b/src/components/Pages/Gangguan/Table_19.vue
@@ -1,55 +1,156 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type18 @update:filters="(value) => {
-            filters = value
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type18
+      @update:filters="
+        (value) => {
+          filters = value
         }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
-                v-model:visible="loading" :enabled="true" />
+      "
+    />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
 
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit"
-                css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
-                <DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
-                    css-class="custom-table-column" />
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="uid"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="januari"
+          data-type="number"
+          caption="Januari"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="februari"
+          data-type="number"
+          caption="Februari"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="maret"
+          data-type="number"
+          caption="Maret"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="april"
+          data-type="number"
+          caption="April"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="mei"
+          data-type="number"
+          caption="Mei"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="juni"
+          data-type="number"
+          caption="Juni"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="juli"
+          data-type="number"
+          caption="Juli"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="agustus"
+          data-type="number"
+          caption="Agustus"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="september"
+          data-type="number"
+          caption="September"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="oktober"
+          data-type="number"
+          caption="Oktober"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="november"
+          data-type="number"
+          caption="November"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="desember"
+          data-type="number"
+          caption="Desember"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -58,7 +159,16 @@ import Type18 from '@/components/Form/FiltersType/Type18.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -66,112 +176,114 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
-
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 const data = ref<any[]>([])
 const GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL = gql`
-query rekapitulasiGangguanKoreksiTransaksiIndividual
-(
+  query rekapitulasiGangguanKoreksiTransaksiIndividual(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
-    rekapitulasiGangguanKoreksiTransaksiIndividual
-(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    rekapitulasiGangguanKoreksiTransaksiIndividual(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        agustus
-        april
-        desember
-        februari
-        januari
-        juli
-        juni
-        maret
-        mei
-        november
-        oktober
-        september
-        uid
-        ulp
-        up3
-        }
-}`;
-const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL, {
-    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+      agustus
+      april
+      desember
+      februari
+      januari
+      juli
+      juni
+      maret
+      mei
+      november
+      oktober
+      september
+      uid
+      ulp
+      up3
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(
+  GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL,
+  {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     posko: 0,
     idUid: 0,
-    idUp3: 0,
-})
+    idUp3: 0
+  }
+)
 const filterData = (params: any) => {
+  const dateValue = params.periode.split(' s/d ')
+  const { posko, uid, up3 } = params
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
 
-    const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : 0,
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0,
-    })
-
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
-                ;
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
-
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
index 1cc4885..88611e3 100755
--- a/src/components/Pages/Gangguan/Table_2.vue
+++ b/src/components/Pages/Gangguan/Table_2.vue
@@ -4,50 +4,172 @@
   </Filters>
 
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="" :allow-column-resizing="true"
-      column-resizing-mode="widget">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :column-width="100"
+      @exporting=""
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible.sync="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible.sync="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-        caption="No Laporan" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
-        caption="Tgl Lapor" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
-        caption="Tgl Response" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
-        caption="Tgl Recovery" cell-template="data" />
-      <DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
-        cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
-        caption="Durasi Response Time" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-        caption="Durasi Recovery Time" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
-        cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
-        caption="IDPEL/NO METER" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-        caption="Nama Pelapor" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-        caption="Alamat Pelapor" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-        caption="No Telp Pelapor" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
-        cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
-        cell-template="data" />
+      <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) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        alignment="center"
+        data-field="jumlah_lapor"
+        caption="Jml Lapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+        cell-template="data"
+      />
 
       <template #data="{ data }">
         <p class="cursor-pointer" @click="showData()">
@@ -57,7 +179,11 @@
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDetail" title="Daftar Gangguan Melapor Lebih Dari 1 Kali" @on-close="closeDetail">
+  <DetailDialog
+    :open="showDetail"
+    title="Daftar Gangguan Melapor Lebih Dari 1 Kali"
+    @on-close="closeDetail"
+  >
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@@ -131,7 +257,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1 h-[56px]" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.nama_posko"
+          class-name="flex-1 h-[56px]"
+        />
       </div>
     </div>
   </DetailDialog>
diff --git a/src/components/Pages/Gangguan/Table_20.vue b/src/components/Pages/Gangguan/Table_20.vue
index cef7427..39e75a5 100755
--- a/src/components/Pages/Gangguan/Table_20.vue
+++ b/src/components/Pages/Gangguan/Table_20.vue
@@ -1,71 +1,172 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type1 @update:filters="(value) => {
-            filters = value
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type1
+      @update:filters="
+        (value) => {
+          filters = value
         }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
-                v-model:visible="loading" :enabled="true" />
+      "
+    />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
 
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit"
-                css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
-                <DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
-                    css-class="custom-table-column" />
-                <DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
-                    css-class="custom-table-column" />
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="uid"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="januari"
+          data-type="number"
+          caption="Januari"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="februari"
+          data-type="number"
+          caption="Februari"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="maret"
+          data-type="number"
+          caption="Maret"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="april"
+          data-type="number"
+          caption="April"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="mei"
+          data-type="number"
+          caption="Mei"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="juni"
+          data-type="number"
+          caption="Juni"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="juli"
+          data-type="number"
+          caption="Juli"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="agustus"
+          data-type="number"
+          caption="Agustus"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="september"
+          data-type="number"
+          caption="September"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="oktober"
+          data-type="number"
+          caption="Oktober"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="november"
+          data-type="number"
+          caption="November"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="desember"
+          data-type="number"
+          caption="Desember"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import {  ref } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -74,42 +175,42 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 const data = ref<any[]>([])
@@ -147,34 +248,37 @@ const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: '',
-    idUid: 0,
-    idUp3: 0
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  posko: '',
+  idUid: 0,
+  idUp3: 0
 })
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : 0,
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0,
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
-
+  const dateValue = params.periode.split(' s/d ')
+  const { posko, uid, up3 } = params
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref(); 
+const filters = ref()
 </script>
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index 597782e..bb0959e 100755
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -4,50 +4,167 @@
   </Filters>
 
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="" :allow-column-resizing="true"
-      column-resizing-mode="widget">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :column-width="100"
+      @exporting=""
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
-        cell-template="data" />
+      <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) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+        cell-template="data"
+      />
 
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-        caption="No Laporan" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
-        caption="Tgl Lapor" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
-        caption="Tgl Response" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
-        caption="Tgl Recovery" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
-        caption="Durasi Response Time" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-        caption="Durasi Recovery Time" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
-        cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
-        caption="Referensi Marking" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
-        caption="IDPEL/NO METER" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-        caption="Nama Pelapor" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-        caption="Alamat Pelapor" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-        caption="No Telp Pelapor" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
-        cell-template="data" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="referensi_marking"
+        caption="Referensi Marking"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+        cell-template="data"
+      />
 
       <template #data="{ data }">
         <p class="cursor-pointer" @click="showData()">
@@ -126,17 +243,32 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1 h-[56px]" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.nama_posko"
+          class-name="flex-1 h-[56px]"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.penyebab" class-name="flex-1 h-[56px]" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.penyebab"
+          class-name="flex-1 h-[56px]"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.tindakan" class-name="flex-1 h-[56px]" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.tindakan"
+          class-name="flex-1 h-[56px]"
+        />
       </div>
     </div>
   </DetailDialog>
diff --git a/src/components/Pages/Gangguan/Table_4.vue b/src/components/Pages/Gangguan/Table_4.vue
index d650ec5..69a8119 100755
--- a/src/components/Pages/Gangguan/Table_4.vue
+++ b/src/components/Pages/Gangguan/Table_4.vue
@@ -5,7 +5,7 @@
 
   <div id="data">
     <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
+      class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
diff --git a/src/components/Pages/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
index 6327e4e..bc724b3 100755
--- a/src/components/Pages/Gangguan/Table_5.vue
+++ b/src/components/Pages/Gangguan/Table_5.vue
@@ -5,7 +5,7 @@
 
   <div id="data">
     <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
+      class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
diff --git a/src/components/Pages/Gangguan/Table_6.vue b/src/components/Pages/Gangguan/Table_6.vue
index 1737195..a4f192d 100755
--- a/src/components/Pages/Gangguan/Table_6.vue
+++ b/src/components/Pages/Gangguan/Table_6.vue
@@ -5,7 +5,7 @@
 
   <div id="data">
     <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
+      class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
diff --git a/src/components/Pages/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
index b1e6d0b..011fdc5 100755
--- a/src/components/Pages/Gangguan/Table_7.vue
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -5,7 +5,7 @@
 
   <div id="data">
     <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
+      class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
diff --git a/src/components/Pages/Gangguan/Table_8.vue b/src/components/Pages/Gangguan/Table_8.vue
index 7c7e43d..e2b5372 100755
--- a/src/components/Pages/Gangguan/Table_8.vue
+++ b/src/components/Pages/Gangguan/Table_8.vue
@@ -10,7 +10,7 @@
 
   <div id="data">
     <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
+      class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
index 860979d..0146ff9 100755
--- a/src/components/Pages/Gangguan/Table_9.vue
+++ b/src/components/Pages/Gangguan/Table_9.vue
@@ -11,7 +11,7 @@
 
   <div id="data">
     <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
+      class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="dataReal"
       :show-column-lines="true"
       :show-row-lines="false"
@@ -61,13 +61,12 @@
         css-class="custom-table-column"
       />
       <DxColumn
-        :width="150"
+        :width="120"
         alignment="center"
-        name="jenisGangguanGroup"
-        data-field="jenisGangguan"
-        caption="Jenis Gangguan"
+        data-field="kode"
+        caption="Kode"
         css-class="custom-table-column"
-        :group-index="0"
+        group-index="0"
       />
       <DxColumn
         :width="150"
@@ -398,6 +397,7 @@ const GET_REKAP_JENIS_GANGGUAN = gql`
       persen_selesai
       tipe_permasalahan
       total
+      kode
       total_diatas_sla_recovery
       total_diatas_sla_response
       total_dibawah_sla_recovery
@@ -473,7 +473,7 @@ const filterData = (params: any) => {
           ...dataReal.value,
           {
             no: ++no,
-            kode: item.tipe_permasalahan,
+            kode: item.kode,
             jenisGangguan: item.tipe_permasalahan,
             laporan: {
               total: item.total,
diff --git a/src/components/Pages/Keluhan/Table_21.vue b/src/components/Pages/Keluhan/Table_21.vue
index 7d24755..3cefc92 100755
--- a/src/components/Pages/Keluhan/Table_21.vue
+++ b/src/components/Pages/Keluhan/Table_21.vue
@@ -5,7 +5,7 @@
 
   <div id="data">
     <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
+      class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
diff --git a/src/components/Pages/Keluhan/Table_22.vue b/src/components/Pages/Keluhan/Table_22.vue
index f6794b9..4c4f38d 100755
--- a/src/components/Pages/Keluhan/Table_22.vue
+++ b/src/components/Pages/Keluhan/Table_22.vue
@@ -4,52 +4,176 @@
   </Filters>
 
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :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 css-class="custom-table-column" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-      <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
-        cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
-        cell-template="data" />
-      <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
-        cell-template="data" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="jumlah_lapor"
+        caption="Jml Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
 
       <template #data="{ data }">
         <p class="cursor-pointer" @click="showData()">
@@ -113,7 +237,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.alamat_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -123,8 +252,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
-          class-name="flex-1 h-[56px]" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
diff --git a/src/components/Pages/Keluhan/Table_23.vue b/src/components/Pages/Keluhan/Table_23.vue
index 7cdc319..c4f6de1 100755
--- a/src/components/Pages/Keluhan/Table_23.vue
+++ b/src/components/Pages/Keluhan/Table_23.vue
@@ -4,49 +4,161 @@
   </Filters>
 
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :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 css-class="custom-table-column" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-      <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
-        css-class="custom-table-column" cell-template="data" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
 
-      <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
-        cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
-        cell-template="data" />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
       <template #data="{ data }">
         <p class="cursor-pointer" @click="showData()">
           {{ data.text }}
@@ -103,7 +215,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.alamat_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -113,8 +230,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
-          class-name="flex-1 h-[56px]" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
diff --git a/src/components/Pages/Keluhan/Table_24.vue b/src/components/Pages/Keluhan/Table_24.vue
index df5c1ea..96d73b1 100755
--- a/src/components/Pages/Keluhan/Table_24.vue
+++ b/src/components/Pages/Keluhan/Table_24.vue
@@ -4,49 +4,161 @@
   </Filters>
 
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :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 css-class="custom-table-column" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-      <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
-        css-class="custom-table-column" cell-template="data" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
 
-      <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
-        cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
-        cell-template="data" />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
       <template #data="{ data }">
         <p class="cursor-pointer" @click="showData()">
           {{ data.text }}
@@ -104,7 +216,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.alamat_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -114,8 +231,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
-          class-name="flex-1 h-[56px]" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
diff --git a/src/components/Pages/Keluhan/Table_25.vue b/src/components/Pages/Keluhan/Table_25.vue
index f839374..5d9deb6 100755
--- a/src/components/Pages/Keluhan/Table_25.vue
+++ b/src/components/Pages/Keluhan/Table_25.vue
@@ -4,50 +4,168 @@
   </Filters>
 
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :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 css-class="custom-table-column" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-      <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
-        cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
-        cell-template="data" />
-      <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
-        cell-template="data" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
       <template #data="{ data }">
         <p class="cursor-pointer" @click="showData()">
           {{ data.text }}
@@ -105,7 +223,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.alamat_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -115,8 +238,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
-          class-name="flex-1 h-[56px]" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
diff --git a/src/components/Pages/Keluhan/Table_26.vue b/src/components/Pages/Keluhan/Table_26.vue
index 928e424..cc19d5b 100755
--- a/src/components/Pages/Keluhan/Table_26.vue
+++ b/src/components/Pages/Keluhan/Table_26.vue
@@ -4,52 +4,170 @@
   </Filters>
 
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :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 css-class="custom-table-column" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-      <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
-        cell-template="data" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
 
-      <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-        css-class="custom-table-column" cell-template="data" />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
 
-      <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Response Time"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
-        cell-template="data" />
-      <DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
-        css-class="custom-table-column" cell-template="data" />
-      <DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
-        css-class="custom-table-column" cell-template="data" />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="waktu_media"
+        caption="Tgl Media"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_media"
+        caption="Keterangan Media"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
       <template #data="{ data }">
         <p class="cursor-pointer" @click="showData()">
           {{ data.text }}
@@ -77,13 +195,22 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.alamat_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
-          class-name="flex-1 h-[56px]" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -128,7 +255,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_media" class-name="flex-1 h-[56px]" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.keterangan_media"
+          class-name="flex-1 h-[56px]"
+        />
       </div>
     </div>
   </DetailDialog>
diff --git a/src/components/Pages/Keluhan/Table_27.vue b/src/components/Pages/Keluhan/Table_27.vue
index 802eda7..2710ddd 100755
--- a/src/components/Pages/Keluhan/Table_27.vue
+++ b/src/components/Pages/Keluhan/Table_27.vue
@@ -5,7 +5,7 @@
 
   <div id="data">
     <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
+      class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
diff --git a/src/components/Pages/Keluhan/Table_28.vue b/src/components/Pages/Keluhan/Table_28.vue
index 1b0935e..eb56db0 100755
--- a/src/components/Pages/Keluhan/Table_28.vue
+++ b/src/components/Pages/Keluhan/Table_28.vue
@@ -1,56 +1,189 @@
 <template>
   <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type3 @update:filters="(value) => filters = value" />
+    <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :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
+      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" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="170" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
-        cell-template="data" header-cell-template="title-header" />
+      <DxColumn
+        :width="170"
+        data-field="nama_ulp"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+        cell-template="data"
+        header-cell-template="title-header"
+      />
       <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="data" />
-        <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Selesai"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="InProgress"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-          caption="> SLA" css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-          caption="≤ SLA" css-class="custom-table-column" cell-template="data" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+          cell-template="data"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_selesai"
+          data-type="number"
+          caption="Selesai"
+          css-class="custom-table-column"
+          cell-template="data"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="persen_selesai"
+          data-type="number"
+          caption="%"
+          css-class="custom-table-column"
+          cell-template="data"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_inproses"
+          data-type="number"
+          caption="InProgress"
+          css-class="custom-table-column"
+          cell-template="data"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="persen_inproses"
+          data-type="number"
+          caption="%"
+          css-class="custom-table-column"
+          cell-template="data"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="avg_durasi_response"
+          data-type="number"
+          caption="Rata-Rata"
+          css-class="custom-table-column"
+          cell-template="data"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="max_durasi_response"
+          data-type="number"
+          caption="Max"
+          css-class="custom-table-column"
+          cell-template="data"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="min_durasi_response"
+          data-type="number"
+          caption="Min"
+          css-class="custom-table-column"
+          cell-template="data"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_diatas_sla_response"
+          data-type="number"
+          caption="> SLA"
+          css-class="custom-table-column"
+          cell-template="data"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_dibawah_sla_response"
+          data-type="number"
+          caption="≤ SLA"
+          css-class="custom-table-column"
+          cell-template="data"
+        />
       </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="data" />
-        <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="total_diatas_recovery" data-type="number" caption="> SLA"
-          css-class="custom-table-column" cell-template="data" />
-        <DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number" caption="≤ SLA"
-          css-class="custom-table-column" cell-template="data" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="avg_durasi_recovery"
+          data-type="number"
+          caption="Rata-Rata"
+          css-class="custom-table-column"
+          cell-template="data"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="max_durasi_recovery"
+          data-type="number"
+          caption="Max"
+          css-class="custom-table-column"
+          cell-template="data"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="min_durasi_recovery"
+          data-type="number"
+          caption="Min"
+          css-class="custom-table-column"
+          cell-template="data"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_diatas_recovery"
+          data-type="number"
+          caption="> SLA"
+          css-class="custom-table-column"
+          cell-template="data"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_dibawah_recovery"
+          data-type="number"
+          caption="≤ SLA"
+          css-class="custom-table-column"
+          cell-template="data"
+        />
       </DxColumn>
       <template #data="{ data }">
         <p class="cursor-pointer" @click="showDialog()">
@@ -66,8 +199,12 @@
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDialogDetail" :full-width="true" title="Detail Rekapitulasi Keluhan All"
-    @on-close="closeDetailDialog">
+  <DetailDialog
+    :open="showDialogDetail"
+    :full-width="true"
+    title="Detail Rekapitulasi Keluhan All"
+    @on-close="closeDetailDialog"
+  >
     <div class="flex flex-col w-full space-y-2 lg:space-x-4 lg:flex-row lg:justify-between">
       <div class="flex flex-1 p-4 bg-white rounded-xl">
         <div class="w-full">
@@ -111,107 +248,77 @@
               css-class="custom-table-column" />
           </DxDataGrid> -->
         </div>
-
       </div>
       <div class="w-full p-4 space-y-2 overflow-y-auto bg-white lg:w-2/6 rounded-xl">
         <div class="flex flex-row justify-between w-full">
-          <h3 class="text-sm font-medium w-[170px] text-gray-800">
-            No Laporan:
-          </h3>
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
           <InputText :readonly="true" value="-" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row justify-between w-full">
-          <h3 class="text-sm font-medium w-[170px] text-gray-800">
-            Tgl Lapor:
-          </h3>
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
           <InputText :readonly="true" value="-" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row justify-between w-full">
-          <h3 class="text-sm font-medium w-[170px] text-gray-800">
-            Dalam Proses Bidang:
-          </h3>
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">Dalam Proses Bidang:</h3>
           <InputText :readonly="true" value="-" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row justify-between w-full">
-          <h3 class="text-sm font-medium w-[170px] text-gray-800">
-            Selesai Bidang Unit:
-          </h3>
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">Selesai Bidang Unit:</h3>
           <InputText :readonly="true" value="-" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row justify-between w-full">
-          <h3 class="text-sm font-medium w-[170px] text-gray-800">
-            Durasi Response Time:
-          </h3>
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Response Time:</h3>
           <InputText :readonly="true" value="-" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row justify-between w-full">
-          <h3 class="text-sm font-medium w-[170px] text-gray-800">
-            Status:
-          </h3>
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
           <InputText :readonly="true" value="-" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row justify-between w-full">
-          <h3 class="text-sm font-medium w-[170px] text-gray-800">
-            IDPEL/NO METER::
-          </h3>
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER::</h3>
           <InputText :readonly="true" value="-" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row justify-between w-full">
-          <h3 class="text-sm font-medium w-[170px] text-gray-800">
-            Nama Pelapor:
-          </h3>
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
           <InputText :readonly="true" value="-" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row justify-between w-full">
-          <h3 class="text-sm font-medium w-[170px] text-gray-800">
-            Alamat Pelapor:
-          </h3>
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
           <InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
         </div>
 
         <div class="flex flex-row justify-between w-full">
-          <h3 class="text-sm font-medium w-[170px] text-gray-800">
-            No Telp Pelapor:
-          </h3>
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
           <InputText :readonly="true" value="-" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row justify-between w-full">
-          <h3 class="text-sm font-medium w-[170px] text-gray-800">
-            Keterangan Pelapor:
-          </h3>
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
           <InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
         </div>
 
         <div class="flex flex-row justify-between w-full">
-          <h3 class="text-sm font-medium w-[170px] text-gray-800">
-            Rayon:
-          </h3>
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">Rayon:</h3>
           <InputText :readonly="true" value="-" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row justify-between w-full">
-          <h3 class="text-sm font-medium w-[170px] text-gray-800">
-            Uraian:
-          </h3>
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">Uraian:</h3>
           <InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
         </div>
 
         <div class="flex flex-row justify-between w-full">
-          <h3 class="text-sm font-medium w-[170px] text-gray-800">
-            Response Pelanggan:
-          </h3>
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Pelanggan:</h3>
           <InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
         </div>
-
       </div>
     </div>
   </DetailDialog>
@@ -300,41 +407,40 @@ const onExporting = (e: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
-query rekapitulasiKeluhanAll
-(
+  query rekapitulasiKeluhanAll(
     $dateFrom: Date!
     $dateTo: Date!
     $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
-  rekapitulasiKeluhanAll
-(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        idUlp: $idUlp
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    rekapitulasiKeluhanAll(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      idUlp: $idUlp
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        id_ulp
-        nama_ulp
-        total
-        total_selesai
-        persen_selesai
-        total_inproses
-        persen_inproses
-        avg_durasi_response
-        min_durasi_response
-        max_durasi_response
-        total_dibawah_sla_response
-        total_diatas_sla_response
-        avg_durasi_recovery
-        min_durasi_recovery
-        max_durasi_recovery
-        total_dibawah_sla_recovery
-        total_diatas_sla_recovery
-      }
-}`
+      id_ulp
+      nama_ulp
+      total
+      total_selesai
+      persen_selesai
+      total_inproses
+      persen_inproses
+      avg_durasi_response
+      min_durasi_response
+      max_durasi_response
+      total_dibawah_sla_response
+      total_diatas_sla_response
+      avg_durasi_recovery
+      min_durasi_recovery
+      max_durasi_recovery
+      total_dibawah_sla_recovery
+      total_diatas_sla_recovery
+    }
+  }
+`
 
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
@@ -343,14 +449,18 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   idUid: 0,
   idUp3: 0
 })
-const filters = ref();
+const filters = ref()
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { idUlp, uid, up3 } = params
   refetch({
-    dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-    dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     idUlp: idUlp ? idUlp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
diff --git a/src/components/Pages/Keluhan/Table_29.vue b/src/components/Pages/Keluhan/Table_29.vue
index 6dd5e4a..0df3b36 100755
--- a/src/components/Pages/Keluhan/Table_29.vue
+++ b/src/components/Pages/Keluhan/Table_29.vue
@@ -1,79 +1,214 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-        <Type13 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :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" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
+    <Type13 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <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"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-            <DxColumn :width="170" alignment="center" data-field="fungsi_bidang" caption="Fungsi Bidang"
-                css-class="custom-table-column" />
-            <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" />
-                <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" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </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" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </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" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
-                        caption="Rata-Rata" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
-                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
-                        caption="Min" css-class="custom-table-column" />
-                </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" />
-                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-                        caption="≤SLA" css-class="custom-table-column" />
-                </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" data-type="number" caption="Total"
-                        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" />
-                    <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
-                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
-                        caption="Min" css-class="custom-table-column" />
-                </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" />
-                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
-                        caption="≤SLA" css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="fungsi_bidang"
+        caption="Fungsi Bidang"
+        css-class="custom-table-column"
+      />
+      <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"
+        />
+        <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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_selesai"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_inproses"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </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"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="avg_durasi_response"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="min_durasi_response"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="max_durasi_response"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
+        </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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_response"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </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"
+            data-type="number"
+            caption="Total"
+            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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="max_durasi_recovery"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="min_durasi_recovery"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
+        </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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_recovery"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -83,14 +218,14 @@ import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -106,37 +241,37 @@ const showPane = ref(true)
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 const data = ref<any[]>([])
@@ -175,38 +310,39 @@ const GET_DATA = gql`
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  idUlp: 0,
+  idUid: 0,
+  idUp3: 0
 })
-const filters = ref();
+const filters = ref()
 
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-    const { idUlp, uid, up3 } = params
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        idUlp: idUlp ? idUlp.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
-
-
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
-
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const dateValue = params.periode.split(' s/d ')
+  const { idUlp, uid, up3 } = params
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: idUlp ? idUlp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
 
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 </script>
diff --git a/src/components/Pages/Keluhan/Table_30.vue b/src/components/Pages/Keluhan/Table_30.vue
index f2ba13a..a8fb837 100755
--- a/src/components/Pages/Keluhan/Table_30.vue
+++ b/src/components/Pages/Keluhan/Table_30.vue
@@ -1,79 +1,214 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :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" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type3 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <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"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-            <DxColumn :width="170" alignment="center" data-field="tipe_keluhan" caption="Jenis Keluhan"
-                css-class="custom-table-column" />
-            <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" />
-                <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" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </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" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </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" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
-                        caption="Rata-Rata" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
-                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
-                        caption="Min" css-class="custom-table-column" />
-                </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" />
-                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-                        caption="≤SLA" css-class="custom-table-column" />
-                </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" data-type="number" caption="Total"
-                        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" />
-                    <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
-                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
-                        caption="Min" css-class="custom-table-column" />
-                </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" />
-                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
-                        caption="≤SLA" css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="tipe_keluhan"
+        caption="Jenis Keluhan"
+        css-class="custom-table-column"
+      />
+      <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"
+        />
+        <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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_selesai"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_inproses"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </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"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="avg_durasi_response"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="max_durasi_response"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="min_durasi_response"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
+        </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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_response"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </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"
+            data-type="number"
+            caption="Total"
+            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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="max_durasi_recovery"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="min_durasi_recovery"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
+        </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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_recovery"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -82,7 +217,16 @@ import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { ref } from 'vue'
 
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -95,110 +239,108 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
-
 const data = ref<any[]>([])
 const GET_DATA = gql`
-query rekapitulasiKeluhanPerJenisKeluhan
-(
+  query rekapitulasiKeluhanPerJenisKeluhan(
     $dateFrom: Date!
     $dateTo: Date!
     $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
-    rekapitulasiKeluhanPerJenisKeluhan
-(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        idUlp: $idUlp
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    rekapitulasiKeluhanPerJenisKeluhan(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      idUlp: $idUlp
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-            tipe_keluhan
-            total
-            total_selesai
-            persen_selesai
-            total_inproses
-            persen_inproses
-            avg_durasi_response
-            min_durasi_response
-            max_durasi_response
-            total_dibawah_sla_response
-            total_diatas_sla_response
-            avg_durasi_recovery
-            min_durasi_recovery
-            max_durasi_recovery
-            total_dibawah_sla_recovery
-            total_diatas_sla_recovery
-        }
-}`;
+      tipe_keluhan
+      total
+      total_selesai
+      persen_selesai
+      total_inproses
+      persen_inproses
+      avg_durasi_response
+      min_durasi_response
+      max_durasi_response
+      total_dibawah_sla_response
+      total_diatas_sla_response
+      avg_durasi_recovery
+      min_durasi_recovery
+      max_durasi_recovery
+      total_dibawah_sla_recovery
+      total_diatas_sla_recovery
+    }
+  }
+`
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
-    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0,
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  idUlp: 0,
+  idUid: 0,
+  idUp3: 0
 })
-const filters = ref();
+const filters = ref()
 
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-    const { idUlp, uid, up3 } = params
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        idUlp: idUlp ? idUlp.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
-
-
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
-                ;
-
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const dateValue = params.periode.split(' s/d ')
+  const { idUlp, uid, up3 } = params
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: idUlp ? idUlp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
 
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 </script>
diff --git a/src/components/Pages/Keluhan/Table_31.vue b/src/components/Pages/Keluhan/Table_31.vue
index 68250e7..da37a07 100755
--- a/src/components/Pages/Keluhan/Table_31.vue
+++ b/src/components/Pages/Keluhan/Table_31.vue
@@ -1,80 +1,214 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-        <Type13 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :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" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
+    <Type13 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <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"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-            <DxColumn :width="170" alignment="center" data-field="kelompok" caption="Kelompok Keluhan"
-                css-class="custom-table-column" />
-            <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" />
-                <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" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </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" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </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="" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
-                        caption="Rata-Rata" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
-                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
-                        caption="Min" css-class="custom-table-column" />
-                </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" />
-                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-                        caption="≤SLA" css-class="custom-table-column" />
-                </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="" data-type="number" caption="Total"
-                        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" />
-                    <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
-                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
-                        caption="Min" css-class="custom-table-column" />
-                </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" />
-                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
-                        caption="≤SLA" css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="kelompok"
+        caption="Kelompok Keluhan"
+        css-class="custom-table-column"
+      />
+      <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"
+        />
+        <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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_selesai"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_inproses"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </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=""
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="avg_durasi_response"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="max_durasi_response"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="min_durasi_response"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
+        </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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_response"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </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=""
+            data-type="number"
+            caption="Total"
+            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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="max_durasi_recovery"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="min_durasi_recovery"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
+        </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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_recovery"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -82,7 +216,16 @@ import Filters from '@/components/Form/Filters.vue'
 import Type13 from '@/components/Form/FiltersType/Type13.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -95,109 +238,108 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
-
 const data = ref<any[]>([])
 const GET_DATA = gql`
-query rekapitulasiKeluhanPerKelompokKeluhan
-(
+  query rekapitulasiKeluhanPerKelompokKeluhan(
     $dateFrom: Date!
     $dateTo: Date!
     $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
-    rekapitulasiKeluhanPerKelompokKeluhan
-(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        idUlp: $idUlp
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    rekapitulasiKeluhanPerKelompokKeluhan(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      idUlp: $idUlp
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-            kelompok
-            total
-            total_selesai
-            persen_selesai
-            total_inproses
-            persen_inproses
-            avg_durasi_response
-            min_durasi_response
-            max_durasi_response
-            total_dibawah_sla_response
-            total_diatas_sla_response
-            avg_durasi_recovery
-            min_durasi_recovery
-            max_durasi_recovery
-            total_dibawah_sla_recovery
-            total_diatas_sla_recovery
-        }
-}`;
+      kelompok
+      total
+      total_selesai
+      persen_selesai
+      total_inproses
+      persen_inproses
+      avg_durasi_response
+      min_durasi_response
+      max_durasi_response
+      total_dibawah_sla_response
+      total_diatas_sla_response
+      avg_durasi_recovery
+      min_durasi_recovery
+      max_durasi_recovery
+      total_dibawah_sla_recovery
+      total_diatas_sla_recovery
+    }
+  }
+`
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
-    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0,
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  idUlp: 0,
+  idUid: 0,
+  idUp3: 0
 })
-const filters = ref();
+const filters = ref()
 
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-    const { idUlp, uid, up3 } = params
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        idUlp: idUlp ? idUlp.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
+  const dateValue = params.periode.split(' s/d ')
+  const { idUlp, uid, up3 } = params
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: idUlp ? idUlp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
 
-
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
-                ;
-
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Keluhan/Table_32.vue b/src/components/Pages/Keluhan/Table_32.vue
index 327c862..6a34cee 100755
--- a/src/components/Pages/Keluhan/Table_32.vue
+++ b/src/components/Pages/Keluhan/Table_32.vue
@@ -1,75 +1,209 @@
 <template>
   <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type13 @update:filters="(value) => filters = value" />
+    <Type13 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :data-source="data" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :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" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-        caption="NO" css-class="custom-table-column" />
-      <DxColumn :width="170" alignment="center" data-field="tanggal_lapor" caption="Tanggal Lapor"
-        css-class="custom-table-column" />
+      <DxColumn
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="tanggal_lapor"
+        caption="Tanggal Lapor"
+        css-class="custom-table-column"
+      />
       <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" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
         <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" />
-          <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_selesai"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_selesai"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
         </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" />
-          <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_inproses"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_inproses"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
         </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_inproses" data-type="number" caption="Total"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_inproses"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="avg_durasi_response"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="max_durasi_response"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="min_durasi_response"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
         </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" />
-          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-            caption="≤SLA" 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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_response"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </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_selesai" data-type="number" caption="Total"
-            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" />
-          <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_selesai"
+            data-type="number"
+            caption="Total"
+            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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="max_durasi_recovery"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="min_durasi_recovery"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
         </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" />
-          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
-            caption="≤SLA" 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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_recovery"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
     </DxDataGrid>
@@ -179,24 +313,26 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   idUid: 0,
   idUp3: 0
 })
-const filters = ref();
+const filters = ref()
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { idUlp, uid, up3 } = params
   refetch({
-    dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-    dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     idUlp: idUlp ? idUlp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
 
   onResult((queryResult) => {
-
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
-
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
diff --git a/src/components/Pages/Keluhan/Table_33.vue b/src/components/Pages/Keluhan/Table_33.vue
index 7c44337..7ae0fc5 100755
--- a/src/components/Pages/Keluhan/Table_33.vue
+++ b/src/components/Pages/Keluhan/Table_33.vue
@@ -1,74 +1,209 @@
 <template>
   <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type8 @update:filters="(value) => filters = value" />
+    <Type8 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :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" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-        caption="NO" css-class="custom-table-column" />
-      <DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Unit" css-class="custom-table-column" />
+      <DxColumn
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Unit"
+        css-class="custom-table-column"
+      />
       <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" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
         <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" />
-          <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_selesai"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_selesai"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
         </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" />
-          <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_inproses"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_inproses"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
         </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" data-type="number" caption="Total"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="avg_durasi_response"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="max_durasi_response"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="min_durasi_response"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
         </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" />
-          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-            caption="≤SLA" 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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_response"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </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" data-type="number" caption="Total"
-            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" />
-          <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total"
+            data-type="number"
+            caption="Total"
+            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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="max_durasi_recovery"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="min_durasi_recovery"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
         </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" />
-          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
-            caption="≤SLA" 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"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_recovery"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
     </DxDataGrid>
@@ -179,14 +314,18 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   idUid: 0,
   idUp3: 0
 })
-const filters = ref();
+const filters = ref()
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { idUlp, uid, up3 } = params
   refetch({
-    dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-    dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     idUlp: idUlp ? idUlp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
@@ -195,7 +334,6 @@ const filterData = (params: any) => {
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanPerUnit
-
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -204,6 +342,5 @@ const filterData = (params: any) => {
   onError((error) => {
     console.log(error)
   })
-
 }
 </script>
diff --git a/src/components/Pages/Keluhan/Table_34.vue b/src/components/Pages/Keluhan/Table_34.vue
index 87c5adc..9e2ff8d 100755
--- a/src/components/Pages/Keluhan/Table_34.vue
+++ b/src/components/Pages/Keluhan/Table_34.vue
@@ -1,27 +1,67 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type3 @update:filters="(value) => filters = value" />
+    <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :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" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-        caption="NO" css-class="custom-table-column" />
-      <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media" css-class="custom-table-column" />
+      <DxColumn
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="media"
+        caption="Nama Media"
+        css-class="custom-table-column"
+      />
       <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-        <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number" :caption="i"
-          css-class="custom-table-column" />
+        <DxColumn
+          v-for="i in 31"
+          :width="150"
+          alignment="center"
+          :data-field="`tgl${i}`"
+          data-type="number"
+          :caption="i"
+          css-class="custom-table-column"
+        />
       </DxColumn>
     </DxDataGrid>
   </div>
@@ -146,14 +186,18 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   idUid: 0,
   idUp3: 0
 })
-const filters = ref();
+const filters = ref()
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { idUlp, uid, up3 } = params
   refetch({
-    dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-    dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     idUlp: idUlp ? idUlp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
@@ -162,7 +206,6 @@ const filterData = (params: any) => {
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
-
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
diff --git a/src/components/Pages/Keluhan/Table_35.vue b/src/components/Pages/Keluhan/Table_35.vue
index 3d191ae..ce1449b 100755
--- a/src/components/Pages/Keluhan/Table_35.vue
+++ b/src/components/Pages/Keluhan/Table_35.vue
@@ -1,72 +1,199 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-        <Type8 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :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" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
+    <Type8 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <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"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-            <DxColumn :width="150" alignment="center" data-field="regu" caption="Kode Unit"
-                css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="nama_idUlp" caption="Nama Unit"
-                css-class="custom-table-column" />
-            <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" />
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="in_process" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="selesai" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_rating" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_rating" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="rating_1" data-type="number" caption="1"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="rating_2" data-type="number" caption="2"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="rating_3" data-type="number" caption="3"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="rating_4" data-type="number" caption="4"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="rating_5" data-type="number" caption="5"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="indeks_rating" data-type="number" caption="Indeks"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="jumlah_non_rating" data-type="number" caption="Jml"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="persen_non_rating" data-type="number" caption="%"
-                    css-class="custom-table-column" />
-            </DxColumn>
-
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="regu"
+        caption="Kode Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_idUlp"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <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"
+        />
+        <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="in_process"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_in_process"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="selesai"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_selesai"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_rating"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_rating"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rating_1"
+            data-type="number"
+            caption="1"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rating_2"
+            data-type="number"
+            caption="2"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rating_3"
+            data-type="number"
+            caption="3"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rating_4"
+            data-type="number"
+            caption="4"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rating_5"
+            data-type="number"
+            caption="5"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="indeks_rating"
+            data-type="number"
+            caption="Indeks"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="jumlah_non_rating"
+          data-type="number"
+          caption="Jml"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="persen_non_rating"
+          data-type="number"
+          caption="%"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -75,7 +202,16 @@ import Type8 from '@/components/Form/FiltersType/Type8.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -88,111 +224,109 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
-
 const data = ref<any[]>([])
 const GET_DATA = gql`
-query rekapitulasiKeluhanRatingPerUnit
-(
+  query rekapitulasiKeluhanRatingPerUnit(
     $dateFrom: Date!
     $dateTo: Date!
     $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
-    rekapitulasiKeluhanRatingPerUnit
-(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        idUlp: $idUlp
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    rekapitulasiKeluhanRatingPerUnit(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      idUlp: $idUlp
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        in_process 
-        indeks_rating 
-        jumlah_non_rating 
-        jumlah_rating 
-        nama_idUlp      
-        persen_in_process 
-        persen_non_rating 
-        persen_rating 
-        persen_selesai 
-        rating_1 
-        rating_2 
-        rating_3 
-        rating_4 
-        rating_5 
-        regu        
-        selesai 
-        total 
-        }
-}`;
+      in_process
+      indeks_rating
+      jumlah_non_rating
+      jumlah_rating
+      nama_idUlp
+      persen_in_process
+      persen_non_rating
+      persen_rating
+      persen_selesai
+      rating_1
+      rating_2
+      rating_3
+      rating_4
+      rating_5
+      regu
+      selesai
+      total
+    }
+  }
+`
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
-    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0,
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  idUlp: 0,
+  idUid: 0,
+  idUp3: 0
 })
-const filters = ref();
+const filters = ref()
 
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-    const { idUlp, uid, up3 } = params
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        idUlp: idUlp ? idUlp.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
-
-
-
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit;
-
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const dateValue = params.periode.split(' s/d ')
+  const { idUlp, uid, up3 } = params
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: idUlp ? idUlp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
 
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Material/Table_68.vue b/src/components/Pages/Material/Table_68.vue
index c8cc709..4be086c 100755
--- a/src/components/Pages/Material/Table_68.vue
+++ b/src/components/Pages/Material/Table_68.vue
@@ -1,57 +1,154 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type14 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
-            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-                :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type14 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed=""
+      :column-width="100"
+      @exporting=""
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
 
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nomo_gangguan"
-                caption="Nomor Gangguan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_pelanggan"
-                caption="Nama Pelanggan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="isi_laporan"
-                caption="Isi Laporan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="penyebab_gangguan"
-                caption="Penyebab Gangguan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="waktu_padam"
-                caption="Tgl Padam" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Nyala" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="regu" caption="Regu" />
-            <DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
-                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber"
-                    caption="Sumber" />
-                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Nama" />
-                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="satuan"
-                    caption="Satuan" />
-                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="volume"
-                    caption="Vol" />
-            </DxColumn>
-
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nomo_gangguan"
+        caption="Nomor Gangguan"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_pelanggan"
+        caption="Nama Pelanggan"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="isi_laporan"
+        caption="Isi Laporan"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="penyebab_gangguan"
+        caption="Penyebab Gangguan"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="waktu_padam"
+        caption="Tgl Padam"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Tgl Nyala"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="regu"
+        caption="Regu"
+      />
+      <DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
+        <DxColumn
+          css-class="custom-table-column"
+          :width="170"
+          alignment="center"
+          data-field="sumber"
+          caption="Sumber"
+        />
+        <DxColumn
+          css-class="custom-table-column"
+          :width="170"
+          alignment="center"
+          data-field=""
+          caption="Nama"
+        />
+        <DxColumn
+          css-class="custom-table-column"
+          :width="170"
+          alignment="center"
+          data-field="satuan"
+          caption="Satuan"
+        />
+        <DxColumn
+          css-class="custom-table-column"
+          :width="170"
+          alignment="center"
+          data-field="volume"
+          caption="Vol"
+        />
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
-
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
-import Filters from '@/components/Form/Filters.vue';
-import { Type14 } from '@/components/Form/FiltersType';
-import { useQuery } from '@vue/apollo-composable';
-import gql from 'graphql-tag';
+import {
+  DxColumn,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
+import Filters from '@/components/Form/Filters.vue'
+import { Type14 } from '@/components/Form/FiltersType'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -60,65 +157,71 @@ const data = ref<any[]>([])
 
 const daftarGangguanDanMaterialDipakai = gql`
   query DaftardaftarGangguanDanMaterialDipakai(
-    $dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
   ) {
     daftarGangguanDanMaterialDipakai(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        distribusi: $idUid
-        area: $idUp3
-        posko: $posko
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      distribusi: $idUid
+      area: $idUp3
+      posko: $posko
     ) {
-        isi_laporan
-        nama_material
-        nama_pelanggan
-        nomor_gangguan
-        penyebab_gangguan
-        regu
-        satuan
-        sumber
-        volume
-        waktu_padam
-
+      isi_laporan
+      nama_material
+      nama_pelanggan
+      nomor_gangguan
+      penyebab_gangguan
+      regu
+      satuan
+      sumber
+      volume
+      waktu_padam
     }
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(daftarGangguanDanMaterialDipakai, {
-    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    idUid: 0,
-    idUp3: 0,
-    posko: ''
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  idUid: 0,
+  idUp3: 0,
+  posko: ''
 })
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-    const { posko, idUid, idUp3 } = params
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        idUid: idUid ? idUid.id : 0,
-        idUp3: idUp3 ? idUp3.id : 0,
-        posko: posko ? posko.id : 0,
-
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            queryResult.data.daftarGangguanDanMaterialDipakai.forEach((item: any) => {
-                data.value = [
-                    ...data.value,
-                    {
-                        ...item
-                    }
-                ]
-            })
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const dateValue = params.periode.split(' s/d ')
+  const { posko, idUid, idUp3 } = params
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    posko: posko ? posko.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.daftarGangguanDanMaterialDipakai.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Material/Table_69.vue b/src/components/Pages/Material/Table_69.vue
index b66e4cb..948f269 100755
--- a/src/components/Pages/Material/Table_69.vue
+++ b/src/components/Pages/Material/Table_69.vue
@@ -1,43 +1,110 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type14 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
-            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-                :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type14 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed=""
+      :column-width="100"
+      @exporting=""
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
 
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="kode_material"
-                caption="Kode Material" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_material"
-                caption="Nama Material" />
-            <DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="satuan"
-                caption="Satuan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber_material"
-                caption="Sumber Material" />
-            <DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
-                <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
-                    :caption="i" css-class="custom-table-column" />
-            </DxColumn>
-
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="kode_material"
+        caption="Kode Material"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_material"
+        caption="Nama Material"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="120"
+        alignment="center"
+        data-field="satuan"
+        caption="Satuan"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="sumber_material"
+        caption="Sumber Material"
+      />
+      <DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
+        <DxColumn
+          v-for="i in 31"
+          :width="150"
+          alignment="center"
+          :data-field="`tgl${i}`"
+          data-type="number"
+          :caption="i"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { Type14 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import { useQuery } from '@vue/apollo-composable'
@@ -50,91 +117,98 @@ const data = ref<any[]>([])
 
 const rekapitulasiPemakaianMaterial = gql`
   query DaftarrekapitulasiPemakaianMaterial(
-    $dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
   ) {
     rekapitulasiPemakaianMaterial(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        distribusi: $idUid
-        area: $idUp3
-        posko: $posko
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      distribusi: $idUid
+      area: $idUp3
+      posko: $posko
     ) {
-        kode_material
-nama_material
-satuan
-sumber_material
-tgl1
-tgl10
-tgl11
-tgl12
-tgl13
-tgl14
-tgl15
-tgl16
-tgl17
-tgl18
-tgl19
-tgl2
-tgl20
-tgl21
-tgl22
-tgl23
-tgl24
-tgl25
-tgl26
-tgl27
-tgl28
-tgl29
-tgl3
-tgl30
-tgl31
-tgl4
-tgl5
-tgl6
-tgl7
-tgl8
-tgl9
-
+      kode_material
+      nama_material
+      satuan
+      sumber_material
+      tgl1
+      tgl10
+      tgl11
+      tgl12
+      tgl13
+      tgl14
+      tgl15
+      tgl16
+      tgl17
+      tgl18
+      tgl19
+      tgl2
+      tgl20
+      tgl21
+      tgl22
+      tgl23
+      tgl24
+      tgl25
+      tgl26
+      tgl27
+      tgl28
+      tgl29
+      tgl3
+      tgl30
+      tgl31
+      tgl4
+      tgl5
+      tgl6
+      tgl7
+      tgl8
+      tgl9
     }
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(rekapitulasiPemakaianMaterial, {
-    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    idUid: 0,
-    idUp3: 0,
-    posko: 0
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  idUid: 0,
+  idUp3: 0,
+  posko: 0
 })
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
+  const dateValue = params.periode.split(' s/d ')
 
-    const { posko, idUid, idUp3 } = params
+  const { posko, idUid, idUp3 } = params
 
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        idUid: idUid ? idUid.id : 0,
-        idUp3: idUp3 ? idUp3.id : 0,
-        posko: posko ? posko.id : 0,
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            queryResult.data.rekapitulasiPemakaianMaterial.forEach((item: any) => {
-                data.value = [
-                    ...data.value,
-                    {
-                        ...item
-                    }
-                ]
-            })
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    posko: posko ? posko.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.rekapitulasiPemakaianMaterial.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_36.vue b/src/components/Pages/Monalisa/Table_36.vue
index ffd615d..73a7cf7 100755
--- a/src/components/Pages/Monalisa/Table_36.vue
+++ b/src/components/Pages/Monalisa/Table_36.vue
@@ -10,7 +10,7 @@
 
   <div id="data">
     <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
+      class="max-h-[calc(100vh-140px)] mb-10"
       :remote-operations="true"
       :data-source="data"
       :show-column-lines="true"
@@ -226,7 +226,7 @@ const tahunLalu = ref(tahunSekarang.value - 1)
 
 // const MONALISAJUMLAHKALIGANGGUAN = gql`
 //   query DaftarMonalisaJumlahKaliGangguan(
-//     $regional: Int
+//     $regional: String
 //     $idUid: Int
 //     $idUp3: Int
 //     $idUlp: Int
diff --git a/src/components/Pages/Monalisa/Table_37.vue b/src/components/Pages/Monalisa/Table_37.vue
index f5a3551..81dfe0a 100755
--- a/src/components/Pages/Monalisa/Table_37.vue
+++ b/src/components/Pages/Monalisa/Table_37.vue
@@ -10,7 +10,7 @@
 
   <div id="data">
     <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
+      class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
diff --git a/src/components/Pages/Monalisa/Table_38.vue b/src/components/Pages/Monalisa/Table_38.vue
index 0fd0ee1..d0be335 100755
--- a/src/components/Pages/Monalisa/Table_38.vue
+++ b/src/components/Pages/Monalisa/Table_38.vue
@@ -10,7 +10,7 @@
 
   <div id="data">
     <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
+      class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
diff --git a/src/components/Pages/Monalisa/Table_39.vue b/src/components/Pages/Monalisa/Table_39.vue
index b4fc643..23e9195 100755
--- a/src/components/Pages/Monalisa/Table_39.vue
+++ b/src/components/Pages/Monalisa/Table_39.vue
@@ -10,7 +10,7 @@
 
   <div id="data">
     <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
+      class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
diff --git a/src/components/Pages/Monalisa/Table_40.vue b/src/components/Pages/Monalisa/Table_40.vue
index 40e3740..e4a758c 100755
--- a/src/components/Pages/Monalisa/Table_40.vue
+++ b/src/components/Pages/Monalisa/Table_40.vue
@@ -1,73 +1,176 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type2 @update:filters="(value) => filters = value" />
+    <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :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" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :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" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-      <DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Gangguan" css-class="custom-table-column">
+      <DxColumn
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        alignment="center"
+        caption="Jumlah dan Durasi RPT & RCT Gangguan"
+        css-class="custom-table-column"
+      >
         <DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
           <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
-            <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="total_rpt_bulan"
-              css-class="custom-table-column" />
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="a"
+              data-type="number"
+              data-field="total_rpt_bulan"
+              css-class="custom-table-column"
+            />
           </DxColumn>
           <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
-            <DxColumn :width="150" alignment="center" caption="b" data-type="number"
-              data-field="jumlah_gangguan_rpt_bulan" css-class="custom-table-column" />
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="b"
+              data-type="number"
+              data-field="jumlah_gangguan_rpt_bulan"
+              css-class="custom-table-column"
+            />
           </DxColumn>
           <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
-            <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field="rpt_gangguan_bulan"
-              css-class="custom-table-column" />
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="c=a/b"
+              data-type="number"
+              data-field="rpt_gangguan_bulan"
+              css-class="custom-table-column"
+            />
           </DxColumn>
           <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
-            <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_bulan"
-              css-class="custom-table-column" />
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="d"
+              data-type="number"
+              data-field="total_rct_bulan"
+              css-class="custom-table-column"
+            />
           </DxColumn>
           <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
-            <DxColumn :width="150" alignment="center" caption="e" data-type="number"
-              data-field="jumlah_gangguan_rct_bulan" css-class="custom-table-column" />
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="e"
+              data-type="number"
+              data-field="jumlah_gangguan_rct_bulan"
+              css-class="custom-table-column"
+            />
           </DxColumn>
           <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
-            <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field="rct_gangguan_bulan"
-              css-class="custom-table-column" />
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="f=d/e"
+              data-type="number"
+              data-field="rct_gangguan_bulan"
+              css-class="custom-table-column"
+            />
           </DxColumn>
         </DxColumn>
         <DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
           <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
-            <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="total_rpt_sampai_bulan"
-              css-class="custom-table-column" />
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="a"
+              data-type="number"
+              data-field="total_rpt_sampai_bulan"
+              css-class="custom-table-column"
+            />
           </DxColumn>
           <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
-            <DxColumn :width="150" alignment="center" caption="b" data-type="number"
-              data-field="jumlah_gangguan_rpt_sampai_bulan" css-class="custom-table-column" />
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="b"
+              data-type="number"
+              data-field="jumlah_gangguan_rpt_sampai_bulan"
+              css-class="custom-table-column"
+            />
           </DxColumn>
           <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
-            <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number"
-              data-field="rpt_gangguan_sampai_bulan" css-class="custom-table-column" />
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="c=a/b"
+              data-type="number"
+              data-field="rpt_gangguan_sampai_bulan"
+              css-class="custom-table-column"
+            />
           </DxColumn>
           <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
-            <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_sampai_bulan"
-              css-class="custom-table-column" />
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="d"
+              data-type="number"
+              data-field="total_rct_sampai_bulan"
+              css-class="custom-table-column"
+            />
           </DxColumn>
           <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
-            <DxColumn :width="150" alignment="center" caption="e" data-type="number"
-              data-field="jumlah_gangguan_rct_sampai_bulan" css-class="custom-table-column" />
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="e"
+              data-type="number"
+              data-field="jumlah_gangguan_rct_sampai_bulan"
+              css-class="custom-table-column"
+            />
           </DxColumn>
           <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
-            <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number"
-              data-field="rch_gangguan_sampai_bulan" css-class="custom-table-column" />
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="f=d/e"
+              data-type="number"
+              data-field="rch_gangguan_sampai_bulan"
+              css-class="custom-table-column"
+            />
           </DxColumn>
         </DxColumn>
       </DxColumn>
@@ -150,7 +253,7 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRpt
   idUp3: 0
 })
 const filterData = (params: any) => {
-  const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
 
   refetch({
     regional: regional,
@@ -163,9 +266,7 @@ const filterData = (params: any) => {
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       queryResult.data.monalisaJumlahDurasiRptRctGangguan.forEach((item: any) => {
-        data.value = [
-          ...data.value, { ...item }
-        ]
+        data.value = [...data.value, { ...item }]
       })
     }
     console.log(queryResult.data)
@@ -211,5 +312,4 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const filters = ref()
-
 </script>
diff --git a/src/components/Pages/Monalisa/Table_41.vue b/src/components/Pages/Monalisa/Table_41.vue
index cbe5d46..cdbc1df 100755
--- a/src/components/Pages/Monalisa/Table_41.vue
+++ b/src/components/Pages/Monalisa/Table_41.vue
@@ -1,33 +1,77 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" @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" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type2 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      @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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO"
-                css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="id_gangguan" caption="ID Gangguan" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="tipe_permasalahan" caption="Jenis Gangguan"
-                css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah"
-                css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="persen_gangguan" caption="%"
-                css-class="custom-table-column" />
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        alignment="center"
+        data-field="id_gangguan"
+        caption="ID Gangguan"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        alignment="center"
+        data-field="tipe_permasalahan"
+        caption="Jenis Gangguan"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="jumlah"
+        caption="Jumlah"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="persen_gangguan"
+        caption="%"
+        css-class="custom-table-column"
+      />
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -36,14 +80,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -87,75 +131,75 @@ const monalisaGangguanPerJenisGangguan = gql`
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanPerJenisGangguan, {
-    bulan: 10,
-    tahun: 2023,
-    regional: '',
-    posko: '',
-    idUid: 0,
-    idUp3: 0
+  bulan: 10,
+  tahun: 2023,
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0
 })
 const filterData = (params: any) => {
-    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
 
-    refetch({
-        regional: regional,
-        posko: posko ? posko.id : 0,
-        idUid: idUid ? idUid.id : 0,
-        idUp3: idUp3 ? idUp3.id : 0,
-        bulan: bulan ? bulan.id : 10,
-        tahun: bulan ? tahun.id : 2023
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            queryResult.data.monalisaGangguanPerJenisGangguan.forEach((item: any) => {
-                data.value = [
-                    ...data.value,
-                    {
-                        ...item
-                    }
-                ]
-            })
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : 0,
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.monalisaGangguanPerJenisGangguan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 const filters = ref()
diff --git a/src/components/Pages/Monalisa/Table_42.vue b/src/components/Pages/Monalisa/Table_42.vue
index d797d3c..26c7f4d 100755
--- a/src/components/Pages/Monalisa/Table_42.vue
+++ b/src/components/Pages/Monalisa/Table_42.vue
@@ -1,42 +1,104 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" @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" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type2 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      @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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_bulan"
+            data-type="number"
+            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_bulan_n_1"
+            data-type="number"
+            :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_bulan"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_tahun"
+            data-type="number"
+            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_tahun_n_1"
+            data-type="number"
+            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_tahun"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -45,14 +107,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -101,77 +163,77 @@ const monalisaRekapitulasiLaporUlangGangguan = gql`
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLaporUlangGangguan, {
-    bulan: 10,
-    tahun: 2023,
-    regional: '',
-    posko: '',
-    idUid: 0,
-    idUp3: 0
+  bulan: 10,
+  tahun: 2023,
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0
 })
 const filterData = (params: any) => {
-    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
-    bulanSekarang.value = bulan.id;
-    tahunSekarang.value = tahun.id;
-    tahunLalu.value = tahun.id - 1;
-    refetch({
-        regional: regional,
-        posko: posko ? posko.id : 0,
-        idUid: idUid ? idUid.id : 0,
-        idUp3: idUp3 ? idUp3.id : 0,
-        bulan: bulan ? bulan.id : 10,
-        tahun: bulan ? tahun.id : 2023
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            queryResult.data.monalisaRekapitulasiLaporUlangGangguan.forEach((item: any) => {
-                data.value = [
-                    ...data.value,
-                    {
-                        ...item
-                    }
-                ]
-            })
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+  bulanSekarang.value = bulan.id
+  tahunSekarang.value = tahun.id
+  tahunLalu.value = tahun.id - 1
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : 0,
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.monalisaRekapitulasiLaporUlangGangguan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 const filters = ref()
diff --git a/src/components/Pages/Monalisa/Table_43.vue b/src/components/Pages/Monalisa/Table_43.vue
index 4b92a81..8f4c199 100755
--- a/src/components/Pages/Monalisa/Table_43.vue
+++ b/src/components/Pages/Monalisa/Table_43.vue
@@ -1,42 +1,104 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" @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" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type2 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      @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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_bulan"
+            data-type="number"
+            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_bulan_n_1"
+            data-type="number"
+            :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_bulan"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_tahun"
+            data-type="number"
+            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_tahun_n_1"
+            data-type="number"
+            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_tahun"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -45,14 +107,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -101,77 +163,77 @@ const monalisaRekapitulasiEnsGangguan = gql`
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEnsGangguan, {
-    bulan: 10,
-    tahun: 2023,
-    regional: '',
-    posko: '',
-    idUid: 0,
-    idUp3: 0
+  bulan: 10,
+  tahun: 2023,
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0
 })
 const filterData = (params: any) => {
-    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
-    bulanSekarang.value = bulan.id;
-    tahunSekarang.value = tahun.id;
-    tahunLalu.value = tahun.id - 1;
-    refetch({
-        regional: regional,
-        posko: posko ? posko.id : 0,
-        idUid: idUid ? idUid.id : 0,
-        idUp3: idUp3 ? idUp3.id : 0,
-        bulan: bulan ? bulan.id : 10,
-        tahun: bulan ? tahun.id : 2023
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            queryResult.data.monalisaRekapitulasiEnsGangguan.forEach((item: any) => {
-                data.value = [
-                    ...data.value,
-                    {
-                        ...item
-                    }
-                ]
-            })
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+  bulanSekarang.value = bulan.id
+  tahunSekarang.value = tahun.id
+  tahunLalu.value = tahun.id - 1
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : 0,
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.monalisaRekapitulasiEnsGangguan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 const filters = ref()
diff --git a/src/components/Pages/Monalisa/Table_44.vue b/src/components/Pages/Monalisa/Table_44.vue
index 37fa0ca..7c669ee 100755
--- a/src/components/Pages/Monalisa/Table_44.vue
+++ b/src/components/Pages/Monalisa/Table_44.vue
@@ -1,32 +1,76 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" @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" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type2 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      @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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="gangguan" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="informasi" data-type="number" caption="Informasi"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
-                    css-class="custom-table-column" />
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="gangguan"
+          data-type="number"
+          caption="Gangguan"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="informasi"
+          data-type="number"
+          caption="Informasi"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -35,14 +79,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -79,86 +123,85 @@ const monalisaGangguanBelumSelesai = gql`
       bulan: $bulan
       tahun: $tahun
     ) {
-        gangguan
-        informasi
-        nama_posko
-        total
+      gangguan
+      informasi
+      nama_posko
+      total
     }
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSelesai, {
-
-    regional: '',
-    posko: '',
-    idUid: 0,
-    idUp3: 0,
-    bulan: 10,
-    tahun: 2023,
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
 })
 const filterData = (params: any) => {
-    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
-    bulanSekarang.value = bulan.id;
-    tahunSekarang.value = tahun.id;
-    tahunLalu.value = tahun.id - 1;
-    refetch({
-        regional: regional,
-        posko: posko ? posko.id : 0,
-        idUid: idUid ? idUid.id : 0,
-        idUp3: idUp3 ? idUp3.id : 0,
-        bulan: bulan ? bulan.id : 10,
-        tahun: bulan ? tahun.id : 2023
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            queryResult.data.monalisaGangguanBelumSelesai.forEach((item: any) => {
-                data.value = [
-                    ...data.value,
-                    {
-                        ...item
-                    }
-                ]
-            })
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+  bulanSekarang.value = bulan.id
+  tahunSekarang.value = tahun.id
+  tahunLalu.value = tahun.id - 1
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : 0,
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.monalisaGangguanBelumSelesai.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 const filters = ref()
diff --git a/src/components/Pages/Monalisa/Table_45.vue b/src/components/Pages/Monalisa/Table_45.vue
index 2f986a1..a10b889 100755
--- a/src/components/Pages/Monalisa/Table_45.vue
+++ b/src/components/Pages/Monalisa/Table_45.vue
@@ -1,42 +1,104 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" @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" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type2 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      @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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_bulan"
+            data-type="number"
+            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_bulan_n_1"
+            data-type="number"
+            :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_bulan"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_tahun"
+            data-type="number"
+            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_tahun_n_1"
+            data-type="number"
+            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_tahun"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -44,7 +106,16 @@ import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -59,35 +130,34 @@ const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
-
 const tahunSekarang = ref(new Date().getFullYear())
 const bulanSekarang = ref(new Date().getMonth())
 const tahunLalu = ref(tahunSekarang.value - 1)
@@ -119,45 +189,45 @@ const MONALISAJUMLAHKALIKELUHAN = gql`
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIKELUHAN, {
-    regional: '',
-    posko: '',
-    idUid: 0,
-    idUp3: 0,
-    bulan: bulanSekarang.value,
-    tahun: tahunSekarang.value
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: bulanSekarang.value,
+  tahun: tahunSekarang.value
 })
 
 const filterData = (params: any) => {
-    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
-    bulanSekarang.value = bulan.id;
-    tahunSekarang.value = tahun.id;
-    tahunLalu.value = tahun.id - 1;
-    refetch({
-        regional: regional,
-        posko: posko ? posko.id : 0,
-        idUid: idUid ? idUid.id : 0,
-        idUp3: idUp3 ? idUp3.id : 0,
-        bulan: bulan ? bulan.id : bulanSekarang.value,
-        tahun: bulan ? tahun.id : tahunSekarang.value
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.monalisaJumlahKaliKeluhan;
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+  bulanSekarang.value = bulan.id
+  tahunSekarang.value = tahun.id
+  tahunLalu.value = tahun.id - 1
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : 0,
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : bulanSekarang.value,
+    tahun: bulan ? tahun.id : tahunSekarang.value
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.monalisaJumlahKaliKeluhan
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 onMounted(() => {
-    console.log(bulanSekarang.value)
-});
-const filters = ref();
-</script>
\ No newline at end of file
+  console.log(bulanSekarang.value)
+})
+const filters = ref()
+</script>
diff --git a/src/components/Pages/Monalisa/Table_46.vue b/src/components/Pages/Monalisa/Table_46.vue
index 339e720..c4387b7 100755
--- a/src/components/Pages/Monalisa/Table_46.vue
+++ b/src/components/Pages/Monalisa/Table_46.vue
@@ -1,42 +1,108 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" @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" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type2 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      @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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Jumlah RCT Kali Keluhan" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        alignment="center"
+        caption="Jumlah RCT Kali Keluhan"
+        css-class="custom-table-column"
+      >
+        <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_bulan"
+            data-type="number"
+            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_bulan_n_1"
+            data-type="number"
+            :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_bulan"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_tahun"
+            data-type="number"
+            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_tahun_n_1"
+            data-type="number"
+            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_tahun"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -44,7 +110,16 @@ import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -64,32 +139,32 @@ const tahunLalu = ref(tahunSekarang.value - 1)
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 const monalisaDispatchingTimeKeluhan = gql`
   query DaftarmonalisaDispatchingTimeKeluhan(
@@ -119,49 +194,49 @@ const monalisaDispatchingTimeKeluhan = gql`
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTimeKeluhan, {
-    regional: '',
-    posko: '',
-    idUid: 0,
-    idUp3: 0,
-    bulan: 10,
-    tahun: 2023
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
 })
 const filterData = (params: any) => {
-    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
-    bulanSekarang.value = bulan.id;
-    tahunSekarang.value = tahun.id;
-    tahunLalu.value = tahun.id - 1;
-    refetch({
-        regional: regional,
-        posko: posko ? posko.id : 0,
-        idUid: idUid ? idUid.id : 0,
-        idUp3: idUp3 ? idUp3.id : 0,
-        bulan: bulan ? bulan.id : 10,
-        tahun: bulan ? tahun.id : 2023
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            queryResult.data.monalisaDispatchingTimeKeluhan.forEach((item: any) => {
-                data.value = [
-                    ...data.value,
-                    {
-                        ...item
-                    }
-                ]
-            })
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+  bulanSekarang.value = bulan.id
+  tahunSekarang.value = tahun.id
+  tahunLalu.value = tahun.id - 1
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : 0,
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.monalisaDispatchingTimeKeluhan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_47.vue b/src/components/Pages/Monalisa/Table_47.vue
index dd1cf92..95e046e 100755
--- a/src/components/Pages/Monalisa/Table_47.vue
+++ b/src/components/Pages/Monalisa/Table_47.vue
@@ -1,42 +1,108 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" @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" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type2 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      @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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Jumlah RPT Kali Keluhan" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        alignment="center"
+        caption="Jumlah RPT Kali Keluhan"
+        css-class="custom-table-column"
+      >
+        <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_bulan"
+            data-type="number"
+            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_bulan_n_1"
+            data-type="number"
+            :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_bulan"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_tahun"
+            data-type="number"
+            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_tahun_n_1"
+            data-type="number"
+            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_tahun"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -44,7 +110,16 @@ import { ref } from 'vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -64,96 +139,105 @@ const tahunSekarang = ref(new Date().getFullYear())
 const bulanSekarang = ref(new Date().getMonth())
 const tahunLalu = ref(tahunSekarang.value - 1)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 const monalisaRecoveryTimeKeluhan = gql`
-  query DaftarmonalisaRecoveryTimeKeluhan($regional:regional, $posko: Int, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
+  query DaftarmonalisaRecoveryTimeKeluhan(
+    $regional: regional
+    $posko: Int
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
     monalisaRecoveryTimeKeluhan(
-      regional:$regional
+      regional: $regional
       posko: $posko
       idUid: $idUid
       idUp3: $idUp3
       bulan: $bulan
       tahun: $tahun
     ) {
-        jumlah_bulan
-        jumlah_bulan_n_1
-        jumlah_tahun
-        jumlah_tahun_n_1
-        nama_posko
-        persen_bulan
-        persen_tahun
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
     }
   }
-`;
+`
 const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
-    regional: 0,
-    posko: 0,
-    idUid: 0,
-    idUp3: 0,
-    bulan: 10,
-    tahun: 2023,
+  regional: 0,
+  posko: 0,
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
 })
 const filterData = (params: any) => {
-
-    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
-    bulanSekarang.value = bulan.id;
-    tahunSekarang.value = tahun.id;
-    tahunLalu.value = tahun.id - 1;
-    refetch({
-        regional: regional,
-        posko: posko ? posko.id : 0,
-        idUid: idUid ? idUid.id : 0,
-        idUp3: idUp3 ? idUp3.id : 0,
-        bulan: bulan ? bulan.id : 10,
-        tahun: bulan ? tahun.id : 2023
-    })
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-            queryResult.data.monalisaRecoveryTimeKeluhan.forEach((item: any) => {
-                data.value = [...data.value, {
-                    ...item,
-                }];
-            });
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+  bulanSekarang.value = bulan.id
+  tahunSekarang.value = tahun.id
+  tahunLalu.value = tahun.id - 1
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : 0,
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.monalisaRecoveryTimeKeluhan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_48.vue b/src/components/Pages/Monalisa/Table_48.vue
index 380af30..f830c0b 100755
--- a/src/components/Pages/Monalisa/Table_48.vue
+++ b/src/components/Pages/Monalisa/Table_48.vue
@@ -1,79 +1,182 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :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" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type2 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
-                css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Keluhan" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
-                    <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                </DxColumn>
-                <DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
-                    <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                    <DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
-                            css-class="custom-table-column" />
-                    </DxColumn>
-                </DxColumn>
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        alignment="center"
+        caption="Jumlah dan Durasi RPT & RCT Keluhan"
+        css-class="custom-table-column"
+      >
+        <DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
+          <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="a"
+              data-type="number"
+              data-field=""
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="b"
+              data-type="number"
+              data-field=""
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="c=a/b"
+              data-type="number"
+              data-field=""
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="d"
+              data-type="number"
+              data-field=""
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="e"
+              data-type="number"
+              data-field=""
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="f=d/e"
+              data-type="number"
+              data-field=""
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+        </DxColumn>
+        <DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
+          <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="a"
+              data-type="number"
+              data-field=""
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="b"
+              data-type="number"
+              data-field=""
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="c=a/b"
+              data-type="number"
+              data-field=""
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="d"
+              data-type="number"
+              data-field=""
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="e"
+              data-type="number"
+              data-field=""
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+          <DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
+            <DxColumn
+              :width="150"
+              alignment="center"
+              caption="f=d/e"
+              data-type="number"
+              data-field=""
+              css-class="custom-table-column"
+            />
+          </DxColumn>
+        </DxColumn>
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -81,7 +184,16 @@ import { ref } from 'vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -98,37 +210,37 @@ const dataDetail = ref<any>()
 const showDetail = ref(false)
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 const monalisaJumlahDurasiRptRctKeluhan = gql`
   query DaftarmonalisaJumlahDurasiRptRctKeluhan(
@@ -164,43 +276,43 @@ const monalisaJumlahDurasiRptRctKeluhan = gql`
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRptRctKeluhan, {
-    bulan: 10,
-    tahun: 2023,
-    regional: '',
-    posko: '',
-    idUid: 0,
-    idUp3: 0
+  bulan: 10,
+  tahun: 2023,
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0
 })
 const filterData = (params: any) => {
-    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
 
-    refetch({
-        regional: regional,
-        posko: posko ? posko.id : 0,
-        idUid: idUid ? idUid.id : 0,
-        idUp3: idUp3 ? idUp3.id : 0,
-        bulan: bulan ? bulan.id : 10,
-        tahun: bulan ? tahun.id : 2023
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            queryResult.data.monalisaJumlahDurasiRptRctKeluhan.forEach((item: any) => {
-                data.value = [
-                    ...data.value,
-                    {
-                        ...item
-                    }
-                ]
-            })
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : 0,
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.monalisaJumlahDurasiRptRctKeluhan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_49.vue b/src/components/Pages/Monalisa/Table_49.vue
index 87fd394..5086a51 100755
--- a/src/components/Pages/Monalisa/Table_49.vue
+++ b/src/components/Pages/Monalisa/Table_49.vue
@@ -1,34 +1,77 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" @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" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type2 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      @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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO"
-                css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="id_keluhan" caption="ID Keluhan" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="jenis_keluhan" caption="Jenis Keluhan"
-                css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah"
-                css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="persen_keluhan" caption="%"
-                css-class="custom-table-column" />
-
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        alignment="center"
+        data-field="id_keluhan"
+        caption="ID Keluhan"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        alignment="center"
+        data-field="jenis_keluhan"
+        caption="Jenis Keluhan"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="jumlah"
+        caption="Jumlah"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="persen_keluhan"
+        caption="%"
+        css-class="custom-table-column"
+      />
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -36,7 +79,16 @@ import { ref } from 'vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -53,37 +105,37 @@ const dataDetail = ref<any>()
 const showDetail = ref(false)
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 const monalisaKeluhanPerJenisKeluhan = gql`
   query DaftarmonalisaKeluhanPerJenisKeluhan(
@@ -110,42 +162,42 @@ const monalisaKeluhanPerJenisKeluhan = gql`
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(monalisaKeluhanPerJenisKeluhan, {
-    bulan: 10,
-    tahun: 2023,
-    regional: '',
-    posko: '',
-    idUid: 0,
-    idUp3: 0
+  bulan: 10,
+  tahun: 2023,
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0
 })
 const filterData = (params: any) => {
-    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
 
-    refetch({
-        regional: regional,
-        posko: posko ? posko.id : 0,
-        idUid: idUid ? idUid.id : 0,
-        idUp3: idUp3 ? idUp3.id : 0,
-        bulan: bulan ? bulan.id : 10,
-        tahun: bulan ? tahun.id : 2023
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            queryResult.data.monalisaKeluhanPerJenisKeluhan.forEach((item: any) => {
-                data.value = [
-                    ...data.value,
-                    {
-                        ...item
-                    }
-                ]
-            })
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : 0,
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.monalisaKeluhanPerJenisKeluhan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_50.vue b/src/components/Pages/Monalisa/Table_50.vue
index e7b5449..4c59409 100755
--- a/src/components/Pages/Monalisa/Table_50.vue
+++ b/src/components/Pages/Monalisa/Table_50.vue
@@ -1,42 +1,104 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" @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" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type2 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      @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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_bulan"
+            data-type="number"
+            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_bulan_n_1"
+            data-type="number"
+            :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_bulan"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_tahun"
+            data-type="number"
+            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jumlah_tahun_n_1"
+            data-type="number"
+            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="persen_tahun"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -44,7 +106,16 @@ import { ref } from 'vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -64,37 +135,37 @@ const tahunSekarang = ref(new Date().getFullYear())
 const bulanSekarang = ref(new Date().getMonth())
 const tahunLalu = ref(tahunSekarang.value - 1)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 const monalisaRekapitulasiLaporUlangKeluhan = gql`
   query DaftarmonalisaRekapitulasiLaporUlangKeluhan(
@@ -124,44 +195,44 @@ const monalisaRekapitulasiLaporUlangKeluhan = gql`
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLaporUlangKeluhan, {
-    bulan: 10,
-    tahun: 2023,
-    regional: '',
-    posko: '',
-    idUid: 0,
-    idUp3: 0
+  bulan: 10,
+  tahun: 2023,
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0
 })
 const filterData = (params: any) => {
-    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
-    bulanSekarang.value = bulan.id;
-    tahunSekarang.value = tahun.id;
-    tahunLalu.value = tahun.id - 1;
-    refetch({
-        regional: regional,
-        posko: posko ? posko.id : 0,
-        idUid: idUid ? idUid.id : 0,
-        idUp3: idUp3 ? idUp3.id : 0,
-        bulan: bulan ? bulan.id : 10,
-        tahun: bulan ? tahun.id : 2023
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            queryResult.data.monalisaRekapitulasiLaporUlangKeluhan.forEach((item: any) => {
-                data.value = [
-                    ...data.value,
-                    {
-                        ...item
-                    }
-                ]
-            })
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+  bulanSekarang.value = bulan.id
+  tahunSekarang.value = tahun.id
+  tahunLalu.value = tahun.id - 1
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : 0,
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.monalisaRekapitulasiLaporUlangKeluhan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_51.vue b/src/components/Pages/Monalisa/Table_51.vue
index cb7aca4..5e1d4ad 100755
--- a/src/components/Pages/Monalisa/Table_51.vue
+++ b/src/components/Pages/Monalisa/Table_51.vue
@@ -1,29 +1,73 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type2 @update:filters="(value) => filters = value" />
+    <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      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="onSelectionChanged"
+      @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" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :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" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
+      <DxColumn
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
       <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="keluhan" data-type="number" caption="Keluhan"
-          css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="informasi" data-type="number" caption="Informasi"
-          css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="keluhan"
+          data-type="number"
+          caption="Keluhan"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="informasi"
+          data-type="number"
+          caption="Informasi"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
       </DxColumn>
     </DxDataGrid>
   </div>
diff --git a/src/components/Pages/Monalisa/Table_52.vue b/src/components/Pages/Monalisa/Table_52.vue
index ca61c36..d7bbf21 100755
--- a/src/components/Pages/Monalisa/Table_52.vue
+++ b/src/components/Pages/Monalisa/Table_52.vue
@@ -1,90 +1,255 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :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" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type2 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
-                css-class="custom-table-column" />
-            <DxColumn alignment="center" :caption="`${getMonthName(bulanSekarang - 1)} ${tahunSekarang}`"
-                css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number"
-                    caption="Keluhan" css-class="custom-table-column" />
-                <DxColumn :width="120" alignment="center" data-field="gangguan_bulan_lalu" data-type="number"
-                    caption="Gangguan" css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_lalu" data-type="number"
-                        caption="Keluhan" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_lalu" data-type="number"
-                        caption="Gangguan" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="total_bulan_lalu" data-type="number"
-                        caption="Total" css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
-                    data-field="total_komplain_bulan_lalu" data-type="number" />
-            </DxColumn>
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        alignment="center"
+        :caption="`${getMonthName(bulanSekarang - 1)} ${tahunSekarang}`"
+        css-class="custom-table-column"
+      >
+        <DxColumn
+          :width="120"
+          alignment="center"
+          data-field="keluhan_bulan_lalu"
+          data-type="number"
+          caption="Keluhan"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="120"
+          alignment="center"
+          data-field="gangguan_bulan_lalu"
+          data-type="number"
+          caption="Gangguan"
+          css-class="custom-table-column"
+        />
+        <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="informasi_keluhan_bulan_lalu"
+            data-type="number"
+            caption="Keluhan"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="informasi_gangguan_bulan_lalu"
+            data-type="number"
+            caption="Gangguan"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_bulan_lalu"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn
+          alignment="center"
+          caption="Total Komplain"
+          css-class="custom-table-column"
+          data-field="total_komplain_bulan_lalu"
+          data-type="number"
+        />
+      </DxColumn>
 
-            <DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_ini" data-type="number"
-                    caption="Keluhan" css-class="custom-table-column" />
-                <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number"
-                    caption="Gangguan" css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_ini" data-type="number"
-                        caption="Keluhan" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_ini" data-type="number"
-                        caption="Gangguan" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="total_bulan_ini" data-type="number"
-                        caption="Total" css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
-                    data-field="total_komplain_bulan_ini" data-type="number" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="delta_penurunan_keluhan" data-type="number"
-                    caption="Keluhan" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="delta_penurunan_gangguan" data-type="number"
-                    caption="Gangguan" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="delta_penurunan_informasi" data-type="number"
-                    caption="Informasi" css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_keluhan" data-type="number"
-                    caption="Keluhan" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_gangguan" data-type="number"
-                    caption="Gangguan" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_informasi" data-type="number"
-                    caption="Informasi" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_total" data-type="number"
-                    caption="% Total" css-class="custom-table-column" />
-            </DxColumn>
-
-        </DxDataGrid>
-    </div>
+      <DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column">
+        <DxColumn
+          :width="120"
+          alignment="center"
+          data-field="keluhan_bulan_ini"
+          data-type="number"
+          caption="Keluhan"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="120"
+          alignment="center"
+          data-field="keluhan_bulan_lalu"
+          data-type="number"
+          caption="Gangguan"
+          css-class="custom-table-column"
+        />
+        <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="informasi_keluhan_bulan_ini"
+            data-type="number"
+            caption="Keluhan"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="informasi_gangguan_bulan_ini"
+            data-type="number"
+            caption="Gangguan"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_bulan_ini"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn
+          alignment="center"
+          caption="Total Komplain"
+          css-class="custom-table-column"
+          data-field="total_komplain_bulan_ini"
+          data-type="number"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="delta_penurunan_keluhan"
+          data-type="number"
+          caption="Keluhan"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="delta_penurunan_gangguan"
+          data-type="number"
+          caption="Gangguan"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="delta_penurunan_informasi"
+          data-type="number"
+          caption="Informasi"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="persen_penurunan_keluhan"
+          data-type="number"
+          caption="Keluhan"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="persen_penurunan_gangguan"
+          data-type="number"
+          caption="Gangguan"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="persen_penurunan_informasi"
+          data-type="number"
+          caption="Informasi"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="persen_penurunan_total"
+          data-type="number"
+          caption="% Total"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -92,7 +257,16 @@ import { ref } from 'vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -111,43 +285,43 @@ const showDetail = ref(false)
 const tahunSekarang = ref(new Date().getFullYear())
 const bulanSekarang = ref(new Date().getMonth())
 if (bulanSekarang.value - 1 == 0) {
-    let bulanLalu = 12
-    let tahunLalu = tahunSekarang.value - 1
+  let bulanLalu = 12
+  let tahunLalu = tahunSekarang.value - 1
 } else {
-    let bulanLalu = bulanSekarang.value - 1
-    let tahunLalu = tahunSekarang.value
+  let bulanLalu = bulanSekarang.value - 1
+  let tahunLalu = tahunSekarang.value
 }
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 const penurunanJumlahKomplainBulanan = gql`
   query DaftarpenurunanJumlahKomplainBulanan(
@@ -166,66 +340,66 @@ const penurunanJumlahKomplainBulanan = gql`
       bulan: $bulan
       tahun: $tahun
     ) {
-        delta_penurunan_gangguan
-        delta_penurunan_informasi
-        delta_penurunan_keluhan
-        gangguan_bulan_ini
-        gangguan_bulan_lalu
-        informasi_gangguan_bulan_ini
-        informasi_gangguan_bulan_lalu
-        informasi_keluhan_bulan_ini
-        informasi_keluhan_bulan_lalu
-        keluhan_bulan_ini
-        keluhan_bulan_lalu
-        nama_posko
-        persen_penurunan_gangguan
-        persen_penurunan_informasi
-        persen_penurunan_keluhan
-        persen_penurunan_total
-        total_bulan_ini
-        total_bulan_lalu
-        total_komplain_bulan_ini
-        total_komplain_bulan_lalu
+      delta_penurunan_gangguan
+      delta_penurunan_informasi
+      delta_penurunan_keluhan
+      gangguan_bulan_ini
+      gangguan_bulan_lalu
+      informasi_gangguan_bulan_ini
+      informasi_gangguan_bulan_lalu
+      informasi_keluhan_bulan_ini
+      informasi_keluhan_bulan_lalu
+      keluhan_bulan_ini
+      keluhan_bulan_lalu
+      nama_posko
+      persen_penurunan_gangguan
+      persen_penurunan_informasi
+      persen_penurunan_keluhan
+      persen_penurunan_total
+      total_bulan_ini
+      total_bulan_lalu
+      total_komplain_bulan_ini
+      total_komplain_bulan_lalu
     }
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(penurunanJumlahKomplainBulanan, {
-    regional: '',
-    posko: '',
-    idUid: 0,
-    idUp3: 0,
-    bulan: 10,
-    tahun: 2023
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
 })
 const filterData = (params: any) => {
-    const { regional, posko, idUid, idUp3, bulan, tahun } = params
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
 
-    refetch({
-        regional: regional,
-        posko: posko ? posko.id : 0,
-        idUid: idUid ? idUid.id : 0,
-        idUp3: idUp3 ? idUp3.id : 0,
-        bulan: bulan ? bulan.id : 10,
-        tahun: bulan ? tahun.id : 2023
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            queryResult.data.penurunanJumlahKomplainBulanan.forEach((item: any) => {
-                data.value = [
-                    ...data.value,
-                    {
-                        ...item
-                    }
-                ]
-            })
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : 0,
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.penurunanJumlahKomplainBulanan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_53.vue b/src/components/Pages/Monalisa/Table_53.vue
index d883525..2d93641 100755
--- a/src/components/Pages/Monalisa/Table_53.vue
+++ b/src/components/Pages/Monalisa/Table_53.vue
@@ -1,48 +1,124 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type2 @update:filters="(value) => filters = value" />
+    <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :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" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :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" caption="Periode: Februari,2020" css-class="custom-table-column">
-        <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="170"
+          alignment="center"
+          data-field="nama_posko"
+          caption="Nama Unit"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
-        <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number"
-            caption="Feb 2020" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number"
-            caption="SLA (Menit)" css-class="custom-table-column" />
+        <DxColumn
+          alignment="center"
+          caption="Rata-Rata RCT Gangguan"
+          css-class="custom-table-column"
+        >
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rata_rct_gangguan_bulan"
+            data-type="number"
+            caption="Feb 2020"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rata_rct_gangguan_sla"
+            data-type="number"
+            caption="SLA (Menit)"
+            css-class="custom-table-column"
+          />
         </DxColumn>
-        <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number"
-            caption="Feb 2020" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number"
-            caption="SLA (Jam)" css-class="custom-table-column" />
+        <DxColumn
+          alignment="center"
+          caption="Rata-Rata RCT Keluhan"
+          css-class="custom-table-column"
+        >
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rata_rct_keluhan_bulan"
+            data-type="number"
+            caption="Feb 2020"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rata_rct_keluhan_sla"
+            data-type="number"
+            caption="SLA (Jam)"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
-          css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="aging_komplain_gangguan"
+          data-type="number"
+          caption="G"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="aging_komplain_keluhan"
+          data-type="number"
+          caption="K"
+          css-class="custom-table-column"
+        />
       </DxColumn>
-      <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number"
-        caption="% Rata-Rata Aging Complains" css-class="custom-table-column" />
-
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="persen_rata_aging_komplain"
+        data-type="number"
+        caption="% Rata-Rata Aging Complains"
+        css-class="custom-table-column"
+      />
     </DxDataGrid>
   </div>
 </template>
@@ -53,7 +129,16 @@ import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -78,7 +163,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-      indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -89,7 +174,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-      autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -121,14 +206,14 @@ const agingComplaintBulanan = gql`
       bulan: $bulan
       tahun: $tahun
     ) {
-        aging_komplain_gangguan
-        aging_komplain_keluhan
-        nama_posko
-        persen_rata_aging_komplain
-        rata_rct_gangguan_bulan
-        rata_rct_gangguan_sla
-        rata_rct_keluhan_bulan
-        rata_rct_keluhan_sla
+      aging_komplain_gangguan
+      aging_komplain_keluhan
+      nama_posko
+      persen_rata_aging_komplain
+      rata_rct_gangguan_bulan
+      rata_rct_gangguan_sla
+      rata_rct_keluhan_bulan
+      rata_rct_keluhan_sla
     }
   }
 `
@@ -171,4 +256,4 @@ const filterData = (params: any) => {
   })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_54.vue b/src/components/Pages/Monalisa/Table_54.vue
index 9a8707e..c4a56cc 100755
--- a/src/components/Pages/Monalisa/Table_54.vue
+++ b/src/components/Pages/Monalisa/Table_54.vue
@@ -1,38 +1,94 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type2 @update:filters="(value) => filters = value" />
+    <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :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" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :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" caption="Periode: Februari,2020" css-class="custom-table-column">
-        <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="170"
+          alignment="center"
+          data-field="nama_posko"
+          caption="Nama Unit"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
-          css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number"
-          caption="Tidak Terencana" css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="ens_terencana"
+          data-type="number"
+          caption="Terencana"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="ens_tidak_terencana"
+          data-type="number"
+          caption="Tidak Terencana"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="ens_bencana_alam"
+          data-type="number"
+          caption="Bencana Alam"
+          css-class="custom-table-column"
+        />
       </DxColumn>
-      <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
-        css-class="custom-table-column" />
-      <DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
-        css-class="custom-table-column" />
-
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="total"
+        data-type="number"
+        caption="Total"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="kpi_ens"
+        data-type="number"
+        caption="KPI ENS"
+        css-class="custom-table-column"
+      />
     </DxDataGrid>
   </div>
 </template>
@@ -42,7 +98,16 @@ import { ref } from 'vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -64,7 +129,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-      indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -75,7 +140,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-      autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -107,12 +172,12 @@ const agingComplaintBulanan = gql`
       bulan: $bulan
       tahun: $tahun
     ) {
-        ens_bencana_alam
-ens_terencana
-ens_tidak_terencana
-kpi_ens
-nama_posko
-total
+      ens_bencana_alam
+      ens_terencana
+      ens_tidak_terencana
+      kpi_ens
+      nama_posko
+      total
     }
   }
 `
@@ -155,4 +220,4 @@ const filterData = (params: any) => {
   })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_55.vue b/src/components/Pages/Monalisa/Table_55.vue
index 17a09f4..8a87a6a 100755
--- a/src/components/Pages/Monalisa/Table_55.vue
+++ b/src/components/Pages/Monalisa/Table_55.vue
@@ -1,40 +1,100 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type2 @update:filters="(value) => filters = value" />
+    <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      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="onSelectionChanged"
+      :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" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :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 :min-width="250" alignment="center" data-field="nama_posko" caption="Nama Unit"
-        css-class="custom-table-column" />
-      <DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
+      <DxColumn
+        :min-width="250"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        alignment="center"
+        caption="Kepatuhan dan Akurasi APKT"
+        css-class="custom-table-column"
+      >
         <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan"
-            data-type="number" caption="Jan 2020" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total"
-            data-type="number" caption="Total Gangguan" css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="kepatuhan_akurasi_gangguan_berulang_bulan"
+            data-type="number"
+            caption="Jan 2020"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="kepatuhan_akurasi_gangguan_berulang_total"
+            data-type="number"
+            caption="Total Gangguan"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
-            data-type="number" caption="Jan 2020" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total"
-            data-type="number" caption="Total Keluhan" css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
+            data-type="number"
+            caption="Jan 2020"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="kepatuhan_akurasi_keluhan_berulang_total"
+            data-type="number"
+            caption="Total Keluhan"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
-      <DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number"
-        caption="Komplain Pelanggan %" css-class="custom-table-column" />
-
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="persen_komplain_pelanggan"
+        data-type="number"
+        caption="Komplain Pelanggan %"
+        css-class="custom-table-column"
+      />
     </DxDataGrid>
   </div>
 </template>
@@ -44,7 +104,16 @@ import { ref } from 'vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -66,7 +135,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-      indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -77,7 +146,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-      autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -109,12 +178,12 @@ const kepatuhandanAkurasiDalamPelaporanBulanan = gql`
       bulan: $bulan
       tahun: $tahun
     ) {
-        kepatuhan_akurasi_gangguan_berulang_bulan
-        kepatuhan_akurasi_gangguan_berulang_total
-        kepatuhan_akurasi_keluhan_berulang_bulan
-        kepatuhan_akurasi_keluhan_berulang_total
-        nama_posko
-        persen_komplain_pelanggan
+      kepatuhan_akurasi_gangguan_berulang_bulan
+      kepatuhan_akurasi_gangguan_berulang_total
+      kepatuhan_akurasi_keluhan_berulang_bulan
+      kepatuhan_akurasi_keluhan_berulang_total
+      nama_posko
+      persen_komplain_pelanggan
     }
   }
 `
@@ -157,4 +226,4 @@ const filterData = (params: any) => {
   })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_56.vue b/src/components/Pages/Monalisa/Table_56.vue
index 4199102..2a6a069 100755
--- a/src/components/Pages/Monalisa/Table_56.vue
+++ b/src/components/Pages/Monalisa/Table_56.vue
@@ -1,45 +1,120 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type2 @update:filters="(value) => filters = value" />
+    <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      @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" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :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" caption="Periode: Februari,2020" css-class="custom-table-column">
-        <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
+        <DxColumn
+          alignment="center"
+          data-field="nama_posko"
+          caption="Nama Unit"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
-        <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number"
-            caption="Feb 2020" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number"
-            caption="SLA (Menit)" css-class="custom-table-column" />
+        <DxColumn
+          alignment="center"
+          caption="Rata-Rata RCT Gangguan"
+          css-class="custom-table-column"
+        >
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rata_rct_gangguan_bulan"
+            data-type="number"
+            caption="Feb 2020"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rata_rct_gangguan_sla"
+            data-type="number"
+            caption="SLA (Menit)"
+            css-class="custom-table-column"
+          />
         </DxColumn>
-        <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number"
-            caption="Feb 2020" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number"
-            caption="SLA (Jam)" css-class="custom-table-column" />
+        <DxColumn
+          alignment="center"
+          caption="Rata-Rata RCT Keluhan"
+          css-class="custom-table-column"
+        >
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rata_rct_keluhan_bulan"
+            data-type="number"
+            caption="Feb 2020"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rata_rct_keluhan_sla"
+            data-type="number"
+            caption="SLA (Jam)"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
-          css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="aging_komplain_gangguan"
+          data-type="number"
+          caption="G"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="aging_komplain_keluhan"
+          data-type="number"
+          caption="K"
+          css-class="custom-table-column"
+        />
       </DxColumn>
-      <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number"
-        caption="% Rata-Rata Aging Complains" css-class="custom-table-column" />
-
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="persen_rata_aging_komplain"
+        data-type="number"
+        caption="% Rata-Rata Aging Complains"
+        css-class="custom-table-column"
+      />
     </DxDataGrid>
   </div>
 </template>
@@ -49,7 +124,16 @@ import { ref } from 'vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -71,7 +155,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-      indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -82,7 +166,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-      autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -114,26 +198,26 @@ const penurunanJumlahKomplainKumulatif = gql`
       bulan: $bulan
       tahun: $tahun
     ) {
-        delta_penurunan_gangguan
-        delta_penurunan_informasi
-        delta_penurunan_keluhan
-        gangguan_bulan_ini
-        gangguan_bulan_lalu
-        informasi_gangguan_bulan_ini
-        informasi_gangguan_bulan_lalu
-        informasi_keluhan_bulan_ini
-        informasi_keluhan_bulan_lalu
-        keluhan_bulan_ini
-        keluhan_bulan_lalu
-        nama_posko
-        persen_penurunan_gangguan
-        persen_penurunan_informasi
-        persen_penurunan_keluhan
-        persen_penurunan_total
-        total_bulan_ini
-        total_bulan_lalu
-        total_komplain_bulan_ini
-        total_komplain_bulan_lalu
+      delta_penurunan_gangguan
+      delta_penurunan_informasi
+      delta_penurunan_keluhan
+      gangguan_bulan_ini
+      gangguan_bulan_lalu
+      informasi_gangguan_bulan_ini
+      informasi_gangguan_bulan_lalu
+      informasi_keluhan_bulan_ini
+      informasi_keluhan_bulan_lalu
+      keluhan_bulan_ini
+      keluhan_bulan_lalu
+      nama_posko
+      persen_penurunan_gangguan
+      persen_penurunan_informasi
+      persen_penurunan_keluhan
+      persen_penurunan_total
+      total_bulan_ini
+      total_bulan_lalu
+      total_komplain_bulan_ini
+      total_komplain_bulan_lalu
     }
   }
 `
@@ -176,4 +260,4 @@ const filterData = (params: any) => {
   })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_57.vue b/src/components/Pages/Monalisa/Table_57.vue
index 3d0d10a..6f17c45 100755
--- a/src/components/Pages/Monalisa/Table_57.vue
+++ b/src/components/Pages/Monalisa/Table_57.vue
@@ -1,46 +1,121 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type2 @update:filters="(value) => filters = value" />
+    <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      @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" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :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" caption="Periode: Februari,2020" css-class="custom-table-column">
-        <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
+        <DxColumn
+          alignment="center"
+          data-field="nama_posko"
+          caption="Nama Unit"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Aging Complains (Kums)" css-class="custom-table-column">
-        <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number"
-            caption="Feb 2020" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number"
-            caption="SLA (Menit)" css-class="custom-table-column" />
+        <DxColumn
+          alignment="center"
+          caption="Rata-Rata RCT Gangguan"
+          css-class="custom-table-column"
+        >
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rata_rct_gangguan_bulan"
+            data-type="number"
+            caption="Feb 2020"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rata_rct_gangguan_sla"
+            data-type="number"
+            caption="SLA (Menit)"
+            css-class="custom-table-column"
+          />
         </DxColumn>
-        <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number"
-            caption="Feb 2020" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number"
-            caption="SLA (Jam)" css-class="custom-table-column" />
+        <DxColumn
+          alignment="center"
+          caption="Rata-Rata RCT Keluhan"
+          css-class="custom-table-column"
+        >
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rata_rct_keluhan_bulan"
+            data-type="number"
+            caption="Feb 2020"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rata_rct_keluhan_sla"
+            data-type="number"
+            caption="SLA (Jam)"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
-          css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="aging_komplain_gangguan"
+          data-type="number"
+          caption="G"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="aging_komplain_keluhan"
+          data-type="number"
+          caption="K"
+          css-class="custom-table-column"
+        />
       </DxColumn>
-      <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number"
-        caption="% Rata-Rata Aging Complains" css-class="custom-table-column" />
-
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="persen_rata_aging_komplain"
+        data-type="number"
+        caption="% Rata-Rata Aging Complains"
+        css-class="custom-table-column"
+      />
     </DxDataGrid>
   </div>
 </template>
@@ -50,7 +125,16 @@ import { ref } from 'vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -72,7 +156,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-      indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -83,7 +167,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-      autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -115,14 +199,14 @@ const agingComplaintKumulatif = gql`
       bulan: $bulan
       tahun: $tahun
     ) {
-        aging_komplain_gangguan
-        aging_komplain_keluhan
-        nama_posko
-        persen_rata_aging_komplain
-        rata_rct_gangguan_bulan
-        rata_rct_gangguan_sla
-        rata_rct_keluhan_bulan
-        rata_rct_keluhan_sla
+      aging_komplain_gangguan
+      aging_komplain_keluhan
+      nama_posko
+      persen_rata_aging_komplain
+      rata_rct_gangguan_bulan
+      rata_rct_gangguan_sla
+      rata_rct_keluhan_bulan
+      rata_rct_keluhan_sla
     }
   }
 `
@@ -165,4 +249,4 @@ const filterData = (params: any) => {
   })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_58.vue b/src/components/Pages/Monalisa/Table_58.vue
index a7bcb39..6fdfe0d 100755
--- a/src/components/Pages/Monalisa/Table_58.vue
+++ b/src/components/Pages/Monalisa/Table_58.vue
@@ -1,38 +1,93 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type2 @update:filters="(value) => filters = value" />
+    <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-      :word-wrap-enabled="true">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :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" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :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" caption="Periode: Februari,2020" css-class="custom-table-column">
-        <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="170"
+          alignment="center"
+          data-field="nama_posko"
+          caption="Nama Unit"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
-          css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number"
-          caption="Tidak Terencana" css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="ens_terencana"
+          data-type="number"
+          caption="Terencana"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="ens_tidak_terencana"
+          data-type="number"
+          caption="Tidak Terencana"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="ens_bencana_alam"
+          data-type="number"
+          caption="Bencana Alam"
+          css-class="custom-table-column"
+        />
       </DxColumn>
-      <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
-        css-class="custom-table-column" />
-      <DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
-        css-class="custom-table-column" />
-
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="total"
+        data-type="number"
+        caption="Total"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="kpi_ens"
+        data-type="number"
+        caption="KPI ENS"
+        css-class="custom-table-column"
+      />
     </DxDataGrid>
   </div>
 </template>
@@ -42,7 +97,16 @@ import { ref } from 'vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -65,7 +129,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-      indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -76,7 +140,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-      autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -108,23 +172,26 @@ const kepatuhandanAkurasiDalamPelaporanKumulatif = gql`
       bulan: $bulan
       tahun: $tahun
     ) {
-        kepatuhan_akurasi_gangguan_berulang_bulan
-        kepatuhan_akurasi_gangguan_berulang_total
-        kepatuhan_akurasi_keluhan_berulang_bulan
-        kepatuhan_akurasi_keluhan_berulang_total
-        nama_posko
-        persen_komplain_pelanggan
+      kepatuhan_akurasi_gangguan_berulang_bulan
+      kepatuhan_akurasi_gangguan_berulang_total
+      kepatuhan_akurasi_keluhan_berulang_bulan
+      kepatuhan_akurasi_keluhan_berulang_total
+      nama_posko
+      persen_komplain_pelanggan
     }
   }
 `
-const { onResult, onError, loading, refetch } = useQuery(kepatuhandanAkurasiDalamPelaporanKumulatif, {
-  regional: '',
-  posko: '',
-  idUid: 0,
-  idUp3: 0,
-  bulan: 10,
-  tahun: 2023
-})
+const { onResult, onError, loading, refetch } = useQuery(
+  kepatuhandanAkurasiDalamPelaporanKumulatif,
+  {
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023
+  }
+)
 const filterData = (params: any) => {
   const { regional, posko, idUid, idUp3, bulan, tahun } = params
 
@@ -156,4 +223,4 @@ const filterData = (params: any) => {
   })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_59.vue b/src/components/Pages/Monalisa/Table_59.vue
index d420436..c652df5 100755
--- a/src/components/Pages/Monalisa/Table_59.vue
+++ b/src/components/Pages/Monalisa/Table_59.vue
@@ -1,38 +1,97 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type2 @update:filters="(value) => filters = value" />
+    <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      @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" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :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" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-      <DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
+      <DxColumn
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        alignment="center"
+        caption="Kepatuhan dan Akurasi APKT"
+        css-class="custom-table-column"
+      >
         <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan"
-            data-type="number" caption="Jan 2020" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total"
-            data-type="number" caption="Total Gangguan" css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="kepatuhan_akurasi_gangguan_berulang_bulan"
+            data-type="number"
+            caption="Jan 2020"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="kepatuhan_akurasi_gangguan_berulang_total"
+            data-type="number"
+            caption="Total Gangguan"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
-            data-type="number" caption="Jan 2020" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total"
-            data-type="number" caption="Total Keluhan" css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
+            data-type="number"
+            caption="Jan 2020"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="kepatuhan_akurasi_keluhan_berulang_total"
+            data-type="number"
+            caption="Total Keluhan"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
-      <DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number"
-        caption="Komplain Pelanggan %" css-class="custom-table-column" />
-
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="persen_komplain_pelanggan"
+        data-type="number"
+        caption="Komplain Pelanggan %"
+        css-class="custom-table-column"
+      />
     </DxDataGrid>
   </div>
 </template>
@@ -42,7 +101,16 @@ import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -65,7 +133,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-      indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -76,7 +144,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-      autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -108,12 +176,12 @@ const kepatuhandanAkurasiDalamPelaporanBulanan = gql`
       bulan: $bulan
       tahun: $tahun
     ) {
-        kepatuhan_akurasi_gangguan_berulang_bulan
-        kepatuhan_akurasi_gangguan_berulang_total
-        kepatuhan_akurasi_keluhan_berulang_bulan
-        kepatuhan_akurasi_keluhan_berulang_total
-        nama_posko
-        persen_komplain_pelanggan
+      kepatuhan_akurasi_gangguan_berulang_bulan
+      kepatuhan_akurasi_gangguan_berulang_total
+      kepatuhan_akurasi_keluhan_berulang_bulan
+      kepatuhan_akurasi_keluhan_berulang_total
+      nama_posko
+      persen_komplain_pelanggan
     }
   }
 `
@@ -156,4 +224,4 @@ const filterData = (params: any) => {
   })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/PencarianData/Table_71.vue b/src/components/Pages/PencarianData/Table_71.vue
index 7207e29..18e8c06 100755
--- a/src/components/Pages/PencarianData/Table_71.vue
+++ b/src/components/Pages/PencarianData/Table_71.vue
@@ -1,50 +1,157 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type15 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
-            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-                :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type15 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed=""
+      :column-width="100"
+      @exporting=""
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
 
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
-                caption="No" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="No. Laporan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
-                caption="IDPEL/NO METER" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
-                caption="Nama Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
-                caption="Alamat Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
-                caption="No Tlp Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Status" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="UI Dist." />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="UP 3" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko/ULP" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Petugas" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
-                caption="Keterangan DLPD" />
-
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        data-field=""
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="No. Laporan"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Tgl Lapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="IDPEL/NO METER"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Nama Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Alamat Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="No Tlp Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Status"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="UI Dist."
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="UP 3"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Posko/ULP"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Petugas"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Keterangan DLPD"
+      />
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
-import { Type15 } from '@/components/Form/FiltersType';
-import Filters from '@/components/Form/Filters.vue';
+import {
+  DxColumn,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
+import { Type15 } from '@/components/Form/FiltersType'
+import Filters from '@/components/Form/Filters.vue'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -53,10 +160,10 @@ const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 const loading = ref(false)
-const filters = ref();
+const filters = ref()
 const filterData = async (filters: any) => {
-    loading.value = true
-    await new Promise((resolve) => setTimeout(resolve, 1000))
-    loading.value = false
+  loading.value = true
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  loading.value = false
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Transaksi/Table_70.vue b/src/components/Pages/Transaksi/Table_70.vue
index 3e5fae8..9c635a9 100755
--- a/src/components/Pages/Transaksi/Table_70.vue
+++ b/src/components/Pages/Transaksi/Table_70.vue
@@ -1,43 +1,144 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type17 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true" @row-prepared="onRowPrepared">
-            <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type17 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+      @row-prepared="onRowPrepared"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="No.Lapor" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tipe Isu" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Unit" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="No.Telp" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Permasalahan"
-                css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Deskripsi" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Buat" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Lap.Ulang" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Ket.Lap.Ulang"
-                css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi" css-class="custom-table-column" />
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="No.Lapor"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Tipe Isu"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Nama"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="No.Telp"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Permasalahan"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Deskripsi"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Tgl Buat"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Lap.Ulang"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Ket.Lap.Ulang"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Status"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Durasi"
+        css-class="custom-table-column"
+      />
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -53,98 +154,98 @@ const dataDetail = ref<any>()
 const showDetail = ref(false)
 const loading = ref(false)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 const onRowPrepared = (e: any) => {
-    if (e.rowType === "data") {
-        if (e.data.Speed > e.data.SpeedLimit) {
-            // e.cellElement.style.cssText = "color: white; background-color: red";
-            // or
-            e.rowElement.classList.add("my-class");
-            // To override alternation color
-            // e.rowElement.className = e.rowElement.className.replace("dx-row-alt", "");
-        }
+  if (e.rowType === 'data') {
+    if (e.data.Speed > e.data.SpeedLimit) {
+      // e.cellElement.style.cssText = "color: white; background-color: red";
+      // or
+      e.rowElement.classList.add('my-class')
+      // To override alternation color
+      // e.rowElement.className = e.rowElement.className.replace("dx-row-alt", "");
     }
+  }
 }
 
 const data = [
-    {
-        noLapor: 'K2316081000039',
-        tipeIsu: 'PDPB',
-        nama: 'BAPAK HAIRUL',
-        unit: 'ULP BARABAI',
-        noTelp: '081350000000',
-        permasalahan: 'MCB KWH SERING TURUN',
-        deskripsi: '-',
-        tglBuat: '10/08/2016 07:18:17',
-        lapUlang: 0,
-        ketLapUlang: '-',
-        status: 'Dalam Proses Manager Unit',
-        durasi: '2638 01:59:17'
-    },
-    {
-        noLapor: 'K2316081000039',
-        tipeIsu: 'PDPB',
-        nama: 'BAPAK HAIRUL',
-        unit: 'ULP BARABAI',
-        noTelp: '081350000000',
-        permasalahan: 'MCB KWH SERING TURUN',
-        deskripsi: '-',
-        tglBuat: '10/08/2016 07:18:17',
-        lapUlang: 0,
-        ketLapUlang: '-',
-        status: 'Dalam Proses Manager Unit',
-        durasi: '2638 01:59:17'
-    },
-    {
-        noLapor: 'K2316081000039',
-        tipeIsu: 'PDPB',
-        nama: 'BAPAK HAIRUL',
-        unit: 'ULP BARABAI',
-        noTelp: '081350000000',
-        permasalahan: 'MCB KWH SERING TURUN',
-        deskripsi: '-',
-        tglBuat: '10/08/2016 07:18:17',
-        lapUlang: 0,
-        ketLapUlang: '-',
-        status: 'Dalam Proses Manager Unit',
-        durasi: '2638 01:59:17'
-    }
+  {
+    noLapor: 'K2316081000039',
+    tipeIsu: 'PDPB',
+    nama: 'BAPAK HAIRUL',
+    unit: 'ULP BARABAI',
+    noTelp: '081350000000',
+    permasalahan: 'MCB KWH SERING TURUN',
+    deskripsi: '-',
+    tglBuat: '10/08/2016 07:18:17',
+    lapUlang: 0,
+    ketLapUlang: '-',
+    status: 'Dalam Proses Manager Unit',
+    durasi: '2638 01:59:17'
+  },
+  {
+    noLapor: 'K2316081000039',
+    tipeIsu: 'PDPB',
+    nama: 'BAPAK HAIRUL',
+    unit: 'ULP BARABAI',
+    noTelp: '081350000000',
+    permasalahan: 'MCB KWH SERING TURUN',
+    deskripsi: '-',
+    tglBuat: '10/08/2016 07:18:17',
+    lapUlang: 0,
+    ketLapUlang: '-',
+    status: 'Dalam Proses Manager Unit',
+    durasi: '2638 01:59:17'
+  },
+  {
+    noLapor: 'K2316081000039',
+    tipeIsu: 'PDPB',
+    nama: 'BAPAK HAIRUL',
+    unit: 'ULP BARABAI',
+    noTelp: '081350000000',
+    permasalahan: 'MCB KWH SERING TURUN',
+    deskripsi: '-',
+    tglBuat: '10/08/2016 07:18:17',
+    lapUlang: 0,
+    ketLapUlang: '-',
+    status: 'Dalam Proses Manager Unit',
+    durasi: '2638 01:59:17'
+  }
 ]
 
-const filters = ref();
+const filters = ref()
 const filterData = (filters: any) => {
-    console.log(filters)
+  console.log(filters)
 }
-</script>
\ No newline at end of file
+</script>