@7365admin1/layer-common 1.10.6 → 1.10.7

package/components/VehicleForm.vue

@@ -41,7 +41,7 @@
             <v-row>
               <v-col cols="12">
                 <InputLabel class="text-capitalize" title="Full Name" required />
-                <v-text-field v-model.trim="vehicle.name" density="comfortable" :rules="[requiredRule]" :disabled="disablePrefilledInputs" />
+                <v-text-field v-model.trim="vehicle.name" density="comfortable" :rules="[requiredRule]" disabled />
               </v-col>
             </v-row>
           </v-col>
@@ -75,10 +75,44 @@
             <InputLabel class="text-capitalize" title="Vehicle Numbers" required />
             <!-- <v-text-field v-model="vehicle.plateNumber" density="comfortable" :rules="[requiredRule]" /> -->
             <template v-for="plate in vehicle.plates" :key="plate.plateNumber">
-              <v-text-field v-model="plate.plateNumber" density="comfortable" :rules="[requiredRule]" class="mb-2" read-only />
+              <v-text-field v-model="plate.plateNumber" density="comfortable" :rules="[requiredRule]" class="mb-2" readonly>
+                <template #append-inner>
+                    <v-chip size="small"  class="ma-0" :color="formatVehicleStatus(plate?.status)?.color as string">{{  formatVehicleStatus(plate?.status)?.label }}</v-chip>
+                </template>
+              </v-text-field>
             </template>
 
-            <InputVehicleNumber v-model="newPlateNumber" density="comfortable" :rules="[requiredRule]" />
+            <template v-for="(plate, index) in newPlateNumbers" :key="index">
+                <v-row class="" :class="`${index === newPlateNumbers.length - 1 ? 'mb-1' : 'mb-5'}`" no-gutters>
+                  <v-col :cols="newPlateNumbers.length > 1 ? '11' : '12'">
+                    <InputVehicleNumber
+                      v-model="newPlateNumbers[index]"
+                      density="comfortable"
+                      placeholder="New Vehicle Number"
+                      :rules="[requiredRule]"
+                    />
+                  </v-col>
+
+                  <v-col :cols="newPlateNumbers.length > 1 ? '1' : '0'" class="d-flex align-start">
+                    <v-btn
+                      icon="mdi-delete-outline"
+                      variant="text"
+                      color="error"
+                      v-if="newPlateNumbers.length > 1"
+                      @click="removePlate(index)"
+                    />
+                  </v-col>
+                </v-row>
+              </template>
+
+              <v-btn
+                prepend-icon="mdi-plus"
+                variant="outlined"
+                class="text-none"
+                @click="addPlate"
+              >
+                Add Plate
+              </v-btn>
           </v-col>
 
           <v-col v-if="shouldShowField('remarks')" cols="12">
@@ -157,17 +191,24 @@
     </v-toolbar>
 
     <v-dialog v-model="showMatchingPeopleDialog" max-width="700">
-      <v-card>
+      <v-card :loading="checkingNRIC">
         <v-toolbar>
           <v-toolbar-title>
-            Existing Records Found
+            <v-row no-gutters class="d-flex align-center justify-space-between">
+              <span class="font-weight-bold">
+                Matching Records for NRIC: {{ vehicle.nric }}
+              </span>
+              <span>
+                <v-btn icon="mdi-close" variant="text" @click="showMatchingPeopleDialog = false" />
+              </span>
+            </v-row>
           </v-toolbar-title>
         </v-toolbar>
 
         <v-card-text>
 
           <v-list lines="three">
-            <v-list-item v-for="v in matchingPeople" :key="v._id" class="cursor-pointer">
+            <v-list-item v-if="matchingPeople.length > 0 || checkingNRIC" v-for="v in matchingPeople" :key="v._id" class="cursor-pointer">
               <v-list-item-title>
                 {{ v.name }}
               </v-list-item-title>
@@ -187,6 +228,14 @@
               </template>
 
             </v-list-item>
