From ab2844ec634685f076b8cc1b3349022c8f25517d Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Thu, 29 Feb 2024 18:15:13 +0700
Subject: [PATCH] Refactor data grid components

---
 src/components/Form/FiltersType/Type13.vue    |  99 ++++---
 src/components/Pages/Cico/LaporanCICO.vue     |   1 +
 .../Pages/Keluhan/Rekap/RKeluhan_ALL.vue      | 235 +++++++++++++----
 .../Keluhan/Rekap/RKeluhan_BerdasarMedia.vue  |  67 ++++-
 .../Rekap/RKeluhan_PerFungsiBidang.vue        | 238 +++++++++++++----
 .../Rekap/RKeluhan_PerJenisKeluhan.vue        | 242 +++++++++++++----
 .../Rekap/RKeluhan_PerKelompokKeluhan.vue     | 246 +++++++++++++----
 .../Keluhan/Rekap/RKeluhan_PerTanggal.vue     | 249 ++++++++++++++----
 .../Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue  | 248 +++++++++++++----
 9 files changed, 1293 insertions(+), 332 deletions(-)

diff --git a/src/components/Form/FiltersType/Type13.vue b/src/components/Form/FiltersType/Type13.vue
index 5fbe1cc..1ac7217 100755
--- a/src/components/Form/FiltersType/Type13.vue
+++ b/src/components/Form/FiltersType/Type13.vue
@@ -2,14 +2,22 @@
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
-import { selectedUid, selectedUp3Ulp, selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } 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 up3 = ref({ id: 0, name: up3Placeholder });
-const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+import {
+  selectedUid,
+  selectedUp3Ulp,
+  selectedUlp,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsUlp
+} 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 up3 = ref({ id: 0, name: up3Placeholder })
+const uid = ref({ id: 0, name: uidPlaceholder })
+const ulp = ref({ id: 0, name: ulpPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -19,27 +27,26 @@ const data = ref({
   group: 1
 })
 const setUid = (value: any) => {
-  uid.value = value;
-  selectedUid(value);
-  up3.value = { id: 0, name: up3Placeholder };
-  data.value.uid = value;
-};
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+}
 
 const setUp3 = (value: any) => {
-  up3.value = value;
-  selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
-  data.value.up3 = value;
-};
+  up3.value = value
+  selectedUp3Ulp(value)
+  ulp.value = { id: 0, name: ulpPlaceholder }
+  data.value.up3 = value
+}
 
 const setUlp = (value: any) => {
-  ulp.value = value;
-  selectedUlp(value);
-  data.value.ulp = value;
+  ulp.value = value
+  selectedUlp(value)
+  data.value.ulp = value
 
-  console.log('data.value', data.value);
-
-};
+  console.log('data.value', data.value)
+}
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -48,33 +55,57 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Unit Induk Distribusi/Wilayah:</label>
+    <label class="block mb-2 font-semibold text-gray-800 sm:mb-0"
+      >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="block mb-2 font-semibold text-gray-800 sm:mb-0">Unit Pelaksanaan Pelayanan Pelanggan:</label>
+    <label class="block mb-2 font-semibold text-gray-800 sm:mb-0"
+      >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="block mb-2 font-semibold text-gray-800 sm:mb-0">Unit Layanan Pelanggan:</label>
-    <Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :placeholder="ulpPlaceholder" />
+    <Select
+      @update:selected="setUlp($event)"
+      :data="itemsUlp"
+      :selected="ulp"
+      :placeholder="ulpPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
-    <DatePicker @update:date-value="(value) => data.periode = value" />
+    <DatePicker @update:date-value="(value) => (data.periode = value)" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Group By Kode Unit Distribusi:</label>
+    <label class="block mb-2 font-semibold text-gray-800 sm:mb-0"
+      >Group By Kode Unit Distribusi:</label
+    >
 
-    <InlineRadioGroup @update:group-value="(value) => {
-      data.group = value
-      console.log('data.group', value)
-    }" :radio-items="[{ id: 1, title: 'Tidak' }, { id: 2, title: 'Ya, Grupkan' }]" />
+    <InlineRadioGroup
+      @update:group-value="
+        (value) => {
+          data.group = value
+          console.log('data.group', value)
+        }
+      "
+      :radio-items="[
+        { id: 1, title: 'Tidak' },
+        { id: 2, title: 'Ya, Grupkan' }
+      ]"
+    />
   </div>
 </template>
