fix: default month in select month

src/components/Form/FiltersType/Type2.vue

@@ -1,26 +1,27 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue';
+import Select from '@/components/Select.vue'
 import {
   selectedUid,
   selectedUp3Ulp,
   fetchRegional,
-  fetchUid, itemsUid,
+  fetchUid,
+  itemsUid,
   itemsUp3,
   itemsUlp,
   itemsRegional,
   months,
   years
-} from './reference';
+} from './reference'
-import { onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue'
-import { getMonthName } from '@/utils/texts';
+import { getMonthName } from '@/utils/texts'
 
 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 = getMonthName(new Date().getMonth())
+const bulanPlaceholder = getMonthName(new Date().getMonth() + 1)
 const tahunPlaceholder = new Date().getFullYear().toString()
-const bulanSelected = new Date().getMonth()
+const bulanSelected = new Date().getMonth() + 1
 const tahunSelected = new Date().getFullYear()
 const uppp = ref({ id: 0, name: up3Placholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
@@ -103,35 +104,57 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Regional:</label>
 
-      <Select @update:selected="setRegional($event)" :data="itemsRegional" :placeholder="regionalPlaceholder" />
+      <Select
+        @update:selected="setRegional($event)"
+        :data="itemsRegional"
+        :placeholder="regionalPlaceholder"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-      <Select @update:selected="setUid($event)" :data="itemsUid" :selected="uid" :placeholder="uidPlaceholder" />
+      <Select
+        @update:selected="setUid($event)"
+        :data="itemsUid"
+        :selected="uid"
+        :placeholder="uidPlaceholder"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select @update:selected="setUp3($event)" :selected="uppp" :data="itemsUp3" :placeholder="up3Placholder" />
+      <Select
+        @update:selected="setUp3($event)"
+        :selected="uppp"
+        :data="itemsUp3"
+        :placeholder="up3Placholder"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Layanan Pelanggan:</label>
 
-      <Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :placeholder="ulpPlaceholder" />
+      <Select
+        @update:selected="setUlp($event)"
+        :data="itemsUlp"
+        :selected="ulp"
+        :placeholder="ulpPlaceholder"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Periode</label>
 
       <div class="grid grid-cols-2 gap-x-2">
-        <Select @update:selected="setMonth($event)" :data="months" :placeholder="bulanPlaceholder" />
+        <Select
+          @update:selected="setMonth($event)"
+          :data="months"
+          :placeholder="bulanPlaceholder"
+        />
         <Select @update:selected="setYear($event)" :data="years" :placeholder="tahunPlaceholder" />
       </div>
     </div>
   </div>
-
 </template>