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="
+      data.periode = 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="
+      data.group = value
-        (value) => {
+      console.log('data.group', value)
-          data.group = value
+    }" :radio-items="[{ id: 1, title: 'Tidak' }, { id: 2, title: 'Ya, Grupkan' }]" />
-          console.log('data.group', value)
-        }
-      "
-      :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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
+import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import DatePicker from '@/components/DatePicker.vue'
-  import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
 
 import { onMounted, ref, watch } from 'vue'
 import {
@@ -19,13 +19,14 @@ const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
 const uppp = ref({ id: 0, name: uppPlaceholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
-const posko = ref({ id: 0 ,name: poskoPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 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) => {
+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,25 +16,25 @@ const props = defineProps({
     type: String,
     default: '1 Menit'
   }
- 
 })
-const handleInput = (e :any) => {
+
-  e.value = e.value.replace(/[^0-9.]/g, '')
+const handleInput = (e: any) => {
+  e.target.value = e.target.value.replace(/[^0-9.]/g, '')
 }
-const handleBlur = (e :any) => {
+
-  e.value = e.value ? e.value + ' Menit' : ''
+const handleBlur = (e: any) => {
+  e.target.value = e.target.value ? e.target.value + ' Menit' : ''
 }
-const handleFocus = (e:any) => {
+
-  e.value = e.value.replace(/[^0-9.]/g, '')
+const handleFocus = (e: any) => {
+  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"
+      :value="props.value"
       autocomplete="off"
       type="text"
       :placeholder="placeholder"
@@ -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

@@ -2,58 +2,58 @@
 import { ref } from 'vue'
 
 const props = defineProps({
-    type: {
+  type: {
-        type: String,
+    type: String,
-        default: "text",
+    default: 'text'
-    },
+  },
-    placeholder: {
+  placeholder: {
-        type: String,
+    type: String,
-        default: "",
+    default: ''
-    },
+  },
-    value: {
+  value: {
-        type: String,
+    type: String,
-        default: "",
+    default: ''
-    },
+  },
-    disabled: {
+  disabled: {
-        type: Boolean,
+    type: Boolean,
-        default: false,
+    default: false
-    },
+  },
-    readonly: {
+  readonly: {
-        type: Boolean,
+    type: Boolean,
-        default: false,
+    default: false
-    },
+  },
-    className: {
+  className: {
-        type: String,
+    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)
+  emit('update:value', value)
 }
 
 const inputType = ref(props.type)
 const switchInputType = () => {
-    inputType.value = inputType.value == 'password' ? 'text' : 'password'
+  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)"
+    <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">
+    <span @click="switchInputType" v-if="type == 'password'"
-            <svg width="20" height="20" viewBox="0 0 20 20"
+      class="absolute top-0 bottom-0 right-0 mx-3 my-auto cursor-pointer h-fit">
-                :class="[inputType == 'password' ? 'fill-gray-500' : 'fill-primary-500']">
+      <svg width="20" height="20" viewBox="0 0 20 20"
-                <path
+        :class="[inputType == 'password' ? 'fill-gray-500' : 'fill-primary-500']">
-                    d="M19.3211 9.74688C19.2937 9.68516 18.632 8.21719 17.1609 6.74609C15.2008 4.78594 12.725 3.75 9.99999 3.75C7.27499 3.75 4.79921 4.78594 2.83905 6.74609C1.36796 8.21719 0.703118 9.6875 0.678899 9.74688C0.643362 9.82681 0.625 9.91331 0.625 10.0008C0.625 10.0883 0.643362 10.1748 0.678899 10.2547C0.706243 10.3164 1.36796 11.7836 2.83905 13.2547C4.79921 15.2141 7.27499 16.25 9.99999 16.25C12.725 16.25 15.2008 15.2141 17.1609 13.2547C18.632 11.7836 19.2937 10.3164 19.3211 10.2547C19.3566 10.1748 19.375 10.0883 19.375 10.0008C19.375 9.91331 19.3566 9.82681 19.3211 9.74688ZM9.99999 15C7.5953 15 5.49452 14.1258 3.75546 12.4023C3.0419 11.6927 2.43483 10.8836 1.95312 10C2.4347 9.11636 3.04179 8.30717 3.75546 7.59766C5.49452 5.87422 7.5953 5 9.99999 5C12.4047 5 14.5055 5.87422 16.2445 7.59766C16.9595 8.307 17.5679 9.11619 18.0508 10C17.4875 11.0516 15.0336 15 9.99999 15ZM9.99999 6.25C9.25831 6.25 8.53329 6.46993 7.9166 6.88199C7.29992 7.29404 6.81927 7.87971 6.53544 8.56494C6.25162 9.25016 6.17735 10.0042 6.32205 10.7316C6.46674 11.459 6.82389 12.1272 7.34834 12.6517C7.87279 13.1761 8.54097 13.5333 9.2684 13.6779C9.99583 13.8226 10.7498 13.7484 11.4351 13.4645C12.1203 13.1807 12.7059 12.7001 13.118 12.0834C13.5301 11.4667 13.75 10.7417 13.75 10C13.749 9.00576 13.3535 8.05253 12.6505 7.34949C11.9475 6.64645 10.9942 6.25103 9.99999 6.25ZM9.99999 12.5C9.50554 12.5 9.02219 12.3534 8.61107 12.0787C8.19994 11.804 7.87951 11.4135 7.69029 10.9567C7.50107 10.4999 7.45157 9.99723 7.54803 9.51227C7.64449 9.02732 7.88259 8.58186 8.23222 8.23223C8.58186 7.8826 9.02731 7.6445 9.51227 7.54804C9.99722 7.45157 10.4999 7.50108 10.9567 7.6903C11.4135 7.87952 11.804 8.19995 12.0787 8.61107C12.3534 9.0222 12.5 9.50555 12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 9.99999 12.5Z" />
+        <path
-            </svg>
+          d="M19.3211 9.74688C19.2937 9.68516 18.632 8.21719 17.1609 6.74609C15.2008 4.78594 12.725 3.75 9.99999 3.75C7.27499 3.75 4.79921 4.78594 2.83905 6.74609C1.36796 8.21719 0.703118 9.6875 0.678899 9.74688C0.643362 9.82681 0.625 9.91331 0.625 10.0008C0.625 10.0883 0.643362 10.1748 0.678899 10.2547C0.706243 10.3164 1.36796 11.7836 2.83905 13.2547C4.79921 15.2141 7.27499 16.25 9.99999 16.25C12.725 16.25 15.2008 15.2141 17.1609 13.2547C18.632 11.7836 19.2937 10.3164 19.3211 10.2547C19.3566 10.1748 19.375 10.0883 19.375 10.0008C19.375 9.91331 19.3566 9.82681 19.3211 9.74688ZM9.99999 15C7.5953 15 5.49452 14.1258 3.75546 12.4023C3.0419 11.6927 2.43483 10.8836 1.95312 10C2.4347 9.11636 3.04179 8.30717 3.75546 7.59766C5.49452 5.87422 7.5953 5 9.99999 5C12.4047 5 14.5055 5.87422 16.2445 7.59766C16.9595 8.307 17.5679 9.11619 18.0508 10C17.4875 11.0516 15.0336 15 9.99999 15ZM9.99999 6.25C9.25831 6.25 8.53329 6.46993 7.9166 6.88199C7.29992 7.29404 6.81927 7.87971 6.53544 8.56494C6.25162 9.25016 6.17735 10.0042 6.32205 10.7316C6.46674 11.459 6.82389 12.1272 7.34834 12.6517C7.87279 13.1761 8.54097 13.5333 9.2684 13.6779C9.99583 13.8226 10.7498 13.7484 11.4351 13.4645C12.1203 13.1807 12.7059 12.7001 13.118 12.0834C13.5301 11.4667 13.75 10.7417 13.75 10C13.749 9.00576 13.3535 8.05253 12.6505 7.34949C11.9475 6.64645 10.9942 6.25103 9.99999 6.25ZM9.99999 12.5C9.50554 12.5 9.02219 12.3534 8.61107 12.0787C8.19994 11.804 7.87951 11.4135 7.69029 10.9567C7.50107 10.4999 7.45157 9.99723 7.54803 9.51227C7.64449 9.02732 7.88259 8.58186 8.23222 8.23223C8.58186 7.8826 9.02731 7.6445 9.51227 7.54804C9.99722 7.45157 10.4999 7.50108 10.9567 7.6903C11.4135 7.87952 11.804 8.19995 12.0787 8.61107C12.3534 9.0222 12.5 9.50555 12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 9.99999 12.5Z" />
-        </span>
+      </svg>
-    </div>
+    </span>
+  </div>
 </template>

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">
+    <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">
@@ -17,8 +14,8 @@
         <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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            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" />
@@ -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

@@ -10,8 +10,8 @@
         <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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            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" />
@@ -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,15 +323,19 @@ 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
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-        data.value =  queryResult.data.daftarGangguanDialihkanKePoskoLain
+      data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)

src/components/Pages/Gangguan/Table_10.vue

@@ -1,101 +1,245 @@
 <!-- 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"
-    </Filters>
+  >
-    <div id="data">
+    <Type1 @update:filters="(value) => (filters = value)" />
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+  </Filters>
-            :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" 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 css-class="custom-table-column" :width="50" alignment="center"
+  <div id="data">
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+    <DxDataGrid
-            <DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
+      class="max-h-[calc(100vh-140px)]"
-            <DxColumn :width="150" alignment="center" data-field="sub_kelompok" caption="Sub Kelompok (Equipment)"
+      :data-source="data"
-                css-class="custom-table-column" />
+      :show-column-lines="true"
-            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+      :show-row-lines="false"
-                <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
+      :show-borders="true"
-                    css-class="custom-table-column" />
+      :row-alternation-enabled="true"
-                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+      :hover-state-enabled="true"
-                    <DxColumn :width="120" alignment="center" data-field="selesai" data-type="number" caption="Jml"
+      @selection-changed="onSelectionChanged"
-                        css-class="custom-table-column" />
+      :column-width="100"
-                    <DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+      @exporting="onExporting"
-                        css-class="custom-table-column" />
+      :allow-column-resizing="true"
-                </DxColumn>
+      column-resizing-mode="widget"
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+      :word-wrap-enabled="true"
-                    <DxColumn :width="120" alignment="center" data-field="in_process" data-type="number" caption="Jml"
+    >
-                        css-class="custom-table-column" />
+      <DxSelection mode="single" />
-                    <DxColumn :width="120" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
+      <DxPaging :enabled="false" />
-                        css-class="custom-table-column" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-                </DxColumn>
+      <DxLoadPanel
-            </DxColumn>
+        :position="position"
-            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+        :show-indicator="showIndicator"
-                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+        :show-pane="showPane"
-                    <DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
+        :shading="shading"
-                        caption="Total" css-class="custom-table-column" />
+        v-if="loading"
-                    <DxColumn :width="120" alignment="center" data-field="avg_waktu_response_time" data-type="number"
+        v-model:visible="loading"
-                        caption="Rata-Rata" css-class="custom-table-column" />
+        :enabled="true"
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
+      />
-                        caption="Max" css-class="custom-table-column" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-                    <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
+      <DxExport
-                        caption="Min" css-class="custom-table-column" />
+        :enabled="true"
-                </DxColumn>
+        :formats="['pdf', 'xlsx', 'document']"
-                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+        :allow-export-selected-data="false"
-                    <DxColumn :width="120" alignment="center" data-field="di_atas_sla_durasi_response" data-type="number"
+      />
-                        caption=">SLA" css-class="custom-table-column" />
+      <DxColumnFixing :enabled="true" />
-                    <DxColumn :width="120" alignment="center" data-field="dibawah_sla_durasi_response" data-type="number"
+
-                        caption="≤SLA" css-class="custom-table-column" />
+      <DxColumn
-                </DxColumn>
+        css-class="custom-table-column"
-            </DxColumn>
+        :width="50"
-            <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
+        alignment="center"
-                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                    <DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
+        data-type="number"
-                        caption="Total" css-class="custom-table-column" />
+        caption="No"
-                    <DxColumn :width="120" alignment="center" data-field="avg_waktu_recovery_time" data-type="number"
+      />
-                        caption="Rata-Rata" css-class="custom-table-column" />
+      <DxColumn
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number"
+        :width="120"
-                        caption="Max" css-class="custom-table-column" />
+        alignment="center"
-                    <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
+        data-field="kode"
-                        caption="Min" css-class="custom-table-column" />
+        caption="Kode"
-                </DxColumn>
+        css-class="custom-table-column"
-                <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="150"
-                    <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="sub_kelompok"
-                </DxColumn>
+        caption="Sub Kelompok (Equipment)"
-            </DxColumn>
+        css-class="custom-table-column"
-        </DxDataGrid>
+      />
-    </div>
+      <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+        <DxColumn
+          :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"
+            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"
+            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"
+            caption="Total"
+            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"
+            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"
+            caption="Total"
+            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"
+            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>
+  </div>
 </template>
 
 <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,
+  DxColumn,
-    DxColumnFixing,
+  DxColumnFixing,
-    DxExport,
+  DxExport,
-    DxLoadPanel,
+  DxLoadPanel,
-    DxPaging,
+  DxPaging,
-    DxScrolling,
+  DxScrolling,
-    DxSearchPanel,
+  DxSearchPanel,
-    DxSelection
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -146,69 +290,74 @@ const GET_REKAP_JENIS_GANGGUAN_SE004 = gql`
     }
   }
 `
+
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
+  if (e.format === 'pdf') {
-        const doc = new jsPDF()
+    const doc = new jsPDF()
 
-        exportToPdf({
+    exportToPdf({
-            jsPDFDocument: doc,
+      jsPDFDocument: doc,
-            component: e.component,
+      component: e.component,
-            indent: 5
+      indent: 5
-        }).then(() => {
+    }).then(() => {
-            doc.save(`.pdf`)
+      doc.save(`.pdf`)
-        })
+    })
-    } else {
+  } else {
-        const workbook = new Workbook()
+    const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+    exportToExcel({
-            component: e.component,
+      component: e.component,
-            worksheet,
+      worksheet,
-            autoFilterEnabled: true
+      autoFilterEnabled: true
-        }).then(() => {
+    }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
+      })
-        })
+    })
 
-        e.cancel = true
+    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),
-    posko: 0,
-    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),
-        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;
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN_SE004, {
-            console.log(queryResult.loading)
+  dateFrom: new Date().toISOString().slice(0, 10),
-            console.log(queryResult.networkStatus)
+  dateTo: new Date().toISOString().slice(0, 10),
-        }
+  posko: 0,
-    })
+  idUid: 0,
-    onError((queryError) => {
+  idUp3: 0
-        console.log(queryError)
+})
-    })
+
+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),
+    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
+      console.log(queryResult.loading)
+      console.log(queryResult.networkStatus)
+    }
+  })
+  onError((queryError) => {
+    console.log(queryError)
+  })
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  const data = selectedRowsData[0]
-    console.log(data)
+  console.log(data)
 }
 
-const filters = ref();
+const filters = ref()
-
 </script>

src/components/Pages/Gangguan/Table_11.vue

@@ -1,324 +1,626 @@
 <!-- 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"
-    </Filters>
+  >
-    <div id="data">
+    <Type8 @update:filters="(value) => (filters = value)" />
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+  </Filters>
-            :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" 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="no" caption="NO" css-class="custom-table-column" />
+  <div id="data">
-            <DxColumn :width="150" name="poskoGroup" alignment="center" data-field="nama_posko" caption="Posko"
+    <DxDataGrid
-                css-class="custom-table-column" :group-index="0" />
+      class="max-h-[calc(100vh-140px)]"
-            <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko" css-class="custom-table-column" />
+      :data-source="data"
-            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+      :show-column-lines="true"
-                <DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
+      :show-row-lines="false"
-                    css-class="custom-table-column" />
+      :show-borders="true"
-                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+      :row-alternation-enabled="true"
-                    <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
+      :hover-state-enabled="true"
-                        caption="Jml" css-class="custom-table-column" />
+      @selection-changed="onSelectionChanged"
-                    <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
+      :column-width="100"
-                        caption="%" css-class="custom-table-column" />
+      @exporting="onExporting"
-                </DxColumn>
+      :allow-column-resizing="true"
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+      column-resizing-mode="widget"
-                    <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
+      :word-wrap-enabled="true"
-                        caption="Jml" css-class="custom-table-column" />
+    >
-                    <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
+      <DxSelection mode="single" />
-                        caption="%" css-class="custom-table-column" />
+      <DxPaging :enabled="false" />
-                </DxColumn>
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            </DxColumn>
+      <DxLoadPanel
-            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+        :position="position"
-                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+        :show-indicator="showIndicator"
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
+        :show-pane="showPane"
-                        caption="Total" css-class="custom-table-column" />
+        :shading="shading"
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
+        v-if="loading"
-                        caption="Rata-Rata" css-class="custom-table-column" />
+        v-model:visible="loading"
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number"
+        :enabled="true"
-                        caption="Max" css-class="custom-table-column" />
+      />
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number"
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-                        caption="Min" css-class="custom-table-column" />
+      <DxExport
-                </DxColumn>
+        :enabled="true"
-                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+        :formats="['pdf', 'xlsx', 'document']"
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
+        :allow-export-selected-data="false"
-                        caption=">SLA" css-class="custom-table-column" />
+      />
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
+      <DxColumnFixing :enabled="true" />
-                        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"
-                        caption="Total" 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"
-                        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>
+      <DxColumn
-                <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
+        :width="60"
-                <DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}" />
+        alignment="center"
-                <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
+        data-field="no"
-                    display-format="{0}" />
+        caption="NO"
-                <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
+        css-class="custom-table-column"
-                    display-format="{0}" />
+      />
-                <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
+      <DxColumn
-                    display-format="{0}" />
+        :width="150"
-                <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
+        name="poskoGroup"
-                    display-format="{0}" />
+        alignment="center"
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
+        data-field="nama_posko"
-                    display-format="{0}" />
+        caption="Posko"
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
+        css-class="custom-table-column"
-                    display-format="{0}" />
+        :group-index="0"
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
+      />
-                    display-format="{0}" />
+      <DxColumn
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
+        :width="150"
-                    display-format="{0}" />
+        alignment="center"
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
+        data-field="nama_posko"
-                    display-format="{0}" />
+        caption="Posko"
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
+        css-class="custom-table-column"
-                    display-format="{0}" />
+      />
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
+      <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    display-format="{0}" />
+        <DxColumn
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
+          :width="120"
-                    display-format="{0}" />
+          alignment="center"
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
+          data-field="laporan.total"
-                    display-format="{0}" />
+          data-type="number"
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
+          caption="Total"
-                    display-format="{0}" />
+          css-class="custom-table-column"
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
+        />
-                    display-format="{0}" />
+        <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
+          <DxColumn
-                    display-format="{0}" />
+            :width="120"
+            alignment="center"
+            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"
+            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"
+            caption="Total"
+            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"
+            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"
+            caption="Total"
+            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"
+            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>
 
