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