Fix typo in variable name for "Penyebab" in Gangguan components

src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue

@@ -459,7 +459,7 @@
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
           <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
         </div>
       </div>

src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue

@@ -739,7 +739,7 @@
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
           <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
         </div>
       </div>

src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue

@@ -755,7 +755,7 @@
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
           <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
         </div>
       </div>

src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue

@@ -836,7 +836,7 @@
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
           <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
         </div>
       </div>

src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue

@@ -598,7 +598,7 @@
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
           <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
         </div>
       </div>

src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue

@@ -593,7 +593,7 @@
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
           <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
         </div>
       </div>

src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue

@@ -584,7 +584,7 @@
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
           <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
         </div>
       </div>

src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue

@@ -18,7 +18,7 @@
       @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
-      :word-wrap-enabled="true"
+      :word-wrap-enabled="false"
     >
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
@@ -36,7 +36,6 @@
         :show-indicator="showIndicator"
         :show-pane="showPane"
         :shading="shading"
-        v-if="loading"
         v-model:visible="loading"
         :enabled="true"
       />
@@ -79,6 +78,7 @@
         data-field="waktu_lapor"
         caption="Tgl Lapor"
         css-class="custom-table-column !align-top"
+        cell-template="formatText"
       />
       <DxColumn
         :width="170"
@@ -86,6 +86,7 @@
         data-field="waktu_dialihkan"
         caption="Tgl Dialihkan"
         css-class="custom-table-column !align-top"
+        cell-template="formatText"
       />
       <DxColumn
         :width="170"
@@ -93,6 +94,7 @@
         data-field="waktu_response"
         caption="Tgl Response"
         css-class="custom-table-column !align-top"
+        cell-template="formatText"
       />
       <DxColumn
         :width="170"
@@ -100,6 +102,7 @@
         data-field="waktu_recovery"
         caption="Tgl Recovery"
         css-class="custom-table-column !align-top"
+        cell-template="formatText"
       />
       <DxColumn
         :width="170"
@@ -197,20 +200,14 @@
         cell-template="formatText"
       />
 
-      <template #cellCenter="{ data }">
-        <p class="cursor-pointer">
-          {{ data.text }}
-        </p>
-      </template>
-
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -222,15 +219,136 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right">
+        <p class="!text-right cursor-pointer" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Daftar Keluhan Dialihkan Ke Unit Lain"
+    @on-close="closeDialog"
+  >
+    <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="
+            parseInt(dataDetail?.durasi_response_time)
+              ? formatWaktu(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"
+          class-name="flex-1"
+          :value="
+            parseInt(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              : '-'
+          "
+        />
+      </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"
+        />
+      </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"
+        />
+      </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"
+        />
+      </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 { formatWaktu } from '@/components/Form/FiltersType/reference'
@@ -260,6 +378,13 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>({})
+const dialogDetail = ref(false)
+
+const showDetail = () => (dialogDetail.value = true)
+
+const closeDialog = () => (dialogDetail.value = false)
 
 const onExporting = (e: any) => {
   const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
@@ -456,10 +581,9 @@ const onExporting = (e: any) => {
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  dataDetail.value = data
 }
 
-const data = ref<any[]>([])
 const { onResult, onError, loading, refetch } = useQuery(
   queries.keluhan.daftar.keluhanDipindahkanKeIDULPLain,
   {

src/utils/api/api.graphql.ts

@@ -1823,7 +1823,7 @@ export const queries = {
           }
         `,
         jumlahKaliGangguan: gql`
-          query DaftarMonalisaJumlahKaliGangguan(
+          query monalisaJumlahKaliGangguan(
             #$regional: String
             $idUid: Int
             $idUp3: Int