-                <DxTotalItem summary-type="sum" display-format="Total" show-in-column="no" css-class="text-white" />
+      <DxSummary>
-                <DxTotalItem summary-type="sum" display-format="{0}" show-in-column="laporan.total" column="laporan.total"
+        <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
-                    css-class="text-white" />
+        <DxGroupItem
-                <DxTotalItem column="laporan.sudahSelesai.jml" summary-type="sum" display-format="{0}"
+          :show-in-group-footer="true"
-                    css-class="text-white" />
+          column="laporan.total"
-                <DxTotalItem column="laporan.sudahSelesai.persen" summary-type="sum" display-format="{0}"
+          summary-type="sum"
-                    css-class="text-white" />
+          display-format="{0}"
-                <DxTotalItem column="laporan.belumSelesai.jml" summary-type="sum" display-format="{0}"
+        />
-                    css-class="text-white" />
+        <DxGroupItem
-                <DxTotalItem column="laporan.belumSelesai.persen" summary-type="sum" display-format="{0}"
+          :show-in-group-footer="true"
-                    css-class="text-white" />
+          column="laporan.sudahSelesai.jml"
-                <DxTotalItem column="responseTime.menit.total" summary-type="sum" display-format="{0}"
+          summary-type="sum"
-                    css-class="text-white" />
+          display-format="{0}"
-                <DxTotalItem column="responseTime.menit.rataRata" summary-type="sum" display-format="{0}"
+        />
-                    css-class="text-white" />
+        <DxGroupItem
-                <DxTotalItem column="responseTime.menit.max" summary-type="sum" display-format="{0}"
+          :show-in-group-footer="true"
-                    css-class="text-white" />
+          column="laporan.sudahSelesai.persen"
-                <DxTotalItem column="responseTime.menit.min" summary-type="sum" display-format="{0}"
+          summary-type="sum"
-                    css-class="text-white" />
+          display-format="{0}"
-                <DxTotalItem column="responseTime.laporan.lebihSla" summary-type="sum" display-format="{0}"
+        />
-                    css-class="text-white" />
+        <DxGroupItem
-                <DxTotalItem column="responseTime.laporan.kurangSla" summary-type="sum" display-format="{0}"
+          :show-in-group-footer="true"
-                    css-class="text-white" />
+          column="laporan.belumSelesai.jml"
-                <DxTotalItem column="recoveryTime.menit.total" summary-type="sum" display-format="{0}"
+          summary-type="sum"
-                    css-class="text-white" />
+          display-format="{0}"
-                <DxTotalItem column="recoveryTime.menit.rataRata" summary-type="sum" display-format="{0}"
+        />
-                    css-class="text-white" />
+        <DxGroupItem
-                <DxTotalItem column="recoveryTime.menit.max" summary-type="sum" display-format="{0}"
+          :show-in-group-footer="true"
-                    css-class="text-white" />
+          column="laporan.belumSelesai.persen"
-                <DxTotalItem column="recoveryTime.menit.min" summary-type="sum" display-format="{0}"
+          summary-type="sum"
-                    css-class="text-white" />
+          display-format="{0}"
-                <DxTotalItem column="recoveryTime.laporan.lebihSla" summary-type="sum" display-format="{0}"
+        />
-                    css-class="text-white" />
+        <DxGroupItem
-                <DxTotalItem column="recoveryTime.laporan.kurangSla" summary-type="sum" display-format="{0}"
+          :show-in-group-footer="true"
-                    css-class="text-white" />
+          column="responseTime.menit.total"
-            </DxSummary>
+          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}"
+        />
 
-        </DxDataGrid>
+        <DxTotalItem
-    </div>
+          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>
 
 <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(
+  query rekapitulasiGangguanPerPosko(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
+  ) {
     rekapitulasiGangguanPerPosko(
-        dateFrom: $dateFrom
+      dateFrom: $dateFrom
-        dateTo: $dateTo
+      dateTo: $dateTo
-        posko: $posko
+      posko: $posko
-        idUid: $idUid
+      idUid: $idUid
-        idUp3: $idUp3
+      idUp3: $idUp3
     ) {
-        avg_durasi_recovery
+      avg_durasi_recovery
-        avg_durasi_response
+      avg_durasi_response
-        id_posko
+      id_posko
-        max_durasi_recovery
+      max_durasi_recovery
-        max_durasi_response
+      max_durasi_response
-        min_durasi_recovery
+      min_durasi_recovery
-        min_durasi_response
+      min_durasi_response
-        nama_posko
+      nama_posko
-        persen_inproses
+      persen_inproses
-        persen_selesai
+      persen_selesai
-        total
+      total
-        total_diatas_sla_recovery
+      total_diatas_sla_recovery
-        total_diatas_sla_response
+      total_diatas_sla_response
-        total_dibawah_sla_recovery
+      total_dibawah_sla_recovery
-        total_dibawah_sla_response
+      total_dibawah_sla_response
-        total_inproses
+      total_inproses
-        total_selesai
+      total_selesai
-        }
+    }
-}`;
+  }
+`
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
+  if (e.format === 'pdf') {
-        const doc = new jsPDF()
+    const doc = new jsPDF()
 
-        exportToPdf({
+    exportToPdf({
-            jsPDFDocument: doc,
+      jsPDFDocument: doc,
-            component: e.component,
+      component: e.component,
-            indent: 5,
+      indent: 5
-        }).then(() => {
+    }).then(() => {
-            doc.save(`.pdf`)
+      doc.save(`.pdf`)
-        })
+    })
-    } else {
+  } else {
-        const workbook = new Workbook()
+    const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+    exportToExcel({
-            component: e.component,
+      component: e.component,
-            worksheet,
+      worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true
-        }).then(() => {
+    }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
+      })
-        })
+    })
 
-        e.cancel = true
+    e.cancel = true
-    }
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  const data = selectedRowsData[0]
-    console.log(data)
+  console.log(data)
 }
 
 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,
+  posko: 0,
-    idUid: 0,
+  idUid: 0,
-    idUp3: 0,
+  idUp3: 0
 })
+
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
+  const dateValue = params.periode.split(' s/d ')
-    const { posko, uid, up3 } = params
+  const { posko, uid, up3 } = params
-    refetch({
+  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('-')
-        posko: posko ? posko.id : 0,
+      : new Date().toISOString().slice(0, 10),
-        idUid: uid ? uid.id : 0,
+    dateTo: dateValue[1]
-        idUp3: up3 ? up3.id : 0,
+      ? dateValue[1].split('-').reverse().join('-')
-    })
+      : new Date().toISOString().slice(0, 10),
-    onResult(queryResult => {
+    posko: posko ? posko.id : 0,
-        if (queryResult.data != undefined) {
+    idUid: uid ? uid.id : 0,
-
+    idUp3: up3 ? up3.id : 0
-            var i = 1;
+  })
-            queryResult.data.rekapitulasiGangguanPerPosko.forEach((item: any) => {
+  onResult((queryResult) => {
-                const entry = {
+    if (queryResult.data != undefined) {
-                    no: Number(i++),
+      var i = 1
-                    nama_posko: item.nama_posko,
+      queryResult.data.rekapitulasiGangguanPerPosko.forEach((item: any) => {
-                    laporan: {
+        const entry = {
-                        total: item.total,
+          no: Number(i++),
-                        sudahSelesai: {
+          nama_posko: item.nama_posko,
-                            jml: item.total_selesai,
+          laporan: {
-                            persen: item.persen_selesai,
+            total: item.total,
-                        },
+            sudahSelesai: {
-                        belumSelesai: {
+              jml: item.total_selesai,
-                            jml: item.total_inproses,
+              persen: item.persen_selesai
-                            persen: item.persen_inproses,
+            },
-                        },
+            belumSelesai: {
-                    },
+              jml: item.total_inproses,
-                    responseTime: {
+              persen: item.persen_inproses
-                        menit: {
+            }
-                            total: 0,
+          },
-                            rataRata: item.avg_durasi_response,
+          responseTime: {
-                            max: item.max_durasi_response,
+            menit: {
-                            min: item.min_durasi_response,
+              total: 0,
-                        },
+              rataRata: item.avg_durasi_response,
-                        laporan: {
+              max: item.max_durasi_response,
-                            lebihSla: item.total_diatas_sla_response,
+              min: item.min_durasi_response
-                            kurangSla: item.total_dibawah_sla_response,
+            },
-                        },
+            laporan: {
-                    },
+              lebihSla: item.total_diatas_sla_response,
-                    recoveryTime: {
+              kurangSla: item.total_dibawah_sla_response
-                        menit: {
+            }
-                            total: 0,
+          },
-                            rataRata: item.avg_durasi_recovery,
+          recoveryTime: {
-                            max: item.max_durasi_recovery,
+            menit: {
-                            min: item.min_durasi_recovery,
+              total: 0,
-                        },
+              rataRata: item.avg_durasi_recovery,
-                        laporan: {
+              max: item.max_durasi_recovery,
-                            lebihSla: item.total_diatas_sla_recovery,
+              min: item.min_durasi_recovery
-                            kurangSla: item.total_dibawah_sla_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)
+        data.value = [...data.value, entry]
-        console.log(queryResult.loading)
+      })
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
 
+      data.value = [...data.value]
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_12.vue

@@ -1,203 +1,531 @@
 <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>
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            <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" v-model:visible="loading" :enabled="true" />
 
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+  <div id="data">
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+    <DxDataGrid
-            <DxColumnFixing :enabled="true" />
+      class="max-h-[calc(100vh-140px)]"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <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"
+      />
 
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+      <DxExport
-            <DxColumn :width="120" alignment="center" data-field="id_regu" caption="Kode"
+        :enabled="true"
-                css-class="custom-table-column" />
+        :formats="['pdf', 'xlsx', 'document']"
-            <DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu"
+        :allow-export-selected-data="false"
-                css-class="custom-table-column" />
+      />
-            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+      <DxColumnFixing :enabled="true" />
-                <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
+
-                    css-class="custom-table-column" />
+      <DxColumn
-                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+        css-class="custom-table-column"
-                    <DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
+        :width="60"
-                        css-class="custom-table-column" />
+        alignment="center"
-                    <DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                        css-class="custom-table-column" />
+        data-field="no"
-                </DxColumn>
+        data-type="number"
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+        caption="No"
-                    <DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
+      />
-                        css-class="custom-table-column" />
+      <DxColumn
-                    <DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+        :width="120"
-                        css-class="custom-table-column" />
+        alignment="center"
-                </DxColumn>
+        data-field="id_regu"
-            </DxColumn>
+        caption="Kode"
-            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+        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="id_regu"
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
+        caption="Kode"
-                        caption="Max" css-class="custom-table-column" />
+        css-class="custom-table-column"
-                    <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
+        group-index="0"
-                        caption="Min" css-class="custom-table-column" />
+        v-if="filters.groupBy"
-                </DxColumn>
+      />
-                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+      <DxColumn
-                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+        :width="150"
-                        caption=">SLA" css-class="custom-table-column" />
+        alignment="center"
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+        data-field="nama_regu"
-                        caption="≤SLA" css-class="custom-table-column" />
+        caption="Nama Regu"
-                </DxColumn>
+        css-class="custom-table-column"
-            </DxColumn>
+      />
-            <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
+      <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+        <DxColumn
-                    <DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
+          :width="120"
-                        css-class="custom-table-column" />
+          alignment="center"
-                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+          data-field="laporan.total"
-                        caption="Rata-Rata" css-class="custom-table-column" />
+          data-type="number"
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
+          caption="Total"
-                        caption="Max" css-class="custom-table-column" />
+          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 alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                </DxColumn>
+          <DxColumn
-                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+            :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+            alignment="center"
-                        caption=">SLA" css-class="custom-table-column" />
+            data-field="laporan.sudahSelesai.jml"
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+            data-type="number"
-                        caption="≤SLA" css-class="custom-table-column" />
+            caption="Jml"
-                </DxColumn>
+            css-class="custom-table-column"
-            </DxColumn>
+          />
-        </DxDataGrid>
+          <DxColumn
-    </div>
+            :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"
+            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"
+            caption="Total"
+            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"
+            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"
+            caption="Total"
+            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"
+            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>
 
 <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(
+  query rekapitulasiGangguanPerRegu(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
+  ) {
     rekapitulasiGangguanPerRegu(
-        dateFrom: $dateFrom
+      dateFrom: $dateFrom
-        dateTo: $dateTo
+      dateTo: $dateTo
-        posko: $posko
+      posko: $posko
-        idUid: $idUid
+      idUid: $idUid
-        idUp3: $idUp3
+      idUp3: $idUp3
     ) {
-        id_regu
+      id_regu
-        nama_regu
+      nama_regu
-        avg_durasi_recovery
+      avg_durasi_recovery
-        avg_durasi_response
+      avg_durasi_response
-        max_durasi_recovery
+      max_durasi_recovery
-        max_durasi_response
+      max_durasi_response
-        min_durasi_recovery
+      min_durasi_recovery
-        min_durasi_response
+      min_durasi_response
-        persen_inproses
+      persen_inproses
-        persen_selesai
+      persen_selesai
-        nama_posko
+      nama_posko
-        total
+      total
-        total_diatas_sla_recovery
+      total_diatas_sla_recovery
-        total_diatas_sla_response
+      total_diatas_sla_response
-        total_dibawah_sla_recovery
+      total_dibawah_sla_recovery
-        total_dibawah_sla_response
+      total_dibawah_sla_response
-        total_inproses
+      total_inproses
-        total_selesai
+      total_selesai
-        }
-}`;
-const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
-
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
-
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
-
-        e.cancel = true
     }
+  }
+`
+
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
+
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
+
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  const data = selectedRowsData[0]
-    console.log(data)
+  console.log(data)
 }
-const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
-    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,
-})
-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),
-        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.rekapitulasiGangguanPerRegu;
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
 
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
+  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
+})
+
+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),
+    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) {
+      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)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref()
+
+const filters = ref({
+  groupBy: false
+})
 </script>

src/components/Pages/Gangguan/Table_13.vue

@@ -1,203 +1,349 @@
 <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>
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            <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" v-model:visible="loading" :enabled="true" />
 
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+  <div id="data">
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+    <DxDataGrid
-            <DxColumnFixing :enabled="true" />
+      class="max-h-[calc(100vh-140px)]"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <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"
+      />
 
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+      <DxExport
-            <DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
+        :enabled="true"
-                css-class="custom-table-column" />
+        :formats="['pdf', 'xlsx', 'document']"
-            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+        :allow-export-selected-data="false"
-                <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
+      />
-                    css-class="custom-table-column" />
+      <DxColumnFixing :enabled="true" />
-                <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" />
+        css-class="custom-table-column"
-                    <DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+        :width="50"
-                        css-class="custom-table-column" />
+        alignment="center"
-                </DxColumn>
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+        data-type="number"
-                    <DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
+        caption="No"
-                        css-class="custom-table-column" />
+      />
-                    <DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+      <DxColumn
-                        css-class="custom-table-column" />
+        :width="170"
-                </DxColumn>
+        alignment="center"
-            </DxColumn>
+        data-field="tanggal"
-            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+        caption="Tanggal Lapor"
-                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+        css-class="custom-table-column"
-                    <DxColumn :width="120" alignment="center" data-field="total_response" data-type="number" caption="Total"
+      />
-                        css-class="custom-table-column" />
+      <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
+        <DxColumn
-                        caption="Rata-Rata" css-class="custom-table-column" />
+          :width="120"
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
+          alignment="center"
-                        caption="Max" css-class="custom-table-column" />
+          data-field="total"
-                    <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
+          data-type="number"
-                        caption="Min" css-class="custom-table-column" />
+          caption="Total"
-                </DxColumn>
+          css-class="custom-table-column"
-                <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 alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                        caption=">SLA" css-class="custom-table-column" />
+          <DxColumn
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+            :width="120"
-                        caption="≤SLA" css-class="custom-table-column" />
+            alignment="center"
-                </DxColumn>
+            data-field="total_selesai"
-            </DxColumn>
+            data-type="number"
-            <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
+            caption="Jml"
-                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+            css-class="custom-table-column"
-                    <DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
+          />
-                        css-class="custom-table-column" />
+          <DxColumn
-                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+            :width="120"
-                        caption="Rata-Rata" css-class="custom-table-column" />
+            alignment="center"
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number"
+            data-field="persen_selesai"
-                        caption="Max" css-class="custom-table-column" />
+            data-type="number"
-                    <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
+            caption="%"
-                        caption="Min" css-class="custom-table-column" />
+            css-class="custom-table-column"
-                </DxColumn>
+          />
-                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+        </DxColumn>
-                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+        <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                        caption=">SLA" css-class="custom-table-column" />
+          <DxColumn
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+            :width="120"
-                        caption="≤SLA" css-class="custom-table-column" />
+            alignment="center"
-                </DxColumn>
+            data-field="total_inproses"
-            </DxColumn>
+            data-type="number"
-        </DxDataGrid>
+            caption="Jml"
-    </div>
+            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"
+            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"
+            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"
+            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"
+            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>
+  </div>
 </template>
 
 <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') {
+  if (e.format === 'pdf') {
-        const doc = new jsPDF()
+    const doc = new jsPDF()
 
-        exportToPdf({
+    exportToPdf({
-            jsPDFDocument: doc,
+      jsPDFDocument: doc,
-            component: e.component,
+      component: e.component,
-            indent: 5,
+      indent: 5
-        }).then(() => {
+    }).then(() => {
-            doc.save(`.pdf`)
+      doc.save(`.pdf`)
-        })
+    })
-    } else {
+  } else {
-        const workbook = new Workbook()
+    const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+    exportToExcel({
-            component: e.component,
+      component: e.component,
-            worksheet,
+      worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true
-        }).then(() => {
+    }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
+      })
-        })
+    })
 