diff --git a/src/components/Pages/Cico/LaporanCICO.vue b/src/components/Pages/Cico/LaporanCICO.vue
index 7e7b99d..9909ad6 100755
--- a/src/components/Pages/Cico/LaporanCICO.vue
+++ b/src/components/Pages/Cico/LaporanCICO.vue
@@ -2,6 +2,7 @@
   <Filters @run-search="() => filterData(filters)" class="mb-4">
     <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
     <DxDataGrid
       class="max-h-[calc(100vh-140px)] mb-10"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index 9e333e9..7625f72 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -1,72 +1,209 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type3 @update:filters="(value) => filters = value" />
+  <Filters
+    @reset-form="data = []"
+    @run-search="() => filterData(filters)"
+    :report-button="true"
+    class="mb-4"
+  >
+    <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onDataSelectionChanged" :column-width="100" @exporting="onExporting"
-      :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onDataSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn alignment="center" :width="170" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
-        cell-template="unitName" header-cell-template="title-header" />
+      <DxColumn
+        alignment="center"
+        :width="170"
+        data-field="nama_ulp"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+        cell-template="unitName"
+        header-cell-template="title-header"
+      />
       <template #unitName="{ data }">
         <p class="text-left cursor-pointer" @click="showDialog()">
           {{ data.text }}
         </p>
       </template>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
-          css-class="custom-table-column" cell-template="defaults" />
-        <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Selesai"
-          css-class="custom-table-column" cell-template="defaults" />
-        <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-          css-class="custom-table-column" cell-template="percent" />
-        <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="InProgress"
-          css-class="custom-table-column" cell-template="defaults" />
-        <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-          css-class="custom-table-column" cell-template="percent" />
-        <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
-          css-class="custom-table-column" cell-template="defaults" />
-        <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-          css-class="custom-table-column" cell-template="formatTime" />
-        <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-          css-class="custom-table-column" cell-template="formatTime" />
-        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-          caption="> SLA" css-class="custom-table-column" cell-template="defaults" />
-        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-          caption="≤ SLA" css-class="custom-table-column" cell-template="defaults" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+          cell-template="defaults"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_selesai"
+          data-type="number"
+          caption="Selesai"
+          css-class="custom-table-column"
+          cell-template="defaults"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="persen_selesai"
+          data-type="number"
+          caption="%"
+          css-class="custom-table-column"
+          cell-template="percent"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_inproses"
+          data-type="number"
+          caption="InProgress"
+          css-class="custom-table-column"
+          cell-template="defaults"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="persen_inproses"
+          data-type="number"
+          caption="%"
+          css-class="custom-table-column"
+          cell-template="percent"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="avg_durasi_response"
+          data-type="number"
+          caption="Rata-Rata"
+          css-class="custom-table-column"
+          cell-template="defaults"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="max_durasi_response"
+          data-type="number"
+          caption="Max"
+          css-class="custom-table-column"
+          cell-template="formatTime"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="min_durasi_response"
+          data-type="number"
+          caption="Min"
+          css-class="custom-table-column"
+          cell-template="formatTime"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_diatas_sla_response"
+          data-type="number"
+          caption="> SLA"
+          css-class="custom-table-column"
+          cell-template="defaults"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_dibawah_sla_response"
+          data-type="number"
+          caption="≤ SLA"
+          css-class="custom-table-column"
+          cell-template="defaults"
+        />
       </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" cell-template="defaults" />
-        <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
-          css-class="custom-table-column" cell-template="formatTime" />
-        <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-          css-class="custom-table-column" cell-template="formatTime" />
-        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
-          caption="> SLA" css-class="custom-table-column" cell-template="defaults" />
-        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
-          caption="≤ SLA" css-class="custom-table-column" cell-template="defaults" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="avg_durasi_recovery"
+          data-type="number"
+          caption="Rata-Rata"
+          css-class="custom-table-column"
+          cell-template="defaults"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="max_durasi_recovery"
+          data-type="number"
+          caption="Max"
+          css-class="custom-table-column"
+          cell-template="formatTime"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="min_durasi_recovery"
+          data-type="number"
+          caption="Min"
+          css-class="custom-table-column"
+          cell-template="formatTime"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_diatas_sla_recovery"
+          data-type="number"
+          caption="> SLA"
+          css-class="custom-table-column"
+          cell-template="defaults"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_dibawah_sla_recovery"
+          data-type="number"
+          caption="≤ SLA"
+          css-class="custom-table-column"
+          cell-template="defaults"
+        />
       </DxColumn>
 
       <template #formatTime="{ data }">
         <p class="cursor-pointer" @click="showDialog()">
