@7365admin1/layer-common 3.2.2-staging.124 → 3.2.2-staging.126

package/components/VisitorForm.vue

@@ -1,20 +1,17 @@
 <template>
-  <v-card width="100%" :loading="processing">
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6 d-flex justify-space-between align-center" align="center">
-        <span class="font-weight-bold text-h5 text-capitalize">
-          {{ formMode }} {{ formatVisitorType(type) }}
-        </span>
-        <ButtonClose @click="emit('close:all')" />
-      </v-row>
-    </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-3">
-      <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 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>
+  <v-card width="100%" class="screen-modal visitor-form" :loading="processing">
+    <div class="visitor-form__head">
+      <v-card-title class="text-capitalize">
+        {{ formMode }} {{ formatVisitorType(type) }}
+      </v-card-title>
+      <AppButton variant="icon" icon="mdi-close" aria-label="Close" @click="emit('close:all')" />
+    </div>
+
+    <div class="screen-modal__body visitor-form__body filter-field">
+      <div class="visitor-form__section-row">
+        <span class="visitor-form__section">{{ formTitle }}</span>
+        <span v-if="withStep2 || withStep3" class="visitor-form__step">Step
+          <span class="visitor-form__step-now">{{ contractorStep }}</span>/{{ withStep3 ? 3 : withStep2 ? 2 : 1 }}</span>
       </div>
       <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''">
         <v-row no-gutters class="pt-4">
@@ -27,7 +24,8 @@
             <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">
+                <v-menu v-model="nricSearchMenu" location="bottom" offset-y :close-on-content-click="false"
+                  content-class="visitor-form__menu">
                   <template #activator="{ props }">
                     <InputNRICNumber v-bind="props" v-model="visitor.nric" density="comfortable"
                       @focus="isNricFieldFocused = true" @blur="isNricFieldFocused = false"
@@ -43,7 +41,8 @@
                       </v-list-item>
                     </div>
                     <div class="search-results-close pa-1">
-                      <v-btn block variant="flat" color="red" @click.stop="closeAutofillSearchResults('nric')">
+                      <v-btn block variant="outlined" class="screen-btn-ghost"
+                        @click.stop="closeAutofillSearchResults('nric')">
                         Close
                       </v-btn>
                     </div>
@@ -57,7 +56,8 @@
             <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">
+                <v-menu v-model="phoneSearchMenu" location="bottom" offset-y :close-on-content-click="false"
+                  content-class="visitor-form__menu">
                   <template #activator="{ props }">
                     <InputPhoneNumberV2 v-bind="props" v-model="visitor.contact" :rules="[requiredRule]"
                       @focus="isPhoneFieldFocused = true" @blur="isPhoneFieldFocused = false" density="comfortable"
@@ -72,7 +72,8 @@
                       </v-list-item>
                     </div>
                     <div class="search-results-close pa-1">
-                      <v-btn block variant="flat" color="red" @click.stop="closeAutofillSearchResults('contact')">
+                      <v-btn block variant="outlined" class="screen-btn-ghost"
+                        @click.stop="closeAutofillSearchResults('contact')">
                         Close
                       </v-btn>
                     </div>
@@ -88,7 +89,8 @@
               <v-col cols="12">
                 <InputLabel class="text-capitalize" title="Vehicle Number" :required="isVehicleRequired" />
                 <!-- <v-text-field v-model.trim.uppercase="visitor.plateNumber" density="comfortable" /> -->
-                <v-menu v-model="vehicleSearchMenu" location="bottom" offset-y :close-on-content-click="false">
+                <v-menu v-model="vehicleSearchMenu" location="bottom" offset-y :close-on-content-click="false"
+                  content-class="visitor-form__menu">
                   <template #activator="{ props }">
                     <InputVehicleNumber v-bind="props" v-model="visitor.plateNumber" density="comfortable"
                       @update:model-value="handleUpdateVehicleNumber" @focus="handleFocusPlateNumber"
