@7365admin1/layer-common 3.0.31-staging.13 → 3.0.31-staging.15

package/components/DashboardMain.vue

@@ -984,60 +984,44 @@
               <div
                 v-for="item in formattedActivePatrolItems"
                 :key="item.id || item._id"
-                class="d-flex align-center justify-space-between"
-                style="
-                  padding: 16px 20px;
-                  border: 1px solid #e2e8f0;
-                  border-radius: 12px;
-                  margin-bottom: 12px;
-                  background-color: #ffffff;
-                  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
-                "
+                class="active-patrol-row"
               >
-                <div style="flex: 1; min-width: 140px">
-                  <strong
-                    style="
-                      display: block;
-                      font-size: 15px;
-                      font-weight: 700;
-                      color: #0b2f47;
-                      margin-bottom: 4px;
-                    "
-                    >{{ item.title || item.name }}</strong
-                  >
-                  <span style="font-size: 13px; color: #94a3b8">{{
-                    item.subtitle || item.location || ""
-                  }}</span>
+                <div class="active-patrol-main">
+                  <strong>{{ item.title || item.name }}</strong>
+                  <span>{{ item.subtitle || item.location || "" }}</span>
                 </div>
 
-                <div
-                  style="flex: 1; display: flex; align-items: center; gap: 12px"
-                >
-                  <AvatarMain
-                    :name="item.person || item.assignedTo"
-                    :size="36"
-                  />
-                  <span style="font-size: 14px; color: #64748b">{{
-                    item.person || item.assignedTo
-                  }}</span>
+                <div class="active-patrol-assignees">
+                  <div class="active-patrol-assignee">
+                    <AvatarMain :name="item.primaryAssignee" :size="24" />
+                    <span>{{ item.primaryAssignee }}</span>
+                  </div>
+                  <span
+                    v-if="item.extraAssigneeCount > 0"
+                    class="active-patrol-more-pill active-patrol-tooltip"
+                    :data-tooltip="item.extraAssignees.join(', ')"
+                  >
+                    +{{ item.extraAssigneeCount }}
+                  </span>
                 </div>
 
-                <div style="flex: 1; display: flex; justify-content: center">
+                <div class="active-patrol-statuses">
                   <div
-                    :style="getPatrolStatusStyle(item.status)"
-                    style="
-                      padding: 6px 16px;
-                      border-radius: 20px;
-                      font-size: 13px;
-                      font-weight: 500;
-                      text-transform: capitalize;
-                    "
+                    class="active-patrol-status-pill"
+                    :style="getPatrolStatusStyle(item.primaryStatus)"
                   >
-                    {{ item.status }}
+                    {{ item.primaryStatus }}
                   </div>
+                  <span
+                    v-if="item.extraStatusCount > 0"
+                    class="active-patrol-more-pill active-patrol-tooltip"
+                    :data-tooltip="item.extraStatuses.join(', ')"
+                  >
+                    +{{ item.extraStatusCount }}
+                  </span>
                 </div>
 
-                <div style="flex: 0 0 auto; text-align: right">
+                <div class="active-patrol-action">
                   <v-btn
                     variant="outlined"
                     class="text-none font-weight-medium"
