@7365admin1/layer-common 3.0.24 → 3.0.26

package/components/VisitorForm.vue

@@ -1,11 +1,7 @@
 <template>
   <v-card width="100%" :loading="processing">
     <v-toolbar>
-      <v-row
-        no-gutters
-        class="fill-height px-6 d-flex justify-space-between align-center"
-        align="center"
-      >
+      <v-row no-gutters class="fill-height px-6 d-flex justify-space-between align-center" align="center">
         <span class="font-weight-bold text-h5 text-capitalize">
           {{ prop.mode }} {{ formatVisitorType(type) }}
         </span>
@@ -16,54 +12,25 @@
       <div class="w-100 d-flex justify-space-between ga-2">
         <span class="text-subtitle-1 w-100 font-weight-bold mb-3">{{
           formTitle
-        }}</span>
-        <span
-          v-if="withStep2 || withStep3"
-          class="text-subtitle-2 font-weight-bold"
-          style="text-wrap: nowrap"
-          >Step <span class="text-primary-button">{{ contractorStep }}</span
-          >/{{ withStep3 ? 3 : withStep2 ? 2 : 1 }}</span
-        >
+          }}</span>
+        <span v-if="withStep2 || withStep3" class="text-subtitle-2 font-weight-bold" style="text-wrap: nowrap">Step
+          <span class="text-primary-button">{{ contractorStep }}</span>/{{ withStep3 ? 3 : withStep2 ? 2 : 1 }}</span>
       </div>
-      <v-form
-        ref="formRef"
-        v-model="validForm"
-        :disabled="processing"
-        @click="errorMessage = ''"
-      >
+      <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''">
         <v-row no-gutters class="pt-4">
           <v-col v-if="shouldShowField('contractorType')" cols="12">
-            <InputLabel
-              class="text-capitalize"
-              title="Contractor Type"
-              required
-            />
-            <v-combobox
-              v-model="contractorTypeObj"
-              v-model:search="contractorTypeInput"
-              ref="contractorTypeCombo"
-              autocomplete="off"
-              :hide-no-data="false"
-              @update:focused="handleFocusedContractorType"
-              :items="contractorTypes"
-              :rules="[requiredRule]"
-              item-value="value"
-              @update:model-value="handleSelectContractorType"
-              variant="outlined"
-              density="comfortable"
-              persistent-hint
-              small-chips
-            >
+            <InputLabel class="text-capitalize" title="Contractor Type" required />
+            <v-combobox v-model="contractorTypeObj" v-model:search="contractorTypeInput" ref="contractorTypeCombo"
+              autocomplete="off" :hide-no-data="false" @update:focused="handleFocusedContractorType"
+              :items="contractorTypes" :rules="[requiredRule]" item-value="value"
+              @update:model-value="handleSelectContractorType" variant="outlined" density="comfortable" persistent-hint
+              small-chips>
               <template v-slot:no-data>
                 <v-list-item>
-                  <v-list-item-title
-                    @click.stop="handleAddNewContractorType"
-                    class="d-flex align-center ga-1"
-                  >
+                  <v-list-item-title @click.stop="handleAddNewContractorType" class="d-flex align-center ga-1">
                     <span><v-icon icon="mdi-plus" /></span> Add "<strong>{{
                       contractorTypeInput
-                    }}</strong
-                    >" as custom contractor type.
+                      }}</strong>" as custom contractor type.
                   </v-list-item-title>
                 </v-list-item>
               </template>
@@ -72,26 +39,14 @@
 
           <v-col v-if="shouldShowField('attachments')" class="w-100">
             <InputLabel class="text-capitalize" title="Attach Image" />
-            <InputFileV2
-              v-model="visitor.attachments"
-              multiple
-              :max-length="3"
-            />
+            <InputFileV2 v-model="visitor.attachments" multiple :max-length="3" />
           </v-col>
 
           <v-col v-if="shouldShowField('name')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel
-                  class="text-capitalize"
-                  title="Full Name"
-                  required
-                />
-                <v-text-field
-                  v-model.trim="visitor.name"
-                  density="comfortable"
-                  :rules="[requiredRule]"
-                />
+                <InputLabel class="text-capitalize" title="Full Name" required />
+                <v-text-field v-model.trim="visitor.name" density="comfortable" :rules="[requiredRule]" />
               </v-col>
             </v-row>
           </v-col>
@@ -99,44 +54,36 @@
           <v-col v-if="shouldShowField('nric')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel
-                  class="text-capitalize"
-                  title="NRIC"
-                  :required="requireNRIC"
-                />
-                <InputNRICNumber
-                  v-model="visitor.nric"
-                  density="comfortable"
-                  :rules="[requireNRIC ? requiredRule : () => true]"
-                  :key="currentAutofillSource + 'nric-key'"
-                  @update:model-value="handleUpdateNRIC"
-                  :loading="fetchPersonByNRICPending"
-                />
+                <InputLabel class="text-capitalize" title="NRIC" :required="requireNRIC" />
+                <v-menu v-model="nricSearchMenu" location="bottom" offset-y :close-on-content-click="false">
+                  <template #activator="{ props }">
+                    <InputNRICNumber v-bind="props" v-model="visitor.nric" density="comfortable"
+                      :rules="[requireNRIC ? requiredRule : () => true]" :key="currentAutofillSource + 'nric-key'"
+                      @update:model-value="handleUpdateNRIC" :loading="fetchPersonByNRICPending" />
+                  </template>
+
+                  <v-list v-if="nricSearchResults.length">
+                    <v-list-item v-for="(item, index) in nricSearchResults" :key="item._id || index"
+                      @click="selectNricSearchResult(item)" class="cursor-pointer">
+                      <v-list-item-title>{{ item.name || 'Unknown' }}</v-list-item-title>
+                      <v-list-item-subtitle>{{ item.contact }}</v-list-item-subtitle>
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
               </v-col>
             </v-row>
           </v-col>
 
           <v-col v-if="shouldShowField('contact')" cols="12">
             <InputLabel class="text-capitalize" title="Phone Number" required />
-            <InputPhoneNumberV2
-              v-model="visitor.contact"
-              :rules="[requiredRule]"
-              density="comfortable"
-              :key="currentAutofillSource + 'phone-key'"
-              :loading="fetchPersonByContactPending"
-              @update:model-value="handleUpdateContact"
-            />
+            <InputPhoneNumberV2 v-model="visitor.contact" :rules="[requiredRule]" density="comfortable"
+              :key="currentAutofillSource + 'phone-key'" />
           </v-col>
 
           <v-col v-if="shouldShowField('deliveryType')" cols="12">
             <v-row>
               <v-col cols="12">
-                <v-radio-group
-                  v-model="visitor.deliveryType"
-                  inline
-                  color="primary"
-                  :rules="[requiredRule]"
-                >
+                <v-radio-group v-model="visitor.deliveryType" inline color="primary" :rules="[requiredRule]">
                   <v-radio label="Food" value="Food"></v-radio>
                   <v-radio label="Parcel" value="Parcel"></v-radio>
                 </v-radio-group>
@@ -147,44 +94,23 @@
           <template v-if="shouldShowField('company')">
             <v-col cols="12">
               <InputLabel class="text-capitalize" title="Company Name" />
-              <v-combobox
-                v-model="visitor.company"
-                v-model:search="companyNameInput"
-                ref="companyCombo"
-                autocomplete="off"
-                :hide-no-data="false"
-                :items="companyNames"
-                item-value="value"
-                :loading="fetchCompanyListPending"
-                @update:model-value="handleSelectCompanyName"
-                variant="outlined"
-                density="comfortable"
-                persistent-hint
-                small-chips
-              >
+              <v-combobox v-model="visitor.company" v-model:search="companyNameInput" ref="companyCombo"
+                autocomplete="off" :hide-no-data="false" :items="companyNames" item-value="value"
+                :loading="fetchCompanyListPending" @update:model-value="handleSelectCompanyName" variant="outlined"
+                density="comfortable" persistent-hint small-chips>
                 <template v-slot:no-data>
                   <v-list-item>
                     <v-list-item-title v-if="fetchCompanyListPending">
