From 887ad8306f97ab9d16b57244277c9663acc504ae Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Mon, 30 Oct 2023 13:40:49 +0700
Subject: [PATCH 01/67] fix: Filters component wrong logic (MenuProvider)

---
 src/components/Pages/MenuProvider.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Pages/MenuProvider.vue b/src/components/Pages/MenuProvider.vue
index 0a88c8f..4146f65 100644
--- a/src/components/Pages/MenuProvider.vue
+++ b/src/components/Pages/MenuProvider.vue
@@ -5,7 +5,7 @@
             <h1 class="text-xl font-medium md:text-3xl text-dark">{{ pageMetaData[0] }}</h1>
         </div>
         <div class="flex-1 mt-2 sm:mt-4 dx-viewport">
-            <Filters :report-button="typeof pageMetaData[2] !== 'undefined'" class="mb-4" v-if="pageMetaData.length > 1">
+            <Filters :report-button="(typeof pageMetaData[2]) !== 'undefined'" class="mb-4" v-if="pageMetaData.length > 1">
                 <Type1 v-if="pageMetaData[1] == 'type-1'" />
             </Filters>
 

From 6717b533b0682920eac1d57b251818b781cd3700 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Mon, 30 Oct 2023 16:40:23 +0700
Subject: [PATCH 02/67] feat(command palletes): fix recent page delay update

---
 src/components/CommandPalettes.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CommandPalettes.vue b/src/components/CommandPalettes.vue
index 8744417..2509e26 100644
--- a/src/components/CommandPalettes.vue
+++ b/src/components/CommandPalettes.vue
@@ -146,7 +146,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
 import {
     Combobox,
@@ -163,7 +163,7 @@ import { useCommandPalattesStore } from '@/stores/command'
 import { navigationIcon } from '@/utils/route'
 
 const command = useCommandPalattesStore()
-const recent = computed(() => query.value === '' ? command.readRecent() : [])
+const recent = computed(() => command.open ? command.readRecent() : [])
 const query = ref('')
 const filteredMenus = computed(() =>
     query.value === ''

From ea04146a370ba47c30823b5b73d0039737aab164 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 31 Oct 2023 09:59:51 +0700
Subject: [PATCH 03/67] adding 7 table for menu Gangguan

---
 .../Pages/DaftarTransaksi/AktifIndividual.vue | 299 ------------------
 .../Pages/Gangguan/Daftar/Daftar_2.vue        | 111 -------
 .../Pages/Gangguan/Daftar/Daftar_3.vue        | 109 -------
 src/components/Pages/Gangguan/Daftar/index.ts |   3 -
 .../{Daftar/Daftar_1.vue => Table_1.vue}      |   0
 src/components/Pages/Gangguan/Table_2.vue     |  38 +++
 src/components/Pages/Gangguan/Table_3.vue     |  37 +++
 src/components/Pages/Gangguan/Table_4.vue     |  38 +++
 src/components/Pages/Gangguan/Table_5.vue     |  37 +++
 src/components/Pages/Gangguan/Table_6.vue     |  36 +++
 src/components/Pages/Gangguan/Table_7.vue     |  37 +++
 src/components/Pages/Gangguan/index.ts        |   7 +
 src/router/index.ts                           |  41 ++-
 13 files changed, 249 insertions(+), 544 deletions(-)
 delete mode 100644 src/components/Pages/DaftarTransaksi/AktifIndividual.vue
 delete mode 100644 src/components/Pages/Gangguan/Daftar/Daftar_2.vue
 delete mode 100644 src/components/Pages/Gangguan/Daftar/Daftar_3.vue
 delete mode 100644 src/components/Pages/Gangguan/Daftar/index.ts
 rename src/components/Pages/Gangguan/{Daftar/Daftar_1.vue => Table_1.vue} (100%)
 create mode 100644 src/components/Pages/Gangguan/Table_2.vue
 create mode 100644 src/components/Pages/Gangguan/Table_3.vue
 create mode 100644 src/components/Pages/Gangguan/Table_4.vue
 create mode 100644 src/components/Pages/Gangguan/Table_5.vue
 create mode 100644 src/components/Pages/Gangguan/Table_6.vue
 create mode 100644 src/components/Pages/Gangguan/Table_7.vue
 create mode 100644 src/components/Pages/Gangguan/index.ts

diff --git a/src/components/Pages/DaftarTransaksi/AktifIndividual.vue b/src/components/Pages/DaftarTransaksi/AktifIndividual.vue
deleted file mode 100644
index c328b0b..0000000
--- a/src/components/Pages/DaftarTransaksi/AktifIndividual.vue
+++ /dev/null
@@ -1,299 +0,0 @@
-<template>
-    <div class="mx-auto max-w-7xl dx-viewport">
-        <div class="flex flex-col p-4 bg-white rounded-lg drop-shadow-sm min-h-96">
-            <nav class="flex flex-wrap gap-4 mb-4" aria-label="Tabs">
-                <a v-for="(tab, index) in tabs" :key="tab.name" @click="changeTab(index)"
-                    :class="[tabChecked === index ? 'bg-primary-100 text-primary-900' : 'text-gray-500 hover:text-gray-700', 'cursor-pointer px-3 py-2 font-medium text-sm rounded-md']"
-                    :aria-current="tabChecked === index ? 'page' : undefined">{{ tab.name }}</a>
-            </nav>
-
-            <!-- Filters -->
-            <section aria-labelledby="filter-heading">
-                <h2 id="filter-heading" class="sr-only">Filters</h2>
-
-                <div class="pb-4 bg-white">
-                    <div class="flex flex-wrap items-center px-0 mx-auto lg:justify-between max-w-7xl">
-                        <Menu as="div"
-                            class="relative flex-1 inline-block w-full mb-2 mr-2 text-left lg-2 lg:mb-0 md:flex-none lg:w-fit">
-                            <MenuButton
-                                class="flex inline-flex items-center justify-between w-full px-2 py-2 text-xs font-medium text-gray-700 border border-gray-100 rounded-md whitespace-nowrap group hover:text-gray-900">
-                                Cari dengan : <b>{{ searchOptions.find(option => option.current === true)?.name }}</b>
-                                <ChevronDownIcon
-                                    class="flex-shrink-0 w-3 h-3 ml-1 -mr-1 text-gray-400 group-hover:text-gray-500"
-                                    aria-hidden="true" />
-                            </MenuButton>
-
-                            <transition enter-active-class="transition duration-100 ease-out"
-                                enter-from-class="transform scale-95 opacity-0"
-                                enter-to-class="transform scale-100 opacity-100"
-                                leave-active-class="transition duration-75 ease-in"
-                                leave-from-class="transform scale-100 opacity-100"
-                                leave-to-class="transform scale-95 opacity-0">
-                                <MenuItems
-                                    class="absolute left-0 z-10 w-40 mt-2 origin-top-left bg-white rounded-md shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none">
-                                    <div class="py-1">
-                                        <MenuItem v-for="(option, index) in searchOptions" :key="option.name"
-                                            v-slot="{ active }">
-                                        <a @click="handleChangeSearchOption(index)"
-                                            :class="[option.current ? 'font-medium text-gray-900' : 'text-gray-500', active ? 'bg-gray-100' : '', 'block px-4 py-2 text-xs']">{{
-                                                option.name }}</a>
-                                        </MenuItem>
-                                    </div>
-                                </MenuItems>
-                            </transition>
-                        </Menu>
-
-                        <PopoverGroup class="items-center flex-1 mb-2 sm:mr-2 lg:mb-0 md:flex-none lg:w-fit">
-                            <Popover class="relative inline-block w-full px-2 text-left">
-                                <PopoverButton
-                                    class="flex inline-flex items-center justify-between w-full px-2 py-2 text-xs text-gray-700 border border-gray-100 rounded-md whitespace-nowrap group">
-                                    <span class="flex-1 text-left">Order by</span>
-                                    <span v-if="orderByOptions.filter(option => option.checked).length > 0"
-                                        class="ml-1.5 rounded bg-gray-100 py-0.2 px-1.5 text-[10px] flex-none font-bold tabular-nums text-gray-500">
-                                        {{ orderByOptions.filter(option => option.checked).length }}
-                                    </span>
-                                    <ChevronDownIcon
-                                        class="flex-none flex-shrink-0 w-3 h-3 ml-1 -mr-1 text-gray-400 group-hover:text-gray-500"
-                                        aria-hidden="true" />
-                                </PopoverButton>
-
-                                <transition enter-active-class="transition duration-100 ease-out"
-                                    enter-from-class="transform scale-95 opacity-0"
-                                    enter-to-class="transform scale-100 opacity-100"
-                                    leave-active-class="transition duration-75 ease-in"
-                                    leave-from-class="transform scale-100 opacity-100"
-                                    leave-to-class="transform scale-95 opacity-0">
-                                    <PopoverPanel
-                                        class="absolute right-0 z-10 p-4 mt-2 origin-top-right bg-white rounded-md shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none">
-                                        <form class="space-y-4">
-                                            <div v-for="(option, optionIdx) in orderByOptions" :key="option.value"
-                                                class="flex items-center">
-                                                <input :value="option.value" type="checkbox" :checked="option.checked"
-                                                    @change="handleChangeOrderBy(optionIdx, !option.checked)"
-                                                    class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500" />
-                                                <label
-                                                    class="pr-6 ml-3 text-sm font-medium text-gray-900 whitespace-nowrap">
-                                                    {{ option.label }}
-                                                </label>
-                                            </div>
-                                        </form>
-                                    </PopoverPanel>
-                                </transition>
-                            </Popover>
-                        </PopoverGroup>
-
-                        <div class="relative inline-block mb-2 mr-2 text-left lg:mb-0 grow xs:mt-0 md:flex-1">
-                            <div class="w-full md:max-w-[220px]">
-                                <vue-tailwind-datepicker v-model="dateValue" i18n="id" :options="datePickerOptions"
-                                    :formatter="formatter" placeholder="Filter Tanggal" :auto-apply="false"
-                                    input-classes="bg-white text-gray-900 border rounded-md border-gray-100 text-xs px-2 py-2 focus:ring-0 focus:border-gray-100"
-                                    :disabled="false" as-single use-range separator=" s/d " />
-                            </div>
-                        </div>
-
-                        <form @submit.prevent="handleSubmitSearch"
-                            class="flex lg:mt-0 items-center w-full !py-1 border-0 border-gray-100 rounded-lg bg-gray-50 flex-between lg:w-fit">
-                            <!-- <ButtonDropdown button-style="bg-primary-50" text-style="text-xs" :data="searchBy"
-                                :checked="searchByChecked" @update:checked="handleSearchByChange" />
-
-                            <div class="h-5 mx-2 border-r-2 border-gray-100"></div>
-
-                            <ButtonPrimary label="Order By"
-                                class-name="bg-primary-50 mt-0 py-2 text-xs !px-2 !text-dark font-normal rounded-md mr-4" /> -->
-
-                            <InputText class-name="flex-1 bg-transparent text-xs !py-0 px-2 placeholder:text-gray-600"
-                                placeholder="Masukan Pencarian" />
-
-                            <ButtonPrimary type="submit"
-                                class-name="mr-1 flex flex-row bg-primary-500 !mt-0 text-xs !px-2 !text-white font-normal rounded-md">
-                                <MagnifyingGlassIcon class="w-4 h-4 lg:mr-2" aria-hidden="true" />
-                                <span class="hidden lg:block">Cari</span>
-                            </ButtonPrimary>
-                        </form>
-                    </div>
-                </div>
-
-                <!-- Active filters -->
-                <div class="border-gray-100 bg-gray-50 border-x border-y"
-                    v-if="orderByOptions.filter((e) => e.checked).length > 0">
-                    <div class="px-2 py-3 mx-auto max-w-7xl sm:flex sm:items-center sm:px-2 lg:px-4">
-                        <h3 class="text-xs font-medium text-gray-700">
-                            Order by
-                            <span class="sr-only">, active</span>
-                        </h3>
-
-                        <div aria-hidden="true" class="hidden w-px h-5 bg-gray-300 sm:ml-4 sm:block" />
-
-                        <div class="mt-2 sm:mt-0 sm:ml-4">
-                            <div class="flex flex-wrap items-center -m-1">
-                                <span v-for="(order, index) in orderByOptions.filter((e) => e.checked)" :key="order.value"
-                                    class="m-1 inline-flex items-center rounded-full border border-gray-100 bg-white py-1.5 pl-3 pr-2 text-xs font-medium text-gray-900">
-                                    <span>{{ order.label }}</span>
-                                    <button @click="handleChangeOrderBy(index, !order.checked)" type="button"
-                                        class="inline-flex flex-shrink-0 w-4 h-4 p-1 ml-1 text-gray-400 rounded-full hover:bg-gray-200 hover:text-gray-500">
-                                        <span class="sr-only">Remove filter for {{ order.label }}</span>
-                                        <svg class="w-2 h-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
-                                            <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
-                                        </svg>
-                                    </button>
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            <DxDataGrid :data-source="dataSource" :remote-operations="false" :allow-column-reordering="true"
-                :row-alternation-enabled="true" :show-borders="true" @content-ready="onContentReady">
-                <!-- <DxColumn :group-index="0" data-field="Product" /> -->
-                <DxColumn data-field="Amount" caption="Sale Amount" data-type="number" format="currency"
-                    alignment="right" />
-                <DxColumn :allow-grouping="false" data-field="Discount" caption="Discount %" data-type="number"
-                    format="percent" alignment="right" cell-template="discountCellTemplate" css-class="bullet" />
-                <DxColumn data-field="SaleDate" data-type="date" />
-                <DxColumn data-field="Region" data-type="string" />
-                <DxColumn data-field="Sector" data-type="string" />
-                <DxColumn data-field="Channel" data-type="string" />
-                <DxColumn :width="150" data-field="Customer" data-type="string" />
-
-                <!-- <DxGroupPanel :visible="true" /> -->
-                <!-- <DxFilterRow :visible="true" /> -->
-                <!-- <DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> -->
-                <DxGrouping :auto-expand-all="false" />
-                <DxPager :allowed-page-sizes="pageSizes" :show-page-size-selector="true" />
-                <DxPaging :page-size="10" />
-                <DxSelection mode="single" />
-            </DxDataGrid>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, type PropType } from 'vue';
-import VueTailwindDatepicker from 'vue-tailwind-datepicker'
-import {
-    Dialog,
-    DialogPanel,
-    Disclosure,
-    DisclosureButton,
-    DisclosurePanel,
-    Menu,
-    MenuButton,
-    MenuItem,
-    MenuItems,
-    Popover,
-    PopoverButton,
-    PopoverGroup,
-    PopoverPanel,
-    TransitionChild,
-    TransitionRoot,
-} from '@headlessui/vue'
-
-import {
-    DxDataGrid,
-    DxColumn,
-    DxGrouping,
-    DxGroupPanel,
-    DxPager,
-    DxPaging,
-    DxSearchPanel,
-    DxFilterRow,
-    DxSelection,
-} from 'devextreme-vue/data-grid';
-import DataSource from 'devextreme/data/data_source';
-import 'devextreme/data/odata/store';
-import ButtonDropdown from '@/components/Buttons/ButtonDropdown.vue';
-import ButtonPrimary from '@/components/Buttons/ButtonPrimary.vue';
-import InputText from '@/components/InputText.vue';
-import { MagnifyingGlassIcon, ChevronDownIcon } from '@heroicons/vue/24/solid';
-import { XMarkIcon } from '@heroicons/vue/24/outline'
-
-const tabs = [
-    { name: 'Gangguan' },
-    { name: 'Keluhan' },
-    { name: 'Gangguan Diperhatikan' },
-]
-const tabChecked = ref(0)
-
-function changeTab(index: number) {
-    tabChecked.value = index
-}
-
-const handleSubmitSearch = (e: any) => {
-    e.preventDefault()
-}
-
-let collapsed = false;
-const dataSource = new DataSource({
-    store: {
-        type: 'odata',
-        url: 'https://js.devexpress.com/Demos/SalesViewer/odata/DaySaleDtoes',
-        key: 'Id',
-        beforeSend(request) {
-            const year = new Date().getFullYear() - 1;
-            request.params.startDate = `${year}-05-10`;
-            request.params.endDate = `${year}-5-15`;
-        },
-    },
-});
-
-const pageSizes = [10, 25, 50, 100];
-const onContentReady = (e: any) => {
-    if (!collapsed) {
-        e.component.expandRow(['EnviroCare']);
-        collapsed = true;
-    }
-};
-
-const searchOptions = ref([
-    { name: 'Nama Lapor', current: true },
-    { name: 'Nama', current: false },
-    { name: 'Alamat', current: false },
-])
-function handleChangeSearchOption(index: number) {
-    searchOptions.value.forEach((option, i) => {
-        if (i === index) {
-            option.current = true
-        } else {
-            option.current = false
-        }
-    })
-}
-
-const orderByOptions = ref([
-    { value: 'status', label: 'Status', checked: false },
-    { value: 'tanggal', label: 'Tanggal Lapor', checked: false },
-])
-function handleChangeOrderBy(index: number, data: boolean) {
-    orderByOptions.value.forEach((option, i) => {
-        if (i === index) {
-            option.checked = data
-        }
-    })
-}
-
-
-type ModelType = string | [Date, Date] | { start: string | Date; end: string | Date; } | { startDate: string | Date; endDate: string | Date; };
-const emptyDate: ModelType = '';
-const dateValue = ref(emptyDate)
-
-const formatter = ref({
-    date: 'DD MMMM YYYY',
-    month: 'MMMM'
-})
-
-const datePickerOptions = ref({
-    shortcuts: {
-        today: 'Hari ini',
-        yesterday: 'Kemarin',
-        past: (period: any) => period + ' hari terakhir',
-        currentMonth: 'Bulan ini',
-        pastMonth: 'Bulan lalu'
-    },
-    footer: {
-        apply: 'Terapkan',
-        cancel: 'Batal'
-    },
-})
-
-</script>
diff --git a/src/components/Pages/Gangguan/Daftar/Daftar_2.vue b/src/components/Pages/Gangguan/Daftar/Daftar_2.vue
deleted file mode 100644
index c8c954c..0000000
--- a/src/components/Pages/Gangguan/Daftar/Daftar_2.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-    <EmptyPage />
-    <!-- <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
-            :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-
-            <DxColumn :width="40" alignment="center" data-field="number" data-type="number" caption="No" />
-            <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" />
-            <DxColumn :width="150" alignment="center" data-field="tanggal_laporan" caption="Tgl Lapor" />
-            <DxColumn :width="150" alignment="center" data-field="tanggal_respon" caption="Tgl Response" />
-            <DxColumn :width="150" alignment="center" data-field="tanggal_recovery" caption="Tgl Recovery" />
-            <DxColumn alignment="center" data-field="jumlah_lapor" caption="Jml Lapor" />
-            <DxColumn :width="170" alignment="center" data-field="durasi_respon" caption="Durasi Response Time" />
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery" caption="Durasi Recovery Time" />
-            <DxColumn :width="150" alignment="center" data-field="status" caption="Status" />
-            <DxColumn :width="150" alignment="center" data-field="id_pelanggan" caption="IDPEL/NO METER" />
-            <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" />
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="sumber_laporan" caption="Sumber Lapor" />
-            <DxColumn :width="170" alignment="center" data-field="posko" caption="Posko" />
-
-        </DxDataGrid>
-    </div> -->
-</template>
-
-<script setup lang="ts">
-import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
-import { onMounted, ref } from 'vue'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import type { Data2 } from '@/types/gangguan'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import EmptyPage from '@/components/Pages/EmptyPage.vue'
-
-const data = ref<Data2[]>([])
-
-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 createDummy = () => {
-    for (let i = 0; i < 10; i++) {
-        data.value.push({
-            number: i + 1,
-            no_laporan: 'G5223091' + (900002 + i),
-            tanggal_laporan: '19/09/2023 12:26:42',
-            tanggal_respon: '19/09/2023 13:14:15',
-            tanggal_recovery: '19/09/2023 13:14:15',
-            durasi_respon: '0-0:47:32',
-            durasi_recovery: '0-0:49:35',
-            jumlah_lapor: 1,
-            status: 'Selesai',
-            id_pelanggan: '523013252126 / 1731807',
-            nama_pelapor: 'IBU FELISIA',
-            alamat_pelapor: 'JL KWS INDUSTRI CIPT GINA KAV 5 BLOK B1',
-            no_telp_pelapor: '082229870235',
-            keterangan_pelapor: '-',
-            sumber_laporan: 'Contact Center',
-            posko: 'POSKO ULP SEMARANG'
-        });
-    }
-}
-
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
-};
-
-onMounted(() => {
-    createDummy()
-})
-
-</script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Daftar/Daftar_3.vue b/src/components/Pages/Gangguan/Daftar/Daftar_3.vue
deleted file mode 100644
index e422f5b..0000000
--- a/src/components/Pages/Gangguan/Daftar/Daftar_3.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-    <!-- <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
-            :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-
-            <DxColumn :width="40" alignment="center" data-field="number" data-type="number" caption="No" />
-            <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" />
-            <DxColumn :width="150" alignment="center" data-field="tanggal_laporan" caption="Tgl Lapor" />
-            <DxColumn :width="150" alignment="center" data-field="tanggal_respon" caption="Tgl Response" />
-            <DxColumn :width="150" alignment="center" data-field="tanggal_recovery" caption="Tgl Recovery" />
-            <DxColumn :width="170" alignment="center" data-field="durasi_respon" caption="Durasi Response Time" />
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery" caption="Durasi Recovery Time" />
-            <DxColumn :width="150" alignment="center" data-field="status" caption="Status" />
-            <DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking" />
-            <DxColumn :width="150" alignment="center" data-field="id_pelanggan" caption="IDPEL/NO METER" />
-            <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" />
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor" />
-            <DxColumn :width="170" alignment="center" data-field="posko" caption="Posko" />
-
-        </DxDataGrid>
-    </div> -->
-    <EmptyPage />
-</template>
-
-<script setup lang="ts">
-import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
-import { onMounted, ref } from 'vue'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import type { Data3 } from '@/types/gangguan'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import EmptyPage from '@/components/Pages/EmptyPage.vue'
-
-const data = ref<Data3[]>([])
-
-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 createDummy = () => {
-    for (let i = 0; i < 10; i++) {
-        data.value.push({
-            number: i + 1,
-            no_laporan: 'G5223091' + (900002 + i),
-            tanggal_laporan: '19/09/2023 12:26:42',
-            tanggal_respon: '19/09/2023 13:14:15',
-            tanggal_recovery: '19/09/2023 13:14:15',
-            durasi_respon: '0-0:47:32',
-            durasi_recovery: '0-0:49:35',
-            referensi_marking: '-',
-            status: 'Selesai',
-            id_pelanggan: '-',
-            nama_pelapor: 'Moegy',
-            alamat_pelapor: '-',
-            no_telp_pelapor: '085136661313',
-            keterangan_pelapor: '-',
-            posko: 'POSKO ULP UNGGARAN'
-        });
-    }
-}
-
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
-};
-
-onMounted(() => {
-    createDummy()
-})
-
-</script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Daftar/index.ts b/src/components/Pages/Gangguan/Daftar/index.ts
deleted file mode 100644
index c74a0e9..0000000
--- a/src/components/Pages/Gangguan/Daftar/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as GangguanDaftar1 } from './Daftar_1.vue'
-export { default as GangguanDaftar2 } from './Daftar_2.vue'
-export { default as GangguanDaftar3 } from './Daftar_3.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Daftar/Daftar_1.vue b/src/components/Pages/Gangguan/Table_1.vue
similarity index 100%
rename from src/components/Pages/Gangguan/Daftar/Daftar_1.vue
rename to src/components/Pages/Gangguan/Table_1.vue
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
new file mode 100644
index 0000000..f365c2c
--- /dev/null
+++ b/src/components/Pages/Gangguan/Table_2.vue
@@ -0,0 +1,38 @@
+<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 :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" />
+
+            <DxColumn :width="40" alignment="center" data-field="" data-type="number" caption="No" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Response" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Recovery" />
+            <DxColumn alignment="center" data-field="" caption="Jml Lapor" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Status" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="IDPEL/NO METER" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Posko" />
+
+        </DxDataGrid>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { DxDataGrid } from 'devextreme-vue'
+import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
new file mode 100644
index 0000000..7457e35
--- /dev/null
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -0,0 +1,37 @@
+<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 :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" />
+
+            <DxColumn :width="40" alignment="center" data-field="" data-type="number" caption="No" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Response" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Recovery" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Status" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Referensi Marking" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="IDPEL/NO METER" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Posko" />
+
+        </DxDataGrid>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { DxDataGrid } from 'devextreme-vue'
+import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_4.vue b/src/components/Pages/Gangguan/Table_4.vue
new file mode 100644
index 0000000..c80f3ed
--- /dev/null
+++ b/src/components/Pages/Gangguan/Table_4.vue
@@ -0,0 +1,38 @@
+<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 :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" />
+
+            <DxColumn :width="40" alignment="center" data-field="" data-type="number" caption="No" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Response" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Recovery" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Status" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Referensi Marking" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="IDPEL/NO METER" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Posko" />
+
+        </DxDataGrid>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { DxDataGrid } from 'devextreme-vue'
+import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
new file mode 100644
index 0000000..5a4a7be
--- /dev/null
+++ b/src/components/Pages/Gangguan/Table_5.vue
@@ -0,0 +1,37 @@
+<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 :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" />
+
+            <DxColumn :width="40" alignment="center" data-field="" data-type="number" caption="No" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Response" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Recovery" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Status" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="IDPEL/NO METER" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Posko" />
+
+        </DxDataGrid>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { DxDataGrid } from 'devextreme-vue'
+import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_6.vue b/src/components/Pages/Gangguan/Table_6.vue
new file mode 100644
index 0000000..d5d5c7b
--- /dev/null
+++ b/src/components/Pages/Gangguan/Table_6.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 :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" />
+
+            <DxColumn :width="40" alignment="center" data-field="" data-type="number" caption="No" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Status" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Response" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Recovery" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Media" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Media" />
+
+        </DxDataGrid>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { DxDataGrid } from 'devextreme-vue'
+import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
new file mode 100644
index 0000000..5a4a7be
--- /dev/null
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -0,0 +1,37 @@
+<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 :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" />
+
+            <DxColumn :width="40" alignment="center" data-field="" data-type="number" caption="No" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Response" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Recovery" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Status" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="IDPEL/NO METER" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Posko" />
+
+        </DxDataGrid>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { DxDataGrid } from 'devextreme-vue'
+import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/index.ts b/src/components/Pages/Gangguan/index.ts
new file mode 100644
index 0000000..d58539e
--- /dev/null
+++ b/src/components/Pages/Gangguan/index.ts
@@ -0,0 +1,7 @@
+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'
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index d56bed9..abc3c97 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -9,15 +9,17 @@ import WelcomePage from '@/components/Pages/Welcome.vue'
 import EmptyPage from '@/components/Pages/EmptyPage.vue'
 import qs from 'qs'
 import {
-  GangguanDaftar1,
-  GangguanDaftar2,
-  GangguanDaftar3
-} from '@/components/Pages/Gangguan/Daftar'
+  GangguanTable1,
+  GangguanTable2,
+  GangguanTable3,
+  GangguanTable4,
+  GangguanTable5,
+  GangguanTable6,
+  GangguanTable7,
+} from '@/components/Pages/Gangguan'
 import {
   GangguanRekap1,
 } from '@/components/Pages/Gangguan/Rekapitulasi'
-import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import Button from '@/components/Button.vue'
 
 export const routes: RouteRecordRaw[] = [
   {
@@ -41,38 +43,38 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Daftar Keluhan Dialihkan Ke Posko Lain | type-1',
-                component: GangguanDaftar1,
+                component: GangguanTable1,
                 props: true
               },
               {
                 path: '2',
                 name: 'Daftar Gangguan Melapor Lebih Dari 1 Kali',
-                component: GangguanDaftar2,
+                component: GangguanTable2,
               },
               {
                 path: '3',
                 name: 'Daftar Gangguan Response Time',
-                component: GangguanDaftar3,
+                component: GangguanTable3,
               },
               {
                 path: '4',
                 name: 'Daftar Gangguan Recovery Time',
-                component: GangguanDaftar3,
+                component: GangguanTable4,
               },
               {
                 path: '5',
                 name: 'Daftar Gangguan Selesai Tanpa ID Pelanggan',
-                component: GangguanDaftar3,
+                component: GangguanTable5,
               },
               {
                 path: '6',
                 name: 'Daftar Gangguan Berdasarkan Media',
-                component: GangguanDaftar3,
+                component: GangguanTable6,
               },
               {
                 path: '7',
                 name: 'Daftar Gangguan Diselesaikan Mobile APKT',
-                component: GangguanDaftar3,
+                component: GangguanTable7,
               },
             ],
           },
@@ -122,31 +124,26 @@ export const routes: RouteRecordRaw[] = [
               },
               {
                 path: '9',
-                name: 'Rekapitulasi Gangguan Per Status',
-                component: EmptyPage,
-              },
-              {
-                path: '10',
                 name: 'Rekapitulasi Gangguan Diselesaikan Mobile APKT',
                 component: EmptyPage,
               },
               {
-                path: '11',
+                path: '10',
                 name: 'Rekapitulasi Rating Per Posko',
                 component: EmptyPage,
               },
               {
-                path: '12',
+                path: '11',
                 name: 'Rekapitulasi Rating Per Regu',
                 component: EmptyPage,
               },
               {
-                path: '13',
+                path: '12',
                 name: 'Rekapitulasi Koreksi Transaksi Individual',
                 component: EmptyPage,
               },
               {
-                path: '14',
+                path: '13',
                 name: 'Rekapitulasi Cleansing Transaksi TM',
                 component: EmptyPage,
               },

From b42f2c003a6361a12ec44cf101aadaee87622326 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 31 Oct 2023 14:48:25 +0700
Subject: [PATCH 04/67] add table template for each page GangguanPage

