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

package/components/MemberInformation.vue

@@ -1,116 +1,158 @@
 <template>
+  <!--
+    The contractor's crew, as the security mobile app (isecure365
+    `contractor-members.tsx` + `add.tsx` addMember): a "Members" heading with
+    "Add Member", the members added so far as cards (each with Remove), and the
+    member input (NRIC, phone, name, pass) in a dialog that "Add Member" opens.
+    The dialog's "Add" is where a member is checked; "Cancel" empties the input
+    and closes it, so nothing half-entered is left behind.
+  -->
   <v-row no-gutters class="w-100">
-    <AppCard class="w-100 pa-4">
-        <!-- GHOST, not primary: the handoff names "Scan QR Code" in its
-             ghost/secondary list, alongside Bulk Upload, Download Report and
-             Export. Stays a `v-btn` because `block` has no AppButton
-             equivalent, so the design's button is applied as a class. -->
-        <v-btn block :height="38" text="Scan QR Code" variant="outlined"
-          class="screen-btn-ghost" prepend-icon="mdi-qrcode" @click="handleScanQRPass" />
-        <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorScanPassMessage = ''">
-          <v-row no-gutters class="pt-5 ga-2">
-            <v-col cols="12">
-              <InputLabel class="text-capitalize" title="Full Name (Required)" required />
-              <v-text-field v-model.trim="memberForm.name" density="compact" hide-details :rules="[requiredRule]" />
-            </v-col>
-
-            <v-col cols="12">
-              <InputLabel class="text-capitalize" title="NRIC (Required)" required />
-              <v-menu v-model="memberNRICSearchMenu" location="bottom" offset-y :close-on-content-click="false">
-                <template #activator="{ props: menuProps }">
-                  <InputNRICNumber v-bind="menuProps" v-model.trim="memberForm.nric" density="compact" hide-details
-                    :rules="[requiredRule]" :key="memberCurrentAutofillSource + 'member-nric-key'"
-                    @focus="isMemberNRICFieldFocused = true" @blur="isMemberNRICFieldFocused = false"
-                    @update:model-value="handleUpdateMemberNRIC" />
-                </template>
-
-                <v-list v-if="memberNRICSearchResults.length" class="pa-1 phone-search-results">
-                  <v-list-item v-for="(item, index) in memberNRICSearchResults" :key="item._id || index"
-                    class="cursor-pointer nric-search-item" @click="selectMemberNRICSearchResult(item)">
-                    <VisitorSearchResultSummary :item="item" />
-                  </v-list-item>
-                </v-list>
-              </v-menu>
-            </v-col>
-
-            <v-col cols="12">
-              <InputLabel class="text-capitalize" title="Phone Number (Required)" required />
-              <v-menu v-model="memberPhoneSearchMenu" location="bottom" offset-y :close-on-content-click="false">
-                <template #activator="{ props: menuProps }">
-                  <InputPhoneNumberV2 v-bind="menuProps" v-model="memberForm.contact" density="compact"
-                    default-country="SG" hide-details :key="memberCurrentAutofillSource + 'member-phone-key'"
-                    @focus="isMemberPhoneFieldFocused = true" @blur="isMemberPhoneFieldFocused = false"
-                    @update:model-value="handleUpdateMemberPhoneNumber" />
-                </template>
-
-                <v-list v-if="memberPhoneSearchResults.length" class="pa-1 phone-search-results">
-                  <v-list-item v-for="(item, index) in memberPhoneSearchResults" :key="item._id || index"
-                    class="cursor-pointer nric-search-item" @click="selectMemberPhoneNumberSearchResult(item)">
-                    <VisitorSearchResultSummary :item="item" />
-                  </v-list-item>
-                </v-list>
-              </v-menu>
-            </v-col>
-
-            <v-col cols="12">
-              <v-autocomplete v-model="selectedPass" v-model:search="passInput" :hide-no-data="false" class="mt-3"
-                :items="passItemsFilteredFinal" item-title="prefixAndName" item-value="_id" label="Pass (Optional)"
-                variant="outlined" density="compact" :error-messages="errorScanPassMessage" persistent-hint small-chips
-                :clearable="clearable" @click="fetchPasses">
-                <template v-slot:no-data>
-                  <v-list-item density="compact">
-                    <v-list-item-title v-if="passInput">
-                      No results matching "<strong>{{ passInput }}</strong>". This value will be added as new option.
-                    </v-list-item-title>
-                    <v-list-item v-else>No data available</v-list-item>
-                  </v-list-item>
-                </template>
-
-                <template v-slot:chip="{ props, item }">
-                  <v-chip v-if="selectedPass" v-bind="props" prepend-icon="mdi-card-bulleted-outline"
-                    :text="item.raw?.prefixAndName"></v-chip>
-                </template>
-              </v-autocomplete>
-            </v-col>
-
-            <v-col v-if="props.unitId" cols="12">
-              <EntryPassInformation v-model="memberPassType" v-model:quantity="memberPassQuantity"
-                v-model:cards="memberPassCards" :settings="props.settings" :loading="props.settingsLoading"
-                :site-id="props.site" :unit-id="props.unitId" :visitor-type="props.type"
-                :hid-qr-code-enabled="props.hidQrCodeEnabled" :hid-qr-printer-configured="props.hidQrPrinterConfigured"
-                :hid-reader-name="props.hidReaderName" :hid-portal-name="props.hidPortalName"
-                :excluded-card-ids="props.selectedNfcCards.map((c) => c._id)" />
-            </v-col>
-
-            <v-row class="pt-3" justify="space-between">
-              <v-col cols="6">
-                <!-- The primitive rather than a class on a v-btn: these two
-                     need nothing Vuetify owns, and AppButton is the only way
-                     they draw at the handoff's 40px / 38px. -->
-                <AppButton icon="mdi-plus" :disabled="!validForm" @click="handleAddMember">
-                  Add Member
-                </AppButton>
+    <div class="w-100 d-flex align-center justify-space-between ga-2">
+      <InputLabel class="text-capitalize" :title="`Members (${committedMembers.length})`" />
+      <AppButton icon="mdi-plus" data-test="member-add-open"
+        :disabled="committedMembers.length >= props.max" @click="openAddMember">
+        Add Member
+      </AppButton>
+    </div>
+    <p v-if="committedMembers.length === 0" class="text-caption text-medium-emphasis mt-1 w-100">
+      Add anyone entering with this contractor. Skip if they are alone.
+    </p>
+
+    <v-row v-if="committedMembers.length > 0" no-gutters class="w-100 mt-3 ga-3">
+      <template v-for="(member, index) in membersDisplayed" :key="(member.nric || '') + index">
+        <CardMemberInfoSummary :member="member" @remove="handleRemoveMember(index)" />
+      </template>
+    </v-row>
+
+    <v-dialog v-model="dialog.addMember" max-width="520" persistent>
+      <v-card class="screen-modal" :loading="adding">
+        <div class="member-dialog__head">
+          <v-card-title>Add Member</v-card-title>
+          <v-btn icon="mdi-close" variant="text" aria-label="Close" @click="cancelAddMember" />
+        </div>
+
+        <div class="screen-modal__body member-dialog__body filter-field">
+          <v-form ref="formRef" :disabled="adding" @submit.prevent>
+            <v-row no-gutters class="pt-2 ga-2">
+              <v-col cols="12">
+                <!-- Eye and Scan, as the security mobile app's member NRIC. -->
+                <InputLabel class="text-capitalize" title="NRIC / Passport / ID No. (Required)" required />
+                <div class="scan-row">
+                  <div class="scan-row__field">
+                <v-menu v-model="memberNRICSearchMenu" location="bottom" offset-y :close-on-content-click="false">
+                  <template #activator="{ props: menuProps }">
+                    <InputNRICNumber v-bind="menuProps" v-model.trim="memberForm.nric" density="compact" hide-details
+                      masked :key="memberCurrentAutofillSource + 'member-nric-key'"
+                      @focus="isMemberNRICFieldFocused = true" @blur="isMemberNRICFieldFocused = false"
+                      @update:model-value="handleUpdateMemberNRIC" />
+                  </template>
+
+                  <v-list v-if="memberNRICSearchResults.length" class="pa-1 phone-search-results">
+                    <v-list-item v-for="(item, index) in memberNRICSearchResults" :key="item._id || index"
+                      class="cursor-pointer nric-search-item" @click="memberSelectAutofillSearchResult(item, 'nric')">
+                      <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>
+                  </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="member-nric-scan"
+                    :disabled="adding" @click="memberNricScanOpen = true">Scan</v-btn>
+                </div>
               </v-col>
