Merge branch 'IntegrationTableWithFilter' of https://gitea.callysta-engineering.com/APKT/eis into development

package-lock.json

@@ -30,6 +30,7 @@
         "graphql": "^16.8.1",
         "graphql-tag": "^2.12.6",
         "jspdf": "^2.5.1",
+        "nvm": "^0.0.4",
         "pinia": "^2.1.3",
         "qs": "^6.11.2",
         "react": "^18.2.0",
@@ -6905,6 +6906,15 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/nvm": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/nvm/-/nvm-0.0.4.tgz",
+      "integrity": "sha512-jvmyELykYcdyd0VCGY0E8Aqe5MngEasVvlPvrcJHbwBMUbVqa72mPdQuPzyTcykEtEx7jDrMY0QA5MoV+8EhgA==",
+      "deprecated": "This is NOT the correct nvm. Visit https://nvm.sh and use the curl command to install it.",
+      "bin": {
+        "nvm": "bin/nvm"
+      }
+    },
     "node_modules/nwsapi": {
       "version": "2.2.7",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",

package.json

@@ -37,6 +37,7 @@
     "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
     "jspdf": "^2.5.1",
+    "nvm": "^0.0.4",
     "pinia": "^2.1.3",
     "qs": "^6.11.2",
     "react": "^18.2.0",

src/components/Form/FiltersType/Type1.vue

@@ -17,7 +17,7 @@ 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 posko = ref({ id: "", name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -40,7 +40,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 

src/components/Form/FiltersType/Type10.vue

@@ -20,7 +20,7 @@ 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 ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -40,7 +40,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 

src/components/Form/FiltersType/Type11.vue

@@ -13,14 +13,13 @@ import {
 
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-import InputNumber from '@/components/Form/InputNumber.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 ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const sla = [
   {
@@ -50,7 +49,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 

src/components/Form/FiltersType/Type12.vue

@@ -9,13 +9,15 @@ 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 ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
   up3: uppp.value,
   posko: ulp.value,
-  periode: ''
+  periode: '',
+  minDurasiResponseTime: 1,
+  maxDurasiResponseTime: 1
 })
 const setUid = (value: any) => {
   uid.value = value;
@@ -27,7 +29,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 
@@ -36,6 +38,40 @@ const setUlp = (value: any) => {
   selectedUlp(value);
   data.value.posko = value;
 };
+const triggerInput = ref(false)
+const sla = [
+  {
+    id: 0,
+    name: 'Durasi Menit'
+  },
+  {
+    id: 1,
+    name: 'Dibawah  / Sesuai SLA (<= 45 menit)'
+  },
+  {
+    id: 2,
+    name: 'Melebihi SLA (> 45 menit)'
+  }
+];
+const changeDuration = (value: any) => {
+  if (value.id === 0) {
+    console.log('Durasi Menit')
+    data.value.minDurasiResponseTime = 0
+    data.value.maxDurasiResponseTime = 5
+    triggerInput.value = false
+  } else if (value.id === 1) {
+    data.value.minDurasiResponseTime = 0
+    data.value.maxDurasiResponseTime = 45
+    console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
+    triggerInput.value = true
+  } else {
+    data.value.minDurasiResponseTime = 46
+    data.value.maxDurasiResponseTime = 99999 * 60 * 24
+    triggerInput.value = true
+    console.log('Melebihi SLA (> 45 menit)')
+  }
+
+}
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -90,12 +126,30 @@ 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 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 />
+        <InputWithSuffix 
+          @update:minute-value="
+          (value :any)=> {
+            data.minDurasiResponseTime =value
+          }
+          "
+        @value="data.minDurasiResponseTime"
+        :disabled=triggerInput />
         <small class="flex items-center">s/d</small>
-        <InputWithSuffix />
+        <InputWithSuffix 
+          @update:minute-value="
+          (value :any)=> {
+            data.maxDurasiResponseTime = value
+          }
+          "
+        @value="data.maxDurasiResponseTime"
+        :disabled="triggerInput" />
       </div>
     </div>
   </div>

src/components/Form/FiltersType/Type13.vue

@@ -9,7 +9,7 @@ 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 ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -28,7 +28,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 

src/components/Form/FiltersType/Type14.vue

@@ -1,27 +1,39 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
+import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import { 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: "", name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  group: 1
+})
+
 </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">Distribusi/Wilayah:</label>
 
-    <Select placeholder="Semua Distribusi/Wilayah"/>
+    <Select placeholder="Semua Distribusi/Wilayah" />
   </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"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Area:</label>
-      >Area:</label
-    >
 
     <Select placeholder="Semua Area" />
   </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"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
-      >Posko:</label
-    >
 
     <Select placeholder="Semua Posko" />
   </div>
@@ -29,9 +41,9 @@
   <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
+      data.periode = value
-      }
+    }
       " />
   </div>
 </template>

src/components/Form/FiltersType/Type15.vue

@@ -2,6 +2,21 @@
   import InputWithFilter from '../InputWithFilter.vue'
   import DatePicker from '@/components/DatePicker.vue'
   import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+import { 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: "", name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  group: 1
+})
 </script>
 
 <template>