---
 src/assets/css/base.css                       |   4 +-
 src/assets/css/style.css                      | 225 ++----------------
 src/assets/css/tailwind.css                   |   3 +
 .../Pages/Gangguan/Rekapitulasi/index.ts      |   1 -
 src/components/Pages/Gangguan/Table_1.vue     |  57 +++--
 src/components/Pages/Gangguan/Table_10.vue    | 118 +++++++++
 src/components/Pages/Gangguan/Table_11.vue    | 116 +++++++++
 src/components/Pages/Gangguan/Table_12.vue    | 117 +++++++++
 src/components/Pages/Gangguan/Table_13.vue    | 117 +++++++++
 src/components/Pages/Gangguan/Table_14.vue    |  77 ++++++
 src/components/Pages/Gangguan/Table_15.vue    |  67 ++++++
 src/components/Pages/Gangguan/Table_16.vue    | 183 ++++++++++++++
 src/components/Pages/Gangguan/Table_17.vue    | 145 +++++++++++
 src/components/Pages/Gangguan/Table_18.vue    | 109 +++++++++
 src/components/Pages/Gangguan/Table_19.vue    |  90 +++++++
 src/components/Pages/Gangguan/Table_2.vue     |  48 ++--
 src/components/Pages/Gangguan/Table_20.vue    |  90 +++++++
 src/components/Pages/Gangguan/Table_3.vue     |  46 ++--
 src/components/Pages/Gangguan/Table_4.vue     |  49 ++--
 src/components/Pages/Gangguan/Table_5.vue     |  46 ++--
 src/components/Pages/Gangguan/Table_6.vue     |  43 ++--
 src/components/Pages/Gangguan/Table_7.vue     |  46 ++--
 .../{Rekapitulasi/Rekap_1.vue => Table_8.vue} |  60 ++---
 src/components/Pages/Gangguan/Table_9.vue     | 117 +++++++++
 src/components/Pages/Gangguan/index.ts        |  15 +-
 src/router/index.ts                           |  42 ++--
 26 files changed, 1643 insertions(+), 388 deletions(-)
 delete mode 100644 src/components/Pages/Gangguan/Rekapitulasi/index.ts
 create mode 100644 src/components/Pages/Gangguan/Table_10.vue
 create mode 100644 src/components/Pages/Gangguan/Table_11.vue
 create mode 100644 src/components/Pages/Gangguan/Table_12.vue
 create mode 100644 src/components/Pages/Gangguan/Table_13.vue
 create mode 100644 src/components/Pages/Gangguan/Table_14.vue
 create mode 100644 src/components/Pages/Gangguan/Table_15.vue
 create mode 100644 src/components/Pages/Gangguan/Table_16.vue
 create mode 100644 src/components/Pages/Gangguan/Table_17.vue
 create mode 100644 src/components/Pages/Gangguan/Table_18.vue
 create mode 100644 src/components/Pages/Gangguan/Table_19.vue
 create mode 100644 src/components/Pages/Gangguan/Table_20.vue
 rename src/components/Pages/Gangguan/{Rekapitulasi/Rekap_1.vue => Table_8.vue} (69%)
 create mode 100644 src/components/Pages/Gangguan/Table_9.vue

