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

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

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