diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index cada6f4..cfef93b 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -3294,6 +3294,11 @@ select {
     font-size: 1.875rem;
     line-height: 2.25rem;
   }
+
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
 }
 
 @media (min-width: 1024px) {
diff --git a/src/components/Navigation/Aside/Aside.vue b/src/components/Navigation/Aside/Aside.vue
index d45994b..9d8a8b3 100644
--- a/src/components/Navigation/Aside/Aside.vue
+++ b/src/components/Navigation/Aside/Aside.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, watch } from 'vue'
-import { useRoute, RouterLink, useRouter } from 'vue-router'
+import { useRoute, RouterLink } from 'vue-router'
 import {
     Dialog,
     DialogPanel,
@@ -12,12 +12,9 @@ import { useMenuStore } from '@/stores/menu'
 import { IconApp, IconBars3 } from '@/utils/icons'
 import AsideMenuSingle from '@/components/Navigation/Aside/AsideMenuSingle.vue'
 import AsideMenuMultiple from '@/components/Navigation/Aside/AsideMenuMultiple.vue'
-import { Bars3BottomLeftIcon } from '@heroicons/vue/20/solid'
-import { splitRoutePath } from '@/utils/texts'
 
 const menu = useMenuStore()
 const route = useRoute()
-const router = useRouter()
 
 watch(route, (to, _) => {
     menu.menuSelected = to.fullPath
diff --git a/src/components/Navigation/Aside/AsideMenuSingle.vue b/src/components/Navigation/Aside/AsideMenuSingle.vue
index 28fea29..a7e886e 100644
--- a/src/components/Navigation/Aside/AsideMenuSingle.vue
+++ b/src/components/Navigation/Aside/AsideMenuSingle.vue
@@ -2,7 +2,7 @@
 import type { MenuItemModel } from '@/types/menu'
 import { IconDotOutline } from '@/utils/icons';
 
-const props = defineProps({
+defineProps({
     item: {
         type: Object as () => MenuItemModel,
         required: true
diff --git a/src/components/Navigation/Header.vue b/src/components/Navigation/Header.vue
index d8796ab..3c4052c 100644
--- a/src/components/Navigation/Header.vue
+++ b/src/components/Navigation/Header.vue
@@ -10,9 +10,6 @@ import {
     MenuItem,
     MenuItems,
 } from '@headlessui/vue'
-import {
-    Bars3BottomLeftIcon
-} from '@heroicons/vue/24/outline'
 import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
 import PictureInitial from '@/components/PictureInitial.vue'
 import { useDialogStore } from '@/stores/dialog'
diff --git a/src/components/Pages/Anomali/Table_61.vue b/src/components/Pages/Anomali/Table_61.vue
new file mode 100644
index 0000000..f31fadc
--- /dev/null
+++ b/src/components/Pages/Anomali/Table_61.vue
@@ -0,0 +1,146 @@
+<template>
+    <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 :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 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="% 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 />
+</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 { 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 { AnomaliTable2 } from '.'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Table_62.vue b/src/components/Pages/Anomali/Table_62.vue
new file mode 100644
index 0000000..39bd6e9
--- /dev/null
+++ b/src/components/Pages/Anomali/Table_62.vue
@@ -0,0 +1,79 @@
+<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 :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>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Table_63.vue b/src/components/Pages/Anomali/Table_63.vue
new file mode 100644
index 0000000..eb7f1e9
--- /dev/null
+++ b/src/components/Pages/Anomali/Table_63.vue
@@ -0,0 +1,114 @@
+<template>
+    <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 :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 Petugas" css-class="custom-table-column">
+            <DxColumn :width="170" alignment="center" data-field="" 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="" 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="" 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="" 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="" 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="f=c/a" 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="g=e+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>
+    </DxDataGrid>
+
+    <AnomaliTable4 />
+</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 { 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 { AnomaliTable4 } from '.'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Table_64.vue b/src/components/Pages/Anomali/Table_64.vue
new file mode 100644
index 0000000..119fa0f
--- /dev/null
+++ b/src/components/Pages/Anomali/Table_64.vue
@@ -0,0 +1,103 @@
+<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"
+        :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 :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 :width="170" alignment="center" data-field="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" data-type="number" caption="g=e+f"
+                    css-class="custom-table-column" />
+            </DxColumn>
+        </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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Table_65.vue b/src/components/Pages/Anomali/Table_65.vue
new file mode 100644
index 0000000..053bcb4
--- /dev/null
+++ b/src/components/Pages/Anomali/Table_65.vue
@@ -0,0 +1,122 @@
+<template>
+    <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 :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 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>
+
+    <AnomaliTable6 />
+</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 { 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 { AnomaliTable6 } from '.'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Table_66.vue b/src/components/Pages/Anomali/Table_66.vue
new file mode 100644
index 0000000..39bd6e9
--- /dev/null
+++ b/src/components/Pages/Anomali/Table_66.vue
@@ -0,0 +1,79 @@
+<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 :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>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/index.ts b/src/components/Pages/Anomali/index.ts
new file mode 100644
index 0000000..eeedd38
--- /dev/null
+++ b/src/components/Pages/Anomali/index.ts
@@ -0,0 +1,6 @@
+export { default as AnomaliTable1 } from '@/components/Pages/Anomali/Table_61.vue'
+export { default as AnomaliTable2 } from '@/components/Pages/Anomali/Table_62.vue'
+export { default as AnomaliTable3 } from '@/components/Pages/Anomali/Table_63.vue'
+export { default as AnomaliTable4 } from '@/components/Pages/Anomali/Table_64.vue'
+export { default as AnomaliTable5 } from '@/components/Pages/Anomali/Table_65.vue'
+export { default as AnomaliTable6 } from '@/components/Pages/Anomali/Table_66.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Cico/Table_60.vue b/src/components/Pages/Cico/Table_60.vue
new file mode 100644
index 0000000..2518b19
--- /dev/null
+++ b/src/components/Pages/Cico/Table_60.vue
@@ -0,0 +1,78 @@
+<template>
+    <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 :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="" caption="User Regu" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="" caption="Personil Yantek"
+                css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="" data-type="number"
+                caption="Jumlah WO Gangguan Individual" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="" data-type="number"
+                caption="Rata-rata Durasi WO Gangguan" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Rata-rata RPT WO Gangguan"
+                css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Rata-rata RCT WO Gangguan"
+                css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Jumlah Wo Penugasan Khusus"
+                css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="" data-type="number"
+                caption="Rata-rata Duarasi WO Penugasan" css-class="custom-table-column" />
+
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Cico/index.ts b/src/components/Pages/Cico/index.ts
new file mode 100644
index 0000000..afe5ed0
--- /dev/null
+++ b/src/components/Pages/Cico/index.ts
@@ -0,0 +1 @@
+export { default as CicoTable1 } from '@/components/Pages/Cico/Table_60.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Ctt/Table_67.vue b/src/components/Pages/Ctt/Table_67.vue
new file mode 100644
index 0000000..13942dd
--- /dev/null
+++ b/src/components/Pages/Ctt/Table_67.vue
@@ -0,0 +1,100 @@
+<template>
+    <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 :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="COMCEN" 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="Total" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" 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="" 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="" 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="" 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="" data-type="number" caption="h"
+                    css-class="custom-table-column" />
+            </DxColumn>
+
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Ctt/index.ts b/src/components/Pages/Ctt/index.ts
new file mode 100644
index 0000000..e93864f
--- /dev/null
+++ b/src/components/Pages/Ctt/index.ts
@@ -0,0 +1 @@
+export { default as CttTable1 } from '@/components/Pages/Ctt/Table_67.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 6bd3302..74b96fb 100644
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -13,7 +13,7 @@
             <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="40" alignment="center" data-field="number" data-type="number"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="number" data-type="number"
                 caption="No" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
                 caption="No Laporan" cell-template="no-laporan" />
diff --git a/src/components/Pages/Gangguan/Table_16.vue b/src/components/Pages/Gangguan/Table_16.vue
index 1b694c6..c459a9c 100644
--- a/src/components/Pages/Gangguan/Table_16.vue
+++ b/src/components/Pages/Gangguan/Table_16.vue
@@ -11,8 +11,8 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="40" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2">
-                <DxColumn :width="40" alignment="center" data-field="" caption="a" 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" data-field="" 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="" caption="b" css-class="custom-table-column" />
diff --git a/src/components/Pages/Gangguan/Table_17.vue b/src/components/Pages/Gangguan/Table_17.vue
index 64ecfc5..5df03f6 100644
--- a/src/components/Pages/Gangguan/Table_17.vue
+++ b/src/components/Pages/Gangguan/Table_17.vue
@@ -11,7 +11,7 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="40" alignment="center" data-field="" caption="NO" data-type="number"
+            <DxColumn :width="50" alignment="center" data-field="" 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" />
diff --git a/src/components/Pages/Gangguan/Table_18.vue b/src/components/Pages/Gangguan/Table_18.vue
index 8d20787..2ffde97 100644
--- a/src/components/Pages/Gangguan/Table_18.vue
+++ b/src/components/Pages/Gangguan/Table_18.vue
@@ -11,7 +11,7 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="40" alignment="center" data-field="" caption="NO" data-type="number"
+            <DxColumn :width="50" alignment="center" data-field="" 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" />
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
index 83e7f26..8815774 100644
--- a/src/components/Pages/Gangguan/Table_2.vue
+++ b/src/components/Pages/Gangguan/Table_2.vue
@@ -11,7 +11,7 @@
             <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="40" alignment="center" data-field="" data-type="number"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
                 caption="No" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index d726112..4fd6384 100644
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -11,7 +11,7 @@
             <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="40" alignment="center" data-field="" data-type="number"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
                 caption="No" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
diff --git a/src/components/Pages/Gangguan/Table_4.vue b/src/components/Pages/Gangguan/Table_4.vue
index 9629c57..caed058 100644
--- a/src/components/Pages/Gangguan/Table_4.vue
+++ b/src/components/Pages/Gangguan/Table_4.vue
@@ -11,7 +11,7 @@
             <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="40" alignment="center" data-field="" data-type="number"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
                 caption="No" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
diff --git a/src/components/Pages/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
index ee62670..e8708fd 100644
--- a/src/components/Pages/Gangguan/Table_5.vue
+++ b/src/components/Pages/Gangguan/Table_5.vue
@@ -11,7 +11,7 @@
             <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="40" alignment="center" data-field="" data-type="number"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
                 caption="No" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
diff --git a/src/components/Pages/Gangguan/Table_6.vue b/src/components/Pages/Gangguan/Table_6.vue
index 26fe216..6db01c6 100644
--- a/src/components/Pages/Gangguan/Table_6.vue
+++ b/src/components/Pages/Gangguan/Table_6.vue
@@ -11,7 +11,7 @@
             <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="40" alignment="center" data-field="" data-type="number"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
                 caption="No" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
diff --git a/src/components/Pages/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
index ee62670..e8708fd 100644
--- a/src/components/Pages/Gangguan/Table_7.vue
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -11,7 +11,7 @@
             <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="40" alignment="center" data-field="" data-type="number"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
                 caption="No" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
diff --git a/src/components/Pages/Gangguan/index.ts b/src/components/Pages/Gangguan/index.ts
index cf7e2bf..7d4027a 100644
--- a/src/components/Pages/Gangguan/index.ts
+++ b/src/components/Pages/Gangguan/index.ts
@@ -1,20 +1,20 @@
-export { default as GangguanTable1 } from './Table_1.vue'
-export { default as GangguanTable2 } from './Table_2.vue'
-export { default as GangguanTable3 } from './Table_3.vue'
-export { default as GangguanTable4 } from './Table_4.vue'
-export { default as GangguanTable5 } from './Table_5.vue'
-export { default as GangguanTable6 } from './Table_6.vue'
-export { default as GangguanTable7 } from './Table_7.vue'
-export { default as GangguanTable8 } from './Table_8.vue'
-export { default as GangguanTable9 } from './Table_9.vue'
-export { default as GangguanTable10 } from './Table_10.vue'
-export { default as GangguanTable11 } from './Table_11.vue'
-export { default as GangguanTable12 } from './Table_12.vue'
-export { default as GangguanTable13 } from './Table_13.vue'
-export { default as GangguanTable14 } from './Table_14.vue'
-export { default as GangguanTable15 } from './Table_15.vue'
-export { default as GangguanTable16 } from './Table_16.vue'
-export { default as GangguanTable17 } from './Table_17.vue'
-export { default as GangguanTable18 } from './Table_18.vue'
-export { default as GangguanTable19 } from './Table_19.vue'
-export { default as GangguanTable20 } from './Table_20.vue'
\ No newline at end of file
+export { default as GangguanTable1 } from '@/components/Pages/Gangguan/Table_1.vue'
+export { default as GangguanTable2 } from '@/components/Pages/Gangguan/Table_2.vue'
+export { default as GangguanTable3 } from '@/components/Pages/Gangguan/Table_3.vue'
+export { default as GangguanTable4 } from '@/components/Pages/Gangguan/Table_4.vue'
+export { default as GangguanTable5 } from '@/components/Pages/Gangguan/Table_5.vue'
+export { default as GangguanTable6 } from '@/components/Pages/Gangguan/Table_6.vue'
+export { default as GangguanTable7 } from '@/components/Pages/Gangguan/Table_7.vue'
+export { default as GangguanTable8 } from '@/components/Pages/Gangguan/Table_8.vue'
+export { default as GangguanTable9 } from '@/components/Pages/Gangguan/Table_9.vue'
+export { default as GangguanTable10 } from '@/components/Pages/Gangguan/Table_10.vue'
+export { default as GangguanTable11 } from '@/components/Pages/Gangguan/Table_11.vue'
+export { default as GangguanTable12 } from '@/components/Pages/Gangguan/Table_12.vue'
+export { default as GangguanTable13 } from '@/components/Pages/Gangguan/Table_13.vue'
+export { default as GangguanTable14 } from '@/components/Pages/Gangguan/Table_14.vue'
+export { default as GangguanTable15 } from '@/components/Pages/Gangguan/Table_15.vue'
+export { default as GangguanTable16 } from '@/components/Pages/Gangguan/Table_16.vue'
+export { default as GangguanTable17 } from '@/components/Pages/Gangguan/Table_17.vue'
+export { default as GangguanTable18 } from '@/components/Pages/Gangguan/Table_18.vue'
+export { default as GangguanTable19 } from '@/components/Pages/Gangguan/Table_19.vue'
+export { default as GangguanTable20 } from '@/components/Pages/Gangguan/Table_20.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Keluhan/index.ts b/src/components/Pages/Keluhan/index.ts
index b5ff05b..fe6387d 100644
--- a/src/components/Pages/Keluhan/index.ts
+++ b/src/components/Pages/Keluhan/index.ts
@@ -1,15 +1,15 @@
-export { default as KeluhanTable1 } from './Table_21.vue'
-export { default as KeluhanTable2 } from './Table_22.vue'
-export { default as KeluhanTable3 } from './Table_23.vue'
-export { default as KeluhanTable4 } from './Table_24.vue'
-export { default as KeluhanTable5 } from './Table_25.vue'
-export { default as KeluhanTable6 } from './Table_26.vue'
-export { default as KeluhanTable7 } from './Table_27.vue'
-export { default as KeluhanTable8 } from './Table_28.vue'
-export { default as KeluhanTable9 } from './Table_29.vue'
-export { default as KeluhanTable10 } from './Table_30.vue'
-export { default as KeluhanTable11 } from './Table_31.vue'
-export { default as KeluhanTable12 } from './Table_32.vue'
-export { default as KeluhanTable13 } from './Table_33.vue'
-export { default as KeluhanTable14 } from './Table_34.vue'
-export { default as KeluhanTable15 } from './Table_35.vue'
\ No newline at end of file
+export { default as KeluhanTable1 } from '@/components/Pages/Keluhan/Table_21.vue'
+export { default as KeluhanTable2 } from '@/components/Pages/Keluhan/Table_22.vue'
+export { default as KeluhanTable3 } from '@/components/Pages/Keluhan/Table_23.vue'
+export { default as KeluhanTable4 } from '@/components/Pages/Keluhan/Table_24.vue'
+export { default as KeluhanTable5 } from '@/components/Pages/Keluhan/Table_25.vue'
+export { default as KeluhanTable6 } from '@/components/Pages/Keluhan/Table_26.vue'
+export { default as KeluhanTable7 } from '@/components/Pages/Keluhan/Table_27.vue'
+export { default as KeluhanTable8 } from '@/components/Pages/Keluhan/Table_28.vue'
+export { default as KeluhanTable9 } from '@/components/Pages/Keluhan/Table_29.vue'
+export { default as KeluhanTable10 } from '@/components/Pages/Keluhan/Table_30.vue'
+export { default as KeluhanTable11 } from '@/components/Pages/Keluhan/Table_31.vue'
+export { default as KeluhanTable12 } from '@/components/Pages/Keluhan/Table_32.vue'
+export { default as KeluhanTable13 } from '@/components/Pages/Keluhan/Table_33.vue'
+export { default as KeluhanTable14 } from '@/components/Pages/Keluhan/Table_34.vue'
+export { default as KeluhanTable15 } from '@/components/Pages/Keluhan/Table_35.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Material/Table_68.vue b/src/components/Pages/Material/Table_68.vue
new file mode 100644
index 0000000..c9d985f
--- /dev/null
+++ b/src/components/Pages/Material/Table_68.vue
@@ -0,0 +1,41 @@
+<template>
+    <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="" :column-width="100"
+            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
+            <DxSelection mode="single" />
+            <DxPaging :page-size="10" :enabled="true" />
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
+            <DxLoadPanel :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="Nomor Gangguan" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Nama Pelanggan" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Isi Laporan" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Penyebab Gangguan" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" 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="" 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="" 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="" caption="Satuan" />
+                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Vol" />
+            </DxColumn>
+
+        </DxDataGrid>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { DxDataGrid } from 'devextreme-vue'
+import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Material/Table_69.vue b/src/components/Pages/Material/Table_69.vue
new file mode 100644
index 0000000..15b3b68
--- /dev/null
+++ b/src/components/Pages/Material/Table_69.vue
@@ -0,0 +1,36 @@
+<template>
+    <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="" :column-width="100"
+            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
+            <DxSelection mode="single" />
+            <DxPaging :page-size="10" :enabled="true" />
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
+            <DxLoadPanel :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="Kode Material" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Nama Material" />
+            <DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="" caption="Satuan" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Sumber Material" />
+            <DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
+                <DxColumn v-for="i in 31" css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                    :caption="i" />
+            </DxColumn>
+
+        </DxDataGrid>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { DxDataGrid } from 'devextreme-vue'
+import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Material/index.ts b/src/components/Pages/Material/index.ts
new file mode 100644
index 0000000..6eed0fc
--- /dev/null
+++ b/src/components/Pages/Material/index.ts
@@ -0,0 +1,2 @@
+export { default as MaterialTable1 } from '@/components/Pages/Material/Table_68.vue'
+export { default as MaterialTable2 } from '@/components/Pages/Material/Table_69.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_36.vue b/src/components/Pages/Monalisa/Table_36.vue
new file mode 100644
index 0000000..a8a01ee
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_36.vue
@@ -0,0 +1,81 @@
+<template>
+    <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 :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="" 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="" data-type="number" caption="Des 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                        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="YoY" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_37.vue b/src/components/Pages/Monalisa/Table_37.vue
new file mode 100644
index 0000000..22be567
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_37.vue
@@ -0,0 +1,81 @@
+<template>
+    <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 :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="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Jumlah Dispatching Time Gangguan" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                        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="YoY" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_38.vue b/src/components/Pages/Monalisa/Table_38.vue
new file mode 100644
index 0000000..6018b06
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_38.vue
@@ -0,0 +1,81 @@
+<template>
+    <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 :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="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Jumlah RCT Kali Gangguan" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                        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="YoY" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_39.vue b/src/components/Pages/Monalisa/Table_39.vue
new file mode 100644
index 0000000..75195e8
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_39.vue
@@ -0,0 +1,81 @@
+<template>
+    <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 :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="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Jumlah RPT Kali Gangguan" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                        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="YoY" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_40.vue b/src/components/Pages/Monalisa/Table_40.vue
new file mode 100644
index 0000000..0cf2303
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_40.vue
@@ -0,0 +1,117 @@
+<template>
+    <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 :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="" 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=""
+                            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=""
+                            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=""
+                            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 Gangguan" 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 Gangguan" 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 Gangguan" 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 Gangguan" 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 Gangguan" 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 Gangguan" 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">
+import { DxDataGrid } from 'devextreme-vue'
+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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_41.vue b/src/components/Pages/Monalisa/Table_41.vue
new file mode 100644
index 0000000..902134f
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_41.vue
@@ -0,0 +1,67 @@
+<template>
+    <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 :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" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="" caption="ID Gangguan" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="" caption="Jenis Gangguan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Jumlah" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="" caption="%" css-class="custom-table-column" />
+
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_42.vue b/src/components/Pages/Monalisa/Table_42.vue
new file mode 100644
index 0000000..a0c6d78
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_42.vue
@@ -0,0 +1,81 @@
+<template>
+    <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 :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="" 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="" data-type="number" caption="Des 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                        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="YoY" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_43.vue b/src/components/Pages/Monalisa/Table_43.vue
new file mode 100644
index 0000000..d7bd85e
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_43.vue
@@ -0,0 +1,81 @@
+<template>
+    <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 :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="" 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="" data-type="number" caption="Des 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                        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="YoY" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_44.vue b/src/components/Pages/Monalisa/Table_44.vue
new file mode 100644
index 0000000..286a07a
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_44.vue
@@ -0,0 +1,70 @@
+<template>
+    <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 :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="Tahun" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                    css-class="custom-table-column" />
+            </DxColumn>
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_45.vue b/src/components/Pages/Monalisa/Table_45.vue
new file mode 100644
index 0000000..a8a01ee
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_45.vue
@@ -0,0 +1,81 @@
+<template>
+    <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 :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="" 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="" data-type="number" caption="Des 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                        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="YoY" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_46.vue b/src/components/Pages/Monalisa/Table_46.vue
new file mode 100644
index 0000000..d18cb02
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_46.vue
@@ -0,0 +1,81 @@
+<template>
+    <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 :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="" 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="" data-type="number" caption="Des 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                        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="YoY" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_47.vue b/src/components/Pages/Monalisa/Table_47.vue
new file mode 100644
index 0000000..7725a2a
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_47.vue
@@ -0,0 +1,81 @@
+<template>
+    <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 :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="" 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="" data-type="number" caption="Des 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                        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="YoY" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_48.vue b/src/components/Pages/Monalisa/Table_48.vue
new file mode 100644
index 0000000..b2fee1a
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_48.vue
@@ -0,0 +1,117 @@
+<template>
+    <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 :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="" 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 Gangguan" 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 Gangguan" 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 Gangguan" 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 Gangguan" 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 Gangguan" 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 Gangguan" 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 Gangguan" 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 Gangguan" 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">
+import { DxDataGrid } from 'devextreme-vue'
+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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_49.vue b/src/components/Pages/Monalisa/Table_49.vue
new file mode 100644
index 0000000..57ff6cd
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_49.vue
@@ -0,0 +1,67 @@
+<template>
+    <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 :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" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="" caption="ID Keluhan" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="" caption="Jenis Keluhan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Jumlah" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="" caption="%" css-class="custom-table-column" />
+
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_50.vue b/src/components/Pages/Monalisa/Table_50.vue
new file mode 100644
index 0000000..5d8a932
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_50.vue
@@ -0,0 +1,81 @@
+<template>
+    <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 :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="" 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="" data-type="number" caption="Des 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
+                        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="YoY" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_51.vue b/src/components/Pages/Monalisa/Table_51.vue
new file mode 100644
index 0000000..a6c8a81
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_51.vue
@@ -0,0 +1,70 @@
+<template>
+    <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 :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="Tahun" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                    css-class="custom-table-column" />
+            </DxColumn>
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_52.vue b/src/components/Pages/Monalisa/Table_52.vue
new file mode 100644
index 0000000..3910573
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_52.vue
@@ -0,0 +1,127 @@
+<template>
+    <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 :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="Januari 2019" css-class="custom-table-column">
+                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                    css-class="custom-table-column" />
+                <DxColumn :width="120" alignment="center" data-field="" 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="" data-type="number" caption="Keluhan"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" 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=""
+                    data-type="number" />
+            </DxColumn>
+
+            <DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column">
+                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                    css-class="custom-table-column" />
+                <DxColumn :width="120" alignment="center" data-field="" 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="" data-type="number" caption="Keluhan"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" 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=""
+                    data-type="number" />
+            </DxColumn>
+            <DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" 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="" data-type="number" caption="Keluhan"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="% Total"
+                    css-class="custom-table-column" />
+            </DxColumn>
+
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_53.vue b/src/components/Pages/Monalisa/Table_53.vue
new file mode 100644
index 0000000..de50a70
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_53.vue
@@ -0,0 +1,89 @@
+<template>
+    <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 :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" caption="Periode: Februari,2020" css-class="custom-table-column">
+                <DxColumn :width="170" alignment="center" data-field="" 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="" data-type="number" caption="Feb 2020"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" 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="" data-type="number" caption="Feb 2020"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" 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="" data-type="number" caption="G"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="K"
+                    css-class="custom-table-column" />
+            </DxColumn>
+            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="% Rata-Rata Aging Complains"
+                css-class="custom-table-column" />
+
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_54.vue b/src/components/Pages/Monalisa/Table_54.vue
new file mode 100644
index 0000000..79296e0
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_54.vue
@@ -0,0 +1,79 @@
+<template>
+    <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 :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" caption="Periode: Februari,2020" css-class="custom-table-column">
+                <DxColumn :width="170" alignment="center" data-field="" 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="" data-type="number" caption="Terencana"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Tidak Terencana"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Bencana Alam"
+                    css-class="custom-table-column" />
+            </DxColumn>
+            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="Total"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="KPI ENS"
+                css-class="custom-table-column" />
+
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_55.vue b/src/components/Pages/Monalisa/Table_55.vue
new file mode 100644
index 0000000..942242f
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_55.vue
@@ -0,0 +1,81 @@
+<template>
+    <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 :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 :min-width="250" alignment="center" data-field="" 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="" data-type="number" caption="Jan 2020"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" 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="" data-type="number" caption="Jan 2020"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Keluhan"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Komplain Pelanggan %"
+                css-class="custom-table-column" />
+
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_56.vue b/src/components/Pages/Monalisa/Table_56.vue
new file mode 100644
index 0000000..db105d6
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_56.vue
@@ -0,0 +1,114 @@
+<template>
+    <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 :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="s.d Januari 2019" css-class="custom-table-column">
+                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                    css-class="custom-table-column" />
+                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                    css-class="custom-table-column" />
+                <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Komplain"
+                    css-class="custom-table-column" />
+            </DxColumn>
+            <DxColumn alignment="center" caption="s.d Januari 2020" css-class="custom-table-column">
+                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                    css-class="custom-table-column" />
+                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                    css-class="custom-table-column" />
+                <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Komplain"
+                    css-class="custom-table-column" />
+            </DxColumn>
+            <DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" 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="" data-type="number" caption="Keluhan"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="% Total"
+                    css-class="custom-table-column" />
+            </DxColumn>
+
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_57.vue b/src/components/Pages/Monalisa/Table_57.vue
new file mode 100644
index 0000000..409c190
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_57.vue
@@ -0,0 +1,89 @@
+<template>
+    <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 :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" caption="Periode: s.d Januari, 2020" css-class="custom-table-column">
+                <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit"
+                    css-class="custom-table-column" />
+            </DxColumn>
+            <DxColumn alignment="center" caption="Aging Complains(Kum)" 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="" data-type="number" caption="s.d Jan 2020"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" 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="" data-type="number" caption="s.d Jan 2020"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" 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="" data-type="number" caption="G"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="K"
+                    css-class="custom-table-column" />
+            </DxColumn>
+            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="% Rata-Rata Aging Complains"
+                css-class="custom-table-column" />
+
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_58.vue b/src/components/Pages/Monalisa/Table_58.vue
new file mode 100644
index 0000000..3be2336
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_58.vue
@@ -0,0 +1,79 @@
+<template>
+    <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 :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" caption="Periode: s.d Januari, 2020" css-class="custom-table-column">
+                <DxColumn :width="170" alignment="center" data-field="" 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="" data-type="number" caption="Terencana"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Tidak Terencana"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Bencana Alam"
+                    css-class="custom-table-column" />
+            </DxColumn>
+            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="Total"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="KPI ENS"
+                css-class="custom-table-column" />
+
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_59.vue b/src/components/Pages/Monalisa/Table_59.vue
new file mode 100644
index 0000000..7ed615d
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_59.vue
@@ -0,0 +1,82 @@
+<template>
+    <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 :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="Kepatuhan dan Akurasi APKT" 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="Gangguan Berulang" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2020"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" 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="" data-type="number" caption="s.d Jan 2020"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Keluhan"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Komplain Pelanggan %"
+                css-class="custom-table-column" />
+
+        </DxDataGrid>
+    </div>
+</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 { 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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/index.ts b/src/components/Pages/Monalisa/index.ts
new file mode 100644
index 0000000..4142a1c
--- /dev/null
+++ b/src/components/Pages/Monalisa/index.ts
@@ -0,0 +1,24 @@
+export { default as MonalisaTable1 } from '@/components/Pages/Monalisa/Table_36.vue'
+export { default as MonalisaTable2 } from '@/components/Pages/Monalisa/Table_37.vue'
+export { default as MonalisaTable3 } from '@/components/Pages/Monalisa/Table_38.vue'
+export { default as MonalisaTable4 } from '@/components/Pages/Monalisa/Table_39.vue'
+export { default as MonalisaTable5 } from '@/components/Pages/Monalisa/Table_40.vue'
+export { default as MonalisaTable6 } from '@/components/Pages/Monalisa/Table_41.vue'
+export { default as MonalisaTable7 } from '@/components/Pages/Monalisa/Table_42.vue'
+export { default as MonalisaTable8 } from '@/components/Pages/Monalisa/Table_43.vue'
+export { default as MonalisaTable9 } from '@/components/Pages/Monalisa/Table_44.vue'
+export { default as MonalisaTable10 } from '@/components/Pages/Monalisa/Table_45.vue'
+export { default as MonalisaTable11 } from '@/components/Pages/Monalisa/Table_46.vue'
+export { default as MonalisaTable12 } from '@/components/Pages/Monalisa/Table_47.vue'
+export { default as MonalisaTable13 } from '@/components/Pages/Monalisa/Table_48.vue'
+export { default as MonalisaTable14 } from '@/components/Pages/Monalisa/Table_49.vue'
+export { default as MonalisaTable15 } from '@/components/Pages/Monalisa/Table_50.vue'
+export { default as MonalisaTable16 } from '@/components/Pages/Monalisa/Table_51.vue'
+export { default as MonalisaTable17 } from '@/components/Pages/Monalisa/Table_52.vue'
+export { default as MonalisaTable18 } from '@/components/Pages/Monalisa/Table_53.vue'
+export { default as MonalisaTable19 } from '@/components/Pages/Monalisa/Table_54.vue'
+export { default as MonalisaTable20 } from '@/components/Pages/Monalisa/Table_55.vue'
+export { default as MonalisaTable21 } from '@/components/Pages/Monalisa/Table_56.vue'
+export { default as MonalisaTable22 } from '@/components/Pages/Monalisa/Table_57.vue'
+export { default as MonalisaTable23 } from '@/components/Pages/Monalisa/Table_58.vue'
+export { default as MonalisaTable24 } from '@/components/Pages/Monalisa/Table_59.vue'
diff --git a/src/components/Pages/PencarianData/Table_71.vue b/src/components/Pages/PencarianData/Table_71.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/PencarianData/Table_71.vue
@@ -0,0 +1,108 @@
+<template>
+    <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 :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" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" 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="150" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="1"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="2"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="3"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="4"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="5"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" 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="" 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">
+import { DxDataGrid } from 'devextreme-vue'
+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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/PencarianData/index.ts b/src/components/Pages/PencarianData/index.ts
new file mode 100644
index 0000000..012e268
--- /dev/null
+++ b/src/components/Pages/PencarianData/index.ts
@@ -0,0 +1 @@
+export { default as PencarianDataTable1 } from '@/components/Pages/PencarianData/Table_71.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Transaksi/Table_70.vue b/src/components/Pages/Transaksi/Table_70.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Transaksi/Table_70.vue
@@ -0,0 +1,108 @@
+<template>
+    <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 :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" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" 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="150" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="1"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="2"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="3"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="4"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="5"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" 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="" 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">
+import { DxDataGrid } from 'devextreme-vue'
+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'
+
+const onExporting = (e: any) => {
+    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')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Transaksi/index.ts b/src/components/Pages/Transaksi/index.ts
new file mode 100644
index 0000000..9335e94
--- /dev/null
+++ b/src/components/Pages/Transaksi/index.ts
@@ -0,0 +1 @@
+export { default as TransaksiTable1 } from '@/components/Pages/Transaksi/Table_70.vue'
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index e7d1983..cf9eb28 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -47,6 +47,38 @@ import {
   KeluhanTable14,
   KeluhanTable15,
 } from '@/components/Pages/Keluhan'
+import {
+  MonalisaTable1,
+  MonalisaTable10,
+  MonalisaTable11,
+  MonalisaTable12,
+  MonalisaTable13,
+  MonalisaTable14,
+  MonalisaTable15,
+  MonalisaTable16,
+  MonalisaTable17,
+  MonalisaTable18,
+  MonalisaTable19,
+  MonalisaTable2,
+  MonalisaTable20,
+  MonalisaTable21,
+  MonalisaTable22,
+  MonalisaTable23,
+  MonalisaTable24,
+  MonalisaTable3,
+  MonalisaTable4,
+  MonalisaTable5,
+  MonalisaTable6,
+  MonalisaTable7,
+  MonalisaTable8,
+  MonalisaTable9
+} from '@/components/Pages/Monalisa'
+import { CicoTable1 } from '@/components/Pages/Cico'
+import { AnomaliTable1, AnomaliTable2, AnomaliTable3, AnomaliTable5 } from '@/components/Pages/Anomali'
+import { CttTable1 } from '@/components/Pages/Ctt'
+import { MaterialTable1, MaterialTable2 } from '@/components/Pages/Material'
+import { TransaksiTable1 } from '@/components/Pages/Transaksi'
+import { PencarianDataTable1 } from '@/components/Pages/PencarianData'
 
 export const routes: RouteRecordRaw[] = [
   {
@@ -102,6 +134,10 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Daftar Gangguan Diselesaikan Mobile APKT',
                 component: GangguanTable7,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
           {
@@ -173,7 +209,15 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Rekapitulasi Cleansing Transaksi TM',
                 component: GangguanTable20,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
+          },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
           }
         ]
       },
@@ -220,6 +264,10 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Daftar Keluhan Selesai di CC123',
                 component: KeluhanTable7,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
           {
@@ -261,13 +309,20 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Rekapitulasi Keluhan Berdasarkan Media',
                 component: KeluhanTable14,
               },
-
               {
                 path: '8',
                 name: 'Rekapitulasi Rating Per Unit',
                 component: KeluhanTable15,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
+          },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
           }
         ],
       },
@@ -286,50 +341,58 @@ export const routes: RouteRecordRaw[] = [
                   {
                     path: '1',
                     name: 'Jumlah Kali  Gangguan',
-                    component: EmptyPage,
+                    component: MonalisaTable1,
                   },
                   {
                     path: '2',
                     name: 'Dispacthing Time (DT) Gangguan',
-                    component: EmptyPage,
+                    component: MonalisaTable2,
                   },
                   {
                     path: '3',
                     name: 'Recovery Time (RCT) Gangguan',
-                    component: EmptyPage,
+                    component: MonalisaTable3,
                   },
                   {
                     path: '4',
                     name: 'Response Time (RPT) Gangguan',
-                    component: EmptyPage,
+                    component: MonalisaTable4,
                   },
                   {
                     path: '5',
                     name: 'Jumlah dan Durasi RPT RCT Gangguan',
-                    component: EmptyPage,
+                    component: MonalisaTable5,
                   },
                   {
                     path: '6',
                     name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
-                    component: EmptyPage,
+                    component: MonalisaTable6,
                   },
                   {
                     path: '7',
                     name: 'Rekapitulasi Lapor Ulang Gangguan',
-                    component: EmptyPage,
+                    component: MonalisaTable7,
                   },
                   {
                     path: '8',
                     name: 'Rekapitulasi ENS Gangguan',
-                    component: EmptyPage,
+                    component: MonalisaTable8,
                   },
                   {
                     path: '9',
                     name: 'Rekapitulasi Gangguan Belum Selesai',
-                    component: EmptyPage,
+                    component: MonalisaTable9,
                   },
+                  {
+                    path: ':pathMatch(.*)*',
+                    component: EmptyPage,
+                  }
                 ],
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
           {
@@ -343,44 +406,52 @@ export const routes: RouteRecordRaw[] = [
                   {
                     path: '1',
                     name: 'Jumlah Kali Keluhan',
-                    component: EmptyPage,
+                    component: MonalisaTable10,
                   },
                   {
                     path: '2',
                     name: 'Recovery Time (RCT) Keluhan',
-                    component: EmptyPage,
+                    component: MonalisaTable11,
                   },
                   {
                     path: '3',
                     name: 'Response Time (RPT) Keluhan',
-                    component: EmptyPage,
+                    component: MonalisaTable12,
                   },
                   {
                     path: '4',
                     name: 'Jumlah dan Durasi RPT RCT Keluhan',
-                    component: EmptyPage,
+                    component: MonalisaTable13,
                   },
                   {
                     path: '5',
                     name: 'Rekapitulasi Gangguan Per Jenis Keluhan',
-                    component: EmptyPage,
+                    component: MonalisaTable14,
                   },
                   {
                     path: '6',
                     name: 'Rekapitulasi Lapor Ulang Keluhan',
-                    component: EmptyPage,
+                    component: MonalisaTable15,
                   },
                   {
                     path: '7',
                     name: 'Rekapitulasi Keluhan Belum Selesai',
-                    component: EmptyPage,
+                    component: MonalisaTable16,
                   },
+                  {
+                    path: ':pathMatch(.*)*',
+                    component: EmptyPage,
+                  }
                 ],
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
           {
-            path: 'kpi',
+            path: 'laporan-kpi',
             name: 'Laporan KPI',
             children: [
               {
@@ -389,24 +460,28 @@ export const routes: RouteRecordRaw[] = [
                 children: [
                   {
                     path: '1',
-                    name: 'Penurunan Jumlah Komplain',
-                    component: EmptyPage,
+                    name: '(Monalisa) Penurunan Jumlah Komplain',
+                    component: MonalisaTable17,
                   },
                   {
                     path: '2',
-                    name: 'Aging Complaint',
-                    component: EmptyPage,
+                    name: '(Monalisa) Aging Complaint',
+                    component: MonalisaTable18,
                   },
                   {
                     path: '3',
-                    name: 'Energy Not Sales (ENS)',
-                    component: EmptyPage,
+                    name: '(Monalisa) Energy Not Sales (ENS)',
+                    component: MonalisaTable19,
                   },
                   {
                     path: '4',
-                    name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
-                    component: EmptyPage,
+                    name: '(Monalisa) Kepatuhan dan Akurasi Dalam Pelaporan',
+                    component: MonalisaTable20,
                   },
+                  {
+                    path: ':pathMatch(.*)*',
+                    component: EmptyPage,
+                  }
                 ],
               },
               {
@@ -416,27 +491,39 @@ export const routes: RouteRecordRaw[] = [
                   {
                     path: '1',
                     name: 'Penurunan Jumlah Komplain',
-                    component: EmptyPage,
+                    component: MonalisaTable21,
                   },
                   {
                     path: '2',
                     name: 'Aging Complaint',
-                    component: EmptyPage,
+                    component: MonalisaTable22,
                   },
                   {
                     path: '3',
                     name: 'Energy Not Sales (ENS)',
-                    component: EmptyPage,
+                    component: MonalisaTable23,
                   },
                   {
                     path: '4',
                     name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
-                    component: EmptyPage,
+                    component: MonalisaTable24,
                   },
+                  {
+                    path: ':pathMatch(.*)*',
+                    component: EmptyPage,
+                  }
                 ],
-              }
+              },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              },
             ],
           },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
+          },
         ],
       },
       {
@@ -450,10 +537,18 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Laporan Check In /Check Out (CICO)',
-                component: EmptyPage,
+                component: CicoTable1,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
+          }
         ],
       },
       {
@@ -467,13 +562,17 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Laporan Anomali Penangan Pengaduan Gangguan Unit',
-                component: EmptyPage,
+                component: AnomaliTable1,
               },
               {
                 path: '2',
                 name: 'Laporan Anomali Penangan Pengaduan Gangguan Petugas',
-                component: EmptyPage,
+                component: AnomaliTable3,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
           {
@@ -483,10 +582,18 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Laporan Anomali Penangan Pengaduan Keluhan Unit',
-                component: EmptyPage,
+                component: AnomaliTable5,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
+          }
         ],
       },
       {
@@ -496,8 +603,12 @@ export const routes: RouteRecordRaw[] = [
           {
             path: '1',
             name: 'Laporan CTT & KWH Periksa',
-            component: EmptyPage,
+            component: CttTable1,
           },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
+          }
         ],
       },
       {
@@ -511,8 +622,12 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Daftar Gangguan Dan Material Yang Dipakai',
-                component: EmptyPage,
+                component: MaterialTable1,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
           {
@@ -522,9 +637,17 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Rekapitulasi Pemakaian Material',
-                component: EmptyPage,
+                component: MaterialTable2,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
+          },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
           }
         ],
       },
