From cc17efc9305e4a174c7a02bad94e7106d0951e41 Mon Sep 17 00:00:00 2001
From: rpurnama1409 <rpurnama0014@gmail.com>
Date: Sat, 24 Feb 2024 14:56:09 +0700
Subject: [PATCH 01/21] build image

---
 src/utils/graphql.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/utils/graphql.ts b/src/utils/graphql.ts
index 42650f3..09cf6c6 100755
--- a/src/utils/graphql.ts
+++ b/src/utils/graphql.ts
@@ -1,3 +1,4 @@
+//deploy vm
 import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
 
 export const apolloClient = () => {

From cc83c7b9d1029f459faa0fb93a3daa0fa5d59146 Mon Sep 17 00:00:00 2001
From: rpurnama1409 <rpurnama0014@gmail.com>
Date: Sat, 24 Feb 2024 15:43:14 +0700
Subject: [PATCH 02/21] Update image version in deployment.yaml

---
 deployment.yaml | 31 +++++++++++++++----------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/deployment.yaml b/deployment.yaml
index 8319df0..e325841 100755
--- a/deployment.yaml
+++ b/deployment.yaml
@@ -1,22 +1,22 @@
 apiVersion: apps/v1
 kind: Deployment
 metadata:
- name: apkt-eis
+  name: apkt-eis
 spec:
- replicas: 3
- selector:
-   matchLabels:
-     app: apkt-eis
- template:
-   metadata:
-     labels:
-       app: apkt-eis
-   spec:
-     containers:
-     - name: apkt-eis
-       image: defuj/apkt-eis:v0.0.23-dev
-       ports:
-       - containerPort: 80
+  replicas: 3
+  selector:
+    matchLabels:
+      app: apkt-eis
+  template:
+    metadata:
+      labels:
+        app: apkt-eis
+    spec:
+      containers:
+        - name: apkt-eis
+          image: defuj/apkt-eis:v0.0.1-vm
+          ports:
+            - containerPort: 80
 ---
 apiVersion: v1
 kind: Service
@@ -44,4 +44,3 @@ spec:
       port: 32166
       targetPort: 80
   type: ClusterIP
-  
\ No newline at end of file

From 5c86ca7c016211fa7beb2bf60a74eeac34119135 Mon Sep 17 00:00:00 2001
From: rpurnama1409 <rpurnama0014@gmail.com>
Date: Sat, 24 Feb 2024 15:46:24 +0700
Subject: [PATCH 03/21] build image

---
 src/utils/network.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/utils/network.ts b/src/utils/network.ts
index 18e1822..bffc15f 100755
--- a/src/utils/network.ts
+++ b/src/utils/network.ts
@@ -1,3 +1,4 @@
+//deploy vm
 import axios from 'axios'
 const url = 'http://10.1.50.173:32181'
 const instance = axios.create({

From f3df423ac04dc5017dfb07831f168ff182a5f238 Mon Sep 17 00:00:00 2001
From: rpurnama1409 <rpurnama0014@gmail.com>
Date: Sat, 24 Feb 2024 16:13:37 +0700
Subject: [PATCH 04/21] build image

---
 .github/workflows/docker-image-development.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/docker-image-development.yml b/.github/workflows/docker-image-development.yml
index 8076f21..12511df 100755
--- a/.github/workflows/docker-image-development.yml
+++ b/.github/workflows/docker-image-development.yml
@@ -21,5 +21,5 @@ jobs:
       - uses: actions/checkout@v3
       - name: Build the Docker image
         run: |
-          docker build . -t defuj/apkt-eis:v0.0.25-dev
-          docker push defuj/apkt-eis:v0.0.25-dev
+          docker build . -t defuj/apkt-eis:v0.0.1-vm
+          docker push defuj/apkt-eis:v0.0.1-vm

From 1605b41be1bfe0880002fc0388f0288a5f096956 Mon Sep 17 00:00:00 2001
From: rpurnama1409 <rpurnama0014@gmail.com>
Date: Sat, 24 Feb 2024 16:56:54 +0700
Subject: [PATCH 05/21] build image

---
 .github/workflows/docker-image-development.yml | 4 ++--
 deployment.yaml                                | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/docker-image-development.yml b/.github/workflows/docker-image-development.yml
index 12511df..fcd6464 100755
--- a/.github/workflows/docker-image-development.yml
+++ b/.github/workflows/docker-image-development.yml
@@ -21,5 +21,5 @@ jobs:
       - uses: actions/checkout@v3
       - name: Build the Docker image
         run: |
-          docker build . -t defuj/apkt-eis:v0.0.1-vm
-          docker push defuj/apkt-eis:v0.0.1-vm
+          docker build . -t defuj/apkt-eis:v0.0.2-vm
+          docker push defuj/apkt-eis:v0.0.2-vm
diff --git a/deployment.yaml b/deployment.yaml
index e325841..a35805c 100755
--- a/deployment.yaml
+++ b/deployment.yaml
@@ -14,7 +14,7 @@ spec:
     spec:
       containers:
         - name: apkt-eis
-          image: defuj/apkt-eis:v0.0.1-vm
+          image: defuj/apkt-eis:v0.0.2-vm
           ports:
             - containerPort: 80
 ---

From e8ed93af03b86939555ff0e042b96df49a8d6830 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Mon, 26 Feb 2024 09:03:47 +0700
Subject: [PATCH 06/21] Refactor DatePicker component

---
 src/components/DatePicker.vue | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index df4e8cd..04c5044 100755
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -27,7 +27,7 @@ const customShortcuts = () => {
         return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()];
       },
     },
-   
+
   ];
 };
 watch(dateValue, (newValue) => {
@@ -37,22 +37,12 @@ watch(dateValue, (newValue) => {
 
 <template>
   <div class="flex">
-    <vue-tailwind-datepicker
-      v-model="dateValue"
-      :formatter="formatter"
-      separator=" s/d "
-      :shortcuts="customShortcuts"
-      :auto-apply="true"
-      as-single
-      use-range
-      v-slot="{ value, placeholder }"
-    >
+    <vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" separator=" s/d " :shortcuts="customShortcuts"
+      :auto-apply="true" as-single use-range v-slot="{ value, placeholder }">
       <div class="flex">
         <div class="flex-1">
-          <button
-            type="button"
-            class="w-full flex items-center justify-between px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
-          >
+          <button type="button"
+            class="flex items-center justify-between w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0">
             <span class="text-gray-900">
               {{ value || placeholder }}
             </span>

From c306e0f6ac4a603d9e3b322fef50183bf8ddfb28 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Mon, 26 Feb 2024 14:18:15 +0700
Subject: [PATCH 07/21] Remove unplugin-tailwindcss-mangle and update
 Dockerfile

---
 Dockerfile        |  25 ++++++----
 package-lock.json | 123 ----------------------------------------------
 package.json      |   6 +--
 vite.config.ts    |   3 --
 4 files changed, 17 insertions(+), 140 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 32ff3f3..1511885 100755
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,13 +1,18 @@
-FROM node:lts-alpine as build-stage
-WORKDIR /app
-COPY package*.json ./
-RUN npm install
-COPY . .
-RUN npm run build
+# FROM node:lts-alpine as build-stage
+# WORKDIR /app
+# COPY package*.json ./
+# RUN npm install
+# COPY . .
+# RUN npm run build
 
-# tahap produksi
-FROM nginx:stable-alpine as production-stage
-COPY --from=build-stage /app/dist /usr/share/nginx/html
-COPY --from=build-stage /app/nginx.conf /etc/nginx/nginx.conf
+# FROM nginx:stable-alpine as production-stage
+# COPY --from=build-stage /app/dist /usr/share/nginx/html
+# COPY --from=build-stage /app/nginx.conf /etc/nginx/nginx.conf
+# EXPOSE 32166
+# CMD ["nginx", "-g", "daemon off;"]
+
+FROM nginx:stable-alpine
+COPY /dist /usr/share/nginx/html
+COPY /nginx.conf /etc/nginx/nginx.conf
 EXPOSE 32166
 CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 42bc222..eb6fe86 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -71,7 +71,6 @@
         "tailwindcss": "^3.3.2",
         "tailwindcss-patch": "^2.2.2",
         "typescript": "~5.2.2",
-        "unplugin-tailwindcss-mangle": "^2.2.2",
         "vite": "^4.3.9",
         "vitest": "^0.34.6",
         "vue-tsc": "^1.6.5"
@@ -166,12 +165,6 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
-    "node_modules/@ast-core/escape": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@ast-core/escape/-/escape-1.0.1.tgz",
-      "integrity": "sha512-/kVjBkDzYrSW1S+gTBCuOfhnNkge9qZFJgLT+MOZdmPN4Vts36S60uU5br3ozoxpJ1eRGe6pGy7/EfcOpFFHlA==",
-      "dev": true
-    },
     "node_modules/@babel/code-frame": {
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
@@ -537,23 +530,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.3.tgz",
-      "integrity": "sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/helper-simple-access": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-transform-typescript": {
       "version": "7.23.6",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.23.6.tgz",
@@ -572,25 +548,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/preset-typescript": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.23.3.tgz",
-      "integrity": "sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/helper-validator-option": "^7.22.15",
-        "@babel/plugin-syntax-jsx": "^7.23.3",
-        "@babel/plugin-transform-modules-commonjs": "^7.23.3",
-        "@babel/plugin-transform-typescript": "^7.23.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/runtime": {
       "version": "7.23.9",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
@@ -1528,40 +1485,6 @@
         "dedent": "^1.5.1"
       }
     },
-    "node_modules/@tailwindcss-mangle/core": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/@tailwindcss-mangle/core/-/core-2.2.2.tgz",
-      "integrity": "sha512-CFPQhX5xv+ru96Ty2l9gftL70EkVliU/HB8KKxW5O11CVSGKYU6+d6FFnWBFDq6yugArnlKle5q07U8J4Tj8aw==",
-      "dev": true,
-      "dependencies": {
-        "@ast-core/escape": "^1.0.1",
-        "@babel/core": "^7.22.20",
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "@babel/preset-typescript": "^7.22.15",
-        "@babel/types": "^7.22.19",
-        "@tailwindcss-mangle/config": "^2.2.2",
-        "@tailwindcss-mangle/shared": "^2.2.2",
-        "fast-sort": "^3.4.0",
-        "magic-string": "^0.30.3",
-        "micromatch": "^4.0.5",
-        "parse5": "^7.1.2",
-        "postcss": "^8.4.30",
-        "postcss-selector-parser": "^6.0.13"
-      }
-    },
-    "node_modules/@tailwindcss-mangle/core/node_modules/postcss-selector-parser": {
-      "version": "6.0.15",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz",
-      "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==",
-      "dev": true,
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/@tailwindcss-mangle/shared": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/@tailwindcss-mangle/shared/-/shared-2.2.2.tgz",
@@ -4980,12 +4903,6 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
-    "node_modules/fast-sort": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/fast-sort/-/fast-sort-3.4.0.tgz",
-      "integrity": "sha512-c/cMBGA5mH3OYjaXedtLIM3hQjv+KuZuiD2QEH5GofNOZeQVDIYIN7Okc2AW1KPhk44g5PTZnXp8t2lOMl8qhQ==",
-      "dev": true
-    },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
@@ -9344,31 +9261,6 @@
         "node": ">= 4.0.0"
       }
     },