-              <v-col cols="6" align="end">
-                <AppButton variant="ghost" icon="mdi-refresh" @click.stop="handleClearForm">
-                  Clear Form
-                </AppButton>
+
+              <v-col cols="12">
+                <InputLabel class="text-capitalize" title="Phone Number (Required)" required />
+                <v-menu v-model="memberPhoneSearchMenu" location="bottom" offset-y :close-on-content-click="false">
+                  <template #activator="{ props: menuProps }">
+                    <InputPhoneNumberV2 v-bind="menuProps" v-model="memberForm.contact" density="compact"
+                      default-country="SG" hide-details :key="memberCurrentAutofillSource + 'member-phone-key'"
+                      @focus="isMemberPhoneFieldFocused = true" @blur="isMemberPhoneFieldFocused = false"
+                      @update:model-value="handleUpdateMemberPhoneNumber" />
+                  </template>
+
+                  <v-list v-if="memberPhoneSearchResults.length" class="pa-1 phone-search-results">
+                    <v-list-item v-for="(item, index) in memberPhoneSearchResults" :key="item._id || index"
+                      class="cursor-pointer nric-search-item" @click="memberSelectAutofillSearchResult(item, 'contact')">
+                      <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>
+                  </v-list>
+                </v-menu>
+              </v-col>
+
+              <v-col cols="12">
+                <InputLabel class="text-capitalize" title="Name (Required)" required />
+                <v-text-field v-model.trim="memberForm.name" density="compact" hide-details />
+              </v-col>
+
+              <!-- The member's Visitor Pass: only with See All Passes And Keys AND
+                   Update Passes And Keys, as the security mobile app. -->
+              <v-col v-if="props.canAssignPassKeys" cols="12">
+                <InputLabel class="text-capitalize mt-2" title="Visitor Pass (Optional)" />
+                <p v-if="props.passDisabledMessage" class="text-caption text-medium-emphasis mt-1">
+                  {{ props.passDisabledMessage }}
+                </p>
+                <div v-else class="scan-row">
+                  <div class="scan-row__field">
+                <v-autocomplete v-model="selectedPass" v-model:search="passInput" :hide-no-data="false"
+                  :items="passItemsFilteredFinal" item-title="prefixAndName" item-value="_id"
+                  variant="outlined" density="compact" :error-messages="errorScanPassMessage" small-chips
+                  :clearable="clearable" :loading="isPassListLoading" @click="fetchPasses">
+                  <template v-slot:no-data>
+                    <v-list-item density="compact">
+                      <v-list-item-title>No passes available</v-list-item-title>
+                    </v-list-item>
+                  </template>
+                  <template v-slot:chip="{ props: chipProps, item }">
+                    <v-chip v-if="selectedPass" v-bind="chipProps" prepend-icon="mdi-card-bulleted-outline"
+                      :text="item.raw?.prefixAndName"></v-chip>
+                  </template>
+                </v-autocomplete>
+                  </div>
+                  <v-btn variant="flat" class="text-none screen-btn-primary scan-row__btn" prepend-icon="mdi-qrcode"
+                    :disabled="adding" @click="handleScanQRPass">Scan Pass</v-btn>
+                </div>
+              </v-col>
+
+              <!-- Web-only: a member's own entry pass. -->
+              <v-col v-if="props.unitId && props.showEntryPass" cols="12">
+                <EntryPassInformation v-model="memberPassType" v-model:quantity="memberPassQuantity"
+                  v-model:cards="memberPassCards" :settings="props.settings" :loading="props.settingsLoading"
+                  :site-id="props.site" :unit-id="props.unitId" :visitor-type="props.type"
+                  :hid-qr-code-enabled="props.hidQrCodeEnabled" :hid-qr-printer-configured="props.hidQrPrinterConfigured"
+                  :hid-reader-name="props.hidReaderName" :hid-portal-name="props.hidPortalName"
+                  :excluded-card-ids="props.selectedNfcCards.map((c) => c._id)" />
               </v-col>
             </v-row>
