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