-          {{ formatWaktu(data.text) }}
+          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
       <template #percent="{ data }">
-        <p class="cursor-pointer" @click="showDialog()">
-          {{ data.text }}%
-        </p>
+        <p class="cursor-pointer" @click="showDialog()">{{ data.text }}%</p>
       </template>
       <template #defaults="{ data }">
         <p class="cursor-pointer" @click="showDialog()">
@@ -81,8 +218,12 @@
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDialogDetail" :full-width="true" title="Detail Rekapitulasi Keluhan All"
-    @on-close="closeDetailDialog">
+  <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">
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
index 27140ff..6af7c74 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
@@ -1,27 +1,68 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
     <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :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="media" caption="Nama Media" 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
+        :width="170"
+        alignment="center"
+        data-field="media"
+        caption="Nama Media"
+        css-class="custom-table-column"
+      />
       <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-        <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number" :caption="i"
-          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>
     </DxDataGrid>
   </div>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
index 2cd55fb..3db4235 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
@@ -1,75 +1,215 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
+  <Filters
+    @reset-form="data = []"
+    @run-search="() => filterData(filters)"
+    :report-button="true"
+    class="mb-4"
+  >
     <Type13 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-      <DxColumn :width="170" alignment="center" data-field="fungsi_bidang" caption="Fungsi Bidang"
-        css-class="custom-table-column" />
+      <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="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
+          :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="total_selesai" data-type="number" caption="Jml"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-            css-class="custom-table-column" />
+          <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="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="total_inproses" data-type="number" caption="Jml"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-            css-class="custom-table-column" />
+          <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="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="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="avg_durasi_response" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" />
-          <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="max_durasi_response" data-type="number" caption="Min"
-            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="avg_durasi_response"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <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="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="total_diatas_sla_response" data-type="number"
-            caption=">SLA" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_diatas_sla_response"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_response"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="avg_durasi_recovery"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="max_durasi_recovery"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="min_durasi_recovery"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
-            caption=">SLA" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_diatas_sla_recovery"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_recovery"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
     </DxDataGrid>
@@ -79,8 +219,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type13 from '@/components/Form/FiltersType/Type13.vue'
-import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -103,8 +242,7 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dataDetail = ref<any>()
-const showDetail = ref(false)
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
index 7b8f3ba..2e87de7 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
@@ -1,77 +1,223 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
     <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-      <DxColumn :width="170" alignment="center" data-field="tipe_keluhan" caption="Jenis Keluhan"
-        css-class="custom-table-column" />
+      <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_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"
-          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="total_selesai" data-type="number" caption="Jml"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-            css-class="custom-table-column" />
+          <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="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="total_inproses" data-type="number" caption="Jml"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-            css-class="custom-table-column" />
+          <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="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="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="avg_durasi_response" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_durasi_response"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="avg_durasi_response"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="max_durasi_response"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+            cell-template="data-waktu"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="min_durasi_response"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+            cell-template="data-waktu"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-            caption=">SLA" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_diatas_sla_response"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_response"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_durasi_recovery"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="avg_durasi_recovery"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="max_durasi_recovery"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+            cell-template="data-waktu"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="min_durasi_recovery"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+            cell-template="data-waktu"
+          />
         </DxColumn>
         <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_sla_recovery" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_diatas_sla_recovery"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_recovery"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
+
+      <template #data-waktu="{ data }">
+        <p>
+          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -80,7 +226,7 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { ref } from 'vue'
-
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -162,6 +308,8 @@ const GET_DATA = gql`
       avg_durasi_response
       min_durasi_response
       max_durasi_response
+      total_durasi_response
+      total_durasi_recovery
       total_dibawah_sla_response
       total_diatas_sla_response
       avg_durasi_recovery
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
index 63ebdea..413591c 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
@@ -1,77 +1,228 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
+  <Filters
+    @reset-form="data = []"
+    @run-search="() => filterData(filters)"
+    :report-button="true"
+    class="mb-4"
+  >
     <Type13 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-      <DxColumn :width="170" alignment="center" data-field="kelompok" caption="Kelompok Keluhan"
-        css-class="custom-table-column" />
+      <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="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="total" data-type="number" caption="Total"
-          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="total_selesai" data-type="number" caption="Jml"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-            css-class="custom-table-column" />
+          <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="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="total_inproses" data-type="number" caption="Jml"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-            css-class="custom-table-column" />
+          <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="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="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="avg_durasi_response" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_durasi_response"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="avg_durasi_response"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="max_durasi_response"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+            cell-template="data-waktu"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="min_durasi_response"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+            cell-template="data-waktu"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-            caption=">SLA" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_diatas_sla_response"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_response"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_durasi_recovery"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="avg_durasi_recovery"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="max_durasi_recovery"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+            cell-template="data-waktu"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="min_durasi_recovery"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+            cell-template="data-waktu"
+          />
         </DxColumn>
         <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_sla_recovery" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_diatas_sla_recovery"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_recovery"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
+
+      <template #data-waktu="{ data }">
+        <p>
+          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -79,6 +230,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type13 from '@/components/Form/FiltersType/Type13.vue'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
@@ -161,6 +313,8 @@ const GET_DATA = gql`
       avg_durasi_response
       min_durasi_response
       max_durasi_response
