Update Select component and import statements

src/components/Form/FiltersType/Type16.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
+  import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData,fetchMedia, items,itemsUp3, itemsPosko,itemsMedia} from './reference';
+fetchMedia();
 </script>
 
 <template>
@@ -27,7 +29,7 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Media:</label>
 
-    <Select placeholder="Semua Media" />
+    <Select placeholder="Semua Media" :data="itemsMedia" />
   </div>
   
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type18.vue

@@ -3,7 +3,7 @@ import Select from '@/components/Select.vue'
 import SelectMulti from '@/components/SelectMulti.vue'
 
 import DatePicker from '@/components/DatePicker.vue'
-import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
+import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
 fetchData();
 
 const departments = [
@@ -26,7 +26,7 @@ const departments = [
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select @update:selected="selectedUppp($event)" :data="itemsUp3"
+    <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3"
       placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
   </div>
 

src/components/Form/FiltersType/Type6.vue

@@ -2,7 +2,7 @@
   import InputNumber from '@/components/Form/InputNumber.vue'
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
-  import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
+  import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
 import { useTotalReport } from '@/stores/totalReport';
   fetchData();
   const changeMinReport = (value: any) => {
@@ -25,7 +25,7 @@ import { useTotalReport } from '@/stores/totalReport';
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select @update:selected="selectedUppp($event)" :data="itemsUp3"  placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3"  placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/reference.ts

@@ -1,5 +1,5 @@
 
-import { getUid, getUp3, getPosko ,getUlp} from '@/utils/network';
+import { getUid, getUp3, getPosko, getUlp } from '@/utils/network';
 import { ref } from 'vue'
 import { usePostsStore } from '@/stores/posts';
 import { useUp3Store } from '@/stores/up3';
@@ -7,28 +7,28 @@ import { useRegionStore } from '@/stores/region';
 import { useUlpStore } from '@/stores/ulp';
 
 interface Item {
-  id: number;
+  id: any;
   name: any;
 }
-const months =[
+const months = [
-  {id:1, name: 'Januari'},
+  { id: 1, name: 'Januari' },
-  {id:2, name: 'Februari'},
+  { id: 2, name: 'Februari' },
-  {id:3, name: 'Maret'},
+  { id: 3, name: 'Maret' },
-  {id:4, name: 'April'},
+  { id: 4, name: 'April' },
-  {id:5, name: 'Mei'},
+  { id: 5, name: 'Mei' },
-  {id:6, name: 'Juni'},
+  { id: 6, name: 'Juni' },
-  {id:7, name: 'Juli'},
+  { id: 7, name: 'Juli' },
-  {id:8, name: 'Agustus'},
+  { id: 8, name: 'Agustus' },
-  {id:9, name: 'September'},
+  { id: 9, name: 'September' },
-  {id:10, name: 'Oktober'},
+  { id: 10, name: 'Oktober' },
-  {id:11, name: 'November'},
+  { id: 11, name: 'November' },
-  {id:12, name: 'Desember'},
+  { id: 12, name: 'Desember' },
 ]
 // create 4 year back array
 const year = new Date().getFullYear();
-const years =ref<Item[]>([]);
+const years = ref<Item[]>([]);
 for (let i = 0; i < 5; i++) {
-  years.value.push({id:year-i, name: year-i})
+  years.value.push({ id: year - i, name: year - i })
 }
 const timeout = ref()
 const items = ref<Item[]>([]);
@@ -73,8 +73,8 @@ const fetchDataUlp = async (up3: number) => {
     const res = await getUlp(up3)
     itemsUlp.value = res.data.map((item: any) => (
       {
-        id: item.id,
+        id: item.name,
-        name: item.nama,
+        name: item.name,
       }
     ));
   } catch (error) {
@@ -88,15 +88,51 @@ const fetchDataPosko = async (up3: number) => {
       const res = await getPosko(up3)
       itemsPosko.value = res.data.map((item: any) => (
         {
-        id: item.id,
+          id: item.nama,
           name: item.nama,
         }
       ));
     } catch (error) {
       console.error('Error fetching data:', error);
     }
-},300);
+  }, 300);
 };
+const fetchMedia = () => {
+  itemsMedia.value = [
+  { id: "Ulasan Aplikasi PLN Mobile", name: "Ulasan Aplikasi PLN Mobile"},
+  { id: "Twitter", name: "Twitter" },
+  { id: "PLN Mobile", name: "PLN Mobile" },
+  { id: "Media Massa", name: "Media Massa" },
+  { id: "Live Chat Website", name: "Live Chat Website" },
+  { id: "Live Chat PLN Mobile", name: "Live Chat PLN Mobile" },
+  { id: "Instagram", name: "Instagram" },
+  { id: "Facebook", name: "Facebook" },
+  { id: "Email", name: "Email" },
+  { id: "EMS", name: "EMS" },
+  { id: "Datang ke Kantor", name: "Datang ke Kantor" },
+  { id: "Call ke Kantor Unit", name: "Call ke Kantor Unit" },
+  { id: "Call PLN 123", name: "Call PLN 123" },
+  ]
+
+}
+const fetchStatus = (data : any) => {
+
+  const status  = [
+    {"id": "8", "name": "Selesai"},
+    {"id": "7", "name": "Nyala"},
+    {"id": "6", "name": "Pengalihan"},
+    {"id": "5", "name": "Dialihkan"},
+    {"id": "4", "name": "Dalam Pengerjaan"},
+    {"id": "3", "name": "Dalam Perjalanan"},
+    {"id": "2", "name": "Penugasan Regu"},
+    {"id": "1", "name": "lapor"}
+  ]
+  return status.filter((item: any) => {
+    if (item.id == data) {
+      return item.name
+    }
+  });
+}
 const selectedUid = (value: any) => {
   useRegionStore().setData(value.id);
   fetchDataUp3(value.id);
@@ -118,4 +154,4 @@ const selectedUlp = (value: any) => {
 
 
 
-export { selectedUid, selectedUp3Posko ,selectedUp3Ulp, selectedPosko,selectedUlp, fetchData, items, itemsUp3, itemsPosko,itemsRegional,itemsMedia,itemsUlp ,months ,years};
+export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchData,fetchMedia,fetchStatus, items, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };

src/components/Pages/Gangguan/Table_1.vue

@@ -25,11 +25,11 @@
                 caption="Pembuat Laporan" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_laporan"
                 caption="Tgl Lapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_dialihkan"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_dialihkan"
                 caption="Tgl Dialihkan" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_respon"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
                 caption="Tgl Response" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_recovery"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
                 caption="Tgl Recovery" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon_time"
                 caption="Durasi Response Time" cell-template="data" />
@@ -218,11 +218,11 @@ import { useSearchStore } from '@/stores/filtersAction';
 import { usePostsStore } from '@/stores/posts';
 import { useUp3Store } from '@/stores/up3';
 import { useRegionStore } from '@/stores/region';
+import { fetchStatus } from '@/components/Form/FiltersType/reference'
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
 const showPane = ref(true);
-const dialog = useDialogStore()
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
@@ -271,6 +271,9 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
       alamat_pelapor
       durasi_recovery_time
       durasi_response_time
+      waktu_dialihkan
+      waktu_recovery
+      waktu_response
       id_gangguan
       idpel_nometer
       keterangan_pelapor
@@ -313,7 +316,7 @@ watch(detected, () => {
             queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
                 data.value = [...data.value, {
                     ...item,
-                    pembuat_laporan: '-'
+                    status_akhir : fetchStatus(item.status_akhir)
                 }];
             });
         }

src/components/Select.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 interface DataItem {
-  id: number;
+  id: any;
   name: string;
 }