Add lifecycle hook and fetch data on mounted

Add two-way binding for menitValue in InputWithSuffix Add two-way binding for timeValue in InputNumber Refactor filterData function in Table_5.vue
2024-02-10 05:56:05 +07:00
parent 2e4eb3b6b2
commit 83a25527bb
14 changed files with 741 additions and 511 deletions
--- a/src/components/Form/FiltersType/Type16.vue
+++ b/src/components/Form/FiltersType/Type16.vue
@ -1,15 +1,81 @@
 <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();
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  fetchMedia,
+  itemsUid,
+  itemsUp3,
+  itemsPosko,
+  itemsMedia
+} from './reference'
+import { onMounted, ref, watch } from 'vue'
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const poskoPlaceholder = 'Semua Posko'
+const mediaPlaceholder = 'Semua Media'
+const up3 = ref({ id: 0, name: up3Placeholder })
+const uid = ref({ id: 0, name: uidPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
+const media = ref({ id: 0, name: mediaPlaceholder })
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: up3.value,
+  posko: posko.value,
+  media: media.value,
+  periode: ''
+})
+
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
+
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  up3.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+const setMedia = (value: any) => {
+  media.value = value
+  data.value.media = value
+}
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+  fetchMedia()
+})
 </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>
+    <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
+      :data="itemsUid"
+      @update:selected="setUid($event)"
+      :placeholder="uidPlaceholder"
+      :selected="uid"
+    />
  </div>

  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -17,27 +83,45 @@ fetchMedia();
      >Unit Pelaksanaan Pelayanan Pelanggan:</label
    >

-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select
+      :data="itemsUp3"
+      @update:selected="setUp3($event)"
+      :placeholder="up3Placeholder"
+      :selected="up3"
+    />
  </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">Posko:</label>

-    <Select placeholder="Semua Posko" />
+    <Select
+      :data="itemsPosko"
+      @update:selected="setPosko($event)"
+      :placeholder="poskoPlaceholder"
+      :selected="posko"
+    />
  </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">Media:</label>

-    <Select placeholder="Semua Media" :data="itemsMedia" />
+    <Select
+      :selected="media"
+      @update:selected="setMedia($event)"
+      :placeholder="mediaPlaceholder"
+      :data="itemsMedia"
+    />
  </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>
 </template>
--- a/src/components/Form/FiltersType/Type3.vue
+++ b/src/components/Form/FiltersType/Type3.vue
@ -2,7 +2,7 @@
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
-import { ref } from 'vue';
+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';
@ -35,6 +35,10 @@ const setUlp = (value: any) => {
  selectedUlp(value);
  data.value.posko = value;
 };
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </script>

 <template>
--- a/src/components/Form/FiltersType/Type4.vue
+++ b/src/components/Form/FiltersType/Type4.vue
@ -1,13 +1,56 @@
 <script setup lang="ts">
  import Select from '@/components/Select.vue'
  import DatePicker from '@/components/DatePicker.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: '',
+  jenisLaporan : ''
+})
+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">
@ -15,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">
@ -23,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">
@ -31,7 +82,17 @@
      >Jenis Laporan:</label
    >

-    <Select placeholder="Laporan Berulang Unit" />
+    <Select
+      @update:selected="(value) => {
+        data.jenisLaporan = value
+      }"
+      :data="[
+        { id: 1, name: 'Laporan Berulang Unit' },
+        { id: 2, name: 'Laporan Berulang Pelanggan' },
+        { id: 3, name: 'Laporan Berulang Pelanggan dan Unit' },
+      ]"
+      :placeholder="'Semua Jenis Laporan'"
+    />
  </div>

  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
