From 266844b584febee3b8ba02e5eba8d40dab562944 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 28 Feb 2024 15:24:14 +0700
Subject: [PATCH] Update CSS styles and table data fields

---
 src/assets/css/style.css                  |  37 ++-
 src/components/InputText.vue              |  34 +--
 src/components/Pages/Keluhan/Table_28.vue | 264 ++++++++++++++++++----
 src/components/Pages/Keluhan/Table_29.vue |  62 +++--
 src/components/Pages/Keluhan/Table_30.vue |  37 ++-
 src/components/Pages/Keluhan/Table_31.vue |  85 ++++---
 src/components/Pages/Keluhan/Table_32.vue |  37 ++-
 src/components/Pages/Keluhan/Table_33.vue |  38 ++--
 8 files changed, 374 insertions(+), 220 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index c52bfaf..ef87b66 100755
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1525,6 +1525,10 @@ body {
   height: 80vh;
 }
 
+.h-\[400px\] {
+  height: 400px;
+}
+
 .max-h-0 {
   max-height: 0px;
 }
@@ -4284,11 +4288,6 @@ body {
   border-color: rgb(104 157 170 / var(--tw-border-opacity));
 }
 
-.focus\:border-indigo-500:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(99 102 241 / var(--tw-border-opacity));
-}
-
 .focus\:bg-gray-300\/10:focus {
   background-color: rgb(209 213 219 / 0.1);
 }
@@ -5499,6 +5498,10 @@ body {
     width: 100%;
   }
 
+  .sm\:max-w-\[90\%\] {
+    max-width: 90%;
+  }
+
   .sm\:max-w-lg {
     max-width: 32rem;
   }
@@ -5899,6 +5902,10 @@ body {
     width: 2.5rem;
   }
 
+  .lg\:w-2\/6 {
+    width: 33.333333%;
+  }
+
   .lg\:w-80 {
     width: 20rem;
   }
@@ -5907,10 +5914,30 @@ body {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .lg\:flex-row {
+    flex-direction: row;
+  }
+
   .lg\:flex-nowrap {
     flex-wrap: nowrap;
   }
 
+  .lg\:justify-between {
+    justify-content: space-between;
+  }
+
+  .lg\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .lg\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--tw-space-x-reverse));
+    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .lg\:border-b-0 {
     border-bottom-width: 0px;
   }
diff --git a/src/components/InputText.vue b/src/components/InputText.vue
index 6ccd13f..d1ecbd8 100755
--- a/src/components/InputText.vue
+++ b/src/components/InputText.vue
@@ -42,33 +42,17 @@ const switchInputType = () => {
 </script>
 
 <template>
-  <div :class="['relative w-full overflow-hidden rounded-lg bg-gray-50 ', className]">
-    <input
-      autocomplete="off"
-      :type="inputType"
-      :placeholder="placeholder"
-      :value="value"
-      @input="updateValue($event)"
-      :disabled="disabled"
-      :readonly="readonly"
-      :class="[
+  <div :class="['relative w-full overflow-hidden rounded-lg bg-gray-200 ', className]">
+    <input autocomplete="off" :type="inputType" :placeholder="placeholder" :value="value" @input="updateValue($event)"
+      :disabled="disabled" :readonly="readonly" :class="[
         'w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0'
-      ]"
-    />
-    <span
-      @click="switchInputType"
-      v-if="type == 'password'"
-      class="absolute top-0 bottom-0 right-0 mx-3 my-auto cursor-pointer h-fit"
-    >
-      <svg
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        :class="[inputType == 'password' ? 'fill-gray-500' : 'fill-primary-500']"
-      >
+      ]" />
+    <span @click="switchInputType" v-if="type == 'password'"
+      class="absolute top-0 bottom-0 right-0 mx-3 my-auto cursor-pointer h-fit">
+      <svg width="20" height="20" viewBox="0 0 20 20"
+        :class="[inputType == 'password' ? 'fill-gray-500' : 'fill-primary-500']">
         <path