-                      <v-progress-circular
-                        indeterminate
-                        size="20"
-                        class="mr-3"
-                      />
+                      <v-progress-circular indeterminate size="20" class="mr-3" />
                       Searching companies…
                     </v-list-item-title>
-                    <v-list-item-title
-                      v-else-if="companyNameInput"
-                      @click.stop="handleAddNewCompany"
-                      class="d-flex align-center ga-1"
-                    >
+                    <v-list-item-title v-else-if="companyNameInput" @click.stop="handleAddNewCompany"
+                      class="d-flex align-center ga-1">
                       <span><v-icon icon="mdi-plus" /></span>Add "<strong>{{
                         companyNameInput
-                      }}</strong
-                      >" as new company.
+                        }}</strong>" as new company.
                     </v-list-item-title>
-                    <v-list-item-title
-                      v-else-if="!companyNameInput && companyNames.length === 0"
-                    >
+                    <v-list-item-title v-else-if="!companyNameInput && companyNames.length === 0">
                       Start typing to search for companies.
                     </v-list-item-title>
                     <v-list-item-title v-else>
@@ -199,43 +125,22 @@
           <template v-if="shouldShowField('delivery-company')">
             <v-col cols="12">
               <InputLabel class="text-capitalize" title="Delivery Company" />
-              <v-combobox
-                v-model="deliveryCompany"
-                v-model:search="deliveryCompanyInput"
-                ref="companyCombo"
-                autocomplete="off"
-                :hide-no-data="false"
-                :items="deliveryCompanyList"
-                item-value="value"
-                :loading="siteDataPending"
-                variant="outlined"
-                density="comfortable"
-                persistent-hint
-                small-chips
-              >
+              <v-combobox v-model="deliveryCompany" v-model:search="deliveryCompanyInput" ref="companyCombo"
+                autocomplete="off" :hide-no-data="false" :items="deliveryCompanyList" item-value="value"
+                :loading="siteDataPending" variant="outlined" density="comfortable" persistent-hint small-chips>
                 <template v-slot:no-data>
                   <v-list-item>
                     <v-list-item-title v-if="fetchCompanyListPending">
-                      <v-progress-circular
-                        indeterminate
-                        size="20"
-                        class="mr-3"
-                      />
+                      <v-progress-circular indeterminate size="20" class="mr-3" />
                       Searching companies…
                     </v-list-item-title>
-                    <v-list-item-title
-                      v-else-if="companyNameInput"
-                      @click.stop="handleAddNewCompany"
-                      class="d-flex align-center ga-1"
-                    >
+                    <v-list-item-title v-else-if="companyNameInput" @click.stop="handleAddNewCompany"
+                      class="d-flex align-center ga-1">
                       <span><v-icon icon="mdi-plus" /></span>Add "<strong>{{
                         companyNameInput
-                      }}</strong
-                      >" as new company.
+                        }}</strong>" as new company.
                     </v-list-item-title>
-                    <v-list-item-title
-                      v-else-if="!companyNameInput && companyNames.length === 0"
-                    >
+                    <v-list-item-title v-else-if="!companyNameInput && companyNames.length === 0">
                       Start typing to search for companies.
                     </v-list-item-title>
                     <v-list-item-title v-else>
@@ -250,135 +155,61 @@
           <v-col v-if="shouldShowField('plateNumber')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel
-                  class="text-capitalize"
-                  title="Vehicle Number"
-                  required
-                />
+                <InputLabel class="text-capitalize" title="Vehicle Number" required />
                 <!-- <v-text-field v-model.trim.uppercase="visitor.plateNumber" density="comfortable" /> -->
-                <InputVehicleNumber
-                  v-model="visitor.plateNumber"
-                  density="comfortable"
-                />
+                <InputVehicleNumber v-model="visitor.plateNumber" density="comfortable" />
               </v-col>
             </v-row>
           </v-col>
 
           <v-col v-if="shouldShowField('block')" cols="12">
             <InputLabel class="text-capitalize" title="Block" required />
