Merge branch 'dev-defuj' of https://github.com/defuj/eis into development

.env.development

@@ -2,3 +2,5 @@ VITE_BASE_URL=http://localhost:5173
 VITE_BASE_DIRECTORY=/
 VITE_APP_VERSION=0.0.1
 VITE_APP_NAME='Executive Information System'
+VITE_APP_GRAPHQL_ENDPOINT=http://192.168.5.213:32169/graphql
+VITE_APP_REST_ENDPOINT=http://192.168.5.213:32180

.env.production

@@ -2,3 +2,5 @@ VITE_BASE_URL=https://api.domain.com/v1/
 VITE_BASE_DIRECTORY=/
 VITE_APP_VERSION=0.0.1
 VITE_APP_NAME='Executive Information System'
+VITE_APP_GRAPHQL_ENDPOINT=http://10.1.50.173:32180/graphql
+VITE_APP_REST_ENDPOINT=http://10.1.50.173:32181

Dockerfile

@@ -1,9 +1,9 @@
-# FROM node:lts-alpine as build-stage
+FROM node:lts-alpine as build-stage
-# WORKDIR /app
+WORKDIR /app
 # COPY package*.json ./
 # RUN npm install
-# COPY . .
+COPY . .
-# RUN npm run build
+RUN npm run build
 
 # FROM nginx:stable-alpine as production-stage
 # COPY --from=build-stage /app/dist /usr/share/nginx/html