-        e.cancel = true
+    e.cancel = true
-    }
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  const data = selectedRowsData[0]
-    console.log(data)
+  console.log(data)
 }
 
-
 const data = ref<any[]>([])
 const GET_REKAPITULASI_GANGGUAN_PER_TANGGAL = gql`
-query rekapitulasiGangguanPerTanggal(
+  query rekapitulasiGangguanPerTanggal(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
+  ) {
     rekapitulasiGangguanPerTanggal(
-        dateFrom: $dateFrom
+      dateFrom: $dateFrom
-        dateTo: $dateTo
+      dateTo: $dateTo
-        posko: $posko
+      posko: $posko
-        idUid: $idUid
+      idUid: $idUid
-        idUp3: $idUp3
+      idUp3: $idUp3
     ) {
-        nama_posko
+      nama_posko
-        avg_durasi_recovery
+      avg_durasi_recovery
-        avg_durasi_response
+      avg_durasi_response
-        max_durasi_recovery
+      max_durasi_recovery
-        max_durasi_response
+      max_durasi_response
-        min_durasi_recovery
+      min_durasi_recovery
-        min_durasi_response
+      min_durasi_response
-        persen_inproses
+      persen_inproses
-        persen_selesai
+      persen_selesai
-        tanggal
+      tanggal
-        total
+      total
-        total_diatas_sla_recovery
+      total_diatas_sla_recovery
-        total_diatas_sla_response
+      total_diatas_sla_response
-        total_dibawah_sla_recovery
+      total_dibawah_sla_recovery
-        total_dibawah_sla_response
+      total_dibawah_sla_response
-        total_inproses
+      total_inproses
-        total_selesai
+      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,
+  posko: 0,
-    idUid: 0,
+  idUid: 0,
-    idUp3: 0,
+  idUp3: 0
 })
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
+  const dateValue = params.periode.split(' s/d ')
-    const { posko, uid, up3 } = params
+  const { posko, uid, up3 } = params
-    refetch({
+  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('-')
-        posko: posko ? posko.id : 0,
+      : new Date().toISOString().slice(0, 10),
-        idUid: uid ? uid.id : 0,
+    dateTo: dateValue[1]
-        idUp3: up3 ? up3.id : 0,
+      ? dateValue[1].split('-').reverse().join('-')
-    })
+      : new Date().toISOString().slice(0, 10),
-    onResult(queryResult => {
+    posko: posko ? posko.id : 0,
-        if (queryResult.data != undefined) {
+    idUid: uid ? uid.id : 0,
-            data.value = queryResult.data.rekapitulasiGangguanPerTanggal;
+    idUp3: up3 ? up3.id : 0
-        }
+  })
-        console.log(queryResult.data)
+  onResult((queryResult) => {
-        console.log(queryResult.loading)
+    if (queryResult.data != undefined) {
-        console.log(queryResult.networkStatus)
+      data.value = queryResult.data.rekapitulasiGangguanPerTanggal
-    })
+    }
-    onError((error) => {
+    console.log(queryResult.data)
-        console.log(error)
+    console.log(queryResult.loading)
-    })
+    console.log(queryResult.networkStatus)
-
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_14.vue

@@ -1,53 +1,100 @@
 <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"
-    </Filters>
+  >
-    <div id="data">
+    <Type1 @update:filters="(value) => (filters = value)" />
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+  </Filters>
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+  <div id="data">
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+    <DxDataGrid
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+      class="max-h-[calc(100vh-140px)]"
-            <DxSelection mode="single" />
+      :data-source="data"
-            <DxPaging :enabled="false" />
+      :show-column-lines="true"
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+      :show-row-lines="false"
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
+      :show-borders="true"
-                v-model:visible="loading" :enabled="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"
+        v-model:visible="loading"
+        :enabled="true"
+      />
 
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
-            <DxColumnFixing :enabled="true" />
+        :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"
-            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
+        data-type="number"
-                    :caption="i" css-class="custom-table-column" />
+        caption="No"
-            </DxColumn>
+      />
-            <DxColumn :width="170" alignment="center" data-field="total" caption="Total"
+      <DxColumn
-                css-class="custom-table-column" />
+        :width="170"
-        </DxDataGrid>
+        alignment="center"
-    </div>
+        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"
+          :caption="i"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="total"
+        caption="Total"
+        css-class="custom-table-column"
+      />
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import {  ref } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
+  DxColumn,
-    DxColumnFixing,
+  DxColumnFixing,
-    DxExport,
+  DxExport,
-    DxLoadPanel,
+  DxLoadPanel,
-    DxPaging,
+  DxPaging,
-    DxScrolling,
+  DxScrolling,
-    DxSearchPanel,
+  DxSearchPanel,
-    DxSelection
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -56,42 +103,43 @@ 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)
 const showPane = ref(true)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
+  if (e.format === 'pdf') {
-        const doc = new jsPDF()
+    const doc = new jsPDF()
 
-        exportToPdf({
+    exportToPdf({
-            jsPDFDocument: doc,
+      jsPDFDocument: doc,
-            component: e.component,
+      component: e.component,
-            indent: 5
+      indent: 5
-        }).then(() => {
+    }).then(() => {
-            doc.save(`.pdf`)
+      doc.save(`.pdf`)
-        })
+    })
-    } else {
+  } else {
-        const workbook = new Workbook()
+    const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+    exportToExcel({
-            component: e.component,
+      component: e.component,
-            worksheet,
+      worksheet,
-            autoFilterEnabled: true
+      autoFilterEnabled: true
-        }).then(() => {
+    }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
+      })
-        })
+    })
 
-        e.cancel = true
+    e.cancel = true
-    }
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  const data = selectedRowsData[0]
-    console.log(data)
+  console.log(data)
 }
 
 const data = ref<any[]>([])
@@ -148,36 +196,40 @@ const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
 `
 
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
-    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,
+  posko: 0,
-    idUid: 0,
+  idUid: 0,
-    idUp3: 0
+  idUp3: 0
 })
+
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
+  const dateValue = params.periode.split(' s/d ')
-    const { posko, uid, up3 } = params
+  const { posko, uid, up3 } = params
-    refetch({
+  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('-')
-        posko: posko ? posko.id : 0,
+      : new Date().toISOString().slice(0, 10),
-        idUid: uid ? uid.id : 0,
+    dateTo: dateValue[1]
-        idUp3: up3 ? up3.id : 0,
+      ? dateValue[1].split('-').reverse().join('-')
-    })
+      : new Date().toISOString().slice(0, 10),
-
+    posko: posko ? posko.id : 0,
-
+    idUid: uid ? uid.id : 0,
-    onResult((queryResult) => {
+    idUp3: up3 ? up3.id : 0
-        if (queryResult.data != undefined) {
+  })
-            data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
 
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_15.vue

@@ -1,36 +1,85 @@
 <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"
-    </Filters>
+  >
-    <div id="data">
+    <Type1 @update:filters="(value) => (filters = value)" />
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+  </Filters>
-            :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"
-                v-model:visible="loading" :enabled="true" />
 
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+  <div id="data">
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+    <DxDataGrid
-            <DxColumnFixing :enabled="true" />
+      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"
+      @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"
+        v-model:visible="loading"
+        :enabled="true"
+      />
 
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+      <DxExport
-            <DxColumn alignment="center" data-field="nama_up3" caption="Nama UP3" css-class="custom-table-column" />
+        :enabled="true"
-            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Posko" css-class="custom-table-column" />
+        :formats="['pdf', 'xlsx', 'document']"
-            <DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN"
+        :allow-export-selected-data="false"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="100" alignment="center" data-field="posko_out" caption="Posko OUT"
+      <DxColumnFixing :enabled="true" />
-                css-class="custom-table-column" />
 
-        </DxDataGrid>
+      <DxColumn
-    </div>
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <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>
 
 <script setup lang="ts">
@@ -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,104 +104,107 @@ 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') {
+  if (e.format === 'pdf') {
-        const doc = new jsPDF()
+    const doc = new jsPDF()
 
-        exportToPdf({
+    exportToPdf({
-            jsPDFDocument: doc,
+      jsPDFDocument: doc,
-            component: e.component,
+      component: e.component,
-            indent: 5,
+      indent: 5
-        }).then(() => {
+    }).then(() => {
-            doc.save(`.pdf`)
+      doc.save(`.pdf`)
-        })
+    })
-    } else {
+  } else {
-        const workbook = new Workbook()
+    const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+    exportToExcel({
-            component: e.component,
+      component: e.component,
-            worksheet,
+      worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true
-        }).then(() => {
+    }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
+      })
-        })
+    })
 
-        e.cancel = true
+    e.cancel = true
-    }
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  const data = selectedRowsData[0]
-    console.log(data)
+  console.log(data)
 }
 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
-        dateFrom: $dateFrom
+      dateTo: $dateTo
-        dateTo: $dateTo
+      posko: $posko
-        posko: $posko
+      idUid: $idUid
-        idUid: $idUid
+      idUp3: $idUp3
-        idUp3: $idUp3
     ) {
-        id_posko
+      id_posko
-id_uid
+      id_uid
-id_up3
+      id_up3
-nama_posko
+      nama_posko
-nama_uid
+      nama_uid
-nama_up3
+      nama_up3
-posko_in
+      posko_in
-posko_out
+      posko_out
-        }
+    }
-}`;
+  }
+`
 
-const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
+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,
+  posko: 0,
-    idUid: 0,
+  idUid: 0,
-    idUp3: 0,
+  idUp3: 0
 })
 
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
+  const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+  const { posko, uid, up3 } = params
-    refetch({
+  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('-')
-        posko: posko ? posko.id : 0,
+      : new Date().toISOString().slice(0, 10),
-        idUid: uid ? uid.id :0,
+    dateTo: dateValue[1]
-        idUp3: up3? up3.id:0,
+      ? dateValue[1].split('-').reverse().join('-')
-    })
+      : new Date().toISOString().slice(0, 10),
-
+    posko: posko ? posko.id : 0,
-
+    idUid: uid ? uid.id : 0,
-    onResult(queryResult => {
+    idUp3: up3 ? up3.id : 0
-        if (queryResult.data != undefined) {
+  })
-            data.value = queryResult.data.rekapitulasiGangguanAlihPosko;
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
 
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiGangguanAlihPosko
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_2.vue

@@ -1,166 +1,271 @@
 <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>
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="" :allow-column-resizing="true"
-            column-resizing-mode="widget">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible.sync="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-                caption="No Laporan" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
-                caption="Tgl Lapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
-                caption="Tgl Response" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
-                caption="Tgl Recovery" cell-template="data" />
-            <DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
-                cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
-                caption="Durasi Response Time" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-                caption="Durasi Recovery Time" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-                caption="Status" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
-                caption="IDPEL/NO METER" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-                caption="Nama Pelapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-                caption="Alamat Pelapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-                caption="No Telp Pelapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-                caption="Keterangan Pelapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
-                caption="Sumber Lapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
-                cell-template="data" />
 
-            <template #data="{ data }">
+  <div id="data">
-                <span class="cursor-pointer" @click="showData()">
+    <DxDataGrid
-                    {{ data.text }}
+      class="max-h-[calc(100vh-140px)]"
-                </span>
+      :data-source="data"
-            </template>
+      :show-column-lines="true"
-        </DxDataGrid>
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting=""
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible.sync="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        alignment="center"
+        data-field="jumlah_lapor"
+        caption="Jml Lapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+        cell-template="data"
+      />
+
+      <template #data="{ data }">
+        <span class="cursor-pointer" @click="showData()">
+          {{ data.text }}
+        </span>
+      </template>
+    </DxDataGrid>
+  </div>
+
+  <DetailDialog
+    :open="showDetail"
+    title="Daftar Gangguan Melapor Lebih Dari 1 Kali"
+    @on-close="closeDetail"
+  >
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
+        <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">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/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>
-
+  </DetailDialog>
-    <DetailDialog :open="showDetail" title="Daftar Gangguan Melapor Lebih Dari 1 Kali" @on-close="closeDetail">
-        <div class="w-full p-4 space-y-2 bg-white rounded-xl">
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    No Laporan:
-                </h3>
-                <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">
-                    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">
-                    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">
-                    Jumlah Lapor:
-                </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">
-                    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">
-                    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">
-                    Status :
-                </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">
-                    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">
-                    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?.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">
-                    Posko:
-                </h3>
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.posko" class-name="flex-1 h-[56px]" />
-            </div>
-        </div>
-
-    </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -168,96 +273,116 @@ 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]
+  const data = selectedRowsData[0]
-    dataDetail.value = data
+  dataDetail.value = data
 }
 
 const showData = () => {
-    showDetail.value = true
+  showDetail.value = true
 }
 
 const closeDetail = () => {
-    showDetail.value = false
+  showDetail.value = false
 }
 
 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(
-  daftarGangguanMelaporLebihDariSatuKali(
+    $minJmlLapor: Int!
-    minJmlLapor: $minJmlLapor
+    $maxJmlLapor: Int!
-    maxJmlLapor: $maxJmlLapor
+    $dateFrom: Date!
-    dateFrom: $dateFrom
+    $dateTo: Date!
-    dateTo: $dateTo
+    $posko: Int!
-    posko: $posko
+    $idUid: Int!
-    idUid: $idUid
+    $idUp3: Int!
-    idUp3: $idUp3
   ) {
-    alamat_pelapor
+    daftarGangguanMelaporLebihDariSatuKali(
-    pembuat_laporan
+      minJmlLapor: $minJmlLapor
-    durasi_response_time
+      maxJmlLapor: $maxJmlLapor
-    durasi_recovery_time
+      dateFrom: $dateFrom
-    idpel_nometer
+      dateTo: $dateTo
-    jumlah_lapor
+      posko: $posko
-    keterangan_pelapor
+      idUid: $idUid
-    media
+      idUp3: $idUp3
-    nama_pelapor
+    ) {
-    no_laporan
+      alamat_pelapor
-    no_telp_pelapor
+      pembuat_laporan
-    status_akhir
+      durasi_response_time
-    waktu_lapor
+      durasi_recovery_time
-    waktu_recovery
+      idpel_nometer
-    waktu_response
+      jumlah_lapor
-    nama_posko
+      keterangan_pelapor
+      media
+      nama_pelapor
+      no_laporan
+      no_telp_pelapor
+      status_akhir
+      waktu_lapor
+      waktu_recovery
+      waktu_response
+      nama_posko
+    }
   }
-}`;
+`
 const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI, {
-    minJmlLapor: 1,
+  minJmlLapor: 1,
-    maxJmlLapor: 1,
+  maxJmlLapor: 1,
-    dateFrom: new Date().toISOString().slice(0, 10),
+  dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
+  dateTo: new Date().toISOString().slice(0, 10),
-    posko: 0,
+  posko: 0,
-    idUid: 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({
+  refetch({
-        minJmlLapor: minJmlLapor ? minJmlLapor : 1,
+    minJmlLapor: minJmlLapor ? minJmlLapor : 1,
-        maxJmlLapor: maxJmlLapor ? maxJmlLapor : 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('-')
-        posko: posko ? posko.id : 0,
+      : new Date().toISOString().slice(0, 10),
-        idUid: uid ? uid.id : 0,
+    dateTo: dateValue[1]
-        idUp3: up3 ? up3.id : 0
+      ? dateValue[1].split('-').reverse().join('-')
-    })
+      : new Date().toISOString().slice(0, 10),
-    onResult(queryResult => {
+    posko: posko ? posko.id : 0,
-        if (queryResult.data != undefined) {
+    idUid: uid ? uid.id : 0,
-            data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
+    idUp3: up3 ? up3.id : 0
-        }
+  })
-        console.log(queryResult.data)
+  onResult((queryResult) => {
-        console.log(queryResult.loading)
+    if (queryResult.data != undefined) {
-        console.log(queryResult.networkStatus)
+      data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali
-    })
+    }
-    onError(error => {
+    console.log(queryResult.data)
-        console.log(error)
+    console.log(queryResult.loading)
-    })
+    console.log(queryResult.networkStatus)
+  })
+  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>
-        }
-            " />
-    </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=""
-            :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-            v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
 
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
+  <div id="data">
-                caption="No Laporan" />
+    <DxDataGrid
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
+      class="max-h-[calc(100vh-140px)]"
-                caption="Tgl Lapor" />
+      :data-source="data"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
+      :show-column-lines="true"
-                caption="Tgl Response" />
+      :show-row-lines="false"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
+      :show-borders="true"
-                caption="Tgl Recovery" />
+      :row-alternation-enabled="true"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
+      :hover-state-enabled="true"
-                caption="Durasi Response Time" />
+      @selection-changed="onSelectionChanged"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
+      :column-width="100"
-                caption="Durasi Recovery Time" />
+      @exporting=""
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
+      :allow-column-resizing="true"
-                caption="Status" />
+      column-resizing-mode="widget"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
+    >
-                caption="Referensi Marking" />
+      <DxSelection mode="single" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
+      <DxPaging :page-size="5" :enabled="true" />
-                caption="IDPEL/NO METER" />
+      <DxPager
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
+        :visible="true"
-                caption="Nama Pelapor" />
+        :allowed-page-sizes="[5, 10, 20]"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
+        display-mode="full"
-                caption="Alamat Pelapor" />
+        :show-page-size-selector="true"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
+        :show-info="true"
-                caption="No Telp Pelapor" />
+        :show-navigation-buttons="true"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
+      />
-                caption="Keterangan Pelapor" />
+      <DxLoadPanel
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+        cell-template="data"
+      />
 
