@7365admin1/layer-common 3.0.30 → 3.0.31-staging.11

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>
@@ -62,11 +62,20 @@
                       @update:model-value="handleUpdateNRIC" :loading="fetchPersonByNRICPending" />
                   </template>
 
-                  <v-list v-if="nricSearchResults.length">
+                  <v-list v-if="nricSearchResults.length" class="pa-1">
                     <v-list-item v-for="(item, index) in nricSearchResults" :key="item._id || index"
-                      @click="selectNricSearchResult(item)" class="cursor-pointer">
-                      <v-list-item-title>{{ item.name || 'Unknown' }}</v-list-item-title>
-                      <v-list-item-subtitle>{{ item.contact }}</v-list-item-subtitle>
+                      @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>
                     </v-list-item>
                   </v-list>
                 </v-menu>
@@ -76,8 +85,28 @@
 
           <v-col v-if="shouldShowField('contact')" cols="12">
             <InputLabel class="text-capitalize" title="Phone Number" required />
-            <InputPhoneNumberV2 v-model="visitor.contact" :rules="[requiredRule]" density="comfortable"
-              :key="currentAutofillSource + 'phone-key'" />
+            <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]"
+                  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">
+                  <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>
+                  <div v-if="getPersonContactOptions(item).length < 2 && getPersonPlateOptions(item).length < 2"
+                    class="d-flex align-center justify-space-between ga-4 w-100">
+                    <span class="text-subtitle-1">{{ getPersonContactOptions(item)[0] || 'N/A' }}</span>
+                    <span class="text-subtitle-1 text-no-wrap">{{ getPersonPlateOptions(item)[0] || 'N/A' }}</span>
+                  </div>
+                </v-list-item>
+              </v-list>
+            </v-menu>
           </v-col>
 
           <v-col v-if="shouldShowField('deliveryType')" cols="12">
@@ -108,7 +137,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.
@@ -138,7 +167,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.
@@ -155,9 +184,30 @@
           <v-col v-if="shouldShowField('plateNumber')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel class="text-capitalize" title="Vehicle Number" required />
+                <InputLabel class="text-capitalize" title="Vehicle Number" :required="isVehicleRequired" />
                 <!-- <v-text-field v-model.trim.uppercase="visitor.plateNumber" density="comfortable" /> -->
-                <InputVehicleNumber v-model="visitor.plateNumber" density="comfortable" />
+                <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" />
+                  </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')"
+                      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>
+                      <div v-if="getPersonContactOptions(item).length < 2 && getPersonPlateOptions(item).length < 2"
+                        class="d-flex align-center justify-space-between ga-4 w-100">
+                        <span class="text-subtitle-1">{{ getPersonContactOptions(item)[0] || 'N/A' }}</span>
+                        <span class="text-subtitle-1 text-no-wrap">{{ getPersonPlateOptions(item)[0] || 'N/A' }}</span>
+                      </div>
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
               </v-col>
             </v-row>
           </v-col>
@@ -212,8 +262,8 @@
             <MemberInformation v-model="visitor.members" :type="prop.type" :contractor-type="visitor.contractorType"
               :site="prop.site" :selected-visitor-pass="visitor.visitorPass" :clearable="true"
               :settings="entryPassSettings" :settings-loading="entryPassSettingsPending || siteDataPending"
-              :unit-id="visitor.unit || null"
-              :hid-qr-code-enabled="hidQrCodePassAllowed" :hid-qr-printer-configured="hasHidQrPrinterConfig"
+              :unit-id="visitor.unit || null" :hid-qr-code-enabled="hidQrCodePassAllowed"
+              :hid-qr-printer-configured="hasHidQrPrinterConfig"
               :selected-nfc-cards="passType === 'NFC' ? passCards : []" />
           </v-col>
 
@@ -264,6 +314,47 @@
         @update:people="handleAutofillDataViaVehicleNumber" />
     </v-dialog>
 
+    <v-dialog v-model="dialog.nricAutofillOptions" max-width="430">
+      <v-card v-if="selectedNricSearchResult" class="nric-options-card">
+        <v-card-actions class="justify-end pa-1">
+          <v-btn icon="mdi-close" variant="text" size="small" @click="closeNricAutofillOptions" />
+        </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>{{ selectedNricSearchResult.name || "Unknown" }}</span>
+            <span class="text-no-wrap">NRIC: {{ selectedNricSearchResult.nric || "N/A" }}</span>
+          </div>
+
+          <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"
+                class="nric-option-radio" />
+            </v-radio-group>
+          </template>
+
+          <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"
+                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="closeNricAutofillOptions">Cancel</v-btn>
+          <v-btn color="primary-button" variant="flat" class="text-none px-5" size="small"
+            @click="confirmNricAutofillOptions">
+            Select
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
     <v-dialog v-model="dialog.showNonCheckedOutDialog" max-width="1200">
       <v-card :loading="loading.checkingOut || loading.searchingNonCheckedOut">
         <v-card-actions class="justify-end bg-grey-lighten-3 pa-4">