@@ -16,3 +16,9 @@ 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
+# EXPOSE 32166
+# CMD ["nginx", "-g", "daemon off;"]

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.
+### Keluhan > Rekapitulasi
-
+| CODE    | MENU                | FILE         |
-## Recommended IDE Setup
+| ------- | ------------------- | ------------ |
-
+| MON0010 | Jumlah Kali Keluhan | Table_45.vue |
-[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
-```

src/assets/css/style.css

@@ -1145,10 +1145,6 @@ body {
   margin: 0.875rem;
 }
 
-.m-auto {
-  margin: auto;
-}
-
 .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
@@ -1257,6 +1253,10 @@ body {
   margin-top: -1px;
 }
 
+.mb-0 {
+  margin-bottom: 0px;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -1525,6 +1525,10 @@ body {
   height: 80vh;
 }
 
+.h-\[400px\] {
+  height: 400px;
+}
+
 .max-h-0 {
   max-height: 0px;
 }
@@ -2622,11 +2626,6 @@ body {
   background-color: rgb(255 204 204 / var(--tw-bg-opacity));
 }
 
-.bg-red-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 102 102 / var(--tw-bg-opacity));
-}
-
 .bg-red-300\/10 {
   background-color: rgb(255 102 102 / 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;
   }

src/components/DatePicker.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { PhCalendarBlank } from '@phosphor-icons/vue'
 import { ref, watch } from 'vue'
-
 import VueTailwindDatepicker from 'vue-tailwind-datepicker'
 
 const dateValue = ref('')
@@ -9,27 +8,27 @@ const formatter = ref({
   date: 'DD-MM-YYYY',
   month: 'MMMM'
 })
-
 const emit = defineEmits(['update:dateValue'])
+
 const customShortcuts = () => {
   return [
     {
-      label: "Last 15 Days",
+      label: 'Last 15 Days',
       atClick: () => {
-        const date = new Date();
+        const date = new Date()
-        return [new Date(date.setDate(date.getDate() + 1)), date];
+        return [new Date(date.setDate(date.getDate() + 1)), date]
-      },
+      }
     },
     {
-      label: "Last Years",
+      label: 'Last Years',
       atClick: () => {
-        const date = new Date();
+        const date = new Date()
-        return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()];
+        return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()]
-      },
+      }
-    },
+    }
+  ]
+}
 
-  ];
-};
 watch(dateValue, (newValue) => {
   emit('update:dateValue', newValue)
 })

src/components/Dialogs/DetailDialog.vue

@@ -15,6 +15,10 @@ defineProps({
         type: String,
         required: true,
     },
+    fullWidth: {
+        type: Boolean,
+        default: false,
+    },
 })
 const emit = defineEmits(['onClose'])
 const handleOnClose = () => {
@@ -38,7 +42,7 @@ const handleOnClose = () => {
                         leave-from="opacity-100 translate-y-0 sm:scale-100"
                         leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                         <DialogPanel
-                            :class="['sm:max-w-lg relative overflow-hidden text-left transition-all transform bg-gray-50 rounded-2xl sm:my-8 sm:w-full']">
+                            :class="[fullWidth ? 'sm:max-w-[90%]' : 'sm:max-w-lg', 'relative overflow-hidden text-left transition-all transform bg-gray-50 rounded-2xl sm:my-8 sm:w-full']">
                             <!-- Body Section -->
                             <div class="px-4 py-4 bg-gray-50">
                                 <div class="flex flex-col items-start">

src/components/Form/Filters.vue

@@ -1,11 +1,15 @@
-<!-- ss -->
 <script setup lang="ts">
-// components
 import Button from '@/components/Button.vue'
-// icons
 import { PhArrowsCounterClockwise, PhFileText, PhMagnifyingGlass } from '@phosphor-icons/vue'
 
-const emit = defineEmits(['runSearch','resetForm'])
+defineProps({
+  reportButton: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['runSearch', 'resetForm', 'runReport'])
 </script>
 
 <template>
@@ -26,9 +30,11 @@ const emit = defineEmits(['runSearch','resetForm'])
         </Button>
 
         <Button
+          v-if="reportButton"
           label="Lihat Laporan"
           style-type="outline"
           class-name="bg-white"
+          @on:click="() => emit('runReport')"
         >
           <PhFileText size="18" class="ml-1" weight="regular" />
         </Button>

src/components/Form/FiltersType/Type1.vue

@@ -11,6 +11,7 @@ import {
   fetchUid
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
+
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
@@ -39,6 +40,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
+  console.log(itemsPosko)
   posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
 }
@@ -57,28 +59,39 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Induk Distribusi/Wilayah:</label
+    >
 
     <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
 
-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3placeholder" />
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
+      :selected="up3"
+      :placeholder="up3placeholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
+    <Select
+      @update:selected="setPosko($event)"
+      :data="itemsPosko"
+      :selected="posko"
+      :placeholder="poskoPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
-    <DatePicker @update:date-value="(value) => {
+    <DatePicker @update:date-value="(value) => (data.periode = value)" />
-        data.periode = value
-      }
-      " />
   </div>
 </template>

src/components/Form/FiltersType/Type10.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
- 
+import { onMounted, ref } from 'vue'
-import { onMounted, ref, watch } from 'vue'
 import {
   selectedUid,
   selectedUp3Ulp,
@@ -10,49 +9,45 @@ import {
   itemsUp3,
   itemsUlp
 } from './reference'
-
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import InputNumber from '@/components/Form/InputNumber.vue'
 
-const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
-const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
-const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
-const up3 = ref({ id: 0, name: up3Placeholder });
+const up3 = ref({ id: 0, name: up3Placeholder })
-const uid = ref({ id: 0, name: uidPlaceholder });
+const uid = ref({ id: 0, name: uidPlaceholder })
-const ulp = ref({ id: "", name: ulpPlaceholder });
+const ulp = ref({ id: 0, name: ulpPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
   up3: up3.value,
-  posko: ulp.value,
+  ulp: ulp.value,
   periode: '',
   minJmlLapor: 1,
   maxJmlLapor: 1
 })
+
 const setUid = (value: any) => {
-  uid.value = value;
+  uid.value = value
-  selectedUid(value);
+  selectedUid(value)
-  up3.value = { id: 0, name: up3Placeholder };
+  up3.value = { id: 0, name: up3Placeholder }
-  data.value.uid = value;
+  data.value.uid = value
-};
+}
 
 const setUp3 = (value: any) => {
-  up3.value = value;
+  up3.value = value
-  selectedUp3Ulp(value);
+  selectedUp3Ulp(value)
-  ulp.value = { id: "", name: ulpPlaceholder };
+  ulp.value = { id: 0, name: ulpPlaceholder }
-  data.value.up3 = value;
+  data.value.up3 = value
-};
+}
 
 const setUlp = (value: any) => {
-  ulp.value = value;
+  ulp.value = value
-  selectedUlp(value);
+  selectedUlp(value)
-  data.value.posko = value;
+  data.value.ulp = value
-};
+}
-onMounted(() => {
-  emit('update:filters', data.value)
-  fetchUid()
-})
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -61,13 +56,11 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Induk Distribusi/Wilayah:</label
+    >
 
-    <Select
+    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
-      @update:selected="setUid($event)"
-      :data="itemsUid"
-      :placeholder="uidPlaceholder"
-    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -84,9 +77,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
-      >Unit Layanan Pelanggan:</label
-    >
 
     <Select
       @update:selected="setUlp($event)"
@@ -99,23 +90,16 @@ onMounted(() => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-     <DatePicker @update:date-value="(value) => {
+    <DatePicker @update:date-value="(value) => (data.periode = value)" />
-        data.periode = value
-      }
-      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
 
     <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-      <InputNumber @update:time-value="(value) => {
+      <InputNumber @update:time-value="(value) => (data.minJmlLapor = value)" />
-        data.minJmlLapor = value
-      }" />
       <small class="flex items-center">s/d</small>
-      <InputNumber  @update:time-value="(value) => {
+      <InputNumber @update:time-value="(value) => (data.maxJmlLapor = value)" />
-        data.maxJmlLapor = value
-      }" />
     </div>
   </div>
 </template>

src/components/Form/FiltersType/Type11.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-
+import { onMounted, ref } from 'vue'
-import { onMounted, ref, watch } from 'vue'
+import { useTotalDuration } from '@/stores/totalDuration'
-import { useTotalDuration } from '@/stores/totalDuration';
-
 import {
   selectedUid,
   selectedUp3Ulp,
@@ -12,16 +10,16 @@ import {
   itemsUp3,
   itemsUlp
 } from './reference'
-
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import InputWithSuffix from '@/components/Form/InputWithSuffix.vue'
-const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+
-const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
-const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
-const up3 = ref({ id: 0, name: up3Placeholder });
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
-const uid = ref({ id: 0, name: uidPlaceholder });
+const up3 = ref({ id: 0, name: up3Placeholder })
-const ulp = ref({ id: "", name: ulpPlaceholder });
+const uid = ref({ id: 0, name: uidPlaceholder })
+const ulp = ref({ id: 0, name: ulpPlaceholder })
 const emit = defineEmits(['update:filters'])
 
 const sla = [
@@ -33,63 +31,68 @@ const sla = [
     id: 2,
     name: 'Melebihi SLA (> 45 menit)'
   }
-];
+]
+
 const data = ref({
   uid: uid.value,
   up3: up3.value,
-  posko: ulp.value,
+  ulp: ulp.value,
   periode: '',
   minTime: 1,
   maxTime: 1
 })
+
 const setUid = (value: any) => {
-  uid.value = value;
+  uid.value = value
-  selectedUid(value);
+  selectedUid(value)
-  up3.value = { id: 0, name: up3Placeholder };
+  up3.value = { id: 0, name: up3Placeholder }
-  data.value.uid = value;
+  data.value.uid = value
-};
+}
 
 const setUp3 = (value: any) => {
-  up3.value = value;
+  up3.value = value
-  selectedUp3Ulp(value);
+  selectedUp3Ulp(value)
-  ulp.value = { id: "", name: ulpPlaceholder };
+  ulp.value = { id: 0, name: ulpPlaceholder }
-  data.value.up3 = value;
+  data.value.up3 = value
-};
+}
 
 const setUlp = (value: any) => {
-  ulp.value = value;
+  ulp.value = value
-  selectedUlp(value);
+  selectedUlp(value)
-  data.value.posko = value;
+  data.value.ulp = value
-};
+}
+
 const setMin = (value: any) => {
   console.log(value)
   data.value.minTime = value
   useTotalDuration().setDataMin(value)
-
 }
+
 const setMax = (value: any) => {
   data.value.maxTime = value
   useTotalDuration().setDataMax(value)
 }
+
 const triggerInput = ref(false)
 const changeDuration = (value: any) => {
   if (value.id === 0) {
-    setMin("1")
+    setMin('1')
-    setMax("5")
+    setMax('5')
     console.log('Durasi Menit')
     triggerInput.value = false
   } else if (value.id === 1) {
-    setMin("1")
+    setMin('1')
-    setMax("45")
+    setMax('45')
     console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
     triggerInput.value = true
   } else {
-    setMin("45")
+    setMin('45')
     setMax(99999 * 60 * 24)
     triggerInput.value = true
     console.log('Melebihi SLA (> 45 menit)')
   }
 }
+
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -98,30 +101,41 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Induk Distribusi/Wilayah:</label
+    >
 
     <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
 
-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
+      :selected="up3"
+      :placeholder="up3Placeholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
 
-    <Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
+    <Select
+      @update:selected="setUlp($event)"
+      :data="itemsUlp"
+      :placeholder="ulpPlaceholder"
+      :selected="ulp"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker @update:date-value="(value) => {
+    <DatePicker @update:date-value="(value) => (data.periode = value)" />
-      data.periode = value
-    }
-      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -136,5 +150,4 @@ onMounted(() => {
       </div>
     </div>
   </div>
-
 </template>

src/components/Form/FiltersType/Type12.vue

@@ -9,12 +9,12 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
 const uppp = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: "", name: ulpPlaceholder });
+const ulp = ref({ id: 0, name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
   up3: uppp.value,
-  posko: ulp.value,
+  ulp: ulp.value,
   periode: '',
   minDurasiResponseTime: 1,
   maxDurasiResponseTime: 1
@@ -29,14 +29,14 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: "", name: ulpPlaceholder };
+  ulp.value = { id: 0, name: ulpPlaceholder };
   data.value.up3 = value;
 };
 
 const setUlp = (value: any) => {
   ulp.value = value;
   selectedUlp(value);
-  data.value.posko = value;
+  data.value.ulp = value;
 };
 const triggerInput = ref(false)
 const sla = [

src/components/Form/FiltersType/Type13.vue

@@ -2,50 +2,41 @@
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
-import {
+import { selectedUid, selectedUp3Ulp, selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
-  selectedUid,
+import { onMounted, ref } from 'vue';
-  selectedUp3Ulp,
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
-  selectedUlp,
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
-  fetchUid,
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
-  itemsUid,
+const up3 = ref({ id: 0, name: up3Placeholder });
-  itemsUp3,
+const uid = ref({ id: 0, name: uidPlaceholder });
-  itemsUlp
+const ulp = ref({ id: 0, name: ulpPlaceholder });
-} from './reference'
-import { onMounted, ref } from 'vue'
-const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
-const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
-const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
-const uppp = ref({ id: 0, name: up3Placeholder })
-const uid = ref({ id: 0, name: uidPlaceholder })
-const up3 = ref({ id: 0, name: up3Placeholder })
-const ulp = ref({ id: '', name: ulpPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
-  up3: uppp.value,
+  up3: up3.value,
-  posko: ulp.value,
+  ulp: ulp.value,
   periode: '',
   group: 1
 })
 const setUid = (value: any) => {
-  uid.value = value
+  uid.value = value;
-  selectedUid(value)
+  selectedUid(value);
-  uppp.value = { id: 0, name: up3Placeholder }
+  up3.value = { id: 0, name: up3Placeholder };
-  data.value.uid = value
+  data.value.uid = value;
-}
+};
 
 const setUp3 = (value: any) => {
-  uppp.value = value
+  up3.value = value;
-  selectedUp3Ulp(value)
+  selectedUp3Ulp(value);
-  ulp.value = { id: '', name: ulpPlaceholder }
+  ulp.value = { id: 0, name: ulpPlaceholder };
-  data.value.up3 = value
+  data.value.up3 = value;
-}
+};
 
 const setUlp = (value: any) => {
-  ulp.value = value
+  ulp.value = value;
-  selectedUlp(value)
+  selectedUlp(value);
-  data.value.posko = value
+  data.value.ulp = value;
-}
+};
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -54,65 +45,38 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
-      >Unit Induk Distribusi/Wilayah:</label
-    >
 
     <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
 
-    <Select
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
-      @update:selected="setUp3($event)"
-      :data="itemsUp3"
-      :selected="up3"
-      :placeholder="up3Placeholder"
-    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
 
-    <Select
+    <Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
-      @update:selected="setUlp($event)"
-      :selected="ulp"
-      :data="itemsUlp"
-      :placeholder="ulpPlaceholder"
-    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker
+    <DatePicker @update:date-value="(value) => {
-      @update:date-value="
-        (value) => {
       data.periode = value
     }
-      "
+      " />
-    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Group By Kode Unit Distribusi:</label>
-      >Group By Kode Unit Distribusi:</label
-    >
 
-    <InlineRadioGroup
+    <InlineRadioGroup @update:group-value="(value) => {
-      @update:group-value="
-        (value) => {
       data.group = value
       console.log('data.group', value)
-        }
+    }" :radio-items="[{ id: 1, title: 'Tidak' }, { id: 2, title: 'Ya, Grupkan' }]" />
-      "
-      :radio-items="[
-        { id: 1, title: 'Tidak' },
-        { id: 2, title: 'Ya, Grupkan' }
-      ]"
-    />
   </div>
 </template>

src/components/Form/FiltersType/Type15.vue

@@ -8,12 +8,12 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
   const uppp = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: "", name: ulpPlaceholder });
+const ulp = ref({ id: 0, name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
   up3: uppp.value,
-  posko: ulp.value,
+  ulp: ulp.value,
   periode: '',
   group: 1
 })

src/components/Form/FiltersType/Type16.vue

@@ -13,6 +13,7 @@ import {
   itemsMedia
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
+
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
@@ -20,7 +21,7 @@ const mediaPlaceholder = 'Semua Media'
 const up3 = ref({ id: 0, name: up3Placeholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
 const posko = ref({ id: 0, name: poskoPlaceholder })
-const media = ref({ id: "", name: mediaPlaceholder })
+const media = ref({ id: '', name: mediaPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -53,10 +54,12 @@ const setPosko = (value: any) => {
   selectedPosko(value)
   data.value.posko = value
 }
+
 const setMedia = (value: any) => {
   media.value = value
   data.value.media = value
 }
+
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -116,12 +119,6 @@ onMounted(() => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker
+    <DatePicker @update:date-value="(value) => (data.periode = value)" />
-      @update:date-value="
-        (value) => {
-          data.periode = value
-        }
-      "
-    />
   </div>
 </template>

src/components/Form/FiltersType/Type18.vue

@@ -11,7 +11,7 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const poskoPlaceholder = 'Semua Posko';
 const up3 = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const posko = ref({ id: "", name: poskoPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder });
 const emit = defineEmits(['update:filters'])
 const jenisTransakasi = [
     { id: 1, value: 'Koreksi Transaksi Individual',label: 'Koreksi Transaksi Individual' },

src/components/Form/FiltersType/Type2.vue

@@ -46,7 +46,7 @@ const data = ref({
   regional: regional.value,
   uid: uid.value,
   up3: uppp.value,
-  posko: ulp.value,
+  ulp: ulp.value,
   periode: '',
   bulan: bulan.value,
   tahun: tahun.value
@@ -77,7 +77,7 @@ const setUp3 = (value: any) => {
 const setUlp = (value: any) => {
   ulp.value = value
   selectedUp3Ulp(value)
-  data.value.posko = value
+  data.value.ulp = value
 }
 const setMonth = (value: any) => {
   bulan.value = value
@@ -96,39 +96,31 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Regional:</label>
+    <label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Regional:</label>
 
-    <Select
+    <Select @update:selected="setRegional($event)" :data="itemsRegional" :placeholder="regionalPlaceholder" />
-      @update:selected="setRegional($event)"
-      :data="itemsRegional"
-      :placeholder="regionalPlaceholder"
-    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Unit Induk Distribusi/Wilayah:</label>
-      >Unit Induk Distribusi/Wilayah:</label
-    >
 
     <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Unit Pelaksanaan Pelayanan Pelanggan:</label>
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
 
     <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
+    <label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Unit Layanan Pelanggan:</label>
 
     <Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode</label>
+    <label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Periode</label>
 
     <div class="grid grid-cols-2 gap-x-2">
       <Select @update:selected="setMonth($event)" :data="months" :placeholder="bulanPlaceholder" />

src/components/Form/FiltersType/Type3.vue

@@ -11,6 +11,7 @@ import {
   itemsUlp
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
+
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
@@ -25,6 +26,7 @@ const data = ref({
   ulp: ulp.value,
   periode: ''
 })
+
 watch(data.value, (value) => {
   emit('update:filters', value)
 })
@@ -41,6 +43,7 @@ const setUp3 = (value: any) => {
   selectedUp3Ulp(value)
   ulp.value = { id: 0, name: ulpPlaceholder }
   data.value.up3 = value
+  console.log(itemsUlp)
 }
 
 const setUlp = (value: any) => {
@@ -48,6 +51,7 @@ const setUlp = (value: any) => {
   selectedUlp(value)
   data.value.ulp = value
 }
+
 onMounted(() => {
   fetchUid()
   emit('update:filters', data.value)
@@ -90,12 +94,6 @@ onMounted(() => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker
+    <DatePicker @update:date-value="(value) => (data.periode = value)" />
-      @update:date-value="
-        (value) => {
-          data.periode = value
-        }
-      "
-    />
   </div>
 </template>

src/components/Form/FiltersType/Type4.vue

@@ -8,12 +8,12 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
 const uppp = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: "", name: ulpPlaceholder });
+const ulp = ref({ id: 0, name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
   up3: uppp.value,
-  posko: ulp.value,
+  ulp: ulp.value,
   periode: '',
   jenisLaporan : ''
 })
@@ -27,14 +27,14 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: "", name: ulpPlaceholder };
+  ulp.value = { id: 0, name: ulpPlaceholder };
   data.value.up3 = value;
 };
 
 const setUlp = (value: any) => {
   ulp.value = value;
   selectedUlp(value);
-  data.value.posko = value;
+  data.value.ulp = value;
 };
 onMounted(() => {
   emit('update:filters', data.value)

src/components/Form/FiltersType/Type6.vue

@@ -2,15 +2,24 @@
 import InputNumber from '@/components/Form/InputNumber.vue'
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
+import {
-import { onMounted, ref } from 'vue';
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsPosko
+} from './reference'
+import { onMounted, ref } from 'vue'
+
 const emit = defineEmits(['update:filters'])
-const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
-const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
-const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
+const poskoPlaceholder = 'Semua Unit Layanan Pelanggan'
-const up3 = ref({ id: 0, name: up3Placeholder });
+const up3 = ref({ id: 0, name: up3Placeholder })
-const uid = ref({ id: 0, name: uidPlaceholder });
+const uid = ref({ id: 0, name: uidPlaceholder })
-const posko = ref({ id: 0, name: poskoPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder })
 const data = ref({
   uid: uid.value,
   up3: up3.value,
@@ -41,50 +50,63 @@ const setPosko = (value: any) => {
 }
 
 onMounted(() => {
-  emit('update:filters', data.value)
   fetchUid()
+  emit('update:filters', data.value)
 })
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Induk Distribusi/Wilayah:</label
+    >
 
     <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
 
-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
+      :selected="up3"
+      :placeholder="up3Placeholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
+    <Select
+      @update:selected="setPosko($event)"
+      :data="itemsPosko"
+      :selected="posko"
+      :placeholder="poskoPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker @update:date-value="(value) => {
+    <DatePicker @update:date-value="(value) => (data.periode = value)" />
-      data.periode = value
-    }" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
 
     <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-      <InputNumber :value="data.minJmlLapor" @update:time-value="(value) => {
+      <InputNumber
-        data.minJmlLapor = value
+        :value="data.minJmlLapor"
-      }" />
+        @update:time-value="(value) => (data.minJmlLapor = value)"
+      />
       <small class="flex items-center">s/d</small>
-      <InputNumber :value="data.maxJmlLapor" @update:time-value="(value) => {
+      <InputNumber
-        data.maxJmlLapor = value
+        :value="data.maxJmlLapor"
-      }" />
+        @update:time-value="(value) => (data.maxJmlLapor = value)"
+      />
     </div>
   </div>
 </template>
-

src/components/Form/FiltersType/Type7.vue

@@ -1,18 +1,26 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-import InputWithSuffix from '../InputWithSuffix.vue';
+import InputWithSuffix from '../InputWithSuffix.vue'
-import { useTotalDuration } from '@/stores/totalDuration';
+import { useTotalDuration } from '@/stores/totalDuration'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsPosko
+} from './reference'
+import { onMounted, ref, watch } from 'vue'
 
-import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
-import { onMounted, ref, watch } from 'vue';
 const emit = defineEmits(['update:filters'])
-const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
-const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
-const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
+const poskoPlaceholder = 'Semua Unit Layanan Pelanggan'
-const up3 = ref({ id: 0, name: up3Placeholder });
+const up3 = ref({ id: 0, name: up3Placeholder })
-const uid = ref({ id: 0, name: uidPlaceholder });
+const uid = ref({ id: 0, name: uidPlaceholder })
-const posko = ref({ id: 0, name: poskoPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder })
 const data = ref({
   uid: uid.value,
   up3: up3.value,
@@ -21,6 +29,7 @@ const data = ref({
   minTime: useTotalDuration().getDataMin().split(' ')[0],
   maxTime: useTotalDuration().getDataMax().split(' ')[0]
 })
+
 const setUid = (value: any) => {
   uid.value = value
   selectedUid(value)
@@ -49,14 +58,12 @@ const sla = [
     id: 2,
     name: 'Melebihi SLA (> 45 menit)'
   }
-
 ]
 
 const setMin = (value: any) => {
   console.log(value)
   data.value.minTime = value
   useTotalDuration().setDataMin(value)
-
 }
 const setMax = (value: any) => {
   data.value.maxTime = value
@@ -65,17 +72,17 @@ const setMax = (value: any) => {
 const triggerInput = ref(false)
 const changeDuration = (value: any) => {
   if (value.id === 0) {
-    setMin("1")
+    setMin('1')
-    setMax("5")
+    setMax('5')
     console.log('Durasi Menit')
     triggerInput.value = false
   } else if (value.id === 1) {
-    setMin("1")
+    setMin('1')
-    setMax("45")
+    setMax('45')
     console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
     triggerInput.value = true
   } else {
-    setMin("45")
+    setMin('45')
     setMax(99999 * 60 * 24)
     triggerInput.value = true
     console.log('Melebihi SLA (> 45 menit)')
@@ -84,38 +91,50 @@ const changeDuration = (value: any) => {
 watch(data, (newValue) => {
   emit('update:filters', newValue)
 })
+
 onMounted(() => {
-  emit('update:filters', data.value)
   fetchUid()
+  emit('update:filters', data.value)
 })
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Induk Distribusi/Wilayah:</label
+    >
 
     <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
 
-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
+      :selected="up3"
+      :placeholder="up3Placeholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
+    <Select
+      @update:selected="setPosko($event)"
+      :data="itemsPosko"
+      :selected="posko"
+      :placeholder="poskoPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker @update:date-value="(value) => {
+    <DatePicker @update:date-value="(value) => (data.periode = value)" />
-      data.periode = value
-    }
-      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -125,12 +144,9 @@ onMounted(() => {
       <Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
 
       <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-        <InputWithSuffix 
+        <InputWithSuffix :value="`${data.minTime} Menit`" />
-        :value="`${data.minTime} Menit`"
-         />
         <small class="flex items-center">s/d</small>
-        <InputWithSuffix 
+        <InputWithSuffix :value="`${data.maxTime} Menit`" />
-        :value="`${data.maxTime} Menit`"/>
       </div>
     </div>
   </div>

src/components/Form/FiltersType/Type8.vue

@@ -3,13 +3,7 @@ import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 
 import { onMounted, ref, watch } from 'vue'
-import {
+import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference'
-  selectedUid,
-  selectedUp3Posko,
-  fetchUid,
-  itemsUid,
-  itemsUp3,
-} from './reference'
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -38,8 +32,6 @@ const setUid = (value: any) => {
 
 const setUp3 = (value: any) => {
   uppp.value = value
-  selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
 }
 
@@ -47,26 +39,26 @@ onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
 })
-
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Induk Distribusi/Wilayah:</label
+    >
 
-    <Select
+    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
-      @update:selected="setUid($event)"
-      :data="itemsUid"
-      :placeholder="uidPlaceholder"
-    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
 
     <Select
       @update:selected="setUp3($event)"
       :data="itemsUp3"
+      :selected="uppp"
       :placeholder="uppPlaceholder"
     />
   </div>
@@ -74,9 +66,6 @@ onMounted(() => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker @update:date-value="(value) => {
+    <DatePicker @update:date-value="(value) => (data.periode = value)" />
-      data.periode = value
-    }
-      " />
   </div>
 </template>

src/components/Form/FiltersType/Type9.vue

@@ -25,7 +25,8 @@ const data = ref({
   uid: uid.value,
   up3: uppp.value,
   posko: posko.value,
-  periode: ''
+  periode: '',
+  groupBy: false
 })
 
 watch(data.value, (value) => {
@@ -53,20 +54,18 @@ const setPosko = (value: any) => {
 }
 
 onMounted(() => {
-  emit('update:filters', data.value)
   fetchUid()
+  emit('update:filters', data.value)
 })
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Induk Distribusi/Wilayah:</label
+    >
 
-    <Select
+    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
-      @update:selected="setUid($event)"
-      :data="itemsUid"
-      :placeholder="uidPlaceholder"
-    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -78,6 +77,7 @@ onMounted(() => {
       @update:selected="setUp3($event)"
       :data="itemsUp3"
       :placeholder="uppPlaceholder"
+      :selected="uppp"
     />
   </div>
 
@@ -88,21 +88,27 @@ onMounted(() => {
       @update:selected="setPosko($event)"
       :data="itemsPosko"
       :placeholder="poskoPlaceholder"
+      :selected="posko"
     />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-     <DatePicker @update:date-value="(value) => {
+    <DatePicker @update:date-value="(value) => (data.periode = value)" />
-        data.periode = value
-      }
-      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Group By Kode Unit Distribusi:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Group By Kode Unit Distribusi:</label
+    >
 
-    <InlineRadioGroup :radio-items="[{id: 1, title: 'Tidak', checked: true}, {id: 2, title: 'Ya, Grupkan'}]" />
+    <InlineRadioGroup
+      @update:group-value="(value) => (data.groupBy = value.id === 2)"
+      :radio-items="[
+        { id: 1, title: 'Tidak', checked: true },
+        { id: 2, title: 'Ya, Grupkan' }
+      ]"
+    />
   </div>
 </template>

src/components/Form/FiltersType/reference.ts

@@ -105,7 +105,7 @@ const fetchDataUlp = async (up3: number) => {
       const res = await getUlp(up3)
       itemsUlp.value = res.data.map((item: any) => ({
         id: item.id,
-        name: item.name
+        name: item.nama
       }))
     } catch (error) {
       console.error('Error fetching data:', error)

src/components/Form/InlineRadioGroup.vue

@@ -3,13 +3,19 @@
     <fieldset>
       <div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
         <div v-for="item in radioItems" :key="item.id" class="flex items-center">
-          <input v-model="groupValue" 
+          <input
-            type="radio" name="radio"
+            v-model="groupValue"
+            type="radio"
+            name="radio"
             :checked="itemSelected.id === item.id ? true : false"
             @change="onChange(item)"
-            class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500" />
+            class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500"
-          <label :for="`${item.id}`" class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500">{{
+          />
-            item.title }}</label>
+          <label
+            :for="`${item.id}`"
+            class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500"
+            >{{ item.title }}</label
+          >
         </div>
       </div>
     </fieldset>
@@ -17,16 +23,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, type PropType, onMounted } from 'vue'
+import { ref, type PropType, onMounted } from 'vue'
 
 interface Item {
-  id: number;
+  id: number
-  title: string;
+  title: string
-  checked?: boolean;
+  checked?: boolean
 }
 
 const onChange = (e: Item) => {
   itemSelected.value = e
+  console.log(e)
   emit('update:groupValue', e)
 }
 
@@ -44,5 +51,4 @@ const groupValue = ref(1)
 onMounted(() => {
   itemSelected.value = props.radioItems[0]
 })
-
 </script>

src/components/Form/InputNumber.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
-const props = defineProps({
+defineProps({
   placeholder: {
     type: String,
     default: ''
@@ -16,15 +16,16 @@ const props = defineProps({
   },
   value: {
     type: Number,
-    default: ''
+    default: 1
   }
 })
+
 const emit = defineEmits(['update:timeValue'])
 const timeValue = ref(1)
+
 watch(timeValue, (newValue) => {
   emit('update:timeValue', newValue)
 })
-
 </script>
 
 <template>
@@ -38,8 +39,8 @@ watch(timeValue, (newValue) => {
       :readonly="readonly"
       inputmode="numeric"
       pattern="[0-9.]*"
-      oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
+      onblur="this.value = parseInt(this.value) ? this.value : 1"
-      onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
+      oninput="this.value = parseInt(this.value) ? this.value.replace(/[^0-9.]/g, '') : 1"
       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"
     />
   </div>

src/components/Form/InputWithSuffix.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-
 const props = defineProps({
   placeholder: {
     type: String,
@@ -18,23 +16,23 @@ const props = defineProps({
     type: String,
     default: '1 Menit'
   }
- 
 })
+
 const handleInput = (e: any) => {
-  e.value = e.value.replace(/[^0-9.]/g, '')
+  e.target.value = e.target.value.replace(/[^0-9.]/g, '')
 }
+
 const handleBlur = (e: any) => {
-  e.value = e.value ? e.value + ' Menit' : ''
+  e.target.value = e.target.value ? e.target.value + ' Menit' : ''
 }
+
 const handleFocus = (e: any) => {
-  e.value = e.value.replace(/[^0-9.]/g, '')
+  e.target.value = e.target.value.replace(/[^0-9.]/g, '')
 }
 </script>
 
 <template>
-  <div 
+  <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
- 
-  class="relative w-full overflow-hidden rounded-lg bg-gray-200">
     <input
       :value="props.value"
       autocomplete="off"
@@ -44,9 +42,9 @@ const handleFocus = (e:any) => {
       inputmode="numeric"
       pattern="[0-9.]*"
       :disabled="disabled"
-      @oninput="handleInput($event)"
+      @input="handleInput($event)"
-      @onblur="handleBlur($event)"
+      @blur="handleBlur($event)"
-      @onfocus="handleFocus($event)"
+      @focus="handleFocus($event)"
       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"
     />
   </div>

src/components/InputText.vue

@@ -4,34 +4,34 @@ import { ref } from 'vue'
 const props = defineProps({
   type: {
     type: String,
-        default: "text",
+    default: 'text'
   },
   placeholder: {
     type: String,
-        default: "",
+    default: ''
   },
   value: {
     type: String,
-        default: "",
+    default: ''
   },
   disabled: {
     type: Boolean,
-        default: false,
+    default: false
   },
   readonly: {
     type: Boolean,
-        default: false,
+    default: false
   },
   className: {
     type: String,
-        default: "",
+    default: ''
   }
 })
 
 const emit = defineEmits(['update:value'])
 
 const updateValue = (event: Event) => {
-    const value = (event.target as HTMLInputElement).value;
+  const value = (event.target as HTMLInputElement).value
   emit('update:value', value)
 }
 
@@ -39,14 +39,14 @@ const inputType = ref(props.type)
 const switchInputType = () => {
   inputType.value = inputType.value == 'password' ? 'text' : 'password'
 }
-
 </script>
 
 <template>
-    <div :class="['relative w-full overflow-hidden rounded-lg bg-gray-50 ', className]">
+  <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"
+      :disabled="disabled" :readonly="readonly" :class="[
-            :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']" />
+        '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"

src/components/Pages/Anomali/Table_61.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type4 @update:filters="(value) => {
+        <Type4 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div class="mt-4 lg:mt-6 max-w-7xl">
         <h1 class="text-xl font-medium md:text-2xl text-dark">
@@ -107,8 +104,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'

src/components/Pages/Anomali/Table_63.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type4 @update:filters="(value) => {
+        <Type4 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div class="mt-4 lg:mt-6 max-w-7xl">
         <h1 class="text-xl font-medium md:text-2xl text-dark">
@@ -80,7 +77,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'

src/components/Pages/Anomali/Table_65.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type4 @update:filters="(value) => {
+        <Type4 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div class="mt-4 lg:mt-6 max-w-7xl">
         <h1 class="text-xl font-medium md:text-2xl text-dark">
@@ -85,8 +82,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'

src/components/Pages/Anomali/Table_66.vue

@@ -35,8 +35,6 @@
 </template>
 
 <script setup lang="ts">
-import Filters from '@/components/Form/Filters.vue'
-
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'

src/components/Pages/Cico/Table_60.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type1 @update:filters="(value) => {
+        <Type1 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@@ -19,7 +16,8 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="user_regu" caption="User Regu" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="user_regu" caption="User Regu"
+                css-class="custom-table-column" />
             <DxColumn :width="200" alignment="center" data-field="personil_yantek" caption="Personil Yantek"
                 css-class="custom-table-column" />
             <DxColumn :width="200" alignment="center" data-field="jumlah_wo_gangguan_individual" data-type="number"
@@ -27,12 +25,11 @@
             <DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_gangguan_individual" data-type="number"
                 caption="Rata-rata Durasi WO Gangguan" css-class="custom-table-column" />
             <DxColumn :width="200" alignment="center" data-field="avg_rpt_wo_gangguan_individual" data-type="number"
-            caption="Rata-rata RPT WO Gangguan"
+                caption="Rata-rata RPT WO Gangguan" css-class="custom-table-column" />
-                css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="avg_rct_wo_gangguan_individual" data-type="number"
-            <DxColumn :width="200" alignment="center" data-field="avg_rct_wo_gangguan_individual" data-type="number" caption="Rata-rata RCT WO Gangguan"
+                caption="Rata-rata RCT WO Gangguan" css-class="custom-table-column" />
-                css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="jumlah_wo_penugasan_khusus" data-type="number"
-            <DxColumn :width="200" alignment="center" data-field="jumlah_wo_penugasan_khusus" data-type="number" caption="Jumlah Wo Penugasan Khusus"
+                caption="Jumlah Wo Penugasan Khusus" css-class="custom-table-column" />
-                css-class="custom-table-column" />
             <DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_penugasan_khusus" data-type="number"
                 caption="Rata-rata Durasi WO Penugasan" css-class="custom-table-column" />
 
@@ -42,8 +39,7 @@
 
 <script setup lang="ts">
 
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'

src/components/Pages/Ctt/Table_67.vue

@@ -1,142 +1,58 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type3
+    <Type3 @update:filters="(value) => filters = value" />
-      @update:filters="
-        (value) => {
-          filters = value
-        }
-      "
-    />
   </Filters>
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      class="max-h-[calc(100vh-140px)]"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      :show-column-lines="true"
+      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-      :show-row-lines="false"
+      :word-wrap-enabled="true">
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        :position="position"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
+      <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
-        :width="170"
+        css-class="custom-table-column" />
-        alignment="center"
-        data-field="nama_posko"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-      />
       <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
         <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="total_wo_cc123" data-type="number" caption="a"
-            :width="150"
+            css-class="custom-table-column" />
-            alignment="center"
-            data-field="total_wo_cc123"
-            data-type="number"
-            caption="a"
-            css-class="custom-table-column"
-          />
         </DxColumn>
         <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="total_wo_pln_mobile" data-type="number" caption="b"
-            :width="150"
+            css-class="custom-table-column" />
-            alignment="center"
-            data-field="total_wo_pln_mobile"
-            data-type="number"
-            caption="b"
-            css-class="custom-table-column"
-          />
         </DxColumn>
         <DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="total_wo_comcen" data-type="number" caption="c"
-            :width="150"
+            css-class="custom-table-column" />
-            alignment="center"
-            data-field="total_wo_comcen"
-            data-type="number"
-            caption="c"
-            css-class="custom-table-column"
-          />
         </DxColumn>
         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="d=b+c"
-            :width="150"
+            css-class="custom-table-column" />
-            alignment="center"
-            data-field="total_wo"
-            data-type="number"
-            caption="d=b+c"
-            css-class="custom-table-column"
-          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Rekomendasi sistem" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Mendatangkan Petugas" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="rekomendasi_sistem_mendatangkan_petugas"
-            :width="150"
+            data-type="number" caption="e" css-class="custom-table-column" />
-            alignment="center"
-            data-field="rekomendasi_sistem_mendatangkan_petugas"
-            data-type="number"
-            caption="e"
-            css-class="custom-table-column"
-          />
         </DxColumn>
-        <DxColumn
+        <DxColumn alignment="center" caption="Diberikan ke Pelanggan" css-class="custom-table-column">
-          alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="total_wo_loket" data-type="number" caption="f"
-          caption="Diberikan ke Pelanggan"
+            css-class="custom-table-column" />
-          css-class="custom-table-column"
-        >
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_wo_loket"
-            data-type="number"
-            caption="f"
-            css-class="custom-table-column"
-          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="DLPD" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="dlpd" data-type="number" caption="g"
-          :width="150"
+          css-class="custom-table-column" />
-          alignment="center"
-          data-field="dlpd"
-          data-type="number"
-          caption="g"
-          css-class="custom-table-column"
-        />
       </DxColumn>
       <DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="history_p2ti" data-type="number" caption="h"
-          :width="150"
+          css-class="custom-table-column" />
-          alignment="center"
-          data-field="history_p2ti"
-          data-type="number"
-          caption="h"
-          css-class="custom-table-column"
-        />
       </DxColumn>
     </DxDataGrid>
   </div>
@@ -172,6 +88,7 @@ const showPane = ref(true)
 const dataDetail = ref<any>()
 const data = ref<any[]>([])
 const showDetail = ref(false)
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()

src/components/Pages/Gangguan/Table_1.vue

@@ -1,11 +1,6 @@
 <template>
-  <Filters @run-search="() => {
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    filterData(filters)
+    <Type1 @update:filters="(value) => (filters = value)" />
-  }" class="mb-4">
-    <Type1 @update:filters="(value) => {
-      filters = value
-    }
-      " />
   </Filters>
 
   <div id="dataTable">
@@ -71,132 +66,95 @@
   <DetailDialog :open="showDetail" title="Daftar Gangguan Dialihkan ke Posko Lain" @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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
-          No Laporan:
-        </h3>
         <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
-          Pembuat Laporan:
-        </h3>
         <InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Laporan:</h3>
-          Tanggal Laporan:
-        </h3>
         <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Dialihkan:</h3>
-          Tanggal Dialihkan:
-        </h3>
         <InputText :readonly="true" :value="dataDetail?.waktu_dialihkan" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Respon:</h3>
-          Tanggal Respon:
-        </h3>
         <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
-          Tanggal Recovery:
-        </h3>
         <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Response Time:</h3>
-          Durasi Response Time:
-        </h3>
         <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Recovery Time:</h3>
-          Durasi Recovery Time:
-        </h3>
         <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Awal:</h3>
-          Posko Awal:
-        </h3>
         <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Tujuan:</h3>
-          Posko Tujuan:
-        </h3>
         <InputText :readonly="true" :value="dataDetail?.nama_posko_baru" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
-          Status:
-        </h3>
         <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
-          IDPEL/NO METER:
-        </h3>
         <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
-          Nama Pelapor:
-        </h3>
         <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-          Alamat Pelapor:
-        </h3>
         <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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
-          Pembuat Laporan:
-        </h3>
         <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-          Keterangan Pelapor:
-        </h3>
         <InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Laporan:</h3>
-          Sumber Laporan:
-        </h3>
         <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko:</h3>
-          Posko:
-        </h3>
         <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
       </div>
     </div>
-
   </DetailDialog>
 </template>
 
@@ -210,66 +168,96 @@ import {
   DxLoadPanel,
   DxPager,
   DxPaging,
-  DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
 import { jsPDF } from 'jspdf'
 import autoTable from 'jspdf-autotable'
-
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { useDialogStore } from '@/stores/dialog'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+
 const position = { of: '#dataTable' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dialog = useDialogStore()
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const runReset = ref(false)
 const closeDetail = () => {
   showDetail.value = false
 }
-const onExporting = (e: any) => {
 
+const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF({
       orientation: 'landscape',
       unit: 'mm',
-      format: 'F4',
+      format: 'F4'
     })
-    // Add title on each page
-    const title = "Daftar Gangguan Dialihkan Ke Posko Lain";
 
     // Initialize page number
-    const pageNumber = ref(1);
+    const pageNumber = ref(1)
     autoTable(doc, {
-      head: [['No Laporan', 'Pembuat Laporan', 'Tgl Lapor', 'Tgl Dialihkan', 'Tgl Response', 'Tgl Recovery', 'Durasi Response Time', 'Durasi Recovery Time', 'Posko Awal', 'Posko Tujuan', 'Status', 'IDPEL/NO METER', 'Nama Pelapor', 'Alamat Pelapor', 'No Telp Pelapor', 'Keterangan Pelapor', 'Sumber Lapor', 'Posko']],
+      head: [
+        [
+          'No Laporan',
+          'Pembuat Laporan',
+          'Tgl Lapor',
+          'Tgl Dialihkan',
+          'Tgl Response',
+          'Tgl Recovery',
+          'Durasi Response Time',
+          'Durasi Recovery Time',
+          'Posko Awal',
+          'Posko Tujuan',
+          'Status',
+          'IDPEL/NO METER',
+          'Nama Pelapor',
+          'Alamat Pelapor',
+          'No Telp Pelapor',
+          'Keterangan Pelapor',
+          'Sumber Lapor',
+          'Posko'
+        ]
+      ],
       startY: 10,
-      body: data.value.map((item) =>
+      body: data.value.map((item) => [
-        [item.no_laporan, item.pembuat_laporan, item.waktu_lapor, item.waktu_dialihkan, item.waktu_response, item.waktu_recovery, item.durasi_response_time, item.durasi_recovery_time, item.nama_posko_lama, item.nama_posko_baru, item.status_akhir, item.idpel_nometer, item.nama_pelapor, item.alamat_pelapor, item.no_telp_pelapor, item.keterangan_pelapor, item.media, item.posko]),
+        item.no_laporan,
+        item.pembuat_laporan,
+        item.waktu_lapor,
+        item.waktu_dialihkan,
+        item.waktu_response,
+        item.waktu_recovery,
+        item.durasi_response_time,
+        item.durasi_recovery_time,
+        item.nama_posko_lama,
+        item.nama_posko_baru,
+        item.status_akhir,
+        item.idpel_nometer,
+        item.nama_pelapor,
+        item.alamat_pelapor,
+        item.no_telp_pelapor,
+        item.keterangan_pelapor,
+        item.media,
+        item.posko
+      ]),
       styles: {
         fontSize: 6,
         cellWidth: 'wrap'
-      },
+      }
-
-
     })
     doc.setProperties({
       title: 'Daftar Gangguan Dialihkan Ke Posko Lain',
-      subject: 'Daftar Gangguan Dialihkan Ke Posko Lain',
+      subject: 'Daftar Gangguan Dialihkan Ke Posko Lain'
-    });
+    })
 
-    pageNumber.value++; // Increment the pageNumber
+    pageNumber.value++ // Increment the pageNumber
     doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
 
     // exportToPdf({
@@ -289,7 +277,10 @@ const onExporting = (e: any) => {
       autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DaftarGangguanDialihkanKePoskoLain.xlsx')
+        saveAs(
+          new Blob([buffer], { type: 'application/octet-stream' }),
+          'DaftarGangguanDialihkanKePoskoLain.xlsx'
+        )
       })
     })
 
@@ -332,8 +323,12 @@ const filterData = (params: any) => {
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
   refetch({
-    dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-    dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0

src/components/Pages/Gangguan/Table_10.vue

@@ -1,80 +1,224 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters
-        <Type1 @update:filters="(value) => {
+    @reset-form="data = []"
-            filters = value
+    :report-button="true"
-        }
+    @run-search="() => filterData(filters)"
-            " />
+    class="mb-4"
+  >
+    <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="data"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+      <DxLoadPanel
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+        :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"
+      <DxColumn
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        css-class="custom-table-column"
-            <DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
+        :width="50"
-            <DxColumn :width="150" alignment="center" data-field="sub_kelompok" caption="Sub Kelompok (Equipment)"
+        alignment="center"
-                css-class="custom-table-column" />
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="kode"
+        caption="Kode"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="sub_kelompok"
+        caption="Sub Kelompok (Equipment)"
+        css-class="custom-table-column"
+      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
+        <DxColumn
-                    css-class="custom-table-column" />
+          :width="120"
+          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="120" alignment="center" data-field="selesai" data-type="number" caption="Jml"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field="selesai"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            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="120" alignment="center" data-field="in_process" data-type="number" caption="Jml"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field="in_process"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="persen_in_process"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
+          <DxColumn
-                        caption="Total" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="avg_waktu_response_time" data-type="number"
+            alignment="center"
-                        caption="Rata-Rata" css-class="custom-table-column" />
+            data-field="total_durasi_response"
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
+            data-type="number"
-                        caption="Max" css-class="custom-table-column" />
+            caption="Total"
-                    <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
+            css-class="custom-table-column"
-                        caption="Min" css-class="custom-table-column" />
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="avg_waktu_response_time"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="max_durasi_response"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            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="120" alignment="center" data-field="di_atas_sla_durasi_response" data-type="number"
+          <DxColumn
-                        caption=">SLA" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="dibawah_sla_durasi_response" data-type="number"
+            alignment="center"
-                        caption="≤SLA" css-class="custom-table-column" />
+            data-field="di_atas_sla_durasi_response"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="dibawah_sla_durasi_response"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
+          <DxColumn
-                        caption="Total" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="avg_waktu_recovery_time" data-type="number"
+            alignment="center"
-                        caption="Rata-Rata" css-class="custom-table-column" />
+            data-field="total_durasi_recovery"
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number"
+            data-type="number"
-                        caption="Max" css-class="custom-table-column" />
+            caption="Total"
-                    <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
+            css-class="custom-table-column"
-                        caption="Min" css-class="custom-table-column" />
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="avg_waktu_recovery_time"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="max_durasi_recovery"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            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="120" alignment="center" data-field="diatas_sla_durasi_recovery" data-type="number"
+          <DxColumn
-                        caption=">SLA" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="dibawah_sla_durasi_recovery" data-type="number"
+            alignment="center"
-                        caption="≤SLA" css-class="custom-table-column" />
+            data-field="diatas_sla_durasi_recovery"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="dibawah_sla_durasi_recovery"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
     </DxDataGrid>
@@ -84,7 +228,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
 
 import { DxDataGrid } from 'devextreme-vue'
 import {
@@ -146,6 +290,7 @@ const GET_REKAP_JENIS_GANGGUAN_SE004 = gql`
     }
   }
 `
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -174,6 +319,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
+
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN_SE004, {
   dateFrom: new Date().toISOString().slice(0, 10),
   dateTo: new Date().toISOString().slice(0, 10),
@@ -181,20 +327,24 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUA
   idUid: 0,
   idUp3: 0
 })
+
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-
+      data.value = queryResult.data.rekapitulasiJenisGangguanSE004
-            data.value = queryResult.data.rekapitulasiJenisGangguanSE004;
       console.log(queryResult.loading)
       console.log(queryResult.networkStatus)
     }
@@ -209,6 +359,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(data)
 }
 
-const filters = ref();
+const filters = ref()
-
 </script>

src/components/Pages/Gangguan/Table_11.vue

@@ -1,155 +1,443 @@
 <!-- Rekapitulasi Gangguan Per Posko -->
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters
-        <Type8 @update:filters="(value) => {
+    :report-button="true"
-            filters = value
+    @reset-form="data = []"
-        }
+    @run-search="() => filterData(filters)"
-            " />
+    class="mb-4"
+  >
+    <Type8 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="data"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+      <DxLoadPanel
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+        :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 :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
+      <DxColumn
-            <DxColumn :width="150" name="poskoGroup" alignment="center" data-field="nama_posko" caption="Posko"
+        :width="60"
-                css-class="custom-table-column" :group-index="0" />
+        alignment="center"
-            <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko" css-class="custom-table-column" />
+        data-field="no"
+        caption="NO"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        name="poskoGroup"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+        css-class="custom-table-column"
+        :group-index="0"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+        css-class="custom-table-column"
+      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
+        <DxColumn
-                    css-class="custom-table-column" />
+          :width="120"
+          alignment="center"
+          data-field="laporan.total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
+          <DxColumn
-                        caption="Jml" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
+            alignment="center"
-                        caption="%" css-class="custom-table-column" />
+            data-field="laporan.sudahSelesai.jml"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.sudahSelesai.persen"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
+          <DxColumn
-                        caption="Jml" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
+            alignment="center"
-                        caption="%" css-class="custom-table-column" />
+            data-field="laporan.belumSelesai.jml"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.belumSelesai.persen"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
+          <DxColumn
-                        caption="Total" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
+            alignment="center"
-                        caption="Rata-Rata" css-class="custom-table-column" />
+            data-field="responseTime.menit.total"
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number"
+            data-type="number"
-                        caption="Max" css-class="custom-table-column" />
+            caption="Total"
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number"
+            css-class="custom-table-column"
-                        caption="Min" css-class="custom-table-column" />
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.rataRata"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.max"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.min"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
+          <DxColumn
-                        caption=">SLA" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
+            alignment="center"
-                        caption="≤SLA" css-class="custom-table-column" />
+            data-field="responseTime.laporan.lebihSla"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.laporan.kurangSla"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
+          <DxColumn
-                        caption="Total" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
+            alignment="center"
-                        caption="Rata-Rata" css-class="custom-table-column" />
+            data-field="recoveryTime.menit.total"
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number"
+            data-type="number"
-                        caption="Max" css-class="custom-table-column" />
+            caption="Total"
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number"
+            css-class="custom-table-column"
-                        caption="Min" css-class="custom-table-column" />
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.rataRata"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.max"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.min"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
+          <DxColumn
-                        caption=">SLA" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
+            alignment="center"
-                        caption="≤SLA" css-class="custom-table-column" />
+            data-field="recoveryTime.laporan.lebihSla"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.laporan.kurangSla"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
 
       <DxSummary>
         <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
-                <DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}" />
+        <DxGroupItem
-                <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
+          :show-in-group-footer="true"
-                    display-format="{0}" />
+          column="laporan.total"
-                <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
+          summary-type="sum"
-                    display-format="{0}" />
+          display-format="{0}"
-                <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
+        />
-                    display-format="{0}" />
+        <DxGroupItem
-                <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
+          :show-in-group-footer="true"
-                    display-format="{0}" />
+          column="laporan.sudahSelesai.jml"
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
+          summary-type="sum"
-                    display-format="{0}" />
+          display-format="{0}"
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
+        />
-                    display-format="{0}" />
+        <DxGroupItem
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
+          :show-in-group-footer="true"
-                    display-format="{0}" />
+          column="laporan.sudahSelesai.persen"
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
+          summary-type="sum"
-                    display-format="{0}" />
+          display-format="{0}"
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
+        />
-                    display-format="{0}" />
+        <DxGroupItem
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
+          :show-in-group-footer="true"
-                    display-format="{0}" />
+          column="laporan.belumSelesai.jml"
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
+          summary-type="sum"
-                    display-format="{0}" />
+          display-format="{0}"
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
+        />
-                    display-format="{0}" />
+        <DxGroupItem
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
+          :show-in-group-footer="true"
-                    display-format="{0}" />
+          column="laporan.belumSelesai.persen"
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
+          summary-type="sum"
-                    display-format="{0}" />
+          display-format="{0}"
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
+        />
-                    display-format="{0}" />
+        <DxGroupItem
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
+          :show-in-group-footer="true"
-                    display-format="{0}" />
+          column="responseTime.menit.total"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.rataRata"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.max"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.min"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.laporan.lebihSla"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.laporan.kurangSla"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.total"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.rataRata"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.max"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.min"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.laporan.lebihSla"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.laporan.kurangSla"
+          summary-type="sum"
+          display-format="{0}"
+        />
 
-                <DxTotalItem summary-type="sum" display-format="Total" show-in-column="no" css-class="text-white" />
+        <DxTotalItem
-                <DxTotalItem summary-type="sum" display-format="{0}" show-in-column="laporan.total" column="laporan.total"
+          summary-type="sum"
-                    css-class="text-white" />
+          display-format="Total"
-                <DxTotalItem column="laporan.sudahSelesai.jml" summary-type="sum" display-format="{0}"
+          show-in-column="no"
-                    css-class="text-white" />
+          css-class="text-white"
-                <DxTotalItem column="laporan.sudahSelesai.persen" summary-type="sum" display-format="{0}"
+        />
-                    css-class="text-white" />
+        <DxTotalItem
-                <DxTotalItem column="laporan.belumSelesai.jml" summary-type="sum" display-format="{0}"
+          summary-type="sum"
-                    css-class="text-white" />
+          display-format="{0}"
-                <DxTotalItem column="laporan.belumSelesai.persen" summary-type="sum" display-format="{0}"
+          show-in-column="laporan.total"
-                    css-class="text-white" />
+          column="laporan.total"
-                <DxTotalItem column="responseTime.menit.total" summary-type="sum" display-format="{0}"
+          css-class="text-white"
-                    css-class="text-white" />
+        />
-                <DxTotalItem column="responseTime.menit.rataRata" summary-type="sum" display-format="{0}"
+        <DxTotalItem
-                    css-class="text-white" />
+          column="laporan.sudahSelesai.jml"
-                <DxTotalItem column="responseTime.menit.max" summary-type="sum" display-format="{0}"
+          summary-type="sum"
-                    css-class="text-white" />
+          display-format="{0}"
-                <DxTotalItem column="responseTime.menit.min" summary-type="sum" display-format="{0}"
+          css-class="text-white"
-                    css-class="text-white" />
+        />
-                <DxTotalItem column="responseTime.laporan.lebihSla" summary-type="sum" display-format="{0}"
+        <DxTotalItem
-                    css-class="text-white" />
+          column="laporan.sudahSelesai.persen"
-                <DxTotalItem column="responseTime.laporan.kurangSla" summary-type="sum" display-format="{0}"
+          summary-type="sum"
-                    css-class="text-white" />
+          display-format="{0}"
-                <DxTotalItem column="recoveryTime.menit.total" summary-type="sum" display-format="{0}"
+          css-class="text-white"
-                    css-class="text-white" />
+        />
-                <DxTotalItem column="recoveryTime.menit.rataRata" summary-type="sum" display-format="{0}"
+        <DxTotalItem
-                    css-class="text-white" />
+          column="laporan.belumSelesai.jml"
-                <DxTotalItem column="recoveryTime.menit.max" summary-type="sum" display-format="{0}"
+          summary-type="sum"
-                    css-class="text-white" />
+          display-format="{0}"
-                <DxTotalItem column="recoveryTime.menit.min" summary-type="sum" display-format="{0}"
+          css-class="text-white"
-                    css-class="text-white" />
+        />
-                <DxTotalItem column="recoveryTime.laporan.lebihSla" summary-type="sum" display-format="{0}"
+        <DxTotalItem
-                    css-class="text-white" />
+          column="laporan.belumSelesai.persen"
-                <DxTotalItem column="recoveryTime.laporan.kurangSla" summary-type="sum" display-format="{0}"
+          summary-type="sum"
-                    css-class="text-white" />
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.menit.total"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.menit.rataRata"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.menit.max"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.menit.min"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.laporan.lebihSla"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.laporan.kurangSla"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.total"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.rataRata"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.max"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.min"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.laporan.lebihSla"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.laporan.kurangSla"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
       </DxSummary>
-
     </DxDataGrid>
   </div>
 </template>
@@ -157,20 +445,33 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type8 from '@/components/Form/FiltersType/Type8.vue'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary, DxTotalItem } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxGroupItem,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection,
+  DxSummary,
+  DxTotalItem
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import gql from 'graphql-tag';
+import gql from 'graphql-tag'
 import { useQuery } from '@vue/apollo-composable'
-const position = { of: '#data' };
+
-const showIndicator = ref(true);
+const position = { of: '#data' }
-const shading = ref(true);
+const showIndicator = ref(true)
-const showPane = ref(true);
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
 const GET_REKAPITULASI_GANGGUAN_PER_POSKO = gql`
   query rekapitulasiGangguanPerPosko(
@@ -205,7 +506,8 @@ query rekapitulasiGangguanPerPosko(
       total_inproses
       total_selesai
     }
-}`;
+  }
+`
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -214,7 +516,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-            indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -225,7 +527,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -242,26 +544,30 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
-    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: 0,
   idUid: 0,