@@ -103,7 +105,7 @@
                       </v-list-item>
                     </div>
                     <div class="search-results-close pa-1">
-                      <v-btn block variant="flat" color="red"
+                      <v-btn block variant="outlined" class="screen-btn-ghost"
                         @click.stop="closeAutofillSearchResults('vehicleNumber')">
                         Close
                       </v-btn>
@@ -150,7 +152,15 @@
           <v-col v-if="shouldShowField('deliveryType')" cols="12">
             <v-row>
               <v-col cols="12">
-                <v-radio-group v-model="visitor.deliveryType" inline color="primary" :rules="[requiredRule]">
+                <!-- The handoff never draws the delivery type, so this takes the
+                     form's OWN established pattern rather than inventing one: an
+                     `InputLabel` like every other field, and `accent` - the
+                     colour the converted NRIC picker's radios already use - in
+                     place of `primary`, which is the darker link tone. Without
+                     the label this was the only required field in the form with
+                     nothing naming it: just a bare Food/Parcel pair. -->
+                <InputLabel class="text-capitalize" title="Delivery Type" required />
+                <v-radio-group v-model="visitor.deliveryType" inline color="accent" :rules="[requiredRule]">
                   <v-radio label="Food" value="Food"></v-radio>
                   <v-radio label="Parcel" value="Parcel"></v-radio>
                 </v-radio-group>
@@ -286,34 +296,23 @@
           </v-col>
         </v-row>
       </v-form>
-    </v-card-text>
-
-    <v-row no-gutters class="w-100" v-if="errorMessage">
-      <p class="text-error w-100 text-center text-subtitle-2">
-        {{ errorMessage }}
-      </p>
-    </v-row>
-    <v-toolbar density="compact">
-      <v-row no-gutters>
-        <v-col cols="6">
-          <v-btn v-if="
-            formMode === 'add' &&
-            (withStep2 || withStep3) &&
-            contractorStep > 1
-          " tile block variant="text" class="text-none" size="48" @click="handleGoToPreviousPage" text="Back" />
-          <v-btn v-else-if="formMode === 'add' || formMode === 'register'" tile block variant="text" class="text-none"
-            size="48" @click="backToSelection" text="Back to Selection" />
-          <v-btn v-else tile block variant="text" class="text-none" size="48" @click="emit('close:all')" text="Close" />
-        </v-col>
-        <v-col cols="6">
-          <v-btn v-if="showNextButton" tile block variant="flat" color="primary-button" class="text-none" size="48"
-            :disabled="processing" @click="handleNextPage" :text="'Next'" />
-          <v-btn v-else tile block variant="flat" color="black" class="text-none" size="48"
-            :disabled="!validForm || processing || membersFieldIncomplete" @click="submit"
-            :text="formMode == 'add' ? 'Submit' : 'Update'" />
-        </v-col>
-      </v-row>
-    </v-toolbar>
+    </div>
+
+    <p v-if="errorMessage" class="visitor-form__error">
+      {{ errorMessage }}
+    </p>
+
+    <div class="visitor-form__footer">
+      <AppButton v-if="formMode === 'add' && (withStep2 || withStep3) && contractorStep > 1" variant="ghost"
+        @click="handleGoToPreviousPage">Back</AppButton>
+      <AppButton v-else-if="formMode === 'add' || formMode === 'register'" variant="ghost" @click="backToSelection">
+        Back to Selection</AppButton>
+      <AppButton v-else variant="ghost" @click="emit('close:all')">Close</AppButton>
+
+      <AppButton v-if="showNextButton" :disabled="processing" @click="handleNextPage">Next</AppButton>
+      <AppButton v-else :disabled="!validForm || processing || membersFieldIncomplete" @click="submit">
+        {{ formMode == 'add' ? 'Submit' : 'Update' }}</AppButton>
+    </div>
 
     <v-dialog v-model="dialog.vehicleNumberUsersList" v-if="vehicleNumberUserItems.length > 0" persistent
       max-width="600">
@@ -323,72 +322,73 @@
     </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>