-          </v-row>
-        </v-form>
-    </AppCard>
+          </v-form>
+        </div>
+
+        <p v-if="memberError" class="member-dialog__error" data-test="member-error">{{ memberError }}</p>
+
+        <div class="member-dialog__footer">
+          <AppButton variant="ghost" @click="cancelAddMember">Cancel</AppButton>
+          <AppButton data-test="member-add" :disabled="adding" @click="addMember">Add</AppButton>
+        </div>
+      </v-card>
+    </v-dialog>
+
     <visitor-pass-key-q-r-scanner :dialog="dialog.scanQRCode" v-model:scannedValue="scannedPassValue"
       @close-dialog="dialog.scanQRCode = false" />
+    <NricScanDialog v-model="memberNricScanOpen" @read="handleMemberNricScanRead" />
+
+    <!-- The number chooser (no title, Back / Fill In), as the security mobile app. -->
     <v-dialog v-model="dialog.memberAutofillOptions" max-width="430">
       <v-card v-if="memberSelectedSearchResult" class="nric-options-card screen-modal">
-        <v-card-actions class="justify-end pa-1">
-          <v-btn icon="mdi-close" variant="text" size="small" @click="memberCloseAutofillOptions" />
-        </v-card-actions>
-
-        <v-card-text class="pa-4 pt-1">
-          <h2 class="nric-options-title font-weight-bold mb-4">Select</h2>
-
+        <v-card-text class="pa-4">
           <div class="nric-selected-person d-flex align-center justify-space-between ga-3 mb-5">
             <span>{{ memberSelectedSearchResult.name || "Unknown" }}</span>
             <span class="text-no-wrap">
@@ -118,39 +160,39 @@
             </span>
           </div>
 
-          <template v-if="
-            (!memberForm.contact ||
-              memberCurrentAutofillSource === 'contact') &&
-            memberSelectedContactOptions.length >= 1
-          ">
-            <h3 class="nric-options-section-title font-weight-bold mb-2">
-              Contact
-            </h3>
-            <v-radio-group v-model="memberSelectedContact" hide-details color="success" class="nric-option-group">
+          <template v-if="memberSelectedContactOptions.length >= 1">
+            <h3 class="nric-options-section-title font-weight-bold mb-2">Contact</h3>
+            <v-radio-group v-model="memberSelectedContact" hide-details color="accent" class="nric-option-group">
               <v-radio v-for="contact in memberSelectedContactOptions" :key="contact" :label="contact" :value="contact"
                 class="nric-option-radio" />
             </v-radio-group>
           </template>
         </v-card-text>
 
-        <v-card-actions class="justify-end px-4 pb-4">
-          <v-btn variant="outlined" class="screen-btn-ghost" size="small" @click="memberCloseAutofillOptions">
-            Cancel
-          </v-btn>
-          <v-btn variant="flat" class="screen-btn-primary px-5" size="small"
-            @click="memberConfirmAutofillOptions">
-            Select
-          </v-btn>
-        </v-card-actions>
+        <div class="member-dialog__footer">
+          <AppButton variant="ghost" @click="memberChooserBack">Back</AppButton>
+          <AppButton @click="memberConfirmAutofillOptions">Fill In</AppButton>
+        </div>
       </v-card>
     </v-dialog>