-    idUp3: 0,
+  idUp3: 0
 })
+
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0,
+    idUp3: up3 ? up3.id : 0
   })
-    onResult(queryResult => {
+  onResult((queryResult) => {
     if (queryResult.data != undefined) {
-
+      var i = 1
-            var i = 1;
       queryResult.data.rekapitulasiGangguanPerPosko.forEach((item: any) => {
         const entry = {
           no: Number(i++),
@@ -270,46 +576,42 @@ const filterData = (params: any) => {
             total: item.total,
             sudahSelesai: {
               jml: item.total_selesai,
-                            persen: item.persen_selesai,
+              persen: item.persen_selesai
             },
             belumSelesai: {
               jml: item.total_inproses,
-                            persen: item.persen_inproses,
+              persen: item.persen_inproses
-                        },
+            }
           },
           responseTime: {
             menit: {
               total: 0,
               rataRata: item.avg_durasi_response,
               max: item.max_durasi_response,
-                            min: item.min_durasi_response,
+              min: item.min_durasi_response
             },
             laporan: {
               lebihSla: item.total_diatas_sla_response,
-                            kurangSla: item.total_dibawah_sla_response,
+              kurangSla: item.total_dibawah_sla_response
-                        },
+            }
           },
           recoveryTime: {
             menit: {
               total: 0,
               rataRata: item.avg_durasi_recovery,
               max: item.max_durasi_recovery,
-                            min: item.min_durasi_recovery,
+              min: item.min_durasi_recovery
             },
             laporan: {
               lebihSla: item.total_diatas_sla_recovery,
-                            kurangSla: item.total_dibawah_sla_recovery,
+              kurangSla: item.total_dibawah_sla_recovery
-                        },
-
             }
-                };
+          }
-                data.value = [...data.value, entry];
+        }
-
+        data.value = [...data.value, entry]
-
       })
 
-            data.value = [...data.value];
+      data.value = [...data.value]
-
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -318,7 +620,7 @@ const filterData = (params: any) => {
   onError((error) => {
     console.log(error)
   })
-
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_12.vue

@@ -1,83 +1,343 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type9 @update:filters="(value) => {
+    <Type9 @update:filters="(value) => (filters = value)" />
-            filters = value
-        }
-            " />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="data"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+      <DxLoadPanel
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+        :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"
+      <DxColumn
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        css-class="custom-table-column"
-            <DxColumn :width="120" alignment="center" data-field="id_regu" caption="Kode"
+        :width="60"
-                css-class="custom-table-column" />
+        alignment="center"
-            <DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                css-class="custom-table-column" />
+        data-field="no"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="id_regu"
+        caption="Kode"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="id_regu"
+        caption="Kode"
+        css-class="custom-table-column"
+        group-index="0"
+        v-if="filters.groupBy"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_regu"
+        caption="Nama Regu"
+        css-class="custom-table-column"
+      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
+        <DxColumn
-                    css-class="custom-table-column" />
+          :width="120"
+          alignment="center"
+          data-field="laporan.total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field="laporan.sudahSelesai.jml"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.sudahSelesai.persen"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field="laporan.belumSelesai.jml"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.belumSelesai.persen"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_reponse" data-type="number" caption="Total"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
+            alignment="center"
-                        caption="Rata-Rata" css-class="custom-table-column" />
+            data-field="responseTime.menit.total"
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
+            data-type="number"
-                        caption="Max" css-class="custom-table-column" />
+            caption="Total"
-                    <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
+            css-class="custom-table-column"
-                        caption="Min" css-class="custom-table-column" />
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.rataRata"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.max"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.min"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+          <DxColumn
-                        caption=">SLA" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+            alignment="center"
-                        caption="≤SLA" css-class="custom-table-column" />
+            data-field="responseTime.laporan.lebihSla"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.laporan.kurangSla"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+            alignment="center"
-                        caption="Rata-Rata" css-class="custom-table-column" />
+            data-field="recoveryTime.menit.total"
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
+            data-type="number"
-                        caption="Max" css-class="custom-table-column" />
+            caption="Total"
-                    <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
+            css-class="custom-table-column"
-                        caption="Min" css-class="custom-table-column" />
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.rataRata"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.max"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.min"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+          <DxColumn
-                        caption=">SLA" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+            alignment="center"
-                        caption="≤SLA" css-class="custom-table-column" />
+            data-field="recoveryTime.laporan.lebihSla"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.laporan.kurangSla"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
+
+      <DxSummary>
+        <DxTotalItem
+          summary-type="sum"
+          display-format="Total"
+          show-in-column="no"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="laporan.total"
+          column="laporan.total"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="laporan.sudahSelesai.jml"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="laporan.sudahSelesai.persen"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="laporan.belumSelesai.jml"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="laporan.belumSelesai.persen"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.menit.total"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.menit.rataRata"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.menit.max"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.menit.min"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.laporan.lebihSla"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.laporan.kurangSla"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.total"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.rataRata"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.max"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.min"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.laporan.lebihSla"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.laporan.kurangSla"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+      </DxSummary>
     </DxDataGrid>
   </div>
 </template>
@@ -85,21 +345,33 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type9 from '@/components/Form/FiltersType/Type9.vue'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxGroupItem,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection,
+  DxSummary,
+  DxTotalItem
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag';
+import gql from 'graphql-tag'
-const position = { of: '#data' };
+
-const showIndicator = ref(true);
+const position = { of: '#data' }
-const shading = ref(true);
+const showIndicator = ref(true)
-const showPane = ref(true);
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
 const GET_REKAPITULASI_GANGGUAN_PER_REGU = gql`
   query rekapitulasiGangguanPerRegu(
@@ -135,7 +407,9 @@ query rekapitulasiGangguanPerRegu(
       total_inproses
       total_selesai
     }
-}`;
+  }
+`
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -143,7 +417,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-            indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -154,7 +428,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -169,26 +443,78 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   console.log(data)
 }
+
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
-    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: 0,
   idUid: 0,
-    idUp3: 0,
+  idUp3: 0
 })
+
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0,
+    idUp3: up3 ? up3.id : 0
   })
-    onResult(queryResult => {
+  onResult((queryResult) => {
     if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiGangguanPerRegu;
+      var i = 1
+
+      queryResult.data.rekapitulasiGangguanPerRegu.forEach((item: any) => {
+        const entry = {
+          no: Number(i++),
+          id_regu: item.id_regu,
+          nama_regu: item.nama_regu,
+          laporan: {
+            total: item.total,
+            sudahSelesai: {
+              jml: item.total_selesai,
+              persen: item.persen_selesai
+            },
+            belumSelesai: {
+              jml: item.total_inproses,
+              persen: item.persen_inproses
+            }
+          },
+          responseTime: {
+            menit: {
+              total: 0,
+              rataRata: item.avg_durasi_response,
+              max: item.max_durasi_response,
+              min: item.min_durasi_response
+            },
+            laporan: {
+              lebihSla: item.total_diatas_sla_response,
+              kurangSla: item.total_dibawah_sla_response
+            }
+          },
+          recoveryTime: {
+            menit: {
+              total: 0,
+              rataRata: item.avg_durasi_recovery,
+              max: item.max_durasi_recovery,
+              min: item.min_durasi_recovery
+            },
+            laporan: {
+              lebihSla: item.total_diatas_sla_recovery,
+              kurangSla: item.total_dibawah_sla_recovery
+            }
+          }
+        }
+        data.value = [...data.value, entry]
+      })
+
+      data.value = [...data.value]
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -197,7 +523,9 @@ const filterData = (params: any) => {
   onError((error) => {
     console.log(error)
   })
-
 }
-const filters = ref()
+
+const filters = ref({
+  groupBy: false
+})
 </script>

src/components/Pages/Gangguan/Table_13.vue

@@ -1,79 +1,212 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type9 @update:filters="(value) => {
+    <Type9 @update:filters="(value) => (filters = value)" />
-            filters = value
-        }
-            " />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="data"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+      <DxLoadPanel
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+        :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"
+      <DxColumn
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
+        :width="50"
-                css-class="custom-table-column" />
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="tanggal"
+        caption="Tanggal Lapor"
+        css-class="custom-table-column"
+      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
+        <DxColumn
-                    css-class="custom-table-column" />
+          :width="120"
+          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="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field="total_selesai"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            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="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field="total_inproses"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="persen_inproses"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_response" data-type="number" caption="Total"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
+            alignment="center"
-                        caption="Rata-Rata" css-class="custom-table-column" />
+            data-field="total_response"
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
+            data-type="number"
-                        caption="Max" css-class="custom-table-column" />
+            caption="Total"
-                    <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
+            css-class="custom-table-column"
-                        caption="Min" css-class="custom-table-column" />
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="avg_durasi_response"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="max_durasi_response"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            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="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+          <DxColumn
-                        caption=">SLA" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+            alignment="center"
-                        caption="≤SLA" css-class="custom-table-column" />
+            data-field="total_diatas_sla_response"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_dibawah_sla_response"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+            alignment="center"
-                        caption="Rata-Rata" css-class="custom-table-column" />
+            data-field="total_recovery"
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number"
+            data-type="number"
-                        caption="Max" css-class="custom-table-column" />
+            caption="Total"
-                    <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
+            css-class="custom-table-column"
-                        caption="Min" css-class="custom-table-column" />
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="avg_durasi_recovery"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="max_durasi_recovery"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            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="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+          <DxColumn
-                        caption=">SLA" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+            alignment="center"
-                        caption="≤SLA" css-class="custom-table-column" />
+            data-field="total_diatas_sla_recovery"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_dibawah_sla_recovery"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
     </DxDataGrid>
@@ -83,21 +216,30 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type9 from '@/components/Form/FiltersType/Type9.vue'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag';
+import gql from 'graphql-tag'
-const position = { of: '#data' };
+
-const showIndicator = ref(true);
+const position = { of: '#data' }
-const shading = ref(true);
+const showIndicator = ref(true)
-const showPane = ref(true);
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -105,7 +247,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-            indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -116,7 +258,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -132,7 +274,6 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(data)
 }
 
-
 const data = ref<any[]>([])
 const GET_REKAPITULASI_GANGGUAN_PER_TANGGAL = gql`
   query rekapitulasiGangguanPerTanggal(
@@ -167,28 +308,33 @@ query rekapitulasiGangguanPerTanggal(
       total_inproses
       total_selesai
     }
-}`;
+  }
+`
 
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_TANGGAL, {
-    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: 0,
   idUid: 0,
-    idUp3: 0,
+  idUp3: 0
 })
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0,
+    idUp3: up3 ? up3.id : 0
   })
