From 1750dd33dfa5f4ed18eae2b15f08c7dc07c24d7e Mon Sep 17 00:00:00 2001
From: probdg <ekoharyadi416@gmail.com>
Date: Mon, 12 Feb 2024 11:01:41 +0700
Subject: [PATCH] Add splitRoutePath and getMonthName functions to
 utils/numbers.ts and texts.ts

---
 src/components/Form/FiltersType/Type12.vue   | 56 +++++++++++++++-
 src/components/Form/FiltersType/Type13.vue   | 70 +++++++++++++++-----
 src/components/Form/FiltersType/Type2.vue    | 41 ++++++++++--
 src/components/Form/FiltersType/Type7.vue    | 53 +++++++++------
 src/components/Form/FiltersType/Type8.vue    |  8 ---
 src/components/Form/FiltersType/reference.ts |  4 +-
 src/components/Form/InlineRadioGroup.vue     | 23 +++++--
 src/components/Form/InputWithSuffix.vue      | 25 ++++---
 src/components/Pages/Gangguan/Table_3.vue    |  6 +-
 src/components/Pages/Monalisa/Table_36.vue   | 31 +++++----
 src/utils/numbers.ts                         | 17 +++++
 src/utils/texts.ts                           | 10 ++-
 12 files changed, 259 insertions(+), 85 deletions(-)

diff --git a/src/components/Form/FiltersType/Type12.vue b/src/components/Form/FiltersType/Type12.vue
index 40658f5..742b0f2 100644
--- a/src/components/Form/FiltersType/Type12.vue
+++ b/src/components/Form/FiltersType/Type12.vue
@@ -2,13 +2,55 @@
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
   import InputWithSuffix from '../InputWithSuffix.vue';
+  import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
+import { onMounted, ref } from 'vue';
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const uppp = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: 0, name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: ''
+})
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: 0, name: ulpPlaceholder };
+  data.value.up3 = value;
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(value);
+  data.value.posko = value;
+};
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </script>
 
 <template>
   <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 Induk Distribusi/Wilayah:</label>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select
+      @update:selected="setUid($event)"
+      :data="itemsUid"
+      :placeholder="uidPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -16,7 +58,11 @@
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
+      :placeholder="up3Placeholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -24,7 +70,11 @@
       >Unit Layanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Layanan Pelanggan" />
+    <Select
+      @update:selected="setUlp($event)"
+      :data="itemsUlp"
+      :placeholder="ulpPlaceholder"
+    />
   </div>
   
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/Type13.vue b/src/components/Form/FiltersType/Type13.vue
index 98b1e49..c4ec4df 100644
--- a/src/components/Form/FiltersType/Type13.vue
+++ b/src/components/Form/FiltersType/Type13.vue
@@ -1,44 +1,82 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
-  import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+import { selectedUid, selectedUp3Ulp, selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
+import { onMounted, ref } from 'vue';
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const uppp = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: 0, name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  group: 1
+})
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: 0, name: ulpPlaceholder };
+  data.value.up3 = value;
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(value);
+  data.value.posko = value;
+};
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </script>
 
 <template>
   <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 Induk Distribusi/Wilayah:</label>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </div>
 
   <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
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
   </div>
 
   <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 Layanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
 
-    <Select placeholder="Semua Unit Layanan Pelanggan" />
+    <Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
   </div>
 
   <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">Periode Tanggal:</label>
 
-     <DatePicker @update:date-value="(value) => {
-        data.periode = value
-      }
+    <DatePicker @update:date-value="(value) => {
+      data.periode = value
+    }
       " />
   </div>
 
   <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">Group By Kode Unit Distribusi:</label>
 