+      <v-card v-if="selectedNricSearchResult" class="screen-modal nric-options-card">
+        <div class="visitor-form__head">
+          <v-card-title>Select</v-card-title>
+          <AppButton variant="icon" icon="mdi-close" aria-label="Close" @click="closeNricAutofillOptions" />
+        </div>
 
+        <div class="screen-modal__body nric-options-body">
           <div class="nric-selected-person d-flex align-center justify-space-between ga-3 mb-5">
             <span>{{ selectedNricSearchResult.name || "Unknown" }}</span>
             <span v-if="!visitor.nric || currentAutofillSource === 'nric'" class="text-no-wrap">NRIC: {{ selectedNricSearchResult.nric || "N/A" }}</span>
           </div>
 
           <template v-if="(!visitor.contact || currentAutofillSource === 'contact') && 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">
+            <h3 class="nric-options-section-title mb-2">Contact</h3>
+            <v-radio-group v-model="selectedNricContact" hide-details color="accent" 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="(!visitor.plateNumber || currentAutofillSource === 'vehicleNumber') && 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">
+            <h3 class="nric-options-section-title mb-2 mt-5">Vehicle</h3>
+            <v-radio-group v-model="selectedNricPlate" hide-details color="accent" 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>
+        </div>
 
-        <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>
+        <div class="visitor-form__footer">
+          <AppButton variant="ghost" @click="closeNricAutofillOptions">Cancel</AppButton>
+          <AppButton @click="confirmNricAutofillOptions">Select</AppButton>
+        </div>
       </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">
-          <v-btn icon="mdi-close" variant="text" size="large" @click="dialog.showNonCheckedOutDialog = false" />
-        </v-card-actions>
-
-        <v-card-text class="pa-6">
-          <p class="text-subtitle-1 font-weight-medium mb-8">
+      <v-card class="screen-modal"
+        :loading="loading.checkingOut || loading.searchingNonCheckedOut">
+        <!-- No heading: the product gives this dialog none, and inventing copy
+             is not this batch's call. The design's modal frame does draw a
+             title, so that gap is raised on the PR as a copy decision. -->
+        <div class="visitor-form__head visitor-form__head--bare">
+          <AppButton variant="icon" icon="mdi-close" aria-label="Close"
+            @click="dialog.showNonCheckedOutDialog = false" />
+        </div>
+
+        <div class="screen-modal__body checkout-dialog__body">
+          <p class="checkout-dialog__lead">
             The following list needs to check-out before proceeding to add related to the NRIC/Phone Number below:
           </p>
 
-          <div class="text-subtitle-1 mb-8">
+          <div class="checkout-dialog__subject">
             <div v-if="!skipNonCheckedOutNric">NRIC: {{ visitor.nric || "N/A" }}</div>
             <div>Phone Number: {{ visitor.contact || "N/A" }}</div>
           </div>
 
-          <v-data-table class="border rounded" :headers="nonCheckedOutVisitorHeaders"
+          <v-data-table class="table-card" :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">
-                  <span class="text-white text-subtitle-2">{{ getVisitorInitial(item.name) }}</span>
+                <v-avatar class="checkout-dialog__avatar" size="32">
+                  <span>{{ getVisitorInitial(item.name) }}</span>
                 </v-avatar>
                 <div>
-                  <div class="font-weight-medium">{{ item.name || "N/A" }}</div>
-                  <div class="text-caption">
+                  <div class="checkout-dialog__name">{{ item.name || "N/A" }}</div>
+                  <div class="checkout-dialog__meta">
                     <v-icon icon="mdi-card-account-details-outline" size="16" class="mr-1" />
                     {{ maskNRIC(item.nric) || "N/A" }}
                   </div>
@@ -425,11 +425,11 @@
 
             <template #item.checkInOut="{ item }">
               <div class="py-2">