-    onResult(queryResult => {
+  onResult((queryResult) => {
     if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiGangguanPerTanggal;
+      data.value = queryResult.data.rekapitulasiGangguanPerTanggal
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -197,7 +343,7 @@ const filterData = (params: any) => {
   onError((error) => {
     console.log(error)
   })
-
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_14.vue

@@ -1,35 +1,82 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters
-        <Type1 @update:filters="(value) => {
+    @reset-form="data = []"
-            filters = value
+    :report-button="true"
-        }
+    @run-search="() => filterData(filters)"
-            " />
+    class="mb-4"
+  >
+    <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="data"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
+      <DxLoadPanel
-                v-model:visible="loading" :enabled="true" />
+        :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"
+      <DxColumn
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media"
+        :width="50"
-                css-class="custom-table-column" />
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="media"
+        caption="Nama Media"
+        css-class="custom-table-column"
+      />
       <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
+        <DxColumn
-                    :caption="i" css-class="custom-table-column" />
+          v-for="i in 31"
+          :width="150"
+          alignment="center"
+          :data-field="`tgl${i}`"
+          data-type="number"
+          :caption="i"
+          css-class="custom-table-column"
+        />
       </DxColumn>
-            <DxColumn :width="170" alignment="center" data-field="total" caption="Total"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
+        alignment="center"
+        data-field="total"
+        caption="Total"
+        css-class="custom-table-column"
+      />
     </DxDataGrid>
   </div>
 </template>
@@ -56,6 +103,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -154,18 +202,22 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_BERDAS
   idUid: 0,
   idUp3: 0
 })
+
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0,
+    idUp3: up3 ? up3.id : 0
   })
 
-
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
@@ -177,7 +229,7 @@ const filterData = (params: any) => {
   onError((error) => {
     console.log(error)
   })
-
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_15.vue

@@ -1,34 +1,83 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters
-        <Type1 @update:filters="(value) => {
+    @reset-form="data = []"
-            filters = value
+    :report-button="true"
-        }
+    @run-search="() => filterData(filters)"
-            " />
+    class="mb-4"
+  >
+    <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
+      :data-source="data"
-            column-resizing-mode="widget" :word-wrap-enabled="true">
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
+      <DxLoadPanel
-                v-model:visible="loading" :enabled="true" />
+        :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"
+      <DxColumn
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        css-class="custom-table-column"
-            <DxColumn alignment="center" data-field="nama_up3" caption="Nama UP3" css-class="custom-table-column" />
+        :width="50"
-            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Posko" css-class="custom-table-column" />
+        alignment="center"
-            <DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                css-class="custom-table-column" />
+        data-type="number"
-            <DxColumn :width="100" alignment="center" data-field="posko_out" caption="Posko OUT"
+        caption="No"
-                css-class="custom-table-column" />
+      />
-
+      <DxColumn
+        alignment="center"
+        data-field="nama_up3"
+        caption="Nama UP3"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Posko"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="100"
+        alignment="center"
+        data-field="posko_in"
+        caption="Posko IN"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="100"
+        alignment="center"
+        data-field="posko_out"
+        caption="Posko OUT"
+        css-class="custom-table-column"
+      />
     </DxDataGrid>
   </div>
 </template>
@@ -38,7 +87,16 @@ import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -46,10 +104,11 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' };
+
-const showIndicator = ref(true);
+const position = { of: '#data' }
-const shading = ref(true);
+const showIndicator = ref(true)
-const showPane = ref(true);
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -57,7 +116,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-            indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -68,7 +127,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -85,16 +144,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 const data = ref<any[]>([])
 const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
-query rekapitulasiGangguanAlihPosko
+  query rekapitulasiGangguanAlihPosko(
-(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
-    rekapitulasiGangguanAlihPosko
+    rekapitulasiGangguanAlihPosko(
-(
       dateFrom: $dateFrom
       dateTo: $dateTo
       posko: $posko
@@ -110,31 +167,35 @@ nama_up3
       posko_in
       posko_out
     }
-}`;
+  }
+`
 
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
-    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: 0,
   idUid: 0,
-    idUp3: 0,
+  idUp3: 0
 })
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
-        idUp3: up3? up3.id:0,
+    idUp3: up3 ? up3.id : 0
   })
 