-    "node_modules/unplugin": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.7.1.tgz",
-      "integrity": "sha512-JqzORDAPxxs8ErLV4x+LL7bk5pk3YlcWqpSNsIkAZj972KzFZLClc/ekppahKkOczGkwIG6ElFgdOgOlK4tXZw==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^8.11.3",
-        "chokidar": "^3.5.3",
-        "webpack-sources": "^3.2.3",
-        "webpack-virtual-modules": "^0.6.1"
-      }
-    },
-    "node_modules/unplugin-tailwindcss-mangle": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/unplugin-tailwindcss-mangle/-/unplugin-tailwindcss-mangle-2.2.2.tgz",
-      "integrity": "sha512-tbfva7OEQfY3SN/gT6a084Qqm/CvUdrQgrXIDeQPJGmRxH+mHeYP8WA49sGl0yz5LvSUKskneq1ylc4LOOmaYA==",
-      "dev": true,
-      "dependencies": {
-        "@tailwindcss-mangle/config": "^2.2.2",
-        "@tailwindcss-mangle/core": "^2.2.2",
-        "@tailwindcss-mangle/shared": "^2.2.2",
-        "magic-string": "^0.30.3",
-        "unplugin": "^1.5.0"
-      }
-    },
     "node_modules/unzipper": {
       "version": "0.10.14",
       "resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.10.14.tgz",
@@ -9884,21 +9776,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/webpack-sources": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
-      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/webpack-virtual-modules": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz",
-      "integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==",
-      "dev": true
-    },
     "node_modules/whatwg-encoding": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