@@ -280,14 +371,8 @@
             <div>Phone Number: {{ visitor.contact || "N/A" }}</div>
           </div>
 
-          <v-data-table
-            class="border rounded"
-            :headers="nonCheckedOutVisitorHeaders"
-            :items="matchingNonCheckedOutVisitors"
-            item-value="_id"
-            :items-per-page="5"
-            hide-default-footer
-          >
+          <v-data-table class="border rounded" :headers="nonCheckedOutVisitorHeaders"
+            :items="matchingNonCheckedOutVisitors" item-value="_id" :items-per-page="5" hide-default-footer>
             <template #item.name="{ item }">
               <div class="d-flex align-center ga-3">
                 <v-avatar color="red" size="32">
@@ -336,7 +421,9 @@
                   <v-icon icon="mdi-clock-check-outline" color="green" size="20" class="mr-1" />
                   {{ formatNonCheckedOutDate(item.checkIn) }}
                 </div>
-                <v-btn size="small" class="text-none" color="red" variant="flat" :loading="loading.checkingOut && selectedCheckoutVisitorId === item._id" :disabled="!item._id" @click.stop="item._id && handleCheckout(item._id)">
+                <v-btn size="small" class="text-none" color="red" variant="flat"
+                  :loading="loading.checkingOut && selectedCheckoutVisitorId === item._id" :disabled="!item._id"
+                  @click.stop="item._id && handleCheckout(item._id)">
                   Check Out
                 </v-btn>
               </div>
@@ -344,7 +431,8 @@
           </v-data-table>
 
           <div class="d-flex justify-end mt-8">
-            <v-btn color="red" variant="flat" size="large" class="text-none px-10" :loading="loading.searchingNonCheckedOut" @click="handleSkipNricNonCheckedOut">
+            <v-btn  color="red" variant="flat" size="large" class="text-none px-10"
+              :loading="loading.searchingNonCheckedOut" @click="handleSkipNricNonCheckedOut">
               Skip NRIC: {{ visitor.nric || "N/A" }}
             </v-btn>
           </div>
@@ -352,20 +440,10 @@
       </v-card>
     </v-dialog>
 
-    <v-dialog
-      v-if="enableUnregistered"
-      v-model="dialog.showUnregisteredPlateDialog"
-      max-width="900"
-      persistent
-    >
+    <v-dialog v-if="enableUnregistered" v-model="dialog.showUnregisteredPlateDialog" max-width="900" persistent>
       <v-card color="background" class="pa-4">
         <v-card-actions class="justify-end pa-0">
-          <v-btn
-            icon="mdi-close"
-            variant="text"
-            size="large"
-            @click="closeUnregisteredPlateDialog"
-          />
+          <v-btn icon="mdi-close" variant="text" size="large" @click="closeUnregisteredPlateDialog" />
         </v-card-actions>
 
         <v-card-text class="text-center pt-2">
@@ -388,10 +466,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr
-                v-for="match in unregisteredPlateMatches"
-                :key="match._id || match.plateNumber"
-              >
+              <tr v-for="match in unregisteredPlateMatches" :key="match._id || match.plateNumber">
                 <td class="text-left font-weight-bold text-uppercase">
                   {{ match.plateNumber || "N/A" }}
                 </td>
@@ -399,13 +474,8 @@
                   {{ formatUnregisteredCheckIn(match.checkIn) }}
                 </td>
                 <td class="text-center">
-                  <v-btn
-                    color="red"
-                    class="text-capitalize"
-                    density="compact"
-                    size="large"
-                    @click="selectUnregisteredPlateMatch(match)"
-                  >
+                  <v-btn color="red" class="text-capitalize" density="compact" size="large"
+                    @click="selectUnregisteredPlateMatch(match)">
                     Update
                   </v-btn>
                 </td>
@@ -415,13 +485,7 @@
         </v-card-text>
 
         <v-card-actions>
-          <v-btn
-            block
-            color="red"
-            variant="flat"
-            size="x-large"
-            @click="closeUnregisteredPlateDialog"
-          >
+          <v-btn block color="red" variant="flat" size="x-large" @click="closeUnregisteredPlateDialog">
             Cancel & Add New
           </v-btn>
         </v-card-actions>