-
+  onResult((queryResult) => {
-    onResult(queryResult => {
     if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiGangguanAlihPosko;
+      data.value = queryResult.data.rekapitulasiGangguanAlihPosko
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -143,7 +204,7 @@ const filterData = (params: any) => {
   onError((error) => {
     console.log(error)
   })
-
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_2.vue

@@ -1,55 +1,175 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type6 @update:filters="(value) => {
+    <Type6 @update:filters="(value) => (filters = value)" />
-            filters = value
-        }
-            " />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="" :allow-column-resizing="true"
+      :data-source="data"
-            column-resizing-mode="widget">
+      :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"
+      <DxPager
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-                v-if="loading" v-model:visible.sync="loading" :enabled="true" />
+        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" />
+      <DxExport
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+        :enabled="true"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        :formats="['pdf', 'xlsx', 'document']"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
+        :allow-export-selected-data="false"
-                caption="No Laporan" cell-template="data" />
+      />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
+      <DxColumn
-                caption="Tgl Lapor" cell-template="data" />
+        css-class="custom-table-column"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
+        :width="50"
-                caption="Tgl Response" cell-template="data" />
+        alignment="center"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                caption="Tgl Recovery" cell-template="data" />
+        data-type="number"
-            <DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
+        caption="No"
-                cell-template="data" />
+      />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
+      <DxColumn
-                caption="Durasi Response Time" cell-template="data" />
+        css-class="custom-table-column"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
+        :width="150"
-                caption="Durasi Recovery Time" cell-template="data" />
+        alignment="center"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
+        data-field="no_laporan"
-                caption="Status" cell-template="data" />
+        caption="No Laporan"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
+        cell-template="data"
-                caption="IDPEL/NO METER" cell-template="data" />
+      />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
+      <DxColumn
-                caption="Nama Pelapor" cell-template="data" />
+        css-class="custom-table-column"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
+        :width="150"
-                caption="Alamat Pelapor" cell-template="data" />
+        alignment="center"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
+        data-field="waktu_lapor"
-                caption="No Telp Pelapor" cell-template="data" />
+        caption="Tgl Lapor"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
+        cell-template="data"
-                caption="Keterangan Pelapor" cell-template="data" />
+      />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
+      <DxColumn
-                caption="Sumber Lapor" cell-template="data" />
+        css-class="custom-table-column"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
+        :width="150"
-                cell-template="data" />
+        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()">
@@ -59,107 +179,92 @@
     </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">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
-                    No Laporan:
-                </h3>
         <InputText :readonly="true" :value="dataDetail.no_laporan" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
-                    Tanggal Lapor:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
-                    Tanggal Response:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
-                    Tanggal Recovery:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Jml Lapor:</h3>
-                    Jumlah Lapor:
+        <InputText :readonly="true" :value="dataDetail?.jumlah_lapor" class-name="flex-1" />
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.jml_lapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
-                    Durasi Response Time:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
-                    Durasi Response Time:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
-                    Status :
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
-                    IDPEL/NO METER:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
-                    Nama Pelapor:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-                    No Telp Pelapor:
+        <InputText :readonly="true" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
-                </h3>
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
         <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-                    Keterangan Pelapor:
-                </h3>
         <InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
-                    Sumper Lapor:
+        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.sumber_lapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
-                    Posko:
+        <InputText
-                </h3>
+          :readonly="true"
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.posko" class-name="flex-1 h-[56px]" />
+          type="textarea"
+          :value="dataDetail?.nama_posko"
+          class-name="flex-1 h-[56px]"
+        />
       </div>
     </div>
-
   </DetailDialog>
 </template>
 
@@ -168,19 +273,28 @@ import Filters from '@/components/Form/Filters.vue'
 import Type6 from '@/components/Form/FiltersType/Type6.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
-import DetailDialog from '@/components/Dialogs/DetailDialog.vue';
+  DxColumn,
-import InputText from '@/components/InputText.vue';
+  DxExport,
-import { useQuery } from '@vue/apollo-composable';
+  DxLoadPanel,
-import gql from 'graphql-tag';
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
-const position = { of: '#data' };
+const position = { of: '#data' }
-const showIndicator = ref(true);
+const showIndicator = ref(true)
-const shading = ref(true);
+const shading = ref(true)
-const showPane = ref(true);
+const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>({})
 const showDetail = ref(false)
+const filters = ref()
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
@@ -196,7 +310,15 @@ const closeDetail = () => {
 }
 
 const GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI = gql`
-query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateTo: Date!, $posko: Int!, $idUid: Int!, $idUp3: Int!) {
+  query gangguan(
+    $minJmlLapor: Int!
+    $maxJmlLapor: Int!
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: Int!
+    $idUid: Int!
+    $idUp3: Int!
+  ) {
     daftarGangguanMelaporLebihDariSatuKali(
       minJmlLapor: $minJmlLapor
       maxJmlLapor: $maxJmlLapor
@@ -223,7 +345,8 @@ query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateT
       waktu_response
       nama_posko
     }
-}`;
+  }
+`
 const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI, {
   minJmlLapor: 1,
   maxJmlLapor: 1,
@@ -231,33 +354,35 @@ const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LE
   dateTo: new Date().toISOString().slice(0, 10),
   posko: 0,
   idUid: 0,
-    idUp3: 0,
+  idUp3: 0
 })
 
 const filterData = (params: any) => {
-    const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params;
+  const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
-    const dateValue = params.periode.split(' s/d ');
+  const dateValue = params.periode.split(' s/d ')
   refetch({
     minJmlLapor: minJmlLapor ? minJmlLapor : 1,
     maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
-    onResult(queryResult => {
+  onResult((queryResult) => {
     if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
+      data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
-    onError(error => {
+  onError((error) => {
     console.log(error)
   })
 }
-
-const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_3.vue

@@ -1,55 +1,277 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type7 @update:filters="(value) => {
+    <Type7 @update:filters="(value) => (filters = value)" />
-            filters = value
-        }
-            " />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
+      class="max-h-[calc(100vh-140px)]"
-            :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
+      :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"
+      <DxPager
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-            v-if="loading" v-model:visible="loading" :enabled="true" />
+        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
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+        :enabled="true"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        :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"
+      <DxColumn
-                caption="No Laporan" />
+        css-class="custom-table-column"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
+        :width="150"
-                caption="Tgl Lapor" />
+        alignment="center"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
+        data-field="no_laporan"
-                caption="Tgl Response" />
+        caption="No Laporan"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
+        cell-template="data"
-                caption="Tgl Recovery" />
+      />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
+      <DxColumn
-                caption="Durasi Response Time" />
+        css-class="custom-table-column"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
+        :width="150"
-                caption="Durasi Recovery Time" />
+        alignment="center"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
+        data-field="waktu_lapor"
-                caption="Status" />
+        caption="Tgl Lapor"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
+        cell-template="data"
-                caption="Referensi Marking" />
+      />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
+      <DxColumn
-                caption="IDPEL/NO METER" />
+        css-class="custom-table-column"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
+        :width="150"
-                caption="Nama Pelapor" />
+        alignment="center"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
+        data-field="waktu_response"
-                caption="Alamat Pelapor" />
+        caption="Tgl Response"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
+        cell-template="data"
-                caption="No Telp Pelapor" />
+      />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
+      <DxColumn
-                caption="Keterangan Pelapor" />
+        css-class="custom-table-column"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
+        :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()">
+          {{ data.text }}
+        </span>
+      </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog :open="showDetail" title="Daftar Gangguan Response Time" @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>
+        <InputText :readonly="true" :value="dataDetail.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
+        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <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" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+      </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" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+      </div>
+
+      <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]"
+        />
+      </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]"
+        />
+      </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]"
+        />
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -57,38 +279,69 @@ import Filters from '@/components/Form/Filters.vue'
 import Type7 from '@/components/Form/FiltersType/Type7.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
-import { useQuery } from '@vue/apollo-composable';
+  DxColumn,
-import gql from 'graphql-tag';
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
-const position = { of: '#data' };
+const position = { of: '#data' }
-const showIndicator = ref(true);
+const showIndicator = ref(true)
-const shading = ref(true);
+const shading = ref(true)
-const showPane = ref(true);
+const showPane = ref(true)
 const data = ref<any[]>([])
+const dataDetail = ref<any>({})
+const showDetail = ref(false)
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  dataDetail.value = data
+}
+
+const showData = () => {
+  showDetail.value = true
+}
+
+const closeDetail = () => {
+  showDetail.value = false
+}
+
 const filterData = (params: any) => {
-    const { minTime, maxTime, posko, uid, up3 } = params;
+  const { minTime, maxTime, posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     minDurasiResponseTime: minTime ? minTime : 0,
     maxDurasiResponseTime: maxTime ? maxTime : 1,
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
-    onResult(queryResult => {
+  onResult((queryResult) => {
     if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanResponseTime;
+      data.value = queryResult.data.daftarGangguanResponseTime
     }
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
-    onError(error => {
+  onError((error) => {
     console.log(error)
   })
 }
+
 const GET_DAFTAR_GANGGUAN_RESPONSE_TIME = gql`
   query daftarGangguanResponseTime(
     $dateFrom: Date!
@@ -124,7 +377,8 @@ query daftarGangguanResponseTime(
       waktu_recovery
       waktu_response
     }
-}`;
+  }
+`
 const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RESPONSE_TIME, {
   dateFrom: new Date().toISOString().slice(0, 10),
   dateTo: new Date().toISOString().slice(0, 10),
@@ -132,7 +386,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RES
   maxDurasiResponseTime: 1, // menit
   posko: 0,
   idUid: 0,
-    idUp3: 0,
+  idUp3: 0
 })
 
 const filters = ref()

src/components/Pages/Gangguan/Table_4.vue

@@ -1,55 +1,162 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type7 @update:filters="(value) => {
+    <Type7 @update:filters="(value) => (filters = value)" />
-            filters = value
-        }
-            " />
   </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"
+    <DxDataGrid
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
+      class="max-h-[calc(100vh-140px)]"
-            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed=""
+      :column-width="100"
+      @exporting=""
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
+      <DxPager
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-            v-if="loading" v-model:visible="loading" :enabled="true" />
+        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
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+        :enabled="true"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        :formats="['pdf', 'xlsx', 'document']"
-
+        :allow-export-selected-data="false"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
+      />
-                caption="No Laporan" />
+      <DxColumn
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
+        css-class="custom-table-column"
-                caption="Tgl Lapor" />
+        :width="50"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
+        alignment="center"
-                caption="Tgl Response" />
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
+        data-type="number"
-                caption="Tgl Recovery" />
+        caption="No"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
+      />
-                caption="Durasi Response Time" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-                caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-                caption="Status" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="is_marking"
-                caption="Referensi Marking" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
-                caption="IDPEL/NO METER" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-                caption="Nama Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-                caption="Alamat Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-                caption="No Telp Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-                caption="Keterangan Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
-                caption="Sumber Lapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
 
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="is_marking"
+        caption="Referensi Marking"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+      />
     </DxDataGrid>
   </div>
 </template>
@@ -57,40 +164,54 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type7 from '@/components/Form/FiltersType/Type7.vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
-import { useQuery } from '@vue/apollo-composable';
+  DxColumn,
-import gql from 'graphql-tag';
+  DxExport,
-const position = { of: '#data' };
+  DxLoadPanel,
-const showIndicator = ref(true);
+  DxPager,
-const shading = ref(true);
+  DxPaging,
-const showPane = ref(true);
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
 
 const filterData = (params: any) => {
-    const { minDurasiRecoveryTime, maxDurasiRecoveryTime, posko, uid, up3 } = params;
+  const { minTime, maxTime, posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
-        minDurasiRecoveryTime: minDurasiRecoveryTime ? minDurasiRecoveryTime : 1,
+      : new Date().toISOString().slice(0, 10),
-        maxDurasiRecoveryTime: maxDurasiRecoveryTime ? maxDurasiRecoveryTime : 1,
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    minDurasiRecoveryTime: minTime ? minTime : 0,
+    maxDurasiRecoveryTime: maxTime ? maxTime : 1,
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
-    onResult(queryResult => {
+  onResult((queryResult) => {
     if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanRecoveryTime;
+      data.value = queryResult.data.daftarGangguanRecoveryTime
     }
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
-    onError(error => {
+  onError((error) => {
     console.log(error)
   })
 }
+
 const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
   query daftarGangguanRecoveryTime(
     $dateFrom: Date!
@@ -126,7 +247,8 @@ query daftarGangguanRecoveryTime(
       waktu_recovery
       waktu_response
     }
-}`;
+  }
+`
 
 const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RECOVERY_TIME, {
   dateFrom: new Date().toISOString().slice(0, 10),
@@ -135,9 +257,8 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_REC
   maxDurasiRecoveryTime: 1, // menit
   posko: 0,
   idUid: 0,
-    idUp3: 0,
+  idUp3: 0
 })
 
 const filters = ref()
-
 </script>

src/components/Pages/Gangguan/Table_5.vue

@@ -1,53 +1,155 @@
 <template>
-      <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type1 @update:filters="(value) => {
+    <Type1 @update:filters="(value) => (filters = value)" />
-                filters = value
-            }
-            " />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
+      class="max-h-[calc(100vh-140px)]"
-            :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed=""
+      :column-width="100"
+      @exporting=""
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
+      <DxPager
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-            v-if="loading"  v-model:visible="loading" :enabled="true" />
+        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
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+        :enabled="true"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        :formats="['pdf', 'xlsx', 'document']"
-
+        :allow-export-selected-data="false"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
+      />
-                caption="No Laporan" />
+      <DxColumn
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
+        css-class="custom-table-column"
-                caption="Tgl Lapor" />
+        :width="50"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
+        alignment="center"
-                caption="Tgl Response" />
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
+        data-type="number"
-                caption="Tgl Recovery" />
+        caption="No"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
+      />
-                caption="Durasi Response Time" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-                caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-                caption="Status" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
-                caption="IDPEL/NO METER" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-                caption="Nama Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-                caption="Alamat Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-                caption="No Telp Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-                caption="Keterangan Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
-                caption="Sumber Lapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
 
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+      />
     </DxDataGrid>
   </div>
 </template>
@@ -56,13 +158,22 @@ import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
-import gql from 'graphql-tag';
+  DxColumn,
-import { useQuery } from '@vue/apollo-composable';
+  DxExport,
-const position = { of: '#data' };
+  DxLoadPanel,
-const showIndicator = ref(true);
+  DxPager,
-const shading = ref(true);
+  DxPaging,
-const showPane = ref(true);
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
+import gql from 'graphql-tag'
+import { useQuery } from '@vue/apollo-composable'
+
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
 const GET_SELESAI_TANPA_ID_PELANGGAN = gql`
   query daftarGangguanSelesaiTanpaIdPelanggan(
@@ -94,35 +205,43 @@ query daftarGangguanSelesaiTanpaIdPelanggan(
       waktu_recovery
       waktu_response
     }
-}`;
+  }
+`
+
 const { onResult, onError, loading, refetch } = useQuery(GET_SELESAI_TANPA_ID_PELANGGAN, {
   dateFrom: new Date().toISOString().slice(0, 10),
   dateTo: new Date().toISOString().slice(0, 10),
   posko: 0,
   idUid: 0,
-    idUp3: 0,
+  idUp3: 0
 })
+
 const filterData = (params: any) => {
-    const { posko, uid, up3 } = params;
+  const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
-    onResult(queryResult => {
+  onResult((queryResult) => {
     if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanSelesaiTanpaIdPelanggan;
+      data.value = queryResult.data.daftarGangguanSelesaiTanpaIdPelanggan
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
-    onError(error => {
+  onError((error) => {
     console.log(error)
   })
 }
+
 const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_6.vue

@@ -1,44 +1,155 @@
 <template>
-      <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type16 @update:filters="(value) => {
+    <Type16 @update:filters="(value) => (filters = value)" />
-                filters = value
-            }
-            " />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
+      class="max-h-[calc(100vh-140px)]"
-            :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed=""
+      :column-width="100"
+      @exporting=""
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
+      <DxPager
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-            <DxLoadPanel  :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-            v-if="loading"  v-model:visible="loading" :enabled="true"/>
+        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
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+        :enabled="true"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        :formats="['pdf', 'xlsx', 'document']"
-
+        :allow-export-selected-data="false"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" />
+      />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" />
+      <DxColumn
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" />
+        css-class="custom-table-column"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" />
+        :width="50"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
+        alignment="center"
-                caption="Keterangan Pelapor" />
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status" />
+        data-type="number"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" />
+        caption="No"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
+      />
-                caption="Tgl Response" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
-                caption="Tgl Recovery" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
-                caption="Durasi Response Time" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-                caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media" />
 
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Sumber Lapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_media"
+        caption="Tgl Media"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="media"
+        caption="Keterangan Media"
+      />
     </DxDataGrid>
   </div>
 </template>
@@ -48,13 +159,22 @@ import Filters from '@/components/Form/Filters.vue'
 import Type16 from '@/components/Form/FiltersType/Type16.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
-import gql from 'graphql-tag';
+  DxColumn,
-import { useQuery } from '@vue/apollo-composable';
+  DxExport,
-const position = { of: '#data' };
+  DxLoadPanel,
-const showIndicator = ref(true);
+  DxPager,
-const shading = ref(true);
+  DxPaging,
-const showPane = ref(true);
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
+import gql from 'graphql-tag'
+import { useQuery } from '@vue/apollo-composable'
+
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
 const GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA = gql`
   query daftarGangguanBerdasarkanMedia(
@@ -90,30 +210,36 @@ query daftarGangguanBerdasarkanMedia(
       waktu_response
       keterangan_media
     }
-}`;
+  }
+`
+
 const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA, {
   dateFrom: new Date().toISOString().slice(0, 10),
   dateTo: new Date().toISOString().slice(0, 10),
   posko: 0,
   idUid: 0,
   idUp3: 0,
-        media : "Twitter"
+  media: 'Twitter'
 })
+
 const filterData = (params: any) => {
-    const { posko, uid, up3, media } = params;
+  const { posko, uid, up3, media } = params
   const dateValue = params.periode.split(' s/d ')
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
-        media : media ? media.id : ""
+    media: media ? media.id : ''
   })
-    onResult(queryResult => {
+  onResult((queryResult) => {
     if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanBerdasarkanMedia;
+      data.value = queryResult.data.daftarGangguanBerdasarkanMedia
-            
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -123,6 +249,6 @@ const filterData = (params: any) => {
     console.log(error)
   })
 }
-const filters = ref()
 
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_7.vue

@@ -1,53 +1,155 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type1 @update:filters="(value) => {
+    <Type1 @update:filters="(value) => (filters = value)" />
-            filters = value
-        }
-            " />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
+      class="max-h-[calc(100vh-140px)]"
-            :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed=""
+      :column-width="100"
+      @exporting=""
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
+      <DxPager
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+        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
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+        :enabled="true"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        :formats="['pdf', 'xlsx', 'document']"
-
+        :allow-export-selected-data="false"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
+      />
-                caption="No Laporan" />
+      <DxColumn
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
+        css-class="custom-table-column"
-                caption="Tgl Lapor" />
+        :width="50"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
+        alignment="center"
-                caption="Tgl Response" />
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
+        data-type="number"
-                caption="Tgl Recovery" />
+        caption="No"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
+      />
-                caption="Durasi Response Time" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-                caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-                caption="Status" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
-                caption="IDPEL/NO METER" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-                caption="Nama Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-                caption="Alamat Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-                caption="No Telp Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-                caption="Keterangan Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
-                caption="Sumber Lapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
 
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+      />
     </DxDataGrid>
   </div>
 </template>
@@ -55,15 +157,24 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
-import gql from 'graphql-tag';
+  DxColumn,
-import { useQuery } from '@vue/apollo-composable';
+  DxExport,
-const position = { of: '#data' };
+  DxLoadPanel,
-const showIndicator = ref(true);
+  DxPager,
-const shading = ref(true);
+  DxPaging,
-const showPane = ref(true);
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
+import gql from 'graphql-tag'
+import { useQuery } from '@vue/apollo-composable'
+
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
 const GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT = gql`
   query daftarGangguanDiselesaikanMobileAPKT(
@@ -95,28 +206,38 @@ query daftarGangguanDiselesaikanMobileAPKT(
       waktu_recovery
       waktu_response
     }
-}`;
+  }
-const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT, {
+`
-    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+
-    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+const { onResult, onError, loading, refetch } = useQuery(
+  GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT,
+  {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     posko: 0,
     idUid: 0,
-    idUp3: 0,
+    idUp3: 0
-})
+  }
+)
+
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
-        idUp3: up3?.id ? up3.id : 0,
+    idUp3: up3?.id ? up3.id : 0
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanDiselesaikanMobileAPKT;
+      data.value = queryResult.data.daftarGangguanDiselesaikanMobileAPKT
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -125,9 +246,7 @@ const filterData = (params: any) => {
   onError((error) => {
     console.log(error)
   })
-
 }
 
-const filters = ref();
+const filters = ref()
-
 </script>

src/components/Pages/Gangguan/Table_8.vue

@@ -1,73 +1,253 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters
-        <Type1 @update:filters="(value) => {
+    :report-button="true"
-            filters = value
+    @reset-form="data = []"
-        }
+    @run-search="() => filterData(filters)"
-            " />
+    class="mb-4"
+  >
+    <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="data"
-            :allow-column-resizing="true" column-resizing-mode="widget">
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+      <DxPager
-                :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+        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
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+        :enabled="true"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        :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 :width="150" alignment="center" data-field="nama_posko" caption="Nama Unit"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="150"
-            <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
+        alignment="center"
-                :allow-resizing="false" css-class="custom-table-column" />
+        data-field="nama_posko"
-            <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="Selesai" :allow-resizing="false"
+        caption="Nama Unit"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+      />
-                :allow-resizing="false" css-class="custom-table-column" />
+      <DxColumn
-            <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="In Progress"
+        :width="150"
-                :allow-resizing="false" css-class="custom-table-column" />
+        alignment="center"
-            <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+        data-field="total"
-                :allow-resizing="false" css-class="custom-table-column" />
+        data-type="number"
+        caption="Total"
+        :allow-resizing="false"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="total_selesai"
+        caption="Selesai"
+        :allow-resizing="false"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="persen_selesai"
+        data-type="number"
+        caption="%"
+        :allow-resizing="false"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="total_inproses"
+        data-type="number"
+        caption="In Progress"
+        :allow-resizing="false"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="persen_inproses"
+        data-type="number"
+        caption="%"
+        :allow-resizing="false"
+        css-class="custom-table-column"
+      />
       <DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="avg_durasi_dispatch" data-type="number"
+        <DxColumn
-                    caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
+          :width="150"
-                <DxColumn :width="150" alignment="center" data-field="max_durasi_dispatch" data-type="number" caption="Max"
+          alignment="center"
-                    :allow-resizing="false" css-class="custom-table-column" />
+          data-field="avg_durasi_dispatch"
-                <DxColumn :width="150" alignment="center" data-field="min_durasi_dispatch" data-type="number" caption="Min"
+          data-type="number"
-                    :allow-resizing="false" css-class="custom-table-column" />
+          caption="Rata-Rata"
-                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_dispatch" data-type="number"
+          :allow-resizing="false"
-                    caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
+          css-class="custom-table-column"
-                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_dispatch" data-type="number"
+        />
-                    caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="max_durasi_dispatch"
+          data-type="number"
+          caption="Max"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="min_durasi_dispatch"
+          data-type="number"
+          caption="Min"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_diatas_sla_dispatch"
+          data-type="number"
+          caption=">SLA"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_dibawah_sla_dispatch"
+          data-type="number"
+          caption="≤SLA"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
+        <DxColumn
-                    caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
+          :width="150"
-                <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
+          alignment="center"
-                    :allow-resizing="false" css-class="custom-table-column" />
+          data-field="avg_durasi_response"
-                <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
+          data-type="number"
-                    :allow-resizing="false" css-class="custom-table-column" />
+          caption="Rata-Rata"
-                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+          :allow-resizing="false"
-                    caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
+          css-class="custom-table-column"
-                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+        />
-                    caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="max_durasi_response"
+          data-type="number"
+          caption="Max"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="min_durasi_response"
+          data-type="number"
+          caption="Min"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_diatas_sla_response"
+          data-type="number"
+          caption=">SLA"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_dibawah_sla_response"
+          data-type="number"
+          caption="≤SLA"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+        <DxColumn
-                    caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
+          :width="150"
-                <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
+          alignment="center"
-                    :allow-resizing="false" css-class="custom-table-column" />
+          data-field="avg_durasi_recovery"
-                <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
+          data-type="number"
-                    :allow-resizing="false" css-class="custom-table-column" />
+          caption="Rata-Rata"
-                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+          :allow-resizing="false"
-                    caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
+          css-class="custom-table-column"
-                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+        />
-                    caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="max_durasi_recovery"
+          data-type="number"
+          caption="Max"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="min_durasi_recovery"
+          data-type="number"
+          caption="Min"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_diatas_sla_recovery"
+          data-type="number"
+          caption=">SLA"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_dibawah_sla_recovery"
+          data-type="number"
+          caption="≤SLA"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
       </DxColumn>
     </DxDataGrid>
   </div>
@@ -76,22 +256,29 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
-import { computed, onMounted, ref, watch } from 'vue'
+  DxColumn,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
+import { ref } from 'vue'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import gql from 'graphql-tag'
-import gql from 'graphql-tag';
 import { useQuery } from '@vue/apollo-composable'
-const position = { of: '#data' };
+
-const showIndicator = ref(true);
+const position = { of: '#data' }
-const shading = ref(true);
+const showIndicator = ref(true)
-const showPane = ref(true);
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
 const GET_REKAPITULASI_GANGGUAN_ALL = gql`
   query rekapitulasiAllGangguan(
@@ -130,32 +317,40 @@ query rekapitulasiAllGangguan(
       total_inproses
       total_selesai
     }
-}`;
+  }
+`
+
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALL, {
   dateFrom: new Date().toISOString().slice(0, 10),
   dateTo: new Date().toISOString().slice(0, 10),
   posko: 0,
   idUid: 0,
-    idUp3: 0,
+  idUp3: 0
 })
 
 const filterData = (params: any) => {
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0,
+    idUp3: up3 ? up3.id : 0
   })
-    onResult(queryResult => {
+  onResult((queryResult) => {
     if (queryResult.data != undefined) {
       queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
-                data.value = [...data.value, {
+        data.value = [
-                    ...item,
+          ...data.value,
-                }];
+          {
-
+            ...item
+          }
+        ]
       })
     }
     console.log(queryResult.loading)
@@ -165,6 +360,7 @@ const filterData = (params: any) => {
     console.log(error)
   })
 }
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -172,7 +368,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-            indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -183,7 +379,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -194,11 +390,10 @@ const onExporting = (e: any) => {
   }
 }
 
