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

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

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

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

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

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

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

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

diff --git a/src/components/Pages/Transaksi/Table_70.vue b/src/components/Pages/Transaksi/Table_70.vue
index d794954..2ee8bc9 100644
--- a/src/components/Pages/Transaksi/Table_70.vue
+++ b/src/components/Pages/Transaksi/Table_70.vue
@@ -12,52 +12,20 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                    css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="1"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="2"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="3"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="4"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="5"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Indeks"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                    css-class="custom-table-column" />
-            </DxColumn>
-
+            <DxColumn :width="170" alignment="center" data-field="" caption="No.Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tipe Isu" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Nama" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="No.Telp" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Permasalahan"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Deskripsi" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Buat" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Lap.Ulang" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Ket.Lap.Ulang"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="Durasi" css-class="custom-table-column" />
         </DxDataGrid>
     </div>
 </template>

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

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

diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 74b96fb..393d3bb 100644
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -4,7 +4,7 @@
             :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxSelection mode="single" />
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
index 8815774..71b17ad 100644
--- a/src/components/Pages/Gangguan/Table_2.vue
+++ b/src/components/Pages/Gangguan/Table_2.vue
@@ -4,7 +4,7 @@
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :enabled="true" />
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index 4fd6384..c7490e7 100644
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -4,7 +4,7 @@
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :enabled="true" />
diff --git a/src/components/Pages/Gangguan/Table_4.vue b/src/components/Pages/Gangguan/Table_4.vue
index caed058..fe9adb7 100644
--- a/src/components/Pages/Gangguan/Table_4.vue
+++ b/src/components/Pages/Gangguan/Table_4.vue
@@ -4,7 +4,7 @@
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :enabled="true" />
diff --git a/src/components/Pages/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
index e8708fd..9811a6c 100644
--- a/src/components/Pages/Gangguan/Table_5.vue
+++ b/src/components/Pages/Gangguan/Table_5.vue
@@ -4,7 +4,7 @@
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :enabled="true" />
diff --git a/src/components/Pages/Gangguan/Table_6.vue b/src/components/Pages/Gangguan/Table_6.vue
index 6db01c6..00ce94a 100644
--- a/src/components/Pages/Gangguan/Table_6.vue
+++ b/src/components/Pages/Gangguan/Table_6.vue
@@ -4,7 +4,7 @@
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :enabled="true" />
diff --git a/src/components/Pages/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
index e8708fd..9811a6c 100644
--- a/src/components/Pages/Gangguan/Table_7.vue
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -4,7 +4,7 @@
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :enabled="true" />
diff --git a/src/components/Pages/Gangguan/Table_8.vue b/src/components/Pages/Gangguan/Table_8.vue
index d77af9e..b39a574 100644
--- a/src/components/Pages/Gangguan/Table_8.vue
+++ b/src/components/Pages/Gangguan/Table_8.vue
@@ -4,7 +4,7 @@
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :enabled="true" />
diff --git a/src/components/Pages/Keluhan/Table_21.vue b/src/components/Pages/Keluhan/Table_21.vue
index 4a8e52a..fa2d2ff 100644
--- a/src/components/Pages/Keluhan/Table_21.vue
+++ b/src/components/Pages/Keluhan/Table_21.vue
@@ -5,7 +5,7 @@
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :enabled="true" />
diff --git a/src/components/Pages/Keluhan/Table_22.vue b/src/components/Pages/Keluhan/Table_22.vue
index e015b3c..45fdd42 100644
--- a/src/components/Pages/Keluhan/Table_22.vue
+++ b/src/components/Pages/Keluhan/Table_22.vue
@@ -5,7 +5,7 @@
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :enabled="true" />
diff --git a/src/components/Pages/Keluhan/Table_23.vue b/src/components/Pages/Keluhan/Table_23.vue
index aa32aec..545f0a6 100644
--- a/src/components/Pages/Keluhan/Table_23.vue
+++ b/src/components/Pages/Keluhan/Table_23.vue
@@ -5,7 +5,7 @@
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :enabled="true" />
diff --git a/src/components/Pages/Keluhan/Table_24.vue b/src/components/Pages/Keluhan/Table_24.vue
index 792df02..4bb914e 100644
--- a/src/components/Pages/Keluhan/Table_24.vue
+++ b/src/components/Pages/Keluhan/Table_24.vue
@@ -5,7 +5,7 @@
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :enabled="true" />
diff --git a/src/components/Pages/Keluhan/Table_25.vue b/src/components/Pages/Keluhan/Table_25.vue
index e015b3c..45fdd42 100644
--- a/src/components/Pages/Keluhan/Table_25.vue
+++ b/src/components/Pages/Keluhan/Table_25.vue
@@ -5,7 +5,7 @@
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :enabled="true" />
diff --git a/src/components/Pages/Keluhan/Table_26.vue b/src/components/Pages/Keluhan/Table_26.vue
index b849708..9ddd6cd 100644
--- a/src/components/Pages/Keluhan/Table_26.vue
+++ b/src/components/Pages/Keluhan/Table_26.vue
@@ -5,7 +5,7 @@
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :enabled="true" />
diff --git a/src/components/Pages/Keluhan/Table_27.vue b/src/components/Pages/Keluhan/Table_27.vue
index 7674912..61b4c79 100644
--- a/src/components/Pages/Keluhan/Table_27.vue
+++ b/src/components/Pages/Keluhan/Table_27.vue
@@ -5,7 +5,7 @@
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :enabled="true" />
diff --git a/src/components/Pages/Material/Table_68.vue b/src/components/Pages/Material/Table_68.vue
index c9d985f..678815e 100644
--- a/src/components/Pages/Material/Table_68.vue
+++ b/src/components/Pages/Material/Table_68.vue
@@ -4,7 +4,7 @@
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :enabled="true" />
diff --git a/src/components/Pages/Material/Table_69.vue b/src/components/Pages/Material/Table_69.vue
index 15b3b68..b96b3c4 100644
--- a/src/components/Pages/Material/Table_69.vue
+++ b/src/components/Pages/Material/Table_69.vue
@@ -4,7 +4,7 @@
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
-            <DxPaging :page-size="10" :enabled="true" />
+            <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :enabled="true" />
diff --git a/src/components/Pages/PencarianData/Table_71.vue b/src/components/Pages/PencarianData/Table_71.vue
index d794954..b96b3c4 100644
--- a/src/components/Pages/PencarianData/Table_71.vue
+++ b/src/components/Pages/PencarianData/Table_71.vue
@@ -1,61 +1,28 @@
 <template>
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
+            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+            <DxPaging :page-size="5" :enabled="true" />
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                    css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="1"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="2"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="3"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="4"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="5"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Indeks"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
-                    css-class="custom-table-column" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
+                caption="No" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Kode Material" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Nama Material" />
+            <DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="" caption="Satuan" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+                caption="Sumber Material" />
+            <DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
+                <DxColumn v-for="i in 31" css-class="custom-table-column" :width="150" alignment="center" data-field=""
+                    :caption="i" />
             </DxColumn>
 
         </DxDataGrid>