diff --git a/package.json b/package.json
index 76301b0..34ee9ff 100755
--- a/package.json
+++ b/package.json
@@ -11,8 +11,7 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "format": "prettier --write src/",
-    "prepare": "tw-patch install"
+    "format": "prettier --write src/"
   },
   "dependencies": {
     "@apollo/client": "^3.8.10",
@@ -78,9 +77,8 @@
     "tailwindcss": "^3.3.2",
     "tailwindcss-patch": "^2.2.2",
     "typescript": "~5.2.2",
-    "unplugin-tailwindcss-mangle": "^2.2.2",
     "vite": "^4.3.9",
     "vitest": "^0.34.6",
     "vue-tsc": "^1.6.5"
   }
-}
+}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 125d649..c7a9174 100755
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,7 +3,6 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
-import utwm from 'unplugin-tailwindcss-mangle/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -16,12 +15,10 @@ export default defineConfig({
       }
     }),
     vueJsx(),
-    // process.env.NODE_ENV === 'production' && utwm({})
   ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
-      // 'inferno': 'inferno/dist/index.dev.esm.js',
     }
   },
 })

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 08/21] 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
     }
   }
 `

From a23702ac2c0a18695db95d6efc8ce598fb60c1a0 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 28 Feb 2024 15:26:00 +0700
Subject: [PATCH 09/21] Update README.md with table menu documentation

---
 README.md | 76 ++++++++++++++++++-------------------------------------
 1 file changed, 25 insertions(+), 51 deletions(-)

diff --git a/README.md b/README.md
index b3541a9..e04f99c 100755
--- a/README.md
+++ b/README.md
@@ -1,52 +1,26 @@
-# Executive Information System
+# TABLE MENU DOCUMENTATION
+## Monalisa
+### Gangguan > Rekapitulasi
+| CODE    | MENU                                     | FILE         |
+| ------- | ---------------------------------------- | ------------ |
+| MON0001 | Jumlah Kali Gangguan                     | Table_36.vue |
+| MON0002 | Dispacthing Time (DT) Gangguan           | Table_37.vue |
+| MON0003 | Recovery Time (RCT) Gangguan             | Table_38.vue |
+| MON0004 | Response Time (RPT) Gangguan             | Table_39.vue |
+| MON0005 | Jumlah dan Durasi RPT RCT Gangguan       | Table_40.vue |
+| MON0006 | Rekapitulasi Gangguan Per Jenis Gangguan | Table_41.vue |
+| MON0007 | Rekapitulasi Lapor Ulang Gangguan        | Table_42.vue |
+| MON0008 | Rekapitulasi ENS Gangguan                | Table_43.vue |
+| MON0009 | Rekapitulasi Gangguan Belum Selesai      | Table_44.vue |
+| MON0010 | Jumlah Kali Keluhan                      | Table_45.vue |
+| MON0011 | Recovery Time (RCT) Keluhan              | Table_46.vue |
+| MON0012 | Response Time (RPT) Keluhan              | Table_47.vue |
+| MON0013 | Jumlah dan Durasi RPT RCT Keluhan        | Table_48.vue |
+| MON0014 | Rekapitulasi Gangguan Per Jenis Keluhan  | Table_49.vue |
+| MON0015 | Rekapitulasi Lapor Ulang Keluhan         | Table_50.vue |
+| MON0016 | Rekapitulasi Gangguan Belum Selesai      | Table_51.vue |
 
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```
-
-### Run Unit Tests with [Vitest](https://vitest.dev/)
-
-```sh
-npm run test:unit
-```
-
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-npm run lint
-```
\ No newline at end of file
+### Keluhan > Rekapitulasi
+| CODE    | MENU                | FILE         |
+| ------- | ------------------- | ------------ |
+| MON0010 | Jumlah Kali Keluhan | Table_45.vue |
\ No newline at end of file

From 8fa2f8cdd7c0c5d9db414e8d220d357c1ae6e1ee Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 28 Feb 2024 15:29:13 +0700
Subject: [PATCH 10/21] Update Dockerfile to include npm install step

---
 Dockerfile | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index c1f0400..959bd26 100755
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,22 +1,22 @@
 FROM node:lts-alpine as build-stage
 WORKDIR /app
-# COPY package*.json ./
-# RUN npm install
+COPY package*.json ./
+RUN npm install
 COPY . .
 RUN npm run build
 
-# FROM nginx:stable-alpine as production-stage
-# COPY --from=build-stage /app/dist /usr/share/nginx/html
-# COPY --from=build-stage /app/nginx.conf /etc/nginx/nginx.conf
-# EXPOSE 32166
-# CMD ["nginx", "-g", "daemon off;"]
-
-FROM nginx:stable-alpine
-COPY /dist /usr/share/nginx/html
-COPY /nginx.conf /etc/nginx/nginx.conf
+FROM nginx:stable-alpine as production-stage
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+COPY --from=build-stage /app/nginx.conf /etc/nginx/nginx.conf
 EXPOSE 32166
 CMD ["nginx", "-g", "daemon off;"]
 
+# FROM nginx:stable-alpine
+# COPY /dist /usr/share/nginx/html
+# COPY /nginx.conf /etc/nginx/nginx.conf
+# EXPOSE 32166
+# CMD ["nginx", "-g", "daemon off;"]
+
 # FROM nginx:stable-alpine
 # COPY /dist /usr/share/nginx/html
 # COPY /nginx.conf /etc/nginx/nginx.conf

From b490ecb90eb4aa7c383d28eb4ea40feb80486b61 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 28 Feb 2024 15:29:47 +0700
Subject: [PATCH 11/21] Remove unused CSS classes

---
 src/assets/css/style.css | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index ef87b66..41362eb 100755
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1525,10 +1525,6 @@ body {
   height: 80vh;
 }
 
-.h-\[400px\] {
-  height: 400px;
-}
-
 .max-h-0 {
   max-height: 0px;
 }
@@ -5926,12 +5922,6 @@ body {
     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));

From 45aaa773eab20c5b68fb51b3d0c5159e2c8071c3 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 28 Feb 2024 15:30:47 +0700
Subject: [PATCH 12/21] Update Docker image version to v0.0.3-vm

---
 .github/workflows/docker-image-development.yml | 4 ++--
 deployment.yaml                                | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/docker-image-development.yml b/.github/workflows/docker-image-development.yml
index fcd6464..88eb1e6 100755
--- a/.github/workflows/docker-image-development.yml
+++ b/.github/workflows/docker-image-development.yml
@@ -21,5 +21,5 @@ jobs:
       - uses: actions/checkout@v3
       - name: Build the Docker image
         run: |
-          docker build . -t defuj/apkt-eis:v0.0.2-vm
-          docker push defuj/apkt-eis:v0.0.2-vm
+          docker build . -t defuj/apkt-eis:v0.0.3-vm
+          docker push defuj/apkt-eis:v0.0.3-vm
diff --git a/deployment.yaml b/deployment.yaml
index a35805c..7304967 100755
--- a/deployment.yaml
+++ b/deployment.yaml
@@ -14,7 +14,7 @@ spec:
     spec:
       containers:
         - name: apkt-eis
-          image: defuj/apkt-eis:v0.0.2-vm
+          image: defuj/apkt-eis:v0.0.3-vm
           ports:
             - containerPort: 80
 ---

From 1a89bf5bdf178730123f5ea4ca423bb613efb449 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 28 Feb 2024 15:31:38 +0700
Subject: [PATCH 13/21] build image

---
 Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index 959bd26..1029d86 100755
--- a/Dockerfile
+++ b/Dockerfile
@@ -21,4 +21,4 @@ CMD ["nginx", "-g", "daemon off;"]
 # COPY /dist /usr/share/nginx/html
 # COPY /nginx.conf /etc/nginx/nginx.conf
 # EXPOSE 32166
-# CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
+# CMD ["nginx", "-g", "daemon off;"]

From bc85cc8efadb5ca3afdfab178ecafbbf0587c83e Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 28 Feb 2024 15:33:26 +0700
Subject: [PATCH 14/21] Update Docker image version to v0.0.4-vm

---
 .github/workflows/docker-image-development.yml | 4 ++--
 deployment.yaml                                | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/docker-image-development.yml b/.github/workflows/docker-image-development.yml
index 88eb1e6..d547915 100755
--- a/.github/workflows/docker-image-development.yml
+++ b/.github/workflows/docker-image-development.yml
@@ -21,5 +21,5 @@ jobs:
       - uses: actions/checkout@v3
       - name: Build the Docker image
         run: |
-          docker build . -t defuj/apkt-eis:v0.0.3-vm
-          docker push defuj/apkt-eis:v0.0.3-vm
+          docker build . -t defuj/apkt-eis:v0.0.4-vm
+          docker push defuj/apkt-eis:v0.0.4-vm
diff --git a/deployment.yaml b/deployment.yaml
index 7304967..c234838 100755
--- a/deployment.yaml
+++ b/deployment.yaml
@@ -14,7 +14,7 @@ spec:
     spec:
       containers:
         - name: apkt-eis
-          image: defuj/apkt-eis:v0.0.3-vm
+          image: defuj/apkt-eis:v0.0.4-vm
           ports:
             - containerPort: 80
 ---

From 006f5b8f1388b2bffcf37e8cb36a81726d53cfb3 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 28 Feb 2024 15:33:46 +0700
Subject: [PATCH 15/21] build image

---
 Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index 1029d86..959bd26 100755
--- a/Dockerfile
+++ b/Dockerfile
@@ -21,4 +21,4 @@ CMD ["nginx", "-g", "daemon off;"]
 # COPY /dist /usr/share/nginx/html
 # COPY /nginx.conf /etc/nginx/nginx.conf
 # EXPOSE 32166
-# CMD ["nginx", "-g", "daemon off;"]
+# CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file

From a4069d8eff964805bc9b0debc359f4980e75cde0 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 28 Feb 2024 16:02:53 +0700
Subject: [PATCH 16/21] Update Docker build commands

---
 .github/workflows/docker-image-development.yml | 2 +-
 .github/workflows/docker-image-release.yml     | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/docker-image-development.yml b/.github/workflows/docker-image-development.yml
index d547915..fd3d18c 100755
--- a/.github/workflows/docker-image-development.yml
+++ b/.github/workflows/docker-image-development.yml
@@ -21,5 +21,5 @@ jobs:
       - uses: actions/checkout@v3
       - name: Build the Docker image
         run: |
-          docker build . -t defuj/apkt-eis:v0.0.4-vm
+          docker build . --file Dockerfile --tag defuj/apkt-eis:v0.0.4-vm
           docker push defuj/apkt-eis:v0.0.4-vm
diff --git a/.github/workflows/docker-image-release.yml b/.github/workflows/docker-image-release.yml
index b9b2a12..25b28e0 100755
--- a/.github/workflows/docker-image-release.yml
+++ b/.github/workflows/docker-image-release.yml
@@ -23,8 +23,7 @@ jobs:
       
     - name: Build the Docker image
       run: | 
-          docker build . -t defuj/apkt-eis
-          docker image tag defuj/apkt-eis defuj/apkt-eis:v1.0.1-release
+          docker build . --file Dockerfile --tag  defuj/apkt-eis:v1.0.1-release
           docker push defuj/apkt-eis:v1.0.1-release
 
     

From d6e825a3dc22883998320a534678adfdde16caa4 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 28 Feb 2024 16:32:47 +0700
Subject: [PATCH 17/21] Update build directory and configuration

---
 .gitignore     | 1 +
 Dockerfile     | 8 +-------
 vite.config.ts | 7 +++++++
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/.gitignore b/.gitignore
index 08910b9..3f04968 100755
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@ lerna-debug.log*
 node_modules
 .DS_Store
 dist
+build
 dist-ssr
 coverage
 *.local
diff --git a/Dockerfile b/Dockerfile
index 959bd26..dc729ea 100755
--- a/Dockerfile
+++ b/Dockerfile
@@ -6,17 +6,11 @@ COPY . .
 RUN npm run build
 
 FROM nginx:stable-alpine as production-stage
-COPY --from=build-stage /app/dist /usr/share/nginx/html
+COPY --from=build-stage /app/build /usr/share/nginx/html
 COPY --from=build-stage /app/nginx.conf /etc/nginx/nginx.conf
 EXPOSE 32166
 CMD ["nginx", "-g", "daemon off;"]
 
-# FROM nginx:stable-alpine
-# COPY /dist /usr/share/nginx/html
-# COPY /nginx.conf /etc/nginx/nginx.conf
-# EXPOSE 32166
-# CMD ["nginx", "-g", "daemon off;"]
-
 # FROM nginx:stable-alpine
 # COPY /dist /usr/share/nginx/html
 # COPY /nginx.conf /etc/nginx/nginx.conf
diff --git a/vite.config.ts b/vite.config.ts
index c7a9174..b273b1c 100755
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -21,4 +21,11 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     }
   },
+  build: {
+    outDir: 'build',
+    emptyOutDir: true,
+    chunkSizeWarningLimit: 4096,
+    cssCodeSplit: true,
+    cssMinify: true,
+  }
 })

From 771b8a0a9fde3ffcda3732c49302464d53d5a5a8 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 28 Feb 2024 16:33:40 +0700
Subject: [PATCH 18/21] Update Docker image version to v0.0.5-vm

---
 .github/workflows/docker-image-development.yml | 4 ++--
 deployment.yaml                                | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/docker-image-development.yml b/.github/workflows/docker-image-development.yml
index fd3d18c..ce1d178 100755
--- a/.github/workflows/docker-image-development.yml
+++ b/.github/workflows/docker-image-development.yml
@@ -21,5 +21,5 @@ jobs:
       - uses: actions/checkout@v3
       - name: Build the Docker image
         run: |
-          docker build . --file Dockerfile --tag defuj/apkt-eis:v0.0.4-vm
-          docker push defuj/apkt-eis:v0.0.4-vm
+          docker build . --file Dockerfile --tag defuj/apkt-eis:v0.0.5-vm
+          docker push defuj/apkt-eis:v0.0.5-vm
diff --git a/deployment.yaml b/deployment.yaml
index c234838..2994a8c 100755
--- a/deployment.yaml
+++ b/deployment.yaml
@@ -14,7 +14,7 @@ spec:
     spec:
       containers:
         - name: apkt-eis
-          image: defuj/apkt-eis:v0.0.4-vm
+          image: defuj/apkt-eis:v0.0.5-vm
           ports:
             - containerPort: 80
 ---

From d4bdb8cf7b79e997d458959de43a895bdfa7c51b Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 28 Feb 2024 16:53:14 +0700
Subject: [PATCH 19/21] Update Dockerfile and vite.config.ts

---
 Dockerfile     | 30 +++++++++++++++---------------
 vite.config.ts |  4 ++--
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index dc729ea..2e6a78e 100755
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,18 +1,18 @@
-FROM node:lts-alpine as build-stage
-WORKDIR /app
-COPY package*.json ./
-RUN npm install
-COPY . .
-RUN npm run build
+# FROM node:lts-alpine as build-stage
+# WORKDIR /app
+# COPY package*.json ./
+# RUN npm install
+# COPY . .
+# RUN npm run build
 
-FROM nginx:stable-alpine as production-stage
-COPY --from=build-stage /app/build /usr/share/nginx/html
-COPY --from=build-stage /app/nginx.conf /etc/nginx/nginx.conf
+# FROM nginx:stable-alpine as production-stage
+# COPY --from=build-stage /app/build /usr/share/nginx/html
+# COPY --from=build-stage /app/nginx.conf /etc/nginx/nginx.conf
+# EXPOSE 32166
+# CMD ["nginx", "-g", "daemon off;"]
+
+FROM nginx:stable-alpine
+COPY /build /usr/share/nginx/html
+COPY /nginx.conf /etc/nginx/nginx.conf
 EXPOSE 32166
 CMD ["nginx", "-g", "daemon off;"]
-
-# FROM nginx:stable-alpine
-# COPY /dist /usr/share/nginx/html
-# COPY /nginx.conf /etc/nginx/nginx.conf
-# EXPOSE 32166
-# CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index b273b1c..00cc9da 100755
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -25,7 +25,7 @@ export default defineConfig({
     outDir: 'build',
     emptyOutDir: true,
     chunkSizeWarningLimit: 4096,
-    cssCodeSplit: true,
-    cssMinify: true,
+    // cssCodeSplit: true,
+    // cssMinify: true,
   }
 })

From efca6ca1cefd110eaf73cbe67380efb393066c2d Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 28 Feb 2024 17:23:55 +0700
Subject: [PATCH 20/21] Fix click event in Table_1.vue and Table_28.vue

---
 src/components/Pages/Gangguan/Table_1.vue |   4 +-
 src/components/Pages/Gangguan/Table_2.vue | 221 +++++----------------
 src/components/Pages/Gangguan/Table_3.vue | 222 +++++----------------
 src/components/Pages/Keluhan/Table_22.vue | 225 +++++-----------------
 src/components/Pages/Keluhan/Table_23.vue | 205 ++++----------------
 src/components/Pages/Keluhan/Table_24.vue | 205 ++++----------------
 src/components/Pages/Keluhan/Table_25.vue | 215 +++++----------------
 src/components/Pages/Keluhan/Table_26.vue | 222 +++++----------------
 src/components/Pages/Keluhan/Table_28.vue |   8 +-
 9 files changed, 315 insertions(+), 1212 deletions(-)

diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 5b27b35..eb3ee76 100755
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -56,9 +56,9 @@
       <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko"
         cell-template="data" />
       <template #data="{ data }">
-        <span class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer" @click="showData()">
           {{ data.text }}
-        </span>
+          </span>
       </template>
     </DxDataGrid>
   </div>
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
index e29179b..b47e9bc 100755
--- a/src/components/Pages/Gangguan/Table_2.vue
+++ b/src/components/Pages/Gangguan/Table_2.vue
@@ -4,186 +4,60 @@
   </Filters>
 
   <div id="data">
-    <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=""
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-    >
+    <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="" :allow-column-resizing="true"
+      column-resizing-mode="widget">
       <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"
-      />
-      <DxLoadPanel
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible.sync="loading"
-        :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" />
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible.sync="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
-      <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
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="no_laporan"
-        caption="No Laporan"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="waktu_lapor"
-        caption="Tgl Lapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="waktu_response"
-        caption="Tgl Response"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="waktu_recovery"
-        caption="Tgl Recovery"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        alignment="center"
-        data-field="jumlah_lapor"
-        caption="Jml Lapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="durasi_response_time"
-        caption="Durasi Response Time"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="durasi_recovery_time"
-        caption="Durasi Recovery Time"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="status_akhir"
-        caption="Status"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="idpel_nometer"
-        caption="IDPEL/NO METER"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="nama_pelapor"
-        caption="Nama Pelapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="alamat_pelapor"
-        caption="Alamat Pelapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="no_telp_pelapor"
-        caption="No Telp Pelapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="media"
-        caption="Sumber Lapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="nama_posko"
-        caption="Posko"
-        cell-template="data"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <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 css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
+        caption="No Laporan" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
+        caption="Tgl Lapor" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
+        caption="Tgl Response" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
+        caption="Tgl Recovery" cell-template="data" />
+      <DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
+        cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
+        caption="Durasi Response Time" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
+        cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
+        caption="IDPEL/NO METER" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
+        caption="Nama Pelapor" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
+        caption="Alamat Pelapor" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
+        caption="No Telp Pelapor" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
+        cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
+        cell-template="data" />
 
       <template #data="{ data }">
-        <span class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer" @click="showData()">
           {{ data.text }}
-        </span>
+          </span>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="showDetail"
-    title="Daftar Gangguan Melapor Lebih Dari 1 Kali"
-    @on-close="closeDetail"
-  >
+  <DetailDialog :open="showDetail" title="Daftar Gangguan Melapor Lebih Dari 1 Kali" @on-close="closeDetail">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@@ -257,12 +131,7 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataDetail?.nama_posko"
-          class-name="flex-1 h-[56px]"
-        />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1 h-[56px]" />
       </div>
     </div>
   </DetailDialog>
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index c71967e..5838ae6 100755
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -4,172 +4,55 @@
   </Filters>
 
   <div id="data">
-    <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=""
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-    >
+    <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="" :allow-column-resizing="true"
+      column-resizing-mode="widget">
       <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"
-      />
-      <DxLoadPanel
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :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" />
+      <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"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="50"
-        alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-        data-type="number"
-        caption="No"
-        cell-template="data"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
+        cell-template="data" />
 
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="no_laporan"
-        caption="No Laporan"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="waktu_lapor"
-        caption="Tgl Lapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="waktu_response"
-        caption="Tgl Response"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="waktu_recovery"
-        caption="Tgl Recovery"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="durasi_response_time"
-        caption="Durasi Response Time"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="durasi_recovery_time"
-        caption="Durasi Recovery Time"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="status_akhir"
-        caption="Status"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="referensi_marking"
-        caption="Referensi Marking"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="idpel_nometer"
-        caption="IDPEL/NO METER"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="nama_pelapor"
-        caption="Nama Pelapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="alamat_pelapor"
-        caption="Alamat Pelapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="no_telp_pelapor"
-        caption="No Telp Pelapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="nama_posko"
-        caption="Posko"
-        cell-template="data"
-      />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
+        caption="No Laporan" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
+        caption="Tgl Lapor" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
+        caption="Tgl Response" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
+        caption="Tgl Recovery" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
+        caption="Durasi Response Time" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
+        cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
+        caption="Referensi Marking" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
+        caption="IDPEL/NO METER" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
+        caption="Nama Pelapor" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
+        caption="Alamat Pelapor" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
+        caption="No Telp Pelapor" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
+        cell-template="data" />
 
       <template #data="{ data }">
-        <span class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer" @click="showData()">
           {{ data.text }}
-        </span>
+          </span>
       </template>
     </DxDataGrid>
   </div>
@@ -243,32 +126,17 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataDetail?.nama_posko"
-          class-name="flex-1 h-[56px]"
-        />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1 h-[56px]" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataDetail?.penyebab"
-          class-name="flex-1 h-[56px]"
-        />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.penyebab" class-name="flex-1 h-[56px]" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataDetail?.tindakan"
-          class-name="flex-1 h-[56px]"
-        />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.tindakan" class-name="flex-1 h-[56px]" />
       </div>
     </div>
   </DetailDialog>
diff --git a/src/components/Pages/Keluhan/Table_22.vue b/src/components/Pages/Keluhan/Table_22.vue
index aca60a2..f6794b9 100755
--- a/src/components/Pages/Keluhan/Table_22.vue
+++ b/src/components/Pages/Keluhan/Table_22.vue
@@ -4,181 +4,57 @@
   </Filters>
 
   <div id="data">
-    <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"
-    >
+    <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">
       <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"
-      />
-      <DxLoadPanel
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :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" />
+      <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"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <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="no_laporan"
-        caption="No Laporan"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="waktu_lapor"
-        caption="Tgl Lapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="waktu_response"
-        caption="Tgl Response"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="waktu_recovery"
-        caption="Tgl Recovery"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field="jumlah_lapor"
-        caption="Jml Lapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="durasi_response_time"
-        caption="Durasi Response Time"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="durasi_recovery_time"
-        caption="Durasi Recovery Time"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field="status_akhir"
-        caption="Status"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="idpel_nometer"
-        caption="IDPEL/NO METER"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="nama_pelapor"
-        caption="Nama Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="alamat_pelapor"
-        caption="Alamat Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="no_telp_pelapor"
-        caption="No Telp Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="media"
-        caption="Sumber Lapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="nama_ulp"
-        caption="Nama ULP"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
+      <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="no_laporan" caption="No Laporan"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
+        cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
+        cell-template="data" />
+      <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
+        cell-template="data" />
 
       <template #data="{ data }">
-        <span class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer" @click="showData()">
           {{ data.text }}
-        </span>
+        </p>
       </template>
     </DxDataGrid>
   </div>
@@ -237,12 +113,7 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataDetail?.alamat_pelapor"
-          class-name="flex-1 h-[56px]"
-        />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -252,12 +123,8 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataDetail?.keterangan_pelapor"
-          class-name="flex-1 h-[56px]"
-        />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1 h-[56px]" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
diff --git a/src/components/Pages/Keluhan/Table_23.vue b/src/components/Pages/Keluhan/Table_23.vue
index 9cd1c78..7cdc319 100755
--- a/src/components/Pages/Keluhan/Table_23.vue
+++ b/src/components/Pages/Keluhan/Table_23.vue
@@ -4,165 +4,53 @@
   </Filters>
 
   <div id="data">
-    <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"
-    >
+    <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">
       <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"
-      />
-      <DxLoadPanel
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :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" />
+      <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"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <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="no_laporan"
-        caption="No Laporan"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
+      <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="no_laporan" caption="No Laporan"
+        css-class="custom-table-column" cell-template="data" />
 
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="waktu_lapor"
-        caption="Tgl Lapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="waktu_response"
-        caption="Tgl Response"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="waktu_recovery"
-        caption="Tgl Recovery"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="durasi_response_time"
-        caption="Durasi Response Time"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="durasi_recovery_time"
-        caption="Durasi Recovery Time"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field="status_akhir"
-        caption="Status"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="idpel_nometer"
-        caption="IDPEL/NO METER"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="nama_pelapor"
-        caption="Nama Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="alamat_pelapor"
-        caption="Alamat Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="no_telp_pelapor"
-        caption="No Telp Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="nama_ulp"
-        caption="Nama ULP"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
+      <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
+        cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
+        cell-template="data" />
       <template #data="{ data }">
-        <span class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer" @click="showData()">
           {{ data.text }}
-        </span>
+        </p>
       </template>
     </DxDataGrid>
   </div>
@@ -215,12 +103,7 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataDetail?.alamat_pelapor"
-          class-name="flex-1 h-[56px]"
-        />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -230,12 +113,8 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataDetail?.keterangan_pelapor"
-          class-name="flex-1 h-[56px]"
-        />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1 h-[56px]" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
diff --git a/src/components/Pages/Keluhan/Table_24.vue b/src/components/Pages/Keluhan/Table_24.vue
index ad9a789..df5c1ea 100755
--- a/src/components/Pages/Keluhan/Table_24.vue
+++ b/src/components/Pages/Keluhan/Table_24.vue
@@ -4,165 +4,53 @@
   </Filters>
 
   <div id="data">
-    <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"
-    >
+    <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">
       <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"
-      />
-      <DxLoadPanel
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :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" />
+      <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"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <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="no_laporan"
-        caption="No Laporan"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
+      <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="no_laporan" caption="No Laporan"
+        css-class="custom-table-column" cell-template="data" />
 
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="waktu_lapor"
-        caption="Tgl Lapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="waktu_response"
-        caption="Tgl Response"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="waktu_recovery"
-        caption="Tgl Recovery"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="durasi_response_time"
-        caption="Durasi Response Time"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="durasi_recovery_time"
-        caption="Durasi Recovery Time"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field="status_akhir"
-        caption="Status"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="idpel_nometer"
-        caption="IDPEL/NO METER"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="nama_pelapor"
-        caption="Nama Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="alamat_pelapor"
-        caption="Alamat Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="no_telp_pelapor"
-        caption="No Telp Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="nama_ulp"
-        caption="Nama ULP"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
+      <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
+        cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
+        cell-template="data" />
       <template #data="{ data }">
-        <span class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer" @click="showData()">
           {{ data.text }}
-        </span>
+        </p>
       </template>
     </DxDataGrid>
   </div>
@@ -216,12 +104,7 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataDetail?.alamat_pelapor"
-          class-name="flex-1 h-[56px]"
-        />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -231,12 +114,8 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataDetail?.keterangan_pelapor"
-          class-name="flex-1 h-[56px]"
-        />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1 h-[56px]" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
diff --git a/src/components/Pages/Keluhan/Table_25.vue b/src/components/Pages/Keluhan/Table_25.vue
index f1c7b8d..f839374 100755
--- a/src/components/Pages/Keluhan/Table_25.vue
+++ b/src/components/Pages/Keluhan/Table_25.vue
@@ -4,172 +4,54 @@
   </Filters>
 
   <div id="data">
-    <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"
-    >
+    <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">
       <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"
-      />
-      <DxLoadPanel
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :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" />
+      <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"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <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="no_laporan"
-        caption="No Laporan"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="waktu_lapor"
-        caption="Tgl Lapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="waktu_response"
-        caption="Tgl Response"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="waktu_recovery"
-        caption="Tgl Recovery"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="durasi_response_time"
-        caption="Durasi Response Time"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="durasi_recovery_time"
-        caption="Durasi Recovery Time"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field="status_akhir"
-        caption="Status"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="idpel_nometer"
-        caption="IDPEL/NO METER"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="nama_pelapor"
-        caption="Nama Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="alamat_pelapor"
-        caption="Alamat Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="no_telp_pelapor"
-        caption="No Telp Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="media"
-        caption="Sumber Lapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="nama_ulp"
-        caption="Nama ULP"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
+      <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="no_laporan" caption="No Laporan"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
+        cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
+        cell-template="data" />
+      <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
+        cell-template="data" />
       <template #data="{ data }">
-        <span class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer" @click="showData()">
           {{ data.text }}
-        </span>
+        </p>
       </template>
     </DxDataGrid>
   </div>
@@ -223,12 +105,7 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataDetail?.alamat_pelapor"
-          class-name="flex-1 h-[56px]"
-        />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -238,12 +115,8 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataDetail?.keterangan_pelapor"
-          class-name="flex-1 h-[56px]"
-        />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1 h-[56px]" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
diff --git a/src/components/Pages/Keluhan/Table_26.vue b/src/components/Pages/Keluhan/Table_26.vue
index b884aa2..928e424 100755
--- a/src/components/Pages/Keluhan/Table_26.vue
+++ b/src/components/Pages/Keluhan/Table_26.vue
@@ -4,174 +4,56 @@
   </Filters>
 
   <div id="data">
-    <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"
-    >
+    <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">
       <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"
-      />
-      <DxLoadPanel
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :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" />
+      <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"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <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="no_laporan"
-        caption="No Laporan"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="nama_pelapor"
-        caption="Nama Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="alamat_pelapor"
-        caption="Alamat Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="no_telp_pelapor"
-        caption="No Telp Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="120"
-        alignment="center"
-        data-field="status_akhir"
-        caption="Status"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
+      <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="no_laporan" caption="No Laporan"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
+        cell-template="data" />
 
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="waktu_lapor"
-        caption="Tgl Lapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
+      <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+        css-class="custom-table-column" cell-template="data" />
 
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="waktu_response"
-        caption="Tgl Response"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="waktu_recovery"
-        caption="Tgl Recovery"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="waktu_response"
-        caption="Response Time"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="durasi_recovery_time"
-        caption="Recovery Time"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="media"
-        caption="Sumber Lapor"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="150"
-        alignment="center"
-        data-field="waktu_media"
-        caption="Tgl Media"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="keterangan_media"
-        caption="Keterangan Media"
-        css-class="custom-table-column"
-        cell-template="data"
-      />
+      <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Response Time"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
+        cell-template="data" />
+      <DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
+        css-class="custom-table-column" cell-template="data" />
+      <DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
+        css-class="custom-table-column" cell-template="data" />
       <template #data="{ data }">
-        <span class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer" @click="showData()">
           {{ data.text }}
-        </span>
+        </p>
       </template>
     </DxDataGrid>
   </div>
@@ -195,22 +77,13 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataDetail?.alamat_pelapor"
-          class-name="flex-1 h-[56px]"
-        />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataDetail?.keterangan_pelapor"
-          class-name="flex-1 h-[56px]"
-        />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1 h-[56px]" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -255,12 +128,7 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataDetail?.keterangan_media"
-          class-name="flex-1 h-[56px]"
-        />
+        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_media" class-name="flex-1 h-[56px]" />
       </div>
     </div>
   </DetailDialog>
diff --git a/src/components/Pages/Keluhan/Table_28.vue b/src/components/Pages/Keluhan/Table_28.vue
index 2cf9d36..d4ac089 100755
--- a/src/components/Pages/Keluhan/Table_28.vue
+++ b/src/components/Pages/Keluhan/Table_28.vue
@@ -16,8 +16,8 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
-        cell-template="data" />
+      <DxColumn :width="170" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
+        cell-template="data" header-cell-template="title-header" />
       <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" cell-template="data" />
@@ -53,9 +53,9 @@
           css-class="custom-table-column" cell-template="data" />
       </DxColumn>
       <template #data="{ data }">
-        <span class="cursor-pointer" @click="showDialog()">
+        <p class="cursor-pointer" @click="showDialog()">
           {{ data.text }}
-        </span>
+        </p>
       </template>
     </DxDataGrid>
   </div>

From 7641595dda58e92633b7753391e3430cdf9e0aa9 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 28 Feb 2024 17:27:58 +0700
Subject: [PATCH 21/21] Fix closing tag in Table_1, Table_2, and Table_3
 components, and add title header in Table_28 component

---
 src/components/Pages/Gangguan/Table_1.vue | 2 +-
 src/components/Pages/Gangguan/Table_2.vue | 2 +-
 src/components/Pages/Gangguan/Table_3.vue | 2 +-
 src/components/Pages/Keluhan/Table_28.vue | 6 ++++++
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index eb3ee76..37ca612 100755
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -58,7 +58,7 @@
       <template #data="{ data }">
         <p class="cursor-pointer" @click="showData()">
           {{ data.text }}
-          </span>
+        </p>
       </template>
     </DxDataGrid>
   </div>
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
index b47e9bc..1cc4885 100755
--- a/src/components/Pages/Gangguan/Table_2.vue
+++ b/src/components/Pages/Gangguan/Table_2.vue
@@ -52,7 +52,7 @@
       <template #data="{ data }">
         <p class="cursor-pointer" @click="showData()">
           {{ data.text }}
-          </span>
+        </p>
       </template>
     </DxDataGrid>
   </div>
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index 5838ae6..c53f922 100755
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -52,7 +52,7 @@
       <template #data="{ data }">
         <p class="cursor-pointer" @click="showData()">
           {{ data.text }}
-          </span>
+        </p>
       </template>
     </DxDataGrid>
   </div>
diff --git a/src/components/Pages/Keluhan/Table_28.vue b/src/components/Pages/Keluhan/Table_28.vue
index d4ac089..1b0935e 100755
--- a/src/components/Pages/Keluhan/Table_28.vue
+++ b/src/components/Pages/Keluhan/Table_28.vue
@@ -57,6 +57,12 @@
           {{ data.text }}
         </p>
       </template>
+
+      <template #title-header="{ data }">
+        <p class="text-center">
+          {{ data.text }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>