From 80a7ff5f15a4563a3980700a6bf992b81be9bcee Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Sun, 31 Mar 2024 23:37:56 +0700
Subject: [PATCH] Add laporanCheckInCheckOutDetail and update
 laporanCheckInCheckOut queries

---
 src/components/Pages/Cico/LaporanCICO.vue | 346 +++++++++++++---------
 src/utils/api/api.graphql.ts              |  67 +++++
 2 files changed, 281 insertions(+), 132 deletions(-)

diff --git a/src/components/Pages/Cico/LaporanCICO.vue b/src/components/Pages/Cico/LaporanCICO.vue
index 79c44c2..1a78abc 100755
--- a/src/components/Pages/Cico/LaporanCICO.vue
+++ b/src/components/Pages/Cico/LaporanCICO.vue
@@ -184,7 +184,7 @@
 
   <DetailDialog
     :open="dialogDetail"
-    title="Daftar Detail Jumlah WO Gangguan Individu"
+    title="Daftar Detail Penugasan Khusus"
     @on-close="closedialogDetail"
     :full-width="true"
   >
@@ -243,7 +243,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_uid"
             caption="UID/UIW"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -251,7 +251,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_up3"
             caption="UP3"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -259,7 +259,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_posko"
             caption="Posko"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -267,7 +267,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="media"
             caption="Sumber Lapor"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -275,7 +275,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="pembuat_laporan"
             caption="Created By"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -283,7 +283,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="dispatch_by"
             caption="Dispatch By"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -291,15 +291,15 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_dispatch"
             caption="Dispatch Time"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="user_regu"
             caption="User Regu"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -307,7 +307,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_regu"
             caption="Nama Regu"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -315,7 +315,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="personil_yantek"
             caption="Nama Petugas"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -323,7 +323,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="shift"
             caption="Shif"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -331,7 +331,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="check_in_petugas"
             caption="Check In Petugas"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -339,7 +339,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="no_laporan"
             caption="No Laporan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -347,7 +347,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_lapor"
             caption="Tgl Lapor"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -355,7 +355,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_dispatch"
             caption="Tgl Penugasan Baru"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -363,7 +363,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_perjalanan"
             caption="Tgl Dalam Perjalanan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -371,7 +371,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_response"
             caption="Tgl Pengerjaan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -379,7 +379,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_nyala_sementara"
             caption="Tgl Nyala Sementara"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -387,7 +387,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_nyala"
             caption="Tgl Nyala"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -395,7 +395,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_selesai"
             caption="Tgl Selesai"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -403,7 +403,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="durasi_waktu_response"
             caption="Durasi Perjalanan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -411,7 +411,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="durasi_wo"
             caption="Durasi WO"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -419,7 +419,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="check_out_petugas"
             caption="Check Out Petugas"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -427,39 +427,39 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="durasi_menit_response"
             caption="RPT"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="durasi_menit_recovery"
             caption="RCT"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="rating"
             caption="Rating"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="jml_pelanggan_padam"
             caption="Jml Pelanggan Padam"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="fasilitas"
             caption="Fasilitas"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -467,7 +467,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="sub_fasilitas"
             caption="Sub Fasilitas"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -475,7 +475,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="peralatan"
             caption="Peralatan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -483,7 +483,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="dampak_kerusakan"
             caption="Dampak Kerusakan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -491,7 +491,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="penyebab"
             caption="Penyebab"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -499,7 +499,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="kelompok_penyebab"
             caption="Kelompok Penyebab"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -507,7 +507,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="cuaca"
             caption="Cuaca"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -515,7 +515,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="keterangan_pelapor"
             caption="Keterangan Pelapor"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -523,7 +523,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="keterangan"
             caption="Keterangan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -531,15 +531,16 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="penyebab_padam"
             caption="Penyebab Padam"
             css-class="custom-table-column"
             cell-template="formatText"
+            :calculate-display-value="(item: any) => `${item.penyebab} - ${item.kelompok_penyebab}`"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tindakan"
             caption="Tindakan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -547,7 +548,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="status_akhir"
             caption="APKT Status"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -555,7 +556,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="referensi_marking"
             caption="Referensi Marking"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -563,10 +564,10 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="blth"
             caption="BLTH"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatNumber"
           />
 
           <template #formatText="{ data }">