diff --git a/src/assets/css/base.css b/src/assets/css/base.css
index b8039e7..18e2b8d 100644
--- a/src/assets/css/base.css
+++ b/src/assets/css/base.css
@@ -1,12 +1,14 @@
 /* Firefox */
 * {
   scrollbar-width: 6px;
-  scrollbar-color: var(--secondary) var(--primary);
+  scrollbar-height: 6px;
+  scrollbar-color: #9ca3af #cddee3;
 }
 
 /* Chrome, Edge, and Safari */
 ::-webkit-scrollbar {
   width: 6px;
+  height: 6px;
 }
 
 ::-webkit-scrollbar-track {
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 9265090..feba9f0 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -870,6 +870,15 @@ select {
   stroke: #fff;
 }
 
+.custom-table-column {
+  vertical-align: middle !important;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  --tw-text-opacity: 1;
+  color: rgb(1 36 45 / var(--tw-text-opacity));
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -995,12 +1004,8 @@ select {
   grid-column: span 7 / span 7;
 }
 
-.-m-1 {
-  margin: -0.25rem;
-}
-
-.m-1 {
-  margin: 0.25rem;
+.col-span-2 {
+  grid-column: span 2 / span 2;
 }
 
 .mx-2 {
@@ -1028,10 +1033,6 @@ select {
   margin-bottom: auto;
 }
 
-.\!mt-0 {
-  margin-top: 0px !important;
-}
-
 .-mr-1 {
   margin-right: -0.25rem;
 }
@@ -1068,10 +1069,6 @@ select {
   margin-left: 0.25rem;
 }
 
-.ml-1\.5 {
-  margin-left: 0.375rem;
-}
-
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -1092,10 +1089,6 @@ select {
   margin-right: 0.5rem;
 }
 
-.mr-4 {
-  margin-right: 1rem;
-}
-
 .mt-0 {
   margin-top: 0px;
 }
@@ -1163,6 +1156,10 @@ select {
   display: inline-flex;
 }
 
+.table-column {
+  display: table-column;
+}
+
 .grid {
   display: grid;
 }
@@ -1191,14 +1188,6 @@ select {
   height: 4rem;
 }
 
-.h-2 {
-  height: 0.5rem;
-}
-
-.h-3 {
-  height: 0.75rem;
-}
-
 .h-4 {
   height: 1rem;
 }
@@ -1296,22 +1285,10 @@ select {
   width: 4rem;
 }
 
-.w-2 {
-  width: 0.5rem;
-}
-
-.w-3 {
-  width: 0.75rem;
-}
-
 .w-4 {
   width: 1rem;
 }
 
-.w-40 {
-  width: 10rem;
-}
-
 .w-5 {
   width: 1.25rem;
 }
@@ -1352,10 +1329,6 @@ select {
   width: 100%;
 }
 
-.w-px {
-  width: 1px;
-}
-
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1400,10 +1373,6 @@ select {
   transform-origin: top left;
 }
 
-.origin-top-right {
-  transform-origin: top right;
-}
-
 .-translate-x-full {
   --tw-translate-x: -100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1545,10 +1514,6 @@ select {
   gap: 0.75rem;
 }
 
-.gap-4 {
-  gap: 1rem;
-}
-
 .gap-x-6 {
   -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
@@ -1586,12 +1551,6 @@ select {
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
 
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
-
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1685,16 +1644,6 @@ select {
   border-width: 0px;
 }
 
-.border-x {
-  border-left-width: 1px;
-  border-right-width: 1px;
-}
-
-.border-y {
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-}
-
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1707,10 +1656,6 @@ select {
   border-right-width: 1px;
 }
 
-.border-r-2 {
-  border-right-width: 2px;
-}
-
 .border-t {
   border-top-width: 1px;
 }
@@ -1727,11 +1672,6 @@ select {
   border-color: rgb(0 0 0 / .1);
 }
 
-.border-gray-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-border-opacity));
-}
-
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -1761,11 +1701,6 @@ select {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
-.bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
-
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -1836,10 +1771,6 @@ select {
   background-color: rgb(13 148 136 / var(--tw-bg-opacity));
 }
 
-.bg-transparent {
-  background-color: transparent;
-}
-
 .bg-vtd-primary-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(205 222 227 / var(--tw-bg-opacity));
@@ -1955,21 +1886,6 @@ select {
   padding: 1.25rem;
 }
 
-.\!px-2 {
-  padding-left: 0.5rem !important;
-  padding-right: 0.5rem !important;
-}
-
-.\!py-0 {
-  padding-top: 0px !important;
-  padding-bottom: 0px !important;
-}
-
-.\!py-1 {
-  padding-top: 0.25rem !important;
-  padding-bottom: 0.25rem !important;
-}
-
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -2015,11 +1931,6 @@ select {
   padding-right: 1.5rem;
 }
 
-.py-0 {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -2105,10 +2016,6 @@ select {
   padding-right: 1.25rem;
 }
 
-.pr-6 {
-  padding-right: 1.5rem;
-}
-
 .pt-0 {
   padding-top: 0px;
 }
@@ -2147,10 +2054,6 @@ select {
   line-height: 2.25rem;
 }
 
-.text-\[10px\] {
-  font-size: 10px;
-}
-
 .text-\[8px\] {
   font-size: 8px;
 }
@@ -2213,11 +2116,6 @@ select {
   font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
 }
 
-.tabular-nums {
-  --tw-numeric-spacing: tabular-nums;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
-}
-
 .leading-5 {
   line-height: 1.25rem;
 }
@@ -2246,16 +2144,6 @@ select {
   letter-spacing: 0.025em;
 }
 
-.\!text-dark {
-  --tw-text-opacity: 1 !important;
-  color: rgb(21 22 23 / var(--tw-text-opacity)) !important;
-}
-
-.\!text-white {
-  --tw-text-opacity: 1 !important;
-  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
-}
-
 .text-aside {
   --tw-text-opacity: 1;
   color: rgb(46 53 54 / var(--tw-text-opacity));
@@ -2351,11 +2239,6 @@ select {
   color: rgb(1 36 45 / var(--tw-text-opacity));
 }
 
-.text-primary-900 {
-  --tw-text-opacity: 1;
-  color: rgb(1 18 23 / var(--tw-text-opacity));
-}
-
 .text-red-400 {
   --tw-text-opacity: 1;
   color: rgb(255 51 51 / var(--tw-text-opacity));
@@ -2527,11 +2410,6 @@ select {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.drop-shadow-sm {
-  --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -2638,26 +2516,11 @@ select {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
-.placeholder\:text-gray-600::-moz-placeholder {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
-}
-
-.placeholder\:text-gray-600::placeholder {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
-}
-
 .hover\:border-primary-500:hover {
   --tw-border-opacity: 1;
   border-color: rgb(3 91 113 / var(--tw-border-opacity));
 }
 
-.hover\:bg-gray-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -2703,21 +2566,6 @@ select {
   background-color: rgb(255 255 0 / var(--tw-bg-opacity));
 }
 
-.hover\:text-gray-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
-.hover\:text-gray-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-}
-
-.hover\:text-gray-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
 .hover\:text-primary-500:hover {
   --tw-text-opacity: 1;
   color: rgb(3 91 113 / var(--tw-text-opacity));
@@ -2732,11 +2580,6 @@ select {
   border-width: 0px;
 }
 
-.focus\:border-gray-100:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-border-opacity));
-}
-
 .focus\:border-vtd-primary-300:focus {
   --tw-border-opacity: 1;
   border-color: rgb(104 157 170 / var(--tw-border-opacity));
@@ -3063,10 +2906,6 @@ select {
     margin-top: 1.5rem;
   }
 
-  .sm\:block {
-    display: block;
-  }
-
   .sm\:flex {
     display: flex;
   }
@@ -3331,18 +3170,6 @@ select {
     width: 440px;
   }
 
-  .md\:max-w-\[220px\] {
-    max-width: 220px;
-  }
-
-  .md\:flex-1 {
-    flex: 1 1 0%;
-  }
-
-  .md\:flex-none {
-    flex: none;
-  }
-
   .md\:flex-col {
     flex-direction: column;
   }
@@ -3399,14 +3226,6 @@ select {
     margin-right: 0.25rem;
   }
 
-  .lg\:mr-2 {
-    margin-right: 0.5rem;
-  }
-
-  .lg\:mt-0 {
-    margin-top: 0px;
-  }
-
   .lg\:mt-12 {
     margin-top: 3rem;
   }
@@ -3431,11 +3250,6 @@ select {
     width: 20rem;
   }
 
-  .lg\:w-fit {
-    width: -moz-fit-content;
-    width: fit-content;
-  }
-
   .lg\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -3444,10 +3258,6 @@ select {
     flex-wrap: nowrap;
   }
 
-  .lg\:justify-between {
-    justify-content: space-between;
-  }
-
   .lg\:border-b-0 {
     border-bottom-width: 0px;
   }
@@ -3456,11 +3266,6 @@ select {
     border-right-width: 1px;
   }
 
-  .lg\:px-4 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
index 64e37b3..cb1564b 100644
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@@ -35,4 +35,7 @@
     .aside-single-item-icon-inactive{
         @apply aside-single-item-icon text-aside group-hover:stroke-white;
     }
+    .custom-table-column {
+        @apply !align-middle text-sm font-medium text-primary-800;
+    }
 }
diff --git a/src/components/Pages/Gangguan/Rekapitulasi/index.ts b/src/components/Pages/Gangguan/Rekapitulasi/index.ts
deleted file mode 100644
index 0f1e6c0..0000000
--- a/src/components/Pages/Gangguan/Rekapitulasi/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as GangguanRekap1 } from './Rekap_1.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 f2c94c8..02f346b 100644
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -11,27 +11,44 @@
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-            <DxColumn :width="40" alignment="center" data-field="number" data-type="number" caption="No" />
-            <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
-                cell-template="no-laporan" />
+            <DxColumn css-class="custom-table-column" :width="40" 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" />
 
-            <DxColumn :width="150" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan" />
-            <DxColumn :width="150" alignment="center" data-field="tanggal_laporan" caption="Tgl Lapor" />
-            <DxColumn :width="150" alignment="center" data-field="tanggal_dialihkan" caption="Tgl Dialihkan" />
-            <DxColumn :width="150" alignment="center" data-field="tanggal_respon" caption="Tgl Response" />
-            <DxColumn :width="150" alignment="center" data-field="tanggal_recovery" caption="Tgl Recovery" />
-            <DxColumn :width="170" alignment="center" data-field="durasi_respon" caption="Durasi Response Time" />
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery" caption="Durasi Recovery Time" />
-            <DxColumn :width="170" alignment="center" data-field="posko_awal" caption="Posko Awal" />
-            <DxColumn :width="170" alignment="center" data-field="posko_tujuan" caption="Posko Tujuan" />
-            <DxColumn :width="150" alignment="center" data-field="status" caption="Status" />
-            <DxColumn :width="150" alignment="center" data-field="id_pelanggan" caption="IDPEL/NO METER" />
-            <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" />
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="sumber_laporan" caption="Sumber Lapor" />
-            <DxColumn :width="170" alignment="center" data-field="posko" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
+                caption="Pembuat Laporan" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_laporan"
+                caption="Tgl Lapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_dialihkan"
+                caption="Tgl Dialihkan" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_respon"
+                caption="Tgl Response" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_recovery"
+                caption="Tgl Recovery" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon"
+                caption="Durasi Response Time" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery"
+                caption="Durasi Recovery Time" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_awal"
+                caption="Posko Awal" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan"
+                caption="Posko Tujuan" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status"
+                caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="id_pelanggan"
+                caption="IDPEL/NO METER" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
+                caption="Nama Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
+                caption="Alamat Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
+                caption="No Telp Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
+                caption="Keterangan Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="sumber_laporan"
+                caption="Sumber Lapor" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
             <template #no-laporan="{ data }">
                 <span class="cursor-pointer" @click="showData(data.text)">
                     {{ data.text }}
diff --git a/src/components/Pages/Gangguan/Table_10.vue b/src/components/Pages/Gangguan/Table_10.vue
new file mode 100644
index 0000000..0ef10a0
--- /dev/null
+++ b/src/components/Pages/Gangguan/Table_10.vue
@@ -0,0 +1,118 @@
+<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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Sub Kelompok (Equipment)"
+                css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                    css-class="custom-table-column" />
+                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+            <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        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/Gangguan/Table_11.vue b/src/components/Pages/Gangguan/Table_11.vue
new file mode 100644
index 0000000..3817136
--- /dev/null
+++ b/src/components/Pages/Gangguan/Table_11.vue
@@ -0,0 +1,116 @@
+<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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Posko" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                    css-class="custom-table-column" />
+                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+            <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        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/Gangguan/Table_12.vue b/src/components/Pages/Gangguan/Table_12.vue
new file mode 100644
index 0000000..eaef9f3
--- /dev/null
+++ b/src/components/Pages/Gangguan/Table_12.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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                    css-class="custom-table-column" />
+                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+            <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        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/Gangguan/Table_13.vue b/src/components/Pages/Gangguan/Table_13.vue
new file mode 100644
index 0000000..51830c5
--- /dev/null
+++ b/src/components/Pages/Gangguan/Table_13.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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tanggal Lapor"
+                css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                    css-class="custom-table-column" />
+                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+            <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        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/Gangguan/Table_14.vue b/src/components/Pages/Gangguan/Table_14.vue
new file mode 100644
index 0000000..f4cde8a
--- /dev/null
+++ b/src/components/Pages/Gangguan/Table_14.vue
@@ -0,0 +1,77 @@
+<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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+                    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/Gangguan/Table_15.vue b/src/components/Pages/Gangguan/Table_15.vue
new file mode 100644
index 0000000..5d17283
--- /dev/null
+++ b/src/components/Pages/Gangguan/Table_15.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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="" caption="Nama UP3" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="" caption="Nama Posko" css-class="custom-table-column" />
+            <DxColumn :width="100" alignment="center" data-field="" caption="Posko IN" css-class="custom-table-column" />
+            <DxColumn :width="100" alignment="center" data-field="" caption="Posko OUT" 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/Gangguan/Table_16.vue b/src/components/Pages/Gangguan/Table_16.vue
new file mode 100644
index 0000000..1b694c6
--- /dev/null
+++ b/src/components/Pages/Gangguan/Table_16.vue
@@ -0,0 +1,183 @@
+<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="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>
+            <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" />
+            </DxColumn>
+            <DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" caption="c" css-class="custom-table-column" />
+            </DxColumn>
+
+            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" caption="d=(e+g)" css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
+                        <DxColumn :width="150" alignment="center" caption="e" css-class="custom-table-column" />
+                    </DxColumn>
+                    <DxColumn alignment="center" caption="%" css-class="custom-table-column">
+                        <DxColumn :width="150" alignment="center" caption="f=(e/d)*100" css-class="custom-table-column" />
+                    </DxColumn>
+                </DxColumn>
+                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
+                        <DxColumn :width="150" alignment="center" caption="g" css-class="custom-table-column" />
+                    </DxColumn>
+                    <DxColumn alignment="center" caption="%" css-class="custom-table-column">
+                        <DxColumn :width="150" alignment="center" caption="h=(g/d)*100" css-class="custom-table-column" />
+                    </DxColumn>
+                </DxColumn>
+            </DxColumn>
+
+            <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Mobile" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
+                        <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+                            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                                <DxColumn :width="150" alignment="center" caption="i" css-class="custom-table-column" />
+                            </DxColumn>
+                            <DxColumn alignment="center" caption="%" css-class="custom-table-column">
+                                <DxColumn :width="150" alignment="center" caption="j=(i/d)*100"
+                                    css-class="custom-table-column" />
+                            </DxColumn>
+                        </DxColumn>
+
+                        <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
+                            <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
+                                <DxColumn :width="150" alignment="center" caption="k" css-class="custom-table-column" />
+                            </DxColumn>
+                            <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
+                                <DxColumn :width="150" alignment="center" caption="l" css-class="custom-table-column" />
+                            </DxColumn>
+                        </DxColumn>
+                    </DxColumn>
+
+                    <DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
+                        <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+                            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                                <DxColumn :width="150" alignment="center" caption="m" css-class="custom-table-column" />
+                            </DxColumn>
+                            <DxColumn alignment="center" caption="%" css-class="custom-table-column">
+                                <DxColumn :width="150" alignment="center" caption="n=(m/d)*100"
+                                    css-class="custom-table-column" />
+                            </DxColumn>
+                        </DxColumn>
+
+                        <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
+                            <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
+                                <DxColumn :width="150" alignment="center" caption="o" css-class="custom-table-column" />
+                            </DxColumn>
+                            <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
+                                <DxColumn :width="150" alignment="center" caption="p" css-class="custom-table-column" />
+                            </DxColumn>
+                        </DxColumn>
+                    </DxColumn>
+                </DxColumn>
+
+                <DxColumn alignment="center" caption="Non Mobile" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
+                        <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+                            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                                <DxColumn :width="150" alignment="center" caption="q" css-class="custom-table-column" />
+                            </DxColumn>
+                            <DxColumn alignment="center" caption="%" css-class="custom-table-column">
+                                <DxColumn :width="150" alignment="center" caption="r=(q/d)*100"
+                                    css-class="custom-table-column" />
+                            </DxColumn>
+                        </DxColumn>
+
+                        <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
+                            <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
+                                <DxColumn :width="150" alignment="center" caption="s" css-class="custom-table-column" />
+                            </DxColumn>
+                            <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
+                                <DxColumn :width="150" alignment="center" caption="t" css-class="custom-table-column" />
+                            </DxColumn>
+                        </DxColumn>
+                    </DxColumn>
+
+                    <DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
+                        <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
+                            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                                <DxColumn :width="150" alignment="center" caption="u" css-class="custom-table-column" />
+                            </DxColumn>
+                            <DxColumn alignment="center" caption="%" css-class="custom-table-column">
+                                <DxColumn :width="150" alignment="center" caption="v=(u/d)*100"
+                                    css-class="custom-table-column" />
+                            </DxColumn>
+                        </DxColumn>
+
+                        <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
+                            <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
+                                <DxColumn :width="150" alignment="center" caption="w" css-class="custom-table-column" />
+                            </DxColumn>
+                            <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
+                                <DxColumn :width="150" alignment="center" caption="x" css-class="custom-table-column" />
+                            </DxColumn>
+                        </DxColumn>
+                    </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/Gangguan/Table_17.vue b/src/components/Pages/Gangguan/Table_17.vue
new file mode 100644
index 0000000..64ecfc5
--- /dev/null
+++ b/src/components/Pages/Gangguan/Table_17.vue
@@ -0,0 +1,145 @@
+<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">
+            <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="40" 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" />
+            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                    css-class="custom-table-column" />
+                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+            <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="1"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="2"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="3"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="4"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="5"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Index"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+
+            <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    css-class="custom-table-column" />
+            </DxColumn>
+
+        </DxDataGrid>
+    </div>
+</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 { onMounted, ref } from 'vue'
+import { jsPDF } from 'jspdf'
+import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import type { Rekap1 } from '@/types/gangguan'
+import { saveAs } from 'file-saver'
+import { Workbook } from 'exceljs'
+
+const data = ref<Rekap1[]>([])
+
+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 createDummy = () => {
+    for (let i = 0; i < 100; i++) {
+        data.value.push({
+            id: i,
+            nama_unit: '-',
+            total: 0,
+            selesai: '-',
+            in_progress: 0,
+            avg: 0,
+            max: 0,
+            min: 0,
+            dt_avg: 0,
+            dt_max: 0,
+            dt_min: 0,
+            dt_more_sla: 0,
+            dt_less_sla: 0,
+            rt_avg: 0,
+            rt_max: 0,
+            rt_min: 0,
+            rt_more_sla: 0,
+            rt_less_sla: 0,
+            ret_avg: 0,
+            ret_max: 0,
+            ret_min: 0,
+            ret_more_sla: 0,
+            ret_less_sla: 0,
+        });
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+}
+
+onMounted(() => {
+    createDummy()
+})
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_18.vue b/src/components/Pages/Gangguan/Table_18.vue
new file mode 100644
index 0000000..8d20787
--- /dev/null
+++ b/src/components/Pages/Gangguan/Table_18.vue
@@ -0,0 +1,109 @@
+<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">
+            <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="40" 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" />
+            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                    css-class="custom-table-column" />
+                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+            <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="1"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="2"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="3"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="4"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="5"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Index"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+
+            <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    css-class="custom-table-column" />
+            </DxColumn>
+
+        </DxDataGrid>
+    </div>
+</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/Gangguan/Table_19.vue b/src/components/Pages/Gangguan/Table_19.vue
new file mode 100644
index 0000000..14ad8a9
--- /dev/null
+++ b/src/components/Pages/Gangguan/Table_19.vue
@@ -0,0 +1,90 @@
+<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">
+            <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="Bulan" css-class="custom-table-column">
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Januari"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Februari"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Maret"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="April"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Mei"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juni"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juli"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Agustus"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="September"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Oktober"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="November"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Desember"
+                    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/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
index f365c2c..8b6daf8 100644
--- a/src/components/Pages/Gangguan/Table_2.vue
+++ b/src/components/Pages/Gangguan/Table_2.vue
@@ -10,26 +10,36 @@
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-            <DxColumn :width="40" alignment="center" data-field="" data-type="number" caption="No" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Response" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Recovery" />
-            <DxColumn alignment="center" data-field="" caption="Jml Lapor" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Status" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="IDPEL/NO METER" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="40" 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" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Tgl Response" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Tgl Recovery" />
+            <DxColumn css-class="custom-table-column" alignment="center" data-field="" caption="Jml Lapor" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Durasi Response Time" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Durasi Recovery Time" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="IDPEL/NO METER" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Nama Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Alamat Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="No Telp Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Keterangan Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Sumber Lapor" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
 
-        </DxDataGrid>
-    </div>
-</template>
+    </DxDataGrid>
+</div></template>
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Table_20.vue b/src/components/Pages/Gangguan/Table_20.vue
new file mode 100644
index 0000000..14ad8a9
--- /dev/null
+++ b/src/components/Pages/Gangguan/Table_20.vue
@@ -0,0 +1,90 @@
+<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">
+            <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="Bulan" css-class="custom-table-column">
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Januari"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Februari"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Maret"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="April"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Mei"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juni"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juli"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Agustus"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="September"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Oktober"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="November"
+                    css-class="custom-table-column" />
+                <DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Desember"
+                    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/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index 7457e35..20d0c38 100644
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -10,25 +10,35 @@
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-            <DxColumn :width="40" alignment="center" data-field="" data-type="number" caption="No" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Response" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Recovery" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Status" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Referensi Marking" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="IDPEL/NO METER" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="40" 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" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Tgl Response" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Tgl Recovery" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Durasi Response Time" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Durasi Recovery Time" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Referensi Marking" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="IDPEL/NO METER" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Nama Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Alamat Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="No Telp Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Keterangan Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
 
-        </DxDataGrid>
-    </div>
-</template>
+    </DxDataGrid>
+</div></template>
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Table_4.vue b/src/components/Pages/Gangguan/Table_4.vue
index c80f3ed..783e747 100644
--- a/src/components/Pages/Gangguan/Table_4.vue
+++ b/src/components/Pages/Gangguan/Table_4.vue
@@ -10,26 +10,37 @@
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-            <DxColumn :width="40" alignment="center" data-field="" data-type="number" caption="No" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Response" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Recovery" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Status" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Referensi Marking" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="IDPEL/NO METER" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="40" 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" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Tgl Response" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Tgl Recovery" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Durasi Response Time" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Durasi Recovery Time" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Referensi Marking" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="IDPEL/NO METER" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Nama Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Alamat Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="No Telp Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Keterangan Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Sumber Lapor" />
+        <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
 
-        </DxDataGrid>
-    </div>
-</template>
+    </DxDataGrid>
+</div></template>
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
index 5a4a7be..28739f7 100644
--- a/src/components/Pages/Gangguan/Table_5.vue
+++ b/src/components/Pages/Gangguan/Table_5.vue
@@ -10,25 +10,35 @@
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-            <DxColumn :width="40" alignment="center" data-field="" data-type="number" caption="No" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Response" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Recovery" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Status" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="IDPEL/NO METER" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="40" 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" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Tgl Response" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Tgl Recovery" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Durasi Response Time" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Durasi Recovery Time" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="IDPEL/NO METER" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Nama Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Alamat Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="No Telp Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Keterangan Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Sumber Lapor" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
 
-        </DxDataGrid>
-    </div>
-</template>
+    </DxDataGrid>
+</div></template>
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Table_6.vue b/src/components/Pages/Gangguan/Table_6.vue
index d5d5c7b..5c39ffe 100644
--- a/src/components/Pages/Gangguan/Table_6.vue
+++ b/src/components/Pages/Gangguan/Table_6.vue
@@ -10,24 +10,33 @@
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-            <DxColumn :width="40" alignment="center" data-field="" data-type="number" caption="No" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Status" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Response" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Recovery" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Media" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Media" />
+            <DxColumn css-class="custom-table-column" :width="40" 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="Nama Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Alamat Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="No Telp Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Keterangan Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Tgl Response" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Tgl Recovery" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Durasi Response Time" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Durasi Recovery Time" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Media" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Keterangan Media" />
 
-        </DxDataGrid>
-    </div>
-</template>
+    </DxDataGrid>
+</div></template>
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
index 5a4a7be..28739f7 100644
--- a/src/components/Pages/Gangguan/Table_7.vue
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -10,25 +10,35 @@
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-            <DxColumn :width="40" alignment="center" data-field="" data-type="number" caption="No" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Response" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Recovery" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Status" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="IDPEL/NO METER" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="40" 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" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Tgl Response" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Tgl Recovery" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Durasi Response Time" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Durasi Recovery Time" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="IDPEL/NO METER" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Nama Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Alamat Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="No Telp Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Keterangan Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Sumber Lapor" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
 
-        </DxDataGrid>
-    </div>
-</template>
+    </DxDataGrid>
+</div></template>
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Rekapitulasi/Rekap_1.vue b/src/components/Pages/Gangguan/Table_8.vue
similarity index 69%
rename from src/components/Pages/Gangguan/Rekapitulasi/Rekap_1.vue
rename to src/components/Pages/Gangguan/Table_8.vue
index 9709634..efe894a 100644
--- a/src/components/Pages/Gangguan/Rekapitulasi/Rekap_1.vue
+++ b/src/components/Pages/Gangguan/Table_8.vue
@@ -1,9 +1,8 @@
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget">
+        <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">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -12,51 +11,52 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                :allow-resizing="false" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Selesai" :allow-resizing="false" />
-            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                :allow-resizing="false" />
+                :allow-resizing="false" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Selesai" :allow-resizing="false"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" :allow-resizing="false"
+                css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="In Progress"
-                :allow-resizing="false" />
-            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                :allow-resizing="false" />
-            <DxColumn alignment="center" caption="Dispatching Time">
+                :allow-resizing="false" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" :allow-resizing="false"
+                css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
                 <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                    :allow-resizing="false" />
+                    :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
-                    :allow-resizing="false" />
+                    :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
-                    :allow-resizing="false" />
+                    :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
-                    :allow-resizing="false" />
+                    :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                    :allow-resizing="false" />
+                    :allow-resizing="false" css-class="custom-table-column" />
             </DxColumn>
-            <DxColumn alignment="center" caption="Response Time">
+            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
                 <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                    :allow-resizing="false" />
+                    :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
-                    :allow-resizing="false" />
+                    :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
-                    :allow-resizing="false" />
+                    :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
-                    :allow-resizing="false" />
+                    :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                    :allow-resizing="false" />
+                    :allow-resizing="false" css-class="custom-table-column" />
             </DxColumn>
-            <DxColumn alignment="center" caption="Recovery Time">
+            <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
                 <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                    :allow-resizing="false" />
+                    :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
-                    :allow-resizing="false" />
+                    :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
-                    :allow-resizing="false" />
+                    :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
-                    :allow-resizing="false" />
+                    :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                    :allow-resizing="false" />
+                    :allow-resizing="false" css-class="custom-table-column" />
             </DxColumn>
         </DxDataGrid>
     </div>
diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
new file mode 100644
index 0000000..17c2939
--- /dev/null
+++ b/src/components/Pages/Gangguan/Table_9.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">
+            <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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Jenis Gangguan"
+                css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                    css-class="custom-table-column" />
+                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+            <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        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/Gangguan/index.ts b/src/components/Pages/Gangguan/index.ts
index d58539e..cf7e2bf 100644
--- a/src/components/Pages/Gangguan/index.ts
+++ b/src/components/Pages/Gangguan/index.ts
@@ -4,4 +4,17 @@ 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'
\ No newline at end of file
+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
diff --git a/src/router/index.ts b/src/router/index.ts
index abc3c97..0f5e9fb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -16,10 +16,20 @@ import {
   GangguanTable5,
   GangguanTable6,
   GangguanTable7,
+  GangguanTable8,
+  GangguanTable9,
+  GangguanTable10,
+  GangguanTable11,
+  GangguanTable12,
+  GangguanTable13,
+  GangguanTable14,
+  GangguanTable15,
+  GangguanTable16,
+  GangguanTable17,
+  GangguanTable18,
+  GangguanTable19,
+  GangguanTable20,
 } from '@/components/Pages/Gangguan'
-import {
-  GangguanRekap1,
-} from '@/components/Pages/Gangguan/Rekapitulasi'
 
 export const routes: RouteRecordRaw[] = [
   {
@@ -85,67 +95,67 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Rekapitulasi Gangguan All',
-                component: GangguanRekap1,
+                component: GangguanTable8,
               },
               {
                 path: '2',
                 name: 'Rekapitulasi Gangguan/Jenis Gangguan',
-                component: EmptyPage,
+                component: GangguanTable9,
               },
               {
                 path: '3',
                 name: 'Rekapitulasi Gangguan/Jenis Gangguan SE 004',
-                component: EmptyPage,
+                component: GangguanTable10,
               },
               {
                 path: '4',
                 name: 'Rekapitulasi Gangguan Per Posko',
-                component: EmptyPage,
+                component: GangguanTable11,
               },
               {
                 path: '5',
                 name: 'Rekapitulasi Gangguan Per Regu',
-                component: EmptyPage,
+                component: GangguanTable12,
               },
               {
                 path: '6',
                 name: 'Rekapitulasi Gangguan Per Tanggal',
-                component: EmptyPage,
+                component: GangguanTable13,
               },
               {
                 path: '7',
                 name: 'Rekapitulasi Gangguan Berdasarkan Media',
-                component: EmptyPage,
+                component: GangguanTable14,
               },
               {
                 path: '8',
                 name: 'Rekapitulasi Gangguan Alih  Posko',
-                component: EmptyPage,
+                component: GangguanTable15,
               },
               {
                 path: '9',
                 name: 'Rekapitulasi Gangguan Diselesaikan Mobile APKT',
-                component: EmptyPage,
+                component: GangguanTable16,
               },
               {
                 path: '10',
                 name: 'Rekapitulasi Rating Per Posko',
-                component: EmptyPage,
+                component: GangguanTable17,
               },
               {
                 path: '11',
                 name: 'Rekapitulasi Rating Per Regu',
-                component: EmptyPage,
+                component: GangguanTable18,
               },
               {
                 path: '12',
                 name: 'Rekapitulasi Koreksi Transaksi Individual',
-                component: EmptyPage,
+                component: GangguanTable19,
               },
               {
                 path: '13',
                 name: 'Rekapitulasi Cleansing Transaksi TM',
-                component: EmptyPage,
+                component: GangguanTable20,
               },
             ],
           }

From fbbda2e9d148b0d91563d6eabf4e61f9d339f310 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 31 Oct 2023 16:21:34 +0700
Subject: [PATCH 05/67] add file table template for each KeluhanPage content

---
 src/components/Pages/Keluhan/Table_1.vue  | 77 +++++++++++++++++++++++
 src/components/Pages/Keluhan/Table_10.vue | 77 +++++++++++++++++++++++
 src/components/Pages/Keluhan/Table_11.vue | 77 +++++++++++++++++++++++
 src/components/Pages/Keluhan/Table_12.vue | 77 +++++++++++++++++++++++
 src/components/Pages/Keluhan/Table_13.vue | 77 +++++++++++++++++++++++
 src/components/Pages/Keluhan/Table_14.vue | 77 +++++++++++++++++++++++
 src/components/Pages/Keluhan/Table_15.vue | 77 +++++++++++++++++++++++
 src/components/Pages/Keluhan/Table_2.vue  | 77 +++++++++++++++++++++++
 src/components/Pages/Keluhan/Table_3.vue  | 77 +++++++++++++++++++++++
 src/components/Pages/Keluhan/Table_4.vue  | 77 +++++++++++++++++++++++
 src/components/Pages/Keluhan/Table_5.vue  | 77 +++++++++++++++++++++++
 src/components/Pages/Keluhan/Table_6.vue  | 77 +++++++++++++++++++++++
 src/components/Pages/Keluhan/Table_7.vue  | 77 +++++++++++++++++++++++
 src/components/Pages/Keluhan/Table_8.vue  | 77 +++++++++++++++++++++++
 src/components/Pages/Keluhan/Table_9.vue  | 77 +++++++++++++++++++++++
 src/components/Pages/Keluhan/index.ts     | 15 +++++
 src/router/index.ts                       | 47 +++++++++-----
 17 files changed, 1202 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Pages/Keluhan/Table_1.vue
 create mode 100644 src/components/Pages/Keluhan/Table_10.vue
 create mode 100644 src/components/Pages/Keluhan/Table_11.vue
 create mode 100644 src/components/Pages/Keluhan/Table_12.vue
 create mode 100644 src/components/Pages/Keluhan/Table_13.vue
 create mode 100644 src/components/Pages/Keluhan/Table_14.vue
 create mode 100644 src/components/Pages/Keluhan/Table_15.vue
 create mode 100644 src/components/Pages/Keluhan/Table_2.vue
 create mode 100644 src/components/Pages/Keluhan/Table_3.vue
 create mode 100644 src/components/Pages/Keluhan/Table_4.vue
 create mode 100644 src/components/Pages/Keluhan/Table_5.vue
 create mode 100644 src/components/Pages/Keluhan/Table_6.vue
 create mode 100644 src/components/Pages/Keluhan/Table_7.vue
 create mode 100644 src/components/Pages/Keluhan/Table_8.vue
 create mode 100644 src/components/Pages/Keluhan/Table_9.vue
 create mode 100644 src/components/Pages/Keluhan/index.ts

diff --git a/src/components/Pages/Keluhan/Table_1.vue b/src/components/Pages/Keluhan/Table_1.vue
new file mode 100644
index 0000000..f4cde8a
--- /dev/null
+++ b/src/components/Pages/Keluhan/Table_1.vue
@@ -0,0 +1,77 @@
+<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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+                    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/Keluhan/Table_10.vue b/src/components/Pages/Keluhan/Table_10.vue
new file mode 100644
index 0000000..f4cde8a
--- /dev/null
+++ b/src/components/Pages/Keluhan/Table_10.vue
@@ -0,0 +1,77 @@
+<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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+                    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/Keluhan/Table_11.vue b/src/components/Pages/Keluhan/Table_11.vue
new file mode 100644
index 0000000..f4cde8a
--- /dev/null
+++ b/src/components/Pages/Keluhan/Table_11.vue
@@ -0,0 +1,77 @@
+<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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+                    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/Keluhan/Table_12.vue b/src/components/Pages/Keluhan/Table_12.vue
new file mode 100644
index 0000000..f4cde8a
--- /dev/null
+++ b/src/components/Pages/Keluhan/Table_12.vue
@@ -0,0 +1,77 @@
+<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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+                    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/Keluhan/Table_13.vue b/src/components/Pages/Keluhan/Table_13.vue
new file mode 100644
index 0000000..f4cde8a
--- /dev/null
+++ b/src/components/Pages/Keluhan/Table_13.vue
@@ -0,0 +1,77 @@
+<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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+                    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/Keluhan/Table_14.vue b/src/components/Pages/Keluhan/Table_14.vue
new file mode 100644
index 0000000..f4cde8a
--- /dev/null
+++ b/src/components/Pages/Keluhan/Table_14.vue
@@ -0,0 +1,77 @@
+<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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+                    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/Keluhan/Table_15.vue b/src/components/Pages/Keluhan/Table_15.vue
new file mode 100644
index 0000000..f4cde8a
--- /dev/null
+++ b/src/components/Pages/Keluhan/Table_15.vue
@@ -0,0 +1,77 @@
+<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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+                    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/Keluhan/Table_2.vue b/src/components/Pages/Keluhan/Table_2.vue
new file mode 100644
index 0000000..f4cde8a
--- /dev/null
+++ b/src/components/Pages/Keluhan/Table_2.vue
@@ -0,0 +1,77 @@
+<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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+                    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/Keluhan/Table_3.vue b/src/components/Pages/Keluhan/Table_3.vue
new file mode 100644
index 0000000..f4cde8a
--- /dev/null
+++ b/src/components/Pages/Keluhan/Table_3.vue
@@ -0,0 +1,77 @@
+<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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+                    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/Keluhan/Table_4.vue b/src/components/Pages/Keluhan/Table_4.vue
new file mode 100644
index 0000000..f4cde8a
--- /dev/null
+++ b/src/components/Pages/Keluhan/Table_4.vue
@@ -0,0 +1,77 @@
+<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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+                    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/Keluhan/Table_5.vue b/src/components/Pages/Keluhan/Table_5.vue
new file mode 100644
index 0000000..f4cde8a
--- /dev/null
+++ b/src/components/Pages/Keluhan/Table_5.vue
@@ -0,0 +1,77 @@
+<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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+                    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/Keluhan/Table_6.vue b/src/components/Pages/Keluhan/Table_6.vue
new file mode 100644
index 0000000..f4cde8a
--- /dev/null
+++ b/src/components/Pages/Keluhan/Table_6.vue
@@ -0,0 +1,77 @@
+<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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+                    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/Keluhan/Table_7.vue b/src/components/Pages/Keluhan/Table_7.vue
new file mode 100644
index 0000000..f4cde8a
--- /dev/null
+++ b/src/components/Pages/Keluhan/Table_7.vue
@@ -0,0 +1,77 @@
+<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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+                    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/Keluhan/Table_8.vue b/src/components/Pages/Keluhan/Table_8.vue
new file mode 100644
index 0000000..f4cde8a
--- /dev/null
+++ b/src/components/Pages/Keluhan/Table_8.vue
@@ -0,0 +1,77 @@
+<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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+                    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/Keluhan/Table_9.vue b/src/components/Pages/Keluhan/Table_9.vue
new file mode 100644
index 0000000..f4cde8a
--- /dev/null
+++ b/src/components/Pages/Keluhan/Table_9.vue
@@ -0,0 +1,77 @@
+<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="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+                    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/Keluhan/index.ts b/src/components/Pages/Keluhan/index.ts
new file mode 100644
index 0000000..b6df844
--- /dev/null
+++ b/src/components/Pages/Keluhan/index.ts
@@ -0,0 +1,15 @@
+export { default as KeluhanTable1 } from './Table_1.vue'
+export { default as KeluhanTable2 } from './Table_2.vue'
+export { default as KeluhanTable3 } from './Table_3.vue'
+export { default as KeluhanTable4 } from './Table_4.vue'
+export { default as KeluhanTable5 } from './Table_5.vue'
+export { default as KeluhanTable6 } from './Table_6.vue'
+export { default as KeluhanTable7 } from './Table_7.vue'
+export { default as KeluhanTable8 } from './Table_8.vue'
+export { default as KeluhanTable9 } from './Table_9.vue'
+export { default as KeluhanTable10 } from './Table_10.vue'
+export { default as KeluhanTable11 } from './Table_11.vue'
+export { default as KeluhanTable12 } from './Table_12.vue'
+export { default as KeluhanTable13 } from './Table_13.vue'
+export { default as KeluhanTable14 } from './Table_14.vue'
+export { default as KeluhanTable15 } from './Table_15.vue'
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 0f5e9fb..514ceca 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -30,6 +30,23 @@ import {
   GangguanTable19,
   GangguanTable20,
 } from '@/components/Pages/Gangguan'
+import {
+  KeluhanTable1,
+  KeluhanTable2,
+  KeluhanTable3,
+  KeluhanTable4,
+  KeluhanTable5,
+  KeluhanTable6,
+  KeluhanTable7,
+  KeluhanTable8,
+  KeluhanTable9,
+  KeluhanTable10,
+  KeluhanTable11,
+  KeluhanTable12,
+  KeluhanTable13,
+  KeluhanTable14,
+  KeluhanTable15,
+} from '@/components/Pages/Keluhan'
 
 export const routes: RouteRecordRaw[] = [
   {
@@ -172,37 +189,37 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Daftar Keluhan Dialihkan Ke Unit Lain',
-                component: EmptyPage,
+                component: KeluhanTable1,
               },
               {
                 path: '2',
                 name: 'Daftar Keluhan Pelanggan Lebih Dari 1 Kali',
-                component: EmptyPage,
+                component: KeluhanTable2,
               },
               {
                 path: '3',
                 name: 'Daftar Keluhan Response Time',
-                component: EmptyPage,
+                component: KeluhanTable3,
               },
               {
                 path: '4',
                 name: 'Daftar Keluhan Recovery Time',
-                component: EmptyPage,
+                component: KeluhanTable4,
               },
               {
                 path: '5',
                 name: 'Daftar Keluhan Selesai Tanpa ID Pelanggan',
-                component: EmptyPage,
+                component: KeluhanTable5,
               },
               {
                 path: '6',
                 name: 'Daftar Keluhan Berdasarkan Media',
-                component: EmptyPage,
+                component: KeluhanTable6,
               },
               {
                 path: '7',
                 name: 'Daftar Keluhan Selesai di CC123',
-                component: EmptyPage,
+                component: KeluhanTable7,
               },
             ],
           },
@@ -213,42 +230,42 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Rekapitulasi Keluhan All',
-                component: EmptyPage,
+                component: KeluhanTable8,
               },
               {
                 path: '2',
                 name: 'Rekapitulasi Keluhan Per Fungsi Bidang',
-                component: EmptyPage,
+                component: KeluhanTable9,
               },
               {
                 path: '3',
                 name: 'Rekapitulasi Keluhan Per Jenis Keluhan',
-                component: EmptyPage,
+                component: KeluhanTable10,
               },
               {
                 path: '4',
                 name: 'Rekapitulasi Keluhan Per Tanggal',
-                component: EmptyPage,
+                component: KeluhanTable11,
               },
               {
                 path: '5',
                 name: 'Rekapitulasi Keluhan Per Unit',
-                component: EmptyPage,
+                component: KeluhanTable12,
               },
               {
                 path: '6',
                 name: 'Rekapitulasi Keluhan Berdasarkan Media',
-                component: EmptyPage,
+                component: KeluhanTable13,
               },
               {
                 path: '7',
                 name: 'Rekapitulasi Keluhan Per Kelompok Keluhan',
-                component: EmptyPage,
+                component: KeluhanTable14,
               },
               {
                 path: '8',
                 name: 'Rekapitulasi Rating Per Unit',
-                component: EmptyPage,
+                component: KeluhanTable15,
               },
             ],
           }

From 867cfa6c1920220b6eaea59966b869116978fb5f Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 09:10:34 +0700
Subject: [PATCH 06/67] fix(table): change table numbering

---
 src/assets/css/style.css                      |  8 -----
 .../Keluhan/{Table_1.vue => Table_21.vue}     |  0
 .../Keluhan/{Table_10.vue => Table_22.vue}    |  0
 .../Keluhan/{Table_11.vue => Table_23.vue}    |  0
 .../Keluhan/{Table_12.vue => Table_24.vue}    |  0
 .../Keluhan/{Table_13.vue => Table_25.vue}    |  0
 .../Keluhan/{Table_14.vue => Table_26.vue}    |  0
 .../Keluhan/{Table_15.vue => Table_27.vue}    |  0
 .../Keluhan/{Table_2.vue => Table_28.vue}     |  0
 .../Keluhan/{Table_3.vue => Table_29.vue}     |  0
 .../Keluhan/{Table_4.vue => Table_30.vue}     |  0
 .../Keluhan/{Table_5.vue => Table_31.vue}     |  0
 .../Keluhan/{Table_6.vue => Table_32.vue}     |  0
 .../Keluhan/{Table_7.vue => Table_33.vue}     |  0
 .../Keluhan/{Table_8.vue => Table_34.vue}     |  0
 .../Keluhan/{Table_9.vue => Table_35.vue}     |  0
 src/components/Pages/Keluhan/index.ts         | 30 +++++++++----------
 17 files changed, 15 insertions(+), 23 deletions(-)
 rename src/components/Pages/Keluhan/{Table_1.vue => Table_21.vue} (100%)
 rename src/components/Pages/Keluhan/{Table_10.vue => Table_22.vue} (100%)
 rename src/components/Pages/Keluhan/{Table_11.vue => Table_23.vue} (100%)
 rename src/components/Pages/Keluhan/{Table_12.vue => Table_24.vue} (100%)
 rename src/components/Pages/Keluhan/{Table_13.vue => Table_25.vue} (100%)
 rename src/components/Pages/Keluhan/{Table_14.vue => Table_26.vue} (100%)
 rename src/components/Pages/Keluhan/{Table_15.vue => Table_27.vue} (100%)
 rename src/components/Pages/Keluhan/{Table_2.vue => Table_28.vue} (100%)
 rename src/components/Pages/Keluhan/{Table_3.vue => Table_29.vue} (100%)
 rename src/components/Pages/Keluhan/{Table_4.vue => Table_30.vue} (100%)
 rename src/components/Pages/Keluhan/{Table_5.vue => Table_31.vue} (100%)
 rename src/components/Pages/Keluhan/{Table_6.vue => Table_32.vue} (100%)
 rename src/components/Pages/Keluhan/{Table_7.vue => Table_33.vue} (100%)
 rename src/components/Pages/Keluhan/{Table_8.vue => Table_34.vue} (100%)
 rename src/components/Pages/Keluhan/{Table_9.vue => Table_35.vue} (100%)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index feba9f0..f0089da 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1004,10 +1004,6 @@ select {
   grid-column: span 7 / span 7;
 }
 
-.col-span-2 {
-  grid-column: span 2 / span 2;
-}
-
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -1156,10 +1152,6 @@ select {
   display: inline-flex;
 }
 
-.table-column {
-  display: table-column;
-}
-
 .grid {
   display: grid;
 }
diff --git a/src/components/Pages/Keluhan/Table_1.vue b/src/components/Pages/Keluhan/Table_21.vue
similarity index 100%
rename from src/components/Pages/Keluhan/Table_1.vue
rename to src/components/Pages/Keluhan/Table_21.vue
diff --git a/src/components/Pages/Keluhan/Table_10.vue b/src/components/Pages/Keluhan/Table_22.vue
similarity index 100%
rename from src/components/Pages/Keluhan/Table_10.vue
rename to src/components/Pages/Keluhan/Table_22.vue
diff --git a/src/components/Pages/Keluhan/Table_11.vue b/src/components/Pages/Keluhan/Table_23.vue
similarity index 100%
rename from src/components/Pages/Keluhan/Table_11.vue
rename to src/components/Pages/Keluhan/Table_23.vue
diff --git a/src/components/Pages/Keluhan/Table_12.vue b/src/components/Pages/Keluhan/Table_24.vue
similarity index 100%
rename from src/components/Pages/Keluhan/Table_12.vue
rename to src/components/Pages/Keluhan/Table_24.vue
diff --git a/src/components/Pages/Keluhan/Table_13.vue b/src/components/Pages/Keluhan/Table_25.vue
similarity index 100%
rename from src/components/Pages/Keluhan/Table_13.vue
rename to src/components/Pages/Keluhan/Table_25.vue
diff --git a/src/components/Pages/Keluhan/Table_14.vue b/src/components/Pages/Keluhan/Table_26.vue
similarity index 100%
rename from src/components/Pages/Keluhan/Table_14.vue
rename to src/components/Pages/Keluhan/Table_26.vue
diff --git a/src/components/Pages/Keluhan/Table_15.vue b/src/components/Pages/Keluhan/Table_27.vue
similarity index 100%
rename from src/components/Pages/Keluhan/Table_15.vue
rename to src/components/Pages/Keluhan/Table_27.vue
diff --git a/src/components/Pages/Keluhan/Table_2.vue b/src/components/Pages/Keluhan/Table_28.vue
similarity index 100%
rename from src/components/Pages/Keluhan/Table_2.vue
rename to src/components/Pages/Keluhan/Table_28.vue
diff --git a/src/components/Pages/Keluhan/Table_3.vue b/src/components/Pages/Keluhan/Table_29.vue
similarity index 100%
rename from src/components/Pages/Keluhan/Table_3.vue
rename to src/components/Pages/Keluhan/Table_29.vue
diff --git a/src/components/Pages/Keluhan/Table_4.vue b/src/components/Pages/Keluhan/Table_30.vue
similarity index 100%
rename from src/components/Pages/Keluhan/Table_4.vue
rename to src/components/Pages/Keluhan/Table_30.vue
diff --git a/src/components/Pages/Keluhan/Table_5.vue b/src/components/Pages/Keluhan/Table_31.vue
similarity index 100%
rename from src/components/Pages/Keluhan/Table_5.vue
rename to src/components/Pages/Keluhan/Table_31.vue
diff --git a/src/components/Pages/Keluhan/Table_6.vue b/src/components/Pages/Keluhan/Table_32.vue
similarity index 100%
rename from src/components/Pages/Keluhan/Table_6.vue
rename to src/components/Pages/Keluhan/Table_32.vue
diff --git a/src/components/Pages/Keluhan/Table_7.vue b/src/components/Pages/Keluhan/Table_33.vue
similarity index 100%
rename from src/components/Pages/Keluhan/Table_7.vue
rename to src/components/Pages/Keluhan/Table_33.vue
diff --git a/src/components/Pages/Keluhan/Table_8.vue b/src/components/Pages/Keluhan/Table_34.vue
similarity index 100%
rename from src/components/Pages/Keluhan/Table_8.vue
rename to src/components/Pages/Keluhan/Table_34.vue
diff --git a/src/components/Pages/Keluhan/Table_9.vue b/src/components/Pages/Keluhan/Table_35.vue
similarity index 100%
rename from src/components/Pages/Keluhan/Table_9.vue
rename to src/components/Pages/Keluhan/Table_35.vue
diff --git a/src/components/Pages/Keluhan/index.ts b/src/components/Pages/Keluhan/index.ts
index b6df844..b5ff05b 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_1.vue'
-export { default as KeluhanTable2 } from './Table_2.vue'
-export { default as KeluhanTable3 } from './Table_3.vue'
-export { default as KeluhanTable4 } from './Table_4.vue'
-export { default as KeluhanTable5 } from './Table_5.vue'
-export { default as KeluhanTable6 } from './Table_6.vue'
-export { default as KeluhanTable7 } from './Table_7.vue'
-export { default as KeluhanTable8 } from './Table_8.vue'
-export { default as KeluhanTable9 } from './Table_9.vue'
-export { default as KeluhanTable10 } from './Table_10.vue'
-export { default as KeluhanTable11 } from './Table_11.vue'
-export { default as KeluhanTable12 } from './Table_12.vue'
-export { default as KeluhanTable13 } from './Table_13.vue'
-export { default as KeluhanTable14 } from './Table_14.vue'
-export { default as KeluhanTable15 } from './Table_15.vue'
\ No newline at end of file
+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

From a8bafb2283b7112e4e00348b8c8ca4ce44d82007 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 09:35:44 +0700
Subject: [PATCH 07/67] add paging into table 1 - 8

---
 src/components/Pages/Gangguan/Table_1.vue |  8 +++++---
 src/components/Pages/Gangguan/Table_2.vue | 12 +++++++-----
 src/components/Pages/Gangguan/Table_3.vue | 12 +++++++-----
 src/components/Pages/Gangguan/Table_4.vue | 14 ++++++++------
 src/components/Pages/Gangguan/Table_5.vue | 12 +++++++-----
 src/components/Pages/Gangguan/Table_6.vue | 12 +++++++-----
 src/components/Pages/Gangguan/Table_7.vue | 12 +++++++-----
 src/components/Pages/Gangguan/Table_8.vue |  7 ++++---
 8 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 02f346b..35c6bf6 100644
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -4,9 +4,11 @@
             :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">
+            <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" />
             <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+            <!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
             <DxLoadPanel :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@@ -60,7 +62,7 @@
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { onMounted, ref } from 'vue'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
index 8b6daf8..83e7f26 100644
--- a/src/components/Pages/Gangguan/Table_2.vue
+++ b/src/components/Pages/Gangguan/Table_2.vue
@@ -4,8 +4,9 @@
             :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 :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+            <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" />
@@ -38,11 +39,12 @@
                 caption="Sumber Lapor" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
 
-    </DxDataGrid>
-</div></template>
+        </DxDataGrid>
+    </div>
+</template>
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+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/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index 20d0c38..d726112 100644
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -4,8 +4,9 @@
             :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 :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+            <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" />
@@ -37,11 +38,12 @@
                 caption="Keterangan Pelapor" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
 
-    </DxDataGrid>
-</div></template>
+        </DxDataGrid>
+    </div>
+</template>
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+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/Gangguan/Table_4.vue b/src/components/Pages/Gangguan/Table_4.vue
index 783e747..9629c57 100644
--- a/src/components/Pages/Gangguan/Table_4.vue
+++ b/src/components/Pages/Gangguan/Table_4.vue
@@ -4,8 +4,9 @@
             :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 :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+            <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" />
@@ -37,13 +38,14 @@
                 caption="Keterangan Pelapor" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
                 caption="Sumber Lapor" />
-        <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
 
-    </DxDataGrid>
-</div></template>
+        </DxDataGrid>
+    </div>
+</template>
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+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/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
index 28739f7..ee62670 100644
--- a/src/components/Pages/Gangguan/Table_5.vue
+++ b/src/components/Pages/Gangguan/Table_5.vue
@@ -4,8 +4,9 @@
             :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 :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+            <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" />
@@ -37,11 +38,12 @@
                 caption="Sumber Lapor" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
 
-    </DxDataGrid>
-</div></template>
+        </DxDataGrid>
+    </div>
+</template>
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+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/Gangguan/Table_6.vue b/src/components/Pages/Gangguan/Table_6.vue
index 5c39ffe..26fe216 100644
--- a/src/components/Pages/Gangguan/Table_6.vue
+++ b/src/components/Pages/Gangguan/Table_6.vue
@@ -4,8 +4,9 @@
             :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 :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+            <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" />
@@ -35,11 +36,12 @@
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
                 caption="Keterangan Media" />
 
-    </DxDataGrid>
-</div></template>
+        </DxDataGrid>
+    </div>
+</template>
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+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/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
index 28739f7..ee62670 100644
--- a/src/components/Pages/Gangguan/Table_7.vue
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -4,8 +4,9 @@
             :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 :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+            <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" />
@@ -37,11 +38,12 @@
                 caption="Sumber Lapor" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
 
-    </DxDataGrid>
-</div></template>
+        </DxDataGrid>
+    </div>
+</template>
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+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/Gangguan/Table_8.vue b/src/components/Pages/Gangguan/Table_8.vue
index efe894a..d77af9e 100644
--- a/src/components/Pages/Gangguan/Table_8.vue
+++ b/src/components/Pages/Gangguan/Table_8.vue
@@ -4,8 +4,9 @@
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+            <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" />
@@ -64,7 +65,7 @@
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { onMounted, ref } from 'vue'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

From 63840d8baf20afd3f2fec06e4a9503cd7fadb87a Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 10:02:33 +0700
Subject: [PATCH 08/67] Update Tabel 21

---
 src/components/Pages/Keluhan/Table_21.vue | 47 +++++++++++++++--------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/components/Pages/Keluhan/Table_21.vue b/src/components/Pages/Keluhan/Table_21.vue
index f4cde8a..f7a9c8b 100644
--- a/src/components/Pages/Keluhan/Table_21.vue
+++ b/src/components/Pages/Keluhan/Table_21.vue
@@ -5,27 +5,42 @@
             :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" />
+            <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" />
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
-                    css-class="custom-table-column" />
-            </DxColumn>
+            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Unit Asal" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+                css-class="custom-table-column" />
+
 
         </DxDataGrid>
     </div>
@@ -33,7 +48,7 @@
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, 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'

From 94e08e49813ca541e213c19da15ddd577f3837cb Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 10:04:35 +0700
Subject: [PATCH 09/67] update tabel 22

---
 src/components/Pages/Keluhan/Table_22.vue | 51 ++++++++++++++++-------
 1 file changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/components/Pages/Keluhan/Table_22.vue b/src/components/Pages/Keluhan/Table_22.vue
index f4cde8a..186a55c 100644
--- a/src/components/Pages/Keluhan/Table_22.vue
+++ b/src/components/Pages/Keluhan/Table_22.vue
@@ -5,27 +5,46 @@
             :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" />
+            <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" />
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
-                    css-class="custom-table-column" />
-            </DxColumn>
+            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+                css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="" caption="Jml Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Unit Asal" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
+
 
         </DxDataGrid>
     </div>
@@ -33,7 +52,7 @@
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, 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'

From 6dc380e7e18cd482067b9b779c70f4c12579e6ba Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 10:05:45 +0700
Subject: [PATCH 10/67] update tabel 23

---
 src/components/Pages/Keluhan/Table_23.vue | 47 +++++++++++++++--------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/components/Pages/Keluhan/Table_23.vue b/src/components/Pages/Keluhan/Table_23.vue
index f4cde8a..83cc07c 100644
--- a/src/components/Pages/Keluhan/Table_23.vue
+++ b/src/components/Pages/Keluhan/Table_23.vue
@@ -5,27 +5,42 @@
             :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" />
+            <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" />
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
-                    css-class="custom-table-column" />
-            </DxColumn>
+            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
+                css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
+
 
         </DxDataGrid>
     </div>
@@ -33,7 +48,7 @@
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, 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'

From ac081d4f76137197654cc86d683a1f70f1db0bfc Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 10:05:58 +0700
Subject: [PATCH 11/67] update tabel 22

---
 src/components/Pages/Keluhan/Table_22.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Pages/Keluhan/Table_22.vue b/src/components/Pages/Keluhan/Table_22.vue
index 186a55c..b350aec 100644
--- a/src/components/Pages/Keluhan/Table_22.vue
+++ b/src/components/Pages/Keluhan/Table_22.vue
@@ -29,7 +29,6 @@
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Unit Asal" css-class="custom-table-column" />
             <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
                 css-class="custom-table-column" />

From 9ef90c558bf8289f31e991679205e9e68d3a3cf0 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 10:06:50 +0700
Subject: [PATCH 12/67] update tabel 24

---
 src/components/Pages/Keluhan/Table_24.vue | 48 +++++++++++++++--------
 1 file changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/components/Pages/Keluhan/Table_24.vue b/src/components/Pages/Keluhan/Table_24.vue
index f4cde8a..9fb5898 100644
--- a/src/components/Pages/Keluhan/Table_24.vue
+++ b/src/components/Pages/Keluhan/Table_24.vue
@@ -5,27 +5,43 @@
             :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" />
+            <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" />
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
-                    css-class="custom-table-column" />
-            </DxColumn>
+            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+                css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="" caption="Jml Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
+                css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
+
 
         </DxDataGrid>
     </div>
@@ -33,7 +49,7 @@
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, 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'

From ecec98469f795e6403fc20ac8f675a1751201d95 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 10:07:28 +0700
Subject: [PATCH 13/67] update tabel 25

---
 src/components/Pages/Keluhan/Table_25.vue | 50 +++++++++++++++--------
 1 file changed, 34 insertions(+), 16 deletions(-)

diff --git a/src/components/Pages/Keluhan/Table_25.vue b/src/components/Pages/Keluhan/Table_25.vue
index f4cde8a..b350aec 100644
--- a/src/components/Pages/Keluhan/Table_25.vue
+++ b/src/components/Pages/Keluhan/Table_25.vue
@@ -5,27 +5,45 @@
             :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" />
+            <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" />
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
-                    css-class="custom-table-column" />
-            </DxColumn>
+            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+                css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="" caption="Jml Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
+                css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
+
 
         </DxDataGrid>
     </div>
@@ -33,7 +51,7 @@
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, 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'

From 281e2edc5685f7f586e7493fb42a29a21e0e66bb Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 11:02:39 +0700
Subject: [PATCH 14/67] update tabel 26

---
 src/components/Pages/Keluhan/Table_26.vue | 45 +++++++++++++++--------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/components/Pages/Keluhan/Table_26.vue b/src/components/Pages/Keluhan/Table_26.vue
index f4cde8a..24b7e94 100644
--- a/src/components/Pages/Keluhan/Table_26.vue
+++ b/src/components/Pages/Keluhan/Table_26.vue
@@ -5,35 +5,48 @@
             :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" />
+            <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" />
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
-                    css-class="custom-table-column" />
-            </DxColumn>
+            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
 
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
+
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Response Time"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Recovery Time"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Media" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Media"
+                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 { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, 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'

From 36a1234e743c98b86635a94b749b93d5518ea477 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 11:06:42 +0700
Subject: [PATCH 15/67] update tabel 27

---
 src/components/Pages/Keluhan/Table_27.vue | 46 +++++++++++++++--------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/components/Pages/Keluhan/Table_27.vue b/src/components/Pages/Keluhan/Table_27.vue
index f4cde8a..ea7ee5e 100644
--- a/src/components/Pages/Keluhan/Table_27.vue
+++ b/src/components/Pages/Keluhan/Table_27.vue
@@ -5,35 +5,49 @@
             :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" />
+            <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" />
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
-                    css-class="custom-table-column" />
-            </DxColumn>
+            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Contact Center"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="UI Dist." css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="ULP" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
+                css-class="custom-table-column" />
 
+            <DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
+                css-class="custom-table-column" />
+
+            <DxColumn :width="170" alignment="center" data-field="" caption="No Tlp Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="APKT Status" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Created By" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Penyelesaian"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Lapor Ulang" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Sumber Lapor"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Issue Type" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Sub Issue Type"
+                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 { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, 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'

From 53998ed4822e776cc629573fe3837a6e4327d16b Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 11:14:03 +0700
Subject: [PATCH 16/67] update tabel 28

---
 src/components/Pages/Keluhan/Table_28.vue | 37 ++++++++++++++++++-----
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/Pages/Keluhan/Table_28.vue b/src/components/Pages/Keluhan/Table_28.vue
index f4cde8a..d189bac 100644
--- a/src/components/Pages/Keluhan/Table_28.vue
+++ b/src/components/Pages/Keluhan/Table_28.vue
@@ -12,18 +12,39 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Selesai"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
+                <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="date" caption="4"
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="InProgress"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+                <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="Rata-Rata"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> SLA"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA"
+                    css-class="custom-table-column" />
+            </DxColumn>
+            <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> SLA"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA"
                     css-class="custom-table-column" />
             </DxColumn>
 

From fef1c55e479a7fe798af70d675a8d4f3db439b48 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 11:23:14 +0700
Subject: [PATCH 17/67] update tabel 29

---
 src/components/Pages/Keluhan/Table_29.vue | 63 +++++++++++++++++++----
 1 file changed, 52 insertions(+), 11 deletions(-)

diff --git a/src/components/Pages/Keluhan/Table_29.vue b/src/components/Pages/Keluhan/Table_29.vue
index f4cde8a..ec89ee8 100644
--- a/src/components/Pages/Keluhan/Table_29.vue
+++ b/src/components/Pages/Keluhan/Table_29.vue
@@ -13,18 +13,59 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+            <DxColumn :width="170" alignment="center" data-field="" caption="Fungsi Bidang"
+                css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
                     css-class="custom-table-column" />
+                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" 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="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>
+            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+            <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        css-class="custom-table-column" />
+                </DxColumn>
             </DxColumn>
 
         </DxDataGrid>

From a2b6cb17698d78ca0f6a2cb31afac3714e674d86 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 12:52:56 +0700
Subject: [PATCH 18/67] change devextream theme

---
 src/assets/css/main.css | 4 ++++
 src/main.ts             | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index efee022..8734c3c 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -1,3 +1,7 @@
 @import './base.css';
+/* @import 'devextreme/dist/css/dx.material.blue.light.css'; */
+@import 'devextreme/dist/css/dx.material.blue.light.compact.css';
+/* @import 'devextreme/dist/css/dx.light.css'; */
+/* @import 'devextreme/dist/css/dx.light.compact.css'; */
 @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700&display=swap');
 @import './style.css';
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index bc01a6e..c8f6e48 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-import 'devextreme/dist/css/dx.light.css'
+// import 'devextreme/dist/css/dx.material.blue.light.compact.css'
 import '@lottiefiles/lottie-player'
 import '@/assets/css/main.css'
 import { createApp } from 'vue'

From f7a55c2dd90db3b98e0aa019c20c0d74cdb74cc8 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 12:56:31 +0700
Subject: [PATCH 19/67] update tabel 30

---
 src/components/Pages/Keluhan/Table_30.vue | 63 +++++++++++++++++++----
 1 file changed, 52 insertions(+), 11 deletions(-)

diff --git a/src/components/Pages/Keluhan/Table_30.vue b/src/components/Pages/Keluhan/Table_30.vue
index f4cde8a..e24198c 100644
--- a/src/components/Pages/Keluhan/Table_30.vue
+++ b/src/components/Pages/Keluhan/Table_30.vue
@@ -13,18 +13,59 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+            <DxColumn :width="170" alignment="center" data-field="" caption="Jenis Keluhan"
+                css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
                     css-class="custom-table-column" />
+                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" 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="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>
+            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+            <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        css-class="custom-table-column" />
+                </DxColumn>
             </DxColumn>
 
         </DxDataGrid>

From a4723e85c111143f516c38a7e6257dd7387f6ce8 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 12:57:06 +0700
Subject: [PATCH 20/67] update tabel 31

---
 src/components/Pages/Keluhan/Table_31.vue | 63 +++++++++++++++++++----
 1 file changed, 52 insertions(+), 11 deletions(-)

diff --git a/src/components/Pages/Keluhan/Table_31.vue b/src/components/Pages/Keluhan/Table_31.vue
index f4cde8a..6624a3f 100644
--- a/src/components/Pages/Keluhan/Table_31.vue
+++ b/src/components/Pages/Keluhan/Table_31.vue
@@ -13,18 +13,59 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+            <DxColumn :width="170" alignment="center" data-field="" caption="Kelompok Keluhan"
+                css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
                     css-class="custom-table-column" />
+                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" 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="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>
+            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+            <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        css-class="custom-table-column" />
+                </DxColumn>
             </DxColumn>
 
         </DxDataGrid>

From 64890ae46009c2aab44b428d10d35b0a974d030c Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 12:59:25 +0700
Subject: [PATCH 21/67] fix column table number width

---
 src/components/Pages/Gangguan/Table_10.vue |  2 +-
 src/components/Pages/Gangguan/Table_11.vue |  2 +-
 src/components/Pages/Gangguan/Table_12.vue |  2 +-
 src/components/Pages/Gangguan/Table_13.vue |  2 +-
 src/components/Pages/Gangguan/Table_14.vue |  2 +-
 src/components/Pages/Gangguan/Table_15.vue |  2 +-
 src/components/Pages/Gangguan/Table_9.vue  |  2 +-
 src/components/Pages/Keluhan/Table_21.vue  |  2 +-
 src/components/Pages/Keluhan/Table_22.vue  |  2 +-
 src/components/Pages/Keluhan/Table_23.vue  |  2 +-
 src/components/Pages/Keluhan/Table_24.vue  |  2 +-
 src/components/Pages/Keluhan/Table_25.vue  |  2 +-
 src/components/Pages/Keluhan/Table_26.vue  |  2 +-
 src/components/Pages/Keluhan/Table_27.vue  |  2 +-
 src/components/Pages/Keluhan/Table_29.vue  |  2 +-
 src/components/Pages/Keluhan/Table_30.vue  |  2 +-
 src/components/Pages/Keluhan/Table_31.vue  |  2 +-
 src/components/Pages/Keluhan/Table_32.vue  | 65 ++++++++++++++++++----
 src/components/Pages/Keluhan/Table_33.vue  |  2 +-
 src/components/Pages/Keluhan/Table_34.vue  |  2 +-
 src/components/Pages/Keluhan/Table_35.vue  |  2 +-
 21 files changed, 73 insertions(+), 32 deletions(-)

diff --git a/src/components/Pages/Gangguan/Table_10.vue b/src/components/Pages/Gangguan/Table_10.vue
index 0ef10a0..b8b9b26 100644
--- a/src/components/Pages/Gangguan/Table_10.vue
+++ b/src/components/Pages/Gangguan/Table_10.vue
@@ -12,7 +12,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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="120" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Sub Kelompok (Equipment)"
                 css-class="custom-table-column" />
diff --git a/src/components/Pages/Gangguan/Table_11.vue b/src/components/Pages/Gangguan/Table_11.vue
index 3817136..26c1db6 100644
--- a/src/components/Pages/Gangguan/Table_11.vue
+++ b/src/components/Pages/Gangguan/Table_11.vue
@@ -12,7 +12,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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Posko" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                 <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
diff --git a/src/components/Pages/Gangguan/Table_12.vue b/src/components/Pages/Gangguan/Table_12.vue
index eaef9f3..9d76b67 100644
--- a/src/components/Pages/Gangguan/Table_12.vue
+++ b/src/components/Pages/Gangguan/Table_12.vue
@@ -12,7 +12,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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="120" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
diff --git a/src/components/Pages/Gangguan/Table_13.vue b/src/components/Pages/Gangguan/Table_13.vue
index 51830c5..c0214c7 100644
--- a/src/components/Pages/Gangguan/Table_13.vue
+++ b/src/components/Pages/Gangguan/Table_13.vue
@@ -12,7 +12,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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Tanggal Lapor"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
diff --git a/src/components/Pages/Gangguan/Table_14.vue b/src/components/Pages/Gangguan/Table_14.vue
index f4cde8a..276851d 100644
--- a/src/components/Pages/Gangguan/Table_14.vue
+++ b/src/components/Pages/Gangguan/Table_14.vue
@@ -12,7 +12,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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
                 <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
diff --git a/src/components/Pages/Gangguan/Table_15.vue b/src/components/Pages/Gangguan/Table_15.vue
index 5d17283..1e3c0f8 100644
--- a/src/components/Pages/Gangguan/Table_15.vue
+++ b/src/components/Pages/Gangguan/Table_15.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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn alignment="center" data-field="" caption="Nama UP3" css-class="custom-table-column" />
             <DxColumn alignment="center" data-field="" caption="Nama Posko" css-class="custom-table-column" />
             <DxColumn :width="100" alignment="center" data-field="" caption="Posko IN" css-class="custom-table-column" />
diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
index 17c2939..444a609 100644
--- a/src/components/Pages/Gangguan/Table_9.vue
+++ b/src/components/Pages/Gangguan/Table_9.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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="120" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Jenis Gangguan"
                 css-class="custom-table-column" />
diff --git a/src/components/Pages/Keluhan/Table_21.vue b/src/components/Pages/Keluhan/Table_21.vue
index f7a9c8b..4a8e52a 100644
--- a/src/components/Pages/Keluhan/Table_21.vue
+++ b/src/components/Pages/Keluhan/Table_21.vue
@@ -13,7 +13,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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
diff --git a/src/components/Pages/Keluhan/Table_22.vue b/src/components/Pages/Keluhan/Table_22.vue
index b350aec..e015b3c 100644
--- a/src/components/Pages/Keluhan/Table_22.vue
+++ b/src/components/Pages/Keluhan/Table_22.vue
@@ -13,7 +13,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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
diff --git a/src/components/Pages/Keluhan/Table_23.vue b/src/components/Pages/Keluhan/Table_23.vue
index 83cc07c..aa32aec 100644
--- a/src/components/Pages/Keluhan/Table_23.vue
+++ b/src/components/Pages/Keluhan/Table_23.vue
@@ -13,7 +13,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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
diff --git a/src/components/Pages/Keluhan/Table_24.vue b/src/components/Pages/Keluhan/Table_24.vue
index 9fb5898..792df02 100644
--- a/src/components/Pages/Keluhan/Table_24.vue
+++ b/src/components/Pages/Keluhan/Table_24.vue
@@ -13,7 +13,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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
diff --git a/src/components/Pages/Keluhan/Table_25.vue b/src/components/Pages/Keluhan/Table_25.vue
index b350aec..e015b3c 100644
--- a/src/components/Pages/Keluhan/Table_25.vue
+++ b/src/components/Pages/Keluhan/Table_25.vue
@@ -13,7 +13,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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
diff --git a/src/components/Pages/Keluhan/Table_26.vue b/src/components/Pages/Keluhan/Table_26.vue
index 24b7e94..b849708 100644
--- a/src/components/Pages/Keluhan/Table_26.vue
+++ b/src/components/Pages/Keluhan/Table_26.vue
@@ -13,7 +13,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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
                 css-class="custom-table-column" />
diff --git a/src/components/Pages/Keluhan/Table_27.vue b/src/components/Pages/Keluhan/Table_27.vue
index ea7ee5e..7674912 100644
--- a/src/components/Pages/Keluhan/Table_27.vue
+++ b/src/components/Pages/Keluhan/Table_27.vue
@@ -13,7 +13,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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Contact Center"
                 css-class="custom-table-column" />
diff --git a/src/components/Pages/Keluhan/Table_29.vue b/src/components/Pages/Keluhan/Table_29.vue
index ec89ee8..107b53b 100644
--- a/src/components/Pages/Keluhan/Table_29.vue
+++ b/src/components/Pages/Keluhan/Table_29.vue
@@ -12,7 +12,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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Fungsi Bidang"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
diff --git a/src/components/Pages/Keluhan/Table_30.vue b/src/components/Pages/Keluhan/Table_30.vue
index e24198c..998e030 100644
--- a/src/components/Pages/Keluhan/Table_30.vue
+++ b/src/components/Pages/Keluhan/Table_30.vue
@@ -12,7 +12,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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Jenis Keluhan"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
diff --git a/src/components/Pages/Keluhan/Table_31.vue b/src/components/Pages/Keluhan/Table_31.vue
index 6624a3f..e8e2ef3 100644
--- a/src/components/Pages/Keluhan/Table_31.vue
+++ b/src/components/Pages/Keluhan/Table_31.vue
@@ -12,7 +12,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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Kelompok Keluhan"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
diff --git a/src/components/Pages/Keluhan/Table_32.vue b/src/components/Pages/Keluhan/Table_32.vue
index f4cde8a..c7c180b 100644
--- a/src/components/Pages/Keluhan/Table_32.vue
+++ b/src/components/Pages/Keluhan/Table_32.vue
@@ -12,19 +12,60 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tanggal Lapor"
+                css-class="custom-table-column" />
+            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
                     css-class="custom-table-column" />
+                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" 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="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>
+            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+            <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        css-class="custom-table-column" />
+                </DxColumn>
             </DxColumn>
 
         </DxDataGrid>
diff --git a/src/components/Pages/Keluhan/Table_33.vue b/src/components/Pages/Keluhan/Table_33.vue
index f4cde8a..276851d 100644
--- a/src/components/Pages/Keluhan/Table_33.vue
+++ b/src/components/Pages/Keluhan/Table_33.vue
@@ -12,7 +12,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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
                 <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
diff --git a/src/components/Pages/Keluhan/Table_34.vue b/src/components/Pages/Keluhan/Table_34.vue
index f4cde8a..276851d 100644
--- a/src/components/Pages/Keluhan/Table_34.vue
+++ b/src/components/Pages/Keluhan/Table_34.vue
@@ -12,7 +12,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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
                 <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
diff --git a/src/components/Pages/Keluhan/Table_35.vue b/src/components/Pages/Keluhan/Table_35.vue
index f4cde8a..276851d 100644
--- a/src/components/Pages/Keluhan/Table_35.vue
+++ b/src/components/Pages/Keluhan/Table_35.vue
@@ -12,7 +12,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" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
                 <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"

From f1f7e4c3158bc20856d30dc8a3e858d6aef337a8 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 13:00:45 +0700
Subject: [PATCH 22/67] update tabel 32

---
 src/components/Pages/Keluhan/Table_32.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Pages/Keluhan/Table_32.vue b/src/components/Pages/Keluhan/Table_32.vue
index c7c180b..518247b 100644
--- a/src/components/Pages/Keluhan/Table_32.vue
+++ b/src/components/Pages/Keluhan/Table_32.vue
@@ -13,8 +13,7 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tanggal Lapor"
-                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="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" />

From e2ab7e0db566dc369e2922fe6d029bcdd81c319b Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 13:22:36 +0700
Subject: [PATCH 23/67] switch router menu

---
 src/router/index.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index 514ceca..4ca83cb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -244,24 +244,25 @@ export const routes: RouteRecordRaw[] = [
               },
               {
                 path: '4',
-                name: 'Rekapitulasi Keluhan Per Tanggal',
+                name: 'Rekapitulasi Keluhan Per Kelompok Keluhan',
                 component: KeluhanTable11,
               },
               {
                 path: '5',
-                name: 'Rekapitulasi Keluhan Per Unit',
+                name: 'Rekapitulasi Keluhan Per Tanggal',
                 component: KeluhanTable12,
               },
               {
                 path: '6',
-                name: 'Rekapitulasi Keluhan Berdasarkan Media',
+                name: 'Rekapitulasi Keluhan Per Unit',
                 component: KeluhanTable13,
               },
               {
                 path: '7',
-                name: 'Rekapitulasi Keluhan Per Kelompok Keluhan',
+                name: 'Rekapitulasi Keluhan Berdasarkan Media',
                 component: KeluhanTable14,
               },
+
               {
                 path: '8',
                 name: 'Rekapitulasi Rating Per Unit',

From a7f493165b5828b9042bbd360a47a17594d2d88c Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 13:22:51 +0700
Subject: [PATCH 24/67] update tabel 32, 33, 35

---
 src/components/Pages/Keluhan/Table_32.vue |  3 +-
 src/components/Pages/Keluhan/Table_33.vue | 62 +++++++++++++++++++----
 src/components/Pages/Keluhan/Table_35.vue | 49 ++++++++++++++----
 3 files changed, 93 insertions(+), 21 deletions(-)

diff --git a/src/components/Pages/Keluhan/Table_32.vue b/src/components/Pages/Keluhan/Table_32.vue
index 518247b..c7c180b 100644
--- a/src/components/Pages/Keluhan/Table_32.vue
+++ b/src/components/Pages/Keluhan/Table_32.vue
@@ -13,7 +13,8 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tanggal Lapor"
+                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" />
diff --git a/src/components/Pages/Keluhan/Table_33.vue b/src/components/Pages/Keluhan/Table_33.vue
index 276851d..518247b 100644
--- a/src/components/Pages/Keluhan/Table_33.vue
+++ b/src/components/Pages/Keluhan/Table_33.vue
@@ -13,18 +13,58 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+            <DxColumn :width="170" alignment="center" data-field="" caption="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="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 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>
+            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        css-class="custom-table-column" />
+                </DxColumn>
+            </DxColumn>
+            <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                        css-class="custom-table-column" />
+                </DxColumn>
+                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                        css-class="custom-table-column" />
+                </DxColumn>
             </DxColumn>
 
         </DxDataGrid>
diff --git a/src/components/Pages/Keluhan/Table_35.vue b/src/components/Pages/Keluhan/Table_35.vue
index 276851d..d794954 100644
--- a/src/components/Pages/Keluhan/Table_35.vue
+++ b/src/components/Pages/Keluhan/Table_35.vue
@@ -13,17 +13,48 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
+            <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 :width="150" alignment="center" data-field="" data-type="date" caption="2"
+                <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="date" caption="3"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
                     css-class="custom-table-column" />
             </DxColumn>
 

From 64a49c4f848984a2658ef8ed80f1f89dc46625db Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Wed, 1 Nov 2023 13:37:11 +0700
Subject: [PATCH 25/67] create more filters type

---
 src/assets/css/style.css                  | 27 +++++++++++++
 src/components/DatePicker.vue             | 32 +++++++++++----
 src/components/Form/FiltersType/Type2.vue | 48 ++++++++++++-----------
 src/components/Form/FiltersType/Type3.vue | 34 ++++++++++++++++
 src/components/Form/FiltersType/Type4.vue | 42 ++++++++++++++++++++
 src/components/Form/FiltersType/Type5.vue | 32 +++++++++++++++
 src/components/Form/FiltersType/Type6.vue | 42 ++++++++++++++++++++
 src/components/Form/FiltersType/Type7.vue | 46 ++++++++++++++++++++++
 src/components/Pages/MenuProvider.vue     | 13 +++++-
 src/router/index.ts                       |  2 +-
 10 files changed, 286 insertions(+), 32 deletions(-)
 create mode 100644 src/components/Form/FiltersType/Type3.vue
 create mode 100644 src/components/Form/FiltersType/Type4.vue
 create mode 100644 src/components/Form/FiltersType/Type5.vue
 create mode 100644 src/components/Form/FiltersType/Type6.vue
 create mode 100644 src/components/Form/FiltersType/Type7.vue

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index f0089da..8239630 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1450,6 +1450,14 @@ select {
   scroll-padding-bottom: 0.5rem;
 }
 
+.auto-cols-auto {
+  grid-auto-columns: auto;
+}
+
+.grid-flow-col {
+  grid-auto-flow: column;
+}
+
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1506,6 +1514,16 @@ select {
   gap: 0.75rem;
 }
 
+.gap-x-1 {
+  -moz-column-gap: 0.25rem;
+       column-gap: 0.25rem;
+}
+
+.gap-x-2 {
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
+
 .gap-x-6 {
   -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
@@ -1519,6 +1537,11 @@ select {
   row-gap: 0.125rem;
 }
 
+.gap-x-1\.5 {
+  -moz-column-gap: 0.375rem;
+       column-gap: 0.375rem;
+}
+
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -2036,6 +2059,10 @@ select {
   text-align: start;
 }
 
+.align-middle {
+  vertical-align: middle;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index 15dceac..14bd28b 100644
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -10,12 +10,28 @@
 </script>
 
 <template>
-  <vue-tailwind-datepicker 
-    input-classes="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
-    v-model="dateValue"
-    :formatter="formatter"
-    separator="   s/d   "
-    :shortcuts="false"
-    :auto-apply="false"
-  />
+  <div class="flex">
+    <vue-tailwind-datepicker 
+      v-model="dateValue"
+      :formatter="formatter"
+      separator="   s/d   "
+      :shortcuts="false"
+      :auto-apply="false"
+      v-slot="{ value, placeholder }"
+      overlay
+    >
+      <div class="flex">
+        <div class="flex-1">
+          <button
+            type="button"
+            class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
+          >
+            <span class="text-gray-900">
+              {{ value || placeholder }}
+            </span>
+          </button>
+        </div>
+      </div>
+    </vue-tailwind-datepicker>
+  </div>
 </template>
\ No newline at end of file
diff --git a/src/components/Form/FiltersType/Type2.vue b/src/components/Form/FiltersType/Type2.vue
index 72d45e1..cbb3577 100644
--- a/src/components/Form/FiltersType/Type2.vue
+++ b/src/components/Form/FiltersType/Type2.vue
@@ -1,38 +1,42 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+</script>
+
 <template>
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Regional:</label>
+
+    <Select placeholder="Semua Regional"/>
+  </div>
+
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
-      <select
-        class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
-        <option value="">Semua Unit Induk Distribusi/Wilayah</option>
-      </select>
-    </div>
+    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
 
-    <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
-      <select
-        class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
-        <option value="">Semua Unit Pelaksanaan Pelayanan Pelanggan</option>
-      </select>
-    </div>
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+      >Unit Layanan Pelanggan:</label
+    >
 
-    <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
-      <select
-        class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
-        <option value="">Semua Unit Layanan Pelanggan</option>
-      </select>
-    </div>
+    <Select placeholder="Semua Unit Layanan Pelanggan" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode</label>
+
+    <div class="grid grid-cols-2 gap-x-2">
+      <Select placeholder="Juli" />
+      <Select placeholder="2023" />
+    </div>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/Form/FiltersType/Type3.vue b/src/components/Form/FiltersType/Type3.vue
new file mode 100644
index 0000000..d2fe98f
--- /dev/null
+++ b/src/components/Form/FiltersType/Type3.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+</script>
+
+<template>
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+
+    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+      >Unit Layanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Layanan Pelanggan" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+
+    <DatePicker />
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type4.vue b/src/components/Form/FiltersType/Type4.vue
new file mode 100644
index 0000000..09ab030
--- /dev/null
+++ b/src/components/Form/FiltersType/Type4.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+</script>
+
+<template>
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+
+    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+      >Unit Layanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Layanan Pelanggan" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+      >Jenis Laporan:</label
+    >
+
+    <Select placeholder="Laporan Berulang Unit" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+
+    <DatePicker />
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type5.vue b/src/components/Form/FiltersType/Type5.vue
new file mode 100644
index 0000000..1ebc58e
--- /dev/null
+++ b/src/components/Form/FiltersType/Type5.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+</script>
+
+<template>
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+
+    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Posko:</label>
+
+    <Select placeholder="Semua Posko" />
+  </div>
+  
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+
+    <DatePicker />
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type6.vue b/src/components/Form/FiltersType/Type6.vue
new file mode 100644
index 0000000..7fb4f77
--- /dev/null
+++ b/src/components/Form/FiltersType/Type6.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+</script>
+
+<template>
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+
+    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Posko:</label>
+
+    <Select placeholder="Semua Posko" />
+  </div>
+  
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+
+    <DatePicker />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Lapor Ulang:</label>
+
+    <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
+      <Select placeholder="1" />
+      <small class="flex items-center">s/d</small>
+      <Select placeholder="2" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type7.vue b/src/components/Form/FiltersType/Type7.vue
new file mode 100644
index 0000000..a5ea2cd
--- /dev/null
+++ b/src/components/Form/FiltersType/Type7.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+</script>
+
+<template>
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+
+    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Posko:</label>
+
+    <Select placeholder="Semua Posko" />
+  </div>
+  
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+
+    <DatePicker />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Durasi:</label>
+
+    <div class="flex flex-column">
+      <Select placeholder="Semua Posko" />
+
+      <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
+        <Select placeholder="1" />
+        <small class="flex items-center">s/d</small>
+        <Select placeholder="2" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Pages/MenuProvider.vue b/src/components/Pages/MenuProvider.vue
index 4146f65..3aa5895 100644
--- a/src/components/Pages/MenuProvider.vue
+++ b/src/components/Pages/MenuProvider.vue
@@ -7,6 +7,12 @@
         <div class="flex-1 mt-2 sm:mt-4 dx-viewport">
             <Filters :report-button="(typeof pageMetaData[2]) !== 'undefined'" class="mb-4" v-if="pageMetaData.length > 1">
                 <Type1 v-if="pageMetaData[1] == 'type-1'" />
+                <Type2 v-if="pageMetaData[1] == 'type-2'" />
+                <Type3 v-if="pageMetaData[1] == 'type-3'" />
+                <Type4 v-if="pageMetaData[1] == 'type-4'" />
+                <Type5 v-if="pageMetaData[1] == 'type-5'" />
+                <Type6 v-if="pageMetaData[1] == 'type-6'" />
+                <Type7 v-if="pageMetaData[1] == 'type-7'" />
             </Filters>
 
             <slot></slot>
@@ -19,7 +25,12 @@ import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import Filters from '../Form/Filters.vue'
 import Type1 from '../Form/FiltersType/Type1.vue';
-
+import Type2 from '../Form/FiltersType/Type2.vue';
+import Type3 from '../Form/FiltersType/Type3.vue';
+import Type4 from '../Form/FiltersType/Type4.vue';
+import Type5 from '../Form/FiltersType/Type5.vue';
+import Type6 from '../Form/FiltersType/Type6.vue';
+import Type7 from '../Form/FiltersType/Type7.vue';
 
 // Dapatkan objek route dari vue-router
 const route = useRoute()
diff --git a/src/router/index.ts b/src/router/index.ts
index 514ceca..9de9549 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -69,7 +69,7 @@ export const routes: RouteRecordRaw[] = [
             children: [
               {
                 path: '1',
-                name: 'Daftar Keluhan Dialihkan Ke Posko Lain | type-1',
+                name: 'Daftar Keluhan Dialihkan Ke Posko Lain | type-1 | sa',
                 component: GangguanTable1,
                 props: true
               },

From 1f633d46757a9df554ef2a6303ff8ac042bcb4fa Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 15:41:07 +0700
Subject: [PATCH 26/67] add component table 36 - 69

---
 src/components/Pages/Anomali/Table_62.vue     | 108 ++++++++++++++++++
 src/components/Pages/Anomali/Table_63.vue     | 108 ++++++++++++++++++
 src/components/Pages/Anomali/Table_64.vue     | 108 ++++++++++++++++++
 src/components/Pages/Anomali/index.ts         |   3 +
 src/components/Pages/Cico/Table_61.vue        | 108 ++++++++++++++++++
 src/components/Pages/Cico/index.ts            |   1 +
 src/components/Pages/Ctt/Table_65.vue         | 108 ++++++++++++++++++
 src/components/Pages/Ctt/index.ts             |   1 +
 src/components/Pages/Material/Table_66.vue    | 108 ++++++++++++++++++
 src/components/Pages/Material/Table_67.vue    | 108 ++++++++++++++++++
 src/components/Pages/Material/index.ts        |   2 +
 src/components/Pages/Monalisa/Table_36.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_37.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_38.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_39.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_40.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_41.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_42.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_43.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_45.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_46.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_47.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_48.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_49.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_50.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_51.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_52.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_53.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_54.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_55.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_56.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_57.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_58.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_59.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/Table_60.vue    | 108 ++++++++++++++++++
 src/components/Pages/Monalisa/index.ts        |  25 ++++
 .../Pages/PencarianData/Table_69.vue          | 108 ++++++++++++++++++
 src/components/Pages/PencarianData/index.ts   |   1 +
 src/components/Pages/Transaksi/Table_68.vue   | 108 ++++++++++++++++++
 src/components/Pages/Transaksi/Table_69.vue   | 108 ++++++++++++++++++
 src/components/Pages/Transaksi/index.ts       |   1 +
 src/router/index.ts                           |  73 ++++++------
 42 files changed, 3746 insertions(+), 33 deletions(-)
 create mode 100644 src/components/Pages/Anomali/Table_62.vue
 create mode 100644 src/components/Pages/Anomali/Table_63.vue
 create mode 100644 src/components/Pages/Anomali/Table_64.vue
 create mode 100644 src/components/Pages/Anomali/index.ts
 create mode 100644 src/components/Pages/Cico/Table_61.vue
 create mode 100644 src/components/Pages/Cico/index.ts
 create mode 100644 src/components/Pages/Ctt/Table_65.vue
 create mode 100644 src/components/Pages/Ctt/index.ts
 create mode 100644 src/components/Pages/Material/Table_66.vue
 create mode 100644 src/components/Pages/Material/Table_67.vue
 create mode 100644 src/components/Pages/Material/index.ts
 create mode 100644 src/components/Pages/Monalisa/Table_36.vue
 create mode 100644 src/components/Pages/Monalisa/Table_37.vue
 create mode 100644 src/components/Pages/Monalisa/Table_38.vue
 create mode 100644 src/components/Pages/Monalisa/Table_39.vue
 create mode 100644 src/components/Pages/Monalisa/Table_40.vue
 create mode 100644 src/components/Pages/Monalisa/Table_41.vue
 create mode 100644 src/components/Pages/Monalisa/Table_42.vue
 create mode 100644 src/components/Pages/Monalisa/Table_43.vue
 create mode 100644 src/components/Pages/Monalisa/Table_45.vue
 create mode 100644 src/components/Pages/Monalisa/Table_46.vue
 create mode 100644 src/components/Pages/Monalisa/Table_47.vue
 create mode 100644 src/components/Pages/Monalisa/Table_48.vue
 create mode 100644 src/components/Pages/Monalisa/Table_49.vue
 create mode 100644 src/components/Pages/Monalisa/Table_50.vue
 create mode 100644 src/components/Pages/Monalisa/Table_51.vue
 create mode 100644 src/components/Pages/Monalisa/Table_52.vue
 create mode 100644 src/components/Pages/Monalisa/Table_53.vue
 create mode 100644 src/components/Pages/Monalisa/Table_54.vue
 create mode 100644 src/components/Pages/Monalisa/Table_55.vue
 create mode 100644 src/components/Pages/Monalisa/Table_56.vue
 create mode 100644 src/components/Pages/Monalisa/Table_57.vue
 create mode 100644 src/components/Pages/Monalisa/Table_58.vue
 create mode 100644 src/components/Pages/Monalisa/Table_59.vue
 create mode 100644 src/components/Pages/Monalisa/Table_60.vue
 create mode 100644 src/components/Pages/Monalisa/index.ts
 create mode 100644 src/components/Pages/PencarianData/Table_69.vue
 create mode 100644 src/components/Pages/PencarianData/index.ts
 create mode 100644 src/components/Pages/Transaksi/Table_68.vue
 create mode 100644 src/components/Pages/Transaksi/Table_69.vue
 create mode 100644 src/components/Pages/Transaksi/index.ts

diff --git a/src/components/Pages/Anomali/Table_62.vue b/src/components/Pages/Anomali/Table_62.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Anomali/Table_62.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/Anomali/Table_63.vue b/src/components/Pages/Anomali/Table_63.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Anomali/Table_63.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/Anomali/Table_64.vue b/src/components/Pages/Anomali/Table_64.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Anomali/Table_64.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/Anomali/index.ts b/src/components/Pages/Anomali/index.ts
new file mode 100644
index 0000000..8a179ad
--- /dev/null
+++ b/src/components/Pages/Anomali/index.ts
@@ -0,0 +1,3 @@
+export { default as AnomaliTable1 } from './Table_62.vue'
+export { default as AnomaliTable2 } from './Table_63.vue'
+export { default as AnomaliTable3 } from './Table_64.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Cico/Table_61.vue b/src/components/Pages/Cico/Table_61.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Cico/Table_61.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/Cico/index.ts b/src/components/Pages/Cico/index.ts
new file mode 100644
index 0000000..73e67e7
--- /dev/null
+++ b/src/components/Pages/Cico/index.ts
@@ -0,0 +1 @@
+export { default as CicoTable1 } from './Table_61.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Ctt/Table_65.vue b/src/components/Pages/Ctt/Table_65.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Ctt/Table_65.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/Ctt/index.ts b/src/components/Pages/Ctt/index.ts
new file mode 100644
index 0000000..ff62607
--- /dev/null
+++ b/src/components/Pages/Ctt/index.ts
@@ -0,0 +1 @@
+export { default as CttTable1 } from './Table_65.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Material/Table_66.vue b/src/components/Pages/Material/Table_66.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Material/Table_66.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/Material/Table_67.vue b/src/components/Pages/Material/Table_67.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Material/Table_67.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/Material/index.ts b/src/components/Pages/Material/index.ts
new file mode 100644
index 0000000..4f07f04
--- /dev/null
+++ b/src/components/Pages/Material/index.ts
@@ -0,0 +1,2 @@
+export { default as MaterialTable1 } from './Table_66.vue'
+export { default as MaterialTable2 } from './Table_67.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..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_36.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/Monalisa/Table_37.vue b/src/components/Pages/Monalisa/Table_37.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_37.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/Monalisa/Table_38.vue b/src/components/Pages/Monalisa/Table_38.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_38.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/Monalisa/Table_39.vue b/src/components/Pages/Monalisa/Table_39.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_39.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/Monalisa/Table_40.vue b/src/components/Pages/Monalisa/Table_40.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_40.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/Monalisa/Table_41.vue b/src/components/Pages/Monalisa/Table_41.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_41.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/Monalisa/Table_42.vue b/src/components/Pages/Monalisa/Table_42.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_42.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/Monalisa/Table_43.vue b/src/components/Pages/Monalisa/Table_43.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_43.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/Monalisa/Table_45.vue b/src/components/Pages/Monalisa/Table_45.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_45.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/Monalisa/Table_46.vue b/src/components/Pages/Monalisa/Table_46.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_46.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/Monalisa/Table_47.vue b/src/components/Pages/Monalisa/Table_47.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_47.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/Monalisa/Table_48.vue b/src/components/Pages/Monalisa/Table_48.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_48.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/Monalisa/Table_49.vue b/src/components/Pages/Monalisa/Table_49.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_49.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/Monalisa/Table_50.vue b/src/components/Pages/Monalisa/Table_50.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_50.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/Monalisa/Table_51.vue b/src/components/Pages/Monalisa/Table_51.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_51.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/Monalisa/Table_52.vue b/src/components/Pages/Monalisa/Table_52.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_52.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/Monalisa/Table_53.vue b/src/components/Pages/Monalisa/Table_53.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_53.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/Monalisa/Table_54.vue b/src/components/Pages/Monalisa/Table_54.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_54.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/Monalisa/Table_55.vue b/src/components/Pages/Monalisa/Table_55.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_55.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/Monalisa/Table_56.vue b/src/components/Pages/Monalisa/Table_56.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_56.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/Monalisa/Table_57.vue b/src/components/Pages/Monalisa/Table_57.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_57.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/Monalisa/Table_58.vue b/src/components/Pages/Monalisa/Table_58.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_58.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/Monalisa/Table_59.vue b/src/components/Pages/Monalisa/Table_59.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_59.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/Monalisa/Table_60.vue b/src/components/Pages/Monalisa/Table_60.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_60.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/Monalisa/index.ts b/src/components/Pages/Monalisa/index.ts
new file mode 100644
index 0000000..0993966
--- /dev/null
+++ b/src/components/Pages/Monalisa/index.ts
@@ -0,0 +1,25 @@
+export { default as MonalisaTable1 } from './Table_36.vue'
+export { default as MonalisaTable2 } from './Table_37.vue'
+export { default as MonalisaTable3 } from './Table_38.vue'
+export { default as MonalisaTable4 } from './Table_39.vue'
+export { default as MonalisaTable5 } from './Table_40.vue'
+export { default as MonalisaTable6 } from './Table_41.vue'
+export { default as MonalisaTable7 } from './Table_42.vue'
+export { default as MonalisaTable8 } from './Table_43.vue'
+export { default as MonalisaTable9 } from './Table_44.vue'
+export { default as MonalisaTable10 } from './Table_45.vue'
+export { default as MonalisaTable11 } from './Table_46.vue'
+export { default as MonalisaTable12 } from './Table_47.vue'
+export { default as MonalisaTable13 } from './Table_48.vue'
+export { default as MonalisaTable14 } from './Table_49.vue'
+export { default as MonalisaTable15 } from './Table_50.vue'
+export { default as MonalisaTable16 } from './Table_51.vue'
+export { default as MonalisaTable17 } from './Table_52.vue'
+export { default as MonalisaTable18 } from './Table_53.vue'
+export { default as MonalisaTable19 } from './Table_54.vue'
+export { default as MonalisaTable20 } from './Table_55.vue'
+export { default as MonalisaTable21 } from './Table_56.vue'
+export { default as MonalisaTable22 } from './Table_57.vue'
+export { default as MonalisaTable23 } from './Table_58.vue'
+export { default as MonalisaTable24 } from './Table_59.vue'
+export { default as MonalisaTable25 } from './Table_60.vue'
diff --git a/src/components/Pages/PencarianData/Table_69.vue b/src/components/Pages/PencarianData/Table_69.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/PencarianData/Table_69.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..9533662
--- /dev/null
+++ b/src/components/Pages/PencarianData/index.ts
@@ -0,0 +1 @@
+export { default as PencarianDataTable1 } from './Table_69.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Transaksi/Table_68.vue b/src/components/Pages/Transaksi/Table_68.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Transaksi/Table_68.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/Table_69.vue b/src/components/Pages/Transaksi/Table_69.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Transaksi/Table_69.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..54acaeb
--- /dev/null
+++ b/src/components/Pages/Transaksi/index.ts
@@ -0,0 +1 @@
+export { default as TransaksiTable1 } from './Table_68.vue'
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 4ca83cb..8c7934c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -47,6 +47,13 @@ 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 } 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[] = [
   {
@@ -287,47 +294,47 @@ 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,
                   },
                 ],
               },
@@ -344,37 +351,37 @@ 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,
                   },
                 ],
               },
@@ -391,22 +398,22 @@ export const routes: RouteRecordRaw[] = [
                   {
                     path: '1',
                     name: 'Penurunan Jumlah Komplain',
-                    component: EmptyPage,
+                    component: MonalisaTable17,
                   },
                   {
                     path: '2',
                     name: 'Aging Complaint',
-                    component: EmptyPage,
+                    component: MonalisaTable18,
                   },
                   {
                     path: '3',
                     name: 'Energy Not Sales (ENS)',
-                    component: EmptyPage,
+                    component: MonalisaTable19,
                   },
                   {
                     path: '4',
                     name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
-                    component: EmptyPage,
+                    component: MonalisaTable20,
                   },
                 ],
               },
@@ -417,22 +424,22 @@ 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,
                   },
                 ],
               }
@@ -451,7 +458,7 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Laporan Check In /Check Out (CICO)',
-                component: EmptyPage,
+                component: CicoTable1,
               },
             ],
           },
