Add shading color to DxLoadPanel components

src/utils/api/api.graphql.ts

@@ -1,5 +1,84 @@
 //deploy vm
 import { ApolloClient, createHttpLink, gql, InMemoryCache } from '@apollo/client/core'
+import axios from 'axios'
+const controller = new AbortController()
+const url = import.meta.env.VITE_APP_GRAPHQL_ENDPOINT
+const instance = axios.create({
+  baseURL: url,
+  headers: {
+    Accept: 'application/json',
+    'Cache-Control': 'no-cache',
+    'Content-Type': 'application/json'
+  },
+  signal: controller.signal
+})
+
+export const getGangguanDetail = async (data: any) => {
+  // controller.abort()
+  return await instance.post('', {
+    query: `query detailGangguan(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $idRegu: Int!
+          $media: String!
+          $idUlp: Int!
+          $namaRegional: String!
+        ) {
+          detailGangguan(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            idRegu: $idRegu
+            idUlp: $idUlp
+            namaRegional: $namaRegional
+            media: $media
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            id_posko
+            nama_posko
+            no_laporan
+            pembuat_laporan
+            waktu_lapor
+            waktu_response
+            waktu_recovery
+            durasi_dispatch_time
+            durasi_response_time
+            durasi_recovery_time
+            status_akhir
+            is_marking
+            referensi_marking
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            media
+            nama_posko
+            jarak_closing
+            dispatch_oleh
+            diselesaikan_oleh
+            penyebab
+            tindakan
+            kode_gangguan
+            jenis_gangguan
+            nilai_rating
+          }
+        }`,
+    variables: data
+  })
+}
 
 export const apolloClient = () => {
   const httpLink = createHttpLink({
@@ -913,6 +992,7 @@ export const queries = {
             id_fasilitas
             sub_kelompok
             kode
+            equipment_id
             total
             total_selesai
             persen_selesai
@@ -969,16 +1049,14 @@ export const queries = {
             durasi_response_time
             durasi_recovery_time
             status_akhir
-            id_pelnomormeter
-            id_nomormeter
+            referensi_marking
+            idpel_nometer
             nama_pelapor
             alamat_pelapor
             no_telp_pelapor
             keterangan_pelapor
             tindakan
             penyebab
-            is_masih_proses
-            kwh_lost
           }
         }
       `,