-
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   console.log(data)
 }
 
-const filters = ref();
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_9.vue

@@ -1,121 +1,340 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan -->
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters
-        <Type1 @update:filters="(value) => {
+    :report-button="true"
-            filters = value
+    @reset-form="dataReal = []"
-        }
+    @run-search="() => filterData(filters)"
-            " />
+    class="mb-4"
+  >
+    <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="dataReal" :show-column-lines="true"
+    <DxDataGrid
-            :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="dataReal"
-            :allow-column-resizing="true" column-resizing-mode="widget">
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+      <DxLoadPanel
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+        :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" />
       <DxGroupPanel :visible="true" />
       <DxGrouping :auto-expand-all="true" />
 
-            <DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
+      <DxColumn
-            <DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
+        :width="60"
-            <DxColumn :width="150" alignment="center" name="jenisGangguanGroup" data-field="jenisGangguan"
+        alignment="center"
-                caption="Jenis Gangguan" css-class="custom-table-column" :group-index="0" />
+        data-field="no"
-            <DxColumn :width="150" alignment="center" data-field="jenisGangguan" caption="Jenis Gangguan"
+        caption="NO"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="kode"
+        caption="Kode"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        name="jenisGangguanGroup"
+        data-field="jenisGangguan"
+        caption="Jenis Gangguan"
+        css-class="custom-table-column"
+        :group-index="0"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="jenisGangguan"
+        caption="Jenis Gangguan"
+        css-class="custom-table-column"
+      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
+        <DxColumn
-                    css-class="custom-table-column" />
+          :width="120"
+          alignment="center"
+          data-field="laporan.total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
+          <DxColumn
-                        caption="Jml" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
+            alignment="center"
-                        caption="%" css-class="custom-table-column" />
+            data-field="laporan.sudahSelesai.jml"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.sudahSelesai.persen"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
+          <DxColumn
-                        caption="Jml" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
+            alignment="center"
-                        caption="%" css-class="custom-table-column" />
+            data-field="laporan.belumSelesai.jml"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.belumSelesai.persen"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
+          <DxColumn
-                        caption="Total" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
+            alignment="center"
-                        caption="Rata-Rata" css-class="custom-table-column" />
+            data-field="responseTime.menit.total"
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number"
+            data-type="number"
-                        caption="Max" css-class="custom-table-column" />
+            caption="Total"
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number"
+            css-class="custom-table-column"
-                        caption="Min" css-class="custom-table-column" />
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.rataRata"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.max"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.min"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
+          <DxColumn
-                        caption=">SLA" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
+            alignment="center"
-                        caption="≤SLA" css-class="custom-table-column" />
+            data-field="responseTime.laporan.lebihSla"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.laporan.kurangSla"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
+          <DxColumn
-                        caption="Total" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
+            alignment="center"
-                        caption="Rata-Rata" css-class="custom-table-column" />
+            data-field="recoveryTime.menit.total"
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number"
+            data-type="number"
-                        caption="Max" css-class="custom-table-column" />
+            caption="Total"
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number"
+            css-class="custom-table-column"
-                        caption="Min" css-class="custom-table-column" />
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.rataRata"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.max"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.min"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
+          <DxColumn
-                        caption=">SLA" css-class="custom-table-column" />
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
+            alignment="center"
-                        caption="≤SLA" css-class="custom-table-column" />
+            data-field="recoveryTime.laporan.lebihSla"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.laporan.kurangSla"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
 
       <DxSummary>
         <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
-                <DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}" />
+        <DxGroupItem
-                <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
+          :show-in-group-footer="true"
-                    display-format="{0}" />
+          column="laporan.total"
-                <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
+          summary-type="sum"
-                    display-format="{0}" />
+          display-format="{0}"
-                <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
+        />
-                    display-format="{0}" />
+        <DxGroupItem
-                <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
+          :show-in-group-footer="true"
-                    display-format="{0}" />
+          column="laporan.sudahSelesai.jml"
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
+          summary-type="sum"
-                    display-format="{0}" />
+          display-format="{0}"
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
+        />
-                    display-format="{0}" />
+        <DxGroupItem
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
+          :show-in-group-footer="true"
-                    display-format="{0}" />
+          column="laporan.sudahSelesai.persen"
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
+          summary-type="sum"
-                    display-format="{0}" />
+          display-format="{0}"
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
+        />
-                    display-format="{0}" />
+        <DxGroupItem
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
+          :show-in-group-footer="true"
-                    display-format="{0}" />
+          column="laporan.belumSelesai.jml"
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
+          summary-type="sum"
-                    display-format="{0}" />
+          display-format="{0}"
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
+        />
-                    display-format="{0}" />
+        <DxGroupItem
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
+          :show-in-group-footer="true"
-                    display-format="{0}" />
+          column="laporan.belumSelesai.persen"
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
+          summary-type="sum"
-                    display-format="{0}" />
+          display-format="{0}"
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
+        />
-                    display-format="{0}" />
+        <DxGroupItem
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
+          :show-in-group-footer="true"
-                    display-format="{0}" />
+          column="responseTime.menit.total"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.rataRata"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.max"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.min"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.laporan.lebihSla"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.laporan.kurangSla"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.total"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.rataRata"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.max"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.min"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.laporan.lebihSla"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.laporan.kurangSla"
+          summary-type="sum"
+          display-format="{0}"
+        />
       </DxSummary>
     </DxDataGrid>
   </div>
@@ -124,7 +343,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -147,6 +366,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import gql from 'graphql-tag'
 import { useQuery } from '@vue/apollo-composable'
+
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -168,30 +388,26 @@ const GET_REKAP_JENIS_GANGGUAN = gql`
       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
       total
-      total_diatas_sla_dispatch
       total_diatas_sla_recovery
       total_diatas_sla_response
       total_dibawah_sla_recovery
       total_dibawah_sla_response
-      total_dibawah_sla_dispatch
       total_inproses
       total_selesai
     }
   }
 `
+
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN, {
   dateFrom: new Date().toISOString().slice(0, 10),
   dateTo: new Date().toISOString().slice(0, 10),
@@ -199,6 +415,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUA
   idUid: 0,
   idUp3: 0
 })
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -238,8 +455,12 @@ const filterData = (params: any) => {
   const { posko, uid, up3 } = params
 
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
@@ -301,5 +522,5 @@ const filterData = (params: any) => {
   })
 }
 
-const filters = ref();
+const filters = ref()
 </script>

src/components/Pages/Keluhan/Table_21.vue

@@ -1,57 +1,164 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => {
+    <Type3 @update:filters="(value) => (filters = value)" />
-            filters = value
-        }
-            " />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="data"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+      :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"
+      <DxPager
-                :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+        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"
+      <DxColumn
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+        :width="50"
-                css-class="custom-table-column" />
+        alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                css-class="custom-table-column" />
+        data-type="number"
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+        caption="No"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="no_laporan"
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+        caption="No Laporan"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+      />
-                css-class="custom-table-column" />
+      <DxColumn
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+        :width="170"
-                css-class="custom-table-column" />
+        alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="nama_unit_lama" caption="Unit Asal"
+        data-field="pembuat_laporan"
-                css-class="custom-table-column" />
+        caption="Pembuat Laporan"
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+        css-class="custom-table-column"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="waktu_lapor"
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+        caption="Tgl Lapor"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+      />
-                css-class="custom-table-column" />
+      <DxColumn
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        :width="170"
-                css-class="custom-table-column" />
+        alignment="center"
+        data-field="waktu_dialihkan"
+        caption="Tgl Dialihkan"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_unit_lama"
+        caption="Unit Asal"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+      />
     </DxDataGrid>
   </div>
 </template>
@@ -68,7 +175,6 @@ import {
   DxLoadPanel,
   DxPager,
   DxPaging,
-    DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
@@ -79,10 +185,12 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' };
+
-const showIndicator = ref(true);
+const position = { of: '#data' }
-const shading = ref(true);
+const showIndicator = ref(true)
-const showPane = ref(true);
+const shading = ref(true)
+const showPane = ref(true)
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -155,25 +263,33 @@ const GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN = gql`
     }
   }
 `
-const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN, {
+const { onResult, onError, loading, refetch } = useQuery(
+  GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN,
+  {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     idUlp: 0,
     idUid: 0,
     idUp3: 0
-})
+  }
-
+)
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
+
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
+
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarKeluhanDialihkanKeUnitLain
@@ -182,9 +298,11 @@ const filterData = (params: any) => {
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
+
   onError((error) => {
     console.log(error)
   })
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Keluhan/Table_22.vue

@@ -1,70 +1,284 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type10 @update:filters="(value) => {
+    <Type10 @update:filters="(value) => (filters = value)" />
-            filters = value
-        }
-            " />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="data"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+      :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"
+      <DxPager
-                :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+        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"
+      <DxColumn
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+        :width="50"
-                css-class="custom-table-column" />
+        alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                css-class="custom-table-column" />
+        data-type="number"
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+        caption="No"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="no_laporan"
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+        caption="No Laporan"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="120" alignment="center" data-field="jml_lapor" caption="Jml Lapor"
+        cell-template="data"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="waktu_lapor"
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+        caption="Tgl Lapor"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+        cell-template="data"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="waktu_response"
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+        caption="Tgl Response"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        cell-template="data"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="150" alignment="center" data-field="idUlp" caption="Nama ULP"
+        alignment="center"
-                css-class="custom-table-column" />
+        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()">
+          {{ data.text }}
+        </span>
+      </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog :open="showDetail" title="Detail Keluhan" @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>
+        <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Jml Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.jumlah_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
+        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <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]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+      </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]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
+      </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 Type10 from '@/components/Form/FiltersType/Type10.vue'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -73,7 +287,6 @@ import {
   DxLoadPanel,
   DxPager,
   DxPaging,
-    DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
@@ -84,10 +297,27 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' };
+
-const showIndicator = ref(true);
+const position = { of: '#data' }
-const shading = ref(true);
+const showIndicator = ref(true)
-const showPane = ref(true);
+const shading = ref(true)
+const showPane = ref(true)
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+
+const closeDetail = () => {
+  showDetail.value = false
+}
+
+const showData = () => {
+  showDetail.value = true
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  dataDetail.value = selectedRowsData[0]
+  console.log(selectedRowsData[0])
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -117,11 +347,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 daftarKeluhanMelaporLebihDariSatuKali(
@@ -150,14 +375,12 @@ jumlah_lapor
       keterangan_pelapor
       media
       nama_pelapor
-nama_unit
+      nama_ulp
       no_laporan
       no_telp_pelapor
       status_akhir
       waktu_lapor
-
       waktu_recovery
-
       waktu_response
     }
   }
@@ -173,17 +396,20 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   idUp3: 0
 })
 
-
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
-    const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1;
+  const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1
-    const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100;
+  const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100
   refetch({
     minJmlLapor: minJmlLapor,
     maxJmlLapor: maxJmlLapor,
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
@@ -191,6 +417,7 @@ const filterData = (params: any) => {
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
+      console.log(data.value[0])
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -200,5 +427,6 @@ const filterData = (params: any) => {
     console.log(error)
   })
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Keluhan/Table_23.vue

@@ -1,63 +1,262 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type11 @update:filters="(value) => {
+    <Type11 @update:filters="(value) => (filters = value)" />
-            filters = value
-        }
-            " />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="data"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+      :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"
+      <DxPager
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+        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"
+      <DxColumn
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+        :width="50"
-                css-class="custom-table-column" />
+        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"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="waktu_lapor"
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+        caption="Tgl Lapor"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+        cell-template="data"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="waktu_response"
-            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+        caption="Tgl Response"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+        cell-template="data"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="waktu_recovery"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        caption="Tgl Recovery"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama ULP"
+        cell-template="data"
-                css-class="custom-table-column" />
+      />
+      <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()">
+          {{ data.text }}
+        </span>
+      </template>
     </DxDataGrid>
   </div>
+  <DetailDialog :open="showDetail" title="Detail Keluhan" @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>
+        <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
+        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <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]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+      </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]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
+      </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 Type11 from '@/components/Form/FiltersType/Type11.vue'
 import { ref } from 'vue'
-
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -66,7 +265,6 @@ import {
   DxLoadPanel,
   DxPager,
   DxPaging,
-    DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
@@ -77,10 +275,27 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' };
+
-const showIndicator = ref(true);
+const position = { of: '#data' }
-const shading = ref(true);
+const showIndicator = ref(true)
-const showPane = ref(true);
+const shading = ref(true)
+const showPane = ref(true)
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+
+const closeDetail = () => {
+  showDetail.value = false
+}
+
+const showData = () => {
+  showDetail.value = true
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  dataDetail.value = selectedRowsData[0]
+  console.log(selectedRowsData[0])
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -110,11 +325,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 daftarKeluhanResponseTime(
@@ -142,7 +352,7 @@ const GET_DATA = gql`
       keterangan_pelapor
       media
       nama_pelapor
-        nama_unit
+      nama_ulp
       no_laporan
       no_telp_pelapor
       status_akhir
@@ -152,6 +362,7 @@ const GET_DATA = gql`
     }
   }
 `
+
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
@@ -161,17 +372,23 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   idUid: 0,
   idUp3: 0
 })
+
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3, maxTime, minTime } = params
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     minDurasiResponseTime: minTime,
     maxDurasiResponseTime: maxTime,
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
-        idUp3: up3? up3.id:0})
+    idUp3: up3 ? up3.id : 0
+  })
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
@@ -185,5 +402,6 @@ const filterData = (params: any) => {
     console.log(error)
   })
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Keluhan/Table_24.vue

@@ -1,63 +1,263 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type11 @update:filters="(value) => {
+    <Type11 @update:filters="(value) => (filters = value)" />
-            filters = value
-        }
-            " />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="data"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+      :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"
+      <DxPager
-                :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+        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"
+      <DxColumn
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+        :width="50"
-                css-class="custom-table-column" />
+        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"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="waktu_lapor"
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+        caption="Tgl Lapor"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+        cell-template="data"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="waktu_response"
-            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+        caption="Tgl Response"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+        cell-template="data"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="waktu_recovery"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        caption="Tgl Recovery"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama ULP"
+        cell-template="data"
-                css-class="custom-table-column" />
+      />
+      <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()">
+          {{ data.text }}
+        </span>
+      </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog :open="showDetail" title="Detail Keluhan" @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>
+        <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
+        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <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]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+      </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]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
+      </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 Type11 from '@/components/Form/FiltersType/Type11.vue'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -66,7 +266,6 @@ import {
   DxLoadPanel,
   DxPager,
   DxPaging,
-    DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
@@ -77,10 +276,27 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' };
+
-const showIndicator = ref(true);
+const position = { of: '#data' }
-const shading = ref(true);
+const showIndicator = ref(true)
-const showPane = ref(true);
+const shading = ref(true)
+const showPane = ref(true)
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+
+const closeDetail = () => {
+  showDetail.value = false
+}
+
+const showData = () => {
+  showDetail.value = true
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  dataDetail.value = selectedRowsData[0]
+  console.log(selectedRowsData[0])
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -110,11 +326,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 daftarKeluhanRecoveryTime(
@@ -142,7 +353,7 @@ idpel_nometer
       keterangan_pelapor
       media
       nama_pelapor
-nama_unit
+      nama_ulp
       no_laporan
       no_telp_pelapor
       status_akhir
@@ -167,8 +378,12 @@ const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3, minTime, maxTime } = params
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     minDurasiRecoveryTime: minTime,
     maxDurasiRecoveryTime: maxTime,
     idUlp: ulp ? ulp.id : 0,
@@ -178,7 +393,6 @@ const filterData = (params: any) => {
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarKeluhanRecoveryTime
-
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -187,7 +401,7 @@ const filterData = (params: any) => {
   onError((error) => {
     console.log(error)
   })
-
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Keluhan/Table_25.vue

@@ -1,70 +1,270 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => {
+    <Type3 @update:filters="(value) => (filters = value)" />
-            filters = value
-        }
-            " />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="data"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+      :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"
+      <DxPager
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+        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"
+      <DxColumn
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+        :width="50"
-                css-class="custom-table-column" />
+        alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                css-class="custom-table-column" />
+        data-type="number"
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+        caption="No"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="no_laporan"
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+        caption="No Laporan"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
+        cell-template="data"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="waktu_lapor"
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+        caption="Tgl Lapor"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+        cell-template="data"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="waktu_response"
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+        caption="Tgl Response"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        cell-template="data"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="150" alignment="center" data-field="nama_idUlp" caption="Nama ULP"
+        alignment="center"
-                css-class="custom-table-column" />
+        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()">
+          {{ data.text }}
+        </span>
+      </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog :open="showDetail" title="Detail Keluhan" @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>
+        <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
+        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <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]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+      </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]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
+      </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'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -73,7 +273,6 @@ import {
   DxLoadPanel,
   DxPager,
   DxPaging,
-    DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
@@ -84,10 +283,27 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' };
+
-const showIndicator = ref(true);
+const position = { of: '#data' }
-const shading = ref(true);
+const showIndicator = ref(true)
-const showPane = ref(true);
+const shading = ref(true)
+const showPane = ref(true)
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+
+const closeDetail = () => {
+  showDetail.value = false
+}
+
+const showData = () => {
+  showDetail.value = true
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  dataDetail.value = selectedRowsData[0]
+  console.log(selectedRowsData[0])
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -117,11 +333,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 daftarKeluhanSelesaiTanpaIdPelanggan(
@@ -141,15 +352,15 @@ const GET_DATA = gql`
       alamat_pelapor
       durasi_recovery_time
       durasi_response_time
-      id_keluhan
       idpel_nometer
       keterangan_pelapor
       media
+      nama_ulp
       nama_pelapor
       no_laporan
       no_telp_pelapor
-      idUlp
       status_akhir
+      waktu_lapor
       waktu_recovery
       waktu_response
     }
@@ -168,16 +379,20 @@ const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { idUlp, uid, up3 } = params
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     idUlp: idUlp ? idUlp.id : 0,
     idUid: uid ? uid.id : 0,
-        idUp3: up3? up3.id:0})
+    idUp3: up3 ? up3.id : 0
+  })
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
-    
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -187,5 +402,6 @@ const filterData = (params: any) => {
     console.log(error)
   })
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Keluhan/Table_26.vue

@@ -1,66 +1,277 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => {
+    <Type3 @update:filters="(value) => (filters = value)" />
-            filters = value
-        }
-            " />
   </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"
+    <DxDataGrid
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      class="max-h-[calc(100vh-140px)]"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      :data-source="data"
-            :word-wrap-enabled="true">
+      :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"
+      <DxPager
-                :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+        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"
+      <DxColumn
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+        :width="50"
-                css-class="custom-table-column" />
+        alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                css-class="custom-table-column" />
+        data-type="number"
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+        caption="No"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="no_laporan"
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+        caption="No Laporan"
-                css-class="custom-table-column" />
+        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"
+      <DxColumn
-                css-class="custom-table-column" />
+        :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"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="waktu_response"
-            <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Response Time"
+        caption="Tgl Response"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
+        cell-template="data"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="waktu_recovery"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
+        caption="Tgl Recovery"
-                css-class="custom-table-column" />
+        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()">
+          {{ data.text }}
+        </span>
+      </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog :open="showDetail" title="Detail Keluhan" @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>
+        <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+      </div>
+
+      <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]"
+        />
+      </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]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Media:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_media" class-name="flex-1" />
+      </div>
+
+      <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]"
+        />
+      </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'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -69,7 +280,6 @@ import {
   DxLoadPanel,
   DxPager,
   DxPaging,
