@7365admin1/layer-common 3.0.31-staging.16 → 3.0.31-staging.18

package/components/ServiceProviderMain.vue

@@ -548,7 +548,7 @@
               variant="flat"
               class="text-none sp-invite-submit-btn"
               height="76"
-              :disabled="!validServiceProvider"
+              :disabled="!canSubmitInvite"
               :loading="disableServiceProvider"
               @click="submitServiceProviderInvite()"
             >
@@ -574,6 +574,7 @@ type ListTab = "active" | "pending" | "inactive";
 
 type TableRow = {
   _id: string;
+  userId: string;
   serviceProviderOrgId: string;
   companyName: string;
   email: string;
@@ -733,11 +734,10 @@ const {
   updateStatus: updateServiceProviderStatus,
   invite,
 } = useServiceProvider();
-const { getAll: getAllMembers } = useMember();
+const { getAllByUserId } = useMember();
 
 const { getVerifications, cancelUserInvitation, getVerificationByEmail } =
   useVerification();
-const { getOrgsByMembership } = useMember();
 
 const existingAccount = ref<any>(null);
 const checkingExistingAccount = ref(false);
@@ -757,11 +757,10 @@ const createInviteDialog = ref(false);
 // const loadingInviteRoles = ref(false);
 // const serviceProviderInviteRoles = ref<Array<Record<string, any>>>([]);
 
-const { getByUserType } = useMember();
-const { getOrgs } = useOrg();
 
 async function checkExistingAccount(email: string) {
   existingAccount.value = null;
+  messageServiceProvider.value = "";
 
   if (!email.trim() || emailRule(email) !== true) return;
 
@@ -770,30 +769,50 @@ async function checkExistingAccount(email: string) {
   try {
     const user = await getUserByEmail(email);
 
-    if (!user?._id) return;
+if (!user?._id) return;
 
-    const orgs = await getOrgs({
-      user: user._id,
-    });
+const members = await getAllByUserId(user._id);
 
-    const matchedOrg = orgs.items?.find(
-      (org: any) => org.type === serviceProviderInvite.value.app
-    );
+const appMember = (members.items ?? []).find(
+  (member: any) => member.type === serviceProviderInvite.value.app
+);
+
+if (!appMember) {
+  existingAccount.value = null;
+  return;
+}
+
+if (
+  appMember.org === props.orgId &&
+  (appMember.siteId || "") === (props.siteId || "")
+) {
+  existingAccount.value = null;
+  messageServiceProvider.value =
+    "This user is already a member of this service provider.";
+  return;
+}
+
+existingAccount.value = {
+  _id: appMember.org,
+  text: appMember.orgName,
+  org: appMember.org,
+  orgName: appMember.orgName,
+  siteId: appMember.siteId,
+  siteName: appMember.siteName,
+};
 
-    if (matchedOrg) {
-      existingAccount.value = {
-        _id: matchedOrg.value,
-        text: matchedOrg.text,
-        ...matchedOrg,
-      };
-    }
   } catch (error) {
     existingAccount.value = null;
   } finally {
     checkingExistingAccount.value = false;
   }
 }
-
+const canSubmitInvite = computed(() => {
+  return (
+    validServiceProvider.value &&
+    !messageServiceProvider.value
+  );
+});
 watch(
   () => serviceProviderInvite.value.email,
   async (value) => {
@@ -939,6 +958,7 @@ function formatEmailCell(value: unknown): string {
 function mapProviderRows(raw: Record<string, any>[]): TableRow[] {
   return raw.map((row) => ({
     _id: String(row._id ?? ""),
+    userId: String(row.user ?? ""),
     serviceProviderOrgId: String(row.serviceProviderOrgId ?? ""),
     companyName: row.name ?? "-",
     email: formatEmailCell(row.email),
@@ -961,6 +981,7 @@ function inviteTypeLabel(t: string) {
 function mapInviteRows(raw: Record<string, any>[]): TableRow[] {
   return raw.map((row) => ({
     _id: String(row._id ?? ""),
+    userId: String(row.user ?? ""),
     serviceProviderOrgId: String(row.metadata?.serviceProviderOrgId ?? ""),
     companyName: row.metadata?.name || "-",
     email: formatEmailCell(row.email),
@@ -1029,16 +1050,12 @@ async function openView(row: TableRow) {
 
   loadingMembers.value = true;
   try {
-    const data = await getAllMembers({
-      page: 1,
-      limit: 1000,
-      org: row.serviceProviderOrgId,
-      status: "active",
-    });
+    const data = await getAllByUserId(row.userId);
+
     serviceProviderMembers.value = (data.items ?? []).map((member: any) => ({
-      _id: String(member._id ?? ""),
-      name: member.name || member.fullName || member.email || "-",
-      role: member.roleName || member.role?.name || "-",
+      _id: member._id,
+      name: member.name || "-",
+      role: member.role || "-",
     }));
   } catch (error: any) {
     showMessage(errorConverter(error), "error");

package/components/VisitorForm.vue

@@ -18,64 +18,27 @@
       </div>
       <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''">
         <v-row no-gutters class="pt-4">
-          <v-col v-if="shouldShowField('contractorType')" cols="12">
-            <InputLabel class="text-capitalize" title="Contractor Type" required />
-            <v-combobox v-model="contractorTypeObj" v-model:search="contractorTypeInput" ref="contractorTypeCombo"
-              autocomplete="off" :hide-no-data="false" @update:focused="handleFocusedContractorType"
-              :items="contractorTypes" :rules="[requiredRule]" item-value="value"
-              @update:model-value="handleSelectContractorType" variant="outlined" density="comfortable" persistent-hint
-              small-chips>
-              <template v-slot:no-data>
-                <v-list-item>
-                  <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.
-                  </v-list-item-title>
-                </v-list-item>
-              </template>
-            </v-combobox>
-          </v-col>
-
           <v-col v-if="shouldShowField('attachments')" class="w-100">
             <InputLabel class="text-capitalize" title="Attach Image" />
             <InputFileV2 v-model="visitor.attachments" multiple :max-length="3" />
           </v-col>
 
-          <v-col v-if="shouldShowField('name')" cols="12">
-            <v-row>
-              <v-col cols="12">
-                <InputLabel class="text-capitalize" title="Full Name" required />
-                <v-text-field v-model.trim="visitor.name" density="comfortable" :rules="[requiredRule]" />
-              </v-col>
-            </v-row>
-          </v-col>
-
           <v-col v-if="shouldShowField('nric')" cols="12">
             <v-row>
               <v-col cols="12">
                 <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" @focus="isNricFieldFocused = true" @blur="isNricFieldFocused = false"
+                    <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>
 
-                  <v-list v-if="nricSearchResults.length" class="pa-1">
+                  <v-list v-if="nricSearchResults.length" class="pa-1 phone-search-results">
                     <v-list-item v-for="(item, index) in nricSearchResults" :key="item._id || index"
                       @click="selectNricSearchResult(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>
-                      </div>
-                      <template v-if="item?.contacts && item?.visitorPlateNumbers">
-                        <div v-if="item.contacts?.length < 2 && item.visitorPlateNumbers?.length < 2"
-                          class="d-flex align-center justify-space-between ga-4 w-100">
-                          <span class="text-subtitle-1">{{ item.contacts?.[0] || 'N/A' }}</span>
-                          <span class="text-subtitle-1 text-no-wrap">{{ item.visitorPlateNumbers?.[0] || 'N/A' }}</span>
-                        </div>
-                      </template>
+                      <VisitorSearchResultSummary :item="item" />
                     </v-list-item>
                   </v-list>
                 </v-menu>
@@ -84,24 +47,25 @@
           </v-col>
 
           <v-col v-if="shouldShowField('contact')" cols="12">
-            <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]" @focus="isPhoneFieldFocused = true" @blur="isPhoneFieldFocused = false"
-                  density="comfortable" :key="currentAutofillSource + 'phone-key'"
-                  @update:model-value="handleUpdatePhoneNumber" />
-              </template>
+            <v-row>
+              <v-col cols="12">
+                <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]"
+                      @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="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>
-                  </div>
-                </v-list-item>
-              </v-list>
-            </v-menu>
+                  <v-list v-if="phoneSearchResults.length" class="pa-1 phone-search-results">
+                    <v-list-item v-for="(item, index) in phoneSearchResults" :key="item._id || index"
+                      @click="selectPhoneNumberSearchResult(item)" class="cursor-pointer nric-search-item">
+                      <VisitorSearchResultSummary :item="item" />
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
+              </v-col>
+            </v-row>
           </v-col>
 
 
@@ -113,17 +77,14 @@
                 <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" @focus="isPlateNumberFieldFocused = true" @blur="isPlateNumberFieldFocused = false" />
+                      @update:model-value="handleUpdateVehicleNumber" @focus="isPlateNumberFieldFocused = true"
+                      @blur="isPlateNumberFieldFocused = false" />
                   </template>
 
-                  <v-list v-if="vehicleSearchResults.length" class="pa-1">
+                  <v-list v-if="vehicleSearchResults.length" class="pa-1 phone-search-results">
                     <v-list-item v-for="(item, index) in vehicleSearchResults" :key="item._id || index"
-                      @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>
-                        <span class="text-subtitle-1 text-no-wrap">NRIC: {{ item.nric || 'N/A' }}</span>
-                      </div>
+                      @click="selectPlateNumberSearchResult(item)" class="cursor-pointer nric-search-item">
+                      <VisitorSearchResultSummary :item="item" />
                     </v-list-item>
                   </v-list>
                 </v-menu>
@@ -131,6 +92,35 @@
             </v-row>
           </v-col>
 
+            <v-col v-if="shouldShowField('contractorType')" cols="12">
+            <InputLabel class="text-capitalize" title="Contractor Type" required />
+            <v-combobox v-model="contractorTypeObj" v-model:search="contractorTypeInput" ref="contractorTypeCombo"
+              autocomplete="off" :hide-no-data="false" @update:focused="handleFocusedContractorType"
+              :items="contractorTypes" :rules="[requiredRule]" item-value="value"
+              @update:model-value="handleSelectContractorType" variant="outlined" density="comfortable" persistent-hint
+              small-chips>
+              <template v-slot:no-data>
+                <v-list-item>
+                  <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.
+                  </v-list-item-title>
+                </v-list-item>
+              </template>
+            </v-combobox>
+          </v-col>
+
+
+          <v-col v-if="shouldShowField('name')" cols="12">
+            <v-row>
+              <v-col cols="12">
+                <InputLabel class="text-capitalize" title="Full Name" required />
+                <v-text-field v-model.trim="visitor.name" density="comfortable" :rules="[requiredRule]" />
+              </v-col>
+            </v-row>
+          </v-col>
+
           <v-col v-if="shouldShowField('deliveryType')" cols="12">
             <v-row>
               <v-col cols="12">
@@ -321,7 +311,7 @@
             <span class="text-no-wrap">NRIC: {{ selectedNricSearchResult.nric || "N/A" }}</span>
           </div>
 
-          <template v-if="selectedNricContactOptions.length > 1">
+          <template v-if="selectedNricContactOptions.length >= 1">
             <h3 class="nric-options-section-title font-weight-bold mb-2">Contact</h3>
             <v-radio-group v-model="selectedNricContact" hide-details color="success" class="nric-option-group">
               <v-radio v-for="contact in selectedNricContactOptions" :key="contact" :label="contact" :value="contact"
@@ -329,7 +319,7 @@
             </v-radio-group>
           </template>
 
-          <template v-if="selectedNricPlateOptions.length > 1">
+          <template v-if="selectedNricPlateOptions.length >= 1">
             <h3 class="nric-options-section-title font-weight-bold mb-2 mt-5">Vehicle</h3>
             <v-radio-group v-model="selectedNricPlate" hide-details color="success" class="nric-option-group">
               <v-radio v-for="plate in selectedNricPlateOptions" :key="plate" :label="plate" :value="plate"
@@ -499,7 +489,6 @@ 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: {
@@ -556,8 +545,8 @@ const {
   findPersonByNRIC,
   findPersonByNRICMultipleResult,
   findPersonByPhoneNumberMultipleResult,
+  findPersonByPlateNumberMultipleResult,
   searchCompanyList,
-  findUsersByPlateNumber,
 } = usePeople();
 const { getById: getUnitDataById } = useBuildingUnit();
 
@@ -767,10 +756,18 @@ const selectedNricPlate = ref("");
 type SearchPerson = Omit<Partial<TPeople>, "contact"> & {
   contact?: string | string[];
   contacts?: string | string[];
-  visitorPlateNumbers?: string | string[];
+  plateNumbers?: string | string[];
   plateNumber?: string | string[];
 };
 
+function getPeopleSearchItems(res: any): Partial<TPeople>[] {
+  if (Array.isArray(res?.items)) return res.items;
+  if (Array.isArray(res?.data)) return res.data;
+  if (Array.isArray(res?.data?.items)) return res.data.items;
+  if (res?.data) return [res.data];
+  if (res && !res?.message) return [res];
+  return [];
+}
 
 const formTitle = computed(() => {
   const isContractorForm = prop.type === "contractor";
@@ -843,12 +840,13 @@ const {
 } = useLazyAsyncData(`fetch-person`, () => {
   const NRIC = visitor.nric;
   if (!NRIC || NRIC.length < 1) return Promise.resolve(null);
-  return findPersonByNRICMultipleResult(NRIC, prop.site);
+
+  const type = prop.type === 'walk-in' ? 'guest' : prop.type
+  return findPersonByNRICMultipleResult(NRIC, prop.site, type);
 });
 
 watch(fetchPersonByNRICReq, (obj) => {
-  const items = obj?.items ?? [];
-  nricSearchResults.value = Array.isArray(items) ? items : [];
+  nricSearchResults.value = getPeopleSearchItems(obj);
   nricSearchMenu.value = nricSearchResults.value.length > 0;
 
   // Mock data for testing NRIC autofill options.
@@ -860,7 +858,7 @@ watch(fetchPersonByNRICReq, (obj) => {
   //     name: "James Smith",
   //     nric: "1323232499",
   //     contacts: ["653939394", "81234567"],
-  //     visitorPlateNumbers: ["34566", "SMA1234A"],
+  //     plateNumbers: ["34566", "SMA1234A"],
   //     companyName: ["Mock Company Pte Ltd"],
   //   } as Partial<SearchPerson>,
   //   {
@@ -868,7 +866,7 @@ watch(fetchPersonByNRICReq, (obj) => {
   //     name: "Jane Tan",
   //     nric: "S1234567A",
   //     contacts: ["91234567"],
-  //     visitorPlateNumbers: ["SGB5678B"],
+  //     plateNumbers: ["SGB5678B"],
   //     companyName: ["Single Option Company"],
   //   } as Partial<SearchPerson>,
   // ];
@@ -921,7 +919,7 @@ function getPersonContactOptions(item: Partial<TPeople>) {
 
 function getPersonPlateOptions(item: Partial<TPeople>) {
   const person = item as SearchPerson;
-  const visitorPlateNumbers = toUniqueStringArray(person.visitorPlateNumbers);
+  const visitorPlateNumbers = toUniqueStringArray(person.plateNumbers);
   if (visitorPlateNumbers.length) return visitorPlateNumbers;
 
   const plateNumbers = toUniqueStringArray(person.plateNumber);
@@ -932,6 +930,28 @@ function getPersonPlateOptions(item: Partial<TPeople>) {
   return toUniqueStringArray([...plateNumbers, ...plates]);
 }
 
+function findMatchingContactOption(options: string[], value?: string | null) {
+  const normalizedValue = value?.trim();
+  if (!normalizedValue) return "";
+
+  return (
+    options.find((option) => option.trim() === normalizedValue) ||
+    options.find((option) => option.replace(/\s/g, "") === normalizedValue.replace(/\s/g, "")) ||
+    ""
+  );
+}
+
+function normalizePlateOption(value?: string | null) {
+  return (value || "").replace(/[^A-Z0-9]/gi, "").toUpperCase();
+}
+
+function findMatchingPlateOption(options: string[], value?: string | null) {
+  const normalizedValue = normalizePlateOption(value);
+  if (!normalizedValue) return "";
+
+  return options.find((option) => normalizePlateOption(option) === normalizedValue) || "";
+}
+
 function applyNricSearchResult(
   item: Partial<TPeople>,
   options: { contacts?: string; plateNumber?: string; source?: Exclude<AutofillSource, null> } = {}
@@ -978,22 +998,26 @@ function selectPlateNumberSearchResult(item: Partial<TPeople>) {
 function selectAutofillSearchResult(item: Partial<TPeople>, source: Exclude<AutofillSource, null>) {
   const contactOptions = getPersonContactOptions(item);
   const plateOptions = getPersonPlateOptions(item);
+  const selectedContact =
+    findMatchingContactOption(contactOptions, visitor.contact) || contactOptions[0] || "";
+  const selectedPlate =
+    findMatchingPlateOption(plateOptions, visitor.plateNumber) || plateOptions[0] || "";
 
-  if (source === "nric" && (contactOptions.length > 1 || plateOptions.length > 1)) {
+  if (contactOptions.length > 1 || plateOptions.length > 1) {
     nricSearchMenu.value = false;
     phoneSearchMenu.value = false;
     vehicleSearchMenu.value = false;
     currentAutofillSource.value = source;
     selectedNricSearchResult.value = item;
-    selectedNricContact.value = contactOptions[0] || "";
-    selectedNricPlate.value = plateOptions[0] || "";
+    selectedNricContact.value = selectedContact;
+    selectedNricPlate.value = selectedPlate;
     dialog.nricAutofillOptions = true;
     return;
   }
 
   applyNricSearchResult(item, {
-    contacts: contactOptions[0],
-    plateNumber: plateOptions[0],
+    contacts: selectedContact,
+    plateNumber: selectedPlate,
     source,
   });
 }
@@ -1362,7 +1386,8 @@ const debounceFetchNRIC = debounce(fetchPersonByNRICRefresh, 500);
 
 function handleUpdateNRIC() {
   if (skipNricFetch.value) return;
-  if(!isNricFieldFocused.value) return;
+  if (!isNricFieldFocused.value) return;
+  if (visitor.nric && visitor.nric?.length < 4) return;
   debounceFetchNRIC();
 }
 
@@ -1374,35 +1399,59 @@ const {
 } = useLazyAsyncData(`fetch-person-phone-number`, () => {
   const contact = visitor.contact;
   if (!contact || contact.length < 4) return Promise.resolve(null);
-  return findPersonByPhoneNumberMultipleResult(contact, prop.site);
+  const type = prop.type === 'walk-in' ? 'guest' : prop.type
+  return findPersonByPhoneNumberMultipleResult(contact, prop.site, type);
+});
+
+watch(fetchPersonByPhoneNumber, (obj) => {
+  phoneSearchResults.value = getPeopleSearchItems(obj);
+  phoneSearchMenu.value = phoneSearchResults.value.length > 0;
 });
 
+const debounceFetchPhoneNumber = debounce(fetchPersonByPhoneNumberRefresh, 500);
+
 function handleUpdatePhoneNumber() {
-  if(!isPhoneFieldFocused.value) return;
+  if (!isPhoneFieldFocused.value) return;
 
   const search = visitor.contact?.trim() || "";
-  if (search.length < 1) {
+  if (search.length < 4) {
     phoneSearchResults.value = [];
     phoneSearchMenu.value = false;
     return;
   }
 
-  phoneSearchResults.value = mockPhoneNumberSearchResults
-  phoneSearchMenu.value = phoneSearchResults.value.length > 0;
+  debounceFetchPhoneNumber();
 }
 
+const {
+  data: fetchPersonByPlateNumber,
+  refresh: fetchPersonByPlateNumberRefresh,
+  pending: fetchPersonByPlateNumberPending,
+} = useLazyAsyncData(`fetch-person-plate-number`, () => {
+  const plateNumber = visitor.plateNumber?.trim()?.toUpperCase() || "";
+  if (plateNumber.length < 4) return Promise.resolve(null);
+  const type = prop.type === 'walk-in' ? 'guest' : prop.type
+  return findPersonByPlateNumberMultipleResult(plateNumber, prop.site, type);
+});
+
+watch(fetchPersonByPlateNumber, (obj) => {
+  vehicleSearchResults.value = getPeopleSearchItems(obj);
+  vehicleSearchMenu.value = vehicleSearchResults.value.length > 0;
+});
+
+const debounceFetchPlateNumber = debounce(fetchPersonByPlateNumberRefresh, 500);
+
 function handleUpdateVehicleNumber() {
- if(!isPlateNumberFieldFocused.value) return;
+  if (!isPlateNumberFieldFocused.value) return;
 
   const search = visitor.plateNumber?.trim()?.toUpperCase() || "";
-  if (search.length < 1) {
+  if (search.length < 4) {
     vehicleSearchResults.value = [];
     vehicleSearchMenu.value = false;
     return;
   }
 
-  vehicleSearchResults.value = mockVehicleNumberSearchResults
-  vehicleSearchMenu.value = vehicleSearchResults.value.length > 0;
+  debounceFetchPlateNumber();
 }
 
 function backToSelection() {
@@ -2009,6 +2058,11 @@ onMounted(() => {
   min-height: 72px;
 }
 
+.phone-search-results {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
 .nric-options-card {
   border-radius: 16px !important;
 }

package/components/VisitorSearchResultSummary.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="w-100 py-2">
+    <div class="d-flex align-center mb-3 justify-space-between ga-4 w-100">
+      <span class="text-subtitle-1" style="min-width: 50%">
+        <div>Name:</div>
+        <div>{{ displayName }}</div>
+      </span>
+      <span class="text-subtitle-1" style="min-width: 50%">
+        <div>NRIC:</div>
+        <div>{{ item?.nric || "N/A" }}</div>
+      </span>
+    </div>
+
+    <div
+      v-if="contacts.length < 2 && plateNumbers.length < 2"
+      class="d-flex align-center justify-space-between ga-4 w-100"
+    >
+      <div class="text-subtitle-1" style="min-width: 50%">
+        <div>Contact:</div>
+        <div>{{ contacts[0] || "N/A" }}</div>
+      </div>
+      <div class="text-subtitle-1" style="min-width: 50%">
+        <div>Plate:</div>
+        <div class="text-uppercase">{{ plateNumbers[0] || "N/A" }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  item: any;
+}>();
+
+const displayName = computed(() => {
+  const name =
+    props.item?.name ||
+    [props.item?.firstName, props.item?.lastName].filter(Boolean).join(" ");
+
+  return name || "Unknown";
+});
+
+const contacts = computed(() => {
+  const values = [
+    props.item?.contact,
+    props.item?.phoneNumber,
+    ...(Array.isArray(props.item?.contacts) ? props.item.contacts : []),
+    ...(Array.isArray(props.item?.contactNumbers)
+      ? props.item.contactNumbers
+      : []),
+    ...(Array.isArray(props.item?.phoneNumbers) ? props.item.phoneNumbers : []),
+  ];
+
+  return Array.from(
+    new Set(
+      values
+        .map((contact: any) =>
+          typeof contact === "string"
+            ? contact
+            : contact?.contact || contact?.phoneNumber || contact?.number
+        )
+        .filter(Boolean)
+    )
+  );
+});
+
+const plateNumbers = computed(() => {
+  const values = [
+    props.item?.plateNumber,
+    ...(Array.isArray(props.item?.plates) ? props.item.plates : []),
+    ...(Array.isArray(props.item?.plateNumbers) ? props.item.plateNumbers : []),
+  ];
+
+  return Array.from(
+    new Set(
+      values
+        .map((plate: any) =>
+          typeof plate === "string"
+            ? plate
+            : plate?.plateNumber || plate?.number || plate?.value
+        )
+        .filter(Boolean)
+    )
+  );
+});
+</script>

package/composables/usePeople.ts

@@ -37,43 +37,50 @@ export default function () {
     });
   }
 
-  async function findPersonByNRICMultipleResult(nric: string, site: string) {
-    return await $fetch<Record<any, any>>(`/api/people/all-nric`, {
+  async function findPersonByNRICMultipleResult(nric: string, site?: string, type?:string) {
+    return await $fetch<Record<any, any>>(`/api/people`, {
       method: "GET",
-      query: { nric, site },
+      query: site ? { nric, type, site } : { nric, type },
     });
   }
 
-    async function findPersonByPhoneNumberMultipleResult(contact: string, site: string) {
-    return await $fetch<Record<any, any>>(`/api/people/contact`, {
+  async function findPersonByPhoneNumberMultipleResult(
+    contact: string,
+    site?: string,
+    type?:string
+  ) {
+    return await $fetch<Record<any, any>>(`/api/people`, {
       method: "GET",
-      query: { contact, site },
+      query: site ? { contact, site, type } : { contact, type },
     });
   }
-    async function findPersonByPlateNumberMultipleResult(plateNumber: string, site: string) {
-    return await $fetch<Record<any, any>>(`/api/people/plate-number`, {
+
+  async function findPersonByPlateNumberMultipleResult(
+    plateNumber: string,
+    site?: string,
+    type?:string
+  ) {
+    return await $fetch<Record<any, any>>(`/api/people`, {
       method: "GET",
-      query: { plateNumber, site },
+      query: site ? { plateNumber, site, type } : { plateNumber, type },
     });
   }
 
   async function findPersonByContact(
     contact: string
   ): Promise<null | Partial<TPeople>> {
-    return await $fetch<Record<string, any>>(`/api/people/contact/${contact}`, {
+    return await $fetch<Record<string, any>>(`/api/people`, {
       method: "GET",
+      query: { contact },
     });
   }
   async function findUsersByPlateNumber(
     plateNumber: string
   ): Promise<null | Partial<TPeople>> {
-    return await $fetch<Record<string, any>>(
-      `/api/people/plateNumber/${plateNumber}`,
-      {
-        method: "GET",
-        query: { limit: 20 },
-      }
-    );
+    return await $fetch<Record<string, any>>(`/api/people`, {
+      method: "GET",
+      query: { plateNumber },
+    });
   }
 
   async function searchCompanyList(

package/package.json

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

package/types/people.d.ts

@@ -11,7 +11,7 @@ declare type TPeople = {
   nric?: string;
   contact?: string;
   contacts?: string[] //used in autofill only in VMS
-  visitorPlateNumbers?: string [] //used in autofill only in VMS
+  plateNumbers?: string [] //used in autofill only in VMS
   remarks?: string;
   start?: string;
   end?: string;