+      total_durasi_recovery
+      total_durasi_response
       total_dibawah_sla_response
       total_diatas_sla_response
       avg_durasi_recovery
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index 34b0a1e..496dc5b 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -1,77 +1,227 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
+  <Filters
+    @reset-form="data = []"
+    @run-search="() => filterData(filters)"
+    :report-button="true"
+    class="mb-4"
+  >
     <Type13 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :show-column-lines="true" :show-row-lines="false"
-      :show-borders="true" :data-source="data" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :data-source="data"
+      :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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :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"
-        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
+        :width="170"
+        alignment="center"
+        data-field="tanggal"
+        caption="Tanggal Lapor"
+        css-class="custom-table-column"
+      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
-          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="total_selesai" data-type="number" caption="Jml"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-            css-class="custom-table-column" />
+          <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="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="total_inproses" data-type="number" caption="Jml"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-            css-class="custom-table-column" />
+          <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="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="Hari" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Total"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_durasi_response"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="avg_durasi_response"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="max_durasi_response"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+            cell-template="data-waktu"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="min_durasi_response"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+            cell-template="data-waktu"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-            caption=">SLA" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_diatas_sla_response"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_response"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Total"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_durasi_recovery"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="avg_durasi_recovery"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="max_durasi_recovery"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+            cell-template="data-waktu"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="min_durasi_recovery"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+            cell-template="data-waktu"
+          />
         </DxColumn>
         <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_sla_recovery" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_diatas_sla_recovery"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_recovery"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
+
+      <template #data-waktu="{ data }">
+        <p>
+          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -79,8 +229,8 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type13 from '@/components/Form/FiltersType/Type13.vue'
-import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -99,6 +249,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -159,6 +310,8 @@ const GET_DATA = gql`
       nama_ulp
       tanggal
       total
+      total_durasi_response
+      total_durasi_recovery
       total_selesai
       persen_selesai
       total_inproses
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
index 38b9d0f..b750aa3 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
@@ -1,76 +1,227 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
+  <Filters
+    @reset-form="data = []"
+    @run-search="() => filterData(filters)"
+    :report-button="true"
+    class="mb-4"
+  >
     <Type8 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget" :word-wrap-enabled="true">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :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" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :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="nama_ulp" caption="Unit" 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
+        :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" />
+        <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="total_selesai" data-type="number" caption="Jml"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-            css-class="custom-table-column" />
+          <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="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="total_inproses" data-type="number" caption="Jml"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-            css-class="custom-table-column" />
+          <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="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="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="avg_durasi_response" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_durasi_response"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="avg_durasi_response"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="max_durasi_response"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+            cell-templete="data-waktu"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="min_durasi_response"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+            cell-templete="data-waktu"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-            caption=">SLA" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_diatas_sla_response"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_response"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_durasi_recovery"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="avg_durasi_recovery"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="max_durasi_recovery"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+            cell-templete="data-waktu"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="min_durasi_recovery"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+            cell-templete="data-waktu"
+          />
         </DxColumn>
         <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_sla_recovery" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_diatas_sla_recovery"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_dibawah_sla_recovery"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
+
+      <template #data-waktu="{ data }">
+        <p>
+          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -78,8 +229,8 @@
 <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 { useFiltersStore } from '@/stores/filters'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -98,6 +249,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -159,6 +311,8 @@ const GET_DATA = gql`
       persen_selesai
       total_inproses
       persen_inproses
+      total_durasi_response
+      total_durasi_recovery
       avg_durasi_response
       min_durasi_response
       max_durasi_response