-    <InlineRadioGroup :radio-items="[{id: 1, title: 'Tidak', checked: true}, {id: 2, title: 'Ya, Grupkan'}]" />
+    <InlineRadioGroup @update:group-value="(value) => {
+      data.group = value
+      console.log('data.group', value)
+    }" :radio-items="[{ id: 1, title: 'Tidak', checked: true }, { id: 2, title: 'Ya, Grupkan' }]" />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type2.vue b/src/components/Form/FiltersType/Type2.vue
index 0b0b65e..7bf7f2f 100644
--- a/src/components/Form/FiltersType/Type2.vue
+++ b/src/components/Form/FiltersType/Type2.vue
@@ -1,24 +1,43 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
-import { selectedUid,  selectedUp3Ulp,fetchRegional, fetchUid, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
+import { selectedUid,  selectedUp3Ulp,fetchRegional, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
 import { onMounted, ref } from 'vue';
+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 = 'Pilih Bulan';
-const tahunPlaceholder = 'Pilih Tahun';
+const bulanPlaceholder = getMonthName(new Date().getMonth());
+const tahunPlaceholder = new Date().getFullYear().toString();
+const bulanSelected = new Date().getMonth();
+const tahunSelected = new Date().getFullYear();
 const uppp = ref({ id: 0, name: up3Placholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
 const ulp = ref({ id: 0, name: ulpPlaceholder });
+const bulan = ref({ id: bulanSelected, name: bulanPlaceholder });
+const tahun = ref({ id: tahunSelected, name: tahunPlaceholder });
 const regional = ref({ id: 0, name: regionalPlaceholder });
 const emit = defineEmits(['update:filters'])
+// Find index of January
+const bulanIndex = months.findIndex(month => month.id === bulan.value.id);
+
+// Remove January if found
+if (bulanIndex !== -1) {
+  months.splice(bulanIndex, 1);
+}
+// Find index of current year
+const tahunIndex = years.value.findIndex(year => year.id === tahun.value.id);
+if (tahunIndex !== -1) {
+  years.value.splice(tahunIndex, 1);
+}
 const data = ref({
   regional: regional.value,
   uid: uid.value,
   up3: uppp.value,
   posko: ulp.value,
-  periode: ''
+  periode: '',
+  bulan : bulan.value,
+  tahun : tahun.value
 })
 
 const setRegional = (value: any) => {
@@ -47,6 +66,16 @@ const setUlp = (value: any) => {
   selectedUp3Ulp(value);
   data.value.posko = value;
 };
+const setMonth = (value: any) => {
+  bulan.value = value;
+  data.value.bulan = value;
+  console.log(data.value)
+
+};
+const setYear = (value: any) => {
+  tahun.value = value;
+  data.value.tahun = value;
+};
 onMounted(() => {
   emit('update:filters', data.value)
   fetchRegional()
@@ -82,8 +111,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="bulanPlaceholder" />
-      <Select :data="years" :placeholder="tahunPlaceholder" />
+      <Select @update:selected="setMonth($event)" :data="months" :placeholder="bulanPlaceholder" />
+      <Select @update:selected="setYear($event)" :data="years" :placeholder="tahunPlaceholder" />
     </div>
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type7.vue b/src/components/Form/FiltersType/Type7.vue
index 4c85ae0..5247344 100644
--- a/src/components/Form/FiltersType/Type7.vue
+++ b/src/components/Form/FiltersType/Type7.vue
@@ -18,8 +18,8 @@ const data = ref({
   up3: up3.value,
   posko: posko.value,
   periode: '',
-  minDurasiRecoveryTime: 1,
-  maxDurasiRecoveryTime: 1
+  minTime: 1,
+  maxTime: 1
 })
 const setUid = (value: any) => {
   uid.value = value
@@ -57,25 +57,30 @@ const triggerInput = ref(false)
 const changeDuration = (value: any) => {
   if (value.id === 0) {
     console.log('Durasi Menit')
-    data.value.minDurasiRecoveryTime = 0
-    data.value.maxDurasiRecoveryTime = 5
+    data.value.minTime = 0
+    data.value.maxTime = 5
     triggerInput.value = false
   } else if (value.id === 1) {
-    data.value.minDurasiRecoveryTime = 0
-    data.value.maxDurasiRecoveryTime = 45
+    data.value.minTime = 0
+    data.value.maxTime = 45
+    console.log(data.value)
     console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
     triggerInput.value = true
   } else {
-    data.value.minDurasiRecoveryTime = 46
-    data.value.maxDurasiRecoveryTime = 99999 * 60 * 24
+    data.value.minTime = 46
+    data.value.maxTime = 99999 * 60 * 24
     triggerInput.value = true
     console.log('Melebihi SLA (> 45 menit)')
   }
 
+  console.log('value', data.value);
+  
 }
-watch(() => data.value, () => {
-  emit('update:filters', data.value)
-}, { deep: true })
+watch(data, (newValue) => {
+  console.log('newValue', newValue.maxTime)
+
+  emit('update:filters', newValue)
+})
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -127,26 +132,32 @@ onMounted(() => {
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
-      <Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
+      <Select 
+      @update:selected="changeDuration($event)" 
+        
+      :data="sla" placeholder="Durasi Menit" />
 
-      <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
+      <div class="grid grid-flow-col auto-cols-auto gap-x-1.5"  >
         <InputWithSuffix 
-          @update:minute-value="
+        :default-value="`${data.minTime} Menit`"
+        :disabled="triggerInput"
+          @update:minuteValue="
           (value :any)=> {
-            data.minDurasiRecoveryTime =value
+            data.minTime =value
           }
           "
-        @value="data.minDurasiRecoveryTime"
-        :disabled=triggerInput />
+         
+       />
         <small class="flex items-center">s/d</small>
         <InputWithSuffix 
-          @update:minute-value="
+        :default-value="`${data.maxTime} Menit`"
+          @update:minuteValue="
           (value :any)=> {
-            data.maxDurasiRecoveryTime = value
+            data.maxTime = value
           }
           "
-        @value="data.maxDurasiRecoveryTime"
-        :disabled="triggerInput" />
+        :disabled="triggerInput"
+            />
       </div>
     </div>
   </div>
diff --git a/src/components/Form/FiltersType/Type8.vue b/src/components/Form/FiltersType/Type8.vue
index a24e760..d80c165 100644
--- a/src/components/Form/FiltersType/Type8.vue
+++ b/src/components/Form/FiltersType/Type8.vue
@@ -6,11 +6,9 @@ import { onMounted, ref, watch } from 'vue'
 import {
   selectedUid,
   selectedUp3Posko,
-  selectedPosko,
   fetchUid,
   itemsUid,
   itemsUp3,
-  itemsPosko
 } from './reference'
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
@@ -45,12 +43,6 @@ const setUp3 = (value: any) => {
   data.value.up3 = value
 }
 
-const setPosko = (value: any) => {
-  posko.value = value
-  selectedPosko(value)
-  data.value.posko = value
-}
-
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
diff --git a/src/components/Form/FiltersType/reference.ts b/src/components/Form/FiltersType/reference.ts
index f4147ed..b7fb5f8 100644
--- a/src/components/Form/FiltersType/reference.ts
+++ b/src/components/Form/FiltersType/reference.ts
@@ -23,12 +23,14 @@ const months = [
   { id: 11, name: 'November' },
   { id: 12, name: 'Desember' },
 ]
+
 // create 4 year back array
 const year = new Date().getFullYear();
-const years = ref<Item[]>([]);
+let years = ref<Item[]>([]);
 for (let i = 0; i < 5; i++) {
   years.value.push({ id: year - i, name: year - i })
 }
+
 const timeout = ref()
 const itemsUid = ref<Item[]>([]);
 const itemsUp3 = ref<Item[]>([]);
diff --git a/src/components/Form/InlineRadioGroup.vue b/src/components/Form/InlineRadioGroup.vue
index 6672c35..a017791 100644
--- a/src/components/Form/InlineRadioGroup.vue
+++ b/src/components/Form/InlineRadioGroup.vue
@@ -3,8 +3,9 @@
     <fieldset>
       <div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
         <div v-for="item in radioItems" :key="item.id" class="flex items-center">
-          <input :id="`${item.id}`" type="radio" name="radio"
-            :checked="item.hasOwnProperty('checked') && item.checked === true"
+          <input v-model="groupValue" 
+            type="radio" name="radio"
+            :checked="item.checked" @change="onChange(item)"
             class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500" />
           <label :for="`${item.id}`" class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500">{{
             item.title }}</label>
@@ -15,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { type PropType } from 'vue'
+import { ref, watch, type PropType, onMounted } from 'vue'
 
 interface Item {
   id: number;
@@ -23,10 +24,24 @@ interface Item {
   checked?: boolean;
 }
 
-defineProps({
+const onChange= (e:Item) => {
+  itemSelected.value = e
+  emit('update:groupValue', e)
+}
+
+const props = defineProps({
   radioItems: {
     type: Array as PropType<Item[]>,
     required: true
   }
 })
+
+const itemSelected = ref(props.radioItems[0])
+const emit = defineEmits(['update:groupValue'])
+const groupValue = ref(1)
+
+onMounted(() => {
+  itemSelected.value = props.radioItems[0]
+})
+
 </script>
diff --git a/src/components/Form/InputWithSuffix.vue b/src/components/Form/InputWithSuffix.vue
index 47bad76..fed2b2a 100644
--- a/src/components/Form/InputWithSuffix.vue
+++ b/src/components/Form/InputWithSuffix.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 const props = defineProps({
   placeholder: {
@@ -14,35 +14,42 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
-  value: {
-    type: Number,
-    default: ''
+  defaultValue: {
+    type: String,
+    default: '1 Menit'
   }
+ 
 })
 const emit = defineEmits(['update:menitValue'])
-const menitValue = ref(1)
+const menitValue = ref<any>(props.defaultValue)
 watch(menitValue, (newValue) => {
   console.log('newValue', newValue)
   emit('update:menitValue', newValue)
 })
+
+watch(() => props.defaultValue, (newValue) => {
+  menitValue.value = newValue
+})
 </script>
 
 <template>
-  <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
+  <div 
+ 
+  class="relative w-full overflow-hidden rounded-lg bg-gray-200">
     <input
       v-model="menitValue"
       autocomplete="off"
       type="text"
       :placeholder="placeholder"
-      :disabled="disabled"
       :readonly="readonly"
       inputmode="numeric"
       pattern="[0-9.]*"
-      defaultValue="1"
+      :disabled="disabled"
       oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
       onblur="this.value = this.value ? this.value + ' Menit' : ''"
       onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
-      class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
+      class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0
+      "
     />
   </div>
 </template>
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index 95895c7..2f727f7 100644
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -67,13 +67,13 @@ const shading = ref(true);
 const showPane = ref(true);
 const data = ref<any[]>([])
 const filterData = (params: any) => {
-    const { minDurasiResponseTime, maxDurasiResponseTime, posko, uid, up3 } = params;
+    const { minTime, maxTime, posko, uid, up3 } = params;
     const dateValue = params.periode.split(' s/d ') 
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        minDurasiResponseTime : minDurasiResponseTime ? minDurasiResponseTime : 1,
-        maxDurasiResponseTime : maxDurasiResponseTime ? maxDurasiResponseTime : 1,
+        minDurasiResponseTime : minTime ? minTime : 0,
+        maxDurasiResponseTime : maxTime ? maxTime : 1,
         posko: posko ? posko.id : "",
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0
diff --git a/src/components/Pages/Monalisa/Table_36.vue b/src/components/Pages/Monalisa/Table_36.vue
index 963c306..add6a38 100644
--- a/src/components/Pages/Monalisa/Table_36.vue
+++ b/src/components/Pages/Monalisa/Table_36.vue
@@ -24,17 +24,17 @@
             <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        caption="Des 2018" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        caption="Des 2019" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        caption="Jan 2019" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -46,9 +46,9 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { ref, } from 'vue'
+import { onMounted, ref, } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-
+import { getMonthName } from '@/utils/texts'
 import {
     DxColumn,
     DxColumnFixing,
@@ -104,6 +104,9 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 const MONALISAJUMLAHKALIGANGGUAN = gql`
   query DaftarMonalisaJumlahKaliGangguan(
     $regional: String
@@ -136,20 +139,22 @@ const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGG
     posko: '',
     idUid: 0,
     idUp3: 0,
-    bulan: 10,
-    tahun: 2023
+    bulan: bulanSekarang.value,
+    tahun: tahunSekarang.value
 })
 
 const filterData = (params: any) => {
     const {regional, posko, idUid, idUp3, bulan, tahun} = params;
-
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
         posko: posko,
         idUid: idUid  ? idUid : 0,
         idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        bulan: bulan ? bulan : bulanSekarang.value,
+        tahun: bulan ? tahun : tahunSekarang.value
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
@@ -167,6 +172,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
+onMounted(() => {
+    console.log(bulanSekarang.value)
+});
 const filters= ref();
 </script>
diff --git a/src/utils/numbers.ts b/src/utils/numbers.ts
index e69de29..18dac0f 100644
--- a/src/utils/numbers.ts
+++ b/src/utils/numbers.ts
@@ -0,0 +1,17 @@
+const splitRoutePath = (routePath: string): string[] => {
+    const routeParts = routePath.split('/').filter((part) => part !== '')
+
+    const routeArray: string[] = []
+    let currentRoute = ''
+
+    for (const part of routeParts) {
+        currentRoute += `/${part}`
+        routeArray.push(currentRoute)
+    }
+
+    return routeArray
+}
+
+export {
+    splitRoutePath
+}
\ No newline at end of file
diff --git a/src/utils/texts.ts b/src/utils/texts.ts
index 18dac0f..9f3036f 100644
--- a/src/utils/texts.ts
+++ b/src/utils/texts.ts
@@ -11,7 +11,13 @@ const splitRoutePath = (routePath: string): string[] => {
 
     return routeArray
 }
-
+const getMonthName = (monthNumber :number)=> {
+    const months = [
+      'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
+      'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
+    ];
+    return months[monthNumber - 1] || '';
+  }
 export {
-    splitRoutePath
+    splitRoutePath,getMonthName
 }
\ No newline at end of file