-    DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
@@ -80,10 +290,27 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' };
+
-const showIndicator = ref(true);
+const position = { of: '#data' }
-const shading = ref(true);
+const showIndicator = ref(true)
-const showPane = ref(true);
+const shading = ref(true)
+const showPane = ref(true)
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+
+const closeDetail = () => {
+  showDetail.value = false
+}
+
+const showData = () => {
+  showDetail.value = true
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  dataDetail.value = selectedRowsData[0]
+  console.log(selectedRowsData[0])
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -113,11 +340,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 daftarKeluhanBerdasarkanMedia(
@@ -126,7 +348,6 @@ const GET_DATA = gql`
     $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
-    $media: String!
   ) {
     daftarKeluhanBerdasarkanMedia(
       dateFrom: $dateFrom
@@ -134,19 +355,19 @@ const GET_DATA = gql`
       idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
-      media: $media
     ) {
       alamat_pelapor
       durasi_recovery_time
       durasi_response_time
-      id_keluhan
-      idpel_nometer
       keterangan_pelapor
       media
+      waktu_media
+      keterangan_media
+      waktu_lapor
       nama_pelapor
       no_laporan
       no_telp_pelapor
-      idUlp
+      nama_ulp
       status_akhir
       waktu_recovery
       waktu_response
@@ -166,8 +387,12 @@ const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { idUlp, uid, up3 } = params
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     idUlp: idUlp ? idUlp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
@@ -176,7 +401,6 @@ const filterData = (params: any) => {
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
-
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -186,5 +410,6 @@ const filterData = (params: any) => {
     console.log(error)
   })
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Keluhan/Table_27.vue

@@ -1,55 +1,173 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => {
+    <Type3 @update:filters="(value) => (filters = value)" />
-            filters = value
-        }
-            " />
   </Filters>
+
   <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+    <DxDataGrid
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      class="max-h-[calc(100vh-140px)]"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+      :data-source="data"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+      :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"
+      <DxPager
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
+        :visible="true"
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        :allowed-page-sizes="[5, 10, 20]"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+        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"
+      <DxColumn
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+        :width="50"
-                css-class="custom-table-column" />
+        alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="" caption="Contact Center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                css-class="custom-table-column" />
+        data-type="number"
-            <DxColumn :width="170" alignment="center" data-field="" caption="UI Dist." css-class="custom-table-column" />
+        caption="No"
-            <DxColumn :width="170" alignment="center" data-field="" caption="ULP" css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Contact Center"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="UI Dist."
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="ULP"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+      />
 
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+      />
 
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Tlp Pelapor"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="no_telp_pelapor"
-            <DxColumn :width="150" alignment="center" data-field="" caption="APKT Status" css-class="custom-table-column" />
+        caption="No Tlp Pelapor"
-            <DxColumn :width="150" alignment="center" data-field="" caption="Created By" css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Penyelesaian"
+      />
-                css-class="custom-table-column" />
+      <DxColumn
-            <DxColumn :width="170" alignment="center" data-field="" caption="Lapor Ulang" css-class="custom-table-column" />
+        :width="170"
-            <DxColumn :width="170" alignment="center" data-field="media" caption="Sumber Lapor"
+        alignment="center"
-                css-class="custom-table-column" />
+        data-field="keterangan_pelapor"
-            <DxColumn :width="170" alignment="center" data-field="" caption="Issue Type" css-class="custom-table-column" />
+        caption="Keterangan Pelapor"
-            <DxColumn :width="170" alignment="center" data-field="" caption="Sub Issue Type"
+        css-class="custom-table-column"
-                css-class="custom-table-column" />
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field=""
+        caption="APKT Status"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field=""
+        caption="Created By"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Tgl Penyelesaian"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Lapor Ulang"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Issue Type"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Sub Issue Type"
+        css-class="custom-table-column"
+      />
     </DxDataGrid>
   </div>
 </template>
@@ -57,7 +175,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -66,7 +184,6 @@ import {
   DxLoadPanel,
   DxPager,
   DxPaging,
-    DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
@@ -77,10 +194,11 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' };
+
-const showIndicator = ref(true);
+const position = { of: '#data' }
-const shading = ref(true);
+const showIndicator = ref(true)
-const showPane = ref(true);
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -117,16 +235,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
- query daftarKeluhanDiselesaikanCC123
+  query daftarKeluhanDiselesaikanCC123(
-(
     $dateFrom: Date!
     $dateTo: Date!
     $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
-    daftarKeluhanDiselesaikanCC123
+    daftarKeluhanDiselesaikanCC123(
-(
       dateFrom: $dateFrom
       dateTo: $dateTo
       idUlp: $idUlp
@@ -159,15 +275,19 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   idUp3: 0,
   media: 'Twitter'
 })
-const filters = ref();
+const filters = ref()
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { idUlp, uid, up3 } = params
   const media = params.media ? params.media.id : ''
   refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
     idUlp: idUlp ? idUlp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,

src/components/Pages/Keluhan/Table_28.vue

@@ -1,15 +1,12 @@
 <template>
-<Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-        <Type3 @update:filters="(value) => {
+    <Type3 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
   </Filters>
   <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"
+      @selection-changed="onDataSelectionChanged" :column-width="100" @exporting="onExporting"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+      :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" />
@@ -19,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"
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-          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"
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-          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'
@@ -68,6 +223,7 @@ import {
   DxColumnFixing,
   DxExport,
   DxLoadPanel,
+  DxPager,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
@@ -84,8 +240,29 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dataDetail = ref<any>()
+const dataSelected = ref<any>()
-const showDetail = ref(false)
+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()
@@ -115,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
@@ -138,29 +310,23 @@ query rekapitulasiKeluhanAll
         idUid: $idUid
         idUp3: $idUp3
     ) {
-        avg_durasi_dispatch
+        id_ulp
-        avg_durasi_recovery
+        nama_ulp
-        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
         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
       }
 }`
 
@@ -181,12 +347,12 @@ const filterData = (params: any) => {
     dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
     idUlp: idUlp ? idUlp.id : 0,
     idUid: uid ? uid.id : 0,
-        idUp3: up3? up3.id:0})
+    idUp3: up3 ? up3.id : 0
+  })
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanAll
-     
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)

src/components/Pages/Keluhan/Table_29.vue

@@ -1,9 +1,6 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-        <Type13 @update:filters="(value) => {
+        <Type13 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@@ -21,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>
@@ -43,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>
@@ -61,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>
@@ -158,24 +155,22 @@ const GET_DATA = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-      avgDurasiPenyelesaian
+      fungsi_bidang
-      avgDurasiResponse
-      fungsiBidang
-      maxDurasiPenyelesaian
-      maxDurasiResponse
-      minDurasiPenyelesaian
-      minDurasiResponse
-      persenInProcess
-      persenSelesai
       total
-      totalDiatasSlaPenyelesaian
+      total_selesai
-      totalDiatasSlaResponse
+      persen_selesai
-      totalDibawahSlaPenyelesaian
+      total_inproses
-      totalDibawahSlaResponse
+      persen_inproses
-      totalDurasiPenyelesaian
+      avg_durasi_response
-      totalDurasiResponse
+      min_durasi_response
-      totalInProcess
+      max_durasi_response
-      totalSelesai
+      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
     }
   }
 `
@@ -196,7 +191,8 @@ const filterData = (params: any) => {
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         idUlp: idUlp ? idUlp.id : 0,
         idUid: uid ? uid.id : 0,
-        idUp3: up3? up3.id:0})
+        idUp3: up3 ? up3.id : 0
+    })
 
 
     onResult((queryResult) => {

src/components/Pages/Keluhan/Table_30.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => {
+        <Type3 @update:filters="(value) => filters = value" />
-                filters = value
-            }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@@ -21,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"
@@ -71,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>
@@ -150,27 +147,22 @@ query rekapitulasiKeluhanPerJenisKeluhan
         idUid: $idUid
         idUp3: $idUp3
     ) {
-            avg_durasi_dispatch
+            tipe_keluhan
-            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
             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, {
@@ -190,7 +182,8 @@ const filterData = (params: any) => {
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         idUlp: idUlp ? idUlp.id : 0,
         idUid: uid ? uid.id : 0,
-        idUp3: up3? up3.id:0})
+        idUp3: up3 ? up3.id : 0
+    })
 
 
     onResult(queryResult => {

src/components/Pages/Keluhan/Table_31.vue

@@ -1,9 +1,6 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-        <Type13 @update:filters="(value) => {
+        <Type13 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@@ -21,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>
@@ -43,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"
+                    <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
-                        css-class="custom-table-column" />
+                        caption="Rata-Rata" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                    <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
-                        css-class="custom-table-column" />
+                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
-                        css-class="custom-table-column" />
+                        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"
+                    <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-                        css-class="custom-table-column" />
+                        caption=">SLA" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-                        css-class="custom-table-column" />
+                        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"
+                    <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
-                        css-class="custom-table-column" />
+                        caption="Rata-Rata" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                    <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
-                        css-class="custom-table-column" />
+                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
-                        css-class="custom-table-column" />
+                        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"
+                    <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
-                        css-class="custom-table-column" />
+                        caption=">SLA" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
-                        css-class="custom-table-column" />
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
 
@@ -150,27 +147,22 @@ query rekapitulasiKeluhanPerKelompokKeluhan
         idUid: $idUid
         idUp3: $idUp3
     ) {
-            avg_durasi_dispatch
+            kelompok
-            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
             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, {
@@ -190,7 +182,8 @@ const filterData = (params: any) => {
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         idUlp: idUlp ? idUlp.id : 0,
         idUid: uid ? uid.id : 0,
-        idUp3: up3? up3.id:0})
+        idUp3: up3 ? up3.id : 0
+    })
 
 
     onResult(queryResult => {

src/components/Pages/Keluhan/Table_32.vue

@@ -1,9 +1,6 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type13 @update:filters="(value) => {
+    <Type13 @update:filters="(value) => filters = value" />
-      filters = value
-    }
-      " />
   </Filters>
   <div>
     <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
@@ -21,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"
@@ -156,29 +153,22 @@ const GET_DATA = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-      avg_durasi_dispatch
+      tanggal_lapor
-      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
       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
     }
   }
 `

src/components/Pages/Keluhan/Table_33.vue

@@ -1,9 +1,6 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type8 @update:filters="(value) => {
+    <Type8 @update:filters="(value) => filters = value" />
-      filters = value
-    }
-      " />
   </Filters>
   <div>
     <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@@ -21,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" />
@@ -155,29 +152,23 @@ const GET_DATA = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-      avg_durasi_dispatch
+      id_ulp
-      avg_durasi_recovery
+      nama_ulp
-      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
       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
     }
   }
 `

src/components/Pages/Keluhan/Table_34.vue

@@ -1,9 +1,6 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type3 @update:filters="(value) => {
+    <Type3 @update:filters="(value) => filters = value" />
-      filters = value
-    }
-      " />
   </Filters>
   <div>
     <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"

src/components/Pages/Keluhan/Table_35.vue

@@ -1,9 +1,6 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-        <Type8 @update:filters="(value) => {
+        <Type8 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"

src/components/Pages/Material/Table_68.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type14 @update:filters="(value) => {
+        <Type14 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
@@ -11,8 +8,8 @@
             @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"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="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" />
@@ -48,9 +45,9 @@
 
 <script setup lang="ts">
 
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import Filters from '@/components/Form/Filters.vue';
 import { Type14 } from '@/components/Form/FiltersType';
 import { useQuery } from '@vue/apollo-composable';