-          d="M19.3211 9.74688C19.2937 9.68516 18.632 8.21719 17.1609 6.74609C15.2008 4.78594 12.725 3.75 9.99999 3.75C7.27499 3.75 4.79921 4.78594 2.83905 6.74609C1.36796 8.21719 0.703118 9.6875 0.678899 9.74688C0.643362 9.82681 0.625 9.91331 0.625 10.0008C0.625 10.0883 0.643362 10.1748 0.678899 10.2547C0.706243 10.3164 1.36796 11.7836 2.83905 13.2547C4.79921 15.2141 7.27499 16.25 9.99999 16.25C12.725 16.25 15.2008 15.2141 17.1609 13.2547C18.632 11.7836 19.2937 10.3164 19.3211 10.2547C19.3566 10.1748 19.375 10.0883 19.375 10.0008C19.375 9.91331 19.3566 9.82681 19.3211 9.74688ZM9.99999 15C7.5953 15 5.49452 14.1258 3.75546 12.4023C3.0419 11.6927 2.43483 10.8836 1.95312 10C2.4347 9.11636 3.04179 8.30717 3.75546 7.59766C5.49452 5.87422 7.5953 5 9.99999 5C12.4047 5 14.5055 5.87422 16.2445 7.59766C16.9595 8.307 17.5679 9.11619 18.0508 10C17.4875 11.0516 15.0336 15 9.99999 15ZM9.99999 6.25C9.25831 6.25 8.53329 6.46993 7.9166 6.88199C7.29992 7.29404 6.81927 7.87971 6.53544 8.56494C6.25162 9.25016 6.17735 10.0042 6.32205 10.7316C6.46674 11.459 6.82389 12.1272 7.34834 12.6517C7.87279 13.1761 8.54097 13.5333 9.2684 13.6779C9.99583 13.8226 10.7498 13.7484 11.4351 13.4645C12.1203 13.1807 12.7059 12.7001 13.118 12.0834C13.5301 11.4667 13.75 10.7417 13.75 10C13.749 9.00576 13.3535 8.05253 12.6505 7.34949C11.9475 6.64645 10.9942 6.25103 9.99999 6.25ZM9.99999 12.5C9.50554 12.5 9.02219 12.3534 8.61107 12.0787C8.19994 11.804 7.87951 11.4135 7.69029 10.9567C7.50107 10.4999 7.45157 9.99723 7.54803 9.51227C7.64449 9.02732 7.88259 8.58186 8.23222 8.23223C8.58186 7.8826 9.02731 7.6445 9.51227 7.54804C9.99722 7.45157 10.4999 7.50108 10.9567 7.6903C11.4135 7.87952 11.804 8.19995 12.0787 8.61107C12.3534 9.0222 12.5 9.50555 12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 9.99999 12.5Z"
-        />
+          d="M19.3211 9.74688C19.2937 9.68516 18.632 8.21719 17.1609 6.74609C15.2008 4.78594 12.725 3.75 9.99999 3.75C7.27499 3.75 4.79921 4.78594 2.83905 6.74609C1.36796 8.21719 0.703118 9.6875 0.678899 9.74688C0.643362 9.82681 0.625 9.91331 0.625 10.0008C0.625 10.0883 0.643362 10.1748 0.678899 10.2547C0.706243 10.3164 1.36796 11.7836 2.83905 13.2547C4.79921 15.2141 7.27499 16.25 9.99999 16.25C12.725 16.25 15.2008 15.2141 17.1609 13.2547C18.632 11.7836 19.2937 10.3164 19.3211 10.2547C19.3566 10.1748 19.375 10.0883 19.375 10.0008C19.375 9.91331 19.3566 9.82681 19.3211 9.74688ZM9.99999 15C7.5953 15 5.49452 14.1258 3.75546 12.4023C3.0419 11.6927 2.43483 10.8836 1.95312 10C2.4347 9.11636 3.04179 8.30717 3.75546 7.59766C5.49452 5.87422 7.5953 5 9.99999 5C12.4047 5 14.5055 5.87422 16.2445 7.59766C16.9595 8.307 17.5679 9.11619 18.0508 10C17.4875 11.0516 15.0336 15 9.99999 15ZM9.99999 6.25C9.25831 6.25 8.53329 6.46993 7.9166 6.88199C7.29992 7.29404 6.81927 7.87971 6.53544 8.56494C6.25162 9.25016 6.17735 10.0042 6.32205 10.7316C6.46674 11.459 6.82389 12.1272 7.34834 12.6517C7.87279 13.1761 8.54097 13.5333 9.2684 13.6779C9.99583 13.8226 10.7498 13.7484 11.4351 13.4645C12.1203 13.1807 12.7059 12.7001 13.118 12.0834C13.5301 11.4667 13.75 10.7417 13.75 10C13.749 9.00576 13.3535 8.05253 12.6505 7.34949C11.9475 6.64645 10.9942 6.25103 9.99999 6.25ZM9.99999 12.5C9.50554 12.5 9.02219 12.3534 8.61107 12.0787C8.19994 11.804 7.87951 11.4135 7.69029 10.9567C7.50107 10.4999 7.45157 9.99723 7.54803 9.51227C7.64449 9.02732 7.88259 8.58186 8.23222 8.23223C8.58186 7.8826 9.02731 7.6445 9.51227 7.54804C9.99722 7.45157 10.4999 7.50108 10.9567 7.6903C11.4135 7.87952 11.804 8.19995 12.0787 8.61107C12.3534 9.0222 12.5 9.50555 12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 9.99999 12.5Z" />
       </svg>
     </span>
   </div>