-            <v-autocomplete
-              v-model="visitor.block"
-              :items="blocksArray"
-              item-value="value"
-              autocomplete="off"
-              item-title="title"
-              :key="
-                blockListDataPending ? 'block-list-pending' : 'block-list-ready'
-              "
-              :loading="blockListDataPending"
-              @update:model-value="handleChangeBlock"
-              density="comfortable"
-              :rules="[requiredRule]"
-            />
+            <v-autocomplete v-model="visitor.block" :items="blocksArray" item-value="value" autocomplete="off"
+              item-title="title" :key="blockListDataPending ? 'block-list-pending' : 'block-list-ready'
+                " :loading="blockListDataPending" @update:model-value="handleChangeBlock" density="comfortable"
+              :rules="[requiredRule]" />
           </v-col>
 
           <v-col v-if="shouldShowField('level')" cols="12">
             <InputLabel class="text-capitalize" title="Level" required />
-            <v-autocomplete
-              v-model="visitor.level"
-              :items="levelsArray"
-              density="comfortable"
-              autocomplete="off"
-              :disabled="!visitor.block"
-              :key="
-                levelsDataPending ? 'level-list-pending' : 'level-list-ready'
-              "
-              :loading="levelsDataPending"
-              @update:model-value="handleChangeLevel"
-              :rules="[requiredRule]"
-            />
+            <v-autocomplete v-model="visitor.level" :items="levelsArray" density="comfortable" autocomplete="off"
+              :disabled="!visitor.block" :key="levelsDataPending ? 'level-list-pending' : 'level-list-ready'
+                " :loading="levelsDataPending" @update:model-value="handleChangeLevel" :rules="[requiredRule]" />
           </v-col>
           <v-col v-if="shouldShowField('unit')" cols="12">
             <InputLabel class="text-capitalize" title="Unit" required />
-            <v-autocomplete
-              v-model="visitor.unit"
-              :items="unitsArray"
-              density="comfortable"
-              autocomplete="off"
-              item-title="title"
-              item-value="value"
-              :disabled="!visitor.level"
-              :key="unitsDataPending ? 'unit-list-pending' : 'unit-list-ready'"
-              :loading="unitsDataPending"
-              :rules="[requiredRule]"
-              @update:model-value="handleUpdateUnit"
-            />
+            <v-autocomplete v-model="visitor.unit" :items="unitsArray" density="comfortable" autocomplete="off"
+              item-title="title" item-value="value" :disabled="!visitor.level"
+              :key="unitsDataPending ? 'unit-list-pending' : 'unit-list-ready'" :loading="unitsDataPending"
+              :rules="[requiredRule]" @update:model-value="handleUpdateUnit" />
           </v-col>
 
           <v-col v-if="shouldShowField('unit')" cols="12">
-            <InputLabel
-              class="text-capitalize"
-              title="Registered Unit Company Name"
-              required
-              :key="'unit-key' + visitor.level"
-            />
-            <v-text-field
-              v-model.trim="registeredUnitCompanyName"
-              density="comfortable"
-              :loading="buildingUnitDataPending"
-              readonly
-              class="no-pointer"
-            />
+            <InputLabel class="text-capitalize" title="Registered Unit Company Name" required
+              :key="'unit-key' + visitor.level" />
+            <v-text-field v-model.trim="registeredUnitCompanyName" density="comfortable"
+              :loading="buildingUnitDataPending" readonly class="no-pointer" />
           </v-col>
 
           <v-col v-if="shouldShowField('remarks')" cols="12">
             <InputLabel class="text-capitalize" title="Remarks" />
-            <v-textarea
-              v-model="visitor.remarks"
-              density="comfortable"
-              :rows="3"
-              no-resize
-            />
+            <v-textarea v-model="visitor.remarks" density="comfortable" :rows="3" no-resize />
           </v-col>
 
