@7365admin1/layer-common 4.97.1-staging.587 → 4.97.1-staging.588

package/components/VisitorForm.vue

@@ -4,30 +4,26 @@
       <v-card-title class="text-capitalize">
         {{ formMode }} {{ formatVisitorType(type) }}
       </v-card-title>
-      <AppButton variant="icon" icon="mdi-close" aria-label="Close" @click="emit('close:all')" />
+      <v-btn icon="mdi-close" variant="text" aria-label="Close" @click="emit('close:all')" />
     </div>
 
+    <!-- One page for every visitor type, only Submit (Update when saving onto
+         an existing record), as the security mobile app (isecure365). -->
     <div class="screen-modal__body visitor-form__body filter-field">
-      <div class="visitor-form__section-row">
-        <span class="visitor-form__section">{{ formTitle }}</span>
-        <span v-if="withStep2 || withStep3" class="visitor-form__step">Step
-          <span class="visitor-form__step-now">{{ contractorStep }}</span>/{{ withStep3 ? 3 : withStep2 ? 2 : 1 }}</span>
-      </div>
       <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''">
         <v-row no-gutters class="pt-4">
-          <v-col v-if="shouldShowField('attachments')" class="w-100">
-            <InputLabel class="text-capitalize" title="Attach Image (Optional)" />
-            <InputFileV2 v-model="visitor.attachments" multiple :max-length="3" />
-          </v-col>
-
           <v-col v-if="shouldShowField('nric')" cols="12">
             <v-row>
               <v-col cols="12">
+                <!-- As the security mobile app: an eye to reveal the NRIC, and
+                     Scan to read the NRIC and name off the card. -->
                 <InputLabel class="text-capitalize" :title="requireNRIC ? 'NRIC (Required)' : 'NRIC (Optional)'" :required="requireNRIC" />
+                <div class="scan-row">
+                  <div class="scan-row__field">
                 <v-menu v-model="nricSearchMenu" location="bottom" offset-y :close-on-content-click="false"
                   content-class="visitor-form__menu">
                   <template #activator="{ props }">
-                    <InputNRICNumber v-bind="props" v-model="visitor.nric" density="comfortable"
+                    <InputNRICNumber v-bind="props" v-model="visitor.nric" density="comfortable" masked
                       @focus="isNricFieldFocused = true" @blur="isNricFieldFocused = false"
                       :rules="[requireNRIC ? requiredRule : () => true]" :key="currentAutofillSource + 'nric-key'"
                       @update:model-value="handleUpdateNRIC" :loading="fetchPersonByNRICPending" />
@@ -38,6 +34,10 @@
                       <v-list-item v-for="(item, index) in nricSearchResults" :key="item._id || index"
                         @click="selectNricSearchResult(item)" class="cursor-pointer nric-search-item">
                         <VisitorSearchResultSummary :item="item" />
+                        <template #append>
+                          <v-btn icon="mdi-delete-outline" variant="text" size="small" color="error"
+                            :aria-label="`Delete ${item.name || ''}`" @click.stop="askDeletePerson(item)" />
+                        </template>
                       </v-list-item>
                     </div>
                     <div class="search-results-close pa-1">
@@ -48,6 +48,14 @@
                     </div>
                   </v-list>
                 </v-menu>
+                  </div>
+                  <v-btn variant="flat" class="text-none screen-btn-primary scan-row__btn"
+                    prepend-icon="mdi-card-account-details-outline" data-test="visitor-nric-scan"
+                    :disabled="processing" @click="nricScanOpen = true">Scan</v-btn>
+                </div>
+                <p v-if="nricScanNotice" class="text-caption text-success mt-1" data-test="visitor-nric-scan-notice">
+                  {{ nricScanNotice }}
+                </p>
                 <p v-if="visitorFieldSwitches.nric === 'last4'" class="text-caption text-medium-emphasis mt-1"
                   data-test="visitor-nric-last4-hint">
                   {{ NRIC_LAST4_HINT }}
@@ -73,6 +81,10 @@
                       <v-list-item v-for="(item, index) in phoneSearchResults" :key="item._id || index"
                         @click="selectPhoneNumberSearchResult(item)" class="cursor-pointer nric-search-item">
                         <VisitorSearchResultSummary :item="item" />
+                        <template #append>
+                          <v-btn icon="mdi-delete-outline" variant="text" size="small" color="error"
+                            :aria-label="`Delete ${item.name || ''}`" @click.stop="askDeletePerson(item)" />
+                        </template>
                       </v-list-item>
                     </div>
                     <div class="search-results-close pa-1">
@@ -107,6 +119,10 @@
                       <v-list-item v-for="(item, index) in vehicleSearchResults" :key="item._id || index"
                         @click="selectPlateNumberSearchResult(item)" class="cursor-pointer nric-search-item">
                         <VisitorSearchResultSummary :item="item" />
+                        <template #append>
+                          <v-btn icon="mdi-delete-outline" variant="text" size="small" color="error"
+                            :aria-label="`Delete ${item.name || ''}`" @click.stop="askDeletePerson(item)" />
+                        </template>
                       </v-list-item>
                     </div>
                     <div class="search-results-close pa-1">
@@ -121,10 +137,19 @@
             </v-row>
           </v-col>
 
+          <v-col v-if="shouldShowField('name')" cols="12">
+            <v-row>
+              <v-col cols="12">
+                <InputLabel class="text-capitalize" title="Name (Required)" required />
+                <v-text-field v-model.trim="visitor.name" density="comfortable" :rules="[requiredRule]" />
+              </v-col>
+            </v-row>
+          </v-col>
+
           <v-col v-if="shouldShowField('contractorType')" cols="12">
             <InputLabel class="text-capitalize" title="Contractor Type (Required)" required />
-            <v-combobox v-model="contractorTypeObj" v-model:search="contractorTypeInput" ref="contractorTypeCombo"
-              autocomplete="off" :hide-no-data="false" @update:focused="handleFocusedContractorType"
+            <v-combobox :model-value="contractorTypeObj" v-model:search="contractorTypeInput" ref="contractorTypeCombo"
+              autocomplete="off" :hide-no-data="false"
               :items="contractorTypeItems" :rules="[requiredRule]" item-value="value"
               @update:model-value="handleSelectContractorType" variant="outlined" density="comfortable" persistent-hint
               small-chips>
@@ -140,39 +165,49 @@
             </v-combobox>
           </v-col>
 
-
-          <v-col v-if="shouldShowField('name')" cols="12">
-            <v-row>
-              <v-col cols="12">
-                <InputLabel class="text-capitalize" title="Full Name (Required)" required />
-                <v-text-field v-model.trim="visitor.name" density="comfortable" :rules="[requiredRule]" />
-              </v-col>
-            </v-row>
-          </v-col>
-
-         
-
-        
-
           <v-col v-if="shouldShowField('deliveryType')" cols="12">
             <v-row>
               <v-col cols="12">
-                <!-- The handoff never draws the delivery type, so this takes the
-                     form's OWN established pattern rather than inventing one: an
-                     `InputLabel` like every other field, and `accent` - the
-                     colour the converted NRIC picker's radios already use - in
-                     place of `primary`, which is the darker link tone. Without
-                     the label this was the only required field in the form with
-                     nothing naming it: just a bare Food/Parcel pair. -->
+                <!-- Saved as `food` / `parcel`, Food by default, as the security
+                     mobile app. -->
                 <InputLabel class="text-capitalize" title="Delivery Type (Required)" required />
                 <v-radio-group v-model="visitor.deliveryType" inline color="accent" :rules="[requiredRule]">
-                  <v-radio label="Food" value="Food"></v-radio>
-                  <v-radio label="Parcel" value="Parcel"></v-radio>
+                  <v-radio label="Food" value="food"></v-radio>
+                  <v-radio label="Parcel" value="parcel"></v-radio>
                 </v-radio-group>
               </v-col>
             </v-row>
           </v-col>
 
+          <v-col v-if="shouldShowField('block')" cols="12">
+            <InputLabel class="text-capitalize" title="Block (Required)" 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-col>
+
+          <v-col v-if="shouldShowField('level')" cols="12">
+            <InputLabel class="text-capitalize" title="Level (Required)" 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-col>
+          <v-col v-if="shouldShowField('unit')" cols="12">
+            <InputLabel class="text-capitalize" title="Unit (Required)" 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-col>
+
+          <v-col v-if="shouldShowField('unit')" cols="12">
+            <InputLabel class="text-capitalize" title="Registered Company Name"
+              :key="'unit-key' + visitor.level" />
+            <v-text-field v-model.trim="registeredUnitCompanyName" density="comfortable"
+              :loading="buildingUnitDataPending" readonly class="no-pointer" />
+          </v-col>
+
           <template v-if="shouldShowField('company')">
             <v-col cols="12">
               <InputLabel class="text-capitalize" :title="requireCompany ? 'Company Name (Required)' : 'Company Name (Optional)'" :required="requireCompany" />
@@ -185,14 +220,31 @@
             </v-col>
           </template>
 
-         
+          <!-- Delivery: pick from the site's delivery company list, or type one
+               that is not listed - it is added to the list once the visitor is
+               saved (isecure365 `delivery-company-field.tsx`). -->
           <template v-if="shouldShowField('delivery-company')">
             <v-col cols="12">