@@ -101,7 +98,7 @@ const filterData = (params: any) => {
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
 
     })
     onResult((queryResult) => {

src/components/Pages/Material/Table_69.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type14 @update:filters="(value) => {
+        <Type14 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
@@ -11,8 +8,8 @@
             @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"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="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" />
@@ -24,7 +21,8 @@
                 caption="Kode Material" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_material"
                 caption="Nama Material" />
-            <DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="satuan" caption="Satuan" />
+            <DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="satuan"
+                caption="Satuan" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber_material"
                 caption="Sumber Material" />
             <DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
@@ -39,11 +37,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
-import { Type14 } from '@/components/Form/FiltersType';
+import { Type14 } from '@/components/Form/FiltersType'
-import Filters from '@/components/Form/Filters.vue';
+import Filters from '@/components/Form/Filters.vue'
-import { useQuery } from '@vue/apollo-composable';
+import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag';
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -105,7 +103,7 @@ const { onResult, onError, loading, refetch } = useQuery(rekapitulasiPemakaianMa
     dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
     idUid: 0,
     idUp3: 0,
-    posko: ''
+    posko: 0
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
@@ -117,7 +115,7 @@ const filterData = (params: any) => {
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {

src/components/Pages/Monalisa/Table_36.vue

@@ -1,14 +1,11 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+        <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :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"
+            :hover-state-enabled="true" @selection-changed="onSelectionChanged" @exporting="onExporting"
             :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
@@ -19,7 +16,7 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-type="text" data-field="nama_posko" caption="Nama Unit"
+            <DxColumn alignment="center" data-type="text" data-field="nama_posko" caption="Nama Unit"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
@@ -109,8 +106,8 @@ const bulanSekarang = ref(new Date().getMonth())
 const tahunLalu = ref(tahunSekarang.value - 1)
 const MONALISAJUMLAHKALIGANGGUAN = gql`
   query DaftarMonalisaJumlahKaliGangguan(
-    $regional: String
+    $regional: Int
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -135,8 +132,8 @@ const MONALISAJUMLAHKALIGANGGUAN = gql`
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGGUAN, {
-    regional: '',
+    regional: 0,
-    posko: '',
+    posko: 0,
     idUid: 0,
     idUp3: 0,
     bulan: bulanSekarang.value,
@@ -150,7 +147,7 @@ const filterData = (params: any) => {
     tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
         bulan: bulan ? bulan.id : bulanSekarang.value,

src/components/Pages/Monalisa/Table_37.vue

@@ -1,15 +1,12 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+        <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </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"
+            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+            column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -19,8 +16,7 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah Dispatching Time Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
@@ -46,8 +42,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -109,7 +104,7 @@ const onExporting = (e: any) => {
 const monalisaDispatchingTimeGangguan = gql`
   query DaftarmonalisaDispatchingTimeGangguan(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -148,7 +143,7 @@ const filterData = (params: any) => {
     tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
         bulan: bulan ? bulan.id : 10,
@@ -158,10 +153,7 @@ const filterData = (params: any) => {
         if (queryResult.data != undefined) {
             queryResult.data.monalisaDispatchingTimeGangguan.forEach((item: any) => {
                 data.value = [
-                    ...data.value,
+                    ...data.value, { ...item }
-                    {
-                        ...item
-                    }
                 ]
             })
         }

src/components/Pages/Monalisa/Table_38.vue

@@ -1,15 +1,12 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+        <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </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"
+            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+            column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -19,8 +16,7 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RCT Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
@@ -46,8 +42,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -55,12 +50,13 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-const tahunSekarang = ref(new Date().getFullYear())
-const bulanSekarang = ref(new Date().getMonth())
-const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { getMonthName } from '@/utils/texts'
+
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
@@ -70,7 +66,7 @@ const dataDetail = ref<any>()
 const showDetail = ref(false)
 
 const monalisaRecoveryTimeGangguan = gql`
-  query DaftarmonalisaRecoveryTimeGangguan($regional:regional, $posko: String, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
+  query DaftarmonalisaRecoveryTimeGangguan($regional:regional, $posko: Int, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
     monalisaRecoveryTimeGangguan(
       regional:$regional
       posko: $posko
@@ -90,7 +86,7 @@ const monalisaRecoveryTimeGangguan = gql`
   }
 `;
 const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeGangguan, {
-    regional: "",
+    regional: 0,
     posko: 0,
     idUid: 0,
     idUp3: 0,
@@ -105,7 +101,7 @@ const filterData = (params: any) => {
     tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
         bulan: bulan ? bulan.id : 10,

src/components/Pages/Monalisa/Table_39.vue

@@ -1,15 +1,12 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+        <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </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"
+            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+            column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -19,8 +16,7 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RPT Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
@@ -46,8 +42,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -80,7 +75,7 @@ const showDetail = ref(false)
 const monalisaResponseTimeKeluhan = gql`
   query DaftarmonalisaResponseTimeKeluhan(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -119,7 +114,7 @@ const filterData = (params: any) => {
     tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
         bulan: bulan ? bulan.id : 10,

src/components/Pages/Monalisa/Table_40.vue

@@ -1,9 +1,6 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type2 @update:filters="(value) => {
+    <Type2 @update:filters="(value) => filters = value" />
-      filters = value
-    }
-      " />
   </Filters>
   <div>
     <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@@ -19,8 +16,7 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+      <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-        css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
           <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
@@ -82,8 +78,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -100,11 +95,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+
 const tahunSekarang = ref(new Date().getFullYear())
 const bulanSekarang = ref(new Date().getMonth())
 const tahunLalu = ref(tahunSekarang.value - 1)
-import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -115,7 +111,7 @@ const showDetail = ref(false)
 const monalisaJumlahDurasiRptRctGangguan = gql`
   query DaftarmonalisaJumlahDurasiRptRctGangguan(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -158,7 +154,7 @@ const filterData = (params: any) => {
 
   refetch({
     regional: regional,
-    posko: posko ? posko.id : "",
+    posko: posko ? posko.id : 0,
     idUid: idUid ? idUid.id : 0,
     idUp3: idUp3 ? idUp3.id : 0,
     bulan: bulan ? bulan.id : 10,
@@ -168,10 +164,7 @@ const filterData = (params: any) => {
     if (queryResult.data != undefined) {
       queryResult.data.monalisaJumlahDurasiRptRctGangguan.forEach((item: any) => {
         data.value = [
-          ...data.value,
+          ...data.value, { ...item }
-          {
-            ...item
-          }
         ]
       })
     }

src/components/Pages/Monalisa/Table_41.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+        <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@@ -36,8 +33,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -54,11 +50,11 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const tahunSekarang = ref(new Date().getFullYear())
 const bulanSekarang = ref(new Date().getMonth())
 const tahunLalu = ref(tahunSekarang.value - 1)
-import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -69,7 +65,7 @@ const showDetail = ref(false)
 const monalisaGangguanPerJenisGangguan = gql`
   query DaftarmonalisaGangguanPerJenisGangguan(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -103,7 +99,7 @@ const filterData = (params: any) => {
 
     refetch({
         regional: regional,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
         bulan: bulan ? bulan.id : 10,

src/components/Pages/Monalisa/Table_42.vue

@@ -1,15 +1,12 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+        <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </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"
+            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+            column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -19,8 +16,7 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
@@ -46,8 +42,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -64,12 +59,13 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-const tahunSekarang = ref(new Date().getFullYear()) 
-const bulanSekarang = ref(new Date().getMonth())
-const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { getMonthName } from '@/utils/texts'
+
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -80,7 +76,7 @@ const showDetail = ref(false)
 const monalisaRekapitulasiLaporUlangGangguan = gql`
   query DaftarmonalisaRekapitulasiLaporUlangGangguan(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -119,7 +115,7 @@ const filterData = (params: any) => {
     tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
         bulan: bulan ? bulan.id : 10,

src/components/Pages/Monalisa/Table_43.vue

@@ -1,15 +1,12 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+        <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </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"
+            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+            column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -19,8 +16,7 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
@@ -46,8 +42,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -64,12 +59,13 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-const tahunSekarang = ref(new Date().getFullYear()) 
-const bulanSekarang = ref(new Date().getMonth())
-const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { getMonthName } from '@/utils/texts'
+
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -80,7 +76,7 @@ const showDetail = ref(false)
 const monalisaRekapitulasiEnsGangguan = gql`
   query DaftarmonalisaRekapitulasiEnsGangguan(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -119,7 +115,7 @@ const filterData = (params: any) => {
     tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
         bulan: bulan ? bulan.id : 10,

src/components/Pages/Monalisa/Table_44.vue

@@ -1,14 +1,12 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+        <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </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"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
+            column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -51,11 +49,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+
 const tahunSekarang = ref(new Date().getFullYear())
 const bulanSekarang = ref(new Date().getMonth())
 const tahunLalu = ref(tahunSekarang.value - 1)
-import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -66,7 +65,7 @@ const showDetail = ref(false)
 const monalisaGangguanBelumSelesai = gql`
   query DaftarmonalisaGangguanBelumSelesai(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -103,7 +102,7 @@ const filterData = (params: any) => {
     tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
         bulan: bulan ? bulan.id : 10,

src/components/Pages/Monalisa/Table_45.vue

@@ -1,15 +1,12 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+        <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </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"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
-            :word-wrap-enabled="true">
+            column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -19,7 +16,7 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
@@ -46,7 +43,6 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -98,7 +94,7 @@ const tahunLalu = ref(tahunSekarang.value - 1)
 const MONALISAJUMLAHKALIKELUHAN = gql`
   query DaftarMonalisaJumlahKaliKeluhan(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -138,7 +134,7 @@ const filterData = (params: any) => {
     tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
         bulan: bulan ? bulan.id : bulanSekarang.value,

src/components/Pages/Monalisa/Table_46.vue

@@ -1,15 +1,12 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+        <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </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"
+            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+            column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -19,8 +16,7 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RCT Kali Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
@@ -98,7 +94,7 @@ const onExporting = (e: any) => {
 const monalisaDispatchingTimeKeluhan = gql`
   query DaftarmonalisaDispatchingTimeKeluhan(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -137,7 +133,7 @@ const filterData = (params: any) => {
     tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
         bulan: bulan ? bulan.id : 10,

src/components/Pages/Monalisa/Table_47.vue

@@ -1,15 +1,12 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+        <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </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"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
-            :word-wrap-enabled="true">
+            column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -19,7 +16,7 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RPT Kali Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
@@ -95,7 +92,7 @@ const onExporting = (e: any) => {
     }
 }
 const monalisaRecoveryTimeKeluhan = gql`
-  query DaftarmonalisaRecoveryTimeKeluhan($regional:regional, $posko: String, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
+  query DaftarmonalisaRecoveryTimeKeluhan($regional:regional, $posko: Int, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
     monalisaRecoveryTimeKeluhan(
       regional:$regional
       posko: $posko
@@ -115,7 +112,7 @@ const monalisaRecoveryTimeKeluhan = gql`
   }
 `;
 const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
-    regional: "",
+    regional: 0,
     posko: 0,
     idUid: 0,
     idUp3: 0,
@@ -130,7 +127,7 @@ const filterData = (params: any) => {
     tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
         bulan: bulan ? bulan.id : 10,

src/components/Pages/Monalisa/Table_48.vue

@@ -1,15 +1,12 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+        <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </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"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :word-wrap-enabled="true">
+            :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" />
@@ -19,7 +16,8 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
                     <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
@@ -135,7 +133,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 const monalisaJumlahDurasiRptRctKeluhan = gql`
   query DaftarmonalisaJumlahDurasiRptRctKeluhan(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -178,7 +176,7 @@ const filterData = (params: any) => {
 
     refetch({
         regional: regional,
-    posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
         bulan: bulan ? bulan.id : 10,

src/components/Pages/Monalisa/Table_49.vue

@@ -1,14 +1,12 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+        <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </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"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
+            column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -18,11 +16,16 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center"  :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"  caption="NO" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" data-field="id_keluhan" caption="ID Keluhan" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="jenis_keluhan" caption="Jenis Keluhan" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="jenis_keluhan" caption="Jenis Keluhan"
-            <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah" css-class="custom-table-column" />
+                css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="persen_keluhan" caption="%" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah"
+                css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="persen_keluhan" caption="%"
+                css-class="custom-table-column" />
 
         </DxDataGrid>
     </div>
@@ -85,7 +88,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 const monalisaKeluhanPerJenisKeluhan = gql`
   query DaftarmonalisaKeluhanPerJenisKeluhan(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -119,7 +122,7 @@ const filterData = (params: any) => {
 
     refetch({
         regional: regional,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
         bulan: bulan ? bulan.id : 10,

src/components/Pages/Monalisa/Table_50.vue

@@ -1,15 +1,12 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+        <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </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"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
-            :word-wrap-enabled="true">
+            column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -19,7 +16,7 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
@@ -102,7 +99,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 const monalisaRekapitulasiLaporUlangKeluhan = gql`
   query DaftarmonalisaRekapitulasiLaporUlangKeluhan(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -141,7 +138,7 @@ const filterData = (params: any) => {
     tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
         bulan: bulan ? bulan.id : 10,

src/components/Pages/Monalisa/Table_51.vue

@@ -1,79 +1,29 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type2
+    <Type2 @update:filters="(value) => filters = value" />
-      @update:filters="
-        (value) => {
-          filters = value
-        }
-      "
-    />
   </Filters>
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-      class="max-h-[calc(100vh-140px)]"
+      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      :data-source="data"
+      @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
-      :show-column-lines="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        :position="position"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
+      <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-        alignment="center"
-        data-field="nama_posko"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-      />
       <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="keluhan" data-type="number" caption="Keluhan"
-          :width="150"
+          css-class="custom-table-column" />
-          alignment="center"
+        <DxColumn :width="150" alignment="center" data-field="informasi" data-type="number" caption="Informasi"
-          data-field="keluhan"
+          css-class="custom-table-column" />
-          data-type="number"
+        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
-          caption="Keluhan"
+          css-class="custom-table-column" />
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="informasi"
-          data-type="number"
-          caption="Informasi"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total"
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-        />
       </DxColumn>
     </DxDataGrid>
   </div>
@@ -144,7 +94,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 const monalisaRekapitulasiKeluhanBelumSelesai = gql`
   query DaftarmonalisaRekapitulasiKeluhanBelumSelesai(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -178,7 +128,7 @@ const filterData = (params: any) => {
 
   refetch({
     regional: regional,
-    posko: posko ? posko.id : "",
+    posko: posko ? posko.id : 0,
     idUid: idUid ? idUid.id : 0,
     idUp3: idUp3 ? idUp3.id : 0,
     bulan: bulan ? bulan.id : 10,

src/components/Pages/Monalisa/Table_52.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+        <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@@ -155,7 +152,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 const penurunanJumlahKomplainBulanan = gql`
   query DaftarpenurunanJumlahKomplainBulanan(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -205,7 +202,7 @@ const filterData = (params: any) => {
 
     refetch({
         regional: regional,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
         bulan: bulan ? bulan.id : 10,

src/components/Pages/Monalisa/Table_53.vue

@@ -1,15 +1,12 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+    <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
   </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"
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-            :word-wrap-enabled="true">
+      column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -25,16 +22,16 @@
       </DxColumn>
       <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
+          <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number"
-                        css-class="custom-table-column" />
+            caption="Feb 2020" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
+          <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number"
-                        css-class="custom-table-column" />
+            caption="SLA (Menit)" css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
+          <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number"
-                        css-class="custom-table-column" />
+            caption="Feb 2020" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
+          <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number"
-                        css-class="custom-table-column" />
+            caption="SLA (Jam)" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
@@ -43,8 +40,8 @@
         <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
           css-class="custom-table-column" />
       </DxColumn>
-            <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
+      <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number"
-                css-class="custom-table-column" />
+        caption="% Rata-Rata Aging Complains" css-class="custom-table-column" />
 
     </DxDataGrid>
   </div>
@@ -110,7 +107,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 const agingComplaintBulanan = gql`
   query DaftaragingComplaintBulanan(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -148,7 +145,7 @@ const filterData = (params: any) => {
 
   refetch({
     regional: regional,
-    posko: posko ? posko.id : "",
+    posko: posko ? posko.id : 0,
     idUid: idUid ? idUid.id : 0,
     idUp3: idUp3 ? idUp3.id : 0,
     bulan: bulan ? bulan.id : 10,

src/components/Pages/Monalisa/Table_54.vue

@@ -1,15 +1,12 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+    <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
   </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"
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-            :word-wrap-enabled="true">
+      column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -26,8 +23,8 @@
       <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
         <DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
           css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number" caption="Tidak Terencana"
+        <DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number"
-                    css-class="custom-table-column" />
+          caption="Tidak Terencana" css-class="custom-table-column" />
         <DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
           css-class="custom-table-column" />
       </DxColumn>
@@ -96,7 +93,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 const agingComplaintBulanan = gql`
   query DaftaragingComplaintBulanan(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -132,7 +129,7 @@ const filterData = (params: any) => {
 
   refetch({
     regional: regional,
-    posko: posko ? posko.id : "",
+    posko: posko ? posko.id : 0,
     idUid: idUid ? idUid.id : 0,
     idUp3: idUp3 ? idUp3.id : 0,
     bulan: bulan ? bulan.id : 10,

src/components/Pages/Monalisa/Table_55.vue

@@ -1,15 +1,12 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+    <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
   </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"
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-            :word-wrap-enabled="true">
+      column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -23,20 +20,20 @@
         css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan" data-type="number" caption="Jan 2020"
+          <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan"
-                        css-class="custom-table-column" />
+            data-type="number" caption="Jan 2020" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total" data-type="number" caption="Total Gangguan"
+          <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total"
-                        css-class="custom-table-column" />
+            data-type="number" caption="Total Gangguan" css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan" data-type="number" caption="Jan 2020"
+          <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
-                        css-class="custom-table-column" />
+            data-type="number" caption="Jan 2020" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total" data-type="number" caption="Total Keluhan"
+          <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total"
-                        css-class="custom-table-column" />
+            data-type="number" caption="Total Keluhan" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
-            <DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number" caption="Komplain Pelanggan %"
+      <DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number"
-                css-class="custom-table-column" />
+        caption="Komplain Pelanggan %" css-class="custom-table-column" />
 
     </DxDataGrid>
   </div>
@@ -98,7 +95,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 const kepatuhandanAkurasiDalamPelaporanBulanan = gql`
   query DaftarkepatuhandanAkurasiDalamPelaporanBulanan(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -134,7 +131,7 @@ const filterData = (params: any) => {
 
   refetch({
     regional: regional,
-    posko: posko ? posko.id : "",
+    posko: posko ? posko.id : 0,
     idUid: idUid ? idUid.id : 0,
     idUp3: idUp3 ? idUp3.id : 0,
     bulan: bulan ? bulan.id : 10,

src/components/Pages/Monalisa/Table_56.vue

@@ -1,15 +1,11 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+    <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
   </Filters>
   <div id="data">
     <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
       :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            :word-wrap-enabled="true">
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -19,21 +15,20 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
       <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
-                <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
+        <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-                    css-class="custom-table-column" />
       </DxColumn>
       <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
+          <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number"
-                        css-class="custom-table-column" />
+            caption="Feb 2020" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
+          <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number"
-                        css-class="custom-table-column" />
+            caption="SLA (Menit)" css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
+          <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number"
-                        css-class="custom-table-column" />
+            caption="Feb 2020" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
+          <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number"
-                        css-class="custom-table-column" />
+            caption="SLA (Jam)" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
@@ -42,8 +37,8 @@
         <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
           css-class="custom-table-column" />
       </DxColumn>
-            <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
+      <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number"
-                css-class="custom-table-column" />
+        caption="% Rata-Rata Aging Complains" css-class="custom-table-column" />
 
     </DxDataGrid>
   </div>
@@ -105,7 +100,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 const penurunanJumlahKomplainKumulatif = gql`
   query DaftarpenurunanJumlahKomplainKumulatif(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -155,7 +150,7 @@ const filterData = (params: any) => {
 
   refetch({
     regional: regional,
-    posko: posko ? posko.id : "",
+    posko: posko ? posko.id : 0,
     idUid: idUid ? idUid.id : 0,
     idUp3: idUp3 ? idUp3.id : 0,
     bulan: bulan ? bulan.id : 10,

src/components/Pages/Monalisa/Table_57.vue

@@ -1,15 +1,11 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+    <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
   </Filters>
   <div id="data">
     <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
       :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            :word-wrap-enabled="true">
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -20,21 +16,20 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
-                <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
+        <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-                    css-class="custom-table-column" />
       </DxColumn>
       <DxColumn alignment="center" caption="Aging Complains (Kums)" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
+          <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number"
-                        css-class="custom-table-column" />
+            caption="Feb 2020" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
+          <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number"
-                        css-class="custom-table-column" />
+            caption="SLA (Menit)" css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
+          <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number"
-                        css-class="custom-table-column" />
+            caption="Feb 2020" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
+          <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number"
-                        css-class="custom-table-column" />
+            caption="SLA (Jam)" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
@@ -43,8 +38,8 @@
         <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
           css-class="custom-table-column" />
       </DxColumn>
-            <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
+      <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number"
-                css-class="custom-table-column" />
+        caption="% Rata-Rata Aging Complains" css-class="custom-table-column" />
 
     </DxDataGrid>
   </div>
@@ -106,7 +101,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 const agingComplaintKumulatif = gql`
   query DaftaragingComplaintKumulatif(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -144,7 +139,7 @@ const filterData = (params: any) => {
 
   refetch({
     regional: regional,
-    posko: posko ? posko.id : "",
+    posko: posko ? posko.id : 0,
     idUid: idUid ? idUid.id : 0,
     idUp3: idUp3 ? idUp3.id : 0,
     bulan: bulan ? bulan.id : 10,

src/components/Pages/Monalisa/Table_58.vue

@@ -1,9 +1,6 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+    <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
   </Filters>
   <div id="data">
     <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
@@ -26,8 +23,8 @@
       <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
         <DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
           css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number" caption="Tidak Terencana"
+        <DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number"
-                    css-class="custom-table-column" />
+          caption="Tidak Terencana" css-class="custom-table-column" />
         <DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
           css-class="custom-table-column" />
       </DxColumn>
@@ -97,7 +94,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 const kepatuhandanAkurasiDalamPelaporanKumulatif = gql`
   query DaftarkepatuhandanAkurasiDalamPelaporanKumulatif(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -133,7 +130,7 @@ const filterData = (params: any) => {
 
   refetch({
     regional: regional,
-    posko: posko ? posko.id : "",
+    posko: posko ? posko.id : 0,
     idUid: idUid ? idUid.id : 0,
     idUp3: idUp3 ? idUp3.id : 0,
     bulan: bulan ? bulan.id : 10,

src/components/Pages/Monalisa/Table_59.vue

@@ -1,15 +1,11 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
+    <Type2 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
   </Filters>
   <div id="data">
     <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
       :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            :word-wrap-enabled="true">
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -19,24 +15,23 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-            <DxColumn :min-width="250" alignment="center" data-field="nama_posko" caption="Nama Unit"
+      <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-                css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan" data-type="number" caption="Jan 2020"
+          <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan"
-                        css-class="custom-table-column" />
+            data-type="number" caption="Jan 2020" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total" data-type="number" caption="Total Gangguan"
+          <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total"
-                        css-class="custom-table-column" />
+            data-type="number" caption="Total Gangguan" css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan" data-type="number" caption="Jan 2020"
+          <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
-                        css-class="custom-table-column" />
+            data-type="number" caption="Jan 2020" css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total" data-type="number" caption="Total Keluhan"
+          <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total"
-                        css-class="custom-table-column" />
+            data-type="number" caption="Total Keluhan" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
-            <DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number" caption="Komplain Pelanggan %"
+      <DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number"
-                css-class="custom-table-column" />
+        caption="Komplain Pelanggan %" css-class="custom-table-column" />
 
     </DxDataGrid>
   </div>
@@ -99,7 +94,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 const kepatuhandanAkurasiDalamPelaporanBulanan = gql`
   query DaftarkepatuhandanAkurasiDalamPelaporanBulanan(
     $regional: String
-    $posko: String
+    $posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
@@ -135,7 +130,7 @@ const filterData = (params: any) => {
 
   refetch({
     regional: regional,
-    posko: posko ? posko.id : "",
+    posko: posko ? posko.id : 0,
     idUid: idUid ? idUid.id : 0,
     idUp3: idUp3 ? idUp3.id : 0,
     bulan: bulan ? bulan.id : 10,

src/components/Pages/PencarianData/Table_71.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type15 @update:filters="(value) => {
+        <Type15 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
@@ -11,8 +8,8 @@
             @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"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="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" />
@@ -45,7 +42,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { Type15 } from '@/components/Form/FiltersType';
 import Filters from '@/components/Form/Filters.vue';
 const position = { of: '#data' }

src/components/Pages/Transaksi/Table_70.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type17 @update:filters="(value) => {
+        <Type17 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
@@ -38,8 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted,ref } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'

src/components/Select.vue

@@ -29,8 +29,6 @@ const selected = ref(data.value[0].id)
 watch(
   () => props.selected,
   (value: any) => {
-    console.log('value', value)
-    console.log('aaaaaaaaaaaaaaaa')
     selected.value = value.id
   }
 )

src/router/index.ts

@@ -1,7 +1,6 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import HomeView from '@/views/HomeView.vue'
-import TestView from '@/views/TestView.vue'
 import LoginView from '@/views/LoginView.vue'
 import NotFoundView from '@/views/NotFoundView.vue'
 import WelcomePage from '@/components/Pages/Welcome.vue'
@@ -532,7 +531,7 @@ export const routes: RouteRecordRaw[] = [
       },
       {
         path: 'check-in-out',
-        name: 'Check In OutCheck In Dan Check Out',
+        name: 'Check In Dan Check Out',
         children: [
           {
             path: 'laporan',
@@ -696,11 +695,6 @@ export const routes: RouteRecordRaw[] = [
     name: 'Login',
     component: LoginView
   },
-  {
-    path: '/playground',
-    name: 'Playground',
-    component: TestView
-  },
   {
     path: '/404',
     name: 'Not Found',

src/utils/graphql.ts

@@ -2,12 +2,10 @@
 import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
 
 export const apolloClient = () => {
-
   const httpLink = createHttpLink({
-    uri: 'http://10.1.50.173:32180/graphql',
+    uri: import.meta.env.VITE_APP_GRAPHQL_ENDPOINT,
-    credentials: 'include', // Include credentials for cross-origin requests
+    credentials: 'include' // Include credentials for cross-origin requests
-  });
+  })
-
 
   const apolloClient = new ApolloClient({
     cache: new InMemoryCache(),
@@ -17,9 +15,9 @@ export const apolloClient = () => {
       'Accept-Encoding': 'gzip, deflate',
       'Cache-Control': 'no-cache',
       Connection: 'keep-alive',
-      'Content-Type': 'application/json',
+      'Content-Type': 'application/json'
       // Add other headers as needed
-    },
+    }
-  });
+  })
-  return apolloClient;
+  return apolloClient
 }

src/utils/network.ts

@@ -1,8 +1,8 @@
 //deploy vm
 import axios from 'axios'
-const url = 'http://10.1.50.173:32181'
+
+const url = import.meta.env.VITE_APP_REST_ENDPOINT
 const instance = axios.create({
-  // baseURL: 'http://192.168.1.84:32180'
   baseURL: url
 })
 
@@ -14,4 +14,13 @@ const getJenisTransaksi = async () => await instance.get('/jenisTransaksi')
 const getUp3 = async (uid: number) => await instance.get('/up3?uid=' + uid)
 const getUlp = async (up3: number) => await instance.get('/ulp?up3=' + up3)
 const getPosko = async (uppp: number) => await instance.get('/posko?up3=' + uppp)
-export { getUid, getUp3, getPosko, getUlp, getMedia, getJenisTransaksi, getUidRegional, getRegional }
+export {
+  getUid,
+  getUp3,
+  getPosko,
+  getUlp,
+  getMedia,
+  getJenisTransaksi,
+  getUidRegional,
+  getRegional
+}

src/views/TestView.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { RichSelect } from '@flavorly/vanilla-components'
-import { ref } from 'vue'
-const value = ref('Option 1')
-
-const options = [
-  { value: 'Option 1', text: 'One Option' },
-  { value: 'Option 2', text: 'Two Options' },
-  { value: [{ anotherObject: true, nested: 'deep' }], text: 'Complex Object' },
-  {
-    value: 'seprator',
-    text: 'A sperator can be usefull',
-    children: [
-      { value: 'Option 4', text: '4th Option' },
-      { value: 'Option 5', text: '5th Option' }
-    ]
-  }
-]
-</script>
-
-<template>
-  <div class="container bg-red-300 m-auto p-5">
-    <div class="w-full">
-      <RichSelect
-        v-model="value"
-        name="test"
-        :options="options"
-        :clearable="true"
-        placeholder="Please select an option"
-      />
-    </div>
-  </div>
-</template>