diff --git a/src/components/Pages/Keluhan/Table_28.vue b/src/components/Pages/Keluhan/Table_28.vue
index dfaf63d..2cf9d36 100755
--- a/src/components/Pages/Keluhan/Table_28.vue
+++ b/src/components/Pages/Keluhan/Table_28.vue
@@ -5,8 +5,8 @@
   <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" :word-wrap-enabled="true">
+      @selection-changed="onDataSelectionChanged" :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" />
@@ -16,46 +16,204 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="170" alignment="center" data-field="idUlp" caption="Nama Unit" css-class="custom-table-column" />
+      <DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
+        cell-template="data" />
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
-          css-class="custom-table-column" />
+          css-class="custom-table-column" cell-template="data" />
         <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Selesai"
-          css-class="custom-table-column" />
+          css-class="custom-table-column" cell-template="data" />
         <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-          css-class="custom-table-column" />
+          css-class="custom-table-column" cell-template="data" />
         <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="InProgress"
-          css-class="custom-table-column" />
+          css-class="custom-table-column" cell-template="data" />
         <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-          css-class="custom-table-column" />
+          css-class="custom-table-column" cell-template="data" />
         <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
-          css-class="custom-table-column" />
+          css-class="custom-table-column" cell-template="data" />
         <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-          css-class="custom-table-column" />
+          css-class="custom-table-column" cell-template="data" />
         <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-          css-class="custom-table-column" />
+          css-class="custom-table-column" cell-template="data" />
         <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-          caption="> SLA" css-class="custom-table-column" />
+          caption="> SLA" css-class="custom-table-column" cell-template="data" />
         <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-          caption="≤ SLA" css-class="custom-table-column" />
+          caption="≤ SLA" css-class="custom-table-column" cell-template="data" />
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
-          css-class="custom-table-column" />
+          css-class="custom-table-column" cell-template="data" />
         <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
-          css-class="custom-table-column" />
+          css-class="custom-table-column" cell-template="data" />
         <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-          css-class="custom-table-column" />
+          css-class="custom-table-column" cell-template="data" />
         <DxColumn :width="150" alignment="center" data-field="total_diatas_recovery" data-type="number" caption="> SLA"