@@ -535,8 +658,12 @@ export const routes: RouteRecordRaw[] = [
           {
             path: '1',
             name: 'Transaksi APKT',
-            component: EmptyPage,
+            component: TransaksiTable1,
           },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
+          }
         ],
       },
       {
@@ -546,10 +673,18 @@ export const routes: RouteRecordRaw[] = [
           {
             path: '1',
             name: 'Pencarian Report Number',
+            component: PencarianDataTable1,
+          },
+          {
+            path: ':pathMatch(.*)*',
             component: EmptyPage,
           }
         ]
       },
+      {
+        path: ':pathMatch(.*)*',
+        component: EmptyPage,
+      }
     ]
   },
   {
@@ -567,6 +702,12 @@ export const routes: RouteRecordRaw[] = [
     name: 'Not Found',
     component: NotFoundView
   },
+  {
+    path: '/',
+    redirect: {
+      name: 'Home'
+    }
+  }
 ]
 
 export const mergeChildrenRoutes = (routes: RouteRecordRaw[]): RouteRecordRaw[] => {
@@ -652,8 +793,10 @@ export const fixRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
 
   // remove duplicate route path and sort by path length
   const uniqueRoute = newRoute.filter((nr, index, self) => self.findIndex((n) => n.path === nr.path) === index).sort((a, b) => b.path.length - a.path.length)
+  // console.log('route', newRoute);
 
-  return uniqueRoute
+  // return uniqueRoute
+  return newRoute
 }
 
 