-        </DxDataGrid>
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="referensi_marking"
+        caption="Referensi Marking"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+        cell-template="data"
+      />
+
+      <template #data="{ data }">
+        <span class="cursor-pointer" @click="showData()">
+          {{ 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,40 +279,71 @@ 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 filterData = (params: any) => {
+const dataDetail = ref<any>({})
-    const { minTime, maxTime, posko, uid, up3 } = params;
+const showDetail = ref(false)
-    const dateValue = params.periode.split(' s/d ') 
+
-    refetch({
+const onSelectionChanged = ({ selectedRowsData }: any) => {
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+  const data = selectedRowsData[0]
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+  dataDetail.value = data
-        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 => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanResponseTime;
-        }
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError(error => {
-        console.log(error)
-    })
 }
+
+const showData = () => {
+  showDetail.value = true
+}
+
+const closeDetail = () => {
+  showDetail.value = false
+}
+
+const filterData = (params: any) => {
+  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),
+    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) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.daftarGangguanResponseTime
+    }
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
+}
+
 const GET_DAFTAR_GANGGUAN_RESPONSE_TIME = gql`
-query daftarGangguanResponseTime(
+  query daftarGangguanResponseTime(
     $dateFrom: Date!
     $dateTo: Date!
     $minDurasiResponseTime: Int!
@@ -98,41 +351,42 @@ query daftarGangguanResponseTime(
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
+  ) {
     daftarGangguanResponseTime(
-        dateFrom: $dateFrom
+      dateFrom: $dateFrom
-        dateTo: $dateTo
+      dateTo: $dateTo
-        minDurasiResponseTime: $minDurasiResponseTime
+      minDurasiResponseTime: $minDurasiResponseTime
-        maxDurasiResponseTime: $maxDurasiResponseTime
+      maxDurasiResponseTime: $maxDurasiResponseTime
-        posko: $posko
+      posko: $posko
-        idUid: $idUid
+      idUid: $idUid
-        idUp3: $idUp3
+      idUp3: $idUp3
     ) {
-        alamat_pelapor
+      alamat_pelapor
-        durasi_recovery_time
+      durasi_recovery_time
-        durasi_response_time
+      durasi_response_time
-        idpel_nometer
+      idpel_nometer
-        keterangan_pelapor
+      keterangan_pelapor
-        media
+      media
-        nama_pelapor
+      nama_pelapor
-        is_marking
+      is_marking
-        no_laporan
+      no_laporan
-        no_telp_pelapor
+      no_telp_pelapor
-        nama_posko
+      nama_posko
-        status_akhir
+      status_akhir
-        waktu_lapor
+      waktu_lapor
-        waktu_recovery
+      waktu_recovery
-        waktu_response
+      waktu_response
     }
-}`;
+  }
+`
 const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RESPONSE_TIME, {
-    dateFrom: new Date().toISOString().slice(0, 10),
+  dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
+  dateTo: new Date().toISOString().slice(0, 10),
-    minDurasiResponseTime: 1, //menit
+  minDurasiResponseTime: 1, //menit
-    maxDurasiResponseTime: 1,// menit
+  maxDurasiResponseTime: 1, // menit
-    posko: 0,
+  posko: 0,
-    idUid: 0,
+  idUid: 0,
-    idUp3: 0,
+  idUp3: 0
 })
 
 const filters = ref()

src/components/Pages/Gangguan/Table_4.vue

@@ -1,98 +1,219 @@
 <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>
-        }
-            " />
-    </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="" :column-width="100"
-            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-            v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
 
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
+  <div id="data">
-                caption="No Laporan" />
+    <DxDataGrid
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
+      class="max-h-[calc(100vh-140px)]"
-                caption="Tgl Lapor" />
+      :data-source="data"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
+      :show-column-lines="true"
-                caption="Tgl Response" />
+      :show-row-lines="false"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
+      :show-borders="true"
-                caption="Tgl Recovery" />
+      :row-alternation-enabled="true"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
+      :hover-state-enabled="true"
-                caption="Durasi Response Time" />
+      @selection-changed=""
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
+      :column-width="100"
-                caption="Durasi Recovery Time" />
+      @exporting=""
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
+      :allow-column-resizing="true"
-                caption="Status" />
+      column-resizing-mode="widget"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="is_marking"
+    >
-                caption="Referensi Marking" />
+      <DxSelection mode="single" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
+      <DxPaging :page-size="5" :enabled="true" />
-                caption="IDPEL/NO METER" />
+      <DxPager
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
+        :visible="true"
-                caption="Nama Pelapor" />
+        :allowed-page-sizes="[5, 10, 20]"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
+        display-mode="full"
-                caption="Alamat Pelapor" />
+        :show-page-size-selector="true"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
+        :show-info="true"
-                caption="No Telp Pelapor" />
+        :show-navigation-buttons="true"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
+      />
-                caption="Keterangan Pelapor" />
+      <DxLoadPanel
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
+        :position="position"
-                caption="Sumber Lapor" />
+        :show-indicator="showIndicator"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
 
-        </DxDataGrid>
+      <DxColumn
-    </div>
+        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>
 
 <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 ')
+  const dateValue = params.periode.split(' s/d ')
-    refetch({
+  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]
-        posko: posko ? posko.id : 0,
+      ? dateValue[1].split('-').reverse().join('-')
-        idUid: uid ? uid.id : 0,
+      : new Date().toISOString().slice(0, 10),
-        idUp3: up3 ? up3.id : 0
+    minDurasiRecoveryTime: minTime ? minTime : 0,
-    })
+    maxDurasiRecoveryTime: maxTime ? maxTime : 1,
-    onResult(queryResult => {
+    posko: posko ? posko.id : 0,
-        if (queryResult.data != undefined) {
+    idUid: uid ? uid.id : 0,
-            data.value = queryResult.data.daftarGangguanRecoveryTime;
+    idUp3: up3 ? up3.id : 0
-        }
+  })
-        console.log(queryResult.loading)
+  onResult((queryResult) => {
-        console.log(queryResult.networkStatus)
+    if (queryResult.data != undefined) {
-    })
+      data.value = queryResult.data.daftarGangguanRecoveryTime
-    onError(error => {
+    }
-        console.log(error)
+    console.log(queryResult.loading)
-    })
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
+
 const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
-query daftarGangguanRecoveryTime(
+  query daftarGangguanRecoveryTime(
     $dateFrom: Date!
     $dateTo: Date!
     $minDurasiRecoveryTime: Int!
@@ -100,44 +221,44 @@ query daftarGangguanRecoveryTime(
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
+  ) {
     daftarGangguanRecoveryTime(
-        dateFrom: $dateFrom
+      dateFrom: $dateFrom
-        dateTo: $dateTo
+      dateTo: $dateTo
-        minDurasiRecoveryTime: $minDurasiRecoveryTime
+      minDurasiRecoveryTime: $minDurasiRecoveryTime
-        maxDurasiRecoveryTime: $maxDurasiRecoveryTime
+      maxDurasiRecoveryTime: $maxDurasiRecoveryTime
-        posko: $posko
+      posko: $posko
-        idUid: $idUid
+      idUid: $idUid
-        idUp3: $idUp3
+      idUp3: $idUp3
     ) {
-        alamat_pelapor
+      alamat_pelapor
-        durasi_recovery_time
+      durasi_recovery_time
-        durasi_response_time
+      durasi_response_time
-        idpel_nometer
+      idpel_nometer
-        keterangan_pelapor
+      keterangan_pelapor
-        media
+      media
-        nama_pelapor
+      nama_pelapor
-        no_laporan
+      no_laporan
-        is_marking
+      is_marking
-        no_telp_pelapor
+      no_telp_pelapor
-        nama_posko
+      nama_posko
-        status_akhir
+      status_akhir
-        waktu_lapor
+      waktu_lapor
-        waktu_recovery
+      waktu_recovery
-        waktu_response
+      waktu_response
-        }
+    }
-}`;
+  }
+`
 
 const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RECOVERY_TIME, {
-    dateFrom: new Date().toISOString().slice(0, 10),
+  dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
+  dateTo: new Date().toISOString().slice(0, 10),
-    minDurasiRecoveryTime: 1, //menit
+  minDurasiRecoveryTime: 1, //menit
-    maxDurasiRecoveryTime: 1,// menit
+  maxDurasiRecoveryTime: 1, // menit
-    posko: 0,
+  posko: 0,
-    idUid: 0,
+  idUid: 0,
-    idUp3: 0,
+  idUp3: 0
 })
 
 const filters = ref()
-
 </script>

src/components/Pages/Gangguan/Table_5.vue

@@ -1,128 +1,247 @@
 <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>
-            }
-            " />
-    </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=""
-            :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-            v-if="loading"  v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
 
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
+  <div id="data">
-                caption="No Laporan" />
+    <DxDataGrid
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
+      class="max-h-[calc(100vh-140px)]"
-                caption="Tgl Lapor" />
+      :data-source="data"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
+      :show-column-lines="true"
-                caption="Tgl Response" />
+      :show-row-lines="false"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
+      :show-borders="true"
-                caption="Tgl Recovery" />
+      :row-alternation-enabled="true"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
+      :hover-state-enabled="true"
-                caption="Durasi Response Time" />
+      @selection-changed=""
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
+      :column-width="100"
-                caption="Durasi Recovery Time" />
+      @exporting=""
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
+      :allow-column-resizing="true"
-                caption="Status" />
+      column-resizing-mode="widget"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
+    >
-                caption="IDPEL/NO METER" />
+      <DxSelection mode="single" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
+      <DxPaging :page-size="5" :enabled="true" />
-                caption="Nama Pelapor" />
+      <DxPager
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
+        :visible="true"
-                caption="Alamat Pelapor" />
+        :allowed-page-sizes="[5, 10, 20]"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
+        display-mode="full"
-                caption="No Telp Pelapor" />
+        :show-page-size-selector="true"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
+        :show-info="true"
-                caption="Keterangan Pelapor" />
+        :show-navigation-buttons="true"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
+      />
-                caption="Sumber Lapor" />
+      <DxLoadPanel
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
 
-        </DxDataGrid>
+      <DxColumn
-    </div>
+        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>
 <script setup lang="ts">
 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(
+  query daftarGangguanSelesaiTanpaIdPelanggan(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
+  ) {
     daftarGangguanSelesaiTanpaIdPelanggan(
-        dateFrom: $dateFrom
+      dateFrom: $dateFrom
-        dateTo: $dateTo
+      dateTo: $dateTo
-        posko: $posko
+      posko: $posko
-        idUid: $idUid
+      idUid: $idUid
-        idUp3: $idUp3
+      idUp3: $idUp3
     ) {
-        alamat_pelapor
+      alamat_pelapor
-        durasi_recovery_time
+      durasi_recovery_time
-        durasi_response_time
+      durasi_response_time
-        idpel_nometer
+      idpel_nometer
-        keterangan_pelapor
+      keterangan_pelapor
-        media
+      media
-        nama_pelapor
+      nama_pelapor
-        no_laporan
+      no_laporan
-        no_telp_pelapor
+      no_telp_pelapor
-        nama_posko
+      nama_posko
-        status_akhir
+      status_akhir
-        waktu_lapor
+      waktu_lapor
-        waktu_recovery
+      waktu_recovery
-        waktu_response
+      waktu_response
-        }
+    }
-}`;
+  }
+`
+
 const { onResult, onError, loading, refetch } = useQuery(GET_SELESAI_TANPA_ID_PELANGGAN, {
-    dateFrom: new Date().toISOString().slice(0, 10),
+  dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
+  dateTo: new Date().toISOString().slice(0, 10),
-    posko: 0,
+  posko: 0,
-    idUid: 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 ')
+  const dateValue = params.periode.split(' s/d ')
-    refetch({
+  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('-')
-        posko: posko ? posko.id : 0,
+      : new Date().toISOString().slice(0, 10),
-        idUid: uid ? uid.id : 0,
+    dateTo: dateValue[1]
-        idUp3: up3 ? up3.id : 0
+      ? dateValue[1].split('-').reverse().join('-')
-    })
+      : new Date().toISOString().slice(0, 10),
-    onResult(queryResult => {
+    posko: posko ? posko.id : 0,
-        if (queryResult.data != undefined) {
+    idUid: uid ? uid.id : 0,
-            data.value = queryResult.data.daftarGangguanSelesaiTanpaIdPelanggan;
+    idUp3: up3 ? up3.id : 0
-        }
+  })
-        console.log(queryResult.data)
+  onResult((queryResult) => {
-        console.log(queryResult.loading)
+    if (queryResult.data != undefined) {
-        console.log(queryResult.networkStatus)
+      data.value = queryResult.data.daftarGangguanSelesaiTanpaIdPelanggan
-    })
+    }
-    onError(error => {
+    console.log(queryResult.data)
-        console.log(error)
+    console.log(queryResult.loading)
-    })
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
+
 const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_6.vue

@@ -1,46 +1,157 @@
 <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>
-            }
-            " />
-    </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=""
-            :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel  :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-            v-if="loading"  v-model:visible="loading" :enabled="true"/>
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
 
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" />
+  <div id="data">
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" />
+    <DxDataGrid
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" />
+      class="max-h-[calc(100vh-140px)]"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" />
+      :data-source="data"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
+      :show-column-lines="true"
-                caption="Keterangan Pelapor" />
+      :show-row-lines="false"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status" />
+      :show-borders="true"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" />
+      :row-alternation-enabled="true"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
+      :hover-state-enabled="true"
-                caption="Tgl Response" />
+      @selection-changed=""
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
+      :column-width="100"
-                caption="Tgl Recovery" />
+      @exporting=""
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
+      :allow-column-resizing="true"
-                caption="Durasi Response Time" />
+      column-resizing-mode="widget"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
+    >
-                caption="Durasi Recovery Time" />
+      <DxSelection mode="single" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media" />
+      <DxPaging :page-size="5" :enabled="true" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
 
-        </DxDataGrid>
+      <DxColumn
-    </div>
+        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>
 
 <script setup lang="ts">
@@ -48,81 +159,96 @@ 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(
+  query daftarGangguanBerdasarkanMedia(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-    $media : String!
+    $media: String!
-) {
+  ) {
     daftarGangguanBerdasarkanMedia(
-        dateFrom: $dateFrom
+      dateFrom: $dateFrom
-        dateTo: $dateTo
+      dateTo: $dateTo
-        posko: $posko
+      posko: $posko
-        idUid: $idUid
+      idUid: $idUid
-        idUp3: $idUp3
+      idUp3: $idUp3
-        media: $media
+      media: $media
     ) {
-        alamat_pelapor
+      alamat_pelapor
-        durasi_recovery_time
+      durasi_recovery_time
-        durasi_response_time
+      durasi_response_time
-        idpel_nometer
+      idpel_nometer
-        keterangan_pelapor
+      keterangan_pelapor
-        media
+      media
-        nama_pelapor
+      nama_pelapor
-        no_laporan
+      no_laporan
-        no_telp_pelapor
+      no_telp_pelapor
-        nama_posko
+      nama_posko
-        status_akhir
+      status_akhir
-        waktu_media
+      waktu_media
-        waktu_lapor
+      waktu_lapor
-        waktu_recovery
+      waktu_recovery
-        waktu_response
+      waktu_response
-        keterangan_media
+      keterangan_media
-        }
+    }
-}`;
+  }
+`
+
 const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA, {
-        dateFrom: new Date().toISOString().slice(0, 10),
+  dateFrom: new Date().toISOString().slice(0, 10),
-        dateTo: new Date().toISOString().slice(0, 10),
+  dateTo: new Date().toISOString().slice(0, 10),
-        posko: 0,
+  posko: 0,
-        idUid: 0,
+  idUid: 0,
-        idUp3: 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 ')
+  const dateValue = params.periode.split(' s/d ')
-    refetch({
+  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('-')
-        posko: posko ? posko.id : 0,
+      : new Date().toISOString().slice(0, 10),
-        idUid: uid ? uid.id : 0,
+    dateTo: dateValue[1]
-        idUp3: up3 ? up3.id : 0,
+      ? dateValue[1].split('-').reverse().join('-')
-        media : media ? media.id : ""
+      : new Date().toISOString().slice(0, 10),
-    })
+    posko: posko ? posko.id : 0,
-    onResult(queryResult => {
+    idUid: uid ? uid.id : 0,
-        if (queryResult.data != undefined) {
+    idUp3: up3 ? up3.id : 0,
-            data.value = queryResult.data.daftarGangguanBerdasarkanMedia;
+    media: media ? media.id : ''
-            
+  })
-        }
+  onResult((queryResult) => {
-        console.log(queryResult.data)
+    if (queryResult.data != undefined) {
-        console.log(queryResult.loading)
+      data.value = queryResult.data.daftarGangguanBerdasarkanMedia
-        console.log(queryResult.networkStatus)
+    }
-    })
+    console.log(queryResult.data)
-    onError((error) => {
+    console.log(queryResult.loading)
-        console.log(error)
+    console.log(queryResult.networkStatus)
-    })
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref()
 
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_7.vue

@@ -1,133 +1,252 @@
 <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>
-        }
-            " />
-    </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=""
-            :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
 
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
+  <div id="data">
-                caption="No Laporan" />
+    <DxDataGrid
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
+      class="max-h-[calc(100vh-140px)]"
-                caption="Tgl Lapor" />
+      :data-source="data"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
+      :show-column-lines="true"
-                caption="Tgl Response" />
+      :show-row-lines="false"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
+      :show-borders="true"
-                caption="Tgl Recovery" />
+      :row-alternation-enabled="true"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
+      :hover-state-enabled="true"
-                caption="Durasi Response Time" />
+      @selection-changed=""
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
+      :column-width="100"
-                caption="Durasi Recovery Time" />
+      @exporting=""
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
+      :allow-column-resizing="true"
-                caption="Status" />
+      column-resizing-mode="widget"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
+    >
-                caption="IDPEL/NO METER" />
+      <DxSelection mode="single" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
+      <DxPaging :page-size="5" :enabled="true" />
-                caption="Nama Pelapor" />
+      <DxPager
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
+        :visible="true"
-                caption="Alamat Pelapor" />
+        :allowed-page-sizes="[5, 10, 20]"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
+        display-mode="full"
-                caption="No Telp Pelapor" />
+        :show-page-size-selector="true"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
+        :show-info="true"
-                caption="Keterangan Pelapor" />
+        :show-navigation-buttons="true"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
+      />
-                caption="Sumber Lapor" />
+      <DxLoadPanel
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
 
-        </DxDataGrid>
+      <DxColumn
-    </div>
+        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>
 
 <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(
+  query daftarGangguanDiselesaikanMobileAPKT(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
+  ) {
     daftarGangguanDiselesaikanMobileAPKT(
-        dateFrom: $dateFrom
+      dateFrom: $dateFrom
-        dateTo: $dateTo
+      dateTo: $dateTo
-        posko: $posko
+      posko: $posko
-        idUid: $idUid
+      idUid: $idUid
-        idUp3: $idUp3
+      idUp3: $idUp3
     ) {
-        alamat_pelapor
+      alamat_pelapor
-        durasi_recovery_time
+      durasi_recovery_time
-        durasi_response_time
+      durasi_response_time
-        idpel_nometer
+      idpel_nometer
-        keterangan_pelapor
+      keterangan_pelapor
-        media
+      media
-        nama_pelapor
+      nama_pelapor
-        no_laporan
+      no_laporan
-        no_telp_pelapor
+      no_telp_pelapor
-        nama_posko
+      nama_posko
-        status_akhir
+      status_akhir
-        waktu_lapor
+      waktu_lapor
-        waktu_recovery
+      waktu_recovery
-        waktu_response
+      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 dateValue = params.periode.split(' s/d ')
-    const { posko, uid, up3 } = params
+  const { posko, uid, up3 } = params
-
-    refetch({
-        dateFrom: dateValue[0] ? 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,
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanDiselesaikanMobileAPKT;
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
 
+  refetch({
+    dateFrom: dateValue[0]
+      ? 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
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.daftarGangguanDiselesaikanMobileAPKT
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 
-const filters = ref();
+const filters = ref()
-
 </script>

src/components/Pages/Gangguan/Table_8.vue

@@ -1,204 +1,399 @@
 <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"
-    </Filters>
+  >
-    <div id="data">
+    <Type1 @update:filters="(value) => (filters = value)" />
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+  </Filters>
-            :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"
-                :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
 
-            <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Nama Unit"
+  <div id="data">
-                css-class="custom-table-column" />
+    <DxDataGrid
-            <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
+      class="max-h-[calc(100vh-140px)]"
-                :allow-resizing="false" css-class="custom-table-column" />
+      :data-source="data"
-            <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="Selesai" :allow-resizing="false"
+      :show-column-lines="true"
-                css-class="custom-table-column" />
+      :show-row-lines="false"
-            <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+      :show-borders="true"
-                :allow-resizing="false" css-class="custom-table-column" />
+      :row-alternation-enabled="true"
-            <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="In Progress"
+      :hover-state-enabled="true"
-                :allow-resizing="false" css-class="custom-table-column" />
+      @selection-changed="onSelectionChanged"
-            <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+      :column-width="100"
-                :allow-resizing="false" css-class="custom-table-column" />
+      @exporting="onExporting"
-            <DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
+      :allow-column-resizing="true"
-                <DxColumn :width="150" alignment="center" data-field="avg_durasi_dispatch" data-type="number"
+      column-resizing-mode="widget"
-                    caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
+    >
-                <DxColumn :width="150" alignment="center" data-field="max_durasi_dispatch" data-type="number" caption="Max"
+      <DxSelection mode="single" />
-                    :allow-resizing="false" css-class="custom-table-column" />
+      <DxPaging :page-size="5" :enabled="true" />
-                <DxColumn :width="150" alignment="center" data-field="min_durasi_dispatch" data-type="number" caption="Min"
+      <DxPager
-                    :allow-resizing="false" css-class="custom-table-column" />
+        :visible="true"
-                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_dispatch" data-type="number"
+        :allowed-page-sizes="[5, 10, 20]"
-                    caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
+        display-mode="full"
-                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_dispatch" data-type="number"
+        :show-page-size-selector="true"
-                    caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
+        :show-info="true"
-            </DxColumn>
+        :show-navigation-buttons="true"
-            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+      />
-                <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
+      <DxLoadPanel
-                    caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
+        :position="position"
-                <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
+        :show-indicator="showIndicator"
-                    :allow-resizing="false" css-class="custom-table-column" />
+        :show-pane="showPane"
-                <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
+        :shading="shading"
-                    :allow-resizing="false" css-class="custom-table-column" />
+        v-if="loading"
-                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+        v-model:visible="loading"
-                    caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
+        :enabled="true"
-                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+      />
-                    caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            </DxColumn>
+      <DxExport
-            <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
+        :enabled="true"
-                <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+        :formats="['pdf', 'xlsx', 'document']"
-                    caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
+        :allow-export-selected-data="false"
-                <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
+      />
-                    :allow-resizing="false" css-class="custom-table-column" />
+      <DxColumn
-                <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
+        css-class="custom-table-column"
-                    :allow-resizing="false" css-class="custom-table-column" />
+        :width="50"
-                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+        alignment="center"
-                    caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+        data-type="number"
-                    caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
+        caption="No"
-            </DxColumn>
+      />
-        </DxDataGrid>
+
-    </div>
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="total"
+        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"
+          caption="Rata-Rata"
+          :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"
+          caption="Rata-Rata"
+          :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"
+          caption="Rata-Rata"
+          :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>
 </template>
 
 <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(
+  query rekapitulasiAllGangguan(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
+  ) {
     rekapitulasiAllGangguan(
-        dateFrom: $dateFrom
+      dateFrom: $dateFrom
-        dateTo: $dateTo
+      dateTo: $dateTo
-        posko: $posko
+      posko: $posko
-        idUid: $idUid
+      idUid: $idUid
-        idUp3: $idUp3
+      idUp3: $idUp3
     ) {
-        avg_durasi_dispatch
+      avg_durasi_dispatch
-        avg_durasi_recovery
+      avg_durasi_recovery
-        avg_durasi_response
+      avg_durasi_response
-        max_durasi_dispatch
+      max_durasi_dispatch
-        max_durasi_recovery
+      max_durasi_recovery
-        max_durasi_response
+      max_durasi_response
-        min_durasi_dispatch
+      min_durasi_dispatch
-        min_durasi_recovery
+      min_durasi_recovery
-        min_durasi_response
+      min_durasi_response
-        persen_inproses
+      persen_inproses
-        persen_selesai
+      persen_selesai
-        nama_posko
+      nama_posko
-        total
+      total
-        total_diatas_sla_dispatch
+      total_diatas_sla_dispatch
-        total_diatas_sla_recovery
+      total_diatas_sla_recovery
-        total_diatas_sla_response
+      total_diatas_sla_response
-        total_dibawah_sla_dispatch
+      total_dibawah_sla_dispatch
-        total_dibawah_sla_recovery
+      total_dibawah_sla_recovery
-        total_dibawah_sla_response
+      total_dibawah_sla_response
-        total_inproses
+      total_inproses
-        total_selesai
+      total_selesai
-        }
+    }
-}`;
+  }
+`
+
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALL, {
-    dateFrom: new Date().toISOString().slice(0, 10),
+  dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
+  dateTo: new Date().toISOString().slice(0, 10),
-    posko: 0,
+  posko: 0,
-    idUid: 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 ')
+  const dateValue = params.periode.split(' s/d ')
-    refetch({
+  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('-')
-        posko: posko ? posko.id : 0,
+      : new Date().toISOString().slice(0, 10),
-        idUid: uid ? uid.id : 0,
+    dateTo: dateValue[1]
-        idUp3: up3 ? up3.id : 0,
+      ? dateValue[1].split('-').reverse().join('-')
-    })
+      : new Date().toISOString().slice(0, 10),
-    onResult(queryResult => {
+    posko: posko ? posko.id : 0,
-        if (queryResult.data != undefined) {
+    idUid: uid ? uid.id : 0,
-            queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
+    idUp3: up3 ? up3.id : 0
-                data.value = [...data.value, {
+  })
-                    ...item,
+  onResult((queryResult) => {
-                }];
+    if (queryResult.data != undefined) {
-
+      queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
-            })
+        data.value = [
-        }
+          ...data.value,
-        console.log(queryResult.loading)
+          {
-        console.log(queryResult.networkStatus)
+            ...item
-    })
+          }
-    onError((error) => {
+        ]
-        console.log(error)
+      })
-    })
-}
-const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
-
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
-
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
-
-        e.cancel = true
     }
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
+
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
+
+    e.cancel = true
+  }
+}
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  const data = selectedRowsData[0]
-    console.log(data)
+  console.log(data)
 }
 
-const filters = ref();
+const filters = ref()
 </script>

src/components/Pages/Gangguan/Table_9.vue

@@ -1,144 +1,363 @@
 <!-- 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"
-    </Filters>
+  >
-    <div id="data">
+    <Type1 @update:filters="(value) => (filters = value)" />
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="dataReal" :show-column-lines="true"
+  </Filters>
-            :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"
-                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" />
-            <DxGroupPanel :visible="true" />
-            <DxGrouping :auto-expand-all="true" />
 
-            <DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
+  <div id="data">
-            <DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
+    <DxDataGrid
-            <DxColumn :width="150" alignment="center" name="jenisGangguanGroup" data-field="jenisGangguan"
+      class="max-h-[calc(100vh-140px)]"
-                caption="Jenis Gangguan" css-class="custom-table-column" :group-index="0" />
+      :data-source="dataReal"
-            <DxColumn :width="150" alignment="center" data-field="jenisGangguan" caption="Jenis Gangguan"
+      :show-column-lines="true"
-                css-class="custom-table-column" />
+      :show-row-lines="false"
-            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+      :show-borders="true"
-                <DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
+      :row-alternation-enabled="true"
-                    css-class="custom-table-column" />
+      :hover-state-enabled="true"
-                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+      @selection-changed="onSelectionChanged"
-                    <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
+      :column-width="100"
-                        caption="Jml" css-class="custom-table-column" />
+      @exporting="onExporting"
-                    <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
+      :allow-column-resizing="true"
-                        caption="%" css-class="custom-table-column" />
+      column-resizing-mode="widget"
-                </DxColumn>
+    >
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+      <DxSelection mode="single" />
-                    <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
+      <DxPaging :enabled="false" />
-                        caption="Jml" css-class="custom-table-column" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-                    <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
+      <DxLoadPanel
-                        caption="%" css-class="custom-table-column" />
+        :position="position"
-                </DxColumn>
+        :show-indicator="showIndicator"
-            </DxColumn>
+        :show-pane="showPane"
-            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+        :shading="shading"
-                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+        v-if="loading"
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
+        v-model:visible="loading"
-                        caption="Total" css-class="custom-table-column" />
+        :enabled="true"
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
+      />
-                        caption="Rata-Rata" css-class="custom-table-column" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number"
+      <DxExport
-                        caption="Max" css-class="custom-table-column" />
+        :enabled="true"
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number"
+        :formats="['pdf', 'xlsx', 'document']"
-                        caption="Min" css-class="custom-table-column" />
+        :allow-export-selected-data="false"
-                </DxColumn>
+      />
-                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+      <DxColumnFixing :enabled="true" />
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
+      <DxGroupPanel :visible="true" />
-                        caption=">SLA" css-class="custom-table-column" />
+      <DxGrouping :auto-expand-all="true" />
-                    <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"
-                        caption="Total" 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"
-                        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>
+      <DxColumn
-                <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
+        :width="60"
-                <DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}" />
+        alignment="center"
-                <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
+        data-field="no"
-                    display-format="{0}" />
+        caption="NO"
-                <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
+        css-class="custom-table-column"
-                    display-format="{0}" />
+      />
-                <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
+      <DxColumn
-                    display-format="{0}" />
+        :width="120"
-                <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
+        alignment="center"
-                    display-format="{0}" />
+        data-field="kode"
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
+        caption="Kode"
-                    display-format="{0}" />
+        css-class="custom-table-column"
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
+      />
-                    display-format="{0}" />
+      <DxColumn
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
+        :width="150"
-                    display-format="{0}" />
+        alignment="center"
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
+        name="jenisGangguanGroup"
-                    display-format="{0}" />
+        data-field="jenisGangguan"
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
+        caption="Jenis Gangguan"
-                    display-format="{0}" />
+        css-class="custom-table-column"
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
+        :group-index="0"
-                    display-format="{0}" />
+      />
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
+      <DxColumn
-                    display-format="{0}" />
+        :width="150"
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
+        alignment="center"
-                    display-format="{0}" />
+        data-field="jenisGangguan"
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
+        caption="Jenis Gangguan"
-                    display-format="{0}" />
+        css-class="custom-table-column"
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
+      />
-                    display-format="{0}" />
+      <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
+        <DxColumn
-                    display-format="{0}" />
+          :width="120"
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
+          alignment="center"
-                    display-format="{0}" />
+          data-field="laporan.total"
-            </DxSummary>
+          data-type="number"
-        </DxDataGrid>
+          caption="Total"
-    </div>
+          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"
+            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"
+            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"
+            caption="Total"
+            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"
+            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"
+            caption="Total"
+            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"
+            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
+          :show-in-group-footer="true"
+          column="laporan.sudahSelesai.jml"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.sudahSelesai.persen"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.belumSelesai.jml"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.belumSelesai.persen"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          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>
 </template>
 
 <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,
+  DxColumn,
-    DxColumnFixing,
+  DxColumnFixing,
-    DxExport,
+  DxExport,
-    DxGroupItem,
+  DxGroupItem,
-    DxGroupPanel,
+  DxGroupPanel,
-    DxGrouping,
+  DxGrouping,
-    DxLoadPanel,
+  DxLoadPanel,
-    DxPaging,
+  DxPaging,
-    DxScrolling,
+  DxScrolling,
-    DxSearchPanel,
+  DxSearchPanel,
-    DxSelection,
+  DxSelection,
-    DxSummary
+  DxSummary
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -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,138 +388,139 @@ 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),
+  dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
+  dateTo: new Date().toISOString().slice(0, 10),
-    posko: '',
+  posko: '',
-    idUid: 0,
+  idUid: 0,
-    idUp3: 0
+  idUp3: 0
 })
+
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
+  if (e.format === 'pdf') {
-        const doc = new jsPDF()
+    const doc = new jsPDF()
 
-        exportToPdf({
+    exportToPdf({
-            jsPDFDocument: doc,
+      jsPDFDocument: doc,
-            component: e.component,
+      component: e.component,
-            indent: 5
+      indent: 5
-        }).then(() => {
+    }).then(() => {
-            doc.save(`.pdf`)
+      doc.save(`.pdf`)
-        })
+    })
-    } else {
+  } else {
-        const workbook = new Workbook()
+    const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+    exportToExcel({
-            component: e.component,
+      component: e.component,
-            worksheet,
+      worksheet,
-            autoFilterEnabled: true
+      autoFilterEnabled: true
-        }).then(() => {
+    }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
+      })
-        })
+    })
 
-        e.cancel = true
+    e.cancel = true
-    }
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  const data = selectedRowsData[0]
-    console.log(data)
+  console.log(data)
 }
 
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
+  const dateValue = params.periode.split(' s/d ')
-    const { posko, uid, up3 } = params
+  const { posko, uid, up3 } = params
 
-    refetch({
+  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('-')
-        posko: posko ? posko.id : 0,
+      : new Date().toISOString().slice(0, 10),
-        idUid: uid ? uid.id : 0,
+    dateTo: dateValue[1]
-        idUp3: up3 ? up3.id : 0
+      ? dateValue[1].split('-').reverse().join('-')
-    })
+      : new Date().toISOString().slice(0, 10),
-    onResult((queryResult) => {
+    posko: posko ? posko.id : 0,
-        if (queryResult.data != undefined) {
+    idUid: uid ? uid.id : 0,
-            let no = 0
+    idUp3: up3 ? up3.id : 0
-            queryResult.data.rekapitulasiPerJenisGangguan.forEach((item: any) => {
+  })
-                dataReal.value = [
+  onResult((queryResult) => {
-                    ...dataReal.value,
+    if (queryResult.data != undefined) {
-                    {
+      let no = 0
-                        no: ++no,
+      queryResult.data.rekapitulasiPerJenisGangguan.forEach((item: any) => {
-                        kode: item.tipe_permasalahan,
+        dataReal.value = [
-                        jenisGangguan: item.tipe_permasalahan,
+          ...dataReal.value,
-                        laporan: {
+          {
-                            total: item.total,
+            no: ++no,
-                            sudahSelesai: {
+            kode: item.tipe_permasalahan,
-                                jml: item.total_selesai,
+            jenisGangguan: item.tipe_permasalahan,
-                                persen: item.persen_selesai
+            laporan: {
-                            },
+              total: item.total,
-                            belumSelesai: {
+              sudahSelesai: {
-                                jml: item.total_inproses,
+                jml: item.total_selesai,
-                                persen: item.persen_inproses
+                persen: item.persen_selesai
-                            }
+              },
-                        },
+              belumSelesai: {
-                        responseTime: {
+                jml: item.total_inproses,
-                            menit: {
+                persen: item.persen_inproses
-                                total: item.avg_durasi_response,
+              }
-                                rataRata: item.avg_durasi_response,
+            },
-                                max: item.max_durasi_response,
+            responseTime: {
-                                min: item.min_durasi_response
+              menit: {
-                            },
+                total: item.avg_durasi_response,
-                            laporan: {
+                rataRata: item.avg_durasi_response,
-                                lebihSla: item.total_diatas_sla_response,
+                max: item.max_durasi_response,
-                                kurangSla: item.total_dibawah_sla_response
+                min: item.min_durasi_response
-                            }
+              },
-                        },
+              laporan: {
-                        recoveryTime: {
+                lebihSla: item.total_diatas_sla_response,
-                            menit: {
+                kurangSla: item.total_dibawah_sla_response
-                                total: item.avg_durasi_recovery,
+              }
-                                rataRata: item.avg_durasi_recovery,
+            },
-                                max: item.max_durasi_recovery,
+            recoveryTime: {
-                                min: item.min_durasi_recovery
+              menit: {
-                            },
+                total: item.avg_durasi_recovery,
-                            laporan: {
+                rataRata: item.avg_durasi_recovery,
-                                lebihSla: item.total_diatas_sla_recovery,
+                max: item.max_durasi_recovery,
-                                kurangSla: item.total_dibawah_sla_recovery
+                min: item.min_durasi_recovery
-                            }
+              },
-                        }
+              laporan: {
-                    }
+                lebihSla: item.total_diatas_sla_recovery,
-                ]
+                kurangSla: item.total_dibawah_sla_recovery
-            })
+              }
-        }
+            }
-        console.log(queryResult.loading)
+          }
-        console.log(queryResult.networkStatus)
+        ]
-    })
+      })
-    onError((queryError) => {
+    }
-        console.log(queryError)
+    console.log(queryResult.loading)
-    })
+    console.log(queryResult.networkStatus)
+  })
+  onError((queryError) => {
+    console.log(queryError)
+  })
 }
 
-const filters = ref();
+const filters = ref()
 </script>

src/components/Pages/Keluhan/Table_21.vue

@@ -1,76 +1,182 @@
 <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>
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-                :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <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"
+  <div id="data">
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+    <DxDataGrid
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+      class="max-h-[calc(100vh-140px)]"
-                css-class="custom-table-column" />
+      :data-source="data"
-            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
+      :show-column-lines="true"
-                css-class="custom-table-column" />
+      :show-row-lines="false"
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+      :show-borders="true"
-                css-class="custom-table-column" />
+      :row-alternation-enabled="true"
-            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
+      :hover-state-enabled="true"
-                css-class="custom-table-column" />
+      @selection-changed="onSelectionChanged"
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+      :column-width="100"
-                css-class="custom-table-column" />
+      @exporting="onExporting"
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+      :allow-column-resizing="true"
-                css-class="custom-table-column" />
+      column-resizing-mode="widget"
-            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+      :word-wrap-enabled="true"
-                css-class="custom-table-column" />
+    >
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+      <DxSelection mode="single" />
-                css-class="custom-table-column" />
+      <DxPaging :page-size="5" :enabled="true" />
-            <DxColumn :width="170" alignment="center" data-field="nama_unit_lama" caption="Unit Asal"
+      <DxPager
-                css-class="custom-table-column" />
+        :visible="true"
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+        :allowed-page-sizes="[5, 10, 20]"
-                css-class="custom-table-column" />
+        display-mode="full"
-            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+        :show-page-size-selector="true"
-                css-class="custom-table-column" />
+        :show-info="true"
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+        :show-navigation-buttons="true"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+      <DxLoadPanel
-                css-class="custom-table-column" />
+        :position="position"
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+        :show-indicator="showIndicator"
-                css-class="custom-table-column" />
+        :show-pane="showPane"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        :shading="shading"
-                css-class="custom-table-column" />
+        v-if="loading"
-        </DxDataGrid>
+        v-model:visible="loading"
-    </div>
+        :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
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="pembuat_laporan"
+        caption="Pembuat Laporan"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        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>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
-import {  ref } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
+  DxColumn,
-    DxColumnFixing,
+  DxColumnFixing,
-    DxExport,
+  DxExport,
-    DxLoadPanel,
+  DxLoadPanel,
-    DxPager,
+  DxPager,
-    DxPaging,
+  DxPaging,
-    DxScrolling,
+  DxSearchPanel,
-    DxSearchPanel,
+  DxSelection
-    DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -79,42 +185,44 @@ 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') {
+  if (e.format === 'pdf') {
-        const doc = new jsPDF()
+    const doc = new jsPDF()
 
-        exportToPdf({
+    exportToPdf({
-            jsPDFDocument: doc,
+      jsPDFDocument: doc,
-            component: e.component,
+      component: e.component,
-            indent: 5
+      indent: 5
-        }).then(() => {
+    }).then(() => {
-            doc.save(`.pdf`)
+      doc.save(`.pdf`)
-        })
+    })
-    } else {
+  } else {
-        const workbook = new Workbook()
+    const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+    exportToExcel({
-            component: e.component,
+      component: e.component,
-            worksheet,
+      worksheet,
-            autoFilterEnabled: true
+      autoFilterEnabled: true
-        }).then(() => {
+    }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
+      })
-        })
+    })
 
-        e.cancel = true
+    e.cancel = true
-    }
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  const data = selectedRowsData[0]
-    console.log(data)
+  console.log(data)
 }
 
 const data = ref<any[]>([])
@@ -133,58 +241,68 @@ const GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-        alamat_pelapor
+      alamat_pelapor
-        durasi_recovery_time
+      durasi_recovery_time
-        durasi_response_time
+      durasi_response_time
-        id_unit_baru
+      id_unit_baru
-        id_unit_lama
+      id_unit_lama
-        idpel_nometer
+      idpel_nometer
-        keterangan_pelapor
+      keterangan_pelapor
-        media
+      media
-        nama_pelapor
+      nama_pelapor
-        nama_unit_baru
+      nama_unit_baru
-        nama_unit_lama
+      nama_unit_lama
-        no_laporan
+      no_laporan
-        no_telp_pelapor
+      no_telp_pelapor
-        pembuat_laporan
+      pembuat_laporan
-        status_akhir
+      status_akhir
-        waktu_dialihkan
+      waktu_dialihkan
-        waktu_lapor
+      waktu_lapor
-        waktu_recovery
+      waktu_recovery
-        waktu_response
+      waktu_response
     }
   }
 `