-          css-class="custom-table-column" />
+          css-class="custom-table-column" cell-template="data" />
         <DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number" caption="≤ SLA"
-          css-class="custom-table-column" />
+          css-class="custom-table-column" cell-template="data" />
       </DxColumn>
+      <template #data="{ data }">
+        <span class="cursor-pointer" @click="showDialog()">
+          {{ data.text }}
+        </span>
+      </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog :open="showDialogDetail" :full-width="true" title="Detail Rekapitulasi Keluhan All"
+    @on-close="closeDetailDialog">
+    <div class="flex flex-col w-full space-y-2 lg:space-x-4 lg:flex-row lg:justify-between">
+      <div class="flex flex-1 p-4 bg-white rounded-xl">
+        <div class="w-full">
+          <!-- <DxDataGrid class="w-full" :data-source="dataDetail" :column-auto-width="true" :show-column-lines="true"
+            :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onDataDetailSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
+            column-resizing-mode="widget" :word-wrap-enabled="true">
+            <DxSelection mode="single" />
+            <DxPaging :page-size="5" :enabled="true" />
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+              :show-info="true" :show-navigation-buttons="true" />
+            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+              v-if="loading" v-model:visible="loading" :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="60" alignment="center" data-field="" caption="No" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="" caption="No Laporan"
+              css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+              css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Selesai"
+              css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+              css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="InProgress"
+              css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+              css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+              css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+              css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+              css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> SLA"
+              css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA"
+              css-class="custom-table-column" />
+          </DxDataGrid> -->
+        </div>
+
+      </div>
+      <div class="w-full p-4 space-y-2 overflow-y-auto bg-white lg:w-2/6 rounded-xl">
+        <div class="flex flex-row justify-between w-full">
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">
+            No Laporan:
+          </h3>
+          <InputText :readonly="true" value="-" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row justify-between w-full">
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">
+            Tgl Lapor:
+          </h3>
+          <InputText :readonly="true" value="-" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row justify-between w-full">
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">
+            Dalam Proses Bidang:
+          </h3>
+          <InputText :readonly="true" value="-" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row justify-between w-full">
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">
+            Selesai Bidang Unit:
+          </h3>
+          <InputText :readonly="true" value="-" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row justify-between w-full">
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">
+            Durasi Response Time:
+          </h3>
+          <InputText :readonly="true" value="-" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row justify-between w-full">
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">
+            Status:
+          </h3>
+          <InputText :readonly="true" value="-" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row justify-between w-full">
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">
+            IDPEL/NO METER::
+          </h3>
+          <InputText :readonly="true" value="-" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row justify-between w-full">
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">
+            Nama Pelapor:
+          </h3>
+          <InputText :readonly="true" value="-" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row justify-between w-full">
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">
+            Alamat Pelapor:
+          </h3>
+          <InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
+        </div>
+
+        <div class="flex flex-row justify-between w-full">
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">
+            No Telp Pelapor:
+          </h3>
+          <InputText :readonly="true" value="-" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row justify-between w-full">
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">
+            Keterangan Pelapor:
+          </h3>
+          <InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
+        </div>
+
+        <div class="flex flex-row justify-between w-full">
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">
+            Rayon:
+          </h3>
+          <InputText :readonly="true" value="-" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row justify-between w-full">
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">
+            Uraian:
+          </h3>
+          <InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
+        </div>
+
+        <div class="flex flex-row justify-between w-full">
+          <h3 class="text-sm font-medium w-[170px] text-gray-800">
+            Response Pelanggan:
+          </h3>
+          <InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
+        </div>
+
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { onMounted, ref } from 'vue'
@@ -65,6 +223,7 @@ import {
   DxColumnFixing,
   DxExport,
   DxLoadPanel,
+  DxPager,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
@@ -81,8 +240,29 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dataSelected = ref<any>()
+const dataDetailSelected = ref<any>()
+const showDialogDetail = ref(false)
+const dataDetail = ref<any[]>([])
+
+const closeDetailDialog = () => {
+  showDialogDetail.value = false
+}
+
+const showDialog = () => {
+  showDialogDetail.value = true
+}
+
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
+  dataSelected.value = selectedRowsData[0]
+  console.log(selectedRowsData[0])
+}
+
+const onDataDetailSelectionChanged = ({ selectedRowsData }: any) => {
+  dataDetailSelected.value = selectedRowsData[0]
+  console.log(selectedRowsData[0])
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -112,11 +292,6 @@ const onExporting = (e: any) => {
   }
 }
 
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  console.log(data)
-}
-
 const data = ref<any[]>([])
 const GET_DATA = gql`
 query rekapitulasiKeluhanAll
@@ -135,30 +310,24 @@ query rekapitulasiKeluhanAll
         idUid: $idUid
         idUp3: $idUp3
     ) {
-        avg_durasi_dispatch
-        avg_durasi_recovery
-        avg_durasi_response
-        id_uid
-        id_up3
-        max_durasi_dispatch
-        max_durasi_recovery
-        max_durasi_response
-        min_durasi_dispatch
-        min_durasi_recovery
-        min_durasi_response
-        persen_inproses
-        persen_selesai
-        idUlp
+        id_ulp
+        nama_ulp
         total
-        total_diatas_sla_dispatch
-        total_diatas_sla_recovery
-        total_diatas_sla_response
-        total_dibawah_sla_dispatch
-        total_dibawah_sla_recovery
-        total_dibawah_sla_response
-        total_inproses
         total_selesai
-        }
+        persen_selesai
+        total_inproses
+        persen_inproses
+        avg_durasi_response
+        min_durasi_response
+        max_durasi_response
+        total_dibawah_sla_response
+        total_diatas_sla_response
+        avg_durasi_recovery
+        min_durasi_recovery
+        max_durasi_recovery
+        total_dibawah_sla_recovery
+        total_diatas_sla_recovery
+      }
 }`
 
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
@@ -184,7 +353,6 @@ const filterData = (params: any) => {
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanAll
-
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
diff --git a/src/components/Pages/Keluhan/Table_29.vue b/src/components/Pages/Keluhan/Table_29.vue
index abad25f..6dd5e4a 100755
--- a/src/components/Pages/Keluhan/Table_29.vue
+++ b/src/components/Pages/Keluhan/Table_29.vue
@@ -18,21 +18,21 @@
 
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-            <DxColumn :width="170" alignment="center" data-field="fungsiBidang" caption="Fungsi Bidang"
+            <DxColumn :width="170" alignment="center" data-field="fungsi_bidang" caption="Fungsi Bidang"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                 <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="totalSelesai" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="persenSelesai" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="totalInProcess" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="persenInProcess" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -40,17 +40,17 @@
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="avgDurasiResponse" data-type="number"
+                    <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
                         caption="Rata-Rata" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="maxDurasiResponse" data-type="number"
+                    <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
                         caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="minDurasiResponse" data-type="number"
+                    <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
                         caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="totalDiatasSlaResponse" data-type="number"
+                    <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
                         caption=">SLA" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="totalDibawahSlaResponse" data-type="number"
+                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
                         caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -58,17 +58,17 @@
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="avgDurasiPenyelesaian" data-type="number"
+                    <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
                         caption="Rata-Rata" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="maxDurasiPenyelesaian" data-type="number"
+                    <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
                         caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="minDurasiPenyelesaian" data-type="number"
+                    <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
                         caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="totalDiatasSlaPenyelesaian" data-type="number"
+                    <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
                         caption=">SLA" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="totalDibawahSlaPenyelesaian" data-type="number"
+                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
                         caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -155,24 +155,22 @@ const GET_DATA = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-      avgDurasiPenyelesaian
-      avgDurasiResponse
-      fungsiBidang
-      maxDurasiPenyelesaian
-      maxDurasiResponse
-      minDurasiPenyelesaian
-      minDurasiResponse
-      persenInProcess
-      persenSelesai
+      fungsi_bidang
       total
-      totalDiatasSlaPenyelesaian
-      totalDiatasSlaResponse
-      totalDibawahSlaPenyelesaian
-      totalDibawahSlaResponse
-      totalDurasiPenyelesaian
-      totalDurasiResponse
-      totalInProcess
-      totalSelesai
+      total_selesai
+      persen_selesai
+      total_inproses
+      persen_inproses
+      avg_durasi_response
+      min_durasi_response
+      max_durasi_response
+      total_dibawah_sla_response
+      total_diatas_sla_response
+      avg_durasi_recovery
+      min_durasi_recovery
+      max_durasi_recovery
+      total_dibawah_sla_recovery
+      total_diatas_sla_recovery
     }
   }
 `
diff --git a/src/components/Pages/Keluhan/Table_30.vue b/src/components/Pages/Keluhan/Table_30.vue
index 35d2943..f2ba13a 100755
--- a/src/components/Pages/Keluhan/Table_30.vue
+++ b/src/components/Pages/Keluhan/Table_30.vue
@@ -18,7 +18,7 @@
 
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-            <DxColumn :width="170" alignment="center" data-field="tipe_permasalahan" caption="Jenis Keluhan"
+            <DxColumn :width="170" alignment="center" data-field="tipe_keluhan" caption="Jenis Keluhan"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                 <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
@@ -68,7 +68,7 @@
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
                         caption=">SLA" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number"
+                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
                         caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -147,27 +147,22 @@ query rekapitulasiKeluhanPerJenisKeluhan
         idUid: $idUid
         idUp3: $idUp3
     ) {
-            avg_durasi_dispatch
-            avg_durasi_recovery
-            avg_durasi_response
-            max_durasi_dispatch
-            max_durasi_recovery
-            max_durasi_response
-            min_durasi_dispatch
-            min_durasi_recovery
-            min_durasi_response
-            persen_inproses
-            persen_selesai
-            tipe_permasalahan
+            tipe_keluhan
             total
-            total_diatas_sla_dispatch
-            total_diatas_sla_recovery
-            total_diatas_sla_response
-            total_dibawah_sla_dispatch
-            total_dibawah_sla_recovery
-            total_dibawah_sla_response
-            total_inproses
             total_selesai
+            persen_selesai
+            total_inproses
+            persen_inproses
+            avg_durasi_response
+            min_durasi_response
+            max_durasi_response
+            total_dibawah_sla_response
+            total_diatas_sla_response
+            avg_durasi_recovery
+            min_durasi_recovery
+            max_durasi_recovery
+            total_dibawah_sla_recovery
+            total_diatas_sla_recovery
         }
 }`;
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
diff --git a/src/components/Pages/Keluhan/Table_31.vue b/src/components/Pages/Keluhan/Table_31.vue
index 354ac69..68250e7 100755
--- a/src/components/Pages/Keluhan/Table_31.vue
+++ b/src/components/Pages/Keluhan/Table_31.vue
@@ -18,21 +18,21 @@
 
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Kelompok Keluhan"
+            <DxColumn :width="170" alignment="center" data-field="kelompok" caption="Kelompok Keluhan"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -40,36 +40,36 @@
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
 