-                <div class="mb-2">
-                  <v-icon icon="mdi-clock-check-outline" color="green" size="20" class="mr-1" />
+                <div class="checkout-dialog__in mb-2">
+                  <v-icon icon="mdi-clock-check-outline" size="20" class="mr-1" />
                   {{ formatNonCheckedOutDate(item.checkIn) }}
                 </div>
-                <v-btn size="small" class="text-none" color="red" variant="flat"
+                <v-btn class="screen-btn-primary" variant="flat"
                   :loading="loading.checkingOut && selectedCheckoutVisitorId === item._id" :disabled="!item._id"
                   @click.stop="item._id && handleCheckout(item._id)">
                   Check Out
@@ -437,35 +437,36 @@
               </div>
             </template>
           </v-data-table>
+        </div>
 
-          <div class="d-flex justify-end mt-8">
-            <v-btn v-if="!skipNonCheckedOutNric" 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>
-        </v-card-text>
+        <div class="visitor-form__footer" v-if="!skipNonCheckedOutNric">
+          <v-btn class="screen-btn-primary" variant="flat" :loading="loading.searchingNonCheckedOut"
+            @click="handleSkipNricNonCheckedOut">
+            Skip NRIC: {{ visitor.nric || "N/A" }}
+          </v-btn>
+        </div>
       </v-card>
     </v-dialog>
 
     <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-card-actions>
+      <v-card class="screen-modal">
+        <!-- No heading in the product; see the note on the check-out dialog. -->
+        <div class="visitor-form__head visitor-form__head--bare">
+          <AppButton variant="icon" icon="mdi-close" aria-label="Close" @click="closeUnregisteredPlateDialog" />
+        </div>
 
-        <v-card-text class="text-center pt-2">
-          <v-icon color="orange" size="96">mdi-alert-circle-outline</v-icon>
+        <div class="screen-modal__body unreg-dialog__body">
+          <v-icon class="unreg-dialog__alert" size="96">mdi-alert-circle-outline</v-icon>
 
-          <div :class="`text-body-${$vuetify.display.xs ? 'mobile' : 'tablet'} mt-8`">
+          <p class="unreg-dialog__lead">
             Vehicle Number {{ unregisteredPlateSearchText }} is similar to below
             <br />
             Unregistered visitors last 24 hours. Please select to
             <br />
             Update
-          </div>
+          </p>
 
-          <v-table class="mt-8 border rounded">
+          <v-table class="table-card unreg-dialog__table">
             <thead>
               <tr>
                 <th class="text-left">Plate Number</th>
@@ -475,45 +476,38 @@
             </thead>
             <tbody>
               <tr v-for="match in unregisteredPlateMatches" :key="match._id || match.plateNumber">
-                <td class="text-left font-weight-bold text-uppercase">
+                <td class="text-left text-uppercase unreg-dialog__plate">
                   {{ match.plateNumber || "N/A" }}
                 </td>
                 <td class="text-left">
                   {{ formatUnregisteredCheckIn(match.checkIn) }}
                 </td>
                 <td class="text-center">
-                  <v-btn color="red" class="text-capitalize" density="compact" size="large"
-                    @click="selectUnregisteredPlateMatch(match)">
-                    Update
-                  </v-btn>
+                  <AppButton @click="selectUnregisteredPlateMatch(match)">Update</AppButton>
                 </td>
               </tr>
             </tbody>
           </v-table>
-        </v-card-text>
+        </div>
 
-        <v-card-actions>
-          <v-btn block color="red" variant="flat" size="x-large" @click="closeUnregisteredPlateDialog">
-            Cancel & Add New
-          </v-btn>
-        </v-card-actions>
+        <div class="visitor-form__footer">
+          <AppButton variant="ghost" @click="closeUnregisteredPlateDialog">Cancel &amp; Add New</AppButton>
+        </div>
       </v-card>
     </v-dialog>
 
     <v-dialog v-model="hidQrPreviewDialog" max-width="440" persistent>