-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 dateValue = params.periode.split(' s/d ')
-    const { ulp, uid, up3 } = params
+  const { ulp, uid, up3 } = params
-    refetch({
+
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+  refetch({
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0]
-        idUlp: ulp ? ulp.id : 0,
+      ? dateValue[0].split('-').reverse().join('-')
-        idUid: uid ? uid.id : 0,
+      : new Date().toISOString().slice(0, 10),
-        idUp3: up3 ? up3.id : 0
+    dateTo: dateValue[1]
-    })
+      ? dateValue[1].split('-').reverse().join('-')
-    onResult((queryResult) => {
+      : new Date().toISOString().slice(0, 10),
-        if (queryResult.data != undefined) {
+    idUlp: ulp ? ulp.id : 0,
-            data.value = queryResult.data.daftarKeluhanDialihkanKeUnitLain
+    idUid: uid ? uid.id : 0,
-        }
+    idUp3: up3 ? up3.id : 0
-        console.log(queryResult.data)
+  })
-        console.log(queryResult.loading)
+
-        console.log(queryResult.networkStatus)
+  onResult((queryResult) => {
-    })
+    if (queryResult.data != undefined) {
-    onError((error) => {
+      data.value = queryResult.data.daftarKeluhanDialihkanKeUnitLain
-        console.log(error)
+    }
-    })
+    console.log(queryResult.data)
+    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,81 +1,294 @@
 <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>
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-                :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <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"
+  <div id="data">
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+    <DxDataGrid
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+      class="max-h-[calc(100vh-140px)]"
-                css-class="custom-table-column" />
+      :data-source="data"
-            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
+      :show-column-lines="true"
-                css-class="custom-table-column" />
+      :show-row-lines="false"
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+      :show-borders="true"
-                css-class="custom-table-column" />
+      :row-alternation-enabled="true"
-            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
+      :hover-state-enabled="true"
-                css-class="custom-table-column" />
+      @selection-changed="onSelectionChanged"
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+      :column-width="100"
-                css-class="custom-table-column" />
+      @exporting="onExporting"
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+      :allow-column-resizing="true"
-                css-class="custom-table-column" />
+      column-resizing-mode="widget"
-            <DxColumn :width="120" alignment="center" data-field="jml_lapor" caption="Jml Lapor"
+      :word-wrap-enabled="true"
-                css-class="custom-table-column" />
+    >
-            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+      <DxSelection mode="single" />
-                css-class="custom-table-column" />
+      <DxPaging :page-size="5" :enabled="true" />
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+      <DxPager
-                css-class="custom-table-column" />
+        :visible="true"
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+        :allowed-page-sizes="[5, 10, 20]"
-                css-class="custom-table-column" />
+        display-mode="full"
-            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+        :show-page-size-selector="true"
-                css-class="custom-table-column" />
+        :show-info="true"
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+        :show-navigation-buttons="true"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+      <DxLoadPanel
-                css-class="custom-table-column" />
+        :position="position"
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+        :show-indicator="showIndicator"
-                css-class="custom-table-column" />
+        :show-pane="showPane"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        :shading="shading"
-                css-class="custom-table-column" />
+        v-if="loading"
-            <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
+        v-model:visible="loading"
-                css-class="custom-table-column" />
+        :enabled="true"
-            <DxColumn :width="150" alignment="center" data-field="idUlp" caption="Nama ULP"
+      />
-                css-class="custom-table-column" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-        </DxDataGrid>
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
+
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="jumlah_lapor"
+        caption="Jml Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+
+      <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,
+  DxColumn,
-    DxColumnFixing,
+  DxColumnFixing,
-    DxExport,
+  DxExport,
-    DxLoadPanel,
+  DxLoadPanel,
-    DxPager,
+  DxPager,
-    DxPaging,
+  DxPaging,
-    DxScrolling,
+  DxSearchPanel,
-    DxSearchPanel,
+  DxSelection
-    DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -84,42 +297,54 @@ 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);
-const showPane = ref(true);
-const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
 