@@ -468,12 +475,12 @@ 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: AnomaliTable2,
               },
             ],
           },
@@ -484,7 +491,7 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Laporan Anomali Penangan Pengaduan Keluhan Unit',
-                component: EmptyPage,
+                component: AnomaliTable3,
               },
             ],
           },
@@ -497,7 +504,7 @@ export const routes: RouteRecordRaw[] = [
           {
             path: '1',
             name: 'Laporan CTT & KWH Periksa',
-            component: EmptyPage,
+            component: CttTable1,
           },
         ],
       },
@@ -512,7 +519,7 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Daftar Gangguan Dan Material Yang Dipakai',
-                component: EmptyPage,
+                component: MaterialTable1,
               },
             ],
           },
@@ -523,7 +530,7 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Rekapitulasi Pemakaian Material',
-                component: EmptyPage,
+                component: MaterialTable2,
               },
             ],
           }
@@ -536,7 +543,7 @@ export const routes: RouteRecordRaw[] = [
           {
             path: '1',
             name: 'Transaksi APKT',
-            component: EmptyPage,
+            component: TransaksiTable1,
           },
         ],
       },
@@ -547,7 +554,7 @@ export const routes: RouteRecordRaw[] = [
           {
             path: '1',
             name: 'Pencarian Report Number',
-            component: EmptyPage,
+            component: PencarianDataTable1,
           }
         ]
       },