@@ -661,7 +804,8 @@ const router = createRouter({
   history: createWebHistory(),
   linkActiveClass: 'active',
   stringifyQuery: qs.stringify,
-  routes: fixRoute(routes)
+  routes: fixRoute(routes),
+  strict: true,
 })
 
 router.beforeEach((to, from, next) => {
diff --git a/src/stores/menu.ts b/src/stores/menu.ts
index 325474c..d4de776 100644
--- a/src/stores/menu.ts
+++ b/src/stores/menu.ts
@@ -1,4 +1,4 @@
-import { onMounted, ref, watch } from 'vue'
+import { ref, shallowRef, watch } from 'vue'
 import { defineStore } from 'pinia'
 import { useRoute, useRouter } from 'vue-router'
 import { convertRouteToMenu } from '@/utils/route'
@@ -19,8 +19,6 @@ export const useMenuStore = defineStore('menu', () => {
     const menuSelected = ref(route.fullPath)
     const toggleSidebar = () => (sidebarOpen.value = !sidebarOpen.value)
     const toggleSidebarMenu = (path: string, newExpanded: boolean): void => {
-        console.log('expanded', path);
-
         const toggleItemExpanded = (items: MenuItemModel[]): void => {
             for (const item of items) {
                 if (item.path === path) {
diff --git a/src/utils/route.ts b/src/utils/route.ts
index 124b767..a499546 100644
--- a/src/utils/route.ts
+++ b/src/utils/route.ts
@@ -37,7 +37,7 @@ const convertToDashedString = (input: string): string => {
 }
 
 export const convertRouteToMenu = (data: RouteRecordRaw[], basePath: string = '/home', iconIndex: number = 0): MenuItemModel[] => {
-    return data.filter((i) => i.path !== '').map((item) => {
+    return data.filter((i) => i.path !== '' && i.name != undefined).map((item) => {
         const convertedItem: MenuItemModel = {
             name: item.name?.toString() || '',
             path: `${basePath}/${item.path}`,
diff --git a/vite.config.ts b/vite.config.ts
index e90681d..4f38543 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -19,7 +19,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
-      'inferno': 'inferno/dist/index.dev.esm.js',
+      // 'inferno': 'inferno/dist/index.dev.esm.js',
     }
   },
 })