-        exportToPdf({
+const position = { of: '#data' }
-            jsPDFDocument: doc,
+const showIndicator = ref(true)
-            component: e.component,
+const shading = ref(true)
-            indent: 5
+const showPane = ref(true)
-        }).then(() => {
+const dataDetail = ref<any>()
-            doc.save(`.pdf`)
+const showDetail = ref(false)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+const closeDetail = () => {
-            component: e.component,
+  showDetail.value = false
-            worksheet,
+}
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
 
-        e.cancel = true
+const showData = () => {
-    }
+  showDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  dataDetail.value = selectedRowsData[0]
-    console.log(data)
+  console.log(selectedRowsData[0])
+}
+
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
+
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
+
+    e.cancel = true
+  }
 }
 
 const data = ref<any[]>([])
@@ -142,63 +367,66 @@ const GET_DATA = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-        alamat_pelapor
+      alamat_pelapor
-durasi_recovery_time
+      durasi_recovery_time
-durasi_response_time
+      durasi_response_time
-idpel_nometer
+      idpel_nometer
-jumlah_lapor
+      jumlah_lapor
-keterangan_pelapor
+      keterangan_pelapor
-media
+      media
-nama_pelapor
+      nama_pelapor
-nama_unit
+      nama_ulp
-no_laporan
+      no_laporan
-no_telp_pelapor
+      no_telp_pelapor
-status_akhir
+      status_akhir
-waktu_lapor
+      waktu_lapor
-
+      waktu_recovery
-waktu_recovery
+      waktu_response
-
-waktu_response
     }
   }
 `
 
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
-    minJmlLapor: 1,
+  minJmlLapor: 1,
-    maxJmlLapor: 100,
+  maxJmlLapor: 100,
-    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),
-    idUlp: 0,
+  idUlp: 0,
-    idUid: 0,
+  idUid: 0,
-    idUp3: 0
+  idUp3: 0
 })
 
-
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
+  const dateValue = params.periode.split(' s/d ')
-    const { ulp, uid, up3 } = params
+  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({
+  refetch({
-        minJmlLapor: minJmlLapor,
+    minJmlLapor: minJmlLapor,
-        maxJmlLapor: maxJmlLapor,
+    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('-')
-        idUlp: ulp ? ulp.id : 0,
+      : new Date().toISOString().slice(0, 10),
-        idUid: uid ? uid.id : 0,
+    dateTo: dateValue[1]
-        idUp3: up3 ? up3.id : 0
+      ? dateValue[1].split('-').reverse().join('-')
-    })
+      : new Date().toISOString().slice(0, 10),
-    onResult((queryResult) => {
+    idUlp: ulp ? ulp.id : 0,
-        if (queryResult.data != undefined) {
+    idUid: uid ? uid.id : 0,
-            data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
+    idUp3: up3 ? up3.id : 0
-        }
+  })
-        console.log(queryResult.data)
+  onResult((queryResult) => {
-        console.log(queryResult.loading)
+    if (queryResult.data != undefined) {
-        console.log(queryResult.networkStatus)
+      data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
-    })
+      console.log(data.value[0])
-    onError((error) => {
+    }
-        console.log(error)
+    console.log(queryResult.data)
-    })
+    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_23.vue

@@ -1,74 +1,272 @@
 <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>
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <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"
+  <div id="data">
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+    <DxDataGrid
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+      class="max-h-[calc(100vh-140px)]"
-                css-class="custom-table-column" />
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+      <DxColumn
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+        :width="50"
-                css-class="custom-table-column" />
+        alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                css-class="custom-table-column" />
+        data-type="number"
-            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+        caption="No"
-                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="no_laporan"
-            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+        caption="No Laporan"
-                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"
+
-                css-class="custom-table-column" />
+      <DxColumn
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+        :width="170"
-                css-class="custom-table-column" />
+        alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        data-field="waktu_lapor"
-                css-class="custom-table-column" />
+        caption="Tgl Lapor"
-            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama ULP"
+        css-class="custom-table-column"
-                css-class="custom-table-column" />
+        cell-template="data"
-        </DxDataGrid>
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <template #data="{ data }">
+        <span class="cursor-pointer" @click="showData()">
+          {{ 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,
+  DxColumn,
-    DxColumnFixing,
+  DxColumnFixing,
-    DxExport,
+  DxExport,
-    DxLoadPanel,
+  DxLoadPanel,
-    DxPager,
+  DxPager,
-    DxPaging,
+  DxPaging,
-    DxScrolling,
+  DxSearchPanel,
-    DxSearchPanel,
+  DxSelection
-    DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -77,42 +275,54 @@ 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);
-const showPane = ref(true);
-const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
 
-        exportToPdf({
+const position = { of: '#data' }
-            jsPDFDocument: doc,
+const showIndicator = ref(true)
-            component: e.component,
+const shading = ref(true)
-            indent: 5
+const showPane = ref(true)
-        }).then(() => {
+const dataDetail = ref<any>()
-            doc.save(`.pdf`)
+const showDetail = ref(false)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+const closeDetail = () => {
-            component: e.component,
+  showDetail.value = false
-            worksheet,
+}
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
 
-        e.cancel = true
+const showData = () => {
-    }
+  showDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  dataDetail.value = selectedRowsData[0]
-    console.log(data)
+  console.log(selectedRowsData[0])
+}
+
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
+
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
+
+    e.cancel = true
+  }
 }
 
 const data = ref<any[]>([])
@@ -135,55 +345,63 @@ const GET_DATA = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-        alamat_pelapor
+      alamat_pelapor
-        durasi_recovery_time
+      durasi_recovery_time
-        durasi_response_time
+      durasi_response_time
-        idpel_nometer
+      idpel_nometer
-        keterangan_pelapor
+      keterangan_pelapor
-        media
+      media
-        nama_pelapor
+      nama_pelapor
-        nama_unit
+      nama_ulp
-        no_laporan
+      no_laporan
-        no_telp_pelapor
+      no_telp_pelapor
-        status_akhir
+      status_akhir
-        waktu_lapor
+      waktu_lapor
-        waktu_recovery
+      waktu_recovery
-        waktu_response
+      waktu_response
     }
   }
 `
-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),
-    minDurasiResponseTime: 0,
-    maxDurasiResponseTime: 0,
-    idUlp: 0,
-    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),
-        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})
 
-    onResult((queryResult) => {
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
-        if (queryResult.data != undefined) {
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-            data.value = queryResult.data.daftarKeluhanResponseTime
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-        }
+  minDurasiResponseTime: 0,
-        console.log(queryResult.data)
+  maxDurasiResponseTime: 0,
-        console.log(queryResult.loading)
+  idUlp: 0,
-        console.log(queryResult.networkStatus)
+  idUid: 0,
-    })
+  idUp3: 0
-    onError((error) => {
+})
-        console.log(error)
+
-    })
+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),
+    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
+  })
+
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.daftarKeluhanResponseTime
+    }
+    console.log(queryResult.data)
+    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_24.vue

@@ -1,74 +1,273 @@
 <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>
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-                :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <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"
+  <div id="data">
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+    <DxDataGrid
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+      class="max-h-[calc(100vh-140px)]"
-                css-class="custom-table-column" />
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+      <DxColumn
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+        :width="50"
-                css-class="custom-table-column" />
+        alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-                css-class="custom-table-column" />
+        data-type="number"
-            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+        caption="No"
-                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="no_laporan"
-            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+        caption="No Laporan"
-                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"
+
-                css-class="custom-table-column" />
+      <DxColumn
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+        :width="170"
-                css-class="custom-table-column" />
+        alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        data-field="waktu_lapor"
-                css-class="custom-table-column" />
+        caption="Tgl Lapor"
-            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama ULP"
+        css-class="custom-table-column"
-                css-class="custom-table-column" />
+        cell-template="data"
-        </DxDataGrid>
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <template #data="{ data }">
+        <span class="cursor-pointer" @click="showData()">
+          {{ 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,
+  DxColumn,
-    DxColumnFixing,
+  DxColumnFixing,
-    DxExport,
+  DxExport,
-    DxLoadPanel,
+  DxLoadPanel,
-    DxPager,
+  DxPager,
-    DxPaging,
+  DxPaging,
-    DxScrolling,
+  DxSearchPanel,
-    DxSearchPanel,
+  DxSelection
-    DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -77,42 +276,54 @@ 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);
-const showPane = ref(true);
-const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
 
-        exportToPdf({
+const position = { of: '#data' }
-            jsPDFDocument: doc,
+const showIndicator = ref(true)
-            component: e.component,
+const shading = ref(true)
-            indent: 5
+const showPane = ref(true)
-        }).then(() => {
+const dataDetail = ref<any>()
-            doc.save(`.pdf`)
+const showDetail = ref(false)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+const closeDetail = () => {
-            component: e.component,
+  showDetail.value = false
-            worksheet,
+}
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
 
-        e.cancel = true
+const showData = () => {
-    }
+  showDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  dataDetail.value = selectedRowsData[0]
-    console.log(data)
+  console.log(selectedRowsData[0])
+}
+
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
+
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
+
+    e.cancel = true
+  }
 }
 
 const data = ref<any[]>([])
