Refactor component imports and add getUidRegional function

src/components/Form/FiltersType/Type2.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
-import { selectedUid,  selectedUp3Ulp, fetchUid, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
+import { selectedUid,  selectedUp3Ulp,fetchRegional, fetchUid, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
 import { onMounted, ref } from 'vue';
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
 const regionalPlaceholder = 'Semua Regional';
+const bulanPlaceholder = 'Pilih Bulan';
+const tahunPlaceholder = 'Pilih Tahun';
 const uppp = ref({ id: 0, name: up3Placholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
 const ulp = ref({ id: 0, name: ulpPlaceholder });
@@ -47,7 +49,7 @@ const setUlp = (value: any) => {
 };
 onMounted(() => {
   emit('update:filters', data.value)
-  fetchUid()
+  fetchRegional()
 })
 </script>
 
@@ -55,7 +57,7 @@ onMounted(() => {
   <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">Regional:</label>
 
-    <Select @update:selected="setRegional($event)" :data="itemsRegional"  :placeholder="regionalPlaceholder" />
+    <Select @update:selected="setRegional($event)" :data="itemsRegional" :placeholder="regionalPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -80,8 +82,8 @@ onMounted(() => {
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode</label>
 
     <div class="grid grid-cols-2 gap-x-2">
-      <Select :data="months" placeholder="Pilih Bulan" />
-      <Select :data="years" placeholder="Pilih Tahun" />
+      <Select :data="months" :placeholder="bulanPlaceholder" />
+      <Select :data="years" :placeholder="tahunPlaceholder" />
     </div>
   </div>
 </template>

src/components/Form/FiltersType/Type6.vue

@@ -77,11 +77,11 @@ onMounted(() => {
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
 
     <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-      <InputNumber @update:time-value="(value) => {
+      <InputNumber :value="data.minJmlLapor" @update:time-value="(value) => {
         data.minJmlLapor = value
       }" />
       <small class="flex items-center">s/d</small>
-      <InputNumber  @update:time-value="(value) => {
+      <InputNumber :value="data.maxJmlLapor" @update:time-value="(value) => {
         data.maxJmlLapor = value
       }" />
     </div>

src/components/Form/FiltersType/reference.ts

@@ -1,4 +1,4 @@
-import { getUid, getUp3, getPosko, getUlp } from '@/utils/network'
+import { getUid, getUp3, getPosko, getUlp,getUidRegional } from '@/utils/network'
 import { ref } from 'vue'
 import { usePostsStore } from '@/stores/posts'
 import { useUp3Store } from '@/stores/up3'
@@ -94,7 +94,19 @@ const fetchUid = async () => {
     console.error('Error fetching data:', error);
   }
 };
-
+const fetchUidWithRegional = async (regional: number) => {
+  try {
+    const res = await getUidRegional(regional)
+    itemsUid.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama,
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+}
 const fetchDataUp3 = async (uid: number) => {
   try {
     const res = await getUp3(uid)