--- a/src/components/Form/FiltersType/Type5.vue
+++ b/src/components/Form/FiltersType/Type5.vue
@ -1,13 +1,68 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import { onMounted, ref, watch } from 'vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsPosko
+} from './reference'
+
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
+const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const poskoPlaceholder = 'Semua Posko'
+const uppp = ref({ id: 0, name: uppPlaceholder })
+const uid = ref({ id: 0, name: uidPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: posko.value,
+  periode: ''
+})
+
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
+
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  uppp.value = { id: 0, name: uppPlaceholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  uppp.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(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>
+    <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 :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
  </div>

  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -15,19 +70,18 @@
      >Unit Pelaksanaan Pelayanan Pelanggan:</label
    >

-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp" :placeholder="uppPlaceholder" />
  </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">Posko:</label>

-    <Select placeholder="Semua Posko" />
+    <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
  </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) => {
+    <DatePicker @update:date-value="(value) => {
        data.periode = value
      }
      " />
--- a/src/components/Form/FiltersType/Type6.vue
+++ b/src/components/Form/FiltersType/Type6.vue
@ -3,31 +3,43 @@ import InputNumber from '@/components/Form/InputNumber.vue'
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
-import { useTotalReport } from '@/stores/totalReport';
 import { onMounted, ref } from 'vue';
 const emit = defineEmits(['update:filters'])
 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 poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
+const up3 = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder });
 const data = ref({
  uid: uid.value,
-  up3: uppp.value,
-  posko: ulp.value,
+  up3: up3.value,
+  posko: posko.value,
  periode: '',
-  minReport: useTotalReport().getDataMin() ? useTotalReport().getDataMin() : 1,
-  maxReport: useTotalReport().getDataMax()? useTotalReport().getDataMax() : 1
+  minJmlLapor: 1,
+  maxJmlLapor: 1
 })

-///Can di ganti masih ka store
-const changeMinReport = (value: any) => {
-  useTotalReport().setDataMin(value)
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
 }
-const changeMaxReport = (value: any) => {
-  useTotalReport().setDataMax(value)
+
+const setUp3 = (value: any) => {
+  up3.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
 }
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+
 onMounted(() => {
  emit('update:filters', data.value)
  fetchUid()
@ -38,20 +50,19 @@ 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">Unit Induk Distribusi/Wilayah:</label>

-    <Select @update:selected="selectedUid($event)" :data="itemsUid" 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>

-    <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3"
-      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">Posko:</label>

-    <Select @update:selected="selectedPosko($event)" :data="itemsPosko" placeholder="Semua Posko" />
+    <Select @update:selected="setPosko($event)" :data="itemsPosko" :placeholder="poskoPlaceholder" />
  </div>

  <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -59,17 +70,20 @@ onMounted(() => {

    <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">Lapor Ulang:</label>

    <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-      <InputNumber :value="1" @change="changeMinReport($event.target.value)" />
+      <InputNumber @update:time-value="(value) => {
+        data.minJmlLapor = value
+      }" />
      <small class="flex items-center">s/d</small>
-      <InputNumber :value="1" @change="changeMaxReport($event.target.value)" />
+      <InputNumber  @update:time-value="(value) => {
+        data.maxJmlLapor = value
+      }" />
    </div>
  </div>
 </template>
--- a/src/components/Form/FiltersType/Type7.vue
+++ b/src/components/Form/FiltersType/Type7.vue
@ -1,69 +1,125 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
-  import InputWithSuffix from '../InputWithSuffix.vue';
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InputWithSuffix from '../InputWithSuffix.vue';
 import { useTotalDuration } from '@/stores/totalDuration';
-import { ref } from 'vue';
-  const data = [
-   
-    {
-      id : 1,
-      name : 'Dibawah  / Sesuai SLA (<= 45 menit)'
-    },
-    {
-      id : 2,
-      name : 'Melebihi SLA (> 45 menit)'
-    }
-  
-  ]
-  const triggerInput = ref(false)
-  const changeDuration = (value: any) => {
-    if(value.id === 0 ){
-      console.log('Durasi Menit')
-      useTotalDuration().setDataMin(0)
-      useTotalDuration().setDataMax(5)
-      triggerInput.value = false
-    }else if(value.id === 1){
-      useTotalDuration().setDataMin(0)
-      useTotalDuration().setDataMax(45)
-      console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
-      triggerInput.value = true
-    }else{
-      useTotalDuration().setDataMin(46)
-      useTotalDuration().setDataMax(7*60*24)
-      triggerInput.value = true
-      console.log('Melebihi SLA (> 45 menit)')
-    }
+
+import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
+import { onMounted, ref, watch } from 'vue';
+const emit = defineEmits(['update:filters'])
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
+const up3 = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder });
+const data = ref({
+  uid: uid.value,
+  up3: up3.value,
+  posko: posko.value,
+  periode: '',
+  minDurasiRecoveryTime: 1,
+  maxDurasiRecoveryTime: 1
+})
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  up3.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+
+
+const sla = [
+  {
+    id: 1,
+    name: 'Dibawah  / Sesuai SLA (<= 45 menit)'
+  },
+  {
+    id: 2,
+    name: 'Melebihi SLA (> 45 menit)'
  }
+
+]
+const triggerInput = ref(false)
+const changeDuration = (value: any) => {
+  if (value.id === 0) {
+    console.log('Durasi Menit')
+    data.value.minDurasiRecoveryTime = 0
+    data.value.maxDurasiRecoveryTime = 5
+    triggerInput.value = false
+  } else if (value.id === 1) {
+    data.value.minDurasiRecoveryTime = 0
+    data.value.maxDurasiRecoveryTime = 45
+    console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
+    triggerInput.value = true
+  } else {
+    data.value.minDurasiRecoveryTime = 46
+    data.value.maxDurasiRecoveryTime = 99999 * 60 * 24
+    triggerInput.value = true
+    console.log('Melebihi SLA (> 45 menit)')
+  }
+
+}
+watch(() => data.value, () => {
+  emit('update:filters', data.value)
+}, { deep: true })
+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">Posko:</label>

-    <Select placeholder="Semua Posko" />
+    <Select 
+      @update:selected="setPosko($event)" 
+      :data="itemsPosko" 
+      :placeholder="poskoPlaceholder"
+    />
  </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>

@ -71,12 +127,26 @@ import { ref } from 'vue';
    <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="data" 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">
-        <InputWithSuffix :value="useTotalDuration().getDataMin()" :disabled=triggerInput />
+        <InputWithSuffix 
+          @update:minute-value="
+          (value :any)=> {
+            data.minDurasiRecoveryTime =value
+          }
+          "
+        @value="data.minDurasiRecoveryTime"
+        :disabled=triggerInput />
        <small class="flex items-center">s/d</small>
-        <InputWithSuffix :value="useTotalDuration().getDataMax()" :disabled="triggerInput" />
+        <InputWithSuffix 
+          @update:minute-value="
+          (value :any)=> {
+            data.maxDurasiRecoveryTime = value
+          }
+          "
+        @value="data.maxDurasiRecoveryTime"
+        :disabled="triggerInput" />
      </div>
    </div>
  </div>
--- a/src/components/Form/InputNumber.vue
+++ b/src/components/Form/InputNumber.vue
@ -1,36 +1,44 @@
 <script setup lang="ts">
-  const props = defineProps({
-    placeholder: {
-        type: String,
-        default: "",
-    },
-    disabled: {
-        type: Boolean,
-        default: false,
-    },
-    readonly: {
-        type: Boolean,
-        default: false,
-    },
-    value: {
-        type: Number,
-        default: "",
-    },
-  })
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: Number,
+    default: ''
+  }
+})
+const emit = defineEmits(['update:timeValue'])
+const timeValue = ref(1)
+watch(timeValue, (newValue) => {
+  console.log('newValue', newValue)
+  emit('update:timeValue', newValue)
+})
+
 </script>

 <template>
  <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
    <input