@@ -147,27 +147,22 @@ query rekapitulasiKeluhanPerKelompokKeluhan
         idUid: $idUid
         idUp3: $idUp3
     ) {
-            avg_durasi_dispatch
-            avg_durasi_recovery
-            avg_durasi_response
-            max_durasi_dispatch
-            max_durasi_recovery
-            max_durasi_response
-            min_durasi_dispatch
-            min_durasi_recovery
-            min_durasi_response
-            persen_inproses
-            persen_selesai
-            tipe_permasalahan
+            kelompok
             total
-            total_diatas_sla_dispatch
-            total_diatas_sla_recovery
-            total_diatas_sla_response
-            total_dibawah_sla_dispatch
-            total_dibawah_sla_recovery
-            total_dibawah_sla_response
-            total_inproses
             total_selesai
+            persen_selesai
+            total_inproses
+            persen_inproses
+            avg_durasi_response
+            min_durasi_response
+            max_durasi_response
+            total_dibawah_sla_response
+            total_diatas_sla_response
+            avg_durasi_recovery
+            min_durasi_recovery
+            max_durasi_recovery
+            total_dibawah_sla_recovery
+            total_diatas_sla_recovery
         }
 }`;
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
diff --git a/src/components/Pages/Keluhan/Table_32.vue b/src/components/Pages/Keluhan/Table_32.vue
index cb3a11c..327c862 100755
--- a/src/components/Pages/Keluhan/Table_32.vue
+++ b/src/components/Pages/Keluhan/Table_32.vue
@@ -18,7 +18,7 @@
 
       <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO" css-class="custom-table-column" />
-      <DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
+      <DxColumn :width="170" alignment="center" data-field="tanggal_lapor" caption="Tanggal Lapor"
         css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
         <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
@@ -153,29 +153,22 @@ const GET_DATA = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-      avg_durasi_dispatch
-      avg_durasi_recovery
-      avg_durasi_response
-      id_uid
-      id_up3
-      max_durasi_dispatch
-      max_durasi_recovery
-      max_durasi_response
-      min_durasi_dispatch
-      min_durasi_recovery
-      min_durasi_response
-      persen_inproses
-      persen_selesai
-      tanggal
+      tanggal_lapor
       total
-      total_diatas_sla_dispatch
-      total_diatas_sla_recovery
-      total_diatas_sla_response
-      total_dibawah_sla_dispatch
-      total_dibawah_sla_recovery
-      total_dibawah_sla_response
-      total_inproses
       total_selesai
+      persen_selesai
+      total_inproses
+      persen_inproses
+      avg_durasi_response
+      min_durasi_response
+      max_durasi_response
+      total_dibawah_sla_response
+      total_diatas_sla_response
+      avg_durasi_recovery
+      min_durasi_recovery
+      max_durasi_recovery
+      total_dibawah_sla_recovery
+      total_diatas_sla_recovery
     }
   }
 `