-          <v-col
-            v-show="(withStep2 || withStep3) && contractorStep === 2"
-            cols="12"
-          >
-            <PassInformation
-              v-model:pass="visitor.visitorPass"
-              v-model:keys="visitor.passKeys"
-              :site="prop.site"
-              :type="prop.type"
-              :contractor-type="visitor.contractorType"
-              :hide-keys="!showShowKeysField"
-              :passKeys="visitor.passKeys"
-              :clearable="true"
-            />
-            <EntryPassInformation
-              v-if="showEntryPassInformation"
-              v-model="passType"
-              v-model:quantity="passQuantity"
-              v-model:cards="passCards"
-              :settings="entryPassSettings"
-              :loading="entryPassSettingsPending || siteDataPending"
-              :site-id="prop.site"
-              :unit-id="visitor.unit || null"
-              :visitor-type="prop.type"
-              :hid-qr-code-enabled="hidQrCodePassAllowed"
-              :hid-qr-printer-configured="hasHidQrPrinterConfig"
-            />
+          <v-col v-show="(withStep2 || withStep3) && contractorStep === 2" cols="12">
+            <PassInformation v-model:pass="visitor.visitorPass" v-model:keys="visitor.passKeys" :site="prop.site"
+              :type="prop.type" :contractor-type="visitor.contractorType" :hide-keys="!showShowKeysField"
+              :passKeys="visitor.passKeys" :clearable="true" />
+            <EntryPassInformation v-if="showEntryPassInformation" v-model="passType" v-model:quantity="passQuantity"
+              v-model:cards="passCards" :settings="entryPassSettings"
+              :loading="entryPassSettingsPending || siteDataPending" :site-id="prop.site"
+              :unit-id="visitor.unit || null" :visitor-type="prop.type" :hid-qr-code-enabled="hidQrCodePassAllowed"
+              :hid-qr-printer-configured="hasHidQrPrinterConfig" />
           </v-col>
 
           <v-col v-show="withStep3 && contractorStep === 3" cols="12">
-            <MemberInformation
-              v-model="visitor.members"
-              :type="prop.type"
-              :contractor-type="visitor.contractorType"
-              :site="prop.site"
-              :selected-visitor-pass="visitor.visitorPass"
-              :clearable="true"
-            />
+            <MemberInformation v-model="visitor.members" :type="prop.type" :contractor-type="visitor.contractorType"
+              :site="prop.site" :selected-visitor-pass="visitor.visitorPass" :clearable="true" />
           </v-col>
 
           <v-col v-if="prop.mode === 'add'" cols="12" class="mt-2">
@@ -402,89 +233,33 @@
     <v-toolbar density="compact">
       <v-row no-gutters>
         <v-col cols="6">
-          <v-btn
-            v-if="
-              prop.mode === 'add' &&
-              (withStep2 || withStep3) &&
-              contractorStep > 1
-            "
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            @click="handleGoToPreviousPage"
-            text="Back"
-          />
-          <v-btn
-            v-else-if="prop.mode === 'add' || prop.mode === 'register'"
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            @click="backToSelection"
-            text="Back to Selection"
-          />
-          <v-btn
-            v-else
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            @click="emit('close:all')"
-            text="Close"
-          />
+          <v-btn v-if="
+            prop.mode === 'add' &&
+            (withStep2 || withStep3) &&
+            contractorStep > 1
+          " tile block variant="text" class="text-none" size="48" @click="handleGoToPreviousPage" text="Back" />
+          <v-btn v-else-if="prop.mode === 'add' || prop.mode === 'register'" tile block variant="text" class="text-none"
+            size="48" @click="backToSelection" text="Back to Selection" />
+          <v-btn v-else tile block variant="text" class="text-none" size="48" @click="emit('close:all')" text="Close" />
         </v-col>
         <v-col cols="6">