From d922e9081a21f6bb02b33f8d9e65e277ca942960 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 1 Nov 2023 15:44:06 +0700
Subject: [PATCH 27/67] add table 44

---
 src/components/Pages/Monalisa/Table_44.vue | 108 +++++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 src/components/Pages/Monalisa/Table_44.vue

diff --git a/src/components/Pages/Monalisa/Table_44.vue b/src/components/Pages/Monalisa/Table_44.vue
new file mode 100644
index 0000000..d794954
--- /dev/null
+++ b/src/components/Pages/Monalisa/Table_44.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

From 9a519318f21925cbabcf8c6ba32b258b5bfbdce0 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 09:09:23 +0700
Subject: [PATCH 28/67] update table 36

---
 src/assets/css/style.css                   |  9 +++++
 src/components/Pages/Monalisa/Table_36.vue | 47 +++++-----------------
 2 files changed, 19 insertions(+), 37 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index f0089da..869e0b9 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1321,6 +1321,11 @@ select {
   width: 100%;
 }
 
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -3162,6 +3167,10 @@ select {
     width: 440px;
   }
 
+  .md\:w-full {
+    width: 100%;
+  }
+
   .md\:flex-col {
     flex-direction: column;
   }
diff --git a/src/components/Pages/Monalisa/Table_36.vue b/src/components/Pages/Monalisa/Table_36.vue
index d794954..a8a01ee 100644
--- a/src/components/Pages/Monalisa/Table_36.vue
+++ b/src/components/Pages/Monalisa/Table_36.vue
@@ -12,52 +12,25 @@
             <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"
+            <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="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                <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>
-            <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>

From 8b38c2db00e13940ffb7e59cdeac9fb96ce28914 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 09:10:45 +0700
Subject: [PATCH 29/67] Refactor table layout in Monalisa page

---
 src/components/Pages/Monalisa/Table_37.vue | 47 +++++-----------------
 1 file changed, 10 insertions(+), 37 deletions(-)

diff --git a/src/components/Pages/Monalisa/Table_37.vue b/src/components/Pages/Monalisa/Table_37.vue
index d794954..22be567 100644
--- a/src/components/Pages/Monalisa/Table_37.vue
+++ b/src/components/Pages/Monalisa/Table_37.vue
@@ -12,52 +12,25 @@
             <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"
+            <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="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                <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>
-            <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>

From 69baf68c50cfd2e0a03c317dc7945bccc586447f Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 09:11:40 +0700
Subject: [PATCH 30/67] Refactor table layout in Monalisa page

---
 src/components/Pages/Monalisa/Table_38.vue | 47 +++++-----------------
 1 file changed, 10 insertions(+), 37 deletions(-)

diff --git a/src/components/Pages/Monalisa/Table_38.vue b/src/components/Pages/Monalisa/Table_38.vue
index d794954..6018b06 100644
--- a/src/components/Pages/Monalisa/Table_38.vue
+++ b/src/components/Pages/Monalisa/Table_38.vue
@@ -12,52 +12,25 @@
             <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"
+            <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="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                <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>
-            <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>

From 7be0f920b36ca0875667f9000e086587857df573 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 09:12:13 +0700
Subject: [PATCH 31/67] Refactor table layout in Monalisa page

---
 src/components/Pages/Monalisa/Table_39.vue | 47 +++++-----------------
 1 file changed, 10 insertions(+), 37 deletions(-)

diff --git a/src/components/Pages/Monalisa/Table_39.vue b/src/components/Pages/Monalisa/Table_39.vue
index d794954..75195e8 100644
--- a/src/components/Pages/Monalisa/Table_39.vue
+++ b/src/components/Pages/Monalisa/Table_39.vue
@@ -12,52 +12,25 @@
             <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"
+            <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="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                <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>
-            <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>

From e8cc2fec12961545b16146283facd1eb82b7dd24 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 09:28:45 +0700
Subject: [PATCH 32/67] Refactor table layout and add new columns for RPT and
 RCT gangguan

---
 src/components/Pages/Monalisa/Table_40.vue | 95 ++++++++++++----------
 1 file changed, 52 insertions(+), 43 deletions(-)

diff --git a/src/components/Pages/Monalisa/Table_40.vue b/src/components/Pages/Monalisa/Table_40.vue
index d794954..0cf2303 100644
--- a/src/components/Pages/Monalisa/Table_40.vue
+++ b/src/components/Pages/Monalisa/Table_40.vue
@@ -12,52 +12,61 @@
             <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 :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="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 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>
-            <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>

From f907ec18ac97a8901b4e95a1eda93d6cfef5429d Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 09:34:36 +0700
Subject: [PATCH 33/67] Refactor table columns in Monalisa page

---
 src/components/Pages/Monalisa/Table_41.vue | 51 +++-------------------
 1 file changed, 5 insertions(+), 46 deletions(-)

diff --git a/src/components/Pages/Monalisa/Table_41.vue b/src/components/Pages/Monalisa/Table_41.vue
index d794954..902134f 100644
--- a/src/components/Pages/Monalisa/Table_41.vue
+++ b/src/components/Pages/Monalisa/Table_41.vue
@@ -2,8 +2,7 @@
     <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">
+            @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" />
@@ -13,50 +12,10 @@
             <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>
+            <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>

From 663e9ddfad176417b9a1ddf5a4fbe48cd136d0cc Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 09:39:53 +0700
Subject: [PATCH 34/67] Refactor table layout in Monalisa page

---
 src/components/Pages/Monalisa/Table_42.vue | 47 +++++-----------------
 1 file changed, 10 insertions(+), 37 deletions(-)

diff --git a/src/components/Pages/Monalisa/Table_42.vue b/src/components/Pages/Monalisa/Table_42.vue
index d794954..a0c6d78 100644
--- a/src/components/Pages/Monalisa/Table_42.vue
+++ b/src/components/Pages/Monalisa/Table_42.vue
@@ -12,52 +12,25 @@
             <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"
+            <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="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                <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>
-            <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>

From 913b0c00e06ca929bd74606eb8b51b4d3a8a6710 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 09:40:32 +0700
Subject: [PATCH 35/67] Refactor table layout in Monalisa page

---
 src/components/Pages/Monalisa/Table_43.vue | 47 +++++-----------------
 1 file changed, 10 insertions(+), 37 deletions(-)

diff --git a/src/components/Pages/Monalisa/Table_43.vue b/src/components/Pages/Monalisa/Table_43.vue
index d794954..d7bd85e 100644
--- a/src/components/Pages/Monalisa/Table_43.vue
+++ b/src/components/Pages/Monalisa/Table_43.vue
@@ -12,52 +12,25 @@
             <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"
+            <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="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                <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>
-            <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>

From 546c2eb9c0e35091202327f74b10c6324abded3c Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 09:41:44 +0700
Subject: [PATCH 36/67] Refactored table layout in Monalisa page

---
 src/components/Pages/Monalisa/Table_44.vue | 52 +++-------------------
 1 file changed, 7 insertions(+), 45 deletions(-)

diff --git a/src/components/Pages/Monalisa/Table_44.vue b/src/components/Pages/Monalisa/Table_44.vue
index d794954..286a07a 100644
--- a/src/components/Pages/Monalisa/Table_44.vue
+++ b/src/components/Pages/Monalisa/Table_44.vue
@@ -2,8 +2,7 @@
     <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">
+            @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" />
@@ -12,52 +11,15 @@
             <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 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 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>

From 32f5ded702ac45f0a5165cc83dd265cf83e4fde9 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 09:50:52 +0700
Subject: [PATCH 37/67] Refactored table layout in Monalisa page

---
 src/components/Pages/Monalisa/Table_45.vue | 47 +++--------
 src/components/Pages/Monalisa/Table_46.vue | 47 +++--------
 src/components/Pages/Monalisa/Table_47.vue | 47 +++--------
 src/components/Pages/Monalisa/Table_48.vue | 95 ++++++++++++----------
 src/components/Pages/Monalisa/Table_49.vue | 51 ++----------
 src/components/Pages/Monalisa/Table_50.vue | 47 +++--------
 src/components/Pages/Monalisa/Table_51.vue | 52 ++----------
 7 files changed, 104 insertions(+), 282 deletions(-)

diff --git a/src/components/Pages/Monalisa/Table_45.vue b/src/components/Pages/Monalisa/Table_45.vue
index d794954..a8a01ee 100644
--- a/src/components/Pages/Monalisa/Table_45.vue
+++ b/src/components/Pages/Monalisa/Table_45.vue
@@ -12,52 +12,25 @@
             <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"
+            <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="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                <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>
-            <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>
diff --git a/src/components/Pages/Monalisa/Table_46.vue b/src/components/Pages/Monalisa/Table_46.vue
index d794954..d18cb02 100644
--- a/src/components/Pages/Monalisa/Table_46.vue
+++ b/src/components/Pages/Monalisa/Table_46.vue
@@ -12,52 +12,25 @@
             <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"
+            <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="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                <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>
-            <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>
diff --git a/src/components/Pages/Monalisa/Table_47.vue b/src/components/Pages/Monalisa/Table_47.vue
index d794954..7725a2a 100644
--- a/src/components/Pages/Monalisa/Table_47.vue
+++ b/src/components/Pages/Monalisa/Table_47.vue
@@ -12,52 +12,25 @@
             <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"
+            <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="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                <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>
-            <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>
diff --git a/src/components/Pages/Monalisa/Table_48.vue b/src/components/Pages/Monalisa/Table_48.vue
index d794954..b2fee1a 100644
--- a/src/components/Pages/Monalisa/Table_48.vue
+++ b/src/components/Pages/Monalisa/Table_48.vue
@@ -12,52 +12,61 @@
             <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 :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="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 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>
-            <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>
diff --git a/src/components/Pages/Monalisa/Table_49.vue b/src/components/Pages/Monalisa/Table_49.vue
index d794954..57ff6cd 100644
--- a/src/components/Pages/Monalisa/Table_49.vue
+++ b/src/components/Pages/Monalisa/Table_49.vue
@@ -2,8 +2,7 @@
     <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">
+            @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" />
@@ -13,50 +12,10 @@
             <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>
+            <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>
diff --git a/src/components/Pages/Monalisa/Table_50.vue b/src/components/Pages/Monalisa/Table_50.vue
index d794954..5d8a932 100644
--- a/src/components/Pages/Monalisa/Table_50.vue
+++ b/src/components/Pages/Monalisa/Table_50.vue
@@ -12,52 +12,25 @@
             <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"
+            <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="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                <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>
-            <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>
diff --git a/src/components/Pages/Monalisa/Table_51.vue b/src/components/Pages/Monalisa/Table_51.vue
index d794954..a6c8a81 100644
--- a/src/components/Pages/Monalisa/Table_51.vue
+++ b/src/components/Pages/Monalisa/Table_51.vue
@@ -2,8 +2,7 @@
     <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">
+            @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" />
@@ -12,52 +11,15 @@
             <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 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 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>

From 0885471c4ff32c3528a15057eaa00c31aa255a92 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 10:10:51 +0700
Subject: [PATCH 38/67] Remove console.log statement in toggleSidebarMenu
 function

---
 src/stores/menu.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/stores/menu.ts b/src/stores/menu.ts