@@ -135,59 +346,62 @@ const GET_DATA = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-        alamat_pelapor
+      alamat_pelapor
-durasi_recovery_time
+      durasi_recovery_time
-durasi_response_time
+      durasi_response_time
-idpel_nometer
+      idpel_nometer
-keterangan_pelapor
+      keterangan_pelapor
-media
+      media
-nama_pelapor
+      nama_pelapor
-nama_unit
+      nama_ulp
-no_laporan
+      no_laporan
-no_telp_pelapor
+      no_telp_pelapor
-status_akhir
+      status_akhir
-waktu_lapor
+      waktu_lapor
-waktu_recovery
+      waktu_recovery
-waktu_response
+      waktu_response
     }
   }
 `
 
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
-    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),
-    minDurasiRecoveryTime: 0,
+  minDurasiRecoveryTime: 0,
-    maxDurasiRecoveryTime: 0,
+  maxDurasiRecoveryTime: 0,
-    idUlp: 0,
+  idUlp: 0,
-    idUid: 0,
+  idUid: 0,
-    idUp3: 0
+  idUp3: 0
 })
 
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
+  const dateValue = params.periode.split(' s/d ')
-    const { ulp, uid, up3,minTime,maxTime } = params
+  const { ulp, uid, up3, minTime, maxTime } = params
-    refetch({
+  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: minTime,
+      : new Date().toISOString().slice(0, 10),
-        maxDurasiRecoveryTime: maxTime,
+    dateTo: dateValue[1]
-        idUlp: ulp ? ulp.id : 0,
+      ? dateValue[1].split('-').reverse().join('-')
-        idUid: uid ? uid.id : 0,
+      : new Date().toISOString().slice(0, 10),
-        idUp3: up3 ? up3.id : 0
+    minDurasiRecoveryTime: minTime,
-    })
+    maxDurasiRecoveryTime: maxTime,
-    onResult((queryResult) => {
+    idUlp: ulp ? ulp.id : 0,
-        if (queryResult.data != undefined) {
+    idUid: uid ? uid.id : 0,
-            data.value = queryResult.data.daftarKeluhanRecoveryTime
+    idUp3: up3 ? up3.id : 0
-
+  })
-        }
+  onResult((queryResult) => {
-        console.log(queryResult.data)
+    if (queryResult.data != undefined) {
-        console.log(queryResult.loading)
+      data.value = queryResult.data.daftarKeluhanRecoveryTime
-        console.log(queryResult.networkStatus)
+    }
-    })
+    console.log(queryResult.data)
-    onError((error) => {
+    console.log(queryResult.loading)
-        console.log(error)
+    console.log(queryResult.networkStatus)
-    })
+  })
-
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Keluhan/Table_25.vue

@@ -1,81 +1,280 @@
 <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>
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <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"
+  <div id="data">
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+    <DxDataGrid
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+      class="max-h-[calc(100vh-140px)]"
-                css-class="custom-table-column" />
+      :data-source="data"
-            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
+      :show-column-lines="true"
-                css-class="custom-table-column" />
+      :show-row-lines="false"
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+      :show-borders="true"
-                css-class="custom-table-column" />
+      :row-alternation-enabled="true"
-            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
+      :hover-state-enabled="true"
-                css-class="custom-table-column" />
+      @selection-changed="onSelectionChanged"
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
+      :column-width="100"
-                css-class="custom-table-column" />
+      @exporting="onExporting"
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
+      :allow-column-resizing="true"
-                css-class="custom-table-column" />
+      column-resizing-mode="widget"
-            <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
+      :word-wrap-enabled="true"
-                css-class="custom-table-column" />
+    >
-            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+      <DxSelection mode="single" />
-                css-class="custom-table-column" />
+      <DxPaging :page-size="5" :enabled="true" />
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+      <DxPager
-                css-class="custom-table-column" />
+        :visible="true"
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+        :allowed-page-sizes="[5, 10, 20]"
-                css-class="custom-table-column" />
+        display-mode="full"
-            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+        :show-page-size-selector="true"
-                css-class="custom-table-column" />
+        :show-info="true"
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+        :show-navigation-buttons="true"
-                css-class="custom-table-column" />
+      />
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+      <DxLoadPanel
-                css-class="custom-table-column" />
+        :position="position"
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+        :show-indicator="showIndicator"
-                css-class="custom-table-column" />
+        :show-pane="showPane"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+        :shading="shading"
-                css-class="custom-table-column" />
+        v-if="loading"
-            <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
+        v-model:visible="loading"
-                css-class="custom-table-column" />
+        :enabled="true"
-            <DxColumn :width="150" alignment="center" data-field="nama_idUlp" caption="Nama ULP"
+      />
-                css-class="custom-table-column" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-        </DxDataGrid>
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
+
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <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,
+  DxColumn,
-    DxColumnFixing,
+  DxColumnFixing,
-    DxExport,
+  DxExport,
-    DxLoadPanel,
+  DxLoadPanel,
-    DxPager,
+  DxPager,
-    DxPaging,
+  DxPaging,
-    DxScrolling,
+  DxSearchPanel,
-    DxSearchPanel,
+  DxSelection
-    DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -84,42 +283,54 @@ 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);
-const showPane = ref(true);
-const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
 
-        exportToPdf({
+const position = { of: '#data' }
-            jsPDFDocument: doc,
+const showIndicator = ref(true)
-            component: e.component,
+const shading = ref(true)
-            indent: 5
+const showPane = ref(true)
-        }).then(() => {
+const dataDetail = ref<any>()
-            doc.save(`.pdf`)
+const showDetail = ref(false)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+const closeDetail = () => {
-            component: e.component,
+  showDetail.value = false
-            worksheet,
+}
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
 
-        e.cancel = true
+const showData = () => {
-    }
+  showDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  dataDetail.value = selectedRowsData[0]
-    console.log(data)
+  console.log(selectedRowsData[0])
+}
+
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
+
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
+
+    e.cancel = true
+  }
 }
 
 const data = ref<any[]>([])
@@ -141,51 +352,56 @@ 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
     }
   }
 `
 
-const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
-    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),
-    idUlp: 0,
+  idUlp: 0,
-    idUid: 0,
+  idUid: 0,
-    idUp3: 0
+  idUp3: 0
 })
 
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
+  const dateValue = params.periode.split(' s/d ')
-      const { idUlp, uid, up3 } = params
+  const { idUlp, uid, up3 } = params
-    refetch({
+  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('-')
-        idUlp: idUlp ? idUlp.id : 0,
+      : new Date().toISOString().slice(0, 10),
-        idUid: uid ? uid.id :0,
+    dateTo: dateValue[1]
-        idUp3: up3? up3.id:0})
+      ? 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
+  })
 
-    onResult((queryResult) => {
+  onResult((queryResult) => {
-        if (queryResult.data != undefined) {
+    if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
+      data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
-    
+    }
-        }
+    console.log(queryResult.data)
-        console.log(queryResult.data)
+    console.log(queryResult.loading)
-        console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
-        console.log(queryResult.networkStatus)
+  })
-    })
+  onError((error) => {
-    onError((error) => {
+    console.log(error)
-        console.log(error)
+  })
-    })
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Keluhan/Table_26.vue

@@ -1,77 +1,287 @@
 <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>
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-                :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <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"
+  <div id="data">
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+    <DxDataGrid
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+      class="max-h-[calc(100vh-140px)]"
-                css-class="custom-table-column" />
+      :data-source="data"
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+      :show-column-lines="true"
-                css-class="custom-table-column" />
+      :show-row-lines="false"
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+      :show-borders="true"
-                css-class="custom-table-column" />
+      :row-alternation-enabled="true"
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+      :hover-state-enabled="true"
-                css-class="custom-table-column" />
+      @selection-changed="onSelectionChanged"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+      :column-width="100"
-                css-class="custom-table-column" />
+      @exporting="onExporting"
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+      :allow-column-resizing="true"
-                css-class="custom-table-column" />
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+      <DxColumn
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
 
-            <DxColumn :width="170" alignment="center" data-field="waktu_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_lapor"
-            <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Response Time"
+        caption="Tgl Lapor"
-                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"
+
-                css-class="custom-table-column" />
+      <DxColumn
-            <DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
+        :width="170"
-                css-class="custom-table-column" />
+        alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
+        data-field="waktu_response"
-                css-class="custom-table-column" />
+        caption="Tgl Response"
-        </DxDataGrid>
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="waktu_media"
+        caption="Tgl Media"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_media"
+        caption="Keterangan Media"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <template #data="{ data }">
+        <span class="cursor-pointer" @click="showData()">
+          {{ 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,
+  DxColumn,
-    DxColumnFixing,
+  DxColumnFixing,
-    DxExport,
+  DxExport,
-    DxLoadPanel,
+  DxLoadPanel,
-    DxPager,
+  DxPager,
-    DxPaging,
+  DxPaging,
-    DxScrolling,
+  DxSearchPanel,
-    DxSearchPanel,
+  DxSelection
-    DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -80,42 +290,54 @@ 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);
-const showPane = ref(true);
-const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
 
-        exportToPdf({
+const position = { of: '#data' }
-            jsPDFDocument: doc,
+const showIndicator = ref(true)
-            component: e.component,
+const shading = ref(true)
-            indent: 5
+const showPane = ref(true)
-        }).then(() => {
+const dataDetail = ref<any>()
-            doc.save(`.pdf`)
+const showDetail = ref(false)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+const closeDetail = () => {
-            component: e.component,
+  showDetail.value = false
-            worksheet,
+}
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
 
-        e.cancel = true
+const showData = () => {
-    }
+  showDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  dataDetail.value = selectedRowsData[0]
-    console.log(data)
+  console.log(selectedRowsData[0])
+}
+
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
+
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
+
+    e.cancel = true
+  }
 }
 
 const data = ref<any[]>([])
@@ -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
@@ -155,36 +376,40 @@ const GET_DATA = gql`
 `
 
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
-    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),
-    idUlp: 0,
+  idUlp: 0,
-    idUid: 0,
+  idUid: 0,
-    idUp3: 0
+  idUp3: 0
 })
 
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
+  const dateValue = params.periode.split(' s/d ')
-    const { idUlp, uid, up3 } = params
+  const { idUlp, uid, up3 } = params
-    refetch({
+  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('-')
-        idUlp: idUlp ? idUlp.id : 0,
+      : new Date().toISOString().slice(0, 10),
-        idUid: uid ? uid.id : 0,
+    dateTo: dateValue[1]
-        idUp3: up3 ? up3.id : 0
+      ? 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
+  })
 
-    onResult((queryResult) => {
+  onResult((queryResult) => {
-        if (queryResult.data != undefined) {
+    if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
+      data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
-
+    }
-        }
+    console.log(queryResult.data)
-        console.log(queryResult.data)
+    console.log(queryResult.loading)
-        console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
-        console.log(queryResult.networkStatus)
+  })
-    })
+  onError((error) => {
-    onError((error) => {
+    console.log(error)
-        console.log(error)
+  })
-    })
 }
-const filters = ref();
+
+const filters = ref()
 </script>

src/components/Pages/Keluhan/Table_27.vue

@@ -1,74 +1,191 @@
 <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>
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <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"
+  <div id="data">
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+    <DxDataGrid
-            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+      class="max-h-[calc(100vh-140px)]"
-                css-class="custom-table-column" />
+      :data-source="data"
-            <DxColumn :width="170" alignment="center" data-field="" caption="Contact Center"
+      :show-column-lines="true"
-                css-class="custom-table-column" />
+      :show-row-lines="false"
-            <DxColumn :width="170" alignment="center" data-field="" caption="UI Dist." css-class="custom-table-column" />
+      :show-borders="true"
-            <DxColumn :width="170" alignment="center" data-field="" caption="ULP" css-class="custom-table-column" />
+      :row-alternation-enabled="true"
-            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
+      :hover-state-enabled="true"
-                css-class="custom-table-column" />
+      @selection-changed="onSelectionChanged"
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+      :column-width="100"
-                css-class="custom-table-column" />
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+      <DxColumn
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column"
+      />
+      <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="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="alamat_pelapor"
-            <DxColumn :width="150" alignment="center" data-field="" caption="APKT Status" css-class="custom-table-column" />
+        caption="Alamat 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 :width="170" alignment="center" data-field="" caption="Lapor Ulang" css-class="custom-table-column" />
+      <DxColumn
-            <DxColumn :width="170" alignment="center" data-field="media" caption="Sumber Lapor"
+        :width="170"
-                css-class="custom-table-column" />
+        alignment="center"
-            <DxColumn :width="170" alignment="center" data-field="" caption="Issue Type" css-class="custom-table-column" />
+        data-field="no_telp_pelapor"
-            <DxColumn :width="170" alignment="center" data-field="" caption="Sub Issue Type"
+        caption="No Tlp Pelapor"
-                css-class="custom-table-column" />
+        css-class="custom-table-column"
-        </DxDataGrid>
+      />
-    </div>
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        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>
 
 <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,
+  DxColumn,
-    DxColumnFixing,
+  DxColumnFixing,
-    DxExport,
+  DxExport,
-    DxLoadPanel,
+  DxLoadPanel,
-    DxPager,
+  DxPager,
-    DxPaging,
+  DxPaging,
-    DxScrolling,
+  DxSearchPanel,
-    DxSearchPanel,
+  DxSelection
-    DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -77,113 +194,116 @@ 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') {
+  if (e.format === 'pdf') {
-        const doc = new jsPDF()
+    const doc = new jsPDF()
 
-        exportToPdf({
+    exportToPdf({
-            jsPDFDocument: doc,
+      jsPDFDocument: doc,
-            component: e.component,
+      component: e.component,
-            indent: 5
+      indent: 5
-        }).then(() => {
+    }).then(() => {
-            doc.save(`.pdf`)
+      doc.save(`.pdf`)
-        })
+    })
-    } else {
+  } else {
-        const workbook = new Workbook()
+    const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+    exportToExcel({
-            component: e.component,
+      component: e.component,
-            worksheet,
+      worksheet,
-            autoFilterEnabled: true
+      autoFilterEnabled: true
-        }).then(() => {
+    }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
+      })
-        })
+    })
 
-        e.cancel = true
+    e.cancel = true
-    }
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  const data = selectedRowsData[0]
-    console.log(data)
+  console.log(data)
 }
 
 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
-        dateFrom: $dateFrom
+      dateTo: $dateTo
-        dateTo: $dateTo
+      idUlp: $idUlp
-        idUlp: $idUlp
+      idUid: $idUid
-        idUid: $idUid
+      idUp3: $idUp3
-        idUp3: $idUp3
     ) {
-        alamat_pelapor
+      alamat_pelapor
-        durasi_recovery_time
+      durasi_recovery_time
-        durasi_response_time
+      durasi_response_time
-        id_keluhan
+      id_keluhan
-        idpel_nometer
+      idpel_nometer
-        keterangan_pelapor
+      keterangan_pelapor
-        media
+      media
-        nama_pelapor
+      nama_pelapor
-        no_laporan
+      no_laporan
-        no_telp_pelapor
+      no_telp_pelapor
-        idUlp
+      idUlp
-        status_akhir
+      status_akhir
-        waktu_recovery
+      waktu_recovery
-        waktu_response
+      waktu_response
-        }
+    }
-        }
+  }
 `
 
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
-    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),
-    idUlp: 0,
+  idUlp: 0,
-    idUid: 0,
+  idUid: 0,
-    idUp3: 0,
+  idUp3: 0,
-    media: 'Twitter'
+  media: 'Twitter'
 })
-const filters = ref();
+const filters = ref()
 
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
+  const dateValue = params.periode.split(' s/d ')
-    const { idUlp, uid, up3 } = params
+  const { idUlp, uid, up3 } = params
-    const media = params.media ? params.media.id : ''
+  const media = params.media ? params.media.id : ''
-    refetch({
+  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('-')
-        idUlp: idUlp ? idUlp.id : 0,
+      : new Date().toISOString().slice(0, 10),
-        idUid: uid ? uid.id : 0,
+    dateTo: dateValue[1]
-        idUp3: up3 ? up3.id : 0,
+      ? dateValue[1].split('-').reverse().join('-')
-        media: media
+      : new Date().toISOString().slice(0, 10),
-    })
+    idUlp: idUlp ? idUlp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    media: media
+  })
 
-    onResult((queryResult) => {
+  onResult((queryResult) => {
-        if (queryResult.data != undefined) {
+    if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
+      data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
-        }
+    }
-        console.log(queryResult.data)
+    console.log(queryResult.data)
-        console.log(queryResult.loading)
+    console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
+    console.log(queryResult.networkStatus)
-    })
+  })
-    onError((error) => {
+  onError((error) => {
-        console.log(error)
+    console.log(error)
-    })
+  })
 }
 </script>

src/components/Pages/Keluhan/Table_28.vue

@@ -1,64 +1,219 @@
 <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>
-        }
-            " />
-    </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" />
-         <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+      <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="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,55 +310,49 @@ 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
+      }
 }`
 