+              <v-empty-state v-else
+                icon="mdi-account-off"
+                title="No matching records found"
+                subtitle="The NRIC you entered does not match any existing records.">
+                <template #actions>
+                  <v-btn variant="flat" color="primary" @click="showMatchingPeopleDialog = false">Close</v-btn>
+                </template>
+              </v-empty-state>
           </v-list>
 
         </v-card-text>
@@ -202,7 +251,7 @@
 
 const prop = defineProps({
   type: {
-    type: String as PropType<TVehicleType>,
+    type: String as PropType<TVehicleType | 'seasonpass'>,
     required: true
   },
   org: {
@@ -224,14 +273,14 @@ const prop = defineProps({
 });
 
 const { requiredRule, formatDateISO8601, debounce } = useUtils();
-const { addVehicle, getCustomSeasonPassTypes, updateVehicle, getVehicleByNRIC } = useVehicle();
+const { addVehicle, getCustomSeasonPassTypes, updateVehicle, formatVehicleStatus } = useVehicle();
 const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
 const { findPersonByNRICMultipleResult } = usePeople();
 
 const emit = defineEmits(['back', 'select', 'done', 'error', 'close', 'close:all']);
 
 
-const vehicle = reactive<Partial<TVehicle>>({
+const vehicle = reactive<Omit<ExceptPartial<TVehicle>, 'type'> & { type: TVehicleType | 'seasonpass' }>({
   plates: [],
   type: prop.type,
   category: "resident",
@@ -250,7 +299,7 @@ const vehicle = reactive<Partial<TVehicle>>({
   _id: '',
 });
 
-const newPlateNumber = ref('');
+const newPlateNumbers = ref<string[]>(['']);
 const disablePrefilledInputs = ref(true);
 
 const blocksArray = ref<TDefaultOptionObj[]>([]);
@@ -277,7 +326,7 @@ const defaultSeasonPassTypeArray = computed(() => {
 });
 
 
-const typeFieldMap: Record<TVehicleType, string[]> = {
+const typeFieldMap: Record<TVehicleType | 'seasonpass', string[]> = {
   seasonpass: ['seasonPassType', 'name', 'phone', 'plateNumber', 'block', 'level', 'unit', 'start', 'end'],
   blocklist: ['name', 'nric', 'phone', 'plateNumber', 'remarks'],
   whitelist: ['name', 'nric', 'phone', 'plateNumber', 'block', 'level', 'unit']
@@ -302,7 +351,7 @@ const errorMessage = ref('');
 
 
 // fetch existing vehicle data if in edit mode
-if (prop.mode === 'edit') {
+if (prop.vehicleData) {
   const existingVehicleData = JSON.parse(JSON.stringify(prop.vehicleData || {}));
   Object.assign(vehicle, existingVehicleData);
 }
@@ -416,7 +465,14 @@ function handleChangeLevel(value: any) {
   refreshUnitsData();
 }
 
+function addPlate() {
+  newPlateNumbers.value.push('');
+}
+
 
+function removePlate(index: number) {
+  newPlateNumbers.value.splice(index, 1);
+}
 
 function back() {
   emit("back");
@@ -432,12 +488,13 @@ function close() {
   selectedSubscriptionDuration.value = null;
 }
 
-function formatVehicleType(type: TVehicleType): string {
+function formatVehicleType(type: TVehicleType | 'seasonpass'): string {
   switch (type) {
     case 'whitelist':
       return 'Whitelist';
     case 'blocklist':
       return 'Blocklist';
+
     case 'seasonpass':
       return 'Season Pass';
     default:
@@ -463,15 +520,16 @@ async function submit() {
     const { plateNumber, type, category, name, phoneNumber, block, level, unit, nric, remarks, seasonPassType, start, end, site, org } = vehicle
 
     let payload: Partial<TVehiclePayload> = {
-      plateNumber,
+      plateNumber: newPlateNumbers.value,
       name,
       phoneNumber,
+      type: type === 'seasonpass' ? 'whitelist' : type, // season pass will be created as whitelist type in backend with additional seasonPassType field,
+      nric
     };
 
     if (prop.mode === 'add') {
       payload = {
         ...payload,
-        type,
         category,
         site,
         org
@@ -498,7 +556,6 @@ async function submit() {
     } else if (vehicle.type === 'blocklist') {
       payload = {
         ...payload,
-        nric,
         remarks,
       };
     }
@@ -609,18 +666,17 @@ async function checkNRIC() {
   if (!vehicle.nric || vehicle.nric.length < 5) return;
 
   checkingNRIC.value = true;
-
+  showMatchingPeopleDialog.value = true;
   try {
     const res = await findPersonByNRICMultipleResult(vehicle.nric, prop.site) as { items: TPeople[] } | null;
 
     if (res?.items && res.items.length > 0) {
       matchingPeople.value = res.items || []
-      showMatchingPeopleDialog.value = true;
     } else {
       matchingPeople.value = [];
-      showMatchingPeopleDialog.value = false;
     }
 
+
   } catch (error) {
     console.error("NRIC search failed:", error);
   } finally {
@@ -634,6 +690,7 @@ watch(
   () => vehicle.nric,
   async (newNRIC) => {
     resetVehicleDetails();
+    matchingPeople.value = [];
     if (!newNRIC || newNRIC.length < 3) return;
 
     debounceedCheckNRIC();
@@ -651,6 +708,8 @@ const resetVehicleDetails = () => {
   disablePrefilledInputs.value = false;
 }
 
+watch()
+
 
 
 

package/components/VehicleManagement.vue

@@ -2,7 +2,7 @@
   <v-row no-gutters>
     <TableMain :headers="headers" :items="items" :loading="loading || getVehiclesPending" :page="page" :pages="pages"
       :pageRange="pageRange" :extension-height="70" :canCreate="canCreateVehicle" @refresh="getVehiclesRefresh"
-      createLabel="Add Vehicle" show-header @row-click="handleRowClick" @create="dialog.showSelection = true"
+      createLabel="Add Vehicle" show-header @row-click="handleRowClick" @create="handleAddVehicleClick"
       @update:page="handleUpdatePage">
 
       <template #extension>
@@ -17,16 +17,16 @@
       <template #item.block="{ value }">
         {{ value ? `Blk ${value}` : "" }}
       </template>
-      <template #item.status="{ value }">
+      <!-- <template #item.status="{ value }">
         <v-chip :color="formatVehicleStatus(value).color" size="x-small" dark>
           {{ formatVehicleStatus(value).label }}
         </v-chip>
 
 
-      </template>
+      </template> -->
 
       <template #item.plates="{ value, item }">
-       <PlateNumberDisplay :plate-numbers="value" :default-value="item.plateNumber" />
+        <PlateNumberDisplay :plate-numbers="value" :default-value="item.plateNumber" />
       </template>
     </TableMain>
 
@@ -37,33 +37,51 @@
     </v-dialog>
 
     <v-dialog v-model="dialog.createVehicle" v-if="vehicleType" width="450" persistent>
-      <VehicleForm :type="vehicleType" mode="add" @back="handleBackToSelection" @done="handleAddVehicleComplete"
+      <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>
+    <!-- <v-dialog v-model="dialog.updateVehicle" v-if="vehicleType" width="450" persistent>
       <VehicleForm :type="vehicleType" mode="edit" :vehicle-data="selectedVehicleObject"
         @back="dialog.updateVehicle = false" @close="dialog.updateVehicle = false" @done="handleUpdateVehicleComplete"
         :org="org" :site="site" @close:all="handleCloseAll" />
-    </v-dialog>
+    </v-dialog> -->
 
-    <v-dialog v-if="canViewVehicleDetails" v-model="dialog.showMoreActions" width="450" persistent>
-      <DialogUpdateMoreAction title="Preview" :can-update="canUpdateVehicle" :can-delete="canDeleteVehicle"
-        @close="dialog.showMoreActions = false" edit-button-label="Edit Vehicle" delete-button-label="Delete Vehicle"
-        @delete="handleDeleteVehicleAction" @edit="handleEditVehicleAction">
+    <v-dialog v-if="canViewVehicleDetails" v-model="dialog.showMoreActions" width="600" persistent>
+      <DialogUpdateMoreAction title="Preview" :can-update="false" :can-delete="false"
+        @close="dialog.showMoreActions = false">
         <template v-slot:content>
           <v-row no-gutters class="ga-1 mb-5">
-            
+
             <template v-for="(label, key) in formattedFields" :key="key">
-              <v-col v-if="key === 'plates'" class="d-flex ga-2">
+              <v-col v-if="key === 'plates'" class="d-flex flex-column ga-2">
                 <span class="d-flex ga-3 align-center"><strong>{{ label }}:</strong></span>
-                <PlateNumberDisplay :plate-numbers="selectedVehicleObject[key]" show-all :default-value="selectedVehicleObject.plateNumber" />  
+                <!-- <PlateNumberDisplay :plate-numbers="selectedVehicleObject[key]" show-all :default-value="selectedVehicleObject.plateNumber" />   -->
+                <v-col cols="12">
+                  <v-card flat outlined class="pa-2" border="sm black">
+                    <v-data-table :items="selectedVehicleObject[key]" :headers="plateHeaders" hide-default-footer>
+                      <template #item.status="{ value }">
+                        <v-chip :color="formatVehicleStatus(value).color" size="x-small" dark>
+                          {{ 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>
+                    </v-data-table>
+                    <v-btn text="Add Vehicle Number" class="mt-6 text-capitalize" prepend-icon="mdi-plus"
+                      @click="addNewPlateNumbers" color="primary" />
+                  </v-card>
+                </v-col>å
+
               </v-col>
 
               <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>
@@ -71,13 +89,22 @@
       </DialogUpdateMoreAction>
     </v-dialog>
     <v-dialog v-model="dialog.deleteVehicle" persistent width="540">
-      <DialogDeleteConfirmation :message="message" prompt-title="Are you sure want to delete this vehicle?"
+      <DialogDeleteConfirmation :message="message" :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 :message="message" :loading="approvingVehicle" :prompt-title="`Are you sure want to approve this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
+        @approve="submitApprove" @close="dialog.approveVehicle = false"  />
+    </v-dialog>
+    <v-dialog v-model="dialog.restoreVehicle" persistent width="540">
+      <DialogReusablePrompt :message="message" :loading="restoringVehicle" :prompt-title="`Are you sure want to restore this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
+        @approve="submitRestore" @close="dialog.restoreVehicle = false"  />
+    </v-dialog>
   </v-row>
 </template>
 
 <script lang="ts" setup>
+import useUtils from '../composables/useUtils';
 import useVehicle from '../composables/useVehicle';
 
 definePageMeta({
@@ -93,26 +120,33 @@ const props = defineProps({
   canViewVehicleDetails: { type: Boolean, default: true },
   site: { type: String, required: true },
   org: { type: String, required: true },
+  app: { type: String, required: true },
 });
 
 
 const headers = [
-      { title: "Name", value: "name" },
-      // { title: "Building", value: "buildingName" },
-      { title: "Vehicle Numbers", value: "plates" },
-      { title: "NRIC", value: "nric" },
-      { title: "Block", value: "block" },
-      { title: "Floor", value: "level" },
-      { title: "Unit", value: "unit" },
-      { title: "Category", value: "category" },
-      { title: "Type", value: "type" },
-      { title: "Status", value: "status" },
-    ]
+  { title: "Name", value: "name" },
+  { title: "Vehicle Numbers", value: "plates" },
+  { title: "NRIC", value: "nric" },
+  { title: "Block", value: "block" },
+  { title: "Floor", value: "level" },
+  { title: "Unit", value: "unitName" },
+  { title: "Category", value: "category" },
+  // { title: "Type", value: "type" },
+  // { title: "Status", value: "status" },
+]
+
+const plateHeaders = [
+  { title: "Plate Number", value: "plateNumber" },
+  { title: "Type", value: "type" },
+  { title: "Status", value: "status" },
+  { title: "", value: "action" },
+]
 
 
 
 const { formatCamelCaseToWords, formatDate, debounce } = useUtils();
-const { getVehicles, deleteVehicle, formatVehicleStatus } = useVehicle();
+const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle } = useVehicle();
 
 const items = ref<Array<Record<string, any>>>([]);
 const page = ref(1);
@@ -122,9 +156,15 @@ const pageRange = ref("-- - -- of --");
 const searchInput = ref("")
 
 const loading = ref(false);
+const deletingVehicle = ref(false);
+const approvingVehicle = ref(false);
+const restoringVehicle = ref(false);
+
 const selectedVehicleId = ref<string | null>(null)
 const vehicleType = ref<TVehicleType | null>(null);
-const  vehicleTypeFilter = ref<TVehicleType | null>(null);
+const vehicleTypeFilter = ref<TVehicleType | null>(null);
+
+const selectedPlateNumberObject = ref<TPlateNumber | null>(null);
 
 const message = ref("");
 const messageColor = ref("");
@@ -143,17 +183,18 @@ const dialog = reactive({
   showSelection: false,
   deleteVehicle: false,
   showMoreActions: false,
+  approveVehicle: false,
+  restoreVehicle: false
 });
 
+
 const typeOptions = [
   { label: "Whitelist", value: "whitelist" },
   { label: "Blocklist", value: "blocklist" },
-  { label: "Season Pass", value: "seasonPass" },
 ]
 
 const formattedFields: Partial<Record<keyof TVehicle, string>> = {
   name: "Name",
-  plates: "Vehicle Numbers",
   phoneNumber: "Phone Number",
   nric: "NRIC",
   block: "Block",
@@ -164,6 +205,7 @@ const formattedFields: Partial<Record<keyof TVehicle, string>> = {
   category: "Category",
   type: "Type",
   remarks: "Remarks",
+  plates: "Vehicle Numbers",
 }
 
 function formatValues(key: string, value: any) {
@@ -212,9 +254,9 @@ const { data: getVehiclesReq, refresh: getVehiclesRefresh, pending: getVehiclesP
 
 
 watch(getVehiclesReq, (newData: any) => {
-    items.value = newData?.items || [];
-    pages.value = newData?.pages || 0;
-    pageRange.value = newData?.pageRange || "-- - -- of --";
+  items.value = newData?.items || [];
+  pages.value = newData?.pages || 0;
+  pageRange.value = newData?.pageRange || "-- - -- of --";
 })
 
 function handleRowClick(data: any) {
@@ -223,17 +265,33 @@ function handleRowClick(data: any) {
   message.value = "";
 }
 
+function addNewPlateNumbers() {
+  if (!selectedVehicleId.value) return;
+  dialog.showSelection = true;
+}
+
 function handleEditVehicleAction() {
   vehicleType.value = selectedVehicleObject.value?.type || null;
+  console.log("Selected Vehicle Object: ", selectedVehicleObject.value);
   dialog.showSelection = false;
+  dialog.updateVehicle = false;
   dialog.updateVehicle = true;
 }
 
-function handleDeleteVehicleAction() {
-  dialog.showMoreActions = false;
+function handleDeleteVehicleAction(item: TPlateNumber) {
+  selectedPlateNumberObject.value = item || null;  
   dialog.deleteVehicle = true;
 }
 
+function handleApproveVehicle(item: TPlateNumber) {
+  selectedPlateNumberObject.value = item || null;  
+  dialog.approveVehicle = true;
+}
+function handleRestoreVehicle(item: TPlateNumber) {
+  selectedPlateNumberObject.value = item || null;  
+  dialog.restoreVehicle = true;
+}
+
 function handleSelectVehicleStatus(value: TVehicleType) {
   vehicleType.value = value;
   dialog.showSelection = false;
@@ -261,10 +319,16 @@ function handleUpdateVehicleComplete() {
   getVehiclesRefresh();
 }
 
+
 function handleUpdatePage(newPageNum: number) {
   page.value = newPageNum;
 }
 
+function handleAddVehicleClick() {
+  dialog.showSelection = true;
+  selectedVehicleId.value = null;
+}
+
 const formatPlateNumbers = (value: any) => {
   if (!value || value.length === 0) return "";
 
@@ -273,20 +337,80 @@ const formatPlateNumbers = (value: any) => {
 };
 
 async function submitDelete() {
-  bypass.value = false;
+
+  const plateNumberId = selectedPlateNumberObject.value?._id;
+  const type = selectedPlateNumberObject.value?.type as TVehicleType;
+  if (!plateNumberId) {
+    showMessage("Invalid plate number selected for deletion.", "error");
+    return;
+  }
 
   try {
-    const res = await deleteVehicle({ site: props.site, id: selectedVehicleId.value as string, recno: selectedVehicleObject.value.recno, type: selectedVehicleObject.value.type }
+    deletingVehicle.value = true;
+    const res = await deleteVehicle({ site: props.site, id: plateNumberId as string, recno: selectedVehicleObject.value.recno, type }
     );
     dialog.deleteVehicle = false;
-    dialog.showMoreActions = false;
     selectedVehicleId.value = null
     showMessage(res.message, "success");
     getVehiclesRefresh();
   } catch (error: any) {
     console.error("Error deleting vehicle:", error);
     message.value = error.response._data.message;
-    bypass.value = true;
+  } finally {
+    deletingVehicle.value = false;
+  }
+}
+
+
+
+async function submitRestore() {
+
+  const plateNumberId = selectedPlateNumberObject.value?._id;
+  if (!plateNumberId) {
+    showMessage("Invalid plate number selected for restoration.", "error");
+    return;
+  }
+
+  try {
+    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 }
+    );
+    dialog.restoreVehicle = false;
+    selectedVehicleId.value = null
+    showMessage(res.message, "success");
+    getVehiclesRefresh();
+  } catch (error: any) {
+    console.error("Error restoring vehicle:", error);
+    message.value = error.response._data.message;
+  } finally {
+    restoringVehicle.value = false;
+  }
+}
+
+
+async function submitApprove() {
+
+  const plateNumberId = selectedPlateNumberObject.value?._id;
+  if (!plateNumberId) {
+    showMessage("Invalid plate number selected for approval.", "error");
+    return;
+  }
+
+  try {
+    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();
+  } catch (error: any) {
+    console.error("Error approving vehicle:", error);
+    message.value = error.response._data.message;
+  } finally {
+    approvingVehicle.value = false;
   }
 }
 

package/components/VisitorForm.vue

@@ -146,6 +146,7 @@
 
           <v-col v-if="prop.type === 'contractor' && contractorStep === 2" cols="12">
             <PassInformation />
+            <EntryPassInformation v-if="entryPassSettings?.data?.settings?.nfcPass" v-model="passType" v-model:quantity="passQuantity" v-model:cards="passCards" :settings="entryPassSettings" :loading="entryPassSettingsPending" @scan:barcode="$emit('scan:barcode')" @scan:camera="$emit('scan:camera')" />
           </v-col>
 
           <v-col v-if="prop.type === 'contractor' && contractorStep === 3" cols="12">
@@ -230,6 +231,7 @@ const currentAutofillSource = ref<AutofillSource>(null);
 const { requiredRule, debounce } = useUtils();
 const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
 const { createVisitor, typeFieldMap, contractorTypes } = useVisitor();
+const { getBySiteId: getEntryPassSettingsBySiteId } = useSiteEntryPassSettings();
 const { findPersonByNRIC, findPersonByContact, searchCompanyList, findUsersByPlateNumber } = usePeople()
 
 const emit = defineEmits([
@@ -259,6 +261,10 @@ const visitor = reactive<Partial<TVisitorPayload>>({
   members: [],
 });
 
+const passType = ref("");
+const passQuantity = ref<number | null>(null);
+const passCards = ref<string[]>([]);
+
 const dialog = reactive({
   vehicleNumberUsersList: false,
 });
@@ -504,6 +510,19 @@ function handleAutofillDataViaVehicleNumber(item: TPeople){
 }
 
 
+const {
+  data: entryPassSettings,
+  pending: entryPassSettingsPending,
+  refresh: refreshEntryPassSettings,
+} = useLazyAsyncData(`fetch-entrypass-settings-${prop.site}`, () => {
+  if (contractorStep.value !== 2) return Promise.resolve(null);
+  return getEntryPassSettingsBySiteId(prop.site);
+});
+
+watch(contractorStep, (step) => {
+  if (step === 2) refreshEntryPassSettings();
+});
+
 const {
   data: siteData,
   refresh: refreshSiteData,