index 706e4b8..fc70432 100644
--- a/src/stores/menu.ts
+++ b/src/stores/menu.ts
@@ -17,8 +17,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) {

From ff27193fac59c7a42671effd30dced46c250a4c1 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 10:36:42 +0700
Subject: [PATCH 39/67] Fix filter condition in convertRouteToMenu function

---
 src/utils/route.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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}`,

From ffa9876ed0a1c16b8b703de1eb5698ea67add0ae Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 10:36:50 +0700
Subject: [PATCH 40/67] Add empty page component to handle unmatched routes

---
 src/router/index.ts | 167 +++++++++++++++++++++++++++++++++++++-------
 1 file changed, 143 insertions(+), 24 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index 8c7934c..53e4234 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -110,6 +110,10 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Daftar Gangguan Diselesaikan Mobile APKT',
                 component: GangguanTable7,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
           {
@@ -181,7 +185,15 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Rekapitulasi Cleansing Transaksi TM',
                 component: GangguanTable20,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
+          },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
           }
         ]
       },
@@ -228,6 +240,10 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Daftar Keluhan Selesai di CC123',
                 component: KeluhanTable7,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
           {
@@ -269,13 +285,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,
           }
         ],
       },
@@ -336,8 +359,16 @@ export const routes: RouteRecordRaw[] = [
                     name: 'Rekapitulasi Gangguan Belum Selesai',
                     component: MonalisaTable9,
                   },
+                  {
+                    path: ':pathMatch(.*)*',
+                    component: EmptyPage,
+                  }
                 ],
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
           {
@@ -383,12 +414,20 @@ export const routes: RouteRecordRaw[] = [
                     name: 'Rekapitulasi Keluhan Belum Selesai',
                     component: MonalisaTable16,
                   },
+                  {
+                    path: ':pathMatch(.*)*',
+                    component: EmptyPage,
+                  }
                 ],
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
           {
-            path: 'kpi',
+            path: 'laporan',
             name: 'Laporan KPI',
             children: [
               {
@@ -415,6 +454,10 @@ export const routes: RouteRecordRaw[] = [
                     name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
                     component: MonalisaTable20,
                   },
+                  {
+                    path: ':pathMatch(.*)*',
+                    component: EmptyPage,
+                  }
                 ],
               },
               {
@@ -441,7 +484,15 @@ export const routes: RouteRecordRaw[] = [
                     name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
                     component: MonalisaTable24,
                   },
+                  {
+                    path: ':pathMatch(.*)*',
+                    component: EmptyPage,
+                  }
                 ],
+              },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
               }
             ],
           },
@@ -460,8 +511,16 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Laporan Check In /Check Out (CICO)',
                 component: CicoTable1,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
+          }
         ],
       },
       {
@@ -482,6 +541,10 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Laporan Anomali Penangan Pengaduan Gangguan Petugas',
                 component: AnomaliTable2,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
           {
@@ -493,8 +556,16 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Laporan Anomali Penangan Pengaduan Keluhan Unit',
                 component: AnomaliTable3,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
+          }
         ],
       },
       {
@@ -506,6 +577,10 @@ export const routes: RouteRecordRaw[] = [
             name: 'Laporan CTT & KWH Periksa',
             component: CttTable1,
           },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
+          }
         ],
       },
       {
@@ -521,6 +596,10 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Daftar Gangguan Dan Material Yang Dipakai',
                 component: MaterialTable1,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
           },
           {
@@ -532,7 +611,15 @@ export const routes: RouteRecordRaw[] = [
                 name: 'Rekapitulasi Pemakaian Material',
                 component: MaterialTable2,
               },
+              {
+                path: ':pathMatch(.*)*',
+                component: EmptyPage,
+              }
             ],
+          },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
           }
         ],
       },
@@ -545,6 +632,10 @@ export const routes: RouteRecordRaw[] = [
             name: 'Transaksi APKT',
             component: TransaksiTable1,
           },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
+          }
         ],
       },
       {
@@ -555,9 +646,17 @@ export const routes: RouteRecordRaw[] = [
             path: '1',
             name: 'Pencarian Report Number',
             component: PencarianDataTable1,
+          },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
           }
         ]
       },
+      {
+        path: ':pathMatch(.*)*',
+        component: EmptyPage,
+      }
     ]
   },
   {
@@ -575,6 +674,10 @@ export const routes: RouteRecordRaw[] = [
     name: 'Not Found',
     component: NotFoundView
   },
+  {
+    path: ':pathMatch(.*)*',
+    redirect: '/404'
+  }
 ]
 
 export const mergeChildrenRoutes = (routes: RouteRecordRaw[]): RouteRecordRaw[] => {
@@ -677,32 +780,48 @@ router.beforeEach((to, from, next) => {
   const auth = useAuthStore();
 
   // if to is not found, redirect to 404
-  if (to.matched.length === 0) {
-    if (to.path === '/') {
-      if (auth.isLoggedIn) {
-        next('/home')
-      } else {
-        next('/login')
-      }
+  // if (to.matched.length === 0) {
+  //   if (to.path === '/') {
+  //     if (auth.isLoggedIn) {
+  //       next('/home')
+  //     } else {
+  //       next('/login')
+  //     }
+  //   } else {
+  //     next('/404')
+  //   }
+  // } else {
+  //   // if to is not login and user is not logged in, redirect to login
+  //   if (auth.isLoggedIn) {
+  //     // if to is login and user is logged in, redirect to home
+  //     if (to.path === '/login') {
+  //       next('/home')
+  //     } else {
+  //       next()
+  //     }
+  //   } else {
+  //     // if to is 404, redirect to 404
+  //     if (to.path !== '/404' && to.path !== '/login') {
+  //       next('/login')
+  //     } else {
+  //       next()
+  //     }
+  //   }
+  // }
+
+  if (auth.isLoggedIn) {
+    // if to is login and user is logged in, redirect to home
+    if (to.path === '/login') {
+      next('/home')
     } else {
-      next('/404')
+      next()
     }
   } else {
-    // if to is not login and user is not logged in, redirect to login
-    if (auth.isLoggedIn) {
-      // if to is login and user is logged in, redirect to home
-      if (to.path === '/login') {
-        next('/home')
-      } else {
-        next()
-      }
+    // if to is 404, redirect to 404
+    if (to.path !== '/404' && to.path !== '/login') {
+      next('/login')
     } else {
-      // if to is 404, redirect to 404
-      if (to.path !== '/404' && to.path !== '/login') {
-        next('/login')
-      } else {
-        next()
-      }
+      next()
     }
   }
 })

From bafeb5960e5f5380cc7794162bf317e96a916aed Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 10:55:14 +0700
Subject: [PATCH 41/67] Refactor import statements and update route paths.

---
 src/router/index.ts | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index 53e4234..487bd81 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -47,7 +47,32 @@ 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 {
+  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 } from '@/components/Pages/Anomali'
 import { CttTable1 } from '@/components/Pages/Ctt'
@@ -427,11 +452,11 @@ export const routes: RouteRecordRaw[] = [
             ],
           },
           {
-            path: 'laporan',
+            path: 'lap',
             name: 'Laporan KPI',
             children: [
               {
-                path: 'bulanan',
+                path: 'bul',
                 name: 'Bulanan',
                 children: [
                   {

From 8ee817ee303e3d2aea2b11f736abdd84ea0c94fb Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 10:55:29 +0700
Subject: [PATCH 42/67] Refactor component imports to use relative paths

---
 src/components/Pages/Anomali/index.ts       |  6 +--
 src/components/Pages/Cico/index.ts          |  2 +-
 src/components/Pages/Ctt/index.ts           |  2 +-
 src/components/Pages/Gangguan/index.ts      | 40 ++++++++---------
 src/components/Pages/Keluhan/index.ts       | 30 ++++++-------
 src/components/Pages/Material/index.ts      |  4 +-
 src/components/Pages/Monalisa/index.ts      | 50 ++++++++++-----------
 src/components/Pages/PencarianData/index.ts |  2 +-
 src/components/Pages/Transaksi/index.ts     |  2 +-
 9 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/src/components/Pages/Anomali/index.ts b/src/components/Pages/Anomali/index.ts
index 8a179ad..18f452b 100644
--- a/src/components/Pages/Anomali/index.ts
+++ b/src/components/Pages/Anomali/index.ts
@@ -1,3 +1,3 @@
-export { default as AnomaliTable1 } from './Table_62.vue'
-export { default as AnomaliTable2 } from './Table_63.vue'
-export { default as AnomaliTable3 } from './Table_64.vue'
\ No newline at end of file
+export { default as AnomaliTable1 } from '@/components/Pages/Anomali/Table_62.vue'
+export { default as AnomaliTable2 } from '@/components/Pages/Anomali/Table_63.vue'
+export { default as AnomaliTable3 } from '@/components/Pages/Anomali/Table_64.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Cico/index.ts b/src/components/Pages/Cico/index.ts
index 73e67e7..cee81b0 100644
--- a/src/components/Pages/Cico/index.ts
+++ b/src/components/Pages/Cico/index.ts
@@ -1 +1 @@
-export { default as CicoTable1 } from './Table_61.vue'
\ No newline at end of file
+export { default as CicoTable1 } from '@/components/Pages/Cico/Table_61.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Ctt/index.ts b/src/components/Pages/Ctt/index.ts
index ff62607..a49b737 100644
--- a/src/components/Pages/Ctt/index.ts
+++ b/src/components/Pages/Ctt/index.ts
@@ -1 +1 @@
-export { default as CttTable1 } from './Table_65.vue'
\ No newline at end of file
+export { default as CttTable1 } from '@/components/Pages/Ctt/Table_65.vue'
\ No newline at end of file
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/index.ts b/src/components/Pages/Material/index.ts
index 4f07f04..90cab3d 100644
--- a/src/components/Pages/Material/index.ts
+++ b/src/components/Pages/Material/index.ts
@@ -1,2 +1,2 @@
-export { default as MaterialTable1 } from './Table_66.vue'
-export { default as MaterialTable2 } from './Table_67.vue'
\ No newline at end of file
+export { default as MaterialTable1 } from '@/components/Pages/Material/Table_66.vue'
+export { default as MaterialTable2 } from '@/components/Pages/Material/Table_67.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/index.ts b/src/components/Pages/Monalisa/index.ts
index 0993966..f58b025 100644
--- a/src/components/Pages/Monalisa/index.ts
+++ b/src/components/Pages/Monalisa/index.ts
@@ -1,25 +1,25 @@
-export { default as MonalisaTable1 } from './Table_36.vue'
-export { default as MonalisaTable2 } from './Table_37.vue'
-export { default as MonalisaTable3 } from './Table_38.vue'
-export { default as MonalisaTable4 } from './Table_39.vue'
-export { default as MonalisaTable5 } from './Table_40.vue'
-export { default as MonalisaTable6 } from './Table_41.vue'
-export { default as MonalisaTable7 } from './Table_42.vue'
-export { default as MonalisaTable8 } from './Table_43.vue'
-export { default as MonalisaTable9 } from './Table_44.vue'
-export { default as MonalisaTable10 } from './Table_45.vue'
-export { default as MonalisaTable11 } from './Table_46.vue'
-export { default as MonalisaTable12 } from './Table_47.vue'
-export { default as MonalisaTable13 } from './Table_48.vue'
-export { default as MonalisaTable14 } from './Table_49.vue'
-export { default as MonalisaTable15 } from './Table_50.vue'
-export { default as MonalisaTable16 } from './Table_51.vue'
-export { default as MonalisaTable17 } from './Table_52.vue'
-export { default as MonalisaTable18 } from './Table_53.vue'
-export { default as MonalisaTable19 } from './Table_54.vue'
-export { default as MonalisaTable20 } from './Table_55.vue'
-export { default as MonalisaTable21 } from './Table_56.vue'
-export { default as MonalisaTable22 } from './Table_57.vue'
-export { default as MonalisaTable23 } from './Table_58.vue'
-export { default as MonalisaTable24 } from './Table_59.vue'
-export { default as MonalisaTable25 } from './Table_60.vue'
+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'
+export { default as MonalisaTable25 } from '@/components/Pages/Monalisa/Table_60.vue'
diff --git a/src/components/Pages/PencarianData/index.ts b/src/components/Pages/PencarianData/index.ts
index 9533662..9104e7b 100644
--- a/src/components/Pages/PencarianData/index.ts
+++ b/src/components/Pages/PencarianData/index.ts
@@ -1 +1 @@
-export { default as PencarianDataTable1 } from './Table_69.vue'
\ No newline at end of file
+export { default as PencarianDataTable1 } from '@/components/Pages/PencarianData/Table_69.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Transaksi/index.ts b/src/components/Pages/Transaksi/index.ts
index 54acaeb..533e981 100644
--- a/src/components/Pages/Transaksi/index.ts
+++ b/src/components/Pages/Transaksi/index.ts
@@ -1 +1 @@
-export { default as TransaksiTable1 } from './Table_68.vue'
\ No newline at end of file
+export { default as TransaksiTable1 } from '@/components/Pages/Transaksi/Table_68.vue'
\ No newline at end of file

From d89d1b9a4ea62341e65de8929b97527261e4a38c Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 11:01:52 +0700
Subject: [PATCH 43/67] Comment out inferno import in vite.config.ts

---
 vite.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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',
     }
   },
 })

From 6a81c1686febbe9cc081b23402eeb858c6760335 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 11:11:38 +0700
Subject: [PATCH 44/67] Redirect root path to Home component

---
 src/router/index.ts | 66 ++++++++++++++++++---------------------------
 1 file changed, 26 insertions(+), 40 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index 487bd81..285df65 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -700,8 +700,10 @@ export const routes: RouteRecordRaw[] = [
     component: NotFoundView
   },
   {
-    path: ':pathMatch(.*)*',
-    redirect: '/404'
+    path: '/',
+    redirect: {
+      name: 'Home'
+    }
   }
 ]
 
@@ -805,48 +807,32 @@ router.beforeEach((to, from, next) => {
   const auth = useAuthStore();
 
   // if to is not found, redirect to 404
-  // if (to.matched.length === 0) {
-  //   if (to.path === '/') {
-  //     if (auth.isLoggedIn) {
-  //       next('/home')
-  //     } else {
-  //       next('/login')
-  //     }
-  //   } else {
-  //     next('/404')
-  //   }
-  // } else {
-  //   // if to is not login and user is not logged in, redirect to login
-  //   if (auth.isLoggedIn) {
-  //     // if to is login and user is logged in, redirect to home
-  //     if (to.path === '/login') {
-  //       next('/home')
-  //     } else {
-  //       next()
-  //     }
-  //   } else {
-  //     // if to is 404, redirect to 404
-  //     if (to.path !== '/404' && to.path !== '/login') {
-  //       next('/login')
-  //     } else {
-  //       next()
-  //     }
-  //   }
-  // }
-
-  if (auth.isLoggedIn) {
-    // if to is login and user is logged in, redirect to home
-    if (to.path === '/login') {
-      next('/home')
+  if (to.matched.length === 0) {
+    if (to.path === '/') {
+      if (auth.isLoggedIn) {
+        next('/home')
+      } else {
+        next('/login')
+      }
     } else {
-      next()
+      next('/404')
     }
   } else {
-    // if to is 404, redirect to 404
-    if (to.path !== '/404' && to.path !== '/login') {
-      next('/login')
+    // if to is not login and user is not logged in, redirect to login
+    if (auth.isLoggedIn) {
+      // if to is login and user is logged in, redirect to home
+      if (to.path === '/login') {
+        next('/home')
+      } else {
+        next()
+      }
     } else {
-      next()
+      // if to is 404, redirect to 404
+      if (to.path !== '/404' && to.path !== '/login') {
+        next('/login')
+      } else {
+        next()
+      }
     }
   }
 })

From 2e72bae4c154cfff5812ffde49e00255071f22a5 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 11:27:37 +0700
Subject: [PATCH 45/67] Remove unused imports and defineProps in Navigation
 components

---
 src/components/Navigation/Aside/Aside.vue           | 5 +----
 src/components/Navigation/Aside/AsideMenuSingle.vue | 2 +-
 src/components/Navigation/Header.vue                | 3 ---
 3 files changed, 2 insertions(+), 8 deletions(-)

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 23a9199..1ab2054 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'

From 0d1c580156476709eb9cdca7b2cce7d25b446dab Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 12:33:37 +0700
Subject: [PATCH 46/67] Refactor menu.ts imports.

---
 src/stores/menu.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/menu.ts b/src/stores/menu.ts
index fc70432..2976177 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'

From 94d357f8bdff5273cae5c2f6b4f54a430b6a8fbd Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 13:34:51 +0700
Subject: [PATCH 47/67] Update route paths in router index.ts

---
 src/router/index.ts | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index 285df65..aa7e388 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -452,11 +452,11 @@ export const routes: RouteRecordRaw[] = [
             ],
           },
           {
-            path: 'lap',
+            path: 'laporan-kpi',
             name: 'Laporan KPI',
             children: [
               {
-                path: 'bul',
+                path: 'bulanan',
                 name: 'Bulanan',
                 children: [
                   {
@@ -518,9 +518,13 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: ':pathMatch(.*)*',
                 component: EmptyPage,
-              }
+              },
             ],
           },
+          {
+            path: ':pathMatch(.*)*',
+            component: EmptyPage,
+          },
         ],
       },
       {
@@ -790,8 +794,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
 }
 
 
@@ -799,7 +805,8 @@ const router = createRouter({
   history: createWebHistory(),
   linkActiveClass: 'active',
   stringifyQuery: qs.stringify,
-  routes: fixRoute(routes)
+  routes: fixRoute(routes),
+  strict: true,
 })
 
 router.beforeEach((to, from, next) => {

From 7df365c2128bdb018d658f83bef19bc108cc9c74 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 13:34:56 +0700
Subject: [PATCH 48/67] Remove unnecessary CSS rules.

---
 src/assets/css/style.css | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 869e0b9..f0089da 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1321,11 +1321,6 @@ select {
   width: 100%;
 }
 
-.w-fit {
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -3167,10 +3162,6 @@ select {
     width: 440px;
   }
 
-  .md\:w-full {
-    width: 100%;
-  }
-
   .md\:flex-col {
     flex-direction: column;
   }

From 6b3994723ced88c2d3c5b2f277aa232206e0d41b Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 14:02:47 +0700
Subject: [PATCH 49/67] Update Monalisa table names in router

---
 src/router/index.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index aa7e388..343d782 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -461,22 +461,22 @@ export const routes: RouteRecordRaw[] = [
                 children: [
                   {
                     path: '1',
-                    name: 'Penurunan Jumlah Komplain',
+                    name: '(Monalisa) Penurunan Jumlah Komplain',
                     component: MonalisaTable17,
                   },
                   {
                     path: '2',
-                    name: 'Aging Complaint',
+                    name: '(Monalisa) Aging Complaint',
                     component: MonalisaTable18,
                   },
                   {
                     path: '3',
-                    name: 'Energy Not Sales (ENS)',
+                    name: '(Monalisa) Energy Not Sales (ENS)',
                     component: MonalisaTable19,
                   },
                   {
                     path: '4',
-                    name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
+                    name: '(Monalisa) Kepatuhan dan Akurasi Dalam Pelaporan',
                     component: MonalisaTable20,
                   },
                   {

From 8c5c9d266bc998b40eab0bf55198c07d91ee9323 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 14:02:51 +0700
Subject: [PATCH 50/67] Refactor table columns in Monalisa page

---
 src/components/Pages/Monalisa/Table_52.vue | 85 +++++++++++++---------
 1 file changed, 52 insertions(+), 33 deletions(-)

diff --git a/src/components/Pages/Monalisa/Table_52.vue b/src/components/Pages/Monalisa/Table_52.vue
index d794954..3910573 100644
--- a/src/components/Pages/Monalisa/Table_52.vue
+++ b/src/components/Pages/Monalisa/Table_52.vue
@@ -12,49 +12,68 @@
             <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"
+            <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="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 alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field=""
+                    data-type="number" />
             </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"
+
+            <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="150" alignment="center" data-field="" data-type="number" caption="%"
+                <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>
 

From a4c5a805f91a2a7ed7e59ee63a8d76e427a7d275 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 14:20:56 +0700
Subject: [PATCH 51/67] Refactor table layout and column captions in Monalisa
 page

---
 src/components/Pages/Monalisa/Table_53.vue | 49 +++++++---------------
 1 file changed, 15 insertions(+), 34 deletions(-)

diff --git a/src/components/Pages/Monalisa/Table_53.vue b/src/components/Pages/Monalisa/Table_53.vue
index d794954..de50a70 100644
--- a/src/components/Pages/Monalisa/Table_53.vue
+++ b/src/components/Pages/Monalisa/Table_53.vue
@@ -12,51 +12,32 @@
             <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"
+            <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 alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+            </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="%"
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Menit)"
                         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"
+                <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="%"
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Jam)"
                         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"
+            <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="%"
+                <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>

From b8d39b68e401e481662c9607741b3ef4c427ea1a Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 14:32:30 +0700
Subject: [PATCH 52/67] Refactor table layout and add new columns for ENS
 distribution

---
 src/components/Pages/Monalisa/Table_54.vue | 57 ++++++----------------
 src/components/Pages/Monalisa/Table_55.vue | 49 +++++--------------
 2 files changed, 25 insertions(+), 81 deletions(-)

diff --git a/src/components/Pages/Monalisa/Table_54.vue b/src/components/Pages/Monalisa/Table_54.vue
index d794954..79296e0 100644
--- a/src/components/Pages/Monalisa/Table_54.vue
+++ b/src/components/Pages/Monalisa/Table_54.vue
@@ -12,51 +12,22 @@
             <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="%"
+            <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>
diff --git a/src/components/Pages/Monalisa/Table_55.vue b/src/components/Pages/Monalisa/Table_55.vue
index d794954..942242f 100644
--- a/src/components/Pages/Monalisa/Table_55.vue
+++ b/src/components/Pages/Monalisa/Table_55.vue
@@ -12,51 +12,24 @@
             <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"
+            <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="%"
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Gangguan"
                         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"
+                <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="%"
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Keluhan"
                         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>
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Komplain Pelanggan %"
+                css-class="custom-table-column" />
 
         </DxDataGrid>
     </div>

From 289520e56cc6a55c3d7b377653562b0cf84c0ad0 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 14:44:19 +0700
Subject: [PATCH 53/67] Refactor table layout and columns

---
 src/components/Pages/Monalisa/Table_56.vue | 86 ++++++++++++----------
 1 file changed, 46 insertions(+), 40 deletions(-)

diff --git a/src/components/Pages/Monalisa/Table_56.vue b/src/components/Pages/Monalisa/Table_56.vue
index d794954..db105d6 100644
--- a/src/components/Pages/Monalisa/Table_56.vue
+++ b/src/components/Pages/Monalisa/Table_56.vue
@@ -12,49 +12,55 @@
             <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"
+            <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 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"
+                <DxColumn :width="120" 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="%"
+                <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>
 

From 26ff55c1df3958d5e9f72275a60accd633da11f2 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 14:47:47 +0700
Subject: [PATCH 54/67] Refactor table layout in Monalisa page

---
 src/components/Pages/Monalisa/Table_57.vue | 49 ++++++-------------
 src/components/Pages/Monalisa/Table_58.vue | 57 ++++++----------------
 2 files changed, 29 insertions(+), 77 deletions(-)

diff --git a/src/components/Pages/Monalisa/Table_57.vue b/src/components/Pages/Monalisa/Table_57.vue
index d794954..409c190 100644
--- a/src/components/Pages/Monalisa/Table_57.vue
+++ b/src/components/Pages/Monalisa/Table_57.vue
@@ -12,51 +12,32 @@
             <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"
+            <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 alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+            </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="%"
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Menit)"
                         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"
+                <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="%"
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Jam)"
                         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"
+            <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="%"
+                <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>
diff --git a/src/components/Pages/Monalisa/Table_58.vue b/src/components/Pages/Monalisa/Table_58.vue
index d794954..3be2336 100644
--- a/src/components/Pages/Monalisa/Table_58.vue
+++ b/src/components/Pages/Monalisa/Table_58.vue
@@ -12,51 +12,22 @@
             <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="%"
+            <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>

From 129acd762dfb50fdef72708c8b750ff6f9173584 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 15:23:07 +0700
Subject: [PATCH 55/67] Refactor table layout and columns in Monalisa page

---
 src/components/Pages/Monalisa/Table_59.vue | 44 +++++-----------------
 1 file changed, 9 insertions(+), 35 deletions(-)

diff --git a/src/components/Pages/Monalisa/Table_59.vue b/src/components/Pages/Monalisa/Table_59.vue
index d794954..7ed615d 100644
--- a/src/components/Pages/Monalisa/Table_59.vue
+++ b/src/components/Pages/Monalisa/Table_59.vue
@@ -12,51 +12,25 @@
             <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 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="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                <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="%"
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Gangguan"
                         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"
+                <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="%"
+                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Keluhan"
                         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>
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Komplain Pelanggan %"
+                css-class="custom-table-column" />
 
         </DxDataGrid>
     </div>

From 9fa99e8397cb52a1be3022dcc67af497af3a27bb Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 15:27:19 +0700
Subject: [PATCH 56/67] Updated table references in multiple components

---
 .../Pages/{Cico => Anomali}/Table_61.vue      |   0
 src/components/Pages/Anomali/index.ts         |   6 +-
 .../Pages/{Monalisa => Cico}/Table_60.vue     |   0
 src/components/Pages/Cico/index.ts            |   2 +-
 .../Pages/{Anomali => Ctt}/Table_64.vue       |   0
 src/components/Pages/Ctt/index.ts             |   2 +-
 .../Pages/{Ctt => Material}/Table_65.vue      |   0
 src/components/Pages/Material/index.ts        |   4 +-
 src/components/Pages/Monalisa/index.ts        |   1 -
 .../{Transaksi => PencarianData}/Table_68.vue |   0
 .../Pages/PencarianData/Table_69.vue          | 108 ------------------
 src/components/Pages/PencarianData/index.ts   |   2 +-
 .../{Material => Transaksi}/Table_67.vue      |   0
 src/components/Pages/Transaksi/Table_69.vue   | 108 ------------------
 src/components/Pages/Transaksi/index.ts       |   2 +-
 15 files changed, 9 insertions(+), 226 deletions(-)
 rename src/components/Pages/{Cico => Anomali}/Table_61.vue (100%)
 rename src/components/Pages/{Monalisa => Cico}/Table_60.vue (100%)
 rename src/components/Pages/{Anomali => Ctt}/Table_64.vue (100%)
 rename src/components/Pages/{Ctt => Material}/Table_65.vue (100%)
 rename src/components/Pages/{Transaksi => PencarianData}/Table_68.vue (100%)
 delete mode 100644 src/components/Pages/PencarianData/Table_69.vue
 rename src/components/Pages/{Material => Transaksi}/Table_67.vue (100%)
 delete mode 100644 src/components/Pages/Transaksi/Table_69.vue

diff --git a/src/components/Pages/Cico/Table_61.vue b/src/components/Pages/Anomali/Table_61.vue
similarity index 100%
rename from src/components/Pages/Cico/Table_61.vue
rename to src/components/Pages/Anomali/Table_61.vue
diff --git a/src/components/Pages/Anomali/index.ts b/src/components/Pages/Anomali/index.ts
index 18f452b..3c08f9d 100644
--- a/src/components/Pages/Anomali/index.ts
+++ b/src/components/Pages/Anomali/index.ts
@@ -1,3 +1,3 @@
-export { default as AnomaliTable1 } from '@/components/Pages/Anomali/Table_62.vue'
-export { default as AnomaliTable2 } from '@/components/Pages/Anomali/Table_63.vue'
-export { default as AnomaliTable3 } from '@/components/Pages/Anomali/Table_64.vue'
\ No newline at end of file
+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'
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_60.vue b/src/components/Pages/Cico/Table_60.vue
similarity index 100%
rename from src/components/Pages/Monalisa/Table_60.vue
rename to src/components/Pages/Cico/Table_60.vue
diff --git a/src/components/Pages/Cico/index.ts b/src/components/Pages/Cico/index.ts
index cee81b0..afe5ed0 100644
--- a/src/components/Pages/Cico/index.ts
+++ b/src/components/Pages/Cico/index.ts
@@ -1 +1 @@
-export { default as CicoTable1 } from '@/components/Pages/Cico/Table_61.vue'
\ No newline at end of file
+export { default as CicoTable1 } from '@/components/Pages/Cico/Table_60.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Table_64.vue b/src/components/Pages/Ctt/Table_64.vue
similarity index 100%
rename from src/components/Pages/Anomali/Table_64.vue
rename to src/components/Pages/Ctt/Table_64.vue
diff --git a/src/components/Pages/Ctt/index.ts b/src/components/Pages/Ctt/index.ts
index a49b737..5469ed1 100644
--- a/src/components/Pages/Ctt/index.ts
+++ b/src/components/Pages/Ctt/index.ts
@@ -1 +1 @@
-export { default as CttTable1 } from '@/components/Pages/Ctt/Table_65.vue'
\ No newline at end of file
+export { default as CttTable1 } from '@/components/Pages/Ctt/Table_64.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Ctt/Table_65.vue b/src/components/Pages/Material/Table_65.vue
similarity index 100%
rename from src/components/Pages/Ctt/Table_65.vue
rename to src/components/Pages/Material/Table_65.vue
diff --git a/src/components/Pages/Material/index.ts b/src/components/Pages/Material/index.ts
index 90cab3d..65d4bcd 100644
--- a/src/components/Pages/Material/index.ts
+++ b/src/components/Pages/Material/index.ts
@@ -1,2 +1,2 @@
-export { default as MaterialTable1 } from '@/components/Pages/Material/Table_66.vue'
-export { default as MaterialTable2 } from '@/components/Pages/Material/Table_67.vue'
\ No newline at end of file
+export { default as MaterialTable1 } from '@/components/Pages/Material/Table_65.vue'
+export { default as MaterialTable2 } from '@/components/Pages/Material/Table_66.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/index.ts b/src/components/Pages/Monalisa/index.ts
index f58b025..4142a1c 100644
--- a/src/components/Pages/Monalisa/index.ts
+++ b/src/components/Pages/Monalisa/index.ts
@@ -22,4 +22,3 @@ export { default as MonalisaTable21 } from '@/components/Pages/Monalisa/Table_56
 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'
-export { default as MonalisaTable25 } from '@/components/Pages/Monalisa/Table_60.vue'
diff --git a/src/components/Pages/Transaksi/Table_68.vue b/src/components/Pages/PencarianData/Table_68.vue
similarity index 100%
rename from src/components/Pages/Transaksi/Table_68.vue
rename to src/components/Pages/PencarianData/Table_68.vue
diff --git a/src/components/Pages/PencarianData/Table_69.vue b/src/components/Pages/PencarianData/Table_69.vue
deleted file mode 100644
index d794954..0000000
--- a/src/components/Pages/PencarianData/Table_69.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<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
index 9104e7b..a6e7998 100644
--- a/src/components/Pages/PencarianData/index.ts
+++ b/src/components/Pages/PencarianData/index.ts
@@ -1 +1 @@
-export { default as PencarianDataTable1 } from '@/components/Pages/PencarianData/Table_69.vue'
\ No newline at end of file
+export { default as PencarianDataTable1 } from '@/components/Pages/PencarianData/Table_68.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Material/Table_67.vue b/src/components/Pages/Transaksi/Table_67.vue
similarity index 100%
rename from src/components/Pages/Material/Table_67.vue
rename to src/components/Pages/Transaksi/Table_67.vue
diff --git a/src/components/Pages/Transaksi/Table_69.vue b/src/components/Pages/Transaksi/Table_69.vue
deleted file mode 100644
index d794954..0000000
--- a/src/components/Pages/Transaksi/Table_69.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<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
index 533e981..f0bf6bd 100644
--- a/src/components/Pages/Transaksi/index.ts
+++ b/src/components/Pages/Transaksi/index.ts
@@ -1 +1 @@
-export { default as TransaksiTable1 } from '@/components/Pages/Transaksi/Table_68.vue'
\ No newline at end of file
+export { default as TransaksiTable1 } from '@/components/Pages/Transaksi/Table_67.vue'
\ No newline at end of file

From 693a27f0b1c74e0e3f379e43ca3ab669aac63b83 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 15:31:18 +0700
Subject: [PATCH 57/67] Update table columns in Cico page

---
 src/components/Pages/Cico/Table_60.vue | 60 +++++++-------------------
 1 file changed, 15 insertions(+), 45 deletions(-)

diff --git a/src/components/Pages/Cico/Table_60.vue b/src/components/Pages/Cico/Table_60.vue
index d794954..2518b19 100644
--- a/src/components/Pages/Cico/Table_60.vue
+++ b/src/components/Pages/Cico/Table_60.vue
@@ -12,51 +12,21 @@
             <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>
+            <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>

From 590e3a2576ec74c0c3d8910a1c75d41bd1c99b7f Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 16:43:07 +0700
Subject: [PATCH 58/67] Update table components and font sizes

---
 src/assets/css/style.css                      |   5 +
 src/components/Pages/Anomali/Table_61.vue     | 158 +++++++++++-------
 src/components/Pages/Anomali/Table_62.vue     |  91 ++++------
 src/components/Pages/Anomali/Table_63.vue     | 126 +++++++-------
 src/components/Pages/Anomali/Table_64.vue     | 103 ++++++++++++
 src/components/Pages/Anomali/Table_65.vue     | 122 ++++++++++++++
 src/components/Pages/Anomali/Table_66.vue     |  79 +++++++++
 src/components/Pages/Anomali/index.ts         |   5 +-
 .../Pages/{Transaksi => Ctt}/Table_67.vue     |  54 +++---
 src/components/Pages/Ctt/index.ts             |   2 +-
 .../{PencarianData => Material}/Table_68.vue  |   0
 .../Table_64.vue => Material/Table_69.vue}    |   0
 src/components/Pages/Material/index.ts        |   4 +-
 .../Table_71.vue}                             |   0
 src/components/Pages/PencarianData/index.ts   |   2 +-
 .../Table_66.vue => Transaksi/Table_70.vue}   |   0
 src/components/Pages/Transaksi/index.ts       |   2 +-
 src/router/index.ts                           |   6 +-
 18 files changed, 539 insertions(+), 220 deletions(-)
 create mode 100644 src/components/Pages/Anomali/Table_64.vue
 create mode 100644 src/components/Pages/Anomali/Table_65.vue
 create mode 100644 src/components/Pages/Anomali/Table_66.vue
 rename src/components/Pages/{Transaksi => Ctt}/Table_67.vue (60%)
 rename src/components/Pages/{PencarianData => Material}/Table_68.vue (100%)
 rename src/components/Pages/{Ctt/Table_64.vue => Material/Table_69.vue} (100%)
 rename src/components/Pages/{Material/Table_65.vue => PencarianData/Table_71.vue} (100%)
 rename src/components/Pages/{Material/Table_66.vue => Transaksi/Table_70.vue} (100%)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index f0089da..91d5b14 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -3202,6 +3202,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/Pages/Anomali/Table_61.vue b/src/components/Pages/Anomali/Table_61.vue
index d794954..f31fadc 100644
--- a/src/components/Pages/Anomali/Table_61.vue
+++ b/src/components/Pages/Anomali/Table_61.vue
@@ -1,65 +1,102 @@
 <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 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">
@@ -70,6 +107,7 @@ 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') {
diff --git a/src/components/Pages/Anomali/Table_62.vue b/src/components/Pages/Anomali/Table_62.vue
index d794954..39bd6e9 100644
--- a/src/components/Pages/Anomali/Table_62.vue
+++ b/src/components/Pages/Anomali/Table_62.vue
@@ -1,65 +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="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 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">
diff --git a/src/components/Pages/Anomali/Table_63.vue b/src/components/Pages/Anomali/Table_63.vue
index d794954..eb7f1e9 100644
--- a/src/components/Pages/Anomali/Table_63.vue
+++ b/src/components/Pages/Anomali/Table_63.vue
@@ -1,65 +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"
-            :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 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">
@@ -70,6 +75,7 @@ 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') {
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
index 3c08f9d..eeedd38 100644
--- a/src/components/Pages/Anomali/index.ts
+++ b/src/components/Pages/Anomali/index.ts
@@ -1,3 +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'
\ No newline at end of file
+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/Transaksi/Table_67.vue b/src/components/Pages/Ctt/Table_67.vue
similarity index 60%
rename from src/components/Pages/Transaksi/Table_67.vue
rename to src/components/Pages/Ctt/Table_67.vue
index d794954..13942dd 100644
--- a/src/components/Pages/Transaksi/Table_67.vue
+++ b/src/components/Pages/Ctt/Table_67.vue
@@ -12,49 +12,41 @@
             <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="%"
+            <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="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                <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 :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                </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="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"
+            <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 :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"
+                </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="Non Rating" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+            <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 :width="150" alignment="center" data-field="" data-type="number" caption="%"
+            </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>
 
diff --git a/src/components/Pages/Ctt/index.ts b/src/components/Pages/Ctt/index.ts
index 5469ed1..e93864f 100644
--- a/src/components/Pages/Ctt/index.ts
+++ b/src/components/Pages/Ctt/index.ts
@@ -1 +1 @@
-export { default as CttTable1 } from '@/components/Pages/Ctt/Table_64.vue'
\ No newline at end of file
+export { default as CttTable1 } from '@/components/Pages/Ctt/Table_67.vue'
\ No newline at end of file
diff --git a/src/components/Pages/PencarianData/Table_68.vue b/src/components/Pages/Material/Table_68.vue
similarity index 100%
rename from src/components/Pages/PencarianData/Table_68.vue
rename to src/components/Pages/Material/Table_68.vue
diff --git a/src/components/Pages/Ctt/Table_64.vue b/src/components/Pages/Material/Table_69.vue
similarity index 100%
rename from src/components/Pages/Ctt/Table_64.vue
rename to src/components/Pages/Material/Table_69.vue
diff --git a/src/components/Pages/Material/index.ts b/src/components/Pages/Material/index.ts
index 65d4bcd..6eed0fc 100644
--- a/src/components/Pages/Material/index.ts
+++ b/src/components/Pages/Material/index.ts
@@ -1,2 +1,2 @@
-export { default as MaterialTable1 } from '@/components/Pages/Material/Table_65.vue'
-export { default as MaterialTable2 } from '@/components/Pages/Material/Table_66.vue'
\ No newline at end of file
+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/Material/Table_65.vue b/src/components/Pages/PencarianData/Table_71.vue
similarity index 100%
rename from src/components/Pages/Material/Table_65.vue
rename to src/components/Pages/PencarianData/Table_71.vue
diff --git a/src/components/Pages/PencarianData/index.ts b/src/components/Pages/PencarianData/index.ts
index a6e7998..012e268 100644
--- a/src/components/Pages/PencarianData/index.ts
+++ b/src/components/Pages/PencarianData/index.ts
@@ -1 +1 @@
-export { default as PencarianDataTable1 } from '@/components/Pages/PencarianData/Table_68.vue'
\ No newline at end of file
+export { default as PencarianDataTable1 } from '@/components/Pages/PencarianData/Table_71.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Material/Table_66.vue b/src/components/Pages/Transaksi/Table_70.vue
similarity index 100%
rename from src/components/Pages/Material/Table_66.vue
rename to src/components/Pages/Transaksi/Table_70.vue
diff --git a/src/components/Pages/Transaksi/index.ts b/src/components/Pages/Transaksi/index.ts
index f0bf6bd..9335e94 100644
--- a/src/components/Pages/Transaksi/index.ts
+++ b/src/components/Pages/Transaksi/index.ts
@@ -1 +1 @@
-export { default as TransaksiTable1 } from '@/components/Pages/Transaksi/Table_67.vue'
\ No newline at end of file
+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 343d782..83ba015 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -74,7 +74,7 @@ import {
   MonalisaTable9
 } from '@/components/Pages/Monalisa'
 import { CicoTable1 } from '@/components/Pages/Cico'
-import { AnomaliTable1, AnomaliTable2, AnomaliTable3 } from '@/components/Pages/Anomali'
+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'
@@ -568,7 +568,7 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '2',
                 name: 'Laporan Anomali Penangan Pengaduan Gangguan Petugas',
-                component: AnomaliTable2,
+                component: AnomaliTable3,
               },
               {
                 path: ':pathMatch(.*)*',
@@ -583,7 +583,7 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Laporan Anomali Penangan Pengaduan Keluhan Unit',
-                component: AnomaliTable3,
+                component: AnomaliTable5,
               },
               {
                 path: ':pathMatch(.*)*',

From b63621409b675883723548f9b9d4d8bb3c18deba Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 16:45:08 +0700
Subject: [PATCH 59/67] Update table column widths in Gangguan pages

---
 src/components/Pages/Gangguan/Table_1.vue  |   2 +-
 src/components/Pages/Gangguan/Table_16.vue |   4 +-
 src/components/Pages/Gangguan/Table_17.vue |   2 +-
 src/components/Pages/Gangguan/Table_18.vue |   2 +-
 src/components/Pages/Gangguan/Table_2.vue  |   2 +-
 src/components/Pages/Gangguan/Table_3.vue  |   2 +-
 src/components/Pages/Gangguan/Table_4.vue  |   2 +-
 src/components/Pages/Gangguan/Table_5.vue  |   2 +-
 src/components/Pages/Gangguan/Table_6.vue  |   2 +-
 src/components/Pages/Gangguan/Table_7.vue  |   2 +-
 src/components/Pages/Material/Table_68.vue | 124 ++++++---------------
 11 files changed, 44 insertions(+), 102 deletions(-)

diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 35c6bf6..594e991 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/Material/Table_68.vue b/src/components/Pages/Material/Table_68.vue
index d794954..8815774 100644
--- a/src/components/Pages/Material/Table_68.vue
+++ b/src/components/Pages/Material/Table_68.vue
@@ -1,62 +1,43 @@
 <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">
+            :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 :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+            <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" />
-            <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>
+            <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" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Tgl Response" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Tgl Recovery" />
+            <DxColumn css-class="custom-table-column" alignment="center" data-field="" caption="Jml Lapor" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Durasi Response Time" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Durasi Recovery Time" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="IDPEL/NO METER" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Nama Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Alamat Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="No Telp Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Keterangan Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                caption="Sumber Lapor" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
 
         </DxDataGrid>
     </div>
@@ -64,45 +45,6 @@
 
 <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)
-}
+import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 
 </script>
\ No newline at end of file

From c4dd364be4d45c7bdaa2839960af4b8eb998bbc3 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 16:57:57 +0700
Subject: [PATCH 60/67] Refactor table columns in Table_68.vue

---
 src/components/Pages/Material/Table_68.vue |  35 +++----
 src/components/Pages/Material/Table_69.vue | 108 ++++-----------------
 2 files changed, 31 insertions(+), 112 deletions(-)

diff --git a/src/components/Pages/Material/Table_68.vue b/src/components/Pages/Material/Table_68.vue
index 8815774..c9d985f 100644
--- a/src/components/Pages/Material/Table_68.vue
+++ b/src/components/Pages/Material/Table_68.vue
@@ -13,31 +13,22 @@
 
             <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" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
-                caption="Tgl Response" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
-                caption="Tgl Recovery" />
-            <DxColumn css-class="custom-table-column" alignment="center" data-field="" caption="Jml Lapor" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
-                caption="Durasi Response Time" />
+                caption="Nomor Gangguan" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
-                caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
-                caption="IDPEL/NO METER" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
-                caption="Nama Pelapor" />
+                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="Alamat Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
-                caption="No Telp Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
-                caption="Keterangan Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
-                caption="Sumber Lapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
+                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>
diff --git a/src/components/Pages/Material/Table_69.vue b/src/components/Pages/Material/Table_69.vue
index d794954..15b3b68 100644
--- a/src/components/Pages/Material/Table_69.vue
+++ b/src/components/Pages/Material/Table_69.vue
@@ -1,61 +1,28 @@
 <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">
+            :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 :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+            <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" />
-            <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 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>
@@ -64,45 +31,6 @@
 
 <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)
-}
+import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 
 </script>
\ No newline at end of file

From c9e200c1745087b2e4d19efef8b976370aebf20f Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Thu, 2 Nov 2023 17:00:17 +0700
Subject: [PATCH 61/67] completed create all filters type

---
 package-lock.json                             |   4 +-
 src/assets/css/style.css                      | 155 +++++++++++++-----
 src/components/DatePicker.vue                 |   1 -
 src/components/Form/FiltersType/Type1.vue     |   8 +-
 src/components/Form/FiltersType/Type10.vue    |  44 +++++
 src/components/Form/FiltersType/Type11.vue    |  48 ++++++
 src/components/Form/FiltersType/Type12.vue    |  49 ++++++
 src/components/Form/FiltersType/Type13.vue    |  41 +++++
 src/components/Form/FiltersType/Type14.vue    |  34 ++++
 src/components/Form/FiltersType/Type15.vue    |  25 +++
 src/components/Form/FiltersType/Type16.vue    |  38 +++++
 src/components/Form/FiltersType/Type17.vue    |  46 ++++++
 src/components/Form/FiltersType/Type2.vue     |  10 +-
 src/components/Form/FiltersType/Type3.vue     |   8 +-
 src/components/Form/FiltersType/Type4.vue     |  10 +-
 src/components/Form/FiltersType/Type5.vue     |   8 +-
 src/components/Form/FiltersType/Type6.vue     |  10 +-
 src/components/Form/FiltersType/Type7.vue     |  19 ++-
 src/components/Form/FiltersType/Type8.vue     |  26 +++
 src/components/Form/FiltersType/Type9.vue     |  39 +++++
 src/components/Form/InlineRadioGroup.vue      |  43 +++++
 src/components/Form/InputWithFilter.vue       |  54 ++++++
 src/components/Form/InputWithSuffix.vue       |  34 ++++
 .../Navigation/Aside/AsideMenuSingle.vue      |   2 +-
 src/components/Pages/Gangguan/Table_1.vue     |   9 +-
 src/components/Pages/MenuProvider.vue         |  51 +++---
 src/router/index.ts                           |   3 +-
 src/stores/filters.ts                         |  24 +++
 src/stores/menu.ts                            |   9 +-
 src/views/TestView.vue                        |  37 ++++-
 30 files changed, 770 insertions(+), 119 deletions(-)
 create mode 100644 src/components/Form/FiltersType/Type10.vue
 create mode 100644 src/components/Form/FiltersType/Type11.vue
 create mode 100644 src/components/Form/FiltersType/Type12.vue
 create mode 100644 src/components/Form/FiltersType/Type13.vue
 create mode 100644 src/components/Form/FiltersType/Type14.vue
 create mode 100644 src/components/Form/FiltersType/Type15.vue
 create mode 100644 src/components/Form/FiltersType/Type16.vue
 create mode 100644 src/components/Form/FiltersType/Type17.vue
 create mode 100644 src/components/Form/FiltersType/Type8.vue
 create mode 100644 src/components/Form/FiltersType/Type9.vue
 create mode 100644 src/components/Form/InlineRadioGroup.vue
 create mode 100644 src/components/Form/InputWithFilter.vue
 create mode 100644 src/components/Form/InputWithSuffix.vue
 create mode 100644 src/stores/filters.ts

diff --git a/package-lock.json b/package-lock.json
index a6bd914..0dddb7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "eis",
-  "version": "0.0.2",
+  "version": "0.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "eis",
-      "version": "0.0.2",
+      "version": "0.0.1",
       "dependencies": {
         "@headlessui/tailwindcss": "^0.2.0",
         "@headlessui/vue": "^1.7.16",
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 8239630..cada6f4 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -705,40 +705,6 @@ select {
   --tw-backdrop-sepia:  ;
 }
 
-.container {
-  width: 100%;
-}
-
-@media (min-width: 640px) {
-  .container {
-    max-width: 640px;
-  }
-}
-
-@media (min-width: 768px) {
-  .container {
-    max-width: 768px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .container {
-    max-width: 1024px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .container {
-    max-width: 1280px;
-  }
-}
-
-@media (min-width: 1536px) {
-  .container {
-    max-width: 1536px;
-  }
-}
-
 /* NavBar */
 
 .menu-item {
@@ -1085,6 +1051,10 @@ select {
   margin-right: 0.5rem;
 }
 
+.mr-2\.5 {
+  margin-right: 0.625rem;
+}
+
 .mt-0 {
   margin-top: 0px;
 }
@@ -1200,6 +1170,10 @@ select {
   height: 2.25rem;
 }
 
+.h-\[16px\] {
+  height: 16px;
+}
+
 .h-\[2\.7rem\] {
   height: 2.7rem;
 }
@@ -1208,6 +1182,10 @@ select {
   height: 66px;
 }
 
+.h-\[7px\] {
+  height: 7px;
+}
+
 .h-\[calc\(100\%-64px\)\] {
   height: calc(100% - 64px);
 }
@@ -1305,6 +1283,10 @@ select {
   width: 2.25rem;
 }
 
+.w-\[16px\] {
+  width: 16px;
+}
+
 .w-\[2\.7rem\] {
   width: 2.7rem;
 }
@@ -1313,6 +1295,10 @@ select {
   width: 266px;
 }
 
+.w-\[7px\] {
+  width: 7px;
+}
+
 .w-auto {
   width: auto;
 }
@@ -1519,11 +1505,21 @@ select {
        column-gap: 0.25rem;
 }
 
+.gap-x-1\.5 {
+  -moz-column-gap: 0.375rem;
+       column-gap: 0.375rem;
+}
+
 .gap-x-2 {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
 }
 
+.gap-x-4 {
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+}
+
 .gap-x-6 {
   -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
@@ -1537,9 +1533,8 @@ select {
   row-gap: 0.125rem;
 }
 
-.gap-x-1\.5 {
-  -moz-column-gap: 0.375rem;
-       column-gap: 0.375rem;
+.gap-y-1 {
+  row-gap: 0.25rem;
 }
 
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
@@ -1566,6 +1561,12 @@ select {
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
 
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1692,6 +1693,11 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-gray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
 .border-primary-500 {
   --tw-border-opacity: 1;
   border-color: rgb(3 91 113 / var(--tw-border-opacity));
@@ -1897,10 +1903,6 @@ select {
   padding: 1rem;
 }
 
-.p-5 {
-  padding: 1.25rem;
-}
-
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -1946,6 +1948,11 @@ select {
   padding-right: 1.5rem;
 }
 
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -2007,6 +2014,10 @@ select {
   padding-left: 2.75rem;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -2031,6 +2042,10 @@ select {
   padding-right: 1.25rem;
 }
 
+.pr-7 {
+  padding-right: 1.75rem;
+}
+
 .pt-0 {
   padding-top: 0px;
 }
@@ -2059,10 +2074,6 @@ select {
   text-align: start;
 }
 
-.align-middle {
-  vertical-align: middle;
-}
-
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -2303,6 +2314,11 @@ select {
   color: rgb(153 153 0 / var(--tw-text-opacity));
 }
 
+.text-primary-600 {
+  --tw-text-opacity: 1;
+  color: rgb(2 73 90 / var(--tw-text-opacity));
+}
+
 .text-opacity-40 {
   --tw-text-opacity: 0.4;
 }
@@ -2751,10 +2767,20 @@ select {
   color: rgb(53 124 141 / var(--tw-text-opacity));
 }
 
+.group:checked .group-checked\:text-primary-500 {
+  --tw-text-opacity: 1;
+  color: rgb(3 91 113 / var(--tw-text-opacity));
+}
+
 .group:hover .group-hover\:block {
   display: block;
 }
 
+.group:hover .group-hover\:bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
 .group:hover .group-hover\:bg-primary-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(3 91 113 / var(--tw-bg-opacity));
@@ -2787,6 +2813,21 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.peer:checked ~ .peer-checked\:border-primary-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(3 91 113 / var(--tw-border-opacity));
+}
+
+.peer:checked ~ .peer-checked\:bg-primary-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 91 113 / var(--tw-bg-opacity));
+}
+
+.peer:checked ~ .peer-checked\:text-primary-500 {
+  --tw-text-opacity: 1;
+  color: rgb(3 91 113 / var(--tw-text-opacity));
+}
+
 @media (prefers-color-scheme: dark) {
   .dark\:bg-opacity-50 {
     --tw-bg-opacity: 0.5;
@@ -3022,12 +3063,36 @@ select {
     gap: 0.75rem;
   }
 
+  .sm\:space-x-10 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(2.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1rem * var(--tw-space-x-reverse));
     margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0px * var(--tw-space-y-reverse));
+  }
+
+  .sm\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1.25rem * var(--tw-space-x-reverse));
+    margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(2rem * var(--tw-space-x-reverse));
+    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .sm\:space-x-reverse > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 1;
   }
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index 14bd28b..4792bd4 100644
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -18,7 +18,6 @@
       :shortcuts="false"
       :auto-apply="false"
       v-slot="{ value, placeholder }"
-      overlay
     >
       <div class="flex">
         <div class="flex-1">
diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue
index 9a6f876..c4a5ed1 100644
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@@ -5,13 +5,13 @@
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
     <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -19,13 +19,13 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Posko:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
     <Select placeholder="Semua Posko" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
     <DatePicker />
   </div>
diff --git a/src/components/Form/FiltersType/Type10.vue b/src/components/Form/FiltersType/Type10.vue
new file mode 100644
index 0000000..962353a
--- /dev/null
+++ b/src/components/Form/FiltersType/Type10.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+</script>
+
+<template>
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+
+    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Layanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Layanan Pelanggan" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+
+    <DatePicker />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
+
+    <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
+      <Select placeholder="1" />
+      <small class="flex items-center">s/d</small>
+      <Select placeholder="2" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type11.vue b/src/components/Form/FiltersType/Type11.vue
new file mode 100644
index 0000000..0dc2729
--- /dev/null
+++ b/src/components/Form/FiltersType/Type11.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+</script>
+
+<template>
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+
+    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Layanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Layanan Pelanggan" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+
+    <DatePicker />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
+
+    <div class="flex flex-col gap-y-1">
+      <Select placeholder="Durasi Menit" />
+
+      <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
+        <Select placeholder="1" />
+        <small class="flex items-center">s/d</small>
+        <Select placeholder="2" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type12.vue b/src/components/Form/FiltersType/Type12.vue
new file mode 100644
index 0000000..91533ab
--- /dev/null
+++ b/src/components/Form/FiltersType/Type12.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+  import InputWithSuffix from '../InputWithSuffix.vue';
+</script>
+
+<template>
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+
+    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Layanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Layanan Pelanggan" />
+  </div>
+  
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+
+    <DatePicker />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
+
+    <div class="flex flex-col gap-y-1">
+      <Select placeholder="Durasi Menit" />
+
+      <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
+        <InputWithSuffix />
+        <small class="flex items-center">s/d</small>
+        <InputWithSuffix />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type13.vue b/src/components/Form/FiltersType/Type13.vue
new file mode 100644
index 0000000..2fe614a
--- /dev/null
+++ b/src/components/Form/FiltersType/Type13.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+  import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+</script>
+
+<template>
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+
+    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Layanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Layanan Pelanggan" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+
+    <DatePicker />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Group By Kode Unit Distribusi:</label>
+
+    <InlineRadioGroup :radio-items="[{id: 1, title: 'Tidak', checked: true}, {id: 2, title: 'Ya, Grupkan'}]" />
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type14.vue b/src/components/Form/FiltersType/Type14.vue
new file mode 100644
index 0000000..f705d7d
--- /dev/null
+++ b/src/components/Form/FiltersType/Type14.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+</script>
+
+<template>
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Distribusi/Wilayah:</label>
+
+    <Select placeholder="Semua Distribusi/Wilayah"/>
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Area:</label
+    >
+
+    <Select placeholder="Semua Area" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Posko:</label
+    >
+
+    <Select placeholder="Semua Posko" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+
+    <DatePicker />
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type15.vue b/src/components/Form/FiltersType/Type15.vue
new file mode 100644
index 0000000..1760098
--- /dev/null
+++ b/src/components/Form/FiltersType/Type15.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+  import InputWithFilter from '../InputWithFilter.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+  import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+</script>
+
+<template>
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Jenis Pengaduan:</label>
+
+    <InlineRadioGroup :radio-items="[{id: 1, title: 'Gangguan', checked: true}, {id: 2, title: 'Keluhan'}]" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Cari Report Number:</label>
+
+    <InputWithFilter placeholder="cari report" :filters="[{id: 1, title: 'Nama Pelapor'}]" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+
+    <DatePicker />
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type16.vue b/src/components/Form/FiltersType/Type16.vue
new file mode 100644
index 0000000..61a8e47
--- /dev/null
+++ b/src/components/Form/FiltersType/Type16.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+</script>
+
+<template>
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+
+    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
+
+    <Select placeholder="Semua Posko" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Media:</label>
+
+    <Select placeholder="Semua Media" />
+  </div>
+  
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+
+    <DatePicker />
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type17.vue b/src/components/Form/FiltersType/Type17.vue
new file mode 100644
index 0000000..7bf412d
--- /dev/null
+++ b/src/components/Form/FiltersType/Type17.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+  import InputWithFilter from '../InputWithFilter.vue'
+</script>
+
+<template>
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+
+    <DatePicker />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit PLN:</label>
+
+    <div class="flex flex-col gap-y-1">
+      <Select placeholder="Pilih Unit" />
+
+      <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
+        <Select placeholder="Pilih Area" />
+        <Select placeholder="Pilih Rayon" />
+      </div>
+    </div>
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Status:</label>
+
+    <Select placeholder="Pilih Status"/>
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >SLA:</label
+    >
+
+    <Select placeholder="Pilih Durasi SLA" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Cari Report Number:</label>
+
+    <InputWithFilter placeholder="cari report" :filters="[{id: 1, title: 'Pilih Jenis'}]" />
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type2.vue b/src/components/Form/FiltersType/Type2.vue
index cbb3577..43000fd 100644
--- a/src/components/Form/FiltersType/Type2.vue
+++ b/src/components/Form/FiltersType/Type2.vue
@@ -4,19 +4,19 @@
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Regional:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Regional:</label>
 
     <Select placeholder="Semua Regional"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
     <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -24,7 +24,7 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Layanan Pelanggan:</label
     >
 
@@ -32,7 +32,7 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode</label>
 
     <div class="grid grid-cols-2 gap-x-2">
       <Select placeholder="Juli" />
diff --git a/src/components/Form/FiltersType/Type3.vue b/src/components/Form/FiltersType/Type3.vue
index d2fe98f..7896596 100644
--- a/src/components/Form/FiltersType/Type3.vue
+++ b/src/components/Form/FiltersType/Type3.vue
@@ -5,13 +5,13 @@
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
     <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -19,7 +19,7 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Layanan Pelanggan:</label
     >
 
@@ -27,7 +27,7 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
     <DatePicker />
   </div>
diff --git a/src/components/Form/FiltersType/Type4.vue b/src/components/Form/FiltersType/Type4.vue
index 09ab030..8bbb211 100644
--- a/src/components/Form/FiltersType/Type4.vue
+++ b/src/components/Form/FiltersType/Type4.vue
@@ -5,13 +5,13 @@
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
     <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -19,7 +19,7 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Layanan Pelanggan:</label
     >
 
@@ -27,7 +27,7 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Jenis Laporan:</label
     >
 
@@ -35,7 +35,7 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
     <DatePicker />
   </div>
diff --git a/src/components/Form/FiltersType/Type5.vue b/src/components/Form/FiltersType/Type5.vue
index 1ebc58e..1e4286f 100644
--- a/src/components/Form/FiltersType/Type5.vue
+++ b/src/components/Form/FiltersType/Type5.vue
@@ -5,13 +5,13 @@
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
     <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -19,13 +19,13 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Posko:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
     <Select placeholder="Semua Posko" />
   </div>
   
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
     <DatePicker />
   </div>
diff --git a/src/components/Form/FiltersType/Type6.vue b/src/components/Form/FiltersType/Type6.vue
index 7fb4f77..2965ffe 100644
--- a/src/components/Form/FiltersType/Type6.vue
+++ b/src/components/Form/FiltersType/Type6.vue
@@ -5,13 +5,13 @@
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
     <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -19,19 +19,19 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Posko:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
     <Select placeholder="Semua Posko" />
   </div>
   
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
     <DatePicker />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Lapor Ulang:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
 
     <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
       <Select placeholder="1" />
diff --git a/src/components/Form/FiltersType/Type7.vue b/src/components/Form/FiltersType/Type7.vue
index a5ea2cd..eaa7dc1 100644
--- a/src/components/Form/FiltersType/Type7.vue
+++ b/src/components/Form/FiltersType/Type7.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
+  import InputWithSuffix from '../InputWithSuffix.vue';
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
     <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -19,27 +20,27 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Posko:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
     <Select placeholder="Semua Posko" />
   </div>
   
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
     <DatePicker />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Durasi:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
 
-    <div class="flex flex-column">
-      <Select placeholder="Semua Posko" />
+    <div class="flex flex-col gap-y-1">
+      <Select placeholder="Durasi Menit" />
 
       <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-        <Select placeholder="1" />
+        <InputWithSuffix />
         <small class="flex items-center">s/d</small>
-        <Select placeholder="2" />
+        <InputWithSuffix />
       </div>
     </div>
   </div>
diff --git a/src/components/Form/FiltersType/Type8.vue b/src/components/Form/FiltersType/Type8.vue
new file mode 100644
index 0000000..467c9cd
--- /dev/null
+++ b/src/components/Form/FiltersType/Type8.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+</script>
+
+<template>
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+
+    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+
+    <DatePicker />
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type9.vue b/src/components/Form/FiltersType/Type9.vue
new file mode 100644
index 0000000..ebbe9f1
--- /dev/null
+++ b/src/components/Form/FiltersType/Type9.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+  import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+</script>
+
+<template>
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+
+    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
+
+    <Select placeholder="Semua Posko" />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+
+    <DatePicker />
+  </div>
+
+  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Group By Kode Unit Distribusi:</label>
+
+    <InlineRadioGroup :radio-items="[{id: 1, title: 'Tidak', checked: true}, {id: 2, title: 'Ya, Grupkan'}]" />
+  </div>
+</template>
diff --git a/src/components/Form/InlineRadioGroup.vue b/src/components/Form/InlineRadioGroup.vue
new file mode 100644
index 0000000..cad4cf1
--- /dev/null
+++ b/src/components/Form/InlineRadioGroup.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <fieldset>
+      <div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
+        <div
+          v-for="item in radioItems"
+          :key="item.id"
+          class="flex items-center"
+        >
+          <input
+            :id="`${item.id}`"
+            type="radio"
+            name="radio"
+            :checked="item.hasOwnProperty('checked') && item.checked === true"
+            class="h-4 w-4 border-gray-300 text-primary-500 peer focus:ring-primary-500"
+          />
+          <label
+            :for="`${item.id}`"
+            class="ml-3 block text-sm font-medium text-gray-700 peer-checked:text-primary-500"
+            >{{ item.title }}</label
+          >
+        </div>
+      </div>
+    </fieldset>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, type PropType } from 'vue'
+
+interface Item {
+  id: number;
+  title: string;
+  checked?: boolean;
+}
+
+defineProps({
+  radioItems: {
+    type: Array as PropType<Item[]>,
+    required: true
+  }
+})
+</script>
diff --git a/src/components/Form/InputWithFilter.vue b/src/components/Form/InputWithFilter.vue
new file mode 100644
index 0000000..d2de0cb
--- /dev/null
+++ b/src/components/Form/InputWithFilter.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { PhMagnifyingGlass } from '@phosphor-icons/vue';
+import { type PropType } from 'vue'
+
+interface FilterItems {
+  id: number;
+  title: string;
+}
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  filters: {
+    type: Array as PropType<FilterItems[]>,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="relative w-full overflow-hidden rounded-lg">
+    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+      <PhMagnifyingGlass size="18" class="text-gray-900" weight="regular" />
+    </div>
+    <input
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      type="text"
+      class="w-full px-4 py-2 pl-10 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
+    />
+    <div class="absolute inset-y-0 right-0 flex items-center">
+      <label for="filters" class="sr-only">filters</label>
+      <span class="block border border-gray-600 h-5"></span>
+      <select
+        id="filters"
+        name="filters"
+        class="h-full bg-gray-200 text-sm rounded-lg border-transparent py-0 pl-2 pr-7 text-gray-900 focus:outline-0 focus:border-0 focus:ring-0"
+      >
+        <option :key="filter.id" :value="filter.id" v-for="filter in filters">{{ filter.title }}</option>
+      </select>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Form/InputWithSuffix.vue b/src/components/Form/InputWithSuffix.vue
new file mode 100644
index 0000000..0a6d3c8
--- /dev/null
+++ b/src/components/Form/InputWithSuffix.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+  const props = defineProps({
+    placeholder: {
+        type: String,
+        default: "",
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    readonly: {
+        type: Boolean,
+        default: false,
+    }
+  })
+</script>
+
+<template>
+  <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
+    <input
+      autocomplete="off"
+      type="text"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      inputmode="numeric"
+      pattern="[0-9.]*"
+      oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
+      onblur="this.value = this.value ? this.value + ' Menit' : ''"
+      onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
+      class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
+    />
+  </div>
+</template>
diff --git a/src/components/Navigation/Aside/AsideMenuSingle.vue b/src/components/Navigation/Aside/AsideMenuSingle.vue
index 23a9199..28fea29 100644
--- a/src/components/Navigation/Aside/AsideMenuSingle.vue
+++ b/src/components/Navigation/Aside/AsideMenuSingle.vue
@@ -29,7 +29,7 @@ const props = defineProps({
             <component :is="item.icon"
                 :class="[selected ? 'text-white fill-white' : 'text-aside group-hover:text-white group-hover:fill-white', 'mr-2 flex-shrink-0 h-6 w-6']"
                 aria-hidden="true" />
-            {{ item.name.split(' | ')[0] }}
+            {{ item.name }}
         </RouterLink>
     </div>
 </template>
\ 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 35c6bf6..6bd3302 100644
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -72,6 +72,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { writeDataJson } from '@/utils/storage'
 import { useDialogStore } from '@/stores/dialog'
+import { useFiltersStore } from '@/stores/filters'
 
 const dialog = useDialogStore()
 const data = ref<Data1[]>([])
@@ -146,9 +147,13 @@ const showData = (data: string) => {
 }
 
 onMounted(() => {
-    createDummy()
-    // console.log(readDataJson('data-daftar-1'));
+    const filters = useFiltersStore()
 
+    createDummy()
+    filters.setConfig({
+        type: 'type-15',
+        reportButton: false
+    })
 })
 
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/MenuProvider.vue b/src/components/Pages/MenuProvider.vue
index 3aa5895..023b7b3 100644
--- a/src/components/Pages/MenuProvider.vue
+++ b/src/components/Pages/MenuProvider.vue
@@ -2,17 +2,26 @@
     <main
         class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
         <div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
-            <h1 class="text-xl font-medium md:text-3xl text-dark">{{ pageMetaData[0] }}</h1>
+            <h1 class="text-xl font-medium md:text-3xl text-dark">{{ pageTitle }}</h1>
         </div>
         <div class="flex-1 mt-2 sm:mt-4 dx-viewport">
-            <Filters :report-button="(typeof pageMetaData[2]) !== 'undefined'" class="mb-4" v-if="pageMetaData.length > 1">
-                <Type1 v-if="pageMetaData[1] == 'type-1'" />
-                <Type2 v-if="pageMetaData[1] == 'type-2'" />
-                <Type3 v-if="pageMetaData[1] == 'type-3'" />
-                <Type4 v-if="pageMetaData[1] == 'type-4'" />
-                <Type5 v-if="pageMetaData[1] == 'type-5'" />
-                <Type6 v-if="pageMetaData[1] == 'type-6'" />
-                <Type7 v-if="pageMetaData[1] == 'type-7'" />
+            <Filters :report-button="filters.config.reportButton" class="mb-4" v-if="filters.config.type">
+                <Type1 v-if="filters.config.type == 'type-1'" />
+                <Type2 v-else-if="filters.config.type == 'type-2'" />
+                <Type3 v-else-if="filters.config.type == 'type-3'" />
+                <Type4 v-else-if="filters.config.type == 'type-4'" />
+                <Type5 v-else-if="filters.config.type == 'type-5'" />
+                <Type6 v-else-if="filters.config.type == 'type-6'" />
+                <Type7 v-else-if="filters.config.type == 'type-7'" />
+                <Type8 v-else-if="filters.config.type == 'type-8'" />
+                <Type9 v-else-if="filters.config.type == 'type-9'" />
+                <Type10 v-else-if="filters.config.type == 'type-10'" />
+                <Type11 v-else-if="filters.config.type == 'type-11'" />
+                <Type12 v-else-if="filters.config.type == 'type-12'" />
+                <Type13 v-else-if="filters.config.type == 'type-13'" />
+                <Type14 v-else-if="filters.config.type == 'type-14'" />
+                <Type15 v-else-if="filters.config.type == 'type-15'" />
+                <Type17 v-else-if="filters.config.type == 'type-17'" />
             </Filters>
 
             <slot></slot>
@@ -31,20 +40,22 @@ import Type4 from '../Form/FiltersType/Type4.vue';
 import Type5 from '../Form/FiltersType/Type5.vue';
 import Type6 from '../Form/FiltersType/Type6.vue';
 import Type7 from '../Form/FiltersType/Type7.vue';
+import Type8 from '../Form/FiltersType/Type8.vue';
+import Type9 from '../Form/FiltersType/Type9.vue';
+import Type10 from '../Form/FiltersType/Type10.vue';
+import Type11 from '../Form/FiltersType/Type11.vue';
+import Type12 from '../Form/FiltersType/Type12.vue';
+import Type13 from '../Form/FiltersType/Type13.vue';
+import Type14 from '../Form/FiltersType/Type14.vue';
+import Type15 from '../Form/FiltersType/Type15.vue';
+import Type16 from '../Form/FiltersType/Type16.vue';
+import Type17 from '../Form/FiltersType/Type17.vue';
+import { useFiltersStore } from '@/stores/filters';
 
 // Dapatkan objek route dari vue-router
 const route = useRoute()
 
 // Dapatkan nama rute menggunakan computed property
-const pageMetaData = computed(() => {
-    let result: string[] = [];
-
-    if (typeof route.name === 'string' && route.name.includes(' | ')) {
-        result = route.name.split(' | ');
-    } else if (typeof route.name === 'string') {
-        result = [route.name]
-    }
-
-    return result
-});
+const pageTitle = computed(() => route.name)
+const filters = useFiltersStore()
 </script>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index ce9e476..e7d1983 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -69,9 +69,8 @@ export const routes: RouteRecordRaw[] = [
             children: [
               {
                 path: '1',
-                name: 'Daftar Keluhan Dialihkan Ke Posko Lain | type-1 | sa',
+                name: 'Daftar Keluhan Dialihkan Ke Posko Lain',
                 component: GangguanTable1,
-                props: true
               },
               {
                 path: '2',
diff --git a/src/stores/filters.ts b/src/stores/filters.ts
new file mode 100644
index 0000000..61f57e9
--- /dev/null
+++ b/src/stores/filters.ts
@@ -0,0 +1,24 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+import { dispatchNotification } from '@/components/Notification'
+import { readData, removeData, writeData } from '@/utils/storage'
+import router from '@/router'
+
+export const useFiltersStore = defineStore('filters', () => {
+  const config = ref({
+    reportButton: false,
+    type: 'type-1'
+  })
+
+  const setConfig = (test: {reportButton: boolean, type: string}) => {
+    config.value = {
+      reportButton: test.reportButton,
+      type: test.type
+    }
+  }
+
+  return {
+    config,
+    setConfig
+  }
+})
\ No newline at end of file
diff --git a/src/stores/menu.ts b/src/stores/menu.ts
index 706e4b8..325474c 100644
--- a/src/stores/menu.ts
+++ b/src/stores/menu.ts
@@ -6,8 +6,10 @@ import { routes } from '@/router'
 import type { MenuItemModel } from '@/types/menu'
 import { splitRoutePath } from '@/utils/texts'
 import { useCommandPalattesStore } from '@/stores/command'
+import { useFiltersStore } from './filters'
 
 export const useMenuStore = defineStore('menu', () => {
+    const filters = useFiltersStore()
     const route = useRoute()
     const navigation = ref<MenuItemModel[]>([])
     const sidebarOpen = ref(false)
@@ -56,11 +58,16 @@ export const useMenuStore = defineStore('menu', () => {
             }
         } else {
             collapseAllMenu()
+
+            filters.setConfig({
+                type: '',
+                reportButton: false
+            })
         }
     })
 
     const expandCurrentActiveMenu = (): void => {
-        const menuData = convertRouteToMenu(routes.at(0)?.children || [])
+        const menuData = convertRouteToMenu(routes[0]?.children || [])
         navigation.value = menuData
         menuSelected.value = router.currentRoute.value.fullPath
 
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index d5db478..216fe22 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -1,12 +1,31 @@
-<script setup lang="ts">
-  import Filters from '@/components/Form/Filters.vue'
-  import Type1 from '@/components/Form/FiltersType/Type1.vue'
-</script>
-
 <template>
-  <div class="container h-full p-5 mx-auto">
-    <Filters :reportButton="true" >
-      <Type1/>
-    </Filters>
+  <div>
+    <fieldset>
+      <div class="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
+        <div
+          v-for="item in radioItems"
+          :key="item.id"
+          class="flex items-center"
+        >
+          <input
+            :id="item.id"
+            type="radio"
+            name="radio"
+            class="h-4 w-4 border-gray-300 text-primary-500 peer focus:ring-primary-500"
+          />
+          <label
+            :for="item.id"
+            class="ml-3 block text-sm font-medium text-gray-700 peer-checked:text-primary-500"
+            >{{ item.title }}</label
+          >
+        </div>
+      </div>
+    </fieldset>
   </div>
 </template>
+
+<script setup lang="ts">
+defineProps({
+  radioItems: Object
+})
+</script>

From 5aae34dba0d488b21838e9dbf876b876bd59e78d Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 2 Nov 2023 17:05:38 +0700
Subject: [PATCH 62/67] Update CSS styles and inline radio group component

---
 src/assets/css/style.css                 | 172 ++++++++++-------------
 src/components/Form/InlineRadioGroup.vue |  23 +--
 2 files changed, 83 insertions(+), 112 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index cfef93b..a47375b 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -705,6 +705,40 @@ select {
   --tw-backdrop-sepia:  ;
 }
 
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 /* NavBar */
 
 .menu-item {
@@ -1051,10 +1085,6 @@ select {
   margin-right: 0.5rem;
 }
 
-.mr-2\.5 {
-  margin-right: 0.625rem;
-}
-
 .mt-0 {
   margin-top: 0px;
 }
@@ -1170,10 +1200,6 @@ select {
   height: 2.25rem;
 }
 
-.h-\[16px\] {
-  height: 16px;
-}
-
 .h-\[2\.7rem\] {
   height: 2.7rem;
 }
@@ -1182,10 +1208,6 @@ select {
   height: 66px;
 }
 
-.h-\[7px\] {
-  height: 7px;
-}
-
 .h-\[calc\(100\%-64px\)\] {
   height: calc(100% - 64px);
 }
@@ -1283,10 +1305,6 @@ select {
   width: 2.25rem;
 }
 
-.w-\[16px\] {
-  width: 16px;
-}
-
 .w-\[2\.7rem\] {
   width: 2.7rem;
 }
@@ -1295,10 +1313,6 @@ select {
   width: 266px;
 }
 
-.w-\[7px\] {
-  width: 7px;
-}
-
 .w-auto {
   width: auto;
 }
@@ -1500,6 +1514,19 @@ select {
   gap: 0.75rem;
 }
 
+.gap-x-6 {
+  -moz-column-gap: 1.5rem;
+       column-gap: 1.5rem;
+}
+
+.gap-y-0 {
+  row-gap: 0px;
+}
+
+.gap-y-0\.5 {
+  row-gap: 0.125rem;
+}
+
 .gap-x-1 {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
@@ -1515,24 +1542,6 @@ select {
        column-gap: 0.5rem;
 }
 
-.gap-x-4 {
-  -moz-column-gap: 1rem;
-       column-gap: 1rem;
-}
-
-.gap-x-6 {
-  -moz-column-gap: 1.5rem;
-       column-gap: 1.5rem;
-}
-
-.gap-y-0 {
-  row-gap: 0px;
-}
-
-.gap-y-0\.5 {
-  row-gap: 0.125rem;
-}
-
 .gap-y-1 {
   row-gap: 0.25rem;
 }
@@ -1693,11 +1702,6 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-gray-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(75 85 99 / var(--tw-border-opacity));
-}
-
 .border-primary-500 {
   --tw-border-opacity: 1;
   border-color: rgb(3 91 113 / var(--tw-border-opacity));
@@ -1707,6 +1711,11 @@ select {
   border-color: transparent;
 }
 
+.border-gray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1903,6 +1912,10 @@ select {
   padding: 1rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -1948,11 +1961,6 @@ select {
   padding-right: 1.5rem;
 }
 
-.py-0 {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1998,6 +2006,11 @@ select {
   padding-bottom: 1.5rem;
 }
 
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
 .pb-4 {
   padding-bottom: 1rem;
 }
@@ -2014,10 +2027,6 @@ select {
   padding-left: 2.75rem;
 }
 
-.pl-2 {
-  padding-left: 0.5rem;
-}
-
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -2042,10 +2051,6 @@ select {
   padding-right: 1.25rem;
 }
 
-.pr-7 {
-  padding-right: 1.75rem;
-}
-
 .pt-0 {
   padding-top: 0px;
 }
@@ -2062,6 +2067,14 @@ select {
   padding-top: 1.25rem;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
+.pr-7 {
+  padding-right: 1.75rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2314,11 +2327,6 @@ select {
   color: rgb(153 153 0 / var(--tw-text-opacity));
 }
 
-.text-primary-600 {
-  --tw-text-opacity: 1;
-  color: rgb(2 73 90 / var(--tw-text-opacity));
-}
-
 .text-opacity-40 {
   --tw-text-opacity: 0.4;
 }
@@ -2767,20 +2775,10 @@ select {
   color: rgb(53 124 141 / var(--tw-text-opacity));
 }
 
-.group:checked .group-checked\:text-primary-500 {
-  --tw-text-opacity: 1;
-  color: rgb(3 91 113 / var(--tw-text-opacity));
-}
-
 .group:hover .group-hover\:block {
   display: block;
 }
 
-.group:hover .group-hover\:bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
-
 .group:hover .group-hover\:bg-primary-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(3 91 113 / var(--tw-bg-opacity));
@@ -2813,16 +2811,6 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.peer:checked ~ .peer-checked\:border-primary-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(3 91 113 / var(--tw-border-opacity));
-}
-
-.peer:checked ~ .peer-checked\:bg-primary-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(3 91 113 / var(--tw-bg-opacity));
-}
-
 .peer:checked ~ .peer-checked\:text-primary-500 {
   --tw-text-opacity: 1;
   color: rgb(3 91 113 / var(--tw-text-opacity));
@@ -3063,22 +3051,16 @@ select {
     gap: 0.75rem;
   }
 
-  .sm\:space-x-10 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(2.5rem * var(--tw-space-x-reverse));
-    margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
   .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1rem * var(--tw-space-x-reverse));
     margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
-  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(0px * var(--tw-space-y-reverse));
+  .sm\:space-x-10 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(2.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
   .sm\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
@@ -3087,10 +3069,10 @@ select {
     margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
-  .sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(2rem * var(--tw-space-x-reverse));
-    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
 
   .sm\:space-x-reverse > :not([hidden]) ~ :not([hidden]) {
diff --git a/src/components/Form/InlineRadioGroup.vue b/src/components/Form/InlineRadioGroup.vue
index cad4cf1..6672c35 100644
--- a/src/components/Form/InlineRadioGroup.vue
+++ b/src/components/Form/InlineRadioGroup.vue
@@ -2,23 +2,12 @@
   <div>
     <fieldset>
       <div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
-        <div
-          v-for="item in radioItems"
-          :key="item.id"
-          class="flex items-center"
-        >
-          <input
-            :id="`${item.id}`"
-            type="radio"
-            name="radio"
+        <div v-for="item in radioItems" :key="item.id" class="flex items-center">
+          <input :id="`${item.id}`" type="radio" name="radio"
             :checked="item.hasOwnProperty('checked') && item.checked === true"
-            class="h-4 w-4 border-gray-300 text-primary-500 peer focus:ring-primary-500"
-          />
-          <label
-            :for="`${item.id}`"
-            class="ml-3 block text-sm font-medium text-gray-700 peer-checked:text-primary-500"
-            >{{ item.title }}</label
-          >
+            class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500" />
+          <label :for="`${item.id}`" class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500">{{
+            item.title }}</label>
         </div>
       </div>
     </fieldset>
@@ -26,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, type PropType } from 'vue'
+import { type PropType } from 'vue'
 
 interface Item {
   id: number;

From f650ee07841427f5b34010a7bb67c99d72bcacbe Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Fri, 3 Nov 2023 08:24:10 +0700
Subject: [PATCH 63/67] Refactor CSS styles for responsiveness and consistency.

---
 src/assets/css/style.css | 122 ++++++++++++++-------------------------
 1 file changed, 42 insertions(+), 80 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index a47375b..30b0ad8 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -705,40 +705,6 @@ select {
   --tw-backdrop-sepia:  ;
 }
 
-.container {
-  width: 100%;
-}
-
-@media (min-width: 640px) {
-  .container {
-    max-width: 640px;
-  }
-}
-
-@media (min-width: 768px) {
-  .container {
-    max-width: 768px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .container {
-    max-width: 1024px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .container {
-    max-width: 1280px;
-  }
-}
-
-@media (min-width: 1536px) {
-  .container {
-    max-width: 1536px;
-  }
-}
-
 /* NavBar */
 
 .menu-item {
@@ -1514,19 +1480,6 @@ select {
   gap: 0.75rem;
 }
 
-.gap-x-6 {
-  -moz-column-gap: 1.5rem;
-       column-gap: 1.5rem;
-}
-
-.gap-y-0 {
-  row-gap: 0px;
-}
-
-.gap-y-0\.5 {
-  row-gap: 0.125rem;
-}
-
 .gap-x-1 {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
@@ -1542,6 +1495,19 @@ select {
        column-gap: 0.5rem;
 }
 
+.gap-x-6 {
+  -moz-column-gap: 1.5rem;
+       column-gap: 1.5rem;
+}
+
+.gap-y-0 {
+  row-gap: 0px;
+}
+
+.gap-y-0\.5 {
+  row-gap: 0.125rem;
+}
+
 .gap-y-1 {
   row-gap: 0.25rem;
 }
@@ -1702,6 +1668,11 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-gray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
 .border-primary-500 {
   --tw-border-opacity: 1;
   border-color: rgb(3 91 113 / var(--tw-border-opacity));
@@ -1711,11 +1682,6 @@ select {
   border-color: transparent;
 }
 
-.border-gray-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(75 85 99 / var(--tw-border-opacity));
-}
-
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1912,10 +1878,6 @@ select {
   padding: 1rem;
 }
 
-.p-5 {
-  padding: 1.25rem;
-}
-
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -1961,6 +1923,11 @@ select {
   padding-right: 1.5rem;
 }
 
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -2006,11 +1973,6 @@ select {
   padding-bottom: 1.5rem;
 }
 
-.py-0 {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
 .pb-4 {
   padding-bottom: 1rem;
 }
@@ -2027,6 +1989,10 @@ select {
   padding-left: 2.75rem;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -2051,6 +2017,10 @@ select {
   padding-right: 1.25rem;
 }
 
+.pr-7 {
+  padding-right: 1.75rem;
+}
+
 .pt-0 {
   padding-top: 0px;
 }
@@ -2067,14 +2037,6 @@ select {
   padding-top: 1.25rem;
 }
 
-.pl-2 {
-  padding-left: 0.5rem;
-}
-
-.pr-7 {
-  padding-right: 1.75rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -3051,18 +3013,18 @@ select {
     gap: 0.75rem;
   }
 
-  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(1rem * var(--tw-space-x-reverse));
-    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
   .sm\:space-x-10 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(2.5rem * var(--tw-space-x-reverse));
     margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--tw-space-x-reverse));
+    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .sm\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1.25rem * var(--tw-space-x-reverse));
@@ -3272,15 +3234,15 @@ select {
     padding-left: 20rem;
   }
 
-  .md\:text-3xl {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-  }
-
   .md\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;
   }
+
+  .md\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
 }
 
 @media (min-width: 1024px) {

From 7b0a0109e5c7975c565d0a496cad0a61dc5703ca Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Fri, 3 Nov 2023 08:49:13 +0700
Subject: [PATCH 64/67] Update table columns in Transaksi page

---
 src/components/Pages/Transaksi/Table_70.vue | 60 +++++----------------
 1 file changed, 14 insertions(+), 46 deletions(-)

diff --git a/src/components/Pages/Transaksi/Table_70.vue b/src/components/Pages/Transaksi/Table_70.vue
index d794954..2ee8bc9 100644
--- a/src/components/Pages/Transaksi/Table_70.vue
+++ b/src/components/Pages/Transaksi/Table_70.vue
@@ -12,52 +12,20 @@
             <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>
-
+            <DxColumn :width="170" alignment="center" data-field="" caption="No.Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tipe Isu" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="No.Telp" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Permasalahan"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Deskripsi" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Buat" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Lap.Ulang" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Ket.Lap.Ulang"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi" css-class="custom-table-column" />
         </DxDataGrid>
     </div>
 </template>

From d36ef6ca4d0127b69996b6355e34e9cc9694be5e Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Fri, 3 Nov 2023 08:55:56 +0700
Subject: [PATCH 65/67] Update paging size to 5 in multiple tables

---
 src/components/Pages/Gangguan/Table_1.vue     |   2 +-
 src/components/Pages/Gangguan/Table_2.vue     |   2 +-
 src/components/Pages/Gangguan/Table_3.vue     |   2 +-
 src/components/Pages/Gangguan/Table_4.vue     |   2 +-
 src/components/Pages/Gangguan/Table_5.vue     |   2 +-
 src/components/Pages/Gangguan/Table_6.vue     |   2 +-
 src/components/Pages/Gangguan/Table_7.vue     |   2 +-
 src/components/Pages/Gangguan/Table_8.vue     |   2 +-
 src/components/Pages/Keluhan/Table_21.vue     |   2 +-
 src/components/Pages/Keluhan/Table_22.vue     |   2 +-
 src/components/Pages/Keluhan/Table_23.vue     |   2 +-
 src/components/Pages/Keluhan/Table_24.vue     |   2 +-
 src/components/Pages/Keluhan/Table_25.vue     |   2 +-
 src/components/Pages/Keluhan/Table_26.vue     |   2 +-
 src/components/Pages/Keluhan/Table_27.vue     |   2 +-
 src/components/Pages/Material/Table_68.vue    |   2 +-
 src/components/Pages/Material/Table_69.vue    |   2 +-
 .../Pages/PencarianData/Table_71.vue          | 108 +++---------------
 18 files changed, 35 insertions(+), 107 deletions(-)

diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 74b96fb..393d3bb 100644
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -4,7 +4,7 @@
             :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">
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :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" />
             <DxSelection mode="single" />
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
index 8815774..71b17ad 100644
--- a/src/components/Pages/Gangguan/Table_2.vue
+++ b/src/components/Pages/Gangguan/Table_2.vue
@@ -4,7 +4,7 @@
             :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" />
+            <DxPaging :page-size="5" :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" />
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index 4fd6384..c7490e7 100644
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -4,7 +4,7 @@
             :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" />
+            <DxPaging :page-size="5" :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" />
diff --git a/src/components/Pages/Gangguan/Table_4.vue b/src/components/Pages/Gangguan/Table_4.vue
index caed058..fe9adb7 100644
--- a/src/components/Pages/Gangguan/Table_4.vue
+++ b/src/components/Pages/Gangguan/Table_4.vue
@@ -4,7 +4,7 @@
             :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" />
+            <DxPaging :page-size="5" :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" />
diff --git a/src/components/Pages/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
index e8708fd..9811a6c 100644
--- a/src/components/Pages/Gangguan/Table_5.vue
+++ b/src/components/Pages/Gangguan/Table_5.vue
@@ -4,7 +4,7 @@
             :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" />
+            <DxPaging :page-size="5" :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" />
diff --git a/src/components/Pages/Gangguan/Table_6.vue b/src/components/Pages/Gangguan/Table_6.vue
index 6db01c6..00ce94a 100644
--- a/src/components/Pages/Gangguan/Table_6.vue
+++ b/src/components/Pages/Gangguan/Table_6.vue
@@ -4,7 +4,7 @@
             :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" />
+            <DxPaging :page-size="5" :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" />
diff --git a/src/components/Pages/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
index e8708fd..9811a6c 100644
--- a/src/components/Pages/Gangguan/Table_7.vue
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -4,7 +4,7 @@
             :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" />
+            <DxPaging :page-size="5" :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" />
diff --git a/src/components/Pages/Gangguan/Table_8.vue b/src/components/Pages/Gangguan/Table_8.vue
index d77af9e..b39a574 100644
--- a/src/components/Pages/Gangguan/Table_8.vue
+++ b/src/components/Pages/Gangguan/Table_8.vue
@@ -4,7 +4,7 @@
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :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" />
diff --git a/src/components/Pages/Keluhan/Table_21.vue b/src/components/Pages/Keluhan/Table_21.vue
index 4a8e52a..fa2d2ff 100644
--- a/src/components/Pages/Keluhan/Table_21.vue
+++ b/src/components/Pages/Keluhan/Table_21.vue
@@ -5,7 +5,7 @@
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :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" />
diff --git a/src/components/Pages/Keluhan/Table_22.vue b/src/components/Pages/Keluhan/Table_22.vue
index e015b3c..45fdd42 100644
--- a/src/components/Pages/Keluhan/Table_22.vue
+++ b/src/components/Pages/Keluhan/Table_22.vue
@@ -5,7 +5,7 @@
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :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" />
diff --git a/src/components/Pages/Keluhan/Table_23.vue b/src/components/Pages/Keluhan/Table_23.vue
index aa32aec..545f0a6 100644
--- a/src/components/Pages/Keluhan/Table_23.vue
+++ b/src/components/Pages/Keluhan/Table_23.vue
@@ -5,7 +5,7 @@
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :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" />
diff --git a/src/components/Pages/Keluhan/Table_24.vue b/src/components/Pages/Keluhan/Table_24.vue
index 792df02..4bb914e 100644
--- a/src/components/Pages/Keluhan/Table_24.vue
+++ b/src/components/Pages/Keluhan/Table_24.vue
@@ -5,7 +5,7 @@
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :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" />
diff --git a/src/components/Pages/Keluhan/Table_25.vue b/src/components/Pages/Keluhan/Table_25.vue
index e015b3c..45fdd42 100644
--- a/src/components/Pages/Keluhan/Table_25.vue
+++ b/src/components/Pages/Keluhan/Table_25.vue
@@ -5,7 +5,7 @@
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :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" />
diff --git a/src/components/Pages/Keluhan/Table_26.vue b/src/components/Pages/Keluhan/Table_26.vue
index b849708..9ddd6cd 100644
--- a/src/components/Pages/Keluhan/Table_26.vue
+++ b/src/components/Pages/Keluhan/Table_26.vue
@@ -5,7 +5,7 @@
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :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" />
diff --git a/src/components/Pages/Keluhan/Table_27.vue b/src/components/Pages/Keluhan/Table_27.vue
index 7674912..61b4c79 100644
--- a/src/components/Pages/Keluhan/Table_27.vue
+++ b/src/components/Pages/Keluhan/Table_27.vue
@@ -5,7 +5,7 @@
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :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" />
diff --git a/src/components/Pages/Material/Table_68.vue b/src/components/Pages/Material/Table_68.vue
index c9d985f..678815e 100644
--- a/src/components/Pages/Material/Table_68.vue
+++ b/src/components/Pages/Material/Table_68.vue
@@ -4,7 +4,7 @@
             :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" />
+            <DxPaging :page-size="5" :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" />
diff --git a/src/components/Pages/Material/Table_69.vue b/src/components/Pages/Material/Table_69.vue
index 15b3b68..b96b3c4 100644
--- a/src/components/Pages/Material/Table_69.vue
+++ b/src/components/Pages/Material/Table_69.vue
@@ -4,7 +4,7 @@
             :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" />
+            <DxPaging :page-size="5" :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" />
diff --git a/src/components/Pages/PencarianData/Table_71.vue b/src/components/Pages/PencarianData/Table_71.vue
index d794954..b96b3c4 100644
--- a/src/components/Pages/PencarianData/Table_71.vue
+++ b/src/components/Pages/PencarianData/Table_71.vue
@@ -1,61 +1,28 @@
 <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">
+            :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 :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+            <DxPaging :page-size="5" :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" />
-            <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 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>
@@ -64,45 +31,6 @@
 
 <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)
-}
+import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 
 </script>
\ No newline at end of file

From dd766b1108cf774c1699de7456122b952510a977 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Fri, 3 Nov 2023 09:07:57 +0700
Subject: [PATCH 66/67] Add columns for No. Laporan, Tgl Lapor, IDPEL/NO METER,
 Nama Pelapor, Alamat Pelapor, No Tlp Pelapor, Status, UI Dist., UP 3,
 Posko/ULP, Petugas, and Keterangan DLPD to Table_71.vue

---
 .../Pages/PencarianData/Table_71.vue          | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/Pages/PencarianData/Table_71.vue b/src/components/Pages/PencarianData/Table_71.vue
index b96b3c4..320a9cc 100644
--- a/src/components/Pages/PencarianData/Table_71.vue
+++ b/src/components/Pages/PencarianData/Table_71.vue
@@ -13,17 +13,23 @@
 
             <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
                 caption="No" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="No. Laporan" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Lapor" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
-                caption="Kode Material" />
+                caption="IDPEL/NO METER" />
             <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" />
+                caption="Nama Pelapor" />
             <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>
+                caption="Alamat Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="No Tlp Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Status" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="UI Dist." />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="UP 3" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko/ULP" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Petugas" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Keterangan DLPD" />
 
         </DxDataGrid>
     </div>

From 61d117c79bfcac5f9b241e43b70dfefcfc5f3e9b Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Fri, 3 Nov 2023 09:14:08 +0700
Subject: [PATCH 67/67] Remove Type16 filter from MenuProvider.vue

---
 src/components/Pages/MenuProvider.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Pages/MenuProvider.vue b/src/components/Pages/MenuProvider.vue
index 023b7b3..153891f 100644
--- a/src/components/Pages/MenuProvider.vue
+++ b/src/components/Pages/MenuProvider.vue
@@ -48,7 +48,6 @@ import Type12 from '../Form/FiltersType/Type12.vue';
 import Type13 from '../Form/FiltersType/Type13.vue';
 import Type14 from '../Form/FiltersType/Type14.vue';
 import Type15 from '../Form/FiltersType/Type15.vue';
-import Type16 from '../Form/FiltersType/Type16.vue';
 import Type17 from '../Form/FiltersType/Type17.vue';
 import { useFiltersStore } from '@/stores/filters';