-              <InputLabel class="text-capitalize" title="Delivery Company (Required)" required />
-              <v-combobox v-model="deliveryCompany" v-model:search="deliveryCompanyInput" ref="companyCombo"
-                :rules="[requiredRule]"
-                autocomplete="off" :hide-no-data="false" :items="deliveryCompanyList" item-value="value"
-                :loading="siteDataPending" variant="outlined" density="comfortable" persistent-hint small-chips>
+              <InputLabel class="text-capitalize" title="Company Name (Required)" required />
+              <v-combobox v-model="deliveryCompany" v-model:search="deliveryCompanyInput" ref="deliveryCompanyCombo"
+                :rules="[requiredRule]" :hint="deliveryCompanyHint" persistent-hint
+                autocomplete="off" :hide-no-data="false" :items="deliveryCompanyList"
+                :loading="deliveryCompaniesLoading" variant="outlined" density="comfortable" small-chips
+                @update:focused="handleDeliveryCompanyFocus" @blur="snapDeliveryCompany">
+                <!-- Each listed company with a pencil (rename) and a bin
+                     (remove from the site's list), as the security mobile app. -->
+                <template #item="{ item, props: itemProps }">
+                  <v-list-item v-bind="itemProps" :title="undefined" class="delivery-company__item">
+                    <div class="d-flex align-center ga-2 w-100">
+                      <span class="flex-grow-1 text-truncate">{{ item.title }}</span>
+                      <v-btn icon="mdi-pencil" variant="text" size="small" :disabled="deliveryCompanySaving"
+                        :aria-label="`Edit ${item.title}`" @click.stop="openEditDeliveryCompany(item.title)" />
+                      <v-btn icon="mdi-delete" variant="text" size="small" color="error"
+                        :disabled="deliveryCompanySaving" :aria-label="`Remove ${item.title}`"
+                        @click.stop="deliveryCompanyToDelete = item.title" />
+                    </div>
+                  </v-list-item>
+                </template>
                 <template v-slot:no-data>
                   <v-list-item>
                     <v-list-item-title v-if="deliveryCompanyInput" @click.stop="deliveryCompany = deliveryCompanyInput"
@@ -210,34 +262,50 @@
             </v-col>
           </template>
 
-
-          <v-col v-if="shouldShowField('block')" cols="12">
-            <InputLabel class="text-capitalize" title="Block (Required)" 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-col>
-
-          <v-col v-if="shouldShowField('level')" cols="12">
-            <InputLabel class="text-capitalize" title="Level (Required)" 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-col>
-          <v-col v-if="shouldShowField('unit')" cols="12">
-            <InputLabel class="text-capitalize" title="Unit (Required)" 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-col>
-
-          <v-col v-if="shouldShowField('unit')" cols="12">
-            <InputLabel class="text-capitalize" title="Registered Unit Company Name"
-              :key="'unit-key' + visitor.level" />
-            <v-text-field v-model.trim="registeredUnitCompanyName" density="comfortable"
-              :loading="buildingUnitDataPending" readonly class="no-pointer" />
+          <!-- Photos, as the security mobile app: the photos in a carousel with
+               Edit (draw on the photo) and Delete on each - shown only once
+               there is one - then the picker. Up to 5; uploaded on Submit. -->
+          <v-col v-if="shouldShowField('attachments')" class="w-100" cols="12">
+            <InputLabel class="text-capitalize" title="Photos (Optional)" />
+            <template v-if="deliveryPhotos.length">
+              <v-carousel v-model="deliveryPhotoIndex" height="220" hide-delimiters
+                :show-arrows="deliveryPhotos.length > 1 ? 'hover' : false" class="visitor-form__photos">
+                <v-carousel-item v-for="photo in deliveryPhotos" :key="photo.url">
+                  <v-img :src="photo.url" cover height="100%" />
+                </v-carousel-item>
+              </v-carousel>
+              <!-- Edit / Delete act on the photo shown, under it (not over it). -->
+              <div class="d-flex align-center justify-space-between flex-wrap ga-2 mt-2">
+                <span class="text-caption text-medium-emphasis">
+                  Photo {{ deliveryPhotoIndex + 1 }} of {{ deliveryPhotos.length }}
+                </span>
+                <div class="d-flex ga-2">
+                  <AppButton variant="ghost" icon="mdi-pencil" @click="editDeliveryPhoto">Edit</AppButton>
+                  <AppButton variant="err" icon="mdi-delete-outline" @click="removeDeliveryPhotoAt(deliveryPhotoIndex)">
+                    Delete</AppButton>
+                </div>
+              </div>
+            </template>
+            <div class="d-flex align-center flex-wrap ga-2 mt-2">
+              <v-btn variant="flat" class="text-none screen-btn-primary" prepend-icon="mdi-image-multiple-outline"
+                :disabled="deliveryPhotos.length >= MAX_DELIVERY_PHOTOS" @click="deliveryGalleryInput?.click()">
+                Gallery</v-btn>
+              <v-btn variant="flat" class="text-none screen-btn-primary" prepend-icon="mdi-camera-outline"
+                :disabled="deliveryPhotos.length >= MAX_DELIVERY_PHOTOS" @click="deliveryCamera?.openCameraDialog()">
+                Camera</v-btn>
+              <span class="text-caption text-medium-emphasis">
+                {{ deliveryPhotos.length }} of {{ MAX_DELIVERY_PHOTOS }} photos
+              </span>
+            </div>
+            <input ref="deliveryGalleryInput" type="file" accept="image/*" multiple class="d-none"
+              @change="onDeliveryGalleryPicked" />
+            <!-- Only its camera dialog is used (the Camera button above). -->
+            <div class="d-none">
+              <FileInput ref="deliveryCamera" :init-files="[]" @update:files="addDeliveryPhotos" />
+            </div>
+            <DrawImage v-if="deliveryPhotoEdit.open" :is-show-dialog="deliveryPhotoEdit.open"
+              :image-url="deliveryPhotoEdit.url" :image-idx="deliveryPhotoEdit.idx"
+              @on-submit="onDeliveryPhotoEdited" @on-close-dialog="deliveryPhotoEdit.open = false" />
           </v-col>
 
           <v-col v-if="shouldShowField('remarks')" cols="12">
@@ -245,11 +313,37 @@
             <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"
+          <!-- Pass & Keys under Remarks (Drive-In, Walk-In, Contractor), only
+               with See All Passes And Keys AND Update Passes And Keys, as the
+               security mobile app. Keys are a contractor thing. -->
+          <v-col v-if="showPassSection" cols="12">
+            <InputLabel class="text-capitalize" title="Pass & Keys (Optional)" />
+            <p v-if="passLockedMessage" class="text-caption text-medium-emphasis mb-2"
+              data-test="visitor-pass-locked">
+              {{ passLockedMessage }}
+            </p>
+            <PassInformation v-else :key="passInfoKey" 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"
+              :passKeys="visitor.passKeys" :clearable="true" :exclude-ids="memberPassIds" />
+          </v-col>
+
+          <v-col v-if="prop.type === 'contractor'" cols="12" class="mt-2">
+            <MemberInformation ref="memberInfoRef" :key="membersKey" v-model="visitor.members" :type="prop.type"
+              :contractor-type="visitor.contractorType"
+              :site="prop.site" :selected-visitor-pass="visitor.visitorPass" :clearable="true"
+              :can-assign-pass-keys="prop.canAssignPassKeys" :pass-disabled-message="passLockedMessage"
+              :lead-nric="visitor.nric || ''" :lead-contact="visitor.contact || ''"
+              :check-open-visits="checkMemberOpenVisits"
+              :settings="entryPassSettings" :settings-loading="entryPassSettingsPending || siteDataPending"
+              :unit-id="visitor.unit || null" :show-entry-pass="showEntryPassInformation"
+              :hid-qr-code-enabled="hidQrCodePassAllowed"
+              :hid-qr-printer-configured="hasHidQrPrinterConfig"
+              :hid-reader-name="hidQrReader?.name || ''" :hid-portal-name="hidQrReader?.portalName || ''"
+              :selected-nfc-cards="passType === 'NFC' ? passCards : []" />
+          </v-col>
+
+          <v-col v-if="showEntryPassInformation" cols="12" class="mt-2">
+            <EntryPassInformation 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"
@@ -260,16 +354,6 @@
               @update:available-qr-count="(val) => availableQrCount = val" />
           </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"
-              :settings="entryPassSettings" :settings-loading="entryPassSettingsPending || siteDataPending"
-              :unit-id="visitor.unit || null" :hid-qr-code-enabled="hidQrCodePassAllowed"
-              :hid-qr-printer-configured="hasHidQrPrinterConfig"
-              :hid-reader-name="hidQrReader?.name || ''" :hid-portal-name="hidQrReader?.portalName || ''"
-              :selected-nfc-cards="passType === 'NFC' ? passCards : []" />
-          </v-col>
-
           <v-col v-if="formMode === 'add'" cols="12" class="mt-2">
             <v-checkbox v-model="createMore" density="comfortable" hide-details>
               <template #label>
@@ -288,32 +372,21 @@
     </p>
 
     <div class="visitor-form__footer">
-      <AppButton v-if="formMode === 'add' && (withStep2 || withStep3) && contractorStep > 1" variant="ghost"
-        @click="handleGoToPreviousPage">Back</AppButton>
-      <AppButton v-else-if="formMode === 'add' || formMode === 'register'" variant="ghost" @click="backToSelection">
+      <AppButton v-if="formMode === 'add' || formMode === 'register'" variant="ghost" @click="backToSelection">
         Back to Selection</AppButton>
       <AppButton v-else variant="ghost" @click="emit('close:all')">Close</AppButton>
 
-      <AppButton v-if="showNextButton" :disabled="processing" @click="handleNextPage">Next</AppButton>
-      <AppButton v-else :disabled="!validForm || processing || membersFieldIncomplete" @click="submit">
-        {{ formMode == 'add' ? 'Submit' : 'Update' }}</AppButton>
+      <AppButton data-test="visitor-submit" :disabled="processing" @click="submit()">
+        {{ isSavingOntoRecord ? 'Update' : 'Submit' }}</AppButton>
     </div>
 
-    <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>
+    <NricScanDialog v-model="nricScanOpen" @read="handleNricScanRead" />
 
     <v-dialog v-model="dialog.nricAutofillOptions" max-width="430">
+      <!-- The chooser: no title, Back (to the result list) / Fill In, as the
+           security mobile app. -->
       <v-card v-if="selectedNricSearchResult" class="screen-modal nric-options-card">
-        <div class="visitor-form__head">
-          <v-card-title>Select</v-card-title>
-          <AppButton variant="icon" icon="mdi-close" aria-label="Close" @click="closeNricAutofillOptions" />
-        </div>
-
-        <div class="screen-modal__body nric-options-body">
+        <div class="screen-modal__body nric-options-body pt-4">
           <div class="nric-selected-person d-flex align-center justify-space-between ga-3 mb-5">
             <span>{{ selectedNricSearchResult.name || "Unknown" }}</span>
             <span v-if="!visitor.nric || currentAutofillSource === 'nric'" class="text-no-wrap">NRIC: {{ maskNRIC(selectedNricSearchResult.nric) || "N/A" }}</span>
@@ -327,7 +400,7 @@
             </v-radio-group>
           </template>
 
-          <template v-if="(!visitor.plateNumber || currentAutofillSource === 'vehicleNumber') && selectedNricPlateOptions.length >= 1">
+          <template v-if="prop.type !== 'walk-in' && (!visitor.plateNumber || currentAutofillSource === 'vehicleNumber') && selectedNricPlateOptions.length >= 1">
             <h3 class="nric-options-section-title mb-2 mt-5">Vehicle</h3>
             <v-radio-group v-model="selectedNricPlate" hide-details color="accent" class="nric-option-group">
               <v-radio v-for="plate in selectedNricPlateOptions" :key="plate" :label="plate" :value="plate"
@@ -337,8 +410,8 @@
         </div>
 
         <div class="visitor-form__footer">
-          <AppButton variant="ghost" @click="closeNricAutofillOptions">Cancel</AppButton>
-          <AppButton @click="confirmNricAutofillOptions">Select</AppButton>
+          <AppButton variant="ghost" @click="chooserBack">Back</AppButton>
+          <AppButton @click="confirmNricAutofillOptions">Fill In</AppButton>
         </div>
       </v-card>
     </v-dialog>
@@ -350,18 +423,25 @@
              is not this batch's call. The design's modal frame does draw a
              title, so that gap is raised on the PR as a copy decision. -->
         <div class="visitor-form__head visitor-form__head--bare">
-          <AppButton variant="icon" icon="mdi-close" aria-label="Close"
-            @click="dialog.showNonCheckedOutDialog = false" />
+          <v-btn icon="mdi-close" variant="text" aria-label="Close" @click="dialog.showNonCheckedOutDialog = false" />
         </div>
 
         <div class="screen-modal__body checkout-dialog__body">
           <p class="checkout-dialog__lead">
-            The following list needs to check-out before proceeding to add related to the NRIC/Phone Number below:
+            {{ nonCheckedOutFor.kind === "member"
+              ? "The following list needs to check-out before proceeding to add member related to the NRIC/Phone Number below:"
+              : "The following list needs to check-out before proceeding to add related to the NRIC/Phone Number below:" }}
           </p>
 
           <div class="checkout-dialog__subject">
-            <div v-if="!skipNonCheckedOutNric">NRIC: {{ maskNRIC(visitor.nric) || "N/A" }}</div>
-            <div>Phone Number: {{ visitor.contact || "N/A" }}</div>
+            <template v-if="nonCheckedOutFor.kind === 'member'">
+              <div>NRIC: {{ maskNRIC(nonCheckedOutFor.nric) || "N/A" }}</div>
+              <div>Phone Number: {{ nonCheckedOutFor.contact || "N/A" }}</div>
+            </template>
+            <template v-else>
+              <div>NRIC: {{ (!skipNonCheckedOutNric && maskNRIC(visitor.nric)) || "N/A" }}</div>
+              <div>Phone Number: {{ visitor.contact || "N/A" }}</div>
+            </template>
           </div>
 
           <v-data-table class="table-card" :headers="nonCheckedOutVisitorHeaders"
@@ -424,10 +504,10 @@
           </v-data-table>
         </div>
 
-        <div class="visitor-form__footer" v-if="!skipNonCheckedOutNric">
+        <div class="visitor-form__footer" v-if="nonCheckedOutFor.kind === 'member' ? !!nonCheckedOutFor.nric : (!skipNonCheckedOutNric && !!visitor.nric)">
           <v-btn class="screen-btn-primary" variant="flat" :loading="loading.searchingNonCheckedOut"
-            @click="handleSkipNricNonCheckedOut">
-            Skip NRIC: {{ maskNRIC(visitor.nric) || "N/A" }}
+            @click="nonCheckedOutFor.kind === 'member' ? handleSkipMemberNric() : handleSkipNricNonCheckedOut()">
+            {{ nonCheckedOutFor.kind === "member" ? "SKIP NRIC" : "Skip NRIC" }}: {{ maskNRIC(nonCheckedOutFor.kind === "member" ? nonCheckedOutFor.nric : visitor.nric) || "N/A" }}
           </v-btn>
         </div>
       </v-card>
@@ -437,7 +517,7 @@
       <v-card>
         <v-toolbar density="compact" color="">
           <v-row no-gutters class="d-flex fill-height justify-space-between align-center px-4">
-            <span class="font-weight-bold">Return NFC Card</span>
+            <span class="font-weight-bold">Return NFC Card(s)</span>
             <v-btn icon="mdi-close" variant="text" @click="dialog.returnNfcCard = false" />
           </v-row>
         </v-toolbar>
@@ -456,8 +536,8 @@
           </div>
           <div v-for="(card, idx) in nfcCardReturnStatuses" :key="card.cardId" class="mb-4">
             <div class="d-flex align-center ga-2 mb-2">
-              <v-icon size="18" icon="mdi-credit-card-outline" color="purple" />
-              <v-chip size="small" variant="tonal" color="purple">{{ card.cardNo }}</v-chip>
+              <v-chip prepend-icon="mdi-credit-card-outline" variant="outlined"
+                class="font-weight-bold visitor-pass-chip visitor-pass-chip--field visitor-pass-chip--nfc">{{ card.cardNo }}</v-chip>
             </div>
             <v-select v-model="nfcCardReturnStatuses[idx].status" :items="nfcPassStatusOptions" item-title="label"
               item-value="value" density="comfortable" hide-details />
@@ -473,18 +553,157 @@
             </v-col>
             <v-col cols="6">
               <v-btn color="red" variant="flat" height="48" rounded="0" block :loading="loading.checkingOut"
-                :disabled="!canConfirmNfcReturnCheckout" @click="handleNfcReturnCheckout">Confirm Checkout</v-btn>
+                :disabled="!canConfirmNfcReturnCheckout" @click="handleNfcReturnCheckout">Confirm &amp; Check Out</v-btn>
+            </v-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
+
+    <!-- A still-inside visitor holding a pass or key: what came back is
+         recorded before the check-out (isecure365 pass-key-return-dialog). -->
+    <v-dialog v-model="dialog.returnPassKeys" max-width="450" persistent>
+      <v-card>
+        <v-toolbar density="compact" color="">
+          <v-row no-gutters class="d-flex fill-height justify-space-between align-center px-4">
+            <span class="font-weight-bold">Update Pass or Key(s)</span>
+            <v-btn icon="mdi-close" variant="text" @click="dialog.returnPassKeys = false" />
+          </v-row>
+        </v-toolbar>
+        <v-card-text class="px-4 pb-2">
+          <div class="visitor-return__who">
+            <div class="visitor-return__who-line font-weight-bold">
+              <v-icon icon="mdi-account-outline" size="18" />
+              {{ passReturnVisitor?.name || "N/A" }}
+            </div>
+            <div class="visitor-return__who-line">
+              <v-icon icon="mdi-storefront-outline" size="18" />
+              {{ passReturnVisitor ? formatVisitorLocation(passReturnVisitor as TVisitor) : "N/A" }}
+            </div>
+          </div>
+
+          <v-btn block variant="flat" class="text-capitalize mb-3 screen-btn-primary" prepend-icon="mdi-qrcode-scan"
+            @click="passReturnScan.open = true">
+            Scan QR Code
+          </v-btn>
+
+          <div v-for="section in passReturnSections" :key="section.title" class="mb-2">
+            <template v-if="section.show">
+              <p class="visitor-return__label">{{ section.title }} ({{ section.items.length }})</p>
+              <p v-if="section.items.length === 0" class="text-body-2 mb-2">{{ section.empty }}</p>
+              <v-row v-for="entry in section.items" :key="entry.keyId" no-gutters
+                class="d-flex flex-wrap justify-space-between align-center ga-5 mb-2">
+                <v-chip :prepend-icon="section.icon" variant="outlined"
+                  :class="['font-weight-bold', 'visitor-pass-chip', 'visitor-pass-chip--field', section.color === 'blue' ? 'visitor-pass-chip--pass' : 'visitor-pass-chip--key']">
+                  {{ entry.prefixAndName || passKeyNames[entry.keyId] || section.fallback }}
+                </v-chip>
+                <v-select v-model="entry.status" hide-details max-width="200px" density="compact"
+                  :items="entry.locked ? ['Removed'] : PASS_RETURN_STATUSES" :disabled="entry.locked" />
+                <v-textarea v-if="entry.status === 'Damaged' || entry.status === 'Lost'" v-model="entry.remarks"
+                  no-resize rows="3" class="w-100" density="compact" label="Remarks" placeholder="Enter remarks" />
+              </v-row>
+            </template>
+          </div>
+
+          <p v-if="passReturnError" class="text-error text-body-2 mb-2">{{ passReturnError }}</p>
+        </v-card-text>
+        <v-toolbar class="pa-0" density="compact">
+          <v-row no-gutters>
+            <v-col cols="6">
+              <v-btn color="blue" variant="flat" height="48" rounded="0" block :loading="loading.updatingPassKeys"
+                :disabled="!passReturnChanged || loading.checkingOut" @click="handlePassKeyReturnUpdate">
+                Update
+              </v-btn>
+            </v-col>
+            <v-col cols="6">
+              <v-btn color="red" variant="flat" height="48" rounded="0" block :loading="loading.checkingOut"
+                :disabled="!canCheckOutAfterReturn || loading.updatingPassKeys" @click="handlePassKeyReturnCheckout">
+                Check Out
+              </v-btn>
             </v-col>
           </v-row>
         </v-toolbar>
       </v-card>
     </v-dialog>
 
+    <VisitorPassKeyQRScanner v-if="passReturnScan.open" :dialog="passReturnScan.open"
+      v-model:scanned-value="passReturnScan.value" @close-dialog="passReturnScan.open = false" />
+
+    <v-dialog v-model="dialog.deletePerson" max-width="430">
+      <v-card class="screen-modal">
+        <div class="visitor-form__head">
+          <v-card-title>{{ DELETE_PERSON_TITLE }}</v-card-title>
+        </div>
+        <div class="screen-modal__body visitor-form__dialog-body">
+          <p class="text-body-2">{{ deletePersonMessage(personToDelete?.name || "This person") }}</p>
+        </div>
+        <div class="visitor-form__footer">
+          <AppButton variant="ghost" @click="dialog.deletePerson = false">Cancel</AppButton>
+          <AppButton variant="err" icon="mdi-delete-outline" :disabled="deletingPerson"
+            @click="deletePersonConfirmed">Delete</AppButton>
+        </div>
+      </v-card>
+    </v-dialog>
+
+    <!-- Changing Contractor Type when the passes picked take another pass type. -->
+    <v-dialog v-model="dialog.changeContractorType" max-width="430">
+      <v-card class="screen-modal">
+        <div class="visitor-form__head">
+          <v-card-title>Change Contractor Type?</v-card-title>
+        </div>
+        <div class="screen-modal__body visitor-form__dialog-body">
+          <p class="text-body-2">{{ contractorTypeChangeMessage }}</p>
+        </div>
+        <div class="visitor-form__footer">
+          <AppButton variant="ghost" @click="cancelContractorTypeChange">Cancel</AppButton>
+          <AppButton @click="confirmContractorTypeChange">Change</AppButton>
+        </div>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog :model-value="!!deliveryCompanyEdit" max-width="430" persistent>
+      <v-card class="screen-modal">
+        <div class="visitor-form__head">
+          <v-card-title>Edit Company</v-card-title>
+          <v-btn icon="mdi-close" variant="text" aria-label="Close" @click="deliveryCompanyEdit = null" />
+        </div>
+        <div class="screen-modal__body visitor-form__dialog-body filter-field">
+          <InputLabel class="text-capitalize" title="Company Name" />
+          <v-text-field v-if="deliveryCompanyEdit" v-model="deliveryCompanyEdit.value" density="comfortable"
+            :error-messages="deliveryCompanyEdit.error ? [deliveryCompanyEdit.error] : []" autofocus
+            @update:model-value="deliveryCompanyEdit && (deliveryCompanyEdit.error = '')"
+            @keyup.enter="saveEditDeliveryCompany" />
+        </div>
+        <div class="visitor-form__footer">
+          <AppButton variant="ghost" @click="deliveryCompanyEdit = null">Cancel</AppButton>
+          <AppButton :disabled="deliveryCompanySaving" @click="saveEditDeliveryCompany">Save</AppButton>
+        </div>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog :model-value="!!deliveryCompanyToDelete" max-width="430" persistent>
+      <v-card class="screen-modal">
+        <div class="visitor-form__head">
+          <v-card-title>Delete Company</v-card-title>
+        </div>
+        <div class="screen-modal__body visitor-form__dialog-body">
+          <p class="text-body-2">Remove "{{ deliveryCompanyToDelete }}" from the delivery company list?</p>
+        </div>
+        <div class="visitor-form__footer">
+          <AppButton variant="ghost" @click="deliveryCompanyToDelete = null">Cancel</AppButton>
+          <AppButton variant="err" icon="mdi-delete-outline" :disabled="deliveryCompanySaving"
+            @click="confirmDeleteDeliveryCompany">Delete</AppButton>
+        </div>
+      </v-card>
+    </v-dialog>
+
+    <Snackbar v-model="snackbar.show" :text="snackbar.text" :color="snackbar.color" />
+
     <v-dialog v-if="enableUnregistered" v-model="dialog.showUnregisteredPlateDialog" max-width="900" persistent>
       <v-card class="screen-modal">
         <!-- No heading in the product; see the note on the check-out dialog. -->
         <div class="visitor-form__head visitor-form__head--bare">
-          <AppButton variant="icon" icon="mdi-close" aria-label="Close" @click="closeUnregisteredPlateDialog" />
+          <v-btn icon="mdi-close" variant="text" aria-label="Close" @click="closeUnregisteredPlateDialog" />
         </div>
 
         <div class="screen-modal__body unreg-dialog__body">
@@ -523,7 +742,7 @@
         </div>
 
         <div class="visitor-form__footer">
-          <AppButton variant="ghost" @click="closeUnregisteredPlateDialog">Cancel &amp; Add New</AppButton>
+          <AppButton variant="ghost" @click="cancelUnregisteredAndAddNew">Cancel &amp; Add New</AppButton>
         </div>
       </v-card>
     </v-dialog>
@@ -532,7 +751,7 @@
       <v-card class="screen-modal hid-qr-preview-card">
         <div class="visitor-form__head">
           <v-card-title>Visitor QR Code</v-card-title>
-          <AppButton variant="icon" icon="mdi-close" aria-label="Close" @click="closeHidQrPreview" />
+          <v-btn icon="mdi-close" variant="text" aria-label="Close" @click="closeHidQrPreview" />
         </div>
 
         <div class="screen-modal__body hid-qr__body">
@@ -624,6 +843,29 @@ import useAccessManagement from "../composables/useAccessManagement";
 import usePeople from "../composables/usePeople";
 import useHidAmico from "../composables/useHidAmico";
 import { hidQrUsageFromSettings, minutesUntilEndOfDay } from "../utils/hid-qr-validity";
+import useFile from "../composables/useFile";
+import usePassKey from "../composables/usePassKey";
+import VisitorPassKeyQRScanner from "./VisitorPassKeyQRScanner.vue";
+import {
+  DELETE_PERSON_TITLE,
+  PERSON_DELETED_MESSAGE,
+  companiesForType,
+  deletePersonMessage,
+  isListedCompany,
+  listedName,
+  normalizeCompany,
+  personKey,
+  recordIdsOf,
+  refusedPassKeyName,
+  renameProblem,
+  renamedCompany,
+  sameCompany,
+  summaryContacts,
+  summaryPlates,
+  withCompany,
+  withoutCompany,
+  type VisitorPerson,
+} from "../utils/visitor-people";
 
 const prop = defineProps({
   type: {
@@ -653,14 +895,24 @@ const prop = defineProps({
   enableUnregistered: {
     type: Boolean,
     default: false,
-  }
+  },
+  /**
+   * Passes And Keys Management > See All Passes And Keys AND Update Passes And
+   * Keys: either one unticked hides every pass / key picker on the form (the
+   * visitor's and each member's), as the security mobile app.
+   */
+  canAssignPassKeys: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 type AutofillSource = "nric" | "contact" | "vehicleNumber" | null;
 const currentAutofillSource = ref<AutofillSource>(null);
 
-const { requiredRule, debounce, UTCToLocalTIme, maskNRIC } = useUtils();
-const { getSiteById, getOvernightParkingAvailabilityV2 } = useSiteSettings();
+const { requiredRule, debounce, UTCToLocalTIme, maskNRIC, getImage } = useUtils();
+const { addFile } = useFile();
+const { getSiteById, getOvernightParkingAvailabilityV2, updateSitebyId } = useSiteSettings();
 const { currentUser } = useLocalAuth();
 const { getBlocksSelection, getLevelsSelection, getUnitSelection } =
   useBuilding();
@@ -677,12 +929,8 @@ const { getBySiteId: getEntryPassSettingsBySiteId } =
 const { createVisitorPass, signQr, visitorCheckout } = useAccessManagement();
 const { getEnrollmentReaders, issueVisitorQr } = useHidAmico();
 const { testConnection } = useWebUsb();
-const {
-  findPersonByNRIC,
-  findPersonByNRICMultipleResult,
-  findPersonByPhoneNumberMultipleResult,
-  findPersonByPlateNumberMultipleResult,
-} = usePeople();
+const { findVisitorPeopleAnyType, deletePersonRecords } = usePeople();
+const { getPassKeysByPageSearch } = usePassKey();
 const { getById: getUnitDataById } = useBuildingUnit();
 
 const emit = defineEmits([
@@ -760,14 +1008,25 @@ const registeredUnitCompanyName = ref("N/A");
 
 const dialog = reactive({
   nricAutofillOptions: false,
-  vehicleNumberUsersList: false,
   showNonCheckedOutDialog: false,
   showUnregisteredPlateDialog: false,
   returnNfcCard: false,
+  returnPassKeys: false,
+  deletePerson: false,
+  changeContractorType: false,
 });
 
+// Success / info messages (errors stay in the line above the footer).
+const snackbar = reactive({ show: false, text: "", color: "success" });
+function showSnackbar(text: string, color = "success") {
+  snackbar.text = text;
+  snackbar.color = color;
+  snackbar.show = true;
+}
+
 const loading = reactive({
   checkingOut: false,
+  updatingPassKeys: false,
   checkingUnregisteredPlate: false,
   searchingNonCheckedOut: false,
 });
@@ -781,7 +1040,6 @@ const createMore = ref(false);
 
 const contractorTypeInput = ref("");
 const contractorTypeObj = ref<TDefaultOptionObj | null>(null);
-const contractorStep = ref(1);
 
 const companyNameInput = ref("");
 const companyNameObj = ref<string | null>(null);
@@ -801,11 +1059,12 @@ const skipNonCheckedOutNric = ref(false);
 const nfcCardReturnStatuses = ref<
   { cardId: string; cardNo: string; status: string; remarks: string }[]
 >([]);
+// The card statuses as stored (isecure365 card-return-dialog).
 const nfcPassStatusOptions = [
+  { label: "In Use", value: "In Use" },
   { label: "Returned", value: "Returned" },
-  { label: "Not Returned", value: "In Use" },
-  { label: "Damaged", value: "Damage" },
   { label: "Lost", value: "Lost" },
+  { label: "Damage", value: "Damage" },
 ];
 const selectedCheckoutVisitor = computed(() =>
   (matchingNonCheckedOutVisitors.value as any[]).find(
@@ -832,9 +1091,10 @@ const unregisteredPlateMatches = ref<TVisitor[]>([]);
 const unregisteredPlateSearchText = ref("");
 const selectedUnregisteredVisitor = ref<TVisitor | null>(null);
 const skipUnregisteredPlateCheck = ref(false);
-const pendingUnregisteredAction = ref<"next" | "submit" | null>(null);
-
-const vehicleNumberUserItems = ref<TPeople[]>([]);
+const pendingUnregisteredAction = ref<"submit" | null>(null);
+// The plate "Cancel & Add New" was pressed for: not checked against the
+// Unregistered list again (a changed plate is).
+const unregisteredSkippedPlate = ref("");
 
 const formMode = computed<"add" | "edit" | "register">(() => {
   return selectedUnregisteredVisitor.value ? "register" : prop.mode;
@@ -868,36 +1128,35 @@ const isFormField = (
 
 const shouldShowField = (
   fieldKey: keyof TVisitorPayload | "delivery-company"
-) => {
-  if ((!withStep2.value && !withStep3.value) || contractorStep.value === 1) {
-    return isFormField(fieldKey);
-  }
-};
+) => isFormField(fieldKey);
 
-const withStep2 = computed(() => {
-  const step2Types = ["guest", "walk-in"];
-  return step2Types.includes(prop.type);
-});
+// Saving onto an existing record (registering a camera record, or editing).
+const isSavingOntoRecord = computed(
+  () => formMode.value === "register" || prop.mode === "edit"
+);
 
-const withStep3 = computed(() => {
-  const step3Types = ["contractor"];
-  return step3Types.includes(prop.type);
-});
+// Pass & Keys: Drive-In, Walk-In and Contractor, with both pass & key rights.
+const showPassSection = computed(
+  () =>
+    prop.canAssignPassKeys &&
+    ["guest", "walk-in", "contractor"].includes(prop.type)
+);
 
-const showNextButton = computed(() => {
-  if (withStep3.value) {
-    return contractorStep.value === 1 || contractorStep.value === 2;
-  } else if (withStep2.value) {
-    return contractorStep.value === 1;
-  } else return false;
-});
+// A contractor's pass type depends on the Contractor Type.
+const passLockedMessage = computed(() =>
+  prop.type === "contractor" && !visitor.contractorType
+    ? "Please select the Contractor Type first. The pass allowed depends on it."
+    : ""
+);
 
 const enableUnregistered = computed(() => {
   return prop.mode === "add" && prop.enableUnregistered
 });
 
+// Keys are a contractor thing: the security mobile app (isecure365) offers no
+// keys to a Drive-In / Walk-In and saves them with \`passKeys: []\`.
 const showShowKeysField = computed(() => {
-  return ["guest", "contractor", "walk-in"].includes(prop.type);
+  return prop.type === "contractor";
 });
 
 // Required / optional per type - kept in line with the security mobile app.
@@ -988,76 +1247,107 @@ const hidQrUsage = ref<"wholeDay" | "singleUse" | null>(null);
 
 const showEntryPassInformation = computed(() => {
   return Boolean(
-    entryPassSettings.value?.data?.settings?.nfcPass ||
+    (prop.type === "contractor" && entryPassSettings.value?.data?.settings?.nfcPass) ||
     hidQrCodePassAllowed.value
   );
 });
 
 const companyNames = ref<string[]>([]);
 const nricSearchMenu = ref(false);
-const nricSearchResults = ref<Partial<TPeople>[]>([]);
+const nricSearchResults = ref<VisitorPerson[]>([]);
 const skipNricFetch = ref(false);
 const phoneSearchMenu = ref(false);
-const phoneSearchResults = ref<Partial<TPeople>[]>([]);
+const phoneSearchResults = ref<VisitorPerson[]>([]);
 const vehicleSearchMenu = ref(false);
-const vehicleSearchResults = ref<Partial<TPeople>[]>([]);
-const selectedNricSearchResult = ref<Partial<TPeople> | null>(null);
+const vehicleSearchResults = ref<VisitorPerson[]>([]);
+const selectedNricSearchResult = ref<VisitorPerson | null>(null);
+// The list Back on the chooser returns to.
+const chooserResults = ref<VisitorPerson[]>([]);
 const selectedNricContact = ref("");
 const selectedNricPlate = ref("");
 
-type SearchPerson = Omit<Partial<TPeople>, "contact"> & {
-  contact?: string | string[];
-  contacts?: string | string[];
-  plateNumbers?: string | string[];
-  plateNumber?: string | string[];
-  plates?: { plateNumber?: string }[];
-};
-
-function getPeopleSearchItems(res: any): Partial<TPeople>[] {
-  if (Array.isArray(res?.items)) return res.items;
-  if (Array.isArray(res?.data)) return res.data;
-  if (Array.isArray(res?.data?.items)) return res.data.items;
-  if (res?.data) return [res.data];
-  if (res && !res?.message) return [res];
-  return [];
+function contractorPassTypeOf(contractorType?: string) {
+  return contractorType === "property-agent" ? "agent-pass" : "contractor-pass";
 }
 
-const formTitle = computed(() => {
-  const isContractorForm = prop.type === "contractor";
-  const isDriveInForm = prop.type === "guest";
-  const isWalkInForm = prop.type === "walk-in";
-  const step = contractorStep.value;
-  if ((isContractorForm || isDriveInForm || isWalkInForm) && step === 2) {
-    return "Pass & Keys Information";
-  } else if (isContractorForm && step === 3) {
-    return "Members Information";
-  } else return "General Information";
+const PASS_TYPE_LABELS: Record<string, string> = {
+  "contractor-pass": "Contractor Pass",
+  "agent-pass": "Agent Pass",
+};
+
+const pendingContractorType = ref<{ title: string; value: string } | null>(null);
+const contractorTypeChangeMessage = computed(() => {
+  const next = pendingContractorType.value;
+  if (!next) return "";
+  const allowed = PASS_TYPE_LABELS[contractorPassTypeOf(next.value)] ?? "";
+  return `${next.title} takes ${/^[AEIOU]/i.test(allowed) ? "an" : "a"} ${allowed}. The pass(es) already selected are not compatible and will be cleared.`;
 });
 
-function handleSelectContractorType(obj: { title: string; value: string }) {
-  visitor.contractorType = obj.value ?? "";
+function applyContractorType(obj: { title: string; value: string } | null) {
+  contractorTypeObj.value = obj as TDefaultOptionObj | null;
+  visitor.contractorType = obj?.value ?? "";
   // Managing agent staff (site switch): fill in the MA's company if empty.
   if (obj?.value === MA_STAFF_CONTRACTOR_TYPE && !visitor.company) {
     visitor.company = maStaffRegistration.value.company;
   }
 }
 
-function handleFocusedContractorType() {
-  // const obj = contractorTypeObj.value;
-  // const matched = contractorTypes.some(
-  //   (x) => x.value === obj?.value && x.title === obj?.title
-  // );
-  // if (!matched) {
-  //   contractorTypeObj.value = null;
-  //   contractorTypeInput.value = ""
-  //   visitor.contractorType = "";
-  // }
+/**
+ * isecure365: a new Contractor Type that takes a different pass type makes the
+ * passes picked so far (the contractor's and each member's) unusable - asked
+ * first, then cleared. Same pass type: nothing to clear.
+ */
+function handleSelectContractorType(obj: { title: string; value: string } | string | null) {
+  const next =
+    typeof obj === "string" ? { title: obj, value: obj } : obj ?? null;
+  const value = next?.value ?? "";
+  if (value === visitor.contractorType) {
+    contractorTypeObj.value = next as TDefaultOptionObj | null;
+    return;
+  }
+  const chosen = [
+    ...(visitor.visitorPass ?? []).map((p) => p.keyId),
+    ...(memberInfoRef.value?.pickedPassIds?.() ?? []),
+  ].filter(Boolean);
+  const incompatible =
+    chosen.length > 0 &&
+    Boolean(visitor.contractorType) &&
+    Boolean(value) &&
+    contractorPassTypeOf(visitor.contractorType) !== contractorPassTypeOf(value);
+  if (!incompatible) {
+    applyContractorType(next);
+    return;
+  }
+  pendingContractorType.value = next;
+  dialog.changeContractorType = true;
+}
+
+function cancelContractorTypeChange() {
+  pendingContractorType.value = null;
+  dialog.changeContractorType = false;
+  // The picker shows the type kept.
+  const kept = contractorTypeItems.value.find((t) => t.value === visitor.contractorType);
+  contractorTypeObj.value = (kept ?? (visitor.contractorType
+    ? { title: visitor.contractorType, value: visitor.contractorType }
+    : null)) as TDefaultOptionObj | null;
+}
+
+function confirmContractorTypeChange() {
+  const next = pendingContractorType.value;
+  pendingContractorType.value = null;
+  dialog.changeContractorType = false;
+  visitor.visitorPass = [];
+  passInfoKey.value++;
+  memberInfoRef.value?.clearPasses?.();
+  applyContractorType(next);
 }
 
 const contractorTypeCombo = ref(null);
+const memberInfoRef = ref<any>(null);
+const membersKey = ref(0);
 
 async function handleAddNewContractorType() {
-  visitor.contractorType = contractorTypeInput.value;
+  handleSelectContractorType({ title: contractorTypeInput.value, value: contractorTypeInput.value });
 
   const combo = contractorTypeCombo.value as any;
   await nextTick();
@@ -1072,45 +1362,126 @@ async function handleSelectCompanyName(company: string) {
 
 const companyCombo = ref(null);
 
-const {
-  data: fetchPersonByNRICReq,
-  refresh: fetchPersonByNRICRefresh,
-  pending: fetchPersonByNRICPending,
-} = useLazyAsyncData(`fetch-person`, () => {
-  const NRIC = visitor.nric;
-  if (!NRIC || NRIC.length < 1) return Promise.resolve(null);
-
-  const type = prop.type === 'walk-in' ? 'guest' : prop.type
-  return findPersonByNRICMultipleResult(NRIC, prop.site, type);
+/*
+ * People lookup and autofill, as the security mobile app (isecure365 `add.tsx`
+ * lookup / choosePerson / applyPerson):
+ *  - typing 4 characters or more of the NRIC, phone (with its country code) or
+ *    plate looks the person up, 500 ms after the last keystroke, across EVERY
+ *    visitor type (the type being registered first); not for pick-up /
+ *    drop-off, which carry no person;
+ *  - exactly one person is filled in straight away (or, with several phone
+ *    numbers / plates, the chooser opens) - not again for the person that
+ *    field already filled;
+ *  - on a form opened with a value (registering a camera record), one person
+ *    with nothing to choose only fills the EMPTY fields;
+ *  - block / level / unit are never filled.
+ */
+type LookupField = Exclude<AutofillSource, null>;
+const lookupPending = reactive<Record<LookupField, boolean>>({
+  nric: false,
+  contact: false,
+  vehicleNumber: false,
 });
+const fetchPersonByNRICPending = computed(() => lookupPending.nric);
+const autoFilled: Partial<Record<LookupField, string>> = {};
+const lookupSearched: Partial<Record<LookupField, string>> = {};
+const lookupTimers: Partial<Record<LookupField, ReturnType<typeof setTimeout>>> = {};
+
+function lookupTerm(by: LookupField) {
+  if (by === "nric") return visitor.nric?.trim() || "";
+  if (by === "contact") return visitor.contact?.trim() || "";
+  return visitor.plateNumber?.trim()?.toUpperCase() || "";
+}
+
+function setLookupResults(by: LookupField, results: VisitorPerson[]) {
+  if (by === "nric") {
+    nricSearchResults.value = results;
+    nricSearchMenu.value = results.length > 0;
+  } else if (by === "contact") {
+    phoneSearchResults.value = results;
+    phoneSearchMenu.value = results.length > 0;
+  } else {
+    vehicleSearchResults.value = results;
+    vehicleSearchMenu.value = results.length > 0;
+  }
+}
 
-watch(fetchPersonByNRICReq, (obj) => {
-  nricSearchResults.value = getPeopleSearchItems(obj);
-  nricSearchMenu.value = nricSearchResults.value.length > 0;
-
-  // Mock data for testing NRIC autofill options.
-  // Uncomment this block and type at least 4 characters in NRIC to test
-  // both the multi-option dialog and immediate single-option autofill.
-  // nricSearchResults.value = [
-  //   {
-  //     _id: "mock-person-multiple-options",
-  //     name: "James Smith",
-  //     nric: "1323232499",
-  //     contacts: ["653939394", "81234567"],
-  //     plateNumbers: ["34566", "SMA1234A"],
-  //     companyName: ["Mock Company Pte Ltd"],
-  //   } as Partial<SearchPerson>,
-  //   {
-  //     _id: "mock-person-single-option",
-  //     name: "Jane Tan",
-  //     nric: "S1234567A",
-  //     contacts: ["91234567"],
-  //     plateNumbers: ["SGB5678B"],
-  //     companyName: ["Single Option Company"],
-  //   } as Partial<SearchPerson>,
-  // ];
-  // nricSearchMenu.value = true;
-});
+function personLookupAllowed() {
+  return prop.type !== "pick-up" && prop.type !== "drop-off";
+}
+
+function scheduleLookup(by: LookupField) {
+  clearTimeout(lookupTimers[by]);
+  if (lookupTerm(by).length < 4) {
+    setLookupResults(by, []);
+    delete autoFilled[by];
+    return;
+  }
+  if (!personLookupAllowed()) return;
+  lookupTimers[by] = setTimeout(() => void lookup(by), 500);
+}
+
+/** No choice to make: at most one phone number and one plate (where the form has them). */
+function fillsWithoutChoice(person: VisitorPerson) {
+  const contactCount = isFormField("contact") ? summaryContacts(person).length : 0;
+  const plateCount =
+    isFormField("plateNumber") && prop.type !== "walk-in" ? summaryPlates(person).length : 0;
+  return contactCount <= 1 && plateCount <= 1;
+}
+
+async function lookup(by: LookupField, opts: { prefilled?: boolean } = {}): Promise<boolean> {
+  if (!personLookupAllowed()) return false;
+  const term = lookupTerm(by);
+  if (term.length < 4) {
+    delete autoFilled[by];
+    return false;
+  }
+  lookupSearched[by] = term;
+  try {
+    lookupPending[by] = true;
+    const results = await findVisitorPeopleAnyType(
+      by === "vehicleNumber" ? "plateNumber" : by,
+      term,
+      prop.site,
+      prop.type
+    );
+    // The field changed while this was searching.
+    if (lookupTerm(by) !== lookupSearched[by]) return false;
+    if (!results.length) {
+      setLookupResults(by, []);
+      return false;
+    }
+    const only = results.length === 1 ? results[0] : null;
+    const onlyKey = only ? personKey(only) : "";
+    if (only && autoFilled[by] !== onlyKey) {
+      if (!opts.prefilled) {
+        autoFilled[by] = onlyKey;
+        selectAutofillSearchResult(only, by, [only]);
+        return true;
+      }
+      if (fillsWithoutChoice(only)) {
+        autoFilled[by] = onlyKey;
+        const plates = summaryPlates(only);
+        applyNricSearchResult(only, {
+          contacts: summaryContacts(only)[0] ?? "",
+          plateNumber: prop.type === "walk-in" ? "" : plates[0] ?? "",
+          source: by,
+          emptyOnly: true,
+        });
+        return true;
+      }
+    }
+    setLookupResults(by, results);
+    return true;
+  } catch {
+    // Autofill is a convenience: a failed lookup never blocks the guard from
+    // typing the visitor in by hand, and nothing is shown.
+    if (lookupTerm(by) === lookupSearched[by]) setLookupResults(by, []);
+    return false;
+  } finally {
+    lookupPending[by] = false;
+  }
+}
 
 watch(
   () => visitor.nric,
@@ -1152,22 +1523,12 @@ function toUniqueStringArray(value: unknown) {
   return [...new Set(rawValues.map((v) => String(v).trim()).filter(Boolean))];
 }
 
-function getPersonContactOptions(item: Partial<TPeople>) {
-  const person = item as SearchPerson;
-  return toUniqueStringArray(person.contacts || person.contact);
+function getPersonContactOptions(item: VisitorPerson) {
+  return summaryContacts(item);
 }
 
-function getPersonPlateOptions(item: Partial<TPeople>) {
-  const person = item as SearchPerson;
-  const visitorPlateNumbers = toUniqueStringArray(person.plateNumbers);
-  if (visitorPlateNumbers.length) return visitorPlateNumbers;
-
-  const plateNumbers = toUniqueStringArray(person.plateNumber);
-  const plates = Array.isArray(person.plates)
-    ? person.plates.map((plate) => plate?.plateNumber)
-    : [];
-
-  return toUniqueStringArray([...plateNumbers, ...plates]);
+function getPersonPlateOptions(item: VisitorPerson) {
+  return summaryPlates(item).map((plate) => plate.toUpperCase());
 }
 
 function findMatchingContactOption(options: string[], value?: string | null) {
@@ -1203,9 +1564,22 @@ function findMatchingPlateOption(options: string[], value?: string | null) {
   );
 }
 
+/**
+ * isecure365 `applyPerson`: every field of this form the person record carries
+ * is filled - name, NRIC, phone, plate and company. Only EMPTY fields are
+ * filled, except the one searched by (none with `emptyOnly`); block / level /
+ * unit are never filled; the person's companies saved for THIS visitor type
+ * are offered on Company Name, and one is filled in only when there is exactly
+ * one and the field is empty.
+ */
 function applyNricSearchResult(
-  item: Partial<TPeople>,
-  options: { contacts?: string; plateNumber?: string; source?: Exclude<AutofillSource, null> } = {}
+  item: VisitorPerson,
+  options: {
+    contacts?: string;
+    plateNumber?: string;
+    source?: LookupField;
+    emptyOnly?: boolean;
+  } = {}
 ) {
   nricSearchMenu.value = false;
   phoneSearchMenu.value = false;
@@ -1216,52 +1590,67 @@ function applyNricSearchResult(
   skipNricFetch.value = true;
 
   currentAutofillSource.value = options.source || "nric";
+  const searchedBy = options.emptyOnly ? null : options.source || "nric";
 
-  const shouldAutofillField = (fieldSource?: Exclude<AutofillSource, null>) => {
-    if (!fieldSource) return false;
-    return currentAutofillSource.value === fieldSource;
-  };
   const getAutofillValue = (
     currentValue: string | undefined,
     nextValue: string | undefined,
-    fieldSource?: Exclude<AutofillSource, null>
+    fieldSource?: LookupField
   ) => {
     if (!nextValue) return currentValue;
-    if (currentValue && !shouldAutofillField(fieldSource)) return currentValue;
+    if (currentValue?.trim() && (!fieldSource || fieldSource !== searchedBy)) return currentValue;
     return nextValue;
   };
 
-  visitor.nric = getAutofillValue(visitor.nric, item.nric, "nric");
-  visitor.name = getAutofillValue(visitor.name, item.name);
-  visitor.contact = getAutofillValue(
-    visitor.contact,
-    options.contacts || getPersonContactOptions(item)[0],
-    "contact"
-  );
-  
-  if(prop.type !== 'walk-in'){
-    visitor.plateNumber = getAutofillValue(
-    visitor.plateNumber,
-    options.plateNumber || getPersonPlateOptions(item)[0],
-    "vehicleNumber"
-  );
+  if (isFormField("nric")) {
+    const nric = getAutofillValue(visitor.nric, item.nric, "nric");
+    visitor.nric = (nric ?? "").replace(/[^A-Za-z0-9]/g, "").toUpperCase();
   }
-
-  companyNames.value = Array.isArray(item.companyName) ? item.companyName : [];
-
-  if (!visitor.company && item.companyName && item.companyName.length === 1) {
-    visitor.company = item.companyName?.[0] || visitor.company;
+  if (isFormField("name")) visitor.name = getAutofillValue(visitor.name, item.name) ?? "";
+  if (isFormField("contact")) {
+    visitor.contact =
+      getAutofillValue(
+        visitor.contact,
+        options.contacts || getPersonContactOptions(item)[0],
+        "contact"
+      ) ?? "";
   }
 
-  if (!visitor.company && item.companyName && item.companyName.length > 1) {
-    visitor.company = "";
+  // A walk-in has no plate.
+  if (prop.type !== "walk-in" && isFormField("plateNumber")) {
+    visitor.plateNumber =
+      (getAutofillValue(
+        visitor.plateNumber,
+        options.plateNumber || getPersonPlateOptions(item)[0],
+        "vehicleNumber"
+      ) ?? "").toUpperCase();
   }
 
-
-  // 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;
+  // Only the companies saved from registrations of THIS type. A delivery is
+  // only filled with a company still on the site's delivery list.
+  const companies = companiesForType(item, prop.type);
+  if (prop.type === "delivery") {
+    companyNames.value = [];
+    // Needs the site's list; read now if the input was not clicked yet.
+    void ensureDeliveryCompanies().then(() => {
+      const fitting = [
+        ...new Set(
+          companies
+            .filter((name) => isListedCompany(deliveryCompanyList.value, name))
+            .map((name) => listedName(deliveryCompanyList.value, name))
+        ),
+      ];
+      if (isFormField("delivery-company") && !deliveryCompany.value?.trim() && fitting.length === 1) {
+        deliveryCompany.value = fitting[0];
+      }
+    });
+  } else {
+    const hasCompany = isFormField("company");
+    companyNames.value = hasCompany ? [...new Set(companies)] : [];
+    if (hasCompany && !visitor.company?.trim() && companies.length === 1) {
+      visitor.company = companies[0];
+    }
+  }
 
   setTimeout(() => {
     currentAutofillSource.value = null;
@@ -1269,28 +1658,47 @@ function applyNricSearchResult(
   }, 1000);
 }
 
-function selectNricSearchResult(item: Partial<TPeople>) {
+function selectNricSearchResult(item: VisitorPerson) {
   selectAutofillSearchResult(item, "nric");
 }
-function selectPhoneNumberSearchResult(item: Partial<TPeople>) {
+function selectPhoneNumberSearchResult(item: VisitorPerson) {
   selectAutofillSearchResult(item, "contact");
 }
-function selectPlateNumberSearchResult(item: Partial<TPeople>) {
+function selectPlateNumberSearchResult(item: VisitorPerson) {
   selectAutofillSearchResult(item, "vehicleNumber");
 }
 
-function selectAutofillSearchResult(item: Partial<TPeople>, source: Exclude<AutofillSource, null>) {
+/** Fills the person in, or opens the chooser when there is a phone / plate to pick. */
+function selectAutofillSearchResult(
+  item: VisitorPerson,
+  source: LookupField,
+  results?: VisitorPerson[]
+) {
   const contactOptions = getPersonContactOptions(item);
-  const plateOptions = getPersonPlateOptions(item);
+  const plateOptions = prop.type === "walk-in" ? [] : getPersonPlateOptions(item);
   const selectedContact =
     findMatchingContactOption(contactOptions, visitor.contact) || contactOptions[0] || "";
   const selectedPlate =
     findMatchingPlateOption(plateOptions, visitor.plateNumber) || plateOptions[0] || "";
 
-  const needsContactChoice = (!visitor.contact?.trim() || source === 'contact') && contactOptions.length > 1;
-  const needsPlateChoice = (!visitor.plateNumber?.trim() || source === 'vehicleNumber') && plateOptions.length > 1;
+  const needsContactChoice =
+    isFormField("contact") &&
+    (!visitor.contact?.trim() || source === "contact") &&
+    contactOptions.length > 1;
+  const needsPlateChoice =
+    prop.type !== "walk-in" &&
+    isFormField("plateNumber") &&
+    (!visitor.plateNumber?.trim() || source === "vehicleNumber") &&
+    plateOptions.length > 1;
 
   if (needsContactChoice || needsPlateChoice) {
+    chooserResults.value =
+      results ??
+      (source === "nric"
+        ? nricSearchResults.value
+        : source === "contact"
+          ? phoneSearchResults.value
+          : vehicleSearchResults.value);
     nricSearchMenu.value = false;
     phoneSearchMenu.value = false;
     vehicleSearchMenu.value = false;
@@ -1309,7 +1717,7 @@ function selectAutofillSearchResult(item: Partial<TPeople>, source: Exclude<Auto
   });
 }
 
-function closeAutofillSearchResults(source: Exclude<AutofillSource, null>) {
+function closeAutofillSearchResults(source: LookupField) {
   if (source === "nric") {
     nricSearchMenu.value = false;
     nricSearchResults.value = [];
@@ -1333,9 +1741,18 @@ function closeNricAutofillOptions() {
   selectedNricPlate.value = "";
 }
 
-function confirmNricAutofillOptions() {
-  if (!selectedNricSearchResult.value) return;
-
+// Back: the chooser closes and the result list it came from shows again.
+function chooserBack() {
+  const source = currentAutofillSource.value || "nric";
+  const results = chooserResults.value;
+  closeNricAutofillOptions();
+  currentAutofillSource.value = null;
+  if (results.length) setLookupResults(source, results);
+}
+
+function confirmNricAutofillOptions() {
+  if (!selectedNricSearchResult.value) return;
+
   applyNricSearchResult(selectedNricSearchResult.value, {
     contacts: selectedNricContact.value,
     plateNumber: selectedNricPlate.value,
@@ -1344,6 +1761,40 @@ function confirmNricAutofillOptions() {
   closeNricAutofillOptions();
 }
 
+// Delete on a match card: for a person saved with a wrong NRIC.
+const personToDelete = ref<VisitorPerson | null>(null);
+const deletingPerson = ref(false);
+
+function askDeletePerson(item: VisitorPerson) {
+  personToDelete.value = item;
+  dialog.deletePerson = true;
+}
+
+async function deletePersonConfirmed() {
+  const person = personToDelete.value;
+  if (!person) return;
+  deletingPerson.value = true;
+  try {
+    await deletePersonRecords(person);
+    const ids = new Set(recordIdsOf(person));
+    const keep = (list: VisitorPerson[]) =>
+      list.filter((p) => !recordIdsOf(p).some((id) => ids.has(id)));
+    setLookupResults("nric", keep(nricSearchResults.value));
+    setLookupResults("contact", keep(phoneSearchResults.value));
+    setLookupResults("vehicleNumber", keep(vehicleSearchResults.value));
+    dialog.deletePerson = false;
+    personToDelete.value = null;
+    showSnackbar(PERSON_DELETED_MESSAGE);
+  } catch (error: any) {
+    showSnackbar(
+      error?.data?.message || "Unable to delete the saved details. Please try again.",
+      "error"
+    );
+  } finally {
+    deletingPerson.value = false;
+  }
+}
+
 function getVisitorSearchItems(res: any): TVisitor[] {
   const items =
     res?.items ||
@@ -1379,12 +1830,36 @@ function formatNonCheckedOutDate(date?: string) {
   return date ? UTCToLocalTIme(date) : "N/A";
 }
 
+/*
+ * "Already inside" (isecure365 `blockedByOpenVisit` / `addMember`): visitors
+ * matching the NRIC or phone who never checked out. For the visitor being
+ * saved, a match stops the save; once the list is clear (Skip NRIC, or each
+ * one checked out here) the save carries on by itself. For a contractor
+ * member, the member is added once the list is clear.
+ */
+const nonCheckedOutFor = reactive<{ kind: "lead" | "member"; nric: string; contact: string }>({
+  kind: "lead",
+  nric: "",
+  contact: "",
+});
+
+async function findOpenVisits(nric: string | null, contact: string | null) {
+  const res = await searchVisitorObject({
+    page: 1,
+    limit: 1000,
+    site: prop.site,
+    searchObject: { nric, contact },
+    notCheckedOut: true,
+  });
+  return getVisitorSearchItems(res);
+}
+
 async function checkNonCheckedOutVisitorsBeforeSubmit(
   options: { skipNric?: boolean; showDialog?: boolean } = {}
 ) {
   const { skipNric = skipNonCheckedOutNric.value, showDialog = true } = options;
-  const nric = skipNric ? null : visitor.nric || null;
-  const contact = visitor.contact || null;
+  const nric = skipNric || !isFormField("nric") ? null : visitor.nric || null;
+  const contact = isFormField("contact") ? visitor.contact || null : null;
 
   if (!nric && !contact) {
     matchingNonCheckedOutVisitors.value = [];
@@ -1394,18 +1869,13 @@ async function checkNonCheckedOutVisitorsBeforeSubmit(
 
   try {
     loading.searchingNonCheckedOut = true;
-    const res = await searchVisitorObject({
-      page: 1,
-      limit: 1000,
-      site: prop.site,
-      searchObject: {
-        nric,
-        contact,
-      },
-      notCheckedOut: true,
-    });
-    const items = getVisitorSearchItems(res);
+    const items = await findOpenVisits(nric, contact);
     matchingNonCheckedOutVisitors.value = items;
+    if (items.length) {
+      nonCheckedOutFor.kind = "lead";
+      nonCheckedOutFor.nric = "";
+      nonCheckedOutFor.contact = "";
+    }
     dialog.showNonCheckedOutDialog = showDialog && items.length > 0;
     return items.length === 0;
   } catch (error: any) {
@@ -1419,6 +1889,26 @@ async function checkNonCheckedOutVisitorsBeforeSubmit(
   }
 }
 
+/** Passed to MemberInformation: any open visit of the member being added? */
+async function checkMemberOpenVisits(member: { nric: string; contact: string }) {
+  try {
+    const items = await findOpenVisits(member.nric || null, member.contact || null);
+    if (!items.length) return true;
+    nonCheckedOutFor.kind = "member";
+    nonCheckedOutFor.nric = member.nric;
+    nonCheckedOutFor.contact = member.contact;
+    matchingNonCheckedOutVisitors.value = items;
+    dialog.showNonCheckedOutDialog = true;
+    return false;
+  } catch {
+    // Reported, and with nothing listed the member is added (isecure365).
+    showSnackbar("Unable to check unchecked-out visitors. Please try again.", "error");
+    return true;
+  }
+}
+
+// "Skip NRIC": from now on the check matches the phone number only; when the
+// list is clear the dialog closes and the save carries on by itself.
 async function handleSkipNricNonCheckedOut() {
   skipNonCheckedOutNric.value = true;
 
@@ -1427,6 +1917,56 @@ async function handleSkipNricNonCheckedOut() {
   });
   if (!canSubmit) return;
   dialog.showNonCheckedOutDialog = false;
+  await submit();
+}
+
+// The member dialog's "SKIP NRIC": the member is added as entered and the
+// form submitted, the visitor's own check matching the phone number only.
+async function handleSkipMemberNric() {
+  dialog.showNonCheckedOutDialog = false;
+  matchingNonCheckedOutVisitors.value = [];
+  memberInfoRef.value?.commitDraft?.();
+  skipNonCheckedOutNric.value = true;
+  await submit();
+}
+
+// After a check-out from the list: read again; once clear, carry on.
+async function refreshOpenVisitsAfterCheckout() {
+  if (nonCheckedOutFor.kind === "member") {
+    dialog.showNonCheckedOutDialog = false;
+    await memberInfoRef.value?.addMember?.();
+    return;
+  }
+  const clear = await checkNonCheckedOutVisitorsBeforeSubmit();
+  if (clear) {
+    dialog.showNonCheckedOutDialog = false;
+    await submit({ skipNonCheckedOutCheck: true });
+  }
+}
+
+function heldNfcCards(v: any) {
+  const cards: { _id: string; cardNo: string }[] = [];
+  if (v?.accessCards?.type === "NFC" && v?.accessCards?.cardNo) cards.push(v.accessCards);
+  const primaryId = v?.accessCards?._id?.toString();
+  for (const card of ((v?.cards as any[]) || []).flat()) {
+    if (card?.type && card.type !== "NFC") continue;
+    if (card?.cardNo && card?._id?.toString() !== primaryId) cards.push(card);
+  }
+  return cards;
+}
+
+function passEntries(value: unknown): any[] {
+  if (Array.isArray(value)) return value.filter((e) => e && typeof e === "object");
+  return [];
+}
+
+/** An active pass (not "Removed"), a pass id string, or any key not "Removed". */
+function holdsPassOrKeys(v: any) {
+  return (
+    passEntries(v?.visitorPass).some((p) => p.status !== "Removed") ||
+    (typeof v?.visitorPass === "string" && Boolean(v.visitorPass)) ||
+    passEntries(v?.passKeys).some((k) => k.status !== "Removed")
+  );
 }
 
 function handleCheckout(visitorId: string) {
@@ -1437,12 +1977,10 @@ function handleCheckout(visitorId: string) {
 
   selectedCheckoutVisitorId.value = visitorId;
 
-  const visitor = (matchingNonCheckedOutVisitors.value as any[]).find(
-    (v) => v?._id === visitorId
-  );
-  const nfcCards = ((visitor?.cards as any[]) || []).filter(
-    (card) => card?.type === "NFC"
+  const v = (matchingNonCheckedOutVisitors.value as any[]).find(
+    (item) => item?._id === visitorId
   );
+  const nfcCards = heldNfcCards(v);
 
   if (nfcCards.length > 0) {
     nfcCardReturnStatuses.value = nfcCards.map((card: any) => ({
@@ -1455,21 +1993,34 @@ function handleCheckout(visitorId: string) {
     return;
   }
 
+  if (holdsPassOrKeys(v)) {
+    openPassKeyReturn(v);
+    return;
+  }
+
   proceedNonCheckedOutCheckout(visitorId);
 }
 
-async function proceedNonCheckedOutCheckout(visitorId: string) {
+async function proceedNonCheckedOutCheckout(
+  visitorId: string,
+  extra: Record<string, unknown> = {}
+) {
   try {
     loading.checkingOut = true;
     const res = await updateVisitor(visitorId as string, {
       checkOut: new Date().toISOString(),
-    });
+      ...(currentUser.value?._id ? { updatedBy: currentUser.value._id } : {}),
+      ...extra,
+    } as Partial<TVisitorPayload>);
     if (res) {
       dialog.returnNfcCard = false;
-      await checkNonCheckedOutVisitorsBeforeSubmit();
+      dialog.returnPassKeys = false;
+      selectedCheckoutVisitorId.value = null;
+      loading.checkingOut = false;
+      await refreshOpenVisitsAfterCheckout();
     }
   } catch (error: any) {
-    const checkoutErrorMessage = error?.response?._data?.message;
+    const checkoutErrorMessage = error?.data?.message || error?.response?._data?.message;
     console.error("[ERROR]", error);
     errorMessage.value =
       checkoutErrorMessage || "An error occurred while checking out the vehicle.";
@@ -1494,35 +2045,194 @@ async function handleNfcReturnCheckout() {
       })),
     });
     if (res) {
+      dialog.returnNfcCard = false;
+      const v = (matchingNonCheckedOutVisitors.value as any[]).find(
+        (item) => item?._id === visitorId
+      );
+      // Cards back: a pass or key still held is recorded next.
+      if (holdsPassOrKeys(v)) {
+        loading.checkingOut = false;
+        openPassKeyReturn(v);
+        return;
+      }
+      loading.checkingOut = false;
       await proceedNonCheckedOutCheckout(visitorId);
     }
   } catch (error: any) {
-    const checkoutErrorMessage = error?.response?._data?.message;
+    const checkoutErrorMessage = error?.data?.message || error?.response?._data?.message;
     console.error("[ERROR]", error);
-    errorMessage.value =
-      checkoutErrorMessage || "An error occurred while returning the NFC card.";
+    errorMessage.value = checkoutErrorMessage || "Failed to checkout visitor.";
   } finally {
     loading.checkingOut = false;
   }
 }
 
-function handleAutofillDataViaVehicleNumber(item: TPeople) {
-  currentAutofillSource.value = "vehicleNumber";
+// Pass & key return before the check-out (isecure365 `heldForReturn`,
+// `checkOutBlocked`, `buildReturnPayload`).
+const PASS_RETURN_STATUSES = ["Not Returned", "Returned", "Damaged", "Lost"];
+type PassReturnEntry = Record<string, any> & {
+  keyId: string;
+  status: string;
+  remarks: string;
+  locked?: boolean;
+};
+const passReturn = reactive<{ visitorId: string; passes: PassReturnEntry[]; keys: PassReturnEntry[] }>({
+  visitorId: "",
+  passes: [],
+  keys: [],
+});
+const passReturnVisitor = ref<Record<string, any> | null>(null);
+const passReturnInitial = ref("");
+const passReturnError = ref("");
+const passReturnScan = reactive({ open: false, value: "" });
+// Names of passes / keys whose entry carries none (looked up by id).
+const passKeyNames = reactive<Record<string, string>>({});
+
+// Keys are listed for a contractor only (every key still counts for Check Out).
+const passReturnSections = computed(() => [
+  {
+    title: "Pass",
+    empty: "No current pass assigned.",
+    icon: "mdi-card-bulleted-outline",
+    color: "blue",
+    fallback: "Pass",
+    show: true,
+    items: passReturn.passes,
+  },
+  {
+    title: "Keys",
+    empty: "No current key(s) assigned.",
+    icon: "mdi-key",
+    color: "orange",
+    fallback: "Key",
+    show: passReturnVisitor.value?.type === "contractor",
+    items: passReturn.keys,
+  },
+]);
+
+function passReturnSignature() {
+  const sig = (entries: PassReturnEntry[]) =>
+    entries.map((e) => `${e.keyId}|${e.status}|${String(e.remarks ?? "").trim()}`).join(",");
+  return `${sig(passReturn.passes)}#${sig(passReturn.keys)}`;
+}
 
-  visitor.name = item.name;
-  visitor.nric = item.nric;
-  visitor.contact = item.contact;
-  companyNames.value = item.companyName ?? [];
-  if (!visitor.company) {
-    visitor.company = companyNames.value?.[0];
+const passReturnChanged = computed(() => passReturnSignature() !== passReturnInitial.value);
+
+/** Never holds the dialog back: names fill in when they arrive. */
+async function loadPassKeyNames(ids: string[]) {
+  const missing = ids.filter((id) => id && !passKeyNames[id]);
+  if (!missing.length) return;
+  try {
+    const res: any = await getPassKeysByPageSearch({ _ids: missing, page: 1, limit: missing.length, sites: [prop.site] });
+    const items: any[] = res?.items ?? res?.data?.items ?? [];
+    for (const item of items) {
+      if (item?._id && item?.prefixAndName) passKeyNames[item._id] = item.prefixAndName;
+    }
+  } catch {
+    // The chip falls back to "Pass" / "Key".
   }
-  visitor.block = item.block ?? "";
-  visitor.level = item.level ?? "";
-  visitor.unit = item.unit ?? "";
+}
 
-  setTimeout(() => {
-    currentAutofillSource.value = null;
-  }, 1000);
+function openPassKeyReturn(v: any) {
+  const start = (entry: any): PassReturnEntry => {
+    const known = [...PASS_RETURN_STATUSES, "Removed"];
+    const status =
+      entry.status && entry.status !== "In Use" && known.includes(entry.status)
+        ? entry.status
+        : "Not Returned";
+    return { ...entry, keyId: String(entry.keyId ?? ""), status, remarks: entry.remarks ?? "", locked: status === "Removed" };
+  };
+  passReturnVisitor.value = v ?? null;
+  passReturn.visitorId = v?._id ?? "";
+  passReturn.passes = passEntries(v?.visitorPass).filter((p) => Boolean(p.keyId)).map(start);
+  passReturn.keys = passEntries(v?.passKeys).map(start);
+  passReturnInitial.value = passReturnSignature();
+  passReturnError.value = "";
+  selectedCheckoutVisitorId.value = passReturn.visitorId;
+  dialog.returnPassKeys = true;
+  void loadPassKeyNames(
+    [...passReturn.passes, ...passReturn.keys].filter((e) => !e.prefixAndName).map((e) => e.keyId)
+  );
+}
+
+// "Scan QR Code": the scanned pass or key is marked Returned.
+watch(
+  () => passReturnScan.value,
+  (value) => {
+    const scanned = String(value ?? "").trim().toLowerCase();
+    if (!scanned) return;
+    passReturnScan.value = "";
+    passReturnScan.open = false;
+    const entry = [...passReturn.passes, ...passReturn.keys].find(
+      (e) => !e.locked && String(e.prefixAndName || passKeyNames[e.keyId] || "").toLowerCase() === scanned
+    );
+    if (!entry) {
+      passReturnError.value = `"${value}" is not a pass or key this visitor holds.`;
+      return;
+    }
+    entry.status = "Returned";
+    passReturnError.value = "";
+  }
+);
+
+function passReturnRemarksProblem() {
+  return [...passReturn.passes, ...passReturn.keys].some(
+    (e) => ["Damaged", "Lost"].includes(e.status) && !String(e.remarks ?? "").trim()
+  )
+    ? "Remarks cannot be empty"
+    : "";
+}
+
+// "Update": the statuses and remarks only, then the dialog closes.
+async function handlePassKeyReturnUpdate() {
+  passReturnError.value = passReturnRemarksProblem();
+  if (passReturnError.value || !passReturn.visitorId) return;
+  try {
+    loading.updatingPassKeys = true;
+    await updateVisitor(passReturn.visitorId, {
+      visitorPass: passReturn.passes.map(forServer),
+      passKeys: passReturn.keys.map(forServer),
+      ...(currentUser.value?._id ? { updatedBy: currentUser.value._id } : {}),
+    } as Partial<TVisitorPayload>);
+    const v = (matchingNonCheckedOutVisitors.value as any[]).find((item) => item?._id === passReturn.visitorId);
+    if (v) {
+      v.visitorPass = passReturn.passes.map(forServer);
+      v.passKeys = passReturn.keys.map(forServer);
+    }
+    dialog.returnPassKeys = false;
+    showSnackbar("Successfully updated.");
+  } catch (error: any) {
+    passReturnError.value = error?.data?.message || "Unable to update the pass or key(s). Please try again.";
+  } finally {
+    loading.updatingPassKeys = false;
+  }
+}
+
+const canCheckOutAfterReturn = computed(() => {
+  const all = [...passReturn.passes, ...passReturn.keys];
+  return all.every(
+    (entry) =>
+      ["Returned", "Damaged", "Lost", "Removed"].includes(entry.status) &&
+      (!["Damaged", "Lost"].includes(entry.status) || Boolean(entry.remarks?.trim()))
+  );
+});
+
+function forServer(entry: PassReturnEntry) {
+  const rest: Record<string, unknown> = { ...entry };
+  for (const key of ["lastUpdate", "description", "templatePrefixPass", "prefixAndName", "add", "locked"]) {
+    delete rest[key];
+  }
+  return rest;
+}
+
+async function handlePassKeyReturnCheckout() {
+  passReturnError.value = passReturnRemarksProblem();
+  if (passReturnError.value) return;
+  if (!passReturn.visitorId || !canCheckOutAfterReturn.value) return;
+  await proceedNonCheckedOutCheckout(passReturn.visitorId, {
+    visitorPass: passReturn.passes.map(forServer),
+    passKeys: passReturn.keys.map(forServer),
+  });
 }
 
 const { data: entryPassSettings, pending: entryPassSettingsPending } =
@@ -1662,20 +2372,43 @@ const {
   { watch: [() => visitor.level], deep: true }
 );
 
-watch(
-  siteData,
-  (newVal) => {
-    const siteDataValue = newVal as TSite;
-    if (siteDataValue) {
-      deliveryCompanyList.value = Array.isArray(
-        siteDataValue?.deliveryCompanyList
-      )
-        ? siteDataValue.deliveryCompanyList
+/*
+ * The delivery company list is read when the Company Name input is clicked,
+ * not when the form opens - each click reads the site's latest list. It is
+ * also read (once) when something needs it before then: an autofill company,
+ * or the save's listed-spelling check.
+ */
+const deliveryCompaniesLoaded = ref(false);
+const deliveryCompaniesLoading = ref(false);
+let deliveryCompaniesRequest: Promise<void> | null = null;
+
+function loadDeliveryCompanies(): Promise<void> {
+  if (deliveryCompaniesRequest) return deliveryCompaniesRequest;
+  deliveryCompaniesLoading.value = true;
+  deliveryCompaniesRequest = (async () => {
+    try {
+      const site = (await getSiteById(prop.site)) as any;
+      deliveryCompanyList.value = Array.isArray(site?.deliveryCompanyList)
+        ? site.deliveryCompanyList
         : [];
+      deliveryCompaniesLoaded.value = true;
+    } catch {
+      // The list stays as it was; typing a company still works.
+    } finally {
+      deliveryCompaniesLoading.value = false;
+      deliveryCompaniesRequest = null;
     }
-  },
-  { immediate: true }
-);
+  })();
+  return deliveryCompaniesRequest;
+}
+
+async function ensureDeliveryCompanies() {
+  if (!deliveryCompaniesLoaded.value) await loadDeliveryCompanies();
+}
+
+function handleDeliveryCompanyFocus(focused: boolean) {
+  if (focused) void loadDeliveryCompanies();
+}
 
 watch(
   [blocksListData],
@@ -1786,87 +2519,51 @@ function handleUpdateUnit(value: any) {
   visitor.unitName = selectedUnit?.title || "";
 }
 
-const debounceFetchNRIC = debounce(fetchPersonByNRICRefresh, 500);
+// NRIC Scan (security mobile app `onNricRead`): the NRIC - and the name, when
+// it was read - filled in as if typed, so the people lookup and the "Skip
+// NRIC" reset run as they do for a typed NRIC.
+const nricScanOpen = ref(false);
+const nricScanNotice = ref("");
+
+function handleNricScanRead({ nric, name }: { nric: string; name: string | null }) {
+  nricScanOpen.value = false;
+  const next = String(nric || "").replace(/[^A-Za-z0-9]/g, "").toUpperCase();
+  if (!next) return;
+  visitor.nric = next;
+  const fillName = Boolean(name) && isFormField("name");
+  if (fillName) visitor.name = name ?? "";
+  nricScanNotice.value = fillName
+    ? "NRIC and name filled in from the card. Please check them."
+    : "NRIC filled in from the card. Please type the name.";
+  if (next.length >= 4) void lookup("nric");
+}
 
 function handleUpdateNRIC() {
+  nricScanNotice.value = "";
   if (skipNricFetch.value) return;
   if (!isNricFieldFocused.value) return;
-  if (visitor.nric && visitor.nric?.length < 4) return;
-  if(prop.type === 'walk-in' || prop.type === 'drop-off') return;
-  debounceFetchNRIC();
+  scheduleLookup("nric");
 }
 
-
-const {
-  data: fetchPersonByPhoneNumber,
-  refresh: fetchPersonByPhoneNumberRefresh,
-  pending: fetchPersonByPhoneNumberPending,
-} = useLazyAsyncData(`fetch-person-phone-number`, () => {
-  const contact = visitor.contact;
-  if (!contact || contact.length < 4) return Promise.resolve(null);
-  const type = prop.type === 'walk-in' ? 'guest' : prop.type
-  return findPersonByPhoneNumberMultipleResult(contact, prop.site, type);
-});
-
-watch(fetchPersonByPhoneNumber, (obj) => {
-  phoneSearchResults.value = getPeopleSearchItems(obj);
-  phoneSearchMenu.value = phoneSearchResults.value.length > 0;
-});
-
-const debounceFetchPhoneNumber = debounce(fetchPersonByPhoneNumberRefresh, 500);
-
 function handleUpdatePhoneNumber() {
+  if (skipNricFetch.value) return;
   if (!isPhoneFieldFocused.value) return;
-
-  const search = visitor.contact?.trim() || "";
-  if (search.length < 4) {
-    phoneSearchResults.value = [];
-    phoneSearchMenu.value = false;
-    return;
-  }
-  if(prop.type === 'walk-in' || prop.type === 'drop-off') return;
-
-  debounceFetchPhoneNumber();
+  scheduleLookup("contact");
 }
 
-const {
-  data: fetchPersonByPlateNumber,
-  refresh: fetchPersonByPlateNumberRefresh,
-  pending: fetchPersonByPlateNumberPending,
-} = useLazyAsyncData(`fetch-person-plate-number`, () => {
-  const plateNumber = visitor.plateNumber?.trim()?.toUpperCase() || "";
-  if (plateNumber.length < 4) return Promise.resolve(null);
-  const type = prop.type === 'walk-in' ? 'guest' : prop.type
-  return findPersonByPlateNumberMultipleResult(plateNumber, prop.site, type);
-});
-
-watch(fetchPersonByPlateNumber, (obj) => {
-  vehicleSearchResults.value = getPeopleSearchItems(obj);
-  vehicleSearchMenu.value = vehicleSearchResults.value.length > 0;
-});
-
-const debounceFetchPlateNumber = debounce(fetchPersonByPlateNumberRefresh, 500);
-
 function handleUpdateVehicleNumber() {
+  if (skipNricFetch.value) return;
   if (!isPlateNumberFieldFocused.value) return;
-
-  const search = visitor.plateNumber?.trim()?.toUpperCase() || "";
-  if (search.length < 4) {
-    vehicleSearchResults.value = [];
-    vehicleSearchMenu.value = false;
-    return;
-  }
-
-  if(prop.type === 'walk-in' || prop.type === 'drop-off') return;
-
-  debounceFetchPlateNumber();
+  // A walk-in has no plate field.
+  if (prop.type === "walk-in") return;
+  scheduleLookup("vehicleNumber");
 }
 
 const handleFocusPlateNumber = () => {
   isPlateNumberFieldFocused.value = true;
-  if (prop.mode === 'register') {
-
-    handleUpdateVehicleNumber();
+  // Registering a camera record: focusing its plate looks it up again.
+  if (formMode.value === "register" && !vehicleSearchResults.value.length) {
+    void lookup("vehicleNumber", { prefilled: true });
   }
 };
 
@@ -1876,12 +2573,6 @@ function backToSelection() {
   message.value = "";
 }
 
-function handleGoToPreviousPage() {
-  if (contractorStep.value > 1) {
-    contractorStep.value--;
-  }
-}
-
 function close() {
   emit("close");
   message.value = "";
@@ -1906,7 +2597,7 @@ function formatVisitorType(type: TVisitorType): string {
   }
 }
 
-async function checkUnregisteredPlateBeforeContinue(action: "next" | "submit") {
+async function checkUnregisteredPlateBeforeContinue(action: "submit") {
   if (
     !enableUnregistered.value ||
     skipUnregisteredPlateCheck.value ||
@@ -1960,11 +2651,7 @@ function formatUnregisteredCheckIn(checkIn?: string) {
 async function continuePendingUnregisteredAction() {
   const action = pendingUnregisteredAction.value;
   pendingUnregisteredAction.value = null;
-  if (action === "next") {
-    await handleNextPage();
-  } else if (action === "submit") {
-    await submit();
-  }
+  if (action === "submit") await submit();
 }
 
 async function closeUnregisteredPlateDialog() {
@@ -1973,259 +2660,634 @@ async function closeUnregisteredPlateDialog() {
   skipUnregisteredPlateCheck.value = true;
 }
 
+// "Cancel & Add New" (as the security mobile app): none of the listed records
+// is this visitor, so the paused Submit carries on straight away as a NEW
+// visitor - this plate is not checked against the Unregistered list again (a
+// changed plate is, see the plate watcher), so the list cannot keep reopening.
+async function cancelUnregisteredAndAddNew() {
+  await closeUnregisteredPlateDialog();
+  await continuePendingUnregisteredAction();
+}
+
+/**
+ * "Update" on an unregistered camera record (isecure365 `registerMatch`):
+ * nothing is saved yet. The form switches to registering THAT record - its
+ * plate, what was typed kept - and the guard submits. New photos, the pass /
+ * keys and the members picked so far are not carried over, and a delivery
+ * takes the record's delivery type, or Food.
+ */
 async function selectUnregisteredPlateMatch(match: TVisitor) {
+  if (!match?._id) {
+    errorMessage.value = "Invalid unregistered vehicle selected.";
+    return;
+  }
   selectedUnregisteredVisitor.value = match;
   skipUnregisteredPlateCheck.value = true;
   dialog.showUnregisteredPlateDialog = false;
   unregisteredPlateMatches.value = [];
+  pendingUnregisteredAction.value = null;
+
+  visitor.plateNumber = (match.plateNumber || "").toUpperCase();
+  if (prop.type === "delivery") {
+    visitor.deliveryType = (match as any).deliveryType || "food";
+  }
+  visitor.attachments = [];
+  clearDeliveryPhotos();
+  visitor.visitorPass = [];
+  visitor.passKeys = [];
+  visitor.members = [];
+  passInfoKey.value++;
+  memberInfoRef.value?.reset?.();
+  membersKey.value++;
+}
 
-  visitor.plateNumber = match.plateNumber;
-  visitor.attachments = match.attachments || visitor.attachments;
-  visitor.block = match.block || visitor.block;
-  visitor.level = match.level || visitor.level;
-  visitor.unit = match.unit || visitor.unit;
-  visitor.company = match.company || visitor.company;
-  visitor.contractorType = match.contractorType || visitor.contractorType;
-  visitor.name = match.name || visitor.name;
-  visitor.contact = match.contact || visitor.contact;
-  visitor.nric = match.nric || visitor.nric;
-  visitor.company = match.company || visitor.company;
-  visitor.remarks = match.remarks || visitor.remarks;
+/*
+ * Delivery photos (isecure365 `PhotoCarouselField`): kept as files until
+ * Submit, then uploaded and sent as `attachments` (file ids). A photo already
+ * uploaded by an earlier Submit keeps its id, so a retry does not upload it
+ * twice.
+ */
+type TDeliveryPhoto = { name: string; data: File; url: string; id?: string };
+const MAX_DELIVERY_PHOTOS = 5;
+const deliveryPhotos = ref<TDeliveryPhoto[]>([]);
+const deliveryPhotoIndex = ref(0);
+const deliveryGalleryInput = ref<HTMLInputElement | null>(null);
+const deliveryCamera = ref<{ openCameraDialog: () => void } | null>(null);
+const deliveryPhotoEdit = reactive({ open: false, url: "", idx: 0 });
+
+function onDeliveryGalleryPicked(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const files = Array.from(input.files ?? []).map((file) => ({
+    name: file.name,
+    data: file,
+    url: URL.createObjectURL(file),
+  }));
+  addDeliveryPhotos(files);
+  input.value = "";
+}
+
+function editDeliveryPhoto() {
+  const photo = deliveryPhotos.value[deliveryPhotoIndex.value];
+  if (!photo) return;
+  deliveryPhotoEdit.url = photo.url;
+  deliveryPhotoEdit.idx = deliveryPhotoIndex.value;
+  deliveryPhotoEdit.open = true;
+}
+
+function removeDeliveryPhotoAt(idx: number) {
+  const photo = deliveryPhotos.value[idx];
+  if (!photo) return;
+  deliveryPhotos.value = deliveryPhotos.value.filter((_, i) => i !== idx);
+  deliveryPhotoIndex.value = Math.max(0, Math.min(deliveryPhotoIndex.value, deliveryPhotos.value.length - 1));
+}
+
+const samePhotoFile = (a: File, b: File) =>
+  a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
+
+function addDeliveryPhotos(files: Array<{ name: string; data: File; url: string }>) {
+  let skipped = false;
+  for (const file of files ?? []) {
+    if (deliveryPhotos.value.some((photo) => samePhotoFile(photo.data, file.data))) continue;
+    if (deliveryPhotos.value.length >= MAX_DELIVERY_PHOTOS) {
+      skipped = true;
+      continue;
+    }
+    deliveryPhotos.value.push({ name: file.name, data: file.data, url: file.url });
+    deliveryPhotoIndex.value = deliveryPhotos.value.length - 1;
+  }
+  if (skipped) showSnackbar(`You can add up to ${MAX_DELIVERY_PHOTOS} photos.`, "error");
+}
+
+// Edit: the drawn-on photo replaces the original (it is a new file).
+async function onDeliveryPhotoEdited(url: string, idx: number) {
+  const photo = deliveryPhotos.value[idx];
+  if (!photo) return;
+  deliveryPhotoEdit.open = false;
+  const blob = await getImage(url);
+  if (!blob) return;
+  deliveryPhotos.value[idx] = {
+    name: photo.name,
+    data: new File([blob], photo.data.name, { type: photo.data.type }),
+    url,
+  };
+}
 
-  pendingUnregisteredAction.value = null;
+function clearDeliveryPhotos() {
+  deliveryPhotos.value = [];
+  deliveryPhotoIndex.value = 0;
 }
 
-async function handleNextPage() {
-  errorMessage.value = "";
-  formRef.value!.validate();
-  if (!validForm.value) {
-    errorMessage.value = "Please complete all required fields *";
+async function uploadDeliveryPhotos(): Promise<string[]> {
+  const ids: string[] = [];
+  for (const photo of deliveryPhotos.value) {
+    if (!photo.id) {
+      const res: any = await addFile(photo.data);
+      const id = res?.id ?? res?._id ?? res?.data?.id;
+      if (!id) throw new Error("upload");
+      photo.id = String(id);
+    }
+    ids.push(photo.id);
+  }
+  return ids;
+}
+
+// PassInformation reads its pass only when mounted; bumped to clear it.
+const passInfoKey = ref(0);
+
+// Pass ids held by members: not offered for the contractor's own pass.
+const memberPassIds = computed(() =>
+  (visitor.members ?? []).flatMap((m) => (m.visitorPass ?? []).map((p) => p.keyId)).filter(Boolean)
+);
+
+/*
+ * The save - the same process as the security mobile app (isecure365
+ * `add.tsx` buildPayload), for every visitor type. Only the screens differ.
+ *
+ * The fields an update always sends, so emptying one on the form empties it on
+ * the record (each only when this visitor type's form has it).
+ */
+const CLEARABLE_ON_UPDATE = [
+  "name",
+  "nric",
+  "contact",
+  "company",
+  "contractorType",
+  "deliveryType",
+  "block",
+  "level",
+  "unit",
+  "plateNumber",
+  "remarks",
+  "attachments",
+];
+const OBJECT_ID = /^[a-f0-9]{24}$/i;
+// Users who record a visit they are not witnessing: their visit opens with no
+// check-in / check-out (isecure365 `backOffice`).
+const BACK_OFFICE_USER_TYPES = /^(service-provider|service-provider-member|site)$/i;
+
+// The site's delivery company list (and the typed name snapped to the
+// listed spelling, "grabfood" -> "GrabFood").
+const deliveryCompanyHint = computed(() => {
+  const typed = (deliveryCompany.value || "").trim();
+  if (!typed || isListedCompany(deliveryCompanyList.value, typed)) return "";
+  return "New company - it will be added to the list on submit.";
+});
+
+function snapDeliveryCompany() {
+  const typed = deliveryCompany.value || deliveryCompanyInput.value || "";
+  if (!typed.trim()) return;
+  deliveryCompany.value = listedName(deliveryCompanyList.value, typed);
+}
+
+/**
+ * After the visitor is saved: a typed delivery company that is not listed yet
+ * is added to the site's list (the latest list is read first, so a company
+ * added elsewhere meanwhile is not lost). Never throws.
+ */
+/*
+ * Rename / remove a listed delivery company (isecure365
+ * `delivery-company-field.tsx`, `useDeliveryCompanies().saveList`): the site's
+ * latest list is read first and the change applied to it, so a company someone
+ * added elsewhere meanwhile is not lost; then the whole list is saved. The
+ * server refuses a caller without the right to change the site.
+ */
+const deliveryCompanySaving = ref(false);
+const deliveryCompanyEdit = ref<{ original: string; value: string; error: string } | null>(null);
+const deliveryCompanyToDelete = ref<string | null>(null);
+
+async function saveDeliveryCompanyList(change: (latest: string[]) => string[]) {
+  let latest = [...deliveryCompanyList.value];
+  try {
+    const site = (await getSiteById(prop.site)) as any;
+    if (Array.isArray(site?.deliveryCompanyList)) latest = site.deliveryCompanyList;
+  } catch {
+    // Fall back to the list on screen.
+  }
+  const next = change([...latest]);
+  await updateSitebyId(prop.site, { deliveryCompanyList: next } as any);
+  deliveryCompanyList.value = next;
+  return next;
+}
+
+function openEditDeliveryCompany(company: string) {
+  deliveryCompanyEdit.value = { original: company, value: company, error: "" };
+}
+
+async function saveEditDeliveryCompany() {
+  const editing = deliveryCompanyEdit.value;
+  if (!editing) return;
+  const problem = renameProblem(deliveryCompanyList.value, editing.original, editing.value);
+  if (problem) {
+    editing.error = problem;
     return;
   }
-  const step = contractorStep.value;
-  if (step === 2 && passType.value === "QR") {
-    if (availableQrCount.value === null) {
-      errorMessage.value = "Please wait while QR passes are being generated...";
-      return;
+  const name = normalizeCompany(editing.value);
+  deliveryCompanySaving.value = true;
+  try {
+    await saveDeliveryCompanyList((latest) => renamedCompany(latest, editing.original, name));
+    if (sameCompany(deliveryCompany.value || "", editing.original)) deliveryCompany.value = name;
+    deliveryCompanyEdit.value = null;
+    showSnackbar("Company updated.");
+  } catch (error: any) {
+    showSnackbar(error?.data?.message || "Unable to update the company. Please try again.", "error");
+  } finally {
+    deliveryCompanySaving.value = false;
+  }
+}
+
+async function confirmDeleteDeliveryCompany() {
+  const company = deliveryCompanyToDelete.value;
+  if (!company) return;
+  deliveryCompanySaving.value = true;
+  try {
+    await saveDeliveryCompanyList((latest) => withoutCompany(latest, company));
+    if (sameCompany(deliveryCompany.value || "", company)) deliveryCompany.value = "";
+    deliveryCompanyToDelete.value = null;
+    showSnackbar("Company deleted.");
+  } catch (error: any) {
+    showSnackbar(error?.data?.message || "Unable to delete the company. Please try again.", "error");
+  } finally {
+    deliveryCompanySaving.value = false;
+  }
+}
+
+async function ensureDeliveryCompanyInList(name: string) {
+  if (!name || isListedCompany(deliveryCompanyList.value, name)) return;
+  try {
+    let latest = deliveryCompanyList.value;
+    try {
+      const site = (await getSiteById(prop.site)) as any;
+      if (Array.isArray(site?.deliveryCompanyList)) latest = site.deliveryCompanyList;
+    } catch {
+      // Fall back to the list on screen.
     }
-    if (availableQrCount.value === 0) {
-      errorMessage.value = "No QR passes available. Add a non-physical card to this unit in Access Management first.";
-      return;
+    const next = withCompany(latest, name);
+    await updateSitebyId(prop.site, { deliveryCompanyList: next } as any);
+    deliveryCompanyList.value = next;
+  } catch (error: any) {
+    showSnackbar(
+      `The visitor was saved, but "${name}" could not be added to the company list. ${error?.data?.message ?? ""}`.trim(),
+      "error"
+    );
+  }
+}
+
+function buildPayload(isUpdate: boolean): Record<string, unknown> {
+  const payload: Record<string, unknown> = { type: prop.type, site: prop.site };
+
+  // Only what this form has (a Walk-In has no plate, so none is sent - not even
+  // on a register, where the camera record keeps its own). Text is trimmed and
+  // an empty field is left out of a new visit; on an update it is sent as null
+  // so the record is cleared too.
+  for (const key of typeFieldMap[prop.type] as (keyof TVisitorPayload | "delivery-company")[]) {
+    if (!isFormField(key)) continue;
+    if (key === "delivery-company") continue;
+    const raw = visitor[key as keyof TVisitorPayload];
+    const value = typeof raw === "string" ? raw.trim() : raw;
+    const empty =
+      value === undefined || value === null || value === "" || (Array.isArray(value) && value.length === 0);
+    if (!empty) {
+      payload[key] = value;
+    } else if (isUpdate && CLEARABLE_ON_UPDATE.includes(key)) {
+      payload[key] = null;
     }
   }
-  if (step === 2 && passType.value === "NFC" && passCards.value.length === 0) {
-    errorMessage.value = "Please select at least one NFC card before proceeding.";
+
+  // Delivery: the company is the delivery company, in the listed spelling.
+  if (prop.type === "delivery" && isFormField("delivery-company")) {
+    const company = listedName(deliveryCompanyList.value, deliveryCompany.value);
+    if (company) payload.company = company;
+    else if (isUpdate) payload.company = null;
+  }
+
+  // Pick-up and drop-off carry no person, so the type itself becomes the
+  // remark when it is left blank.
+  if ((prop.type === "pick-up" || prop.type === "drop-off") && !payload.remarks) {
+    payload.remarks = prop.type;
+  }
+
+  // Passes: one visitor pass (Drive-In, Walk-In, Contractor), keys for a
+  // contractor only; each entry `add: true` on an existing record.
+  if (["guest", "walk-in", "contractor"].includes(prop.type)) {
+    const entry = (keyId: string) => (isUpdate ? { keyId, add: true } : { keyId });
+    const passId = String(visitor.visitorPass?.[0]?.keyId ?? "");
+    payload.visitorPass = OBJECT_ID.test(passId) ? [entry(passId)] : [];
+    payload.passKeys =
+      prop.type === "contractor"
+        ? (visitor.passKeys ?? [])
+            .map((k) => String(k?.keyId ?? ""))
+            .filter((id) => OBJECT_ID.test(id))
+            .map(entry)
+        : [];
+  }
+
+  // Only contractors bring a crew.
+  if (prop.type === "contractor" && visitor.members?.length) {
+    payload.members = visitor.members.map((member: any) => {
+      const memberPass = String(member.visitorPass?.[0]?.keyId ?? "");
+      return {
+        name: String(member.name ?? "").trim(),
+        nric: member.nric,
+        contact: member.contact,
+        visitorPass: OBJECT_ID.test(memberPass) ? [{ keyId: memberPass }] : [],
+        // Web-only: the member's own entry pass.
+        ...(member.passType
+          ? { passType: member.passType, passQuantity: member.passQuantity, passCards: member.passCards }
+          : {}),
+      };
+    });
+  }
+
+  const userId = currentUser.value?._id;
+  if (isUpdate) {
+    // Registering a camera record promotes it; no unit name on an update.
+    if (formMode.value === "register") payload.status = "registered";
+    delete payload.unitName;
+    if (userId) payload.updatedBy = userId;
+    return payload;
+  }
+
+  payload.org = prop.org;
+  if (userId) payload.createdBy = userId;
+  // Registering a visitor at the guardhouse IS their arrival: checked in as it
+  // is created. A back-office user's visit opens with no times at all.
+  const userType = currentUser.value?.type ?? "";
+  if (BACK_OFFICE_USER_TYPES.test(userType)) {
+    payload.clientUserType = userType;
+    payload.checkIn = null;
+    payload.checkOut = null;
+  } else {
+    payload.checkIn = new Date().toISOString();
+  }
+  return payload;
+}
+
+// The ban / white list is answered as a \`code\` in a 200 response: nothing was
+// saved (isecure365 \`assertNotRejected\`), for every visitor type.
+function rejectedMessage(res: unknown): string {
+  const code =
+    typeof res === "number" ? res : (res as { code?: number } | null)?.code;
+  if (code === 900)
+    return "Unable to save. The visitor's plate number is on the ban list.";
+  if (code === 901)
+    return "Unable to save. The visitor's plate number is on the white list.";
+  return "";
+}
+
+/**
+ * The lead contractor and every member must each have their own phone number,
+ * NRIC and pass - checked again at Submit, as the lead's own fields can change
+ * after members were added.
+ */
+function crewDuplicateProblem(): string {
+  if (prop.type !== "contractor") return "";
+  const contacts = new Set<string>();
+  const nrics = new Set<string>();
+  const passes = new Set<string>();
+  const leadContact = visitor.contact?.trim() || "";
+  const leadNric = visitor.nric?.trim().toLowerCase() || "";
+  const leadPass = String(visitor.visitorPass?.[0]?.keyId ?? "");
+  if (leadContact) contacts.add(leadContact);
+  if (leadNric) nrics.add(leadNric);
+  if (leadPass) passes.add(leadPass);
+  for (const member of visitor.members ?? []) {
+    const who = member.name?.trim() || "A member";
+    const contact = member.contact?.trim() || "";
+    const nric = member.nric?.trim().toLowerCase() || "";
+    const pass = String(member.visitorPass?.[0]?.keyId ?? "");
+    if (contact && contacts.has(contact))
+      return `${who}: Phone Number is already used by the lead contractor or another member.`;
+    if (nric && nrics.has(nric))
+      return `${who}: NRIC is already used by the lead contractor or another member.`;
+    if (pass && passes.has(pass))
+      return `${who}: Pass is already used by the lead contractor or another member.`;
+    if (contact) contacts.add(contact);
+    if (nric) nrics.add(nric);
+    if (pass) passes.add(pass);
+  }
+  return "";
+}
+
+/** The server refused a pass or key ("Pass VP01 is In Use"): unselect it wherever it is picked. */
+function releaseRefusedPassKey(message: string) {
+  const name = refusedPassKeyName(message);
+  if (!name) return;
+  // A member's pass (known by name in the member picker), else the visitor's
+  // own pass - or keys, for a refused key. The pickers re-read what is
+  // Available the next time they are opened.
+  const ids = new Set<string>(memberInfoRef.value?.passIdsNamed?.(name) ?? []);
+  if (ids.size) {
+    memberInfoRef.value?.clearPasses?.(ids);
     return;
   }
-  if (!(await checkUnregisteredPlateBeforeContinue("next"))) return;
-  if (step < 3) contractorStep.value++;
-  else await submit();
+  if (/^\s*Key\b/i.test(message)) visitor.passKeys = [];
+  else visitor.visitorPass = [];
+  passInfoKey.value++;
 }
 
 async function submit(options: { skipNonCheckedOutCheck?: boolean } = {}) {
-  formRef.value!.validate();
   errorMessage.value = "";
-  if (!validForm.value) {
-    errorMessage.value = "Please complete all required fields *";
+  const result = await formRef.value?.validate?.();
+  const valid = result ? result.valid !== false : validForm.value;
+  if (!valid) {
+    errorMessage.value = "Please check input fields in red.";
     return;
   }
 
   if (passType.value === "HID_QR" && !validateHidQrReaderConfig()) return;
-  if (
-    prop.mode === "add" &&
-    !options.skipNonCheckedOutCheck &&
-    !(await checkNonCheckedOutVisitorsBeforeSubmit())
-  ) {
+
+  const duplicate = crewDuplicateProblem();
+  if (duplicate) {
+    errorMessage.value = duplicate;
     return;
   }
-  if (!(await checkUnregisteredPlateBeforeContinue("submit"))) return;
 
-  processing.value = true;
-
-  let payload: Partial<TVisitorPayload> = {
-    type: prop.type,
-    org: prop.org,
-    site: prop.site,
-    createdBy: prop.currentUser,
-  };
-
-  if (formMode.value === "add" || formMode.value === "register") {
-    const allowedFields = typeFieldMap[prop.type];
-    for (const key of allowedFields as (keyof TVisitorPayload)[]) {
-      // only what the form has (see isFormField)
-      if (isFormField(key) && visitor[key] !== undefined) {
-        payload = {
-          ...payload,
-          [key]: visitor[key],
-        };
-      }
+  // The entry pass (isecure365 `onSubmit`), messages verbatim.
+  if (prop.type === "contractor" && showEntryPassInformation.value) {
+    if (passType.value === "NFC" && passCards.value.length === 0) {
+      errorMessage.value = "Please select at least one NFC card before proceeding.";
+      return;
     }
-
-    const isGuest = prop.type === "guest";
-    const isWalkIn = prop.type === "walk-in";
-    const isContractor = prop.type === "contractor";
-    if (isGuest || isWalkIn || isContractor) {
-      payload.visitorPass = visitor.visitorPass;
-      payload.passKeys = visitor.passKeys;
+    if (passType.value === "QR" && availableQrCount.value === null) {
+      errorMessage.value = "Please wait while QR passes are being generated...";
+      return;
+    }
+    if (passType.value === "QR" && availableQrCount.value === 0) {
+      errorMessage.value =
+        "No QR passes available for this unit. Please add non-physical cards in Access Management.";
+      return;
+    }
+    if (passType.value === "QR" && !((passQuantity.value ?? 0) > 0)) {
+      errorMessage.value = "QR pass quantity must be at least 1.";
+      return;
     }
-
-    delete payload.createdBy;
   }
 
-  if (prop.type === "contractor") {
-    // contractor type logic payload
-    payload = {
-      ...payload,
-      members: visitor.members,
-    };
+  // The checks between a valid form and the save, in the app's order: the
+  // unregistered-plate match (not when registering), then the visitor's own
+  // open visits (only when the form has an NRIC or phone). A plain edit is not
+  // checked: the record itself is one of the open visits.
+  const plainEdit = prop.mode === "edit";
+  if (!plainEdit) {
+    if (
+      formMode.value !== "register" &&
+      isFormField("plateNumber") &&
+      !(await checkUnregisteredPlateBeforeContinue("submit"))
+    ) {
+      return;
+    }
+    if (
+      (isFormField("nric") || isFormField("contact")) &&
+      !options.skipNonCheckedOutCheck &&
+      !(await checkNonCheckedOutVisitorsBeforeSubmit())
+    ) {
+      return;
+    }
   }
 
-  if (prop.type === "delivery") {
-    payload = {
-      ...payload,
-      company: deliveryCompany.value,
-    };
-  }
-
-  // add register status when registering unregistered visitor
-  if (formMode.value === "register") {
-    payload.status = "registered";
-    const currentUserId = currentUser.value?._id;
-    if (currentUserId) {
-      payload.updatedBy = currentUserId;
+  processing.value = true;
+
+  const recordId = selectedUnregisteredVisitor.value?._id || prop.visitorData?._id || "";
+  const isUpdate = isSavingOntoRecord.value && Boolean(recordId);
+  // The listed spelling of the delivery company needs the site's list.
+  if (prop.type === "delivery") await ensureDeliveryCompanies();
+  if (isFormField("attachments")) {
+    try {
+      visitor.attachments = deliveryPhotos.value.length ? await uploadDeliveryPhotos() : [];
+    } catch {
+      errorMessage.value = "Unable to upload the photos. Please try again.";
+      processing.value = false;
+      return;
     }
   }
+  const payload = buildPayload(isUpdate);
 
   try {
-    let res;
-    if (prop.mode === "add" && selectedUnregisteredVisitor.value?._id) {
-      payload.status = "registered";
-      const currentUserId = currentUser.value?._id;
-      if (currentUserId) {
-        payload.updatedBy = currentUserId;
-      }
-      const { unitName, ...rest } = payload;
-      res = await updateVisitor(
-        selectedUnregisteredVisitor.value._id,
-        rest as TVisitorPayload
-      );
-    } else if (formMode.value === "add") {
-      res = await createVisitor(payload as TVisitorPayload);
-    } else if (
-      (prop.mode === "edit" || prop.mode === "register") &&
-      prop.visitorData?._id
-    ) {
-      const { unitName, ...rest } = payload;
-      res = await updateVisitor(prop.visitorData._id, rest as TVisitorPayload);
+    const res = isUpdate
+      ? await updateVisitor(recordId, payload as Partial<TVisitorPayload>)
+      : await createVisitor(payload as TVisitorPayload);
+
+    const rejected = rejectedMessage(res);
+    if (rejected) {
+      errorMessage.value = rejected;
+      return;
     }
 
-    if (res) {
-      if (passType.value === "HID_QR") {
-        const previewReady = await prepareHidQrCodePreview(getVisitorIdFromResponse(res));
-        if (!previewReady) return;
-        hidQrPendingCompletion.value = createMore.value ? "done:more" : "done";
-        return;
-      }
+    if (!res) return;
 
-      if (
-        prop.type === "contractor" &&
-        (passType.value === "QR" || passType.value === "NFC")
-      ) {
-        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)}` : ""
-          }`
-        );
-        if (visitorId && acmUrl) {
-          const passRes = await createVisitorPass({
-            site: prop.site,
-            unitId: visitor.unit!,
-            quantity: passQuantity.value ?? 1,
-            type: passType.value === "QR" ? "QRCODE" : passType.value,
-            nfcCards: passCards.value,
-            acm_url: acmUrl,
-            user: {
-              visitorId,
-              name: visitor.name,
-              nric: visitor.nric,
-              contact: visitor.contact,
-              company: visitor.company,
-              type: visitor.type,
-              plateNumber: visitor.plateNumber,
-            },
-          });
+    // A delivery company typed in that is not on the site's list yet.
+    if (prop.type === "delivery" && typeof payload.company === "string") {
+      await ensureDeliveryCompanyInList(payload.company);
+    }
 
-          if (passType.value === "QR") {
-            const accessCards: any[] =
-              (passRes as any)?.data?.accessCards ?? [];
-            const printer = entryPassSettings.value?.data?.settings?.printer;
-            if (!printer?.vendorId || !printer?.productId) {
-              console.warn("[QR Print] Aborted: no printer configured.");
-            } else if (!accessCards.length) {
-              console.warn("[QR Print] Aborted: accessCards is empty.");
-            } else {
-              const vendorId = parseInt(printer.vendorId);
-              const productId = parseInt(printer.productId);
-              const companyName = visitor.company || "";
-              const blockLabel =
-                blocksArray.value.find((b: any) => b.value === visitor.block)
-                  ?.title || "";
-              const levelLabel =
-                levelsArray.value.find((l: any) => l.value === visitor.level)
-                  ?.title || "";
-              const unitLabel =
-                unitsArray.value.find((u: any) => u.value === visitor.unit)
-                  ?.title || "";
-              const address = [blockLabel, levelLabel, unitLabel]
-                .filter(Boolean)
-                .join("/");
-
-              await nextTick();
-              for (const qrCode of accessCards) {
-                const signed = await signQr({
-                  cardId: qrCode._id,
-                  purpose: "vms",
-                });
-                const qrData = signed?.data;
-                if (!qrData) {
-                  console.warn(
-                    "[QR Print] Skipping card",
-                    qrCode._id,
-                    "— signQr returned no data."
-                  );
-                  continue;
-                }
-                const printResult = await testConnection(
-                  vendorId,
-                  productId,
-                  true,
-                  qrData,
-                  qrCode.accessLevel,
-                  qrCode.liftAccessLevel,
-                  companyName,
-                  address
-                );
-              }
-            }
-          }
-        }
-      }
-      if (createMore.value) {
-        emit("done:more");
-      } else emit("done");
+    const visitorId = isUpdate ? recordId : getVisitorIdFromResponse(res);
+
+    if (passType.value === "HID_QR") {
+      const previewReady = await prepareHidQrCodePreview(visitorId);
+      if (!previewReady) return;
+      hidQrPendingCompletion.value = createMore.value ? "done:more" : "done";
+      return;
+    }
+
+    // The contractor's entry pass, issued once the visitor exists - for a
+    // register too, against the record being registered.
+    if (
+      prop.type === "contractor" &&
+      showEntryPassInformation.value &&
+      (passType.value === "QR" || passType.value === "NFC")
+    ) {
+      await issueEntryPass(visitorId, payload);
     }
+
+    if (createMore.value) {
+      emit("done:more");
+    } else emit("done");
   } catch (error: any) {
-    const err = error?.data?.message;
+    const err = error?.data?.message || error?.response?._data?.message;
     errorMessage.value =
       err ||
-      `Failed to ${formMode.value === "add" ? "add" : "update"
-      } visitor. Please try again.`;
+      `Failed to ${isUpdate ? "update" : "add"} visitor. Please try again.`;
+    // "Pass VP01 is In Use": the pass is taken off the form so another (or
+    // none) can be picked and submitted again (isecure365).
+    if (err) releaseRefusedPassKey(err);
   } finally {
     processing.value = false;
   }
 }
 
+/** Never fails the save: the visitor is already saved. */
+async function issueEntryPass(visitorId: string, payload: Record<string, unknown>) {
+  if (!visitorId) return;
+  try {
+    const rawUrl = entryPassSettings.value?.data?.settings?.url;
+    const { encrypted: acmUrl } = await $fetch<{ encrypted: string }>(
+      `/api/encrypt-acm-url${rawUrl ? `?url=${encodeURIComponent(rawUrl)}` : ""}`
+    );
+    if (!acmUrl) throw new Error("The entry pass address could not be read.");
+    const passRes = await createVisitorPass({
+      site: prop.site,
+      unitId: visitor.unit!,
+      quantity:
+        passType.value === "NFC" ? passCards.value.length : passQuantity.value ?? 1,
+      type: passType.value === "QR" ? "QRCODE" : passType.value,
+      nfcCards: passType.value === "NFC" ? passCards.value : [],
+      acm_url: acmUrl,
+      user: {
+        visitorId,
+        name: payload.name,
+        nric: payload.nric,
+        contact: payload.contact,
+        company: payload.company,
+        type: payload.type,
+        plateNumber: payload.plateNumber,
+      },
+    } as any);
+
+    if (passType.value === "QR") {
+      const accessCards: any[] = (passRes as any)?.data?.accessCards ?? [];
+      const printer = entryPassSettings.value?.data?.settings?.printer;
+      if (!printer?.vendorId || !printer?.productId) {
+        console.warn("[QR Print] Aborted: no printer configured.");
+      } else if (!accessCards.length) {
+        console.warn("[QR Print] Aborted: accessCards is empty.");
+      } else {
+        const vendorId = parseInt(printer.vendorId);
+        const productId = parseInt(printer.productId);
+        const companyName = String(payload.company ?? "");
+        const address = buildVisitorAddress();
+
+        await nextTick();
+        for (const qrCode of accessCards) {
+          const signed = await signQr({
+            cardId: qrCode._id,
+            purpose: "vms",
+          });
+          const qrData = signed?.data;
+          if (!qrData) {
+            console.warn("[QR Print] Skipping card", qrCode._id, "— signQr returned no data.");
+            continue;
+          }
+          await testConnection(
+            vendorId,
+            productId,
+            true,
+            qrData,
+            qrCode.accessLevel,
+            qrCode.liftAccessLevel,
+            companyName,
+            address
+          );
+        }
+      }
+    }
+  } catch (error: any) {
+    showSnackbar(
+      `Visitor saved, pass not issued. The visitor was registered, but the entry pass could not be issued. ${error?.data?.message ?? error?.message ?? ""}`.trim(),
+      "error"
+    );
+  }
+}
+
 function parseUsbId(value: unknown) {
   if (typeof value === "number") return value;
   const text = String(value || "").trim();
@@ -2479,28 +3541,106 @@ watch(
   }
 );
 
-const membersFieldIncomplete = computed(() => {
-  if (!visitor.members || visitor.members.length === 0) return false;
-
-  return visitor.members.some((member) => {
-    const hasName = !!member.name;
-    const hasNric = !!member.nric;
-    const hasContact = !!member.contact;
-
-    return !hasName || !hasNric || !hasContact;
-  });
-});
-
 onMounted(() => {
-  contractorStep.value = 1;
   currentAutofillSource.value = null;
 
+  // A delivery is Food unless changed.
+  if (prop.type === "delivery" && !visitor.deliveryType) visitor.deliveryType = "food";
+
+  // Registering a camera record: only its plate is filled in (editable); the
+  // guard keys in the rest, and the save updates the record by its id.
   if (prop.mode === "register" && prop.visitorData) {
-    visitor.plateNumber = prop.visitorData?.plateNumber || "";
+    visitor.plateNumber = (prop.visitorData?.plateNumber || "").toUpperCase();
+
+    // The camera's plate is looked up after the form has opened (security
+    // mobile app `runPrefilledLookups`): one person with nothing to choose
+    // fills only the empty fields, otherwise the matches are offered. Not for
+    // pick-up / drop-off, which carry no person. Does not hold the form back.
+    if ((visitor.plateNumber?.trim() || "").length >= 4) {
+      void lookup("vehicleNumber", { prefilled: true });
+    }
   }
 });
 </script>
 <style scoped>
+/*
+ * Pass / key / NFC chips: dark bold text and border on the card surface
+ * (theme colours), 28px, the icon keeping its colour - the same chips as the
+ * visitor list's Check In/Out column.
+ */
+/* Whose passes and keys these are, above the scanner. */
+.visitor-return__who {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  margin-bottom: 12px;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 8px;
+  font-size: 0.9375rem;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.visitor-return__who-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* The section headings in the return dialogs: readable at a glance. */
+.visitor-return__label {
+  margin: 6px 0 8px;
+  font-size: 1rem;
+  font-weight: 600;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.visitor-pass-chip.v-chip {
+  --v-chip-height: 28px;
+  font-size: 0.8125rem;
+  padding: 0 10px;
+  background: rgb(var(--v-theme-surface));
+  color: rgb(var(--v-theme-on-surface));
+  border: 1.5px solid rgba(var(--v-theme-on-surface), 0.87);
+  letter-spacing: 0;
+}
+
+/* In the return dialogs: the same height as the status dropdown beside it. */
+.visitor-pass-chip--field.v-chip {
+  --v-chip-height: 40px;
+  font-size: 0.875rem;
+  padding: 0 14px;
+}
+
+.visitor-pass-chip--pass :deep(.v-chip__prepend .v-icon) {
+  color: #1565c0;
+}
+
+.visitor-pass-chip--key :deep(.v-chip__prepend .v-icon) {
+  color: #e65100;
+}
+
+.visitor-pass-chip--nfc :deep(.v-chip__prepend .v-icon) {
+  color: #7b1fa2;
+}
+
+/* A Scan button beside its input, the same height (both 40px), like the
+   country code beside the phone number - not on the label's line. */
+.scan-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.scan-row__field {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.scan-row__btn {
+  flex: 0 0 auto;
+}
+
 .button-outline-class {
   border: 1px solid rgba(var(--v-theme-primary));
 }
@@ -2566,6 +3706,17 @@ onMounted(() => {
    Deliberately NOT the shared `.screen-modal__footer` - that class is on the
    batch-D branch (#1150) and not on this base, and adding a second copy of it
    to `screens.css` here would collide with that PR. */
+/* The photo carousel: rounded, clipped to its frame. */
+.visitor-form__photos {
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+/* Small confirm / edit dialogs: the body lines up with the title. */
+.visitor-form__dialog-body {
+  padding: 4px 16px 0;
+}
+
 .visitor-form__footer {
   display: flex;
   justify-content: flex-end;