-      <v-card class="hid-qr-preview-card">
-        <v-toolbar color="transparent" density="comfortable" class="px-2">
-          <v-toolbar-title class="text-subtitle-1 font-weight-bold">
-            Visitor QR Code
-          </v-toolbar-title>
-          <v-btn icon="mdi-close" variant="text" title="Close" @click="closeHidQrPreview" />
-        </v-toolbar>
-
-        <v-card-text class="px-8 pb-6 text-center">
-          <div class="text-h6 font-weight-bold">
+      <v-card class="screen-modal hid-qr-preview-card">
+        <div class="visitor-form__head">
+          <v-card-title>Visitor QR Code</v-card-title>
+          <AppButton variant="icon" icon="mdi-close" aria-label="Close" @click="closeHidQrPreview" />
+        </div>
+
+        <div class="screen-modal__body hid-qr__body">
+          <div class="hid-qr__header">
             {{ hidQrTemplate.header || "Visitor Access Pass" }}
           </div>
-          <div class="text-body-2 text-medium-emphasis mt-1">
+          <div class="hid-qr__subtext">
             {{ hidQrTemplate.subtext || "Scan at the HID reader for entry" }}
           </div>
 
@@ -525,38 +519,32 @@
             </button>
           </div>
 
-          <v-btn
-            variant="text"
-            density="comfortable"
-            class="text-none"
-            :prepend-icon="hidQrVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+          <AppButton
+            variant="ghost"
+            :icon="hidQrVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
             @click="hidQrVisible = !hidQrVisible"
           >
             {{ hidQrVisible ? "Hide QR code" : "Show QR code" }}
-          </v-btn>
+          </AppButton>
 
-          <div class="text-h6 font-weight-bold">{{ visitor.name }}</div>
-          <div v-if="hidQrReader?.portalName" class="text-caption text-medium-emphasis mt-1">
+          <div class="hid-qr__name">{{ visitor.name }}</div>
+          <div v-if="hidQrReader?.portalName" class="hid-qr__meta">
             {{ hidQrReader.name || "HID Reader" }} · {{ hidQrReader.portalName }}
           </div>
-          <div v-if="hidQrPreview.expiresAt" class="text-caption text-medium-emphasis mt-1">
+          <div v-if="hidQrPreview.expiresAt" class="hid-qr__meta">
             Valid until {{ formatHidQrExpiry(hidQrPreview.expiresAt) }}
           </div>
-          <v-chip
+          <StatusChip
             v-if="hidQrPreview.expiresAt"
             class="mt-2"
-            size="small"
-            :color="hidQrExpired ? 'error' : 'success'"
-            variant="tonal"
-          >
-            {{ hidQrExpired ? "Expired" : `Expires in ${formatHidQrCountdown(hidQrRemainingSeconds)}` }}
-          </v-chip>
+            :tone="hidQrExpired ? 'err' : 'ok'"
+            :label="hidQrExpired ? 'Expired' : `Expires in ${formatHidQrCountdown(hidQrRemainingSeconds)}`"
+          />
 
           <v-btn
             v-if="hidQrExpired"
             block
-            class="mt-4 text-none"
-            color="primary-button"
+            class="mt-4 screen-btn-primary"
             variant="flat"
             prepend-icon="mdi-refresh"
             :loading="hidQrRegenerating"
@@ -568,42 +556,22 @@
           <v-alert v-if="hidQrPreviewError" type="error" variant="tonal" density="compact" class="mt-4 text-left">
             {{ hidQrPreviewError }}
           </v-alert>
-        </v-card-text>
+        </div>
 
-        <v-divider />
-        <v-card-actions class="pa-0">
-          <v-btn
-            variant="text"
-            height="52"
-            class="flex-grow-1 text-none"
-            prepend-icon="mdi-download"
-            @click="downloadHidQrCode"
-          >
+        <div class="visitor-form__footer">
+          <AppButton variant="ghost" icon="mdi-download" @click="downloadHidQrCode">
             Download
-          </v-btn>
-          <v-btn
+          </AppButton>
+          <AppButton
             v-if="hasHidQrPrinterConfig"
