@7365admin1/layer-common 1.11.16 → 1.11.18

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 1.11.18
+
+### Patch Changes
+
+- 5e21af9: updates and fixes
+
+## 1.11.17
+
+### Patch Changes
+
+- 785495f: Update layer-common
+
 ## 1.11.16
 
 ### Patch Changes

package/components/Card/MemberInfoSummary.vue

@@ -26,7 +26,11 @@ const prop = defineProps({
     member: {
         type: Object as PropType<TMemberInfo>,
         required: true
-    }
+        },
+        visitorPassItems: {
+            type: Array as PropType<TPassKey[]>,
+            default: () => []
+        }
 })
 
 const emit = defineEmits(['remove'])

package/components/MemberInformation.vue

@@ -19,9 +19,9 @@
                         </v-col>
 
                         <v-col cols="12">
-                            <v-combobox v-model="pass" v-model:search="passInput" :hide-no-data="false" class="mt-3"
-                                @update:focused="handleFocusedPass" :items="passItems" item-value="value"
-                                @update:model-value="handleSelectPass" label="Pass (optional)" variant="outlined"
+                            <v-autocomplete v-model="memberForm.visitorPass" v-model:search="passInput"
+                                :hide-no-data="false" class="mt-3" :items="passItemsFilteredFinal"
+                                item-title="prefixAndName" item-value="_id" label="Pass (optional)" variant="outlined"
                                 hide-details density="compact" persistent-hint small-chips>
                                 <template v-slot:no-data>
                                     <v-list-item density="compact">
@@ -33,12 +33,19 @@
                                         <v-list-item v-else>No data available</v-list-item>
                                     </v-list-item>
                                 </template>
-                            </v-combobox>
+
+                                <template v-slot:chip="{ props, item }">
+                                    <v-chip v-if="memberForm.visitorPass" v-bind="props"
+                                        prepend-icon="mdi-card-bulleted-outline"
+                                        :text="item.raw?.prefixAndName"></v-chip>
+                                </template>
+                            </v-autocomplete>
                         </v-col>
 
                         <v-col cols="12">
                             <InputLabel class="text-capitalize" title="Phone Number" required />
-                                <InputPhoneNumberV2 v-model="memberForm.contact" density="compact" hide-details/>
+                            <InputPhoneNumberV2 v-model="memberForm.contact" density="compact" default-country="SG"
+                                hide-details />
                         </v-col>
 
                         <v-row class="pt-3" justify="space-between">
@@ -56,20 +63,41 @@
             </v-card-text>
         </v-card>
         <v-divider class="my-3" />
-        <v-row v-if="members.length > 0" no-gutters class="w-100 mt-5 ga-3">
-            <template v-for="member, index in members" :key="member.nric">
-                <CardMemberInfoSummary :member="member" @remove="handleRemoveMember(index)" />
+        <v-row v-if="committedMembers.length > 0" no-gutters class="w-100 mt-5 ga-3">
+            <template v-for="member, index in committedMembers" :key="member.nric">
+                <CardMemberInfoSummary :member="membersDisplayed[index]" @remove="handleRemoveMember(index)" />
             </template>
         </v-row>
     </v-row>
 </template>
 
 <script setup lang="ts">
+import type { PropType } from 'vue'
+import usePassKey from '../composables/usePassKey'
+import useUtils from '../composables/useUtils'
+
 
 const props = defineProps({
+    type: {
+        type: String,
+        required: true
+    },
+    contractorType: {
+        type: String,
+        required: false
+    },
+    site: {
+        type: String,
+        required: true
+    },
+    selectedVisitorPass: {
+        type: Array as PropType<TPassKeyPayload[]>,
+        default: () => []
+    }
 })
 
 const { requiredRule } = useUtils()