-  const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
-    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),
-    idUlp: 0,
+  idUlp: 0,
-    idUid: 0,
+  idUid: 0,
-    idUp3: 0
+  idUp3: 0
-  })
+})
-  const filters = ref();
+const filters = ref();
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-      const { idUlp, uid, up3 } = params
+  const { idUlp, uid, up3 } = params
-    refetch({
+  refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateFrom: dateValue[0] ? 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),
+    dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        idUlp: idUlp ? idUlp.id : 0,
+    idUlp: idUlp ? idUlp.id : 0,
-        idUid: uid ? uid.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"
@@ -13,29 +10,29 @@
             <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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+                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 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
     }
   }
 `
@@ -190,13 +185,14 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { idUlp, uid, up3 } = params
+    const { idUlp, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? 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,
+        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"
@@ -13,15 +10,15 @@
             <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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+                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 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,30 +147,25 @@ 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, {
+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),
     idUlp: 0,
@@ -184,13 +176,14 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { idUlp, uid, up3 } = params
+    const { idUlp, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? 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,
+        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"
@@ -13,29 +10,29 @@
             <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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+                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 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>
 
@@ -83,7 +80,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type13 from '@/components/Form/FiltersType/Type13.vue'
-import {  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'
@@ -150,30 +147,25 @@ 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, {
+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),
     idUlp: 0,
@@ -184,13 +176,14 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { idUlp, uid, up3 } = params
+    const { idUlp, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? 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,
+        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';
@@ -98,10 +95,10 @@ const filterData = (params: any) => {
     const { posko, idUid, idUp3 } = params
     refetch({
         dateFrom: dateValue[0] ? 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),
+        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 ')
@@ -114,10 +112,10 @@ const filterData = (params: any) => {
 
     refetch({
         dateFrom: dateValue[0] ? 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),
+        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">
@@ -32,7 +29,7 @@
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
                         :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
@@ -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,
@@ -144,14 +141,14 @@ const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGG
 })
 
 const filterData = (params: any) => {
-    const {regional, posko, idUid, idUp3, bulan, tahun} = params;
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
     bulanSekarang.value = bulan.id;
     tahunSekarang.value = tahun.id;
     tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
-        idUid: idUid  ? idUid.id : 0,
+        idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
         bulan: bulan ? bulan.id : bulanSekarang.value,
         tahun: bulan ? tahun.id : tahunSekarang.value
@@ -175,5 +172,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 onMounted(() => {
     console.log(bulanSekarang.value)
 });
-const filters= ref();
+const filters = ref();
 </script>

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"
@@ -32,7 +28,7 @@
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
                         :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
@@ -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
-          }
         ]
       })
     }
@@ -179,9 +172,9 @@ const filterData = (params: any) => {
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
-onError((error) => {
+  onError((error) => {
-  console.log(error)
+    console.log(error)
-})
+  })
 }
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {

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,26 +1,22 @@
 <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" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+                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="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"
@@ -32,7 +28,7 @@
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
                         :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
@@ -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,26 +1,22 @@
 <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" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+                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="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"
@@ -32,7 +28,7 @@
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
                         :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
@@ -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
@@ -113,14 +109,14 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEns
     idUp3: 0
 })
 const filterData = (params: any) => {
-    const {regional, posko, idUid, idUp3, bulan, tahun} = params;
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
     bulanSekarang.value = bulan.id;
     tahunSekarang.value = tahun.id;
     tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
-        idUid: idUid  ? idUid.id : 0,
+        idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
         bulan: bulan ? bulan.id : 10,
         tahun: bulan ? tahun.id : 2023

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" />
@@ -34,7 +32,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import {ref} from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -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
@@ -81,9 +80,9 @@ const monalisaGangguanBelumSelesai = gql`
       tahun: $tahun
     ) {
         gangguan
-informasi
+        informasi
-nama_posko
+        nama_posko
-total
+        total
     }
   }
 `
@@ -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,25 +1,22 @@
 <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" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+                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="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"
@@ -31,7 +28,7 @@
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
                         :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
@@ -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
@@ -132,14 +128,14 @@ const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIKELUH
 })
 
 const filterData = (params: any) => {
-    const {regional, posko, idUid, idUp3, bulan, tahun} = params;
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
     bulanSekarang.value = bulan.id;
     tahunSekarang.value = tahun.id;
     tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
-        idUid: idUid  ? idUid.id : 0,
+        idUid: idUid ? idUid.id : 0,
         idUp3: idUp3 ? idUp3.id : 0,
         bulan: bulan ? bulan.id : bulanSekarang.value,
         tahun: bulan ? tahun.id : tahunSekarang.value
@@ -163,5 +159,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 onMounted(() => {
     console.log(bulanSekarang.value)
 });
-const filters= ref();
+const filters = ref();
 </script>

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,25 +1,22 @@
 <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" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+                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="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,25 +1,23 @@
 <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" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+                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="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
@@ -166,42 +164,42 @@ const monalisaJumlahDurasiRptRctKeluhan = gql`
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRptRctKeluhan, {
-  bulan: 10,
+    bulan: 10,
-  tahun: 2023,
+    tahun: 2023,
-  regional: '',
+    regional: '',
-  posko: '',
+    posko: '',
-  idUid: 0,
+    idUid: 0,
-  idUp3: 0
+    idUp3: 0
 })
 const filterData = (params: any) => {
-  const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
 
-  refetch({
+    refetch({
-    regional: regional,
+        regional: regional,
-    posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
-    idUid: idUid ? idUid.id : 0,
+        idUid: idUid ? idUid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
-    bulan: bulan ? bulan.id : 10,
+        bulan: bulan ? bulan.id : 10,
-    tahun: bulan ? tahun.id : 2023
+        tahun: bulan ? tahun.id : 2023
-  })
+    })
-  onResult((queryResult) => {
+    onResult((queryResult) => {
-    if (queryResult.data != undefined) {
+        if (queryResult.data != undefined) {
-      queryResult.data.monalisaJumlahDurasiRptRctKeluhan.forEach((item: any) => {
+            queryResult.data.monalisaJumlahDurasiRptRctKeluhan.forEach((item: any) => {
-        data.value = [
+                data.value = [
-          ...data.value,
+                    ...data.value,
-          {
+                    {
-            ...item
+                        ...item
-          }
+                    }
-        ]
+                ]
-      })
+            })
-    }
+        }
-    console.log(queryResult.data)
+        console.log(queryResult.data)
-    console.log(queryResult.loading)
+        console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
+        console.log(queryResult.networkStatus)
-  })
+    })
-onError((error) => {
+    onError((error) => {
-  console.log(error)
+        console.log(error)
-})
+    })
 }
 
 const filters = ref()

src/components/Pages/Monalisa/Table_49.vue

@@ -1,28 +1,31 @@
 <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" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+                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="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,25 +1,22 @@
 <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" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+                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="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,53 +1,50 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <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"
-    </Filters>
+      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-    <div id="data">
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      <DxSelection mode="single" />
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      <DxPaging :enabled="false" />
-            :word-wrap-enabled="true">
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxSelection mode="single" />
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-            <DxPaging :enabled="false" />
-            <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" />
+      <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" />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
+      <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 :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
-                    css-class="custom-table-column" />
+          css-class="custom-table-column" />
-            </DxColumn>
+      </DxColumn>
-            <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
+      <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 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>
-                <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
+        <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>
+      </DxColumn>
-            <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
+      <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
+        <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
-                    css-class="custom-table-column" />
+          css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
+        <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
-                    css-class="custom-table-column" />
+          css-class="custom-table-column" />
-            </DxColumn>
+      </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>
+    </DxDataGrid>
-    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -75,32 +72,32 @@ const tahunSekarang = ref(new Date().getFullYear())
 const bulanSekarang = ref(new Date().getMonth())
 const tahunLalu = ref(tahunSekarang.value - 1)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
+  if (e.format === 'pdf') {
-        const doc = new jsPDF()
+    const doc = new jsPDF()
 
-        exportToPdf({
+    exportToPdf({
-            jsPDFDocument: doc,
+      jsPDFDocument: doc,
-            component: e.component,
+      component: e.component,
-            indent: 5,
+      indent: 5,
-        }).then(() => {
+    }).then(() => {
-            doc.save(`.pdf`)
+      doc.save(`.pdf`)
-        })
+    })
-    } else {
+  } else {
-        const workbook = new Workbook()
+    const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+    exportToExcel({
-            component: e.component,
+      component: e.component,
-            worksheet,
+      worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true,
-        }).then(() => {
+    }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
+      })
-        })
+    })
 
-        e.cancel = true
+    e.cancel = true
-    }
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
@@ -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,43 +1,40 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <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"
-    </Filters>
+      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-    <div id="data">
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      <DxSelection mode="single" />
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      <DxPaging :enabled="false" />
-            :word-wrap-enabled="true">
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxSelection mode="single" />
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-            <DxPaging :enabled="false" />
-            <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" />
+      <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" />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
+      <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 :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
-                    css-class="custom-table-column" />
+          css-class="custom-table-column" />
-            </DxColumn>
+      </DxColumn>
-            <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
+      <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"
+        <DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
-                    css-class="custom-table-column" />
+          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"
+        <DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
-                    css-class="custom-table-column" />
+          css-class="custom-table-column" />
-            </DxColumn>
+      </DxColumn>
-            <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
+      <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
-                css-class="custom-table-column" />
+        css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
+      <DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
-                css-class="custom-table-column" />
+        css-class="custom-table-column" />
 
-        </DxDataGrid>
+    </DxDataGrid>
-    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -61,42 +58,42 @@ const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
+  if (e.format === 'pdf') {
-        const doc = new jsPDF()
+    const doc = new jsPDF()
 
-        exportToPdf({
+    exportToPdf({
-            jsPDFDocument: doc,
+      jsPDFDocument: doc,
-            component: e.component,
+      component: e.component,
-            indent: 5,
+      indent: 5,
-        }).then(() => {
+    }).then(() => {
-            doc.save(`.pdf`)
+      doc.save(`.pdf`)
-        })
+    })
-    } else {
+  } else {
-        const workbook = new Workbook()
+    const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+    exportToExcel({
-            component: e.component,
+      component: e.component,
-            worksheet,
+      worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true,
-        }).then(() => {
+    }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
+      })
-        })
+    })
 
-        e.cancel = true
+    e.cancel = true
-    }
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  const data = selectedRowsData[0]
-    console.log(data)
+  console.log(data)
 }
 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,45 +1,42 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <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"
-    </Filters>
+      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-    <div id="data">
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      <DxSelection mode="single" />
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      <DxPaging :enabled="false" />
-            :word-wrap-enabled="true">
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxSelection mode="single" />
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-            <DxPaging :enabled="false" />
-            <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" />
+      <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" />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :min-width="250" alignment="center" data-field="nama_posko" caption="Nama Unit"
+      <DxColumn :min-width="250" 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="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Gangguan Berulang" 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>
-                <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
+        <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>
+      </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>
+    </DxDataGrid>
-    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -63,42 +60,42 @@ const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
+  if (e.format === 'pdf') {
-        const doc = new jsPDF()
+    const doc = new jsPDF()
 
-        exportToPdf({
+    exportToPdf({
-            jsPDFDocument: doc,
+      jsPDFDocument: doc,
-            component: e.component,
+      component: e.component,
-            indent: 5,
+      indent: 5,
-        }).then(() => {
+    }).then(() => {
-            doc.save(`.pdf`)
+      doc.save(`.pdf`)
-        })
+    })
-    } else {
+  } else {
-        const workbook = new Workbook()
+    const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+    exportToExcel({
-            component: e.component,
+      component: e.component,
-            worksheet,
+      worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true,
-        }).then(() => {
+    }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
+      })
-        })
+    })
 
-        e.cancel = true
+    e.cancel = true
-    }
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  const data = selectedRowsData[0]
-    console.log(data)
+  console.log(data)
 }
 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,52 +1,47 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <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"
-    </Filters>
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-    <div id="data">
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      <DxSelection mode="single" />
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      <DxPaging :enabled="false" />
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            :word-wrap-enabled="true">
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-            <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" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="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" />
+      <DxColumnFixing :enabled="true" />
-            <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
+      <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>
+      <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
-            <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 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"
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
+            caption="Feb 2020" css-class="custom-table-column" />
-                        css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number"
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
+            caption="SLA (Menit)" css-class="custom-table-column" />
-                        css-class="custom-table-column" />
+        </DxColumn>
-                </DxColumn>
+        <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
-                <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"
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
+            caption="Feb 2020" css-class="custom-table-column" />
-                        css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number"
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
+            caption="SLA (Jam)" css-class="custom-table-column" />
-                        css-class="custom-table-column" />
+        </DxColumn>
-                </DxColumn>
+      </DxColumn>
-            </DxColumn>
+      <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
-            <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
-                <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
+          css-class="custom-table-column" />
-                    css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
-                <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
+          css-class="custom-table-column" />
-                    css-class="custom-table-column" />
+      </DxColumn>
-            </DxColumn>
+      <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number"
-            <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
+        caption="% Rata-Rata Aging Complains" css-class="custom-table-column" />
-                css-class="custom-table-column" />
 
-        </DxDataGrid>
+    </DxDataGrid>
-    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -70,32 +65,32 @@ const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
+  if (e.format === 'pdf') {
-        const doc = new jsPDF()
+    const doc = new jsPDF()
 
-        exportToPdf({
+    exportToPdf({
-            jsPDFDocument: doc,
+      jsPDFDocument: doc,
-            component: e.component,
+      component: e.component,
-            indent: 5,
+      indent: 5,
-        }).then(() => {
+    }).then(() => {
-            doc.save(`.pdf`)
+      doc.save(`.pdf`)
-        })
+    })
-    } else {
+  } else {
-        const workbook = new Workbook()
+    const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+    exportToExcel({
-            component: e.component,
+      component: e.component,
-            worksheet,
+      worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true,
-        }).then(() => {
+    }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
+      })
-        })
+    })
 
-        e.cancel = true
+    e.cancel = true
-    }
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
@@ -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,53 +1,48 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <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"
-    </Filters>
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-    <div id="data">
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      <DxSelection mode="single" />
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      <DxPaging :enabled="false" />
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            :word-wrap-enabled="true">
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-            <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" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="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" />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
+      <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>
+      <DxColumn alignment="center" caption="Aging Complains (Kums)" css-class="custom-table-column">
-            <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 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"
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
+            caption="Feb 2020" css-class="custom-table-column" />
-                        css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number"
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
+            caption="SLA (Menit)" css-class="custom-table-column" />
-                        css-class="custom-table-column" />
+        </DxColumn>
-                </DxColumn>
+        <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
-                <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"
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
+            caption="Feb 2020" css-class="custom-table-column" />
-                        css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number"
-                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
+            caption="SLA (Jam)" css-class="custom-table-column" />
-                        css-class="custom-table-column" />
+        </DxColumn>
-                </DxColumn>
+      </DxColumn>
-            </DxColumn>
+      <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
-            <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
+        <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
-                <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
+          css-class="custom-table-column" />
-                    css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
-                <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
+          css-class="custom-table-column" />
-                    css-class="custom-table-column" />
+      </DxColumn>
-            </DxColumn>
+      <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number"
-            <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
+        caption="% Rata-Rata Aging Complains" css-class="custom-table-column" />
-                css-class="custom-table-column" />
 
-        </DxDataGrid>
+    </DxDataGrid>
-    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -71,42 +66,42 @@ const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
+  if (e.format === 'pdf') {
-        const doc = new jsPDF()
+    const doc = new jsPDF()
 
-        exportToPdf({
+    exportToPdf({
-            jsPDFDocument: doc,
+      jsPDFDocument: doc,
-            component: e.component,
+      component: e.component,
-            indent: 5,
+      indent: 5,
-        }).then(() => {
+    }).then(() => {
-            doc.save(`.pdf`)
+      doc.save(`.pdf`)
-        })
+    })
-    } else {
+  } else {
-        const workbook = new Workbook()
+    const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+    exportToExcel({
-            component: e.component,
+      component: e.component,
-            worksheet,
+      worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true,
-        }).then(() => {
+    }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
+      })
-        })
+    })
 
-        e.cancel = true
+    e.cancel = true
-    }
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  const data = selectedRowsData[0]
-    console.log(data)
+  console.log(data)
 }
 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,43 +1,40 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <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"
-    </Filters>
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-    <div id="data">
+      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :word-wrap-enabled="true">
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      <DxSelection mode="single" />
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      <DxPaging :enabled="false" />
-            :word-wrap-enabled="true">
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxSelection mode="single" />
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-            <DxPaging :enabled="false" />
-            <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" />
+      <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" />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
+      <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 :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
-                    css-class="custom-table-column" />
+          css-class="custom-table-column" />
-            </DxColumn>
+      </DxColumn>
-            <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
+      <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"
+        <DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
-                    css-class="custom-table-column" />
+          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"
+        <DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
-                    css-class="custom-table-column" />
+          css-class="custom-table-column" />
-            </DxColumn>
+      </DxColumn>
-            <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
+      <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
-                css-class="custom-table-column" />
+        css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
+      <DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
-                css-class="custom-table-column" />
+        css-class="custom-table-column" />
 
-        </DxDataGrid>
+    </DxDataGrid>
-    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -62,42 +59,42 @@ const dataDetail = ref<any>()
 const showDetail = ref(false)
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
+  if (e.format === 'pdf') {
-        const doc = new jsPDF()
+    const doc = new jsPDF()
 
-        exportToPdf({
+    exportToPdf({
-            jsPDFDocument: doc,
+      jsPDFDocument: doc,
-            component: e.component,
+      component: e.component,
-            indent: 5,
+      indent: 5,
-        }).then(() => {
+    }).then(() => {
-            doc.save(`.pdf`)
+      doc.save(`.pdf`)
-        })
+    })
-    } else {
+  } else {
-        const workbook = new Workbook()
+    const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+    exportToExcel({
-            component: e.component,
+      component: e.component,
-            worksheet,
+      worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true,
-        }).then(() => {
+    }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
+      })
-        })
+    })
 
-        e.cancel = true
+    e.cancel = true
-    }
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  const data = selectedRowsData[0]
-    console.log(data)
+  console.log(data)
 }
 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,45 +1,40 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <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"
-    </Filters>
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-    <div id="data">
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      <DxSelection mode="single" />
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      <DxPaging :enabled="false" />
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            :word-wrap-enabled="true">
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-            <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" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="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" />
+      <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="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Gangguan Berulang" 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"
-                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan" data-type="number" caption="Jan 2020"
+            data-type="number" caption="Jan 2020" css-class="custom-table-column" />
-                        css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total"
-                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total" data-type="number" caption="Total Gangguan"
+            data-type="number" caption="Total Gangguan" css-class="custom-table-column" />
-                        css-class="custom-table-column" />
+        </DxColumn>
-                </DxColumn>
+        <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
-                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan" data-type="number" caption="Jan 2020"
+            data-type="number" caption="Jan 2020" css-class="custom-table-column" />
-                        css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total"
-                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total" data-type="number" caption="Total Keluhan"
+            data-type="number" caption="Total Keluhan" css-class="custom-table-column" />
-                        css-class="custom-table-column" />
+        </DxColumn>
-                </DxColumn>
+      </DxColumn>
-            </DxColumn>
+      <DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number"
-            <DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number" caption="Komplain Pelanggan %"
+        caption="Komplain Pelanggan %" css-class="custom-table-column" />
-                css-class="custom-table-column" />
 
-        </DxDataGrid>
+    </DxDataGrid>
-    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -64,42 +59,42 @@ const showDetail = ref(false)
 const data = ref<any[]>([])
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
+  if (e.format === 'pdf') {
-        const doc = new jsPDF()
+    const doc = new jsPDF()
 
-        exportToPdf({
+    exportToPdf({
-            jsPDFDocument: doc,
+      jsPDFDocument: doc,
-            component: e.component,
+      component: e.component,
-            indent: 5,
+      indent: 5,
-        }).then(() => {
+    }).then(() => {
-            doc.save(`.pdf`)
+      doc.save(`.pdf`)
-        })
+    })
-    } else {
+  } else {
-        const workbook = new Workbook()
+    const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
+    exportToExcel({
-            component: e.component,
+      component: e.component,
-            worksheet,
+      worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true,
-        }).then(() => {
+    }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
+      })
-        })
+    })
 
-        e.cancel = true
+    e.cancel = true
-    }
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
+  const data = selectedRowsData[0]
-    console.log(data)
+  console.log(data)
 }
 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">
+    <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,10 +8,10 @@
             @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"
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+                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" />
 
@@ -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">
+    <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"
@@ -13,8 +10,8 @@
             <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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+                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" />
@@ -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',
@@ -788,8 +782,8 @@ export const fixRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
                   fullPath === '/home/'
                     ? ''
                     : fullPath.includes('/home/')
-                    ? fullPath.replace('/home/', '')
+                      ? fullPath.replace('/home/', '')
-                    : fullPath,
+                      : fullPath,
                 name: r.name,
                 component: r.component
               } as RouteRecordRaw

src/utils/graphql.ts

@@ -2,12 +2,10 @@
 import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
 
 export const apolloClient = () => {
-
+  const httpLink = createHttpLink({
-  const httpLink =  createHttpLink({
+    uri: import.meta.env.VITE_APP_GRAPHQL_ENDPOINT,
-    uri: 'http://10.1.50.173:32180/graphql',
+    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>