@@ -64,45 +31,6 @@
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-
-const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
-
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
-
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
-
-        e.cancel = true
-    }
-}
-
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
-}
+import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 
 </script>
\ No newline at end of file

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

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

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

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

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

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

From 846f5bb501f5554039673a6760fa1390d2dc6f4e Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Fri, 3 Nov 2023 12:40:40 +0700
Subject: [PATCH 7/7] update

---
 src/assets/css/style.css                  |  4 ++
 src/components/DatePicker.vue             | 30 +++++---------
 src/components/Form/FiltersType/index.ts  | 17 ++++++++
 src/components/Pages/Gangguan/Table_9.vue | 50 ++++++++++++++++++++++-
 4 files changed, 81 insertions(+), 20 deletions(-)
 create mode 100644 src/components/Form/FiltersType/index.ts

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 30b0ad8..c96e4db 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -962,6 +962,10 @@ select {
   z-index: 50;
 }
 
+.z-\[9999\] {
+  z-index: 9999;
+}
+
 .order-last {
   order: 9999;
 }
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index 4792bd4..cc1d05c 100644
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -1,30 +1,22 @@
 <script setup lang="ts">
-  import { ref } from 'vue'
-  import VueTailwindDatepicker from 'vue-tailwind-datepicker'
+import { ref } from 'vue'
+import VueTailwindDatepicker from 'vue-tailwind-datepicker'
 