+const { getPassKeysByPageSearch } = usePassKey()
 
 
 const memberForm = reactive<TMemberInfo>({
@@ -85,33 +113,77 @@ const processing = ref(false);
 const errorMessage = ref('')
 
 // pass
-const pass = ref()
 const passInput = ref('')
-const passItems = ref(['Test'])
+const passItems = ref<TPassKey[]>([])
+
+const members = defineModel<TMemberInfo[]>({ required: true, default: [] })
+const committedMembers = ref<TMemberInfo[]>([])
+
+// Always keep the model in sync: committed members + current form draft
+watch(() => memberForm, (newForm) => {
+    if (memberForm.name && memberForm.nric && memberForm.contact) {
+        members.value = [...committedMembers.value, { ...newForm }]
+    } else {
+        members.value = [...committedMembers.value]
+    }
+}, { deep: true })
+
+
+const passTypesComputed = computed(() => {
+    if (props.type === 'contractor') {
+        if (props.contractorType === 'property-agent') {
+            return ["agent-pass"]
+        } else {
+            return ["contractor-pass"]
+        }
+    } else {
+        return ["visitor-pass"]
+    }
+})
 
-const members = defineModel<TMemberInfo[]>({required: true, default: []})
+const { data: passesData, refresh: refreshPassesData, pending: fetchPassesPending } = await useLazyAsyncData('get-pass-keys', () => {
+    return getPassKeysByPageSearch({
+        search: passInput.value,
+        page: 1,
+        limit: 500,
+        passTypes: passTypesComputed.value,
+        sites: [props.site],
+        statuses: ["Available"]
+    })
+})
 
+watch(passesData, (data: any) => {
+    passItems.value = Array.isArray(data?.items) ? data.items : []
+})
 
-function handleFocusedPass() {
+const passItemsFilteredFinal = computed(() => {
+    return passItems.value.filter((item: TPassKey) => {
+        return !props.selectedVisitorPass.some((pass: TPassKeyPayload) => pass.keyId === item._id) && !committedMembers.value.some((member: TMemberInfo) => member.visitorPass === item._id)
+    })
+})
+
+const membersDisplayed = computed(() => {
+    return committedMembers.value.map((member: TMemberInfo) => {
+        return {
+            ...member,
+            visitorPass: passItems.value.find((item: TPassKey) => item._id === member.visitorPass)?.prefixAndName || ""
+        }
+    })
+})
 
-}
 
-function handleSelectPass(val: any) {
-    memberForm.visitorPass = val
-}
 
 function handleClearForm() {
     formRef.value?.reset()
 }
 
 async function handleAddMember() {
-    members.value.push({...memberForm})
+    committedMembers.value.push({ ...memberForm })
     handleClearForm()
 }
 
-function handleRemoveMember(index: number){
-    const filtered = members.value.filter((item, qIndex) =>  qIndex !== index)
-    members.value = filtered
+function handleRemoveMember(index: number) {
+    committedMembers.value = committedMembers.value.filter((_, i) => i !== index)
 }
 
 

package/components/PassInformation.vue

@@ -4,27 +4,36 @@
             <v-card-text>
                 <v-btn block color="primary-button" :height="40" text="Scan QR Code" class="text-capitalize" disabled
                     prepend-icon="mdi-qrcode" />
-                <v-combobox v-model="pass" v-model:search="passInput" :hide-no-data="false" class="mt-3"
-                    @update:focused="handleFocusedPass" :items="passItems" :rules="props.passRules" item-title="prefixAndName" item-value="_id"
-                    @update:model-value="handleSelectPass" label="Pass" variant="outlined" hide-details
-                    density="compact" persistent-hint small-chips>
-                    <template v-slot:no-data>
-                        <v-list-item density="compact">
-                            <v-list-item-title v-if="passInput">
-                                No results matching "<strong>{{ passInput }}</strong>". This value will be
-                                added as new
-                                option.
-                            </v-list-item-title>
-                            <v-list-item v-else>No data available</v-list-item>
-                        </v-list-item>
+                <v-autocomplete v-model="selectedPass" v-model:search="passInput" :hide-no-data="false" class="mt-3"
+                    :items="passItems" :rules="props.passRules" item-title="prefixAndName" item-value="_id" label="Pass"
+                    variant="outlined" hide-details density="compact" persistent-hint small-chips>
+
+                    <template v-slot:chip="{ props, item }">
+                        <v-chip v-if="selectedPass" v-bind="props" prepend-icon="mdi-card-bulleted-outline"
+                            :text="item.raw?.prefixAndName"></v-chip>
                     </template>
-                </v-combobox>
+                </v-autocomplete>
+
+
+                <template v-if="!props.hideKeys">
+                    <v-autocomplete v-model="selectedKeys" v-model:search="keyInput" :hide-no-data="false" class="mt-3"
+                        :items="keyItems" :rules="props.passRules" item-title="prefixAndName" item-value="_id"
+                        label="Keys" multiple variant="outlined" hide-details density="compact" persistent-hint
+                        small-chips>
+
+                        <template v-slot:chip="{ props, item }">
+                            <v-chip v-if="selectedKeys.length > 0" v-bind="props" prepend-icon="mdi-key"
+                                :text="item.raw?.prefixAndName"></v-chip>
+                        </template>
+                    </v-autocomplete>
+                </template>
 
                 <v-divider class="my-4 w-100" />
-            
+
 
                 <template v-if="selectedType">
-                    <v-number-input v-model="count" variant="outlined" :min="1" :precision="0" density="compact" :rules="countRules"  />
+                    <v-number-input v-model="count" variant="outlined" :min="1" :precision="0" density="compact"
+                        :rules="countRules" />
                 </template>
             </v-card-text>
         </v-card>
@@ -35,6 +44,7 @@
 import type { PropType } from 'vue'
 import type { ValidationRule } from 'vuetify/lib/types.mjs'
 import usePassKey from '../composables/usePassKey'
+import useKey from '../composables/useKey'
 
 const props = defineProps({
     passRules: {
@@ -56,12 +66,21 @@ const props = defineProps({
     contractorType: {
         type: String,
         default: ""
+    },
+    hideKeys: {
+        type: Boolean,
+        default: false
     }
 })
 
-const pass = ref("")
+const pass = defineModel<TPassKeyPayload[]>("pass", { default: [] })
+const keys = defineModel<TPassKeyPayload[]>("keys", { default: [] })
+const selectedPass = ref<string>('')
+const selectedKeys = ref<string[]>([])
 const passInput = ref('')
-const passItems = ref([])
+const keyInput = ref('')
+const passItems = ref<TPassKey[]>([])
+const keyItems = ref<any[]>([])
 const selectedType = ref<'qr-pass' | 'nfc-card'>()
 const count = ref(1)
 
@@ -79,15 +98,15 @@ const typeItems = [
 ]
 
 const passTypesComputed = computed(() => {
-   if(props.type === 'contractor'){
-    if(props.contractorType === 'property-agent'){
-        return ["agent-pass"]
+    if (props.type === 'contractor') {
+        if (props.contractorType === 'property-agent') {
+            return ["agent-pass"]
+        } else {
+            return ["contractor-pass"]
+        }
     } else {
-        return ["contractor-pass"]
+        return ["visitor-pass"]
     }
-   } else {
-    return ["visitor-pass"]
-   }
 })
 
 const { data: passesData, refresh: refreshPassesData, pending: fetchPassesPending } = await useLazyAsyncData('get-pass-keys', () => {
@@ -105,22 +124,48 @@ watch(passesData, (data: any) => {
     passItems.value = data?.items || []
 })
 
+const { data: keysData, refresh: refreshKeysData, pending: fetchKeysPending } = await useLazyAsyncData('get-keys', () => {
+    return getPassKeysByPageSearch({
+        search: keyInput.value,
+        statuses: ["Available"],
+        passTypes: ['pass-key'],
+        page: 1,
+        limit: 500,
+        sites: [props.site],
+    })
+})
+
+watch(keysData, (data: any) => {
+    keyItems.value = data?.items || []
+})
 
-function handleFocusedPass() {
+watch(selectedPass, (newVal) => {
+    pass.value = [{ keyId: newVal }]
+})
+
+watch(selectedKeys, (newVal) => {
+    keys.value = newVal.map(key => ({ keyId: key }))
+})
 
-}
 
-function handleSelectPass() {
 
-}
 
 //prevent negative value;
 watch(count, (newCount) => {
-    if(newCount < 1){
+    if (newCount < 1) {
         count.value = 1
     }
 })
 
+onMounted(() => {
+    if (pass.value.length > 0) {
+        selectedPass.value = pass.value[0].keyId
+    }
+    if (keys.value.length > 0) {
+        selectedKeys.value = keys.value.map(k => k.keyId)
+    }
+})
+
 </script>
 
 <style scoped></style>

package/components/VehicleManagement.vue

@@ -9,8 +9,8 @@
         <v-row no-gutters class="px-5 py-1 d-flex align-center justify-end ga-3">
           <v-text-field v-model="searchInput" density="compact" placeholder="Search" clearable max-width="300"
             append-inner-icon="mdi-magnify" hide-details />
-          <v-select v-model="vehicleTypeFilter" density="compact" item-title="label" item-value="value"
-            placeholder="Filter by Type" clearable max-width="200" hide-details :items="typeOptions" />
+          <!-- <v-select v-model="vehicleTypeFilter" density="compact" item-title="label" item-value="value"
+            placeholder="Filter by Type" clearable max-width="200" hide-details :items="typeOptions" /> -->
         </v-row>
       </template>
 
@@ -37,8 +37,8 @@
     </v-dialog>
 
     <v-dialog v-model="dialog.createVehicle" v-if="vehicleType" width="450" persistent>
-      <VehicleForm :type="vehicleType" mode="add" :vehicle-data="selectedVehicleObject" @back="handleBackToSelection" @done="handleAddVehicleComplete"
-        :org="org" :site="props.site" @close:all="handleCloseAll" />
+      <VehicleForm :type="vehicleType" mode="add" :vehicle-data="selectedVehicleObject" @back="handleBackToSelection"
+        @done="handleAddVehicleComplete" :org="org" :site="props.site" @close:all="handleCloseAll" />
     </v-dialog>
 
     <!-- <v-dialog v-model="dialog.updateVehicle" v-if="vehicleType" width="450" persistent>
@@ -65,10 +65,23 @@
                           {{ formatVehicleStatus(value).label }}
                         </v-chip>
                       </template>
-                      <template #item.action="{ item }">
-                        <v-btn v-if="canDeleteVehicle && (item as TPlateNumber)?.status == 'active'" text="Delete" color="error" flat size="x-small" @click="handleDeleteVehicleAction(item as TPlateNumber)"/>
-                        <v-btn v-if="props.app === 'property_management_agency' && (item as TPlateNumber)?.status == 'pending'" text="Approve" color="success" flat size="x-small" @click="handleApproveVehicle(item as TPlateNumber)"/>
-                        <v-btn v-if=" (item as TPlateNumber)?.status == 'deleted'" text="Restore" color="orange" flat size="x-small" @click="handleRestoreVehicle(item as TPlateNumber)"/>
+                      <template #item.action="{ item: plateNumberItem, value }">
+                        <v-btn v-if="canDeleteVehicle && (plateNumberItem as TPlateNumber)?.status == 'active'"
+                          text="Delete" color="error" flat size="x-small"
+                          @click="handleDeleteVehicleAction(plateNumberItem as TPlateNumber)" />
+                        <v-btn
+                          v-if="props.app === 'property_management_agency' && (plateNumberItem as TPlateNumber)?.status == 'pending'"
+                          text="Approve" color="success" flat size="x-small"
+                          @click="handleApproveVehicle(plateNumberItem as TPlateNumber)" />
+                        <v-btn v-if="(plateNumberItem as TPlateNumber)?.status == 'deleted'" text="Restore"
+                          color="orange" flat size="x-small"
+                          @click="handleRestoreVehicle(plateNumberItem as TPlateNumber)" />
+                        <v-btn
+                          v-if="((plateNumberItem as TPlateNumber)?.type === 'whitelist' || (plateNumberItem as TPlateNumber)?.type === 'blocklist') && plateNumberItem?.status == 'active'"
+                          variant="outlined"
+                          :text="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'Whitelist' : 'Blocklist'"
+                          :color="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'primary' : 'red'" flat
+                          size="x-small" class="ml-1" @click="handleUpdateType(plateNumberItem as TPlateNumber)" />
                       </template>
                     </v-data-table>
                     <v-btn text="Add Vehicle Number" class="mt-6 text-capitalize" prepend-icon="mdi-plus"
@@ -81,7 +94,7 @@
               <v-col v-else-if="selectedVehicleObject[key]" cols="12">
                 <span class="d-flex ga-3 align-center"><strong>{{ label }}:</strong> {{ formatValues(key,
                   selectedVehicleObject[key])
-                }}</span>
+                  }}</span>
               </v-col>
             </template>
           </v-row>
@@ -89,16 +102,24 @@
       </DialogUpdateMoreAction>
     </v-dialog>
     <v-dialog v-model="dialog.deleteVehicle" persistent width="540">
-      <DialogDeleteConfirmation :loading="deletingVehicle"   :prompt-title="`Are you sure want to delete this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
+      <DialogDeleteConfirmation :loading="deletingVehicle"
+        :prompt-title="`Are you sure want to delete this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
         @delete="submitDelete" @close="closeDeleteDialog" />
     </v-dialog>
     <v-dialog v-model="dialog.approveVehicle" persistent width="540">
-      <DialogReusablePrompt :loading="approvingVehicle" :prompt-title="`Are you sure want to approve this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
-        @approve="submitApprove" @close="dialog.approveVehicle = false"  />
+      <DialogReusablePrompt :loading="approvingVehicle"
+        :prompt-title="`Are you sure want to approve this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
+        @proceed="submitApprove" @close="dialog.approveVehicle = false" />
     </v-dialog>
     <v-dialog v-model="dialog.restoreVehicle" persistent width="540">
-      <DialogReusablePrompt :loading="restoringVehicle" :prompt-title="`Are you sure want to restore this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
-        @proceed="submitRestore" @close="dialog.restoreVehicle = false"  />
+      <DialogReusablePrompt :loading="restoringVehicle"
+        :prompt-title="`Are you sure want to restore this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
+        @proceed="submitRestore" @close="dialog.restoreVehicle = false" />
+    </v-dialog>
+    <v-dialog v-model="dialog.updateVehicleType" persistent width="540">
+      <DialogReusablePrompt :loading="updatingType"
+        :prompt-title="`Are you sure want to update the type of this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
+        @proceed="submitUpdateType" @close="dialog.updateVehicleType = false" />
     </v-dialog>
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
@@ -147,7 +168,7 @@ const plateHeaders = [
 
 
 const { formatCamelCaseToWords, formatDate, debounce } = useUtils();
-const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle } = useVehicle();
+const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle, updateVehicle } = useVehicle();
 
 const items = ref<Array<Record<string, any>>>([]);
 const page = ref(1);
@@ -160,6 +181,7 @@ const loading = ref(false);
 const deletingVehicle = ref(false);
 const approvingVehicle = ref(false);
 const restoringVehicle = ref(false);
+const updatingType = ref(false);
 
 const selectedVehicleId = ref<string | null>(null)
 const vehicleType = ref<TVehicleType | null>(null);
@@ -185,7 +207,8 @@ const dialog = reactive({
   deleteVehicle: false,
   showMoreActions: false,
   approveVehicle: false,
-  restoreVehicle: false
+  restoreVehicle: false,
+  updateVehicleType: false
 });
 
 
@@ -280,19 +303,24 @@ function handleEditVehicleAction() {
 }
 
 function handleDeleteVehicleAction(item: TPlateNumber) {
-  selectedPlateNumberObject.value = item || null;  
+  selectedPlateNumberObject.value = item || null;
   dialog.deleteVehicle = true;
 }
 
 function handleApproveVehicle(item: TPlateNumber) {
-  selectedPlateNumberObject.value = item || null;  
+  selectedPlateNumberObject.value = item || null;
   dialog.approveVehicle = true;
 }
 function handleRestoreVehicle(item: TPlateNumber) {
-  selectedPlateNumberObject.value = item || null;  
+  selectedPlateNumberObject.value = item || null;
   dialog.restoreVehicle = true;
 }
 
+function handleUpdateType(item: TPlateNumber) {
+  selectedPlateNumberObject.value = item || null;
+  dialog.updateVehicleType = true;
+}
+
 function handleSelectVehicleStatus(value: TVehicleType) {
   vehicleType.value = value;
   dialog.showSelection = false;
@@ -341,6 +369,7 @@ async function submitDelete() {
 
   const plateNumberId = selectedPlateNumberObject.value?._id;
   const type = selectedPlateNumberObject.value?.type as TVehicleType;
+  const recNo = selectedPlateNumberObject.value?.recNo;
   if (!plateNumberId) {
     showMessage("Invalid plate number selected for deletion.", "error");
     return;
@@ -348,12 +377,11 @@ async function submitDelete() {
 
   try {
     deletingVehicle.value = true;
-    const res = await deleteVehicle({ site: props.site, id: plateNumberId as string, recno: selectedVehicleObject.value.recno, type }
+    const res = await deleteVehicle({ site: props.site, recno: recNo, id: plateNumberId as string, type }
     );
     dialog.deleteVehicle = false;
-    selectedVehicleId.value = null
     showMessage(res.message, "success");
-    getVehiclesRefresh();
+    await getVehiclesRefresh();
   } catch (error: any) {
     console.error("Error deleting vehicle:", error);
     message.value = error.response._data.message;
@@ -366,24 +394,21 @@ async function submitDelete() {
 
 async function submitRestore() {
 
-  console.log("Submitting restore for plate number ID:", selectedPlateNumberObject.value);
-  const plateNumberId = selectedPlateNumberObject.value?._id;
-
+  const vehicleId = selectedPlateNumberObject.value?._id;
 
-  if (!plateNumberId) {
-    showMessage("Invalid plate number selected for restoration.", "error");
+  if (!vehicleId) {
+    showMessage("Invalid vehicle Id selected for restoration.", "error");
     return;
   }
 
   try {
-    restoringVehicle.value = true;  
+    restoringVehicle.value = true;
     // reactivate and restore will use the same endpoint, just with different payload
-    const res = await approveVehicle({ site: props.site, org: props.org, id: plateNumberId as string }
+    const res = await approveVehicle({ site: props.site, org: props.org, id: vehicleId as string }
     );
     dialog.restoreVehicle = false;
-    selectedVehicleId.value = null
     showMessage(res.message, "success");
-    getVehiclesRefresh();
+    await getVehiclesRefresh();
   } catch (error: any) {
     console.error("Error restoring vehicle:", error);
     const errMessage = error?.response?._data?.message || "Failed to restore vehicle";
@@ -395,6 +420,55 @@ async function submitRestore() {
 }
 
 
+async function submitUpdateType() {
+
+
+  const vehicleId = selectedPlateNumberObject.value?._id;
+  const type = selectedPlateNumberObject.value?.type as TVehicleType;
+  const recNo = selectedPlateNumberObject.value?.recNo;
+
+
+  if (!type) {
+    showMessage("Invalid vehicle type.", "error");
+    return;
+  }
+
+  // if(!recNo){
+  //   showMessage("Invalid vehicle record number.", "error");
+  //   return;
+  // }
+
+
+  const payload = {
+    site: props.site,
+    plateNumber: selectedPlateNumberObject.value?.plateNumber as string,
+    type: type === "whitelist" ? "blocklist" : "whitelist" as TVehicleType,
+    // recno: recNo
+  }
+
+
+  if (!vehicleId) {
+    showMessage("Invalid vehicle Id selected for updating type.", "error");
+    return;
+  }
+
+  try {
+    updatingType.value = true;
+    const res = await updateVehicle(vehicleId as string, payload);
+    dialog.updateVehicleType = false;
+    showMessage(res.message, "success");
+    await getVehiclesRefresh();
+  } catch (error: any) {
+    console.error("Error updating vehicle type:", error);
+    const errMessage = error?.response?._data?.message || "Failed to update vehicle type";
+    showMessage(errMessage, "error");
+    // message.value = error.response._data.message;
+  } finally {
+    updatingType.value = false;
+  }
+}
+
+
 async function submitApprove() {
 
   const plateNumberId = selectedPlateNumberObject.value?._id;
@@ -404,14 +478,13 @@ async function submitApprove() {
   }
 
   try {
-    approvingVehicle.value = true;  
+    approvingVehicle.value = true;
     const res = await approveVehicle({ site: props.site, org: props.org, id: plateNumberId as string }
 
     );
     dialog.approveVehicle = false;
-    selectedVehicleId.value = null
     showMessage(res.message, "success");
-    getVehiclesRefresh();
+    await getVehiclesRefresh();
   } catch (error: any) {
     console.error("Error approving vehicle:", error);
     const errMessage = error?.response?._data?.message || "Failed to approve vehicle";