@@ -587,202 +588,279 @@
       <div class="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-[135px] text-gray-800">UID/UIW:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_uid" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">UP3:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_up3" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Posko:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Sumber Lapor:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.media" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Created By:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.pembuat_laporan"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Dispatch By:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.dispatch_by" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Dispatch Time:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.durasi_waktu_dispatch"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">User Regu:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.user_regu" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Regu:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_regu" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Petugas:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.personil_yantek"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Shif:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.shift" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Check In Petugas:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.check_in_petugas"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Tgl Lapor:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Tgl Penugasan Regu:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_dispatch"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Dalam Perjalanan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_perjalanan"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Pengerjaan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_perjalanan"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala Sementara:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_nyala_sementara"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_nyala" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Selesai:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_selesai" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Perjalanan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.durasi_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-[135px] text-gray-800">Durasi WO:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.durasi_wo" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Check Out Petugas:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.check_out_petugas"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">RPT</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.durasi_menit_response"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">RCT</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.durasi_menit_recovery"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Rating</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.rating" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Jml Pelanggan Padam:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.jml_pelanggan_padam"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Fasilitas:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.fasilitas" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Sub Fasilitas:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.sub_fasilitas" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Peralatan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.peralatan" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Dampak Kerusakan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.dampak_kerusakan"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Kelompok Penyebab:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.kelompok_penyebab"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Cuaca:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.cuaca" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.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-[135px] text-gray-800">Keterangan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.keterangan" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab Padam:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="`${dataSubSelected?.penyebab} - ${dataSubSelected?.kelompok_penyebab}`"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.tindakan" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">PKT Status:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">APKT Status:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Referensi Marking</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.referensi_marking"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">BLTH</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.blth" class-name="flex-1" />
         </div>
       </div>
     </div>
@@ -813,7 +891,7 @@ import { Workbook } from 'exceljs'
 import Filters from '@/components/Form/Filters.vue'
 import { Type1 } from '@/components/Form/FiltersType'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
@@ -838,10 +916,9 @@ const loadingSubData = ref(false)
 
 const closedialogDetail = () => (dialogDetail.value = false)
 
-const getDetail = () => {
-  loadingSubData.value = true
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
-  const ref = dataSelected.value
+  const selected = dataSelected.value
 
   const query = {
     dateFrom: dateValue[0]
@@ -850,29 +927,27 @@ const getDetail = () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    posko: ref.id_posko,
-    idUid: ref.id_uid,
-    idUp3: ref.id_up3
+    idPosko: selected?.id_posko ? selected?.id_posko : 0,
+    idUid: selected?.id_uid ? selected?.id_uid : 0,
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    personilYantek: selected?.personil_yantek ? selected?.personil_yantek : ''
   }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.cico.laporanCheckInCheckOutDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailCheckInCheckOut
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -920,23 +995,27 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
+    showDetail()
   }
-  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSubSelected.value = selectedRowsData[0]
   }
-  dataSubSelected.value = data
-  console.log(data)
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const { onResult, onError, loading, refetch } = useQuery(queries.cico.laporanCheckInCheckOut, {
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -946,20 +1025,23 @@ const filterData = (params: any) => {
     idPosko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.laporanCheckInCheckOut
-    }
-    console.log(queryResult.data)
-  })
-  onError((error) => {
-    console.log(error)
-  })
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.cico.laporanCheckInCheckOut, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.laporanCheckInCheckOut
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const filters = ref()
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index ac6bb98..334d1b1 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -2825,6 +2825,70 @@ export const queries = {
     }
   },
   cico: {
+    laporanCheckInCheckOutDetail: gql`
+      query detailCheckInCheckOut(
+        $dateFrom: Date!
+        $dateTo: Date!
+        $idPosko: Int!
+        $idUid: Int!
+        $idUp3: Int!
+        $personilYantek: String!
+      ) {
+        detailCheckInCheckOut(
+          dateFrom: $dateFrom
+          dateTo: $dateTo
+          idPosko: $idPosko
+          idUid: $idUid
+          idUp3: $idUp3
+          personilYantek: $personilYantek
+        ) {
+          id
+          id_uid
+          nama_uid
+          id_up3
+          nama_up3
+          id_posko
+          nama_posko
+          media
+          pembuat_laporan
+          dispatch_by
+          durasi_waktu_dispatch
+          user_regu
+          nama_regu
+          personil_yantek
+          shift
+          check_in_petugas
+          no_laporan
+          durasi_wo
+          waktu_lapor
+          waktu_dispatch
+          waktu_perjalanan
+          waktu_nyala_sementara
+          waktu_nyala
+          waktu_selesai
+          waktu_response
+          durasi_waktu_response
+          check_out_petugas
+          durasi_menit_response
+          durasi_menit_recovery
+          rating
+          jml_pelanggan_padam
+          fasilitas
+          sub_fasilitas
+          peralatan
+          dampak_kerusakan
+          kelompok_penyebab
+          cuaca
+          keterangan_pelapor
+          keterangan
+          penyebab
+          tindakan
+          status_akhir
+          referensi_marking
+          blth
+        }
+      }
+    `,
     laporanCheckInCheckOut: gql`
       query laporanCheckInCheckOut(
         $dateFrom: Date!
@@ -2840,6 +2904,9 @@ export const queries = {
           idUid: $idUid
           idUp3: $idUp3
         ) {
+          id_uid
+          id_up3
+          id_posko
           user_regu
           personil_yantek
           jumlah_wo_gangguan_individual