diff --git a/src/components/Pages/Keluhan/Table_33.vue b/src/components/Pages/Keluhan/Table_33.vue
index e22ee22..7c44337 100755
--- a/src/components/Pages/Keluhan/Table_33.vue
+++ b/src/components/Pages/Keluhan/Table_33.vue
@@ -18,7 +18,7 @@
 
       <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO" css-class="custom-table-column" />
-      <DxColumn :width="170" alignment="center" data-field="idUlp" caption="Unit" css-class="custom-table-column" />
+      <DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
         <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
           css-class="custom-table-column" />
@@ -152,29 +152,23 @@ const GET_DATA = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-      avg_durasi_dispatch
-      avg_durasi_recovery
-      avg_durasi_response
-      id_uid
-      id_up3
-      max_durasi_dispatch
-      max_durasi_recovery
-      max_durasi_response
-      min_durasi_dispatch
-      min_durasi_recovery
-      min_durasi_response
-      persen_inproses
-      persen_selesai
-      idUlp
+      id_ulp
+      nama_ulp
       total
-      total_diatas_sla_dispatch
-      total_diatas_sla_recovery
-      total_diatas_sla_response
-      total_dibawah_sla_dispatch
-      total_dibawah_sla_recovery
-      total_dibawah_sla_response
-      total_inproses
       total_selesai
+      persen_selesai
+      total_inproses
+      persen_inproses
+      avg_durasi_response
+      min_durasi_response
+      max_durasi_response
+      total_dibawah_sla_response
+      total_diatas_sla_response
+      avg_durasi_recovery
+      min_durasi_recovery
+      max_durasi_recovery
+      total_dibawah_sla_recovery
+      total_diatas_sla_recovery
     }
   }
 `