-  const dateValue = ref('')
-  const formatter = ref({
-    date: 'DD MMM YYYY',
-    month: 'MMM'
-  })
+const dateValue = ref('')
+const formatter = ref({
+  date: 'DD MMM YYYY',
+  month: 'MMM'
+})
 </script>
 
 <template>
   <div class="flex">
-    <vue-tailwind-datepicker 
-      v-model="dateValue"
-      :formatter="formatter"
-      separator="   s/d   "
-      :shortcuts="false"
-      :auto-apply="false"
-      v-slot="{ value, placeholder }"
-    >
+    <vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" separator="   s/d   " :shortcuts="false"
+      :auto-apply="false" v-slot="{ value, placeholder }">
       <div class="flex">
         <div class="flex-1">
-          <button
-            type="button"
-            class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
-          >
+          <button type="button"
+            class="w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0">
             <span class="text-gray-900">
               {{ value || placeholder }}
             </span>
diff --git a/src/components/Form/FiltersType/index.ts b/src/components/Form/FiltersType/index.ts
new file mode 100644
index 0000000..edd29b7
--- /dev/null
+++ b/src/components/Form/FiltersType/index.ts
@@ -0,0 +1,17 @@
+export { default as Type1 } from '@/components/Form/FiltersType/Type1.vue'
+export { default as Type2 } from '@/components/Form/FiltersType/Type2.vue'
+export { default as Type3 } from '@/components/Form/FiltersType/Type3.vue'
+export { default as Type4 } from '@/components/Form/FiltersType/Type4.vue'
+export { default as Type5 } from '@/components/Form/FiltersType/Type5.vue'
+export { default as Type6 } from '@/components/Form/FiltersType/Type6.vue'
+export { default as Type7 } from '@/components/Form/FiltersType/Type7.vue'
+export { default as Type8 } from '@/components/Form/FiltersType/Type8.vue'
+export { default as Type9 } from '@/components/Form/FiltersType/Type9.vue'
+export { default as Type10 } from '@/components/Form/FiltersType/Type10.vue'
+export { default as Type11 } from '@/components/Form/FiltersType/Type11.vue'
+export { default as Type12 } from '@/components/Form/FiltersType/Type12.vue'
+export { default as Type13 } from '@/components/Form/FiltersType/Type13.vue'
+export { default as Type14 } from '@/components/Form/FiltersType/Type14.vue'
+export { default as Type15 } from '@/components/Form/FiltersType/Type15.vue'
+export { default as Type16 } from '@/components/Form/FiltersType/Type16.vue'
+export { default as Type17 } from '@/components/Form/FiltersType/Type17.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
index 444a609..3e34671 100644
--- a/src/components/Pages/Gangguan/Table_9.vue
+++ b/src/components/Pages/Gangguan/Table_9.vue
@@ -67,13 +67,18 @@
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
+
+            <DxSummary>
+                <DxGroupItem :show-in-group-footer="true" column="" summary-type="sum" value-format="number"
+                    display-format="Total: {0}" />
+            </DxSummary>
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary } 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'
@@ -114,4 +119,47 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
+const data = [
+    {
+        no: 1,
+        kode: 'A',
+        jenisGangguan: 'Gangguan A',
+        laporan: {
+            total: 10,
+            sudahSelesai: {
+                jml: 5,
+                persen: 50,
+            },
+            belumSelesai: {
+                jml: 5,
+                persen: 50,
+            },
+        },
+        responseTime: {
+            menit: {
+                total: 10,
+                rataRata: 10,
+                max: 10,
+                min: 10,
+            },
+            laporan: {
+                lebihSla: 5,
+                kurangSla: 5,
+            },
+        },
+        recoveryTime: {
+            menit: {
+                total: 10,
+                rataRata: 10,
+                max: 10,
+                min: 10,
+            },
+            laporan: {
+                lebihSla: 5,
+                kurangSla: 5,
+            },
+        }
+    },
+]
+
 </script>
\ No newline at end of file