+      v-model="timeValue"
      autocomplete="off"
      type="number"
-      :value ="props.value"
      :placeholder="placeholder"
      :disabled="disabled"
      :readonly="readonly"
      inputmode="numeric"
      pattern="[0-9.]*"
-      
      oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
      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"
--- a/src/components/Form/InputWithSuffix.vue
+++ b/src/components/Form/InputWithSuffix.vue
@ -1,35 +1,44 @@
 <script setup lang="ts">
-  const props = defineProps({
-    placeholder: {
-        type: String,
-        default: "",
-    },
-    disabled: {
-        type: Boolean,
-        default: false,
-    },
-    readonly: {
-        type: Boolean,
-        default: false,
-    },
-    value: {
-        type: Number,
-        default: "",
-    },
-  })
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: Number,
+    default: ''
+  }
+})
+const emit = defineEmits(['update:menitValue'])
+const menitValue = ref(1)
+watch(menitValue, (newValue) => {
+  console.log('newValue', newValue)
+  emit('update:menitValue', newValue)
+})
 </script>

 <template>
  <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
    <input
+      v-model="menitValue"
      autocomplete="off"
      type="text"
-      :value ="props.value"
      :placeholder="placeholder"
      :disabled="disabled"
      :readonly="readonly"
      inputmode="numeric"
      pattern="[0-9.]*"
+      defaultValue="1"
      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, '')"