-          <v-btn
-            v-if="showNextButton"
-            tile
-            block
-            variant="flat"
-            color="primary-button"
-            class="text-none"
-            size="48"
-            :disabled="processing"
-            @click="handleNextPage"
-            :text="'Next'"
-          />
-          <v-btn
-            v-else
-            tile
-            block
-            variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
-            :disabled="!validForm || processing || membersFieldIncomplete"
-            @click="submit"
-            :text="prop.mode == 'add' ? 'Submit' : 'Update'"
-          />
+          <v-btn v-if="showNextButton" tile block variant="flat" color="primary-button" class="text-none" size="48"
+            :disabled="processing" @click="handleNextPage" :text="'Next'" />
+          <v-btn v-else tile block variant="flat" color="black" class="text-none" size="48"
+            :disabled="!validForm || processing || membersFieldIncomplete" @click="submit"
+            :text="prop.mode == 'add' ? 'Submit' : 'Update'" />
         </v-col>
       </v-row>
     </v-toolbar>
 
-    <v-dialog
-      v-model="dialog.vehicleNumberUsersList"
-      v-if="vehicleNumberUserItems.length > 0"
-      persistent
-      max-width="600"
-    >
-      <SearchVehicleNumberUser
-        :vehicle-number="visitor.plateNumber ?? ''"
-        :vehicle-number-users-list="vehicleNumberUserItems"
-        @close="dialog.vehicleNumberUsersList = false"
-        @update:people="handleAutofillDataViaVehicleNumber"
-      />
+    <v-dialog v-model="dialog.vehicleNumberUsersList" v-if="vehicleNumberUserItems.length > 0" persistent
+      max-width="600">
+      <SearchVehicleNumberUser :vehicle-number="visitor.plateNumber ?? ''"
+        :vehicle-number-users-list="vehicleNumberUserItems" @close="dialog.vehicleNumberUsersList = false"
+        @update:people="handleAutofillDataViaVehicleNumber" />
     </v-dialog>
 
-    <v-dialog
-      v-model="dialog.showNonCheckedOutDialog"
-      max-width="700"
-      persistent
-    >
+    <v-dialog v-model="dialog.showNonCheckedOutDialog" max-width="700" persistent>
       <v-card :loading="loading.checkingOut">
         <v-toolbar>
           <v-toolbar-title>
@@ -498,12 +273,8 @@
 
         <v-card-text>
           <v-list lines="three">
-            <v-list-item
-              v-if="matchingPlateNumberNonCheckedOutArr.length > 0"
-              v-for="v in matchingPlateNumberNonCheckedOutArr"
-              :key="v._id"
-              class="cursor-pointer"
-            >
+            <v-list-item v-if="matchingPlateNumberNonCheckedOutArr.length > 0"
+              v-for="v in matchingPlateNumberNonCheckedOutArr" :key="v._id" class="cursor-pointer">
               <v-list-item-title>
                 {{ v.plateNumber }} - {{ v.name }}
               </v-list-item-title>
@@ -513,16 +284,8 @@
               </v-list-item-subtitle>
 
               <template #append>
-                <v-btn
-                  size="x-small"
-                  class="text-capitalize"
-                  color="red"
-                  text="Checkout"
-                  :loading="
-                    loading.checkingOut && v?._id === prop.visitorData?._id
-                  "
-                  @click.stop="handleCheckout(v._id)"
-                />
+                <v-btn size="x-small" class="text-capitalize" color="red" text="Checkout" :loading="loading.checkingOut && v?._id === prop.visitorData?._id
+                  " @click.stop="handleCheckout(v._id)" />
               </template>
             </v-list-item>
           </v-list>
@@ -536,6 +299,14 @@
 import { propsFactory } from "vuetify/lib/util/propsFactory.mjs";
 import useBuildingUnit from "../composables/useBuildingUnit";
 import useWebUsb from "../composables/useWebUsb";