-            variant="flat"
-            color="primary-button"
-            height="52"
-            class="flex-grow-1 text-none"
-            prepend-icon="mdi-printer"
-            :loading="hidQrPrinting"
+            icon="mdi-printer"
+            :disabled="hidQrPrinting"
             @click="printHidQrCodePass"
           >
             Print
-          </v-btn>
-          <v-btn
-            v-else
-            variant="flat"
-            color="primary-button"
-            height="52"
-            class="flex-grow-1 text-none"
-            @click="closeHidQrPreview"
-          >
-            Close
-          </v-btn>
-        </v-card-actions>
+          </AppButton>
+          <AppButton v-else @click="closeHidQrPreview">Close</AppButton>
+        </div>
       </v-card>
     </v-dialog>
   </v-card>
@@ -891,28 +859,6 @@ type HidQrReaderSummary = {
 };
 const hidQrReader = ref<HidQrReaderSummary | null>(null);
 
-watch(
-  [hidQrReaderId, () => prop.site],
-  async ([readerId, site]) => {
-    hidQrReader.value = null;
-    if (!readerId || !site) return;
-    try {
-      const response = await getReaders({ site, page: 1, limit: 100 });
-      const readers: unknown = response?.items ?? response?.data?.items ?? response?.data?.readers ?? [];
-      hidQrReader.value = Array.isArray(readers)
-        ? readers.find((reader: unknown): reader is HidQrReaderSummary => (
-            typeof reader === "object"
-            && reader !== null
-            && String((reader as Record<string, unknown>)._id || "") === readerId
-          )) || null
-        : null;
-    } catch {
-      hidQrReader.value = null;
-    }
-  },
-  { immediate: true },
-);
-
 const hidQrCodePassAllowed = computed(() => {
   return (
     hidQrCodePassEnabled.value &&
@@ -1472,6 +1418,33 @@ const {
   getSiteById(prop.site)
 );
 
+// Has to sit BELOW `siteData`, not beside `hidQrReaderId` up at the HID block.
+// `hidQrReaderId` reads `hidQrCodePassConfig`, which reads `siteData`, and Vue
+// runs a watcher's source getter the moment `watch()` is called - so declared
+// any earlier this throws `Cannot access 'siteData' before initialization` and
+// the whole form fails to mount.
+watch(
+  [hidQrReaderId, () => prop.site],
+  async ([readerId, site]) => {
+    hidQrReader.value = null;
+    if (!readerId || !site) return;
+    try {
+      const response = await getReaders({ site, page: 1, limit: 100 });
+      const readers: unknown = response?.items ?? response?.data?.items ?? response?.data?.readers ?? [];
+      hidQrReader.value = Array.isArray(readers)
+        ? readers.find((reader: unknown): reader is HidQrReaderSummary => (
+            typeof reader === "object"
+            && reader !== null
+            && String((reader as Record<string, unknown>)._id || "") === readerId
+          )) || null
+        : null;
+    } catch {
+      hidQrReader.value = null;
+    }
+  },
+  { immediate: true },
+);
+
 const {
   data: blocksListData,
   refresh: refreshBlockListData,
@@ -2379,11 +2352,81 @@ onMounted(() => {
   pointer-events: none;
 }
 
+.visitor-form__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+/* The card must not scroll as a whole - that takes the Back/Submit footer off
+   screen with it. The BODY scrolls; `.screen-modal` caps the card's height. */
+.visitor-form__body {
+  padding: 4px 20px 0;
+  max-height: calc(100vh - 160px);
+}
+
+.visitor-form__section-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.visitor-form__section {
+  font-size: var(--fs-cell);
+  font-weight: 800;
+  color: var(--text);
+}
+
+/* The handoff draws no step counter, so this takes the established type: the
+   cell size, the accent for the step you are on, `--text2` for the rest. */
+.visitor-form__step {
+  font-size: var(--fs-cell);
+  font-weight: 700;
+  color: var(--text2);
+  white-space: nowrap;
+}
+
+/* `--accent-text`, not `--accent-strong`: the strong one is a FILL for a white
+   label. Used as ink on `--card` it reads 3.64:1 in dark. `--accent-text` is
+   the accent's text form and `utils/theme.test.ts` asserts it >= 4.5:1 there. */
+.visitor-form__step-now {
+  color: var(--accent-text);
+}
+
+.visitor-form__error {
+  margin: 0;
+  padding: 0 20px;
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--err);
+  text-align: center;
+}
+
+/* The design's dialog footer: ghost secondary, then one primary, right-aligned.
+   Deliberately NOT the shared `.screen-modal__footer` - that class is on the
+   batch-D branch (#1150) and not on this base, and adding a second copy of it
+   to `screens.css` here would collide with that PR. */
+.visitor-form__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+
+/* `!important` only because Vuetify's own is: a `v-list-item` with no `rounded`
+   prop emits `rounded-0`, and that utility is `border-radius: 0 !important`.
+   The original `border-radius: 4px` here lost the same fight and never drew -
+   measured 0px on the glass before this change. Same pattern `.screen-modal`
+   already uses for `--r-modal`. */
 .nric-search-item {
-  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 4px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner) !important;
   margin: 4px;
   min-height: 72px;
+  font-size: var(--fs-cell);
 }
 
 .phone-search-results {
@@ -2391,6 +2434,9 @@ onMounted(() => {
   flex-direction: column;
   max-height: 400px;
   overflow: hidden;
+  background: var(--card);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-menu);
 }
 
 .search-results-scroll {
@@ -2403,55 +2449,164 @@ onMounted(() => {
   flex: 0 0 auto;
 }
 
-.nric-options-card {
-  border-radius: 16px !important;
+.nric-options-body {
+  padding: 0 20px;
+}
+
+.visitor-form__head--bare {
+  justify-content: flex-end;
+  padding-top: 12px;
+}
+
+.checkout-dialog__body {
+  padding: 0 20px;
+}
+
+.checkout-dialog__lead {
+  margin-bottom: 20px;
+  font-size: var(--fs-cell);
+  font-weight: 700;
+  color: var(--text);
 }
 
-.nric-options-title {
-  color: #06253b;
-  font-size: 1.45rem;
-  line-height: 1.2;
+.checkout-dialog__subject {
+  margin-bottom: 20px;
+  font-size: var(--fs-cell);
+  color: var(--text2);
 }
 
+/* The initial badge was a flat `red` avatar with a white letter - 3.99:1 in
+   both themes, and red is the design's ERROR tone, which a person's initial is
+   not. It takes the accent tag: `--accent-soft` fill, `--accent-text` ink. */
+.checkout-dialog__avatar {
+  background: var(--accent-soft);
+  color: var(--accent-text);
+  font-size: var(--fs-chip);
+  font-weight: var(--fw-chip);
+}
+
+.checkout-dialog__name {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+  color: var(--text);
+}
+
+.checkout-dialog__meta {
+  font-size: var(--fs-breadcrumb);
+  color: var(--text2);
+}
+
+/* Checked-in IS a success state, so this one keeps its green - as the token,
+   not Vuetify's `green`, which does not follow the theme. */
+.checkout-dialog__in {
+  font-size: var(--fs-cell);
+  color: var(--text);
+}
+
+.checkout-dialog__in :deep(.v-icon) {
+  color: var(--ok);
+}
+
+.unreg-dialog__body {
+  padding: 0 20px;
+  text-align: center;
+}
+
+/* A warning IS the design's warning tone; Vuetify's `orange` is not it and
+   does not follow the theme. */
+.unreg-dialog__alert {
+  color: var(--warn);
+}
+
+.unreg-dialog__lead {
+  margin-top: 20px;
+  font-size: var(--fs-cell);
+  color: var(--text);
+}
+
+.unreg-dialog__table {
+  margin-top: 20px;
+}
+
+.unreg-dialog__plate {
+  font-weight: 800;
+}
+
+/* `#06253b` was a literal navy on every line of this dialog - unreadable on a
+   dark card. All of it is `--text` / `--text2` now. */
 .nric-options-section-title {
-  color: #06253b;
-  font-size: 1.05rem;
+  font-size: var(--fs-cell);
+  font-weight: 800;
   line-height: 1.25;
+  color: var(--text);
 }
 
 .nric-selected-person {
-  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  border-radius: 12px;
-  color: #06253b;
-  font-size: 0.95rem;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner-lg);
+  color: var(--text);
+  font-size: var(--fs-cell);
   min-height: 52px;
   padding: 10px 14px;
 }
 
 .nric-option-group {
-  border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-top: 1px solid var(--border);
 }
 
 .nric-option-radio {
-  border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  color: #06253b;
-  font-size: 0.95rem;
+  border-bottom: 1px solid var(--border);
+  color: var(--text);
+  font-size: var(--fs-cell);
   min-height: 46px;
 }
 
 .nric-option-radio :deep(.v-label) {
-  font-size: 0.95rem;
+  font-size: var(--fs-cell);
+  color: var(--text);
   opacity: 1;
 }
 
-.hid-qr-preview-card {
-  border-radius: 6px;
+.hid-qr__body {
+  padding: 0 20px;
+  text-align: center;
+}
+
+.hid-qr__header {
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
+}
+
+.hid-qr__subtext {
+  margin-top: 4px;
+  font-size: var(--fs-cell);
+  color: var(--text2);
 }
 
+.hid-qr__name {
+  margin-top: 12px;
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
+}
+
+.hid-qr__meta {
+  margin-top: 4px;
+  font-size: var(--fs-breadcrumb);
+  color: var(--text2);
+}
+
+/* The QR itself STAYS on a white plate with dark ink, in both themes, on
+   purpose: a phone camera and an HID reader need the light-on-dark contrast the
+   code is printed with, and inverting it in dark mode would stop it scanning.
+   The frame around it follows the theme; the plate does not. */
 .hid-qr-image-shell {
   display: inline-flex;
+  margin: 20px 0;
   padding: 12px;
-  border: 1px solid #dce3e8;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
   background: #ffffff;
 }
 
@@ -2462,11 +2617,40 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   border: 0;
-  background: #f5f7f9;
-  color: #344054;
+  border-radius: var(--r-inner-sm);
+  /* The white plate above is a deliberate exception FOR THE PRINTED CODE. This
+     is the tap-to-reveal button that sits in its place beforehand, so it is
+     ordinary chrome and follows the theme: a literal `#f5f7f9`/`#344054` drew a
+     light slab with dark ink inside the dark modal. `--bg` reads as a recess
+     against the modal's `--card` in both themes. Measured `--text2` on `--bg`:
+     8.88:1 light, 11.21:1 dark. */
+  background: var(--bg);
+  color: var(--text2);
   cursor: pointer;
   flex-direction: column;
   gap: 10px;
   font: inherit;
+  font-size: var(--fs-cell);
+}
+</style>
+
+<!--
+  UNSCOPED on purpose, and only for the menu surface.
+
+  A `v-menu`'s panel is TELEPORTED to the overlay container, so it never
+  carries this component's scope attribute - a scoped rule cannot reach it.
+  And Vuetify owns the radius from outside at a specificity a scoped class
+  cannot beat: `.v-menu > .v-overlay__content > .v-list { border-radius:
+  inherit }` is 0,3,0 against a scoped class's 0,2,0, so the list inherits the
+  overlay's 4px however the list itself is styled. Measured: 4px on the glass
+  with the scoped rule in place.
+
+  So the radius is set where Vuetify sets it - on the overlay content, reached
+  by the menu's own `content-class`. The class name is component-prefixed, so
+  nothing else in the layer can pick it up. No `!important`.
+-->
+<style>
+.v-menu > .v-overlay__content.visitor-form__menu {
+  border-radius: var(--r-menu);
 }
 </style>