-    <v-divider class="my-3" />
-    <v-row v-if="committedMembers.length > 0" no-gutters class="w-100 mt-5 ga-3">
-      <template v-for="(member, index) in committedMembers" :key="member.nric">
-        <CardMemberInfoSummary :member="membersDisplayed[index]" @remove="handleRemoveMember(index)" />
-      </template>
-    </v-row>
-    <!-- <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" /> -->
+
+    <v-dialog v-model="dialog.deletePerson" max-width="430">
+      <v-card class="screen-modal">
+        <div class="member-dialog__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="member-dialog__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>
+
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
 </template>
 
@@ -158,6 +200,17 @@
 import type { PropType } from "vue";
 import usePassKey from "../composables/usePassKey";
 import useUtils from "../composables/useUtils";
+import usePeople from "../composables/usePeople";
+import { errorConverter } from "../utils/data";
+import {
+  DELETE_PERSON_TITLE,
+  PERSON_DELETED_MESSAGE,
+  deletePersonMessage,
+  personKey,
+  recordIdsOf,
+  summaryContacts,
+  type VisitorPerson,
+} from "../utils/visitor-people";
 
 const props = defineProps({
   type: {
@@ -192,6 +245,10 @@ const props = defineProps({
     type: String as PropType<string | null>,
     default: null,
   },
+  showEntryPass: {
+    type: Boolean,
+    default: false,
+  },
   hidQrCodeEnabled: {
     type: Boolean,
     default: false,
@@ -212,25 +269,57 @@ const props = defineProps({
     type: Array as PropType<{ _id: string; cardNo: string }[]>,
     default: () => [],
   },
+  /** See All Passes And Keys AND Update Passes And Keys. */
+  canAssignPassKeys: {
+    type: Boolean,
+    default: false,
+  },
+  /** Set: the member's pass picker is locked and shows this. */
+  passDisabledMessage: {
+    type: String,
+    default: "",
+  },
+  /** The lead contractor's NRIC and phone (E.164), for the duplicate checks. */
+  leadNric: {
+    type: String,
+    default: "",
+  },
+  leadContact: {
+    type: String,
+    default: "",
+  },
+  /**
+   * Any visit of this member still open? Resolves true when clear. The form
+   * owns the "already inside" dialog (check-out, pass / key return), so it is
+   * asked here and, once the member's visits are checked out, calls
+   * `addMember()` again.
+   */
+  checkOpenVisits: {
+    type: Function as PropType<(member: { nric: string; contact: string }) => Promise<boolean>>,
+    default: null,
+  },
+  max: {
+    type: Number,
+    default: 10,
+  },
 });
 
-const { requiredRule, debounce, maskNRIC } = useUtils();
+const { maskNRIC } = useUtils();
 const { getPassKeysByPageSearch } = usePassKey();
-const {
-  findPersonByNRICMultipleResult,
-  findPersonByPhoneNumberMultipleResult,
-} = usePeople();
+const { findVisitorPeopleAnyType, deletePersonRecords } = usePeople();
 
-const memberForm = reactive<TMemberInfo>({
+const emptyMember = (): TMemberInfo => ({
   name: "",
   nric: "",
   visitorPass: [] as { keyId: string }[],
   contact: "",
 });
 
-const validForm = ref(false);
-const formRef = ref<HTMLFormElement>();
-const processing = ref(false);
+const memberForm = reactive<TMemberInfo>(emptyMember());
+
+const formRef = ref<any>();
+const adding = ref(false);
+const memberError = ref("");
 const errorScanPassMessage = ref("");
 
 const message = ref("");
@@ -249,8 +338,10 @@ const passItems = ref<TPassKey[]>([]);
 const scannedPassValue = ref<string>("");
 
 const dialog = reactive({
+  addMember: false,
   scanQRCode: false,
   memberAutofillOptions: false,
+  deletePerson: false,
 });
 
 const selectedPass = ref<string>("");
@@ -259,37 +350,33 @@ const memberPassQuantity = ref<number | null>(1);
 const memberPassCards = ref<{ _id: string; cardNo: string }[]>([]);
 
 const members = defineModel<TMemberInfo[]>({ required: true, default: [] });
-const committedMembers = ref<TMemberInfo[]>([]);
+const committedMembers = ref<TMemberInfo[]>([...(members.value ?? [])]);
+
+// The model is the members added - never a half-typed input.
+watch(
+  committedMembers,
+  (list) => {
+    members.value = [...list];
+  },
+  { deep: true }
+);
 
 type AutofillSource = "nric" | "contact" | null;
-type SearchPerson = Omit<Partial<TPeople>, "contact"> & {
-  contact?: string | string[];
-  contacts?: string | string[];
-};
 
 const memberPhoneSearchMenu = ref(false);
 const memberNRICSearchMenu = ref(false);
 const isMemberPhoneFieldFocused = ref(false);
 const isMemberNRICFieldFocused = ref(false);
-const memberPhoneSearchResults = ref<Partial<TPeople>[]>([]);
-const memberNRICSearchResults = ref<Partial<TPeople>[]>([]);
+const memberPhoneSearchResults = ref<VisitorPerson[]>([]);
+const memberNRICSearchResults = ref<VisitorPerson[]>([]);
 const memberCurrentAutofillSource = ref<AutofillSource>(null);
-const memberSelectedSearchResult = ref<Partial<TPeople> | null>(null);
+const memberSelectedSearchResult = ref<VisitorPerson | null>(null);
 const memberSelectedContact = ref("");
+const memberChooserResults = ref<VisitorPerson[]>([]);
 const skipMemberNRICFetch = ref(false);
-
-// Always keep the model in sync: committed members + current form draft
-watch(
-  () => memberForm,
-  (newForm) => {
-    if (memberForm.name && memberForm.nric && memberForm.contact) {
-      members.value = [...committedMembers.value, { ...newForm }];
-    } else {
-      members.value = [...committedMembers.value];
-    }
-  },
-  { deep: true }
-);
+// The person each field already filled in, so editing the field afterwards
+// does not put them back on every keystroke.
+const autoFilled: Record<string, string> = {};
 
 const passTypesComputed = computed(() => {
   if (props.type === "contractor") {
@@ -306,8 +393,6 @@ const passTypesComputed = computed(() => {
 const isPassListLoading = ref(false);
 
 async function fetchPasses() {
-  // load pass list
-  passItems.value = [];
   isPassListLoading.value = true;
   try {
     const result = await getPassKeysByPageSearch({
@@ -318,7 +403,7 @@ async function fetchPasses() {
       statuses: ["Available"],
       sortBy: { column: "prefixAndName", order: "1" },
     });
-    passItems.value = result?.items;
+    passItems.value = result?.items ?? [];
   } catch (error) {
     showMessage(errorConverter(error as string), "error");
   } finally {
@@ -326,6 +411,7 @@ async function fetchPasses() {
   }
 }
 
+// Passes taken by the lead or another member are not offered.
 const passItemsFilteredFinal = computed(() => {
   return passItems.value.filter((item: TPassKey) => {
     return (
@@ -339,41 +425,53 @@ const passItemsFilteredFinal = computed(() => {
   });
 });
 
+const passNames = ref<Record<string, string>>({});
+watch(passItems, (items) => {
+  for (const item of items ?? []) {
+    if (item?._id) passNames.value[item._id] = item.prefixAndName ?? "";
+  }
+});
+
+// Cards: name, phone, masked NRIC, and the pass only when one is held.
 const membersDisplayed = computed(() => {
   return committedMembers.value.map((member: TMemberInfo) => {
+    const passId = member.visitorPass?.[0]?.keyId ?? "";
     return {
-      ...member,
-      visitorPass:
-        passItems.value.find(
-          (item: TPassKey) => item._id === member.visitorPass?.[0]?.keyId
-        )?.prefixAndName || "",
-    };
+      name: member.name,
+      contact: member.contact,
+      nric: maskNRIC(member.nric) || member.nric,
+      visitorPass: passId ? passNames.value[passId] || "" : "",
+    } as unknown as TMemberInfo;
   });
 });
 
 function handleScanQRPass() {
   errorScanPassMessage.value = "";
   dialog.scanQRCode = true;
+  if (passItems.value.length === 0) void fetchPasses();
 }
 
 watch(selectedPass, (newVal) => {
   memberForm.visitorPass = [...(newVal ? [{ keyId: newVal }] : [])];
 });
 
-watch(scannedPassValue, (newVal) => {
+watch(scannedPassValue, async (newVal) => {
   if (!newVal) return;
+  const scanned = String(newVal).trim().toLowerCase();
+  if (passItems.value.length === 0) await fetchPasses();
 
   const matchedPass = passItemsFilteredFinal.value.find(
-    (p) => p.prefixAndName === newVal
+    (p) => (p.prefixAndName ?? "").toLowerCase() === scanned
   );
 
   if (matchedPass) {
     selectedPass.value = matchedPass._id ?? "";
+    showMessage(`Pass ${matchedPass.prefixAndName} selected.`, "success");
     return;
   }
 
-  errorScanPassMessage.value = "Scanned pass not available";
-  showMessage("Scanned pass not available", "error");
+  errorScanPassMessage.value = `Pass "${newVal}" is not available.`;
+  showMessage(errorScanPassMessage.value, "error");
 });
 
 function resetAccessCard() {
@@ -382,25 +480,6 @@ function resetAccessCard() {
   memberPassCards.value = [];
 }
 
-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 toUniqueStringArray(value: unknown) {
-  const rawValues = Array.isArray(value) ? value : value ? [value] : [];
-  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 findMatchingContactOption(options: string[], value?: string | null) {
   const normalizedValue = value?.trim();
   if (!normalizedValue) return "";
@@ -419,90 +498,92 @@ function findMatchingContactOption(options: string[], value?: string | null) {
 
 const memberSelectedContactOptions = computed(() => {
   return memberSelectedSearchResult.value
-    ? getPersonContactOptions(memberSelectedSearchResult.value)
+    ? summaryContacts(memberSelectedSearchResult.value)
     : [];
 });
 
-const {
-  data: fetchMemberByPhoneNumber,
-  refresh: fetchMemberByPhoneNumberRefresh,
-} = useLazyAsyncData(`fetch-member-phone-number-${props.site}`, () => {
-  const contact = memberForm.contact?.trim() || "";
-  if (contact.length < 4) return Promise.resolve(null);
-  const type = props.type === "walk-in" ? "guest" : props.type;
-  return findPersonByPhoneNumberMultipleResult(contact, props.site, type);
-});
-
-watch(fetchMemberByPhoneNumber, (obj) => {
-  memberPhoneSearchResults.value = getPeopleSearchItems(obj);
-  memberPhoneSearchMenu.value = memberPhoneSearchResults.value.length > 0;
-});
+// Member NRIC / phone lookups (isecure365 `scheduleMemberLookup`): 4
+// characters or more, 500 ms after the last keystroke, across every visitor
+// type. One person is filled in straight away (or the chooser opens).
+const lookupTimers: Record<string, ReturnType<typeof setTimeout> | undefined> = {};
 
-const debounceFetchMemberPhoneNumber = debounce(
-  fetchMemberByPhoneNumberRefresh,
-  500
-);
-
-function handleUpdateMemberPhoneNumber() {
-  if (!isMemberPhoneFieldFocused.value) return;
+function memberTerm(by: "nric" | "contact") {
+  return by === "nric" ? memberForm.nric?.trim() || "" : memberForm.contact?.trim() || "";
+}
 
-  const search = memberForm.contact?.trim() || "";
-  if (search.length < 4) {
-    memberPhoneSearchResults.value = [];
-    memberPhoneSearchMenu.value = false;
+function scheduleMemberLookup(by: "nric" | "contact") {
+  clearTimeout(lookupTimers[by]);
+  if (memberTerm(by).length < 4) {
+    if (by === "nric") {
+      memberNRICSearchResults.value = [];
+      memberNRICSearchMenu.value = false;
+    } else {
+      memberPhoneSearchResults.value = [];
+      memberPhoneSearchMenu.value = false;
+    }
+    delete autoFilled[by];
     return;
   }
-
-  if (props.type === "drop-off" || props.type === "pick-up") return;
-  debounceFetchMemberPhoneNumber();
+  lookupTimers[by] = setTimeout(() => void runMemberLookup(by), 500);
 }
 
-const {
-  data: fetchMemberByNRIC,
-  refresh: fetchMemberByNRICRefresh,
-} = useLazyAsyncData(`fetch-member-nric-${props.site}`, () => {
-  const nric = memberForm.nric?.trim() || "";
-  if (nric.length < 4) return Promise.resolve(null);
-  const type = props.type === "walk-in" ? "guest" : props.type;
-  return findPersonByNRICMultipleResult(nric, props.site, type);
-});
-
-watch(fetchMemberByNRIC, (obj) => {
-  memberNRICSearchResults.value = getPeopleSearchItems(obj);
-  memberNRICSearchMenu.value = memberNRICSearchResults.value.length > 0;
-});
+async function runMemberLookup(by: "nric" | "contact") {
+  const term = memberTerm(by);
+  if (term.length < 4) return;
+  try {
+    const results = await findVisitorPeopleAnyType(by, term, props.site, props.type);
+    if (memberTerm(by) !== term) return;
+    const only = results.length === 1 ? results[0] : null;
+    const onlyKey = only ? personKey(only) : "";
+    if (only && autoFilled[by] !== onlyKey) {
+      autoFilled[by] = onlyKey;
+      memberSelectAutofillSearchResult(only, by, [only]);
+      return;
+    }
+    if (by === "nric") {
+      memberNRICSearchResults.value = results;
+      memberNRICSearchMenu.value = results.length > 0;
+    } else {
+      memberPhoneSearchResults.value = results;
+      memberPhoneSearchMenu.value = results.length > 0;
+    }
+  } catch {
+    // Autofill never stands in the guard's way.
+  }
+}
 
-const debounceFetchMemberNRIC = debounce(fetchMemberByNRICRefresh, 500);
+// NRIC Scan for the member being added (security mobile app `onNricRead`,
+// member): the NRIC - and the name, when read - filled in as if typed, and the
+// member lookup run for it.
+const memberNricScanOpen = ref(false);
+
+function handleMemberNricScanRead({ nric, name }: { nric: string; name: string | null }) {
+  memberNricScanOpen.value = false;
+  const next = String(nric || "").replace(/[^A-Za-z0-9]/g, "").toUpperCase();
+  if (!next) return;
+  memberForm.nric = next;
+  if (name) memberForm.name = name;
+  if (next.length >= 4) void runMemberLookup("nric");
+}
 
 function handleUpdateMemberNRIC() {
   if (skipMemberNRICFetch.value) return;
   if (!isMemberNRICFieldFocused.value) return;
-
-  const search = memberForm.nric?.trim() || "";
-  if (search.length < 4) {
-    memberNRICSearchResults.value = [];
-    memberNRICSearchMenu.value = false;
-    return;
-  }
-
-  if (props.type === "drop-off" || props.type === "pick-up") return;
-  debounceFetchMemberNRIC();
-}
-
-function selectMemberPhoneNumberSearchResult(item: Partial<TPeople>) {
-  memberSelectAutofillSearchResult(item, "contact");
+  scheduleMemberLookup("nric");
 }
 
-function selectMemberNRICSearchResult(item: Partial<TPeople>) {
-  memberSelectAutofillSearchResult(item, "nric");
+function handleUpdateMemberPhoneNumber() {
+  if (!isMemberPhoneFieldFocused.value) return;
+  scheduleMemberLookup("contact");
 }
 
 function memberSelectAutofillSearchResult(
-  item: Partial<TPeople>,
-  source: Exclude<AutofillSource, null>
+  item: VisitorPerson,
+  source: Exclude<AutofillSource, null>,
+  results?: VisitorPerson[]
 ) {
   memberCurrentAutofillSource.value = source;
-  const contactOptions = getPersonContactOptions(item);
+  const contactOptions = summaryContacts(item);
   const selectedContact =
     findMatchingContactOption(contactOptions, memberForm.contact) ||
     contactOptions[0] ||
@@ -513,6 +594,8 @@ function memberSelectAutofillSearchResult(
     contactOptions.length > 1;
 
   if (needsContactChoice) {
+    memberChooserResults.value =
+      results ?? (source === "nric" ? memberNRICSearchResults.value : memberPhoneSearchResults.value);
     memberPhoneSearchMenu.value = false;
     memberNRICSearchMenu.value = false;
     memberSelectedSearchResult.value = item;
@@ -528,7 +611,7 @@ function memberSelectAutofillSearchResult(
 }
 
 function applyMemberSearchResult(
-  item: Partial<TPeople>,
+  item: VisitorPerson,
   options: {
     contacts?: string;
     source?: Exclude<AutofillSource, null>;
@@ -541,27 +624,24 @@ function applyMemberSearchResult(
   skipMemberNRICFetch.value = true;
   memberCurrentAutofillSource.value = options.source || null;
 
-  const shouldAutofillField = (fieldSource?: Exclude<AutofillSource, null>) => {
-    if (!fieldSource) return false;
-    return memberCurrentAutofillSource.value === fieldSource;
-  };
+  // Only EMPTY fields are filled, except the one searched by.
   const getAutofillValue = (
     currentValue: string | undefined,
     nextValue: string | undefined,
     fieldSource?: Exclude<AutofillSource, null>
   ) => {
     if (!nextValue) return currentValue;
-    if (currentValue && !shouldAutofillField(fieldSource)) return currentValue;
+    if (currentValue && (!fieldSource || options.source !== fieldSource)) return currentValue;
     return nextValue;
   };
 
   memberForm.nric =
-    getAutofillValue(memberForm.nric, item.nric, "nric") ?? "";
+    (getAutofillValue(memberForm.nric, item.nric, "nric") ?? "").replace(/[^A-Za-z0-9]/g, "").toUpperCase();
   memberForm.name = getAutofillValue(memberForm.name, item.name) ?? "";
   memberForm.contact =
     getAutofillValue(
       memberForm.contact,
-      options.contacts || getPersonContactOptions(item)[0],
+      options.contacts || summaryContacts(item)[0],
       "contact"
     ) ?? "";
 
@@ -577,6 +657,21 @@ function memberCloseAutofillOptions() {
   memberSelectedContact.value = "";
 }
 
+// Back: the chooser closes and the result list it came from shows again.
+function memberChooserBack() {
+  const source = memberCurrentAutofillSource.value;
+  const results = memberChooserResults.value;
+  memberCloseAutofillOptions();
+  if (!results.length) return;
+  if (source === "contact") {
+    memberPhoneSearchResults.value = results;
+    memberPhoneSearchMenu.value = true;
+  } else {
+    memberNRICSearchResults.value = results;
+    memberNRICSearchMenu.value = true;
+  }
+}
+
 function memberConfirmAutofillOptions() {
   if (!memberSelectedSearchResult.value) return;
 
@@ -587,8 +682,45 @@ function memberConfirmAutofillOptions() {
   memberCloseAutofillOptions();
 }
 
-function handleClearForm() {
-  formRef.value?.reset();
+// 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)));
+    memberNRICSearchResults.value = keep(memberNRICSearchResults.value);
+    memberPhoneSearchResults.value = keep(memberPhoneSearchResults.value);
+    memberNRICSearchMenu.value = memberNRICSearchResults.value.length > 0;
+    memberPhoneSearchMenu.value = memberPhoneSearchResults.value.length > 0;
+    showMessage(PERSON_DELETED_MESSAGE, "success");
+    dialog.deletePerson = false;
+    personToDelete.value = null;
+  } catch (error) {
+    showMessage(errorConverter(error) || "Unable to delete the saved details.", "error");
+  } finally {
+    deletingPerson.value = false;
+  }
+}
+
+function clearMemberDraft() {
+  delete autoFilled.nric;
+  delete autoFilled.contact;
+  Object.assign(memberForm, emptyMember());
+  selectedPass.value = "";
+  errorScanPassMessage.value = "";
+  memberError.value = "";
   resetAccessCard();
   memberNRICSearchMenu.value = false;
   memberPhoneSearchMenu.value = false;
@@ -597,25 +729,169 @@ function handleClearForm() {
   memberCloseAutofillOptions();
 }
 
-async function handleAddMember() {
-  committedMembers.value.push({
-    ...memberForm,
-    ...(memberPassType.value ? {
-      passType: memberPassType.value,
-      passQuantity: memberPassQuantity.value,
-      passCards: memberPassCards.value,
-    } : {}),
-  } as any);
-  resetAccessCard();
-  handleClearForm();
+function openAddMember() {
+  memberError.value = "";
+  dialog.addMember = true;
+}
+
+function cancelAddMember() {
+  clearMemberDraft();
+  dialog.addMember = false;
+}
+
+const sameText = (a?: string, b?: string) =>
+  Boolean(a?.trim()) && a!.trim().toLowerCase() === (b ?? "").trim().toLowerCase();
+
+/** The member as typed joins the list, and the input empties. */
+function commitDraft() {
+  committedMembers.value = [
+    ...committedMembers.value,
+    {
+      ...memberForm,
+      name: memberForm.name.trim(),
+      visitorPass: [...(memberForm.visitorPass ?? [])],
+      ...(memberPassType.value
+        ? {
+            passType: memberPassType.value,
+            passQuantity: memberPassQuantity.value,
+            passCards: memberPassCards.value,
+          }
+        : {}),
+    } as any,
+  ];
+  clearMemberDraft();
+  dialog.addMember = false;
+}
+
+/** Anything typed in the member input? */
+function hasDraft() {
+  return Boolean(
+    memberForm.name.trim() ||
+      memberForm.contact.trim() ||
+      memberForm.nric.trim() ||
+      selectedPass.value
+  );
+}
+
+/**
+ * "Add" (isecure365 `addMember`): required fields, the lead's and the other
+ * members' phone / NRIC (messages verbatim), then any visit of theirs still
+ * open. Clear, the member joins the list; a problem keeps the dialog open.
+ */
+async function addMember() {
+  const contact = memberForm.contact?.trim() || "";
+  const nric = memberForm.nric?.trim() || "";
+  const added = committedMembers.value;
+
+  let problem = "";
+  if (!memberForm.name.trim()) problem = "Name is required.";
+  else if (!contact) problem = "Phone number is required.";
+  else if (!(await phoneIsValid())) problem = "Please enter a valid member phone number.";
+  else if (sameText(contact, props.leadContact))
+    problem = "Phone Number is already used by the lead contractor.";
+  else if (added.some((other) => sameText(other.contact, contact)))
+    problem = "Phone Number is already used by one of the added member(s).";
+  else if (!nric) problem = "NRIC is required.";
+  else if (sameText(nric, props.leadNric))
+    problem = "NRIC is already used by the lead contractor.";
+  else if (added.some((other) => sameText(other.nric, nric)))
+    problem = "NRIC is already used in one of the added member(s).";
+
+  memberError.value = problem;
+  if (problem) {
+    showMessage(problem, "error");
+    return;
+  }
+
+  if (props.checkOpenVisits) {
+    adding.value = true;
+    try {
+      const clear = await props.checkOpenVisits({ nric, contact });
+      if (!clear) return;
+    } finally {
+      adding.value = false;
+    }
+  }
+
+  commitDraft();
+}
+
+// The phone field's own country rule.
+async function phoneIsValid() {
+  try {
+    const result = await formRef.value?.validate?.();
+    if (!result) return true;
+    return result.valid !== false;
+  } catch {
+    return true;
+  }
 }
 
 function handleRemoveMember(index: number) {
   committedMembers.value = committedMembers.value.filter((_, i) => i !== index);
 }
+
+/** Passes the server refused / a contractor type change made unusable. */
+function clearPasses(ids?: Set<string>) {
+  committedMembers.value = committedMembers.value.map((member) => ({
+    ...member,
+    visitorPass: (member.visitorPass ?? []).filter((p) => ids && !ids.has(p.keyId)),
+  }));
+  if (!ids || ids.has(selectedPass.value)) selectedPass.value = "";
+  if (ids) passItems.value = passItems.value.filter((item) => !ids.has(item._id ?? ""));
+  else passItems.value = [];
+}
+
+/** Pass ids picked on members and the member input. */
+function pickedPassIds() {
+  return [
+    ...committedMembers.value.flatMap((m) => (m.visitorPass ?? []).map((p) => p.keyId)),
+    selectedPass.value,
+  ].filter(Boolean);
+}
+
+/** Every pass id → name seen so far, for refused-pass lookups. */
+function passIdsNamed(name: string) {
+  const wanted = name.trim().toLowerCase();
+  return Object.entries(passNames.value)
+    .filter(([, label]) => label.trim().toLowerCase() === wanted)
+    .map(([id]) => id);
+}
+
+/** Clears everything (a matched unregistered record does not carry members). */
+function reset() {
+  committedMembers.value = [];
+  clearMemberDraft();
+}
+
+watch(
+  () => props.contractorType,
+  () => {
+    passItems.value = [];
+  }
+);
+
+defineExpose({ addMember, commitDraft, hasDraft, clearPasses, pickedPassIds, passIdsNamed, reset });
 </script>
 
 <style scoped>
+/* 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;
+}
+
 .nric-search-item {
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   border-radius: 4px;
@@ -632,12 +908,6 @@ function handleRemoveMember(index: number) {
   border-radius: 16px !important;
 }
 
-.nric-options-title {
-  color: var(--text);
-  font-size: 1.45rem;
-  line-height: 1.2;
-}
-
 .nric-options-section-title {
   color: var(--text);
   font-size: 1.05rem;
@@ -656,4 +926,33 @@ function handleRemoveMember(index: number) {
 .nric-option-group {
   border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
 }
+
+.member-dialog__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.member-dialog__body {
+  padding: 4px 20px 8px;
+}
+
+/* Small confirm / edit dialogs: the body lines up with the title. */
+.visitor-form__dialog-body {
+  padding: 4px 16px 0;
+}
+
+.member-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 20px 16px;
+}
+
+.member-dialog__error {
+  color: rgb(var(--v-theme-error));
+  font-size: 0.85rem;
+  padding: 0 20px;
+}
 </style>