@@ -2767,18 +2751,23 @@ const activePatrolItems = computed<any[]>(
 
 const formattedActivePatrolItems = computed<any[]>(() => {
   return activePatrolItems.value.map((item) => {
-    let status = item.status;
-    if (Array.isArray(status)) {
-      status = status.join(", ");
-    }
-    let person = item.person || item.assignedTo || "Unassigned";
-    if (Array.isArray(person)) {
-      person = person.join(", ");
-    }
+    const statuses = normalizeListValue(item.status || "Pending");
+    const assignees = normalizeListValue(
+      item.person || item.assignedTo || "Unassigned"
+    );
+
     return {
       ...item,
-      status,
-      person,
+      status: statuses.join(", "),
+      statuses,
+      primaryStatus: statuses[0] || "Pending",
+      extraStatuses: statuses.slice(1),
+      extraStatusCount: Math.max(0, statuses.length - 1),
+      person: assignees.join(", "),
+      assignees,
+      primaryAssignee: assignees[0] || "Unassigned",
+      extraAssignees: assignees.slice(1),
+      extraAssigneeCount: Math.max(0, assignees.length - 1),
     };
   });
 });
@@ -3948,6 +3937,20 @@ function normalizeStatus(value: any) {
   return text.replace(/[_-]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
 }
 
+function normalizeListValue(value: any) {
+  if (Array.isArray(value)) {
+    return value
+      .flatMap((entry) => normalizeListValue(entry))
+      .map((entry) => String(entry).trim())
+      .filter(Boolean);
+  }
+
+  return String(value || "")
+    .split(",")
+    .map((entry) => entry.trim())
+    .filter(Boolean);
+}
+
 function getStatusTone(status: any) {
   const s = String(status || "").toLowerCase();
   if (
@@ -4415,6 +4418,151 @@ function formatDashboardTime(value?: string) {
   border: 2px solid #f9c97c;
 }
 
+.active-patrol-row {
+  align-items: center;
+  background-color: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
+  display: grid;
+  gap: 10px;
+  grid-template-columns: 150px minmax(0, 1fr) max-content max-content;
+  margin-bottom: 12px;
+  min-height: 64px;
+  overflow: visible;
+  padding: 12px 14px;
+}
+
+.active-patrol-main {
+  min-width: 0;
+}
+
+.active-patrol-main strong {
+  color: #0b2f47;
+  display: block;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.25;
+  margin-bottom: 3px;
+  overflow-wrap: anywhere;
+}
+
+.active-patrol-main span {
+  color: #94a3b8;
+  display: block;
+  font-size: 11px;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.active-patrol-assignees {
+  align-items: center;
+  display: flex;
+  gap: 6px;
+  min-width: 0;
+}
+
+.active-patrol-assignee {
+  align-items: center;
+  background: #f8fafc;
+  border: 1px solid #e7edf3;
+  border-radius: 999px;
+  display: inline-flex;
+  flex: 1 1 auto;
+  gap: 6px;
+  max-width: 100%;
+  min-width: 0;
+  padding: 2px 8px 2px 3px;
+}
+
+.active-patrol-assignee span {
+  color: #475569;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.2;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.active-patrol-statuses {
+  align-items: center;
+  display: flex;
+  gap: 6px;
+  justify-content: flex-start;
+  min-width: 0;
+}
+
+.active-patrol-status-pill {
+  border-radius: 20px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.2;
+  padding: 5px 10px;
+  text-transform: capitalize;
+  white-space: nowrap;
+}
+
+.active-patrol-more-pill {
+  align-items: center;
+  background: #eef3f8;
+  border: 1px solid #dbe4ed;
+  border-radius: 999px;
+  color: #607386;
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: 11px;
+  font-weight: 800;
+  height: 24px;
+  justify-content: center;
+  line-height: 1;
+  min-width: 30px;
+  padding: 0 8px;
+  position: relative;
+  white-space: nowrap;
+}
+
+.active-patrol-action {
+  justify-self: end;
+  text-align: right;
+}
+
+.active-patrol-tooltip::after {
+  background: #0f2638;
+  border-radius: 6px;
+  bottom: calc(100% + 8px);
+  box-shadow: 0 8px 24px rgba(15, 38, 56, 0.18);
+  color: #ffffff;
+  content: attr(data-tooltip);
+  font-size: 11px;
+  font-weight: 600;
+  left: 50%;
+  line-height: 1.35;
+  max-width: 260px;
+  opacity: 0;
+  padding: 7px 9px;
+  pointer-events: none;
+  position: absolute;
+  text-align: left;
+  transform: translate(-50%, 4px);
+  transition: opacity 0.14s ease, transform 0.14s ease;
+  white-space: normal;
+  width: max-content;
+  z-index: 5;
+}
+
+.active-patrol-tooltip:hover::after {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
+@media (max-width: 960px) {
+  .active-patrol-row {
+    grid-template-columns: 120px minmax(0, 1fr) max-content max-content;
+  }
+}
+
 .figma-icon-badge {
   align-items: center;
   border-radius: 50%;

package/components/Input/InputPhoneNumberV2.vue

@@ -46,136 +46,153 @@
         :density="density"
         :disabled="props.disabled"
         :placeholder="placeholder || currentMask"
+        @focus="emit('focus')"
+        @blur="emit('blur')"
       />
     </v-col>
-    <span class="text-error text-caption w-100" v-if="errorMessage && !hideDetails">
+    <span
+      class="text-error text-caption w-100"
+      v-if="errorMessage && !hideDetails"
+    >
       {{ errorMessage }}
     </span>
   </v-row>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, type PropType } from 'vue'
+import { ref, computed, watch, type PropType } from "vue";
 //@ts-ignore
-import phoneMasks from '~/utils/phoneMasks'
-import type { ValidationRule } from 'vuetify/lib/types.mjs'
+import phoneMasks from "~/utils/phoneMasks";
+import type { ValidationRule } from "vuetify/lib/types.mjs";
 
 const props = defineProps({
-  modelValue: { type: String as PropType<string>, default: '' },
+  modelValue: { type: String as PropType<string>, default: "" },
   rules: { type: Array as PropType<ValidationRule[]>, default: () => [] },
-  variant: { type: String as PropType<any>, default: 'outlined' },
-  density: { type: String as PropType<'default' | 'comfortable' | 'compact'>, default: 'default' },
+  variant: { type: String as PropType<any>, default: "outlined" },
+  density: {
+    type: String as PropType<"default" | "comfortable" | "compact">,
+    default: "default",
+  },
   placeholder: { type: String },
   hideDetails: { type: Boolean, default: false },
   loading: { type: Boolean, default: false },
   readOnly: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
-})
+});
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(["update:modelValue", "focus", "blur"]);
 
 type TPhoneMask = {
-  name: string
-  flag: string
-  code: string
-  dial_code: string
-  regex: string
-}
+  name: string;
+  flag: string;
+  code: string;
+  dial_code: string;
+  regex: string;
+};
 
 // Main reactive values
-const phone = ref(props.modelValue)
-const input = ref('')
-const selectedCode = ref('SG')
-const countries = phoneMasks
-const errorMessage = ref('')
-const maskRef = ref()
-const maskKey = ref(0)
-
+const phone = ref(props.modelValue);
+const input = ref("");
+const selectedCode = ref("SG");
+const countries = phoneMasks;
+const errorMessage = ref("");
+const maskRef = ref();
+const maskKey = ref(0);
 
 const currentMask = computed(() => {
-  const country = countries.find((c: TPhoneMask) => c.code === selectedCode.value)
-  if (!country) return '############'
-  return generateMaskFromRegex(country.regex)
-})
-
+  const country = countries.find(
+    (c: TPhoneMask) => c.code === selectedCode.value
+  );
+  if (!country) return "############";
+  return generateMaskFromRegex(country.regex);
+});
 
 const phonePrefix = computed(() => {
-  const country = countries.find((c: TPhoneMask) => c.code === selectedCode.value)
-  return country?.dial_code || ''
-})
+  const country = countries.find(
+    (c: TPhoneMask) => c.code === selectedCode.value
+  );
+  return country?.dial_code || "";
+});
 
 const countriesByLongestDialCode = computed(() => {
-  return [...countries].sort((a: TPhoneMask, b: TPhoneMask) => b.dial_code.length - a.dial_code.length)
-})
+  return [...countries].sort(
+    (a: TPhoneMask, b: TPhoneMask) => b.dial_code.length - a.dial_code.length
+  );
+});
 
 function generateMaskFromRegex(regex: string): string {
-  let pattern = regex.replace(/^\^|\$$/g, '')
-  pattern = pattern.replace(/\(\?:\+?\d+\)\?/g, '')
-  pattern = pattern.replace(/\+?\d{1,4}/, '')
-  pattern = pattern.replace(/\\d\{(\d+)\}/g, (_, count) => '#'.repeat(Number(count)))
-  pattern = pattern.replace(/\\d/g, '#')
-  pattern = pattern.replace(/\\/g, '')
-  pattern = pattern.replace(/\(\?:/g, '')
-  return pattern.trim()
+  let pattern = regex.replace(/^\^|\$$/g, "");
+  pattern = pattern.replace(/\(\?:\+?\d+\)\?/g, "");
+  pattern = pattern.replace(/\+?\d{1,4}/, "");
+  pattern = pattern.replace(/\\d\{(\d+)\}/g, (_, count) =>
+    "#".repeat(Number(count))
+  );
+  pattern = pattern.replace(/\\d/g, "#");
+  pattern = pattern.replace(/\\/g, "");
+  pattern = pattern.replace(/\(\?:/g, "");
+  return pattern.trim();
 }
 
 const validatePhone = (): boolean | string => {
-  if (props.readOnly) return true
-  if (!phone.value) return true
+  if (props.readOnly) return true;
+  if (!phone.value) return true;
 
-  const country = countries.find((c: TPhoneMask) => c.code === selectedCode.value)
-  if (!country) return true
+  const country = countries.find(
+    (c: TPhoneMask) => c.code === selectedCode.value
+  );
+  if (!country) return true;
 
-  const regex = new RegExp(country.regex)
-  const isValid = regex.test(phone.value)
-  errorMessage.value = isValid ? '' : `Invalid ${country.name} phone number`
-  return isValid
-}
+  const regex = new RegExp(country.regex);
+  const isValid = regex.test(phone.value);
+  errorMessage.value = isValid ? "" : `Invalid ${country.name} phone number`;
+  return isValid;
+};
 
 function findCountryFromPhone(value: string): TPhoneMask | undefined {
-  return countriesByLongestDialCode.value.find((c: TPhoneMask) => value.startsWith(c.dial_code))
+  return countriesByLongestDialCode.value.find((c: TPhoneMask) =>
+    value.startsWith(c.dial_code)
+  );
 }
 
 function syncInputFromPhone(value: string) {
-  const prefix = phonePrefix.value
-  if (!value) input.value = ''
-  else input.value = value.startsWith(prefix) ? value.slice(prefix.length) : value
+  const prefix = phonePrefix.value;
+  if (!value) input.value = "";
+  else
+    input.value = value.startsWith(prefix) ? value.slice(prefix.length) : value;
 }
 
 function handleUpdateCountry() {
-  const prefix = phonePrefix.value
-  phone.value = input.value ? prefix + input.value : ''
+  const prefix = phonePrefix.value;
+  phone.value = input.value ? prefix + input.value : "";
 }
 
-
 watch(input, (newInput) => {
-  const prefix = phonePrefix.value
-  if (!newInput) phone.value = ''
-  else phone.value = prefix + newInput
-})
+  const prefix = phonePrefix.value;
+  if (!newInput) phone.value = "";
+  else phone.value = prefix + newInput;
+});
 
 watch(
   () => props.modelValue,
   (val) => {
-    phone.value = val || ''
+    phone.value = val || "";
   },
   { immediate: true }
-)
-
+);
 
 watch(
   phone,
   (newVal) => {
-    const country = newVal ? findCountryFromPhone(newVal) : undefined
-    if (country && country.code !== selectedCode.value) selectedCode.value = country.code
-    syncInputFromPhone(newVal)
-    emit('update:modelValue', newVal)
+    const country = newVal ? findCountryFromPhone(newVal) : undefined;
+    if (country && country.code !== selectedCode.value)
+      selectedCode.value = country.code;
+    syncInputFromPhone(newVal);
+    emit("update:modelValue", newVal);
   },
   { immediate: true }
-)
-
+);
 
 watch(selectedCode, () => {
-  maskKey.value++
-})
+  maskKey.value++;
+});
 </script>

package/components/Input/VehicleNumber.vue

@@ -6,6 +6,8 @@
     :placeholder="placeholder"
     :counter="maxlength"
     @input="onInput"
+    @focus="emit('focus')"
+    @blur="emit('blur')"
     outlined
     :disabled="disabled"
     :readonly="readonly"
@@ -14,36 +16,37 @@
 </template>
 
 <script setup>
+const emit = defineEmits(["focus", "blur"]);
 
 const props = defineProps({
   placeholder: {
     type: String,
-    default: 'Vehicle Number'
+    default: "Vehicle Number",
   },
   rules: {
     type: Array,
-    default: () => []
+    default: () => [],
   },
   maxlength: {
     type: [Number, String],
-    default: false
+    default: false,
   },
   disabled: {
     type: Boolean,
   },
   readonly: {
     type: Boolean,
-  }
-})
+  },
+});
 
-const model = defineModel({required: true })
+const model = defineModel({ required: true });
 
 function onInput(event) {
-  const value = typeof event === 'string' ? event : event?.target?.value || ''
+  const value = typeof event === "string" ? event : event?.target?.value || "";
 
-  let formatted = value.replace(/[^A-Za-z0-9]/g, '')
-  formatted = formatted.toUpperCase()
+  let formatted = value.replace(/[^A-Za-z0-9]/g, "");
+  formatted = formatted.toUpperCase();
 
-  model.value = formatted
+  model.value = formatted;
 }
-</script>
+</script>

package/components/VisitorForm.vue

@@ -12,7 +12,7 @@
       <div class="w-100 d-flex justify-space-between ga-2">
         <span class="text-subtitle-1 w-100 font-weight-bold mb-3">{{
           formTitle
-          }}</span>
+        }}</span>
         <span v-if="withStep2 || withStep3" class="text-subtitle-2 font-weight-bold" style="text-wrap: nowrap">Step
           <span class="text-primary-button">{{ contractorStep }}</span>/{{ withStep3 ? 3 : withStep2 ? 2 : 1 }}</span>
       </div>
@@ -30,7 +30,7 @@
                   <v-list-item-title @click.stop="handleAddNewContractorType" class="d-flex align-center ga-1">
                     <span><v-icon icon="mdi-plus" /></span> Add "<strong>{{
                       contractorTypeInput
-                      }}</strong>" as custom contractor type.
+                    }}</strong>" as custom contractor type.
                   </v-list-item-title>
                 </v-list-item>
               </template>
@@ -57,7 +57,7 @@
                 <InputLabel class="text-capitalize" title="NRIC" :required="requireNRIC" />
                 <v-menu v-model="nricSearchMenu" location="bottom" offset-y :close-on-content-click="false">
                   <template #activator="{ props }">
-                    <InputNRICNumber v-bind="props" v-model="visitor.nric" density="comfortable"
+                    <InputNRICNumber v-bind="props" v-model="visitor.nric" density="comfortable" @focus="isNricFieldFocused = true" @blur="isNricFieldFocused = false"
                       :rules="[requireNRIC ? requiredRule : () => true]" :key="currentAutofillSource + 'nric-key'"
                       @update:model-value="handleUpdateNRIC" :loading="fetchPersonByNRICPending" />
                   </template>
@@ -87,14 +87,14 @@
             <InputLabel class="text-capitalize" title="Phone Number" required />
             <v-menu v-model="phoneSearchMenu" location="bottom" offset-y :close-on-content-click="false">
               <template #activator="{ props }">
-                <InputPhoneNumberV2 v-bind="props" v-model="visitor.contact" :rules="[requiredRule]"
+                <InputPhoneNumberV2 v-bind="props" v-model="visitor.contact" :rules="[requiredRule]" @focus="isPhoneFieldFocused = true" @blur="isPhoneFieldFocused = false"
                   density="comfortable" :key="currentAutofillSource + 'phone-key'"
                   @update:model-value="handleUpdatePhoneNumber" />
               </template>
 
               <v-list v-if="phoneSearchResults.length" class="pa-1">
                 <v-list-item v-for="(item, index) in phoneSearchResults" :key="item._id || index"
-                  @click="selectAutofillSearchResult(item, 'contact')" class="cursor-pointer nric-search-item">
+                  @click="selectPhoneNumberSearchResult(item)" class="cursor-pointer nric-search-item">
                   <div class="d-flex align-center justify-space-between ga-4 w-100">
                     <span class="text-subtitle-1">{{ item.name || 'Unknown' }}</span>
                     <span class="text-subtitle-1 text-no-wrap">NRIC: {{ item.nric || 'N/A' }}</span>
@@ -113,12 +113,12 @@
                 <v-menu v-model="vehicleSearchMenu" location="bottom" offset-y :close-on-content-click="false">
                   <template #activator="{ props }">
                     <InputVehicleNumber v-bind="props" v-model="visitor.plateNumber" density="comfortable"
-                      @update:model-value="handleUpdateVehicleNumber" />
+                      @update:model-value="handleUpdateVehicleNumber" @focus="isPlateNumberFieldFocused = true" @blur="isPlateNumberFieldFocused = false" />
                   </template>
 
                   <v-list v-if="vehicleSearchResults.length" class="pa-1">
                     <v-list-item v-for="(item, index) in vehicleSearchResults" :key="item._id || index"
-                      @click="selectAutofillSearchResult(item, 'vehicleNumber')"
+                      @click="selectPlateNumberSearchResult(item)"
                       class="cursor-pointer nric-search-item">
                       <div class="d-flex align-center justify-space-between ga-4 w-100">
                         <span class="text-subtitle-1">{{ item.name || 'Unknown' }}</span>
@@ -159,7 +159,7 @@
                       class="d-flex align-center ga-1">
                       <span><v-icon icon="mdi-plus" /></span>Add "<strong>{{
                         companyNameInput
-                        }}</strong>" as new company.
+                      }}</strong>" as new company.
                     </v-list-item-title>
                     <v-list-item-title v-else-if="!companyNameInput && companyNames.length === 0">
                       Start typing to search for companies.
@@ -189,7 +189,7 @@
                       class="d-flex align-center ga-1">
                       <span><v-icon icon="mdi-plus" /></span>Add "<strong>{{
                         companyNameInput
-                        }}</strong>" as new company.
+                      }}</strong>" as new company.
                     </v-list-item-title>
                     <v-list-item-title v-else-if="!companyNameInput && companyNames.length === 0">
                       Start typing to search for companies.
@@ -499,6 +499,7 @@ import useVisitor from "../composables/useVisitor";
 import useSiteEntryPassSettings from "../composables/useSiteEntryPassSettings";
 import useAccessManagement from "../composables/useAccessManagement";
 import usePeople from "../composables/usePeople";
+import { mockPhoneNumberSearchResults, mockVehicleNumberSearchResults } from "../utils/mock-people-response";
 
 const prop = defineProps({
   type: {
@@ -554,6 +555,7 @@ const { testConnection } = useWebUsb();
 const {
   findPersonByNRIC,
   findPersonByNRICMultipleResult,
+  findPersonByPhoneNumberMultipleResult,
   searchCompanyList,
   findUsersByPlateNumber,
 } = usePeople();
@@ -594,6 +596,9 @@ const passCards = ref<{ _id: string; cardNo: string }[]>([]);
 const availableQrCount = ref<number | null>(null);
 const hidQrPrintPayload = ref<string | null>(null);
 const hidQrPrinted = ref(false);
+const isPhoneFieldFocused = ref(false);
+const isPlateNumberFieldFocused = ref(false);
+const isNricFieldFocused = ref(false);
 
 const registeredUnitCompanyName = ref("N/A");
 
@@ -759,50 +764,13 @@ const selectedNricSearchResult = ref<Partial<TPeople> | null>(null);
 const selectedNricContact = ref("");
 const selectedNricPlate = ref("");
 
-type NricSearchPerson = Omit<Partial<TPeople>, "contact"> & {
+type SearchPerson = Omit<Partial<TPeople>, "contact"> & {
   contact?: string | string[];
   contacts?: string | string[];
   visitorPlateNumbers?: string | string[];
   plateNumber?: string | string[];
 };
 
-const mockPhoneNumberSearchResults: Partial<NricSearchPerson>[] = [
-  {
-    _id: "mock-phone-multiple-options",
-    name: "James Smith",
-    nric: "1323232499",
-    contacts: ["653939394", "81234567"],
-    visitorPlateNumbers: ["34566", "SMA1234A"],
-    companyName: ["Mock Company Pte Ltd"],
-  },
-  {
-    _id: "mock-phone-single-option",
-    name: "Jane Tan",
-    nric: "S1234567A",
-    contacts: ["91234567"],
-    visitorPlateNumbers: ["SGB5678B"],
-    companyName: ["Single Option Company"],
-  },
-];
-
-const mockVehicleNumberSearchResults: Partial<NricSearchPerson>[] = [
-  {
-    _id: "mock-vehicle-multiple-options",
-    name: "James Smith",
-    nric: "1323232499",
-    contacts: ["653939394", "81234567"],
-    visitorPlateNumbers: ["34566", "SMA1234A"],
-    companyName: ["Mock Company Pte Ltd"],
-  },
-  {
-    _id: "mock-vehicle-single-option",
-    name: "Ali Lim",
-    nric: "T7654321B",
-    contacts: ["98765432"],
-    visitorPlateNumbers: ["SKX2468C"],
-    companyName: ["Vehicle Single Company"],
-  },
-];
 
 const formTitle = computed(() => {
   const isContractorForm = prop.type === "contractor";
@@ -874,7 +842,7 @@ const {
   pending: fetchPersonByNRICPending,
 } = useLazyAsyncData(`fetch-person`, () => {
   const NRIC = visitor.nric;
-  if (!NRIC || NRIC.length < 4) return Promise.resolve(null);
+  if (!NRIC || NRIC.length < 1) return Promise.resolve(null);
   return findPersonByNRICMultipleResult(NRIC, prop.site);
 });
 
@@ -894,7 +862,7 @@ watch(fetchPersonByNRICReq, (obj) => {
   //     contacts: ["653939394", "81234567"],
   //     visitorPlateNumbers: ["34566", "SMA1234A"],
   //     companyName: ["Mock Company Pte Ltd"],
-  //   } as Partial<NricSearchPerson>,
+  //   } as Partial<SearchPerson>,
   //   {
   //     _id: "mock-person-single-option",
   //     name: "Jane Tan",
@@ -902,7 +870,7 @@ watch(fetchPersonByNRICReq, (obj) => {
   //     contacts: ["91234567"],
   //     visitorPlateNumbers: ["SGB5678B"],
   //     companyName: ["Single Option Company"],
-  //   } as Partial<NricSearchPerson>,
+  //   } as Partial<SearchPerson>,
   // ];
   // nricSearchMenu.value = true;
 });
@@ -947,12 +915,12 @@ function toUniqueStringArray(value: unknown) {
 }
 
 function getPersonContactOptions(item: Partial<TPeople>) {
-  const person = item as NricSearchPerson;
+  const person = item as SearchPerson;
   return toUniqueStringArray(person.contacts || person.contact);
 }
 
 function getPersonPlateOptions(item: Partial<TPeople>) {
-  const person = item as NricSearchPerson;
+  const person = item as SearchPerson;
   const visitorPlateNumbers = toUniqueStringArray(person.visitorPlateNumbers);
   if (visitorPlateNumbers.length) return visitorPlateNumbers;
 
@@ -1000,6 +968,12 @@ function applyNricSearchResult(
 function selectNricSearchResult(item: Partial<TPeople>) {
   selectAutofillSearchResult(item, "nric");
 }
+function selectPhoneNumberSearchResult(item: Partial<TPeople>) {
+  selectAutofillSearchResult(item, "contact");
+}
+function selectPlateNumberSearchResult(item: Partial<TPeople>) {
+  selectAutofillSearchResult(item, "vehicleNumber");
+}
 
 function selectAutofillSearchResult(item: Partial<TPeople>, source: Exclude<AutofillSource, null>) {
   const contactOptions = getPersonContactOptions(item);
@@ -1388,46 +1362,46 @@ const debounceFetchNRIC = debounce(fetchPersonByNRICRefresh, 500);
 
 function handleUpdateNRIC() {
   if (skipNricFetch.value) return;
-  if (currentAutofillSource.value && currentAutofillSource.value !== "nric")
-    return;
+  if(!isNricFieldFocused.value) return;
   debounceFetchNRIC();
 }
 
+
+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);
+  return findPersonByPhoneNumberMultipleResult(contact, prop.site);
+});
+
 function handleUpdatePhoneNumber() {
-  if (currentAutofillSource.value && currentAutofillSource.value !== "contact")
-    return;
+  if(!isPhoneFieldFocused.value) return;
 
   const search = visitor.contact?.trim() || "";
-  if (search.length < 4) {
+  if (search.length < 1) {
     phoneSearchResults.value = [];
     phoneSearchMenu.value = false;
     return;
   }
 
-  phoneSearchResults.value = mockPhoneNumberSearchResults.filter((item) =>
-    getPersonContactOptions(item as Partial<TPeople>).some((contact) =>
-      contact.includes(search)
-    )
-  ) as Partial<TPeople>[];
+  phoneSearchResults.value = mockPhoneNumberSearchResults
   phoneSearchMenu.value = phoneSearchResults.value.length > 0;
 }
 
 function handleUpdateVehicleNumber() {
-  if (currentAutofillSource.value && currentAutofillSource.value !== "vehicleNumber")
-    return;
+ if(!isPlateNumberFieldFocused.value) return;
 
   const search = visitor.plateNumber?.trim()?.toUpperCase() || "";
-  if (search.length < 4) {
+  if (search.length < 1) {
     vehicleSearchResults.value = [];
     vehicleSearchMenu.value = false;
     return;
   }
 
-  vehicleSearchResults.value = mockVehicleNumberSearchResults.filter((item) =>
-    getPersonPlateOptions(item as Partial<TPeople>).some((plate) =>
-      plate.toUpperCase().includes(search)
-    )
-  ) as Partial<TPeople>[];
+  vehicleSearchResults.value = mockVehicleNumberSearchResults
   vehicleSearchMenu.value = vehicleSearchResults.value.length > 0;
 }
 

package/composables/usePeople.ts

@@ -44,6 +44,19 @@ export default function () {
     });
   }
 
+    async function findPersonByPhoneNumberMultipleResult(contact: string, site: string) {
+    return await $fetch<Record<any, any>>(`/api/people/contact`, {
+      method: "GET",
+      query: { contact, site },
+    });
+  }
+    async function findPersonByPlateNumberMultipleResult(plateNumber: string, site: string) {
+    return await $fetch<Record<any, any>>(`/api/people/plate-number`, {
+      method: "GET",
+      query: { plateNumber, site },
+    });
+  }
+
   async function findPersonByContact(
     contact: string
   ): Promise<null | Partial<TPeople>> {
@@ -124,6 +137,8 @@ export default function () {
     deleteById,
     findPersonByNRIC,
     findPersonByNRICMultipleResult,
+    findPersonByPhoneNumberMultipleResult,
+    findPersonByPlateNumberMultipleResult,
     findPersonByContact,
     getPeopleByUnit,
     searchCompanyList,

package/package.json

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

package/utils/mock-people-response.ts

@@ -0,0 +1,38 @@
+
+export const mockPhoneNumberSearchResults: Partial<TPeople>[] = [
+  {
+    _id: "mock-phone-multiple-options",
+    name: "James Smith",
+    nric: "1323232499",
+    contacts: ["653939394", "81234567"],
+    visitorPlateNumbers: ["34566", "SMA1234A"],
+    companyName: ["Mock Company Pte Ltd"],
+  },
+  {
+    _id: "mock-phone-single-option",
+    name: "Jane Tan",
+    nric: "S1234567A",
+    contacts: ["91234567"],
+    visitorPlateNumbers: ["SGB5678B"],
+    companyName: ["Single Option Company"],
+  },
+];
+
+export const mockVehicleNumberSearchResults: Partial<TPeople>[] = [
+  {
+    _id: "mock-vehicle-multiple-options",
+    name: "James Smith",
+    nric: "1323232499",
+    contacts: ["653939394", "81234567"],
+    visitorPlateNumbers: ["34566", "SMA1234A"],
+    companyName: ["Mock Company Pte Ltd"],
+  },
+  {
+    _id: "mock-vehicle-single-option",
+    name: "Ali Lim",
+    nric: "T7654321B",
+    contacts: ["98765432"],
+    visitorPlateNumbers: ["SKX2468C"],
+    companyName: ["Vehicle Single Company"],
+  },
+];