src/components/Form/FiltersType/Type16.vue

@@ -19,7 +19,7 @@ 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 posko = ref({ id: "", name: poskoPlaceholder })
 const media = ref({ id: 0, name: mediaPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
@@ -44,7 +44,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 

src/components/Form/FiltersType/Type2.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
-import { selectedUid,  selectedUp3Ulp,fetchRegional, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
+import { selectedUid,  selectedUp3Ulp,fetchRegional,fetchUid,fetchUidWithRegional, 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';
@@ -13,14 +13,14 @@ 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 ulp = ref({ id: "", 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);
-
+console.log(bulanSelected)
 // Remove January if found
 if (bulanIndex !== -1) {
   months.splice(bulanIndex, 1);
@@ -42,6 +42,8 @@ const data = ref({
 
 const setRegional = (value: any) => {
   regional.value = value;
+  fetchUid(); 
+  // harusnya fetchUidWithRegional(value);
   selectedUid(value);
   uid.value = { id: 0, name: uidPlaceholder };
   data.value.regional = value;
@@ -57,7 +59,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 

src/components/Form/FiltersType/Type3.vue

@@ -8,7 +8,7 @@ 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 ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -26,7 +26,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 

src/components/Form/FiltersType/Type4.vue

@@ -8,7 +8,7 @@ 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 ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -27,7 +27,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 

src/components/Form/FiltersType/Type5.vue

@@ -17,7 +17,7 @@ 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 posko = ref({ id: "", name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -40,7 +40,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 

src/components/Form/FiltersType/Type6.vue

@@ -10,7 +10,7 @@ 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 posko = ref({ id: "", name: poskoPlaceholder });
 const data = ref({
   uid: uid.value,
   up3: up3.value,
@@ -30,7 +30,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 

src/components/Form/FiltersType/Type7.vue

@@ -12,7 +12,7 @@ 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 posko = ref({ id: "", name: poskoPlaceholder });
 const data = ref({
   uid: uid.value,
   up3: up3.value,
@@ -31,7 +31,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 
@@ -53,6 +53,13 @@ const sla = [
   }
 
 ]
+const setMin = (value: any) => {
+  console.log(value)
+  data.value.minTime = value
+}
+const setMax = (value: any) => {
+  data.value.maxTime = value
+}
 const triggerInput = ref(false)
 const changeDuration = (value: any) => {
   if (value.id === 0) {
@@ -63,7 +70,6 @@ const changeDuration = (value: any) => {
   } else if (value.id === 1) {
     data.value.minTime = 0
     data.value.maxTime = 45
-    console.log(data.value)
     console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
     triggerInput.value = true
   } else {
@@ -72,13 +78,8 @@ const changeDuration = (value: any) => {
     triggerInput.value = true
     console.log('Melebihi SLA (> 45 menit)')
   }
-
-  console.log('value', data.value);
-  
 }
 watch(data, (newValue) => {
-  console.log('newValue', newValue.maxTime)
-
   emit('update:filters', newValue)
 })
 onMounted(() => {
@@ -91,32 +92,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 
+    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
-      @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 
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
-      @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 
+    <Select @update:selected="setPosko($event)" :data="itemsPosko" :placeholder="poskoPlaceholder" />
-      @update:selected="setPosko($event)" 
-      :data="itemsPosko" 
-      :placeholder="poskoPlaceholder"
-    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -132,32 +120,12 @@ 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 
+      <Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
-      @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 
+        <InputWithSuffix @default-value="data.minTime" @update:menit-value="setMin($event)" />
-        :default-value="`${data.minTime} Menit`"
-        :disabled="triggerInput"
-          @update:minuteValue="
-          (value :any)=> {
-            data.minTime =value
-          }
-          "
-         
-       />
         <small class="flex items-center">s/d</small>
-        <InputWithSuffix 
+        <InputWithSuffix @default-value="data.maxTime" @update:menit-value="setMax($event)" />
-        :default-value="`${data.maxTime} Menit`"
-          @update:minuteValue="
-          (value :any)=> {
-            data.maxTime = value
-          }
-          "
-        :disabled="triggerInput"
-            />
       </div>
     </div>
   </div>

src/components/Form/FiltersType/Type8.vue

@@ -16,7 +16,7 @@ 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 posko = ref({ id: "", name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -39,7 +39,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 

src/components/Form/FiltersType/Type9.vue

@@ -19,7 +19,7 @@ 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 posko = ref({ id: "" ,name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -42,7 +42,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 

src/components/Form/FiltersType/reference.ts

@@ -1,4 +1,4 @@
-import { getUid, getUp3, getPosko, getUlp,getUidRegional } from '@/utils/network'
+import { getUid, getUp3, getPosko, getUlp,getUidRegional, getRegional } from '@/utils/network'
 import { ref } from 'vue'
 import { usePostsStore } from '@/stores/posts'
 import { useUp3Store } from '@/stores/up3'
@@ -38,15 +38,18 @@ const itemsPosko = ref<Item[]>([]);
 const itemsUlp = ref<Item[]>([]);
 const itemsRegional = ref<Item[]>([]);
 const itemsMedia = ref<Item[]>([]);
-const fetchRegional = () => {
+const fetchRegional =async () => {
-  itemsRegional.value = [
+  try {
-    { id: "1", name: "Wilayah Sumatera" },
+  const res = await getRegional()
-    { id: "2", name: "Wilayah Jawa Bali" },
+    itemsRegional.value = res.data.map((item: any) => (
-    { id: "3", name: "Wilayah Kalimantan" },
+      {
-    { id: "4", name: "Wilayah Sulawesi" },
+        id: item.id,
-    { id: "5", name: "Wilayah Nusa Tenggara" },
+        name: item.nama.toUpperCase(),
-    { id: "6", name: "Wilayah Maluku Papua" },
+      }
-  ]
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
 }
 const fetchStatus = (data : any) => {
 
@@ -170,4 +173,4 @@ const selectedUlp = (value: any) => {
   useUlpStore().setData(value.id)
 }
 
-export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchMedia,fetchStatus,fetchRegional, fetchUid, itemsUid, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };
+export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchMedia,fetchStatus,fetchUidWithRegional,fetchRegional, fetchUid, itemsUid, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };

src/components/Form/InputNumber.vue

@@ -22,7 +22,6 @@ const props = defineProps({
 const emit = defineEmits(['update:timeValue'])
 const timeValue = ref(1)
 watch(timeValue, (newValue) => {
-  console.log('newValue', newValue)
   emit('update:timeValue', newValue)
 })
 

src/components/Form/InputWithSuffix.vue

@@ -21,15 +21,10 @@ const props = defineProps({
  
 })
 const emit = defineEmits(['update:menitValue'])
-const menitValue = ref<any>(props.defaultValue)
+const menitValue = ref(props.defaultValue)
 watch(menitValue, (newValue) => {
-  console.log('newValue', newValue)
   emit('update:menitValue', newValue)
 })
-
-watch(() => props.defaultValue, (newValue) => {
-  menitValue.value = newValue
-})
 </script>
 
 <template>
@@ -45,6 +40,7 @@ watch(() => props.defaultValue, (newValue) => {
       inputmode="numeric"
       pattern="[0-9.]*"
       :disabled="disabled"
+      :defaultValue="props.defaultValue"
       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, '')"

src/components/Pages/Anomali/Table_61.vue

@@ -101,7 +101,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -111,7 +111,11 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable2 } from '.'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()

src/components/Pages/Anomali/Table_62.vue

@@ -42,6 +42,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { ref } from 'vue'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(true)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {

src/components/Pages/Anomali/Table_63.vue

@@ -69,7 +69,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -79,6 +79,11 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable4 } from '.'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(true)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {

src/components/Pages/Anomali/Table_64.vue

@@ -66,7 +66,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { ref } from 'vue'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(true)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()

src/components/Pages/Anomali/Table_65.vue

@@ -77,7 +77,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -87,6 +87,11 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable6 } from '.'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(true)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {

src/components/Pages/Anomali/Table_66.vue

@@ -42,6 +42,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { ref } from 'vue'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(false)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {

src/components/Pages/Cico/Table_60.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+      <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -34,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -43,7 +49,15 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { Type1 } from '@/components/Form/FiltersType'
+import Filters from '@/components/Form/Filters.vue'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -78,12 +92,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
+const filters = ref();
-    const filters = useFiltersStore()
+const filterData = (filters: any) => {
-
+    console.log(filters)
-    filters.setConfig({
+}
-        type: 'type-1',
-        reportButton: true
-    })
-})
 </script>

src/components/Pages/Ctt/Table_67.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+   <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type3 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -56,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -65,7 +71,15 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import Filters from '@/components/Form/Filters.vue'
+import { Type3 } from '@/components/Form/FiltersType'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -100,12 +114,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
+const filters = ref()
-    const filters = useFiltersStore()
+const filterData = (filters: any) => {
-
+    console.log(filters)
-    filters.setConfig({
+}
-        type: 'type-3',
-        reportButton: true
-    })
-})
 </script>