@7365admin1/layer-common 3.1.3-staging.40 → 3.1.3-staging.42

package/components/AttachmentsViewer.vue

@@ -48,7 +48,7 @@
                                 <v-list-item class="cursor-pointer" @click="openMediaViewer(item._id, item.mimeType)">
                                     <template #prepend>
                                         <v-avatar size="36" rounded="sm" class="mr-3">
-                                            <v-img :src="getFileUrl(item._id)" cover>
+                                            <v-img :src="imageCover(item._id)" cover>
                                                 <template #error>
                                                     <v-icon color="green" size="20">mdi-image</v-icon>
                                                 </template>
@@ -97,7 +97,7 @@
         </v-row>
 
         <!-- Media Carousel (images + videos) -->
-        <ImageCarousel v-model="showCarousel" :active-file-id="activeFileId" :files="carouselFiles" />
+        <ImageCarousel v-model="showCarousel" :active-file-id="activeFileId" :files="carouselFiles" :anpr="anpr" :site="site" />
 
         <!-- Document Viewer -->
         <DocumentViewer v-model="showDocumentViewer" :file-id="activeFileId" :file-name="activeFileName"
@@ -123,10 +123,18 @@ const props = defineProps({
     showFileTypeTitle: {
         type: Boolean,
         default: false,
+    },
+    anpr: {
+        type: Boolean,
+        default: false
+    },
+    site: {
+        type: String,
+        default: ""
     }
 });
 
-const { getFileUrl, urlToFile, getFileById } = useFile();
+const { getFileUrl, urlToFile, getFileById, getFileUrlAnpr } = useFile();
 
 const rawFileArray = ref<{ file: File, _id: string, preview: boolean, mimeType: string }[]>([]);
 const loading = ref(true);
@@ -159,6 +167,12 @@ function openDocumentViewer(id: string, name: string, mimeType: string) {
     showDocumentViewer.value = true;
 }
 