@@ -541,6 +605,7 @@ const hidQrPrinted = ref(false);
 const registeredUnitCompanyName = ref("N/A");
 
 const dialog = reactive({
+  nricAutofillOptions: false,
   vehicleNumberUsersList: false,
   showNonCheckedOutDialog: false,
   showUnregisteredPlateDialog: false,
@@ -635,6 +700,10 @@ const requireNRIC = computed(() => {
   return prop.type !== "walk-in" && prop.type !== "guest";
 });
 
+const isVehicleRequired = computed(() => {
+  return ["guest", "drop-off", "pick-up"].includes(prop.type);
+});
+
 const hidQrCodePassConfig = computed(() => {
   return (siteData.value as any)?.metadata?.hidQrCodePass || {};
 });
@@ -689,6 +758,58 @@ const companyAutofillDataArray = ref<
 const nricSearchMenu = ref(false);
 const nricSearchResults = ref<Partial<TPeople>[]>([]);
 const skipNricFetch = ref(false);
+const phoneSearchMenu = ref(false);
+const phoneSearchResults = ref<Partial<TPeople>[]>([]);
+const vehicleSearchMenu = ref(false);
+const vehicleSearchResults = ref<Partial<TPeople>[]>([]);
+const selectedNricSearchResult = ref<Partial<TPeople> | null>(null);
+const selectedNricContact = ref("");
+const selectedNricPlate = ref("");
+
+type NricSearchPerson = 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";
@@ -768,6 +889,29 @@ watch(fetchPersonByNRICReq, (obj) => {
   const items = obj?.items ?? [];
   nricSearchResults.value = Array.isArray(items) ? items : [];
   nricSearchMenu.value = nricSearchResults.value.length > 0;
+
+  // Mock data for testing NRIC autofill options.
+  // Uncomment this block and type at least 4 characters in NRIC to test
+  // both the multi-option dialog and immediate single-option autofill.
+  // nricSearchResults.value = [
+  //   {
+  //     _id: "mock-person-multiple-options",
+  //     name: "James Smith",
+  //     nric: "1323232499",
+  //     contacts: ["653939394", "81234567"],
+  //     visitorPlateNumbers: ["34566", "SMA1234A"],
+  //     companyName: ["Mock Company Pte Ltd"],
+  //   } as Partial<NricSearchPerson>,
+  //   {
+  //     _id: "mock-person-single-option",
+  //     name: "Jane Tan",
+  //     nric: "S1234567A",
+  //     contacts: ["91234567"],
+  //     visitorPlateNumbers: ["SGB5678B"],
+  //     companyName: ["Single Option Company"],
+  //   } as Partial<NricSearchPerson>,
+  // ];
+  // nricSearchMenu.value = true;
 });
 
 watch(
@@ -783,21 +927,68 @@ watch(
 
 watch(
   () => visitor.contact,
-  () => {
+  (value) => {
     skipNonCheckedOutNric.value = false;
+    if (!value || value.length < 4) {
+      phoneSearchMenu.value = false;
+      phoneSearchResults.value = [];
+    }
   }
 );
 
-function selectNricSearchResult(item: Partial<TPeople>) {
+const selectedNricContactOptions = computed(() => {
+  return selectedNricSearchResult.value
+    ? getPersonContactOptions(selectedNricSearchResult.value)
+    : [];
+});
+
+const selectedNricPlateOptions = computed(() => {
+  return selectedNricSearchResult.value
+    ? getPersonPlateOptions(selectedNricSearchResult.value)
+    : [];
+});
+
+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 NricSearchPerson;
+  return toUniqueStringArray(person.contacts || person.contact);
+}
+
+function getPersonPlateOptions(item: Partial<TPeople>) {
+  const person = item as NricSearchPerson;
+  const visitorPlateNumbers = toUniqueStringArray(person.visitorPlateNumbers);
+  if (visitorPlateNumbers.length) return visitorPlateNumbers;
+
+  const plateNumbers = toUniqueStringArray(person.plateNumber);
+  const plates = Array.isArray(person.plates)
+    ? person.plates.map((plate) => plate?.plateNumber)
+    : [];
+
+  return toUniqueStringArray([...plateNumbers, ...plates]);
+}
+
+function applyNricSearchResult(
+  item: Partial<TPeople>,
+  options: { contacts?: string; plateNumber?: string; source?: Exclude<AutofillSource, null> } = {}
+) {
   nricSearchMenu.value = false;
+  phoneSearchMenu.value = false;
+  vehicleSearchMenu.value = false;
   nricSearchResults.value = [];
+  phoneSearchResults.value = [];
+  vehicleSearchResults.value = [];
   skipNricFetch.value = true;
 
-  currentAutofillSource.value = "nric";
+  currentAutofillSource.value = options.source || "nric";
 
   visitor.nric = item.nric || visitor.nric;
   visitor.name = item.name || visitor.name;
-  visitor.contact = item.contact || visitor.contact;
+  visitor.contact = options.contacts || getPersonContactOptions(item)[0] || visitor.contact;
+  visitor.plateNumber = options.plateNumber || getPersonPlateOptions(item)[0] || visitor.plateNumber;
   companyNames.value = item.companyName ?? [];
   if (!visitor.company) {
     visitor.company = companyNames.value?.[0] || visitor.company;
@@ -813,6 +1004,51 @@ function selectNricSearchResult(item: Partial<TPeople>) {
   }, 1000);
 }
 
+function selectNricSearchResult(item: Partial<TPeople>) {
+  selectAutofillSearchResult(item, "nric");
+}
+
+function selectAutofillSearchResult(item: Partial<TPeople>, source: Exclude<AutofillSource, null>) {
+  const contactOptions = getPersonContactOptions(item);
+  const plateOptions = getPersonPlateOptions(item);
+
+  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] || "";
+    dialog.nricAutofillOptions = true;
+    return;
+  }
+
+  applyNricSearchResult(item, {
+    contacts: contactOptions[0],
+    plateNumber: plateOptions[0],
+    source,
+  });
+}
+
+function closeNricAutofillOptions() {
+  dialog.nricAutofillOptions = false;
+  selectedNricSearchResult.value = null;
+  selectedNricContact.value = "";
+  selectedNricPlate.value = "";
+}
+
+function confirmNricAutofillOptions() {
+  if (!selectedNricSearchResult.value) return;
+
+  applyNricSearchResult(selectedNricSearchResult.value, {
+    contacts: selectedNricContact.value,
+    plateNumber: selectedNricPlate.value,
+    source: currentAutofillSource.value || "nric",
+  });
+  closeNricAutofillOptions();
+}
+
 const {
   data: fetchCompanyListReq,
   refresh: fetchCompanyListRefresh,
@@ -1164,6 +1400,44 @@ function handleUpdateNRIC() {
   debounceFetchNRIC();
 }
 
+function handleUpdatePhoneNumber() {
+  if (currentAutofillSource.value && currentAutofillSource.value !== "contact")
+    return;
+
+  const search = visitor.contact?.trim() || "";
+  if (search.length < 4) {
+    phoneSearchResults.value = [];
+    phoneSearchMenu.value = false;
+    return;
+  }
+
+  phoneSearchResults.value = mockPhoneNumberSearchResults.filter((item) =>
+    getPersonContactOptions(item as Partial<TPeople>).some((contact) =>
+      contact.includes(search)
+    )
+  ) as Partial<TPeople>[];
+  phoneSearchMenu.value = phoneSearchResults.value.length > 0;
+}
+
+function handleUpdateVehicleNumber() {
+  if (currentAutofillSource.value && currentAutofillSource.value !== "vehicleNumber")
+    return;
+
+  const search = visitor.plateNumber?.trim()?.toUpperCase() || "";
+  if (search.length < 4) {
+    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>[];
+  vehicleSearchMenu.value = vehicleSearchResults.value.length > 0;
+}
+
 function backToSelection() {
   emit("back");
   message.value = "";
@@ -1383,7 +1657,7 @@ async function submit(options: { skipNonCheckedOutCheck?: boolean } = {}) {
   if (formMode.value === "register") {
     payload.status = "registered";
     const currentUserId = currentUser.value?._id;
-    if(currentUserId) {
+    if (currentUserId) {
       payload.updatedBy = currentUserId;
     }
   }
@@ -1704,6 +1978,10 @@ watch(
     skipUnregisteredPlateCheck.value = false;
     unregisteredPlateMatches.value = [];
     dialog.showUnregisteredPlateDialog = false;
+    if (!normalizedPlateNumber || normalizedPlateNumber.length < 4) {
+      vehicleSearchMenu.value = false;
+      vehicleSearchResults.value = [];
+    }
   }
 );
 
@@ -1756,4 +2034,52 @@ onMounted(() => {
 .no-pointer {
   pointer-events: none;
 }
+
+.nric-search-item {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 4px;
+  margin: 4px;
+  min-height: 72px;
+}
+
+.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));
+}
+
+.nric-option-radio {
+  border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  color: #06253b;
+  font-size: 0.95rem;
+  min-height: 46px;
+}
+
+.nric-option-radio :deep(.v-label) {
+  font-size: 0.95rem;
+  opacity: 1;
+}
 </style>