+import useUtils from "../composables/useUtils";
+import useSiteSettings from "../composables/useSiteSettings";
+import useLocalAuth from "../composables/useLocalAuth";
+import useBuilding from "../composables/useBuilding";
+import useVisitor from "../composables/useVisitor";
+import useSiteEntryPassSettings from "../composables/useSiteEntryPassSettings";
+import useAccessManagement from "../composables/useAccessManagement";
+import usePeople from "../composables/usePeople";
 
 const prop = defineProps({
   type: {
@@ -569,6 +340,7 @@ const currentAutofillSource = ref<AutofillSource>(null);
 
 const { requiredRule, debounce, UTCToLocalTIme } = useUtils();
 const { getSiteById } = useSiteSettings();
+const { currentUser } = useLocalAuth();
 const { getBlocksSelection, getLevelsSelection, getUnitSelection } =
   useBuilding();
 const {
@@ -584,7 +356,7 @@ const { createVisitorPass, signQr } = useAccessManagement();
 const { testConnection } = useWebUsb();
 const {
   findPersonByNRIC,
-  findPersonByContact,
+  findPersonByNRICMultipleResult,
   searchCompanyList,
   findUsersByPlateNumber,
 } = usePeople();
@@ -734,7 +506,7 @@ const hidQrCodePassAllowed = computed(() => {
 const showEntryPassInformation = computed(() => {
   return Boolean(
     entryPassSettings.value?.data?.settings?.nfcPass ||
-      hidQrCodePassAllowed.value
+    hidQrCodePassAllowed.value
   );
 });
 
@@ -748,6 +520,9 @@ const companyAutofillDataArray = ref<
     unitName: string;
   }[]
 >([]);
+const nricSearchMenu = ref(false);
+const nricSearchResults = ref<Partial<TPeople>[]>([]);
+const skipNricFetch = ref(false);
 
 const formTitle = computed(() => {
   const isContractorForm = prop.type === "contractor";
@@ -819,57 +594,50 @@ const {
   pending: fetchPersonByNRICPending,
 } = useLazyAsyncData(`fetch-person`, () => {
   const NRIC = visitor.nric;
-  if (!NRIC) return Promise.resolve(null);
-  return findPersonByNRIC(NRIC);
+  if (!NRIC || NRIC.length < 4) return Promise.resolve(null);
+  return findPersonByNRICMultipleResult(NRIC, prop.site);
 });
 
 watch(fetchPersonByNRICReq, (obj) => {
-  if (obj) {
-    currentAutofillSource.value = "nric";
-    companyNames.value = obj.companyName ?? [];
-    visitor.name = obj.name;
-    visitor.contact = obj.contact;
-    if (!visitor.company) {
-      visitor.company = companyNames.value?.[0];
-    }
-    visitor.block = obj.block ?? "";
-    visitor.level = obj.level ?? "";
-    visitor.unit = obj.unit ?? "";
+  const items = obj?.items ?? [];
+  nricSearchResults.value = Array.isArray(items) ? items : [];
+  nricSearchMenu.value = nricSearchResults.value.length > 0;
+});
 
-    setTimeout(() => {
-      currentAutofillSource.value = null;
-    }, 1000);
+watch(
+  () => visitor.nric,
+  (value) => {
+    if (!value || value.length < 4) {
+      nricSearchMenu.value = false;
+      nricSearchResults.value = [];
+    }
   }
-});
+);
 
-const {
-  data: fetchPersonByContactReq,
-  refresh: fetchPersonByContactRefresh,
-  pending: fetchPersonByContactPending,
-} = useLazyAsyncData(`fetch-contact`, () => {
-  const contact = visitor.contact;
-  if (!contact) return Promise.resolve(null);
-  return findPersonByContact(contact);
-});
+function selectNricSearchResult(item: Partial<TPeople>) {
+  nricSearchMenu.value = false;
+  nricSearchResults.value = [];
+  skipNricFetch.value = true;
 
-watch(fetchPersonByContactReq, (obj: Partial<TPerson>) => {
-  if (obj) {
-    currentAutofillSource.value = "contact";
-    companyNames.value = obj.companyName ?? [];
-    visitor.name = visitor.name ?? obj.name;
-    if (!visitor.company) {
-      visitor.company = companyNames.value?.[0];
-    }
-    // visitor.block = visitor.block ?? obj.block ?? ""
-    // visitor.level = visitor.level ?? obj.level ?? ""
-    // visitor.unit = visitor.unit ?? obj.unit ?? ""
-    visitor.nric = visitor.nric ?? obj.nric ?? "";
-
-    setTimeout(() => {
-      currentAutofillSource.value = null;
-    }, 1000);
+  currentAutofillSource.value = "nric";
+
+  visitor.nric = item.nric || visitor.nric;
+  visitor.name = item.name || visitor.name;
+  visitor.contact = item.contact || visitor.contact;
+  companyNames.value = item.companyName ?? [];
+  if (!visitor.company) {
+    visitor.company = companyNames.value?.[0] || visitor.company;
   }
-});
+  visitor.block = (item.block as any) ?? (visitor.block as any) ?? "";
+  visitor.level = (item.level as any) ?? (visitor.level as any) ?? "";
+  visitor.unit = item.unit ?? visitor.unit ?? "";
+  visitor.unitName = item.unitName ?? visitor.unitName;
+
+  setTimeout(() => {
+    currentAutofillSource.value = null;
+    skipNricFetch.value = false;
+  }, 1000);
+}
 
 const {
   data: fetchCompanyListReq,
@@ -1171,20 +939,14 @@ function handleUpdateUnit(value: any) {
 }
 
 const debounceFetchNRIC = debounce(fetchPersonByNRICRefresh, 500);
-const debounceFetchContact = debounce(fetchPersonByContactRefresh, 500);
 
 function handleUpdateNRIC() {
+  if (skipNricFetch.value) return;
   if (currentAutofillSource.value && currentAutofillSource.value !== "nric")
     return;
   debounceFetchNRIC();
 }
 
-function handleUpdateContact() {
-  if (currentAutofillSource.value && currentAutofillSource.value !== "contact")
-    return;
-  debounceFetchContact();
-}
-
 function backToSelection() {
   emit("back");
   message.value = "";
@@ -1228,6 +990,10 @@ async function handleNextPage() {
     return;
   }
   const step = contractorStep.value;
+  if (step === 2 && passType.value === "NFC" && passCards.value.length === 0) {
+    errorMessage.value = "Please select at least one NFC card before proceeding.";
+    return;
+  }
   if (step < 3) contractorStep.value++;
   else await submit();
 }
@@ -1291,6 +1057,10 @@ async function submit() {
   // add register status when registering unregistered visitor
   if (prop.mode === "register") {
     payload.status = "registered";
+    const currentUserId = currentUser.value?._id;
+    if(currentUserId) {
+      payload.updatedBy = currentUserId;
+    }
   }
 
   try {
@@ -1321,8 +1091,7 @@ async function submit() {
         const visitorId = res as unknown as string;
         const rawUrl = entryPassSettings.value?.data?.settings?.url;
         const { encrypted: acmUrl } = await $fetch<{ encrypted: string }>(
-          `/api/encrypt-acm-url${
-            rawUrl ? `?url=${encodeURIComponent(rawUrl)}` : ""
+          `/api/encrypt-acm-url${rawUrl ? `?url=${encodeURIComponent(rawUrl)}` : ""
           }`
         );
         if (visitorId && acmUrl) {
@@ -1333,7 +1102,15 @@ async function submit() {
             type: passType.value === "QR" ? "QRCODE" : passType.value,
             nfcCards: passCards.value,
             acm_url: acmUrl,
-            visitorId,
+            user: {
+              visitorId,
+              name: visitor.name,
+              nric: visitor.nric,
+              contact: visitor.contact,
+              company: visitor.company,
+              type: visitor.type,
+              plateNumber: visitor.plateNumber,
+            },
           });
 
           if (passType.value === "QR") {
@@ -1431,8 +1208,7 @@ async function submit() {
     const err = error?.data?.message;
     errorMessage.value =
       err ||
-      `Failed to ${
-        prop.mode === "add" ? "add" : "update"
+      `Failed to ${prop.mode === "add" ? "add" : "update"
       } visitor. Please try again.`;
   } finally {
     processing.value = false;