+const imageCover = (id: string) => {
+    if(props.anpr && props.site){
+        return getFileUrlAnpr(`${props.site}/${id}`)
+    } else return getFileUrl(id)
+}
+
 function getFileIcon(mimeType: string): string {
     if (mimeType.startsWith('image/')) return 'mdi-image';
     if (mimeType.startsWith('video/')) return 'mdi-video';
@@ -206,7 +220,11 @@ watchEffect(async () => {
 
             try {
                 // Try to get the actual file with proper MIME type detection from blob
-                const fileUrl = getFileUrl(item.id);
+                // const fileUrl = getFileUrl(item.id);
+                let fileUrl = ""
+                if(props.anpr && props.site){
+                    fileUrl = getFileUrlAnpr(`${props.site}/${item.id}`)
+                } else fileUrl = getFileUrl(item.id);
                 file = await urlToFile(fileUrl, item.name);
                 mimeType = file.type || 'application/octet-stream';
 

package/components/ImageCarousel.vue

@@ -7,7 +7,7 @@
           <template v-if="fileTypes?.[x] === 'image'">
             <v-carousel-item height="100%" width="100%" rounded="lg">
               <v-row no-gutters class="w-100 h-100" align="center">
-                <v-img :lazy-src="getFileUrl(x)" :src="getFileUrl(x)" width="70%" height="70%"
+                <v-img :lazy-src="getFinalUrl(x)" :src="getFinalUrl(x)" width="70%" height="70%"
                   :alt="'Image Viewer Card -' + index"></v-img>
               </v-row>
               <template v-slot:placeholder>
@@ -21,7 +21,7 @@
             <v-carousel-item>
               <v-row no-gutters class="h-100 w-100" align="center" justify="center">
                 <video width="80%" height="80%" controls>
-                  <source :src="getFileUrl(x)" />
+                  <source :src="getFinalUrl(x)" />
                 </video>
               </v-row>
               <template v-slot:placeholder>
@@ -78,11 +78,19 @@ const props = defineProps({
   files: {
     type: Array as PropType<string[]>,
     default: []
+  },
+  site: {
+    type: String,
+    default: ""
+  },
+  anpr: {
+    type: Boolean,
+    default: false
   }
 });
 
 
-const { getFileUrl, urlToFile } = useFile()
+const { getFileUrl, urlToFile, getFileUrlAnpr } = useFile()
 const overlay = defineModel({ required: true, default: false });
 const activeIndex = ref(0);
 const fileTypes = ref<Record<string, "image" | "video" | "other">>({});
@@ -107,10 +115,13 @@ async function resolveFileTypes() {
 
   for (const x of props.files) {
     try {
-      const url = getFileUrl(x);
+      let url = ""
+      if (props.anpr && props.site) {
+        url = getFileUrlAnpr(`${props.site}/${x}`)
+      } else url = getFileUrl(x);
       const file = await urlToFile(url, x);
       const type = file?.type;
-     
+
 
       if (type?.startsWith("video")) fileTypes.value[x] = "video";
       else if (type?.startsWith("image")) fileTypes.value[x] = "image";
@@ -129,6 +140,13 @@ watch(
 );
 
 
+const getFinalUrl = (id: string) => {
+  if (props.anpr && props.site) {
+    return getFileUrlAnpr(`${props.site}/${id}`)
+  } else return getFileUrl(id)
+}
+
+
 </script>
 
 <style scoped>

package/components/MemberInformation.vue

@@ -2,152 +2,144 @@
   <v-row no-gutters class="w-100">
     <v-card class="w-100">
       <v-card-text>
-        <v-btn
-          block
-          color="primary-button"
-          :height="40"
-          text="Scan QR Code"
-          class="text-capitalize"
-          prepend-icon="mdi-qrcode"
-          @click="handleScanQRPass"
-        />
-        <v-form
-          ref="formRef"
-          v-model="validForm"
-          :disabled="processing"
-          @click="errorScanPassMessage = ''"
-        >
+        <v-btn block color="primary-button" :height="40" text="Scan QR Code" class="text-capitalize"
+          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 />
-              <v-text-field
-                v-model.trim="memberForm.name"
-                density="compact"
-                hide-details
-                :rules="[requiredRule]"
-              />
+              <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 />
-              <InputNRICNumber
-                v-model.trim="memberForm.nric"
-                density="compact"
-                hide-details
-                :rules="[requiredRule]"
-              />
+              <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 />
+              <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"
-              >
+              <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.
+                      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>
+                  <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"
-                :excluded-card-ids="props.selectedNfcCards.map((c) => c._id)"
-              />
-            </v-col>
-
-            <v-col cols="12">
-              <InputLabel
-                class="text-capitalize"
-                title="Phone Number"
-                required
-              />
-              <InputPhoneNumberV2
-                v-model="memberForm.contact"
-                density="compact"
-                default-country="SG"
-                hide-details
-              />
+              <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"
+                :excluded-card-ids="props.selectedNfcCards.map((c) => c._id)" />
             </v-col>
 
             <v-row class="pt-3" justify="space-between">
               <v-col cols="6">
-                <v-btn
-                  text="Add Member"
-                  :disabled="!validForm"
-                  prepend-icon="mdi-plus"
-                  color="primary-button"
-                  class="text-capitalize"
-                  @click="handleAddMember"
-                />
+                <v-btn text="Add Member" :disabled="!validForm" prepend-icon="mdi-plus" color="primary-button"
+                  class="text-capitalize" @click="handleAddMember" />
               </v-col>
               <v-col cols="6" align="end">
-                <v-btn
-                  text="Clear Form"
-                  prepend-icon="mdi-refresh"
-                  color="primary-button"
-                  class="text-capitalize"
-                  @click.stop="handleClearForm"
-                />
+                <v-btn text="Clear Form" prepend-icon="mdi-refresh" color="primary-button" class="text-capitalize"
+                  @click.stop="handleClearForm" />
               </v-col>
             </v-row>
           </v-row>
         </v-form>
       </v-card-text>
     </v-card>
-    <visitor-pass-key-q-r-scanner
-      :dialog="dialog.scanQRCode"
-      v-model:scannedValue="scannedPassValue"
-      @close-dialog="dialog.scanQRCode = false"
-    />
+    <visitor-pass-key-q-r-scanner :dialog="dialog.scanQRCode" v-model:scannedValue="scannedPassValue"
+      @close-dialog="dialog.scanQRCode = false" />
+    <v-dialog v-model="dialog.memberAutofillOptions" max-width="430">
+      <v-card v-if="memberSelectedSearchResult" class="nric-options-card">
+        <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>
+
+          <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">
+              NRIC: {{ memberSelectedSearchResult.nric || "N/A" }}
+            </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">
+              <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="text" class="text-none" size="small" @click="memberCloseAutofillOptions">
+            Cancel
+          </v-btn>
+          <v-btn color="primary-button" variant="flat" class="text-none px-5" size="small"
+            @click="memberConfirmAutofillOptions">
+            Select
+          </v-btn>
+        </v-card-actions>
+      </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"
-    >
+    <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)"
-        />
+        <CardMemberInfoSummary :member="membersDisplayed[index]" @remove="handleRemoveMember(index)" />
       </template>
     </v-row>
     <!-- <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" /> -->
@@ -206,8 +198,12 @@ const props = defineProps({
   },
 });
 
-const { requiredRule } = useUtils();
+const { requiredRule, debounce } = useUtils();
 const { getPassKeysByPageSearch } = usePassKey();
+const {
+  findPersonByNRICMultipleResult,
+  findPersonByPhoneNumberMultipleResult,
+} = usePeople();
 
 const memberForm = reactive<TMemberInfo>({
   name: "",
@@ -238,6 +234,7 @@ const scannedPassValue = ref<string>("");
 
 const dialog = reactive({
   scanQRCode: false,
+  memberAutofillOptions: false,
 });
 
 const selectedPass = ref<string>("");
@@ -248,6 +245,23 @@ const memberPassCards = ref<{ _id: string; cardNo: string }[]>([]);
 const members = defineModel<TMemberInfo[]>({ required: true, default: [] });
 const committedMembers = ref<TMemberInfo[]>([]);
 
+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 memberCurrentAutofillSource = ref<AutofillSource>(null);
+const memberSelectedSearchResult = ref<Partial<TPeople> | null>(null);
+const memberSelectedContact = ref("");
+const skipMemberNRICFetch = ref(false);
+
 // Always keep the model in sync: committed members + current form draft
 watch(
   () => memberForm,
@@ -352,9 +366,219 @@ 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 "";
+  const compactValue = normalizedValue.replace(/\s/g, "");
+
+  return (
+    options.find((option) => option.trim() === normalizedValue) ||
+    options.find((option) => option.replace(/\s/g, "") === compactValue) ||
+    options.find((option) => option.trim().includes(normalizedValue)) ||
+    options.find((option) =>
+      option.replace(/\s/g, "").includes(compactValue)
+    ) ||
+    ""
+  );
+}
+
+const memberSelectedContactOptions = computed(() => {
+  return memberSelectedSearchResult.value
+    ? getPersonContactOptions(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;
+});
+
+const debounceFetchMemberPhoneNumber = debounce(
+  fetchMemberByPhoneNumberRefresh,
+  500
+);
+
+function handleUpdateMemberPhoneNumber() {
+  if (!isMemberPhoneFieldFocused.value) return;
+
+  const search = memberForm.contact?.trim() || "";
+  if (search.length < 4) {
+    memberPhoneSearchResults.value = [];
+    memberPhoneSearchMenu.value = false;
+    return;
+  }
+
+  if (props.type === "drop-off" || props.type === "pick-up") return;
+  debounceFetchMemberPhoneNumber();
+}
+
+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;
+});
+
+const debounceFetchMemberNRIC = debounce(fetchMemberByNRICRefresh, 500);
+
+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");
+}
+
+function selectMemberNRICSearchResult(item: Partial<TPeople>) {
+  memberSelectAutofillSearchResult(item, "nric");
+}
+
+function memberSelectAutofillSearchResult(
+  item: Partial<TPeople>,
+  source: Exclude<AutofillSource, null>
+) {
+  memberCurrentAutofillSource.value = source;
+  const contactOptions = getPersonContactOptions(item);
+  const selectedContact =
+    findMatchingContactOption(contactOptions, memberForm.contact) ||
+    contactOptions[0] ||
+    "";
+
+  const needsContactChoice =
+    (!memberForm.contact?.trim() || source === "contact") &&
+    contactOptions.length > 1;
+
+  if (needsContactChoice) {
+    memberPhoneSearchMenu.value = false;
+    memberNRICSearchMenu.value = false;
+    memberSelectedSearchResult.value = item;
+    memberSelectedContact.value = selectedContact;
+    dialog.memberAutofillOptions = true;
+    return;
+  }
+
+  applyMemberSearchResult(item, {
+    contacts: selectedContact,
+    source,
+  });
+}
+
+function applyMemberSearchResult(
+  item: Partial<TPeople>,
+  options: {
+    contacts?: string;
+    source?: Exclude<AutofillSource, null>;
+  } = {}
+) {
+  memberNRICSearchMenu.value = false;
+  memberPhoneSearchMenu.value = false;
+  memberNRICSearchResults.value = [];
+  memberPhoneSearchResults.value = [];
+  skipMemberNRICFetch.value = true;
+  memberCurrentAutofillSource.value = options.source || null;
+
+  const shouldAutofillField = (fieldSource?: Exclude<AutofillSource, null>) => {
+    if (!fieldSource) return false;
+    return memberCurrentAutofillSource.value === fieldSource;
+  };
+  const getAutofillValue = (
+    currentValue: string | undefined,
+    nextValue: string | undefined,
+    fieldSource?: Exclude<AutofillSource, null>
+  ) => {
+    if (!nextValue) return currentValue;
+    if (currentValue && !shouldAutofillField(fieldSource)) return currentValue;
+    return nextValue;
+  };
+
+  memberForm.nric =
+    getAutofillValue(memberForm.nric, item.nric, "nric") ?? "";
+  memberForm.name = getAutofillValue(memberForm.name, item.name) ?? "";
+  memberForm.contact =
+    getAutofillValue(
+      memberForm.contact,
+      options.contacts || getPersonContactOptions(item)[0],
+      "contact"
+    ) ?? "";
+
+  setTimeout(() => {
+    memberCurrentAutofillSource.value = null;
+    skipMemberNRICFetch.value = false;
+  }, 1000);
+}
+
+function memberCloseAutofillOptions() {
+  dialog.memberAutofillOptions = false;
+  memberSelectedSearchResult.value = null;
+  memberSelectedContact.value = "";
+}
+
+function memberConfirmAutofillOptions() {
+  if (!memberSelectedSearchResult.value) return;
+
+  applyMemberSearchResult(memberSelectedSearchResult.value, {
+    contacts: memberSelectedContact.value,
+    source: memberCurrentAutofillSource.value || "nric",
+  });
+  memberCloseAutofillOptions();
+}
+
 function handleClearForm() {
   formRef.value?.reset();
   resetAccessCard();
+  memberNRICSearchMenu.value = false;
+  memberPhoneSearchMenu.value = false;
+  memberNRICSearchResults.value = [];
+  memberPhoneSearchResults.value = [];
+  memberCloseAutofillOptions();
 }
 
 async function handleAddMember() {
@@ -375,4 +599,45 @@ function handleRemoveMember(index: number) {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.nric-search-item {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 4px;
+  margin: 4px;
+  min-height: 72px;
+}
+
+.phone-search-results {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.nric-options-card {
+  border-radius: 16px !important;
+}
+
+.nric-options-title {
+  color: #06253b;
+  font-size: 1.45rem;
+  line-height: 1.2;
+}
+
+.nric-options-section-title {
+  color: #06253b;
+  font-size: 1.05rem;
+  line-height: 1.25;
+}
+
+.nric-selected-person {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 12px;
+  color: #06253b;
+  font-size: 0.95rem;
+  min-height: 52px;
+  padding: 10px 14px;
+}
+
+.nric-option-group {
+  border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+</style>

package/components/VisitorManagement.vue

@@ -675,6 +675,24 @@
                   />
                 </div>
               </span>
+              <span
+                v-else-if="
+                  key === 'snapshotEntryImage' || key === 'snapshotExitImage'
+                "
+                class="d-flex flex-column"
+              >
+                <strong class="w-full">{{ label }}:</strong>
+                <div class="d-flex flex-wrap ga-2">
+                  <AttachmentsViewer
+                    :files="
+                      mappedSnapshots([selectedVisitorObject.snapshotEntryImage])
+                    "
+                    anpr
+                    :site="siteId"
+                    title="Snapshot"
+                  />
+                </div>
+              </span>
 
               <span
                 v-else-if="selectedVisitorObject[key]"
@@ -1438,6 +1456,15 @@ function mappedAttachments(attachments: string[]) {
   });
 }
 
+function mappedSnapshots(attachments: string[]) {
+  return attachments.map((x, index) => {
+    return {
+      id: x,
+      name: `Snapshot - ${x}`,
+    };
+  });
+}
+
 function normalizeDateOnly(value: string) {
   if (!value) return "";
   if (/^\d{4}-\d{2}-\d{2}$/.test(value)) return value;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.1.3-staging.40",
+  "version": "3.1.3-staging.42",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {