@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

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>
@@ -260,6 +270,8 @@
               :loading="entryPassSettingsPending || siteDataPending" :site-id="prop.site"
               :unit-id="visitor.unit || null" :visitor-type="prop.type" :hid-qr-code-enabled="hidQrCodePassAllowed"
               :hid-qr-printer-configured="hasHidQrPrinterConfig"
+              :hid-reader-name="hidQrReader?.name || ''"
+              :hid-portal-name="hidQrReader?.portalName || ''"
               @update:available-qr-count="(val) => availableQrCount = val" />
           </v-col>
 
@@ -269,6 +281,7 @@
               :settings="entryPassSettings" :settings-loading="entryPassSettingsPending || siteDataPending"
               :unit-id="visitor.unit || null" :hid-qr-code-enabled="hidQrCodePassAllowed"
               :hid-qr-printer-configured="hasHidQrPrinterConfig"
+              :hid-reader-name="hidQrReader?.name || ''" :hid-portal-name="hidQrReader?.portalName || ''"
               :selected-nfc-cards="passType === 'NFC' ? passCards : []" />
           </v-col>
 
@@ -283,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">
@@ -320,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>
@@ -422,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
@@ -434,35 +437,83 @@
               </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 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-model="dialog.returnNfcCard" max-width="450" persistent>
+      <v-card>
+        <v-toolbar density="compact" color="">
+          <v-row no-gutters class="d-flex fill-height justify-space-between align-center px-4">
+            <span class="font-weight-bold">Return NFC Card</span>
+            <v-btn icon="mdi-close" variant="text" @click="dialog.returnNfcCard = false" />
+          </v-row>
+        </v-toolbar>
+        <v-card-text class="px-4 pb-2">
+          <p class="text-body-2 mb-3">
+            Please indicate the status of the NFC card before checking out.
+          </p>
+          <div>
+            <InputLabel class="text-capitalize" title="Full Name" />
+            <v-text-field :model-value="selectedCheckoutVisitor?.name" density="comfortable" readonly />
+          </div>
+          <div>
+            <InputLabel class="text-capitalize" title="Location" />
+            <v-text-field :model-value="formatVisitorLocation(selectedCheckoutVisitor)" density="comfortable"
+              readonly />
+          </div>
+          <div v-for="(card, idx) in nfcCardReturnStatuses" :key="card.cardId" class="mb-4">
+            <div class="d-flex align-center ga-2 mb-2">
+              <v-icon size="18" icon="mdi-credit-card-outline" color="purple" />
+              <v-chip size="small" variant="tonal" color="purple">{{ card.cardNo }}</v-chip>
+            </div>
+            <v-select v-model="nfcCardReturnStatuses[idx].status" :items="nfcPassStatusOptions" item-title="label"
+              item-value="value" density="comfortable" hide-details />
+            <v-textarea v-if="card.status === 'Lost' || card.status === 'Damage'"
+              v-model="nfcCardReturnStatuses[idx].remarks" label="Remarks (required)" no-resize rows="3" class="mt-2"
+              density="compact" />
           </div>
         </v-card-text>
+        <v-toolbar class="pa-0" density="compact">
+          <v-row no-gutters>
+            <v-col cols="6">
+              <v-btn variant="text" block @click="dialog.returnNfcCard = false">Close</v-btn>
+            </v-col>
+            <v-col cols="6">
+              <v-btn color="red" variant="flat" height="48" rounded="0" block :loading="loading.checkingOut"
+                :disabled="!canConfirmNfcReturnCheckout" @click="handleNfcReturnCheckout">Confirm Checkout</v-btn>
+            </v-col>
+          </v-row>
+        </v-toolbar>
       </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>
@@ -472,34 +523,109 @@
             </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
+        <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="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="hid-qr__subtext">
+            {{ hidQrTemplate.subtext || "Scan at the HID reader for entry" }}
+          </div>
+
+          <div class="hid-qr-image-shell my-5">
+            <v-img v-if="hidQrVisible" :src="hidQrPreview.imageUrl" width="280" height="280" alt="Visitor access QR code" />
+            <button v-else type="button" class="hid-qr-reveal" aria-label="Show QR code" @click="hidQrVisible = true">
+              <v-icon icon="mdi-eye-outline" size="42" />
+              <span>Click to show QR code</span>
+            </button>
+          </div>
+
+          <AppButton
+            variant="ghost"
+            :icon="hidQrVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+            @click="hidQrVisible = !hidQrVisible"
+          >
+            {{ hidQrVisible ? "Hide QR code" : "Show QR code" }}
+          </AppButton>
+
+          <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="hid-qr__meta">
+            Valid until {{ formatHidQrExpiry(hidQrPreview.expiresAt) }}
+          </div>
+          <StatusChip
+            v-if="hidQrPreview.expiresAt"
+            class="mt-2"
+            :tone="hidQrExpired ? 'err' : 'ok'"
+            :label="hidQrExpired ? 'Expired' : `Expires in ${formatHidQrCountdown(hidQrRemainingSeconds)}`"
+          />
+
+          <v-btn
+            v-if="hidQrExpired"
+            block
+            class="mt-4 screen-btn-primary"
+            variant="flat"
+            prepend-icon="mdi-refresh"
+            :loading="hidQrRegenerating"
+            @click="regenerateHidQrCode"
+          >
+            Generate QR again
           </v-btn>
-        </v-card-actions>
+
+          <v-alert v-if="hidQrPreviewError" type="error" variant="tonal" density="compact" class="mt-4 text-left">
+            {{ hidQrPreviewError }}
+          </v-alert>
+        </div>
+
+        <div class="visitor-form__footer">
+          <AppButton variant="ghost" icon="mdi-download" @click="downloadHidQrCode">
+            Download
+          </AppButton>
+          <AppButton
+            v-if="hasHidQrPrinterConfig"
+            icon="mdi-printer"
+            :disabled="hidQrPrinting"
+            @click="printHidQrCodePass"
+          >
+            Print
+          </AppButton>
+          <AppButton v-else @click="closeHidQrPreview">Close</AppButton>
+        </div>
       </v-card>
     </v-dialog>
   </v-card>
 </template>
 
 <script setup lang="ts">
+import QRCode from "qrcode";
 import { propsFactory } from "vuetify/lib/util/propsFactory.mjs";
 import useBuildingUnit from "../composables/useBuildingUnit";
 import useWebUsb from "../composables/useWebUsb";
@@ -511,6 +637,7 @@ import useVisitor from "../composables/useVisitor";
 import useSiteEntryPassSettings from "../composables/useSiteEntryPassSettings";
 import useAccessManagement from "../composables/useAccessManagement";
 import usePeople from "../composables/usePeople";
+import useHidAmico from "../composables/useHidAmico";
 
 const prop = defineProps({
   type: {
@@ -561,7 +688,8 @@ const {
 } = useVisitor();
 const { getBySiteId: getEntryPassSettingsBySiteId } =
   useSiteEntryPassSettings();
-const { createVisitorPass, signQr } = useAccessManagement();
+const { createVisitorPass, signQr, visitorCheckout } = useAccessManagement();
+const { getReaders, issueVisitorQr } = useHidAmico();
 const { testConnection } = useWebUsb();
 const {
   findPersonByNRIC,
@@ -610,6 +738,38 @@ const hidQrPrinted = ref(false);
 const isPhoneFieldFocused = ref(false);
 const isPlateNumberFieldFocused = ref(false);
 const isNricFieldFocused = ref(false);
+const hidQrPrinting = ref(false);
+const hidQrPreviewDialog = ref(false);
+const hidQrPreviewError = ref("");
+const hidQrVisible = ref(false);
+const hidQrRegenerating = ref(false);
+const hidQrVisitorId = ref("");
+const hidQrNow = ref(Date.now());
+let hidQrTimer: ReturnType<typeof setInterval> | null = null;
+const hidQrPendingCompletion = ref<"done" | "done:more" | null>(null);
+const hidQrPreview = reactive({
+  imageUrl: "",
+  issuedAt: "",
+  expiresAt: "",
+});
+
+const hidQrRemainingSeconds = computed(() => {
+  const expiry = new Date(hidQrPreview.expiresAt).getTime();
+  return Number.isFinite(expiry) ? Math.max(0, Math.ceil((expiry - hidQrNow.value) / 1000)) : 0;
+});
+const hidQrExpired = computed(() => Boolean(hidQrPreview.expiresAt) && hidQrRemainingSeconds.value === 0);
+
+watch(hidQrPreviewDialog, (open) => {
+  if (hidQrTimer) clearInterval(hidQrTimer);
+  hidQrTimer = null;
+  if (!open) return;
+  hidQrNow.value = Date.now();
+  hidQrTimer = setInterval(() => { hidQrNow.value = Date.now(); }, 1000);
+});
+
+onBeforeUnmount(() => {
+  if (hidQrTimer) clearInterval(hidQrTimer);
+});
 
 const registeredUnitCompanyName = ref("N/A");
 
@@ -618,6 +778,7 @@ const dialog = reactive({
   vehicleNumberUsersList: false,
   showNonCheckedOutDialog: false,
   showUnregisteredPlateDialog: false,
+  returnNfcCard: false,
 });
 
 const loading = reactive({
@@ -651,6 +812,30 @@ const deliveryCompanyList = ref<string[]>([]);
 const matchingNonCheckedOutVisitors = ref<TVisitor[]>([]);
 const selectedCheckoutVisitorId = ref<string | null>(null);
 const skipNonCheckedOutNric = ref(false);
+
+const nfcCardReturnStatuses = ref<
+  { cardId: string; cardNo: string; status: string; remarks: string }[]
+>([]);
+const nfcPassStatusOptions = [
+  { label: "Returned", value: "Returned" },
+  { label: "Not Returned", value: "In Use" },
+  { label: "Damaged", value: "Damage" },
+  { label: "Lost", value: "Lost" },
+];
+const selectedCheckoutVisitor = computed(() =>
+  (matchingNonCheckedOutVisitors.value as any[]).find(
+    (v) => v?._id === selectedCheckoutVisitorId.value
+  )
+);
+const canConfirmNfcReturnCheckout = computed(() => {
+  if (nfcCardReturnStatuses.value.length === 0) return false;
+  return nfcCardReturnStatuses.value.every(({ status, remarks }) => {
+    if (!status || status === "In Use") return false;
+    if ((status === "Lost" || status === "Damage") && !remarks.trim())
+      return false;
+    return true;
+  });
+});
 const nonCheckedOutVisitorHeaders = [
   { title: "Name/NRIC", key: "name", align: "start", sortable: false },
   { title: "Type / Company", key: "typeCompany", align: "start", sortable: false },
@@ -710,7 +895,8 @@ const requireNRIC = computed(() => {
 });
 
 const hidQrCodePassConfig = computed(() => {
-  return (siteData.value as any)?.metadata?.hidQrCodePass || {};
+  const site = siteData.value as TSite | null;
+  return site?.metadata?.hidQrCodePass;
 });
 
 const hidQrCodePassEnabled = computed(() => {
@@ -736,6 +922,15 @@ const hidQrValidityMinutes = computed(() => {
   return Number.isFinite(value) && value > 0 ? value : 60;
 });
 
+const hidQrReaderId = computed(() => String(hidQrCodePassConfig.value?.readerId || ""));
+type HidQrReaderSummary = {
+  _id: string;
+  name?: string;
+  portalId?: number;
+  portalName?: string;
+};
+const hidQrReader = ref<HidQrReaderSummary | null>(null);
+
 const hidQrCodePassAllowed = computed(() => {
   return (
     hidQrCodePassEnabled.value &&
@@ -1223,19 +1418,43 @@ async function handleSkipNricNonCheckedOut() {
   dialog.showNonCheckedOutDialog = false;
 }
 
-async function handleCheckout(visitorId: string) {
+function handleCheckout(visitorId: string) {
   if (!visitorId) {
     errorMessage.value = "Invalid visitor ID. Cannot proceed with checkout.";
     return;
   }
 
+  selectedCheckoutVisitorId.value = visitorId;
+
+  const visitor = (matchingNonCheckedOutVisitors.value as any[]).find(
+    (v) => v?._id === visitorId
+  );
+  const nfcCards = ((visitor?.cards as any[]) || []).filter(
+    (card) => card?.type === "NFC"
+  );
+
+  if (nfcCards.length > 0) {
+    nfcCardReturnStatuses.value = nfcCards.map((card: any) => ({
+      cardId: card._id,
+      cardNo: card.cardNo,
+      status: "In Use",
+      remarks: "",
+    }));
+    dialog.returnNfcCard = true;
+    return;
+  }
+
+  proceedNonCheckedOutCheckout(visitorId);
+}
+
+async function proceedNonCheckedOutCheckout(visitorId: string) {
   try {
     loading.checkingOut = true;
-    selectedCheckoutVisitorId.value = visitorId;
     const res = await updateVisitor(visitorId as string, {
       checkOut: new Date().toISOString(),
     });
     if (res) {
+      dialog.returnNfcCard = false;
       await checkNonCheckedOutVisitorsBeforeSubmit();
     }
   } catch (error: any) {
@@ -1249,6 +1468,33 @@ async function handleCheckout(visitorId: string) {
   }
 }
 
+async function handleNfcReturnCheckout() {
+  const visitorId = selectedCheckoutVisitorId.value;
+  if (!visitorId) return;
+
+  try {
+    loading.checkingOut = true;
+    const res = await visitorCheckout({
+      cards: nfcCardReturnStatuses.value.map(({ cardId, status, remarks }) => ({
+        cardId,
+        userId: visitorId,
+        status,
+        remarks: remarks ?? "",
+      })),
+    });
+    if (res) {
+      await proceedNonCheckedOutCheckout(visitorId);
+    }
+  } catch (error: any) {
+    const checkoutErrorMessage = error?.response?._data?.message;
+    console.log("[ERROR]", error);
+    errorMessage.value =
+      checkoutErrorMessage || "An error occurred while returning the NFC card.";
+  } finally {
+    loading.checkingOut = false;
+  }
+}
+
 const debounceFetchCompany = debounce(
   async () => fetchCompanyListRefresh(),
   200
@@ -1295,6 +1541,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,
@@ -1710,7 +1983,7 @@ async function submit(options: { skipNonCheckedOutCheck?: boolean } = {}) {
     return;
   }
 
-  if (passType.value === "HID_QR" && !validateHidQrPrinterConfig()) return;
+  if (passType.value === "HID_QR" && !validateHidQrReaderConfig()) return;
   if (
     prop.mode === "add" &&
     !options.skipNonCheckedOutCheck &&
@@ -1800,11 +2073,10 @@ async function submit(options: { skipNonCheckedOutCheck?: boolean } = {}) {
 
     if (res) {
       if (passType.value === "HID_QR") {
-        const printed = await printHidQrCodePass(
-          getVisitorIdFromResponse(res),
-          false
-        );
-        if (!printed) return;
+        const previewReady = await prepareHidQrCodePreview(getVisitorIdFromResponse(res));
+        if (!previewReady) return;
+        hidQrPendingCompletion.value = createMore.value ? "done:more" : "done";
+        return;
       }
 
       if (
@@ -1837,12 +2109,9 @@ async function submit(options: { skipNonCheckedOutCheck?: boolean } = {}) {
           });
 
           if (passType.value === "QR") {
-            console.log("[QR Print] passRes:", passRes);
             const accessCards: any[] =
               (passRes as any)?.data?.accessCards ?? [];
-            console.log("[QR Print] accessCards:", accessCards);
             const printer = entryPassSettings.value?.data?.settings?.printer;
-            console.log("[QR Print] printer config:", printer);
             if (!printer?.vendorId || !printer?.productId) {
               console.warn("[QR Print] Aborted: no printer configured.");
             } else if (!accessCards.length) {
@@ -1863,31 +2132,14 @@ async function submit(options: { skipNonCheckedOutCheck?: boolean } = {}) {
               const address = [blockLabel, levelLabel, unitLabel]
                 .filter(Boolean)
                 .join("/");
-              console.log(
-                "[QR Print] Printing",
-                accessCards.length,
-                "card(s). vendorId:",
-                vendorId,
-                "productId:",
-                productId,
-                "address:",
-                address
-              );
 
               await nextTick();
               for (const qrCode of accessCards) {
-                console.log("[QR Print] Signing QR for card:", qrCode._id);
                 const signed = await signQr({
                   cardId: qrCode._id,
                   purpose: "vms",
                 });
                 const qrData = signed?.data;
-                console.log(
-                  "[QR Print] signQr result:",
-                  signed,
-                  "| qrData:",
-                  qrData
-                );
                 if (!qrData) {
                   console.warn(
                     "[QR Print] Skipping card",
@@ -1947,17 +2199,23 @@ function parseUsbId(value: unknown) {
     : parseInt(text, 10);
 }
 
-function getVisitorIdFromResponse(response: any) {
+function getVisitorIdFromResponse(response: unknown) {
   if (typeof response === "string") return response;
+  if (!response || typeof response !== "object") return "";
+
+  const result = response as Record<string, unknown>;
+  const nested = result.data && typeof result.data === "object"
+    ? result.data as Record<string, unknown>
+    : {};
   return (
-    response?._id ||
-    response?.id ||
-    response?.data?._id ||
-    response?.data?.id ||
-    response?.insertedId ||
-    response?.data?.insertedId ||
+    result._id ||
+    result.id ||
+    nested._id ||
+    nested.id ||
+    result.insertedId ||
+    nested.insertedId ||
     ""
-  );
+  ).toString();
 }
 
 function getHidQrPrinterUsbIds() {
@@ -1966,7 +2224,25 @@ function getHidQrPrinterUsbIds() {
   return { vendorId, productId };
 }
 
+function validateHidQrReaderConfig() {
+  if (!hidQrReaderId.value) {
+    errorMessage.value =
+      "No HID reader is configured for QR Code Pass. Please select a reader in Settings.";
+    return false;
+  }
+
+  if (!hidQrReader.value?.portalId || !hidQrReader.value?.portalName) {
+    errorMessage.value =
+      "The selected HID reader has no portal configured. Reconnect the reader and select a portal before generating a QR code.";
+    return false;
+  }
+
+  return true;
+}
+
 function validateHidQrPrinterConfig() {
+  if (!validateHidQrReaderConfig()) return false;
+
   if (!hasHidQrPrinterConfig.value) {
     errorMessage.value =
       "No printer is configured on HID settings. Please configure the HID QR Code printer before continuing.";
@@ -1984,42 +2260,6 @@ function validateHidQrPrinterConfig() {
   return true;
 }
 
-function buildHidQrCodePayload(visitorId = "") {
-  if (hidQrPrintPayload.value) return hidQrPrintPayload.value;
-
-  const issuedAt = new Date();
-  const expiresAt = new Date(
-    issuedAt.getTime() + hidQrValidityMinutes.value * 60 * 1000
-  );
-  const nonce =
-    typeof crypto !== "undefined" && "randomUUID" in crypto
-      ? crypto.randomUUID()
-      : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
-
-  hidQrPrintPayload.value = JSON.stringify({
-    purpose: "hid-amico-visitor-access",
-    visitorId,
-    site: prop.site,
-    org: prop.org,
-    visitorType: prop.type,
-    name: visitor.name || "",
-    company: visitor.company || "",
-    contact: visitor.contact || "",
-    nric: visitor.nric || "",
-    plateNumber: visitor.plateNumber || "",
-    block: visitor.block || "",
-    level: visitor.level || "",
-    unit: visitor.unit || "",
-    unitName: visitor.unitName || "",
-    address: buildVisitorAddress(),
-    issuedAt: issuedAt.toISOString(),
-    expiresAt: expiresAt.toISOString(),
-    nonce,
-  });
-
-  return hidQrPrintPayload.value;
-}
-
 function buildVisitorAddress() {
   const blockLabel =
     blocksArray.value.find((b: any) => b.value === visitor.block)?.title || "";
@@ -2032,20 +2272,81 @@ function buildVisitorAddress() {
   return [blockLabel, levelLabel, unitLabel].filter(Boolean).join("/");
 }
 
-async function printHidQrCodePass(visitorId = "", manageProcessing = true) {
+async function prepareHidQrCodePreview(visitorId: string) {
+  hidQrPreviewError.value = "";
+  if (!visitorId) {
+    errorMessage.value = "Unable to identify the visitor for HID QR Code enrollment.";
+    return false;
+  }
+
+  try {
+    hidQrVisitorId.value = visitorId;
+    const response = await issueVisitorQr(hidQrReaderId.value, {
+      visitorId,
+      validityMinutes: hidQrValidityMinutes.value,
+    });
+    const credential = "data" in response ? response.data : response;
+    hidQrPrintPayload.value = credential.qrValue;
+    if (!hidQrPrintPayload.value) {
+      errorMessage.value = "HID QR Code enrollment did not return a QR value.";
+      return false;
+    }
+
+    hidQrPreview.imageUrl = await QRCode.toDataURL(hidQrPrintPayload.value, {
+      width: 360,
+      margin: 2,
+      errorCorrectionLevel: "M",
+    });
+    hidQrPreview.issuedAt = credential.issuedAt || "";
+    hidQrPreview.expiresAt = credential.expiresAt || "";
+    hidQrVisible.value = false;
+    hidQrNow.value = Date.now();
+    hidQrPreviewDialog.value = true;
+    return true;
+  } catch (error: unknown) {
+    const message = errorConverter(error) || "Unable to generate HID QR Code.";
+    if (hidQrPreviewDialog.value) hidQrPreviewError.value = message;
+    else errorMessage.value = message;
+    return false;
+  }
+}
+
+function formatHidQrCountdown(totalSeconds: number) {
+  const safe = Math.max(0, totalSeconds);
+  const hours = Math.floor(safe / 3600);
+  const minutes = Math.floor((safe % 3600) / 60);
+  const seconds = safe % 60;
+  return [hours, minutes, seconds].map((part) => String(part).padStart(2, "0")).join(":");
+}
+
+async function regenerateHidQrCode() {
+  if (!hidQrVisitorId.value) return;
+  hidQrRegenerating.value = true;
+  hidQrPreviewError.value = "";
+  try {
+    await prepareHidQrCodePreview(hidQrVisitorId.value);
+  } finally {
+    hidQrRegenerating.value = false;
+  }
+}
+
+async function printHidQrCodePass() {
   if (hidQrPrinted.value) return true;
 
   if (!validateHidQrPrinterConfig()) return false;
 
   const { vendorId, productId } = getHidQrPrinterUsbIds();
 
-  if (manageProcessing) processing.value = true;
+  hidQrPrinting.value = true;
+  hidQrPreviewError.value = "";
   try {
+    if (!hidQrPrintPayload.value) return false;
+
     const printResult = await testConnection(
       vendorId,
       productId,
       true,
-      buildHidQrCodePayload(visitorId),
+      hidQrPrintPayload.value,
       null,
       null,
       visitor.company || visitor.name || "",
@@ -2055,7 +2356,7 @@ async function printHidQrCodePass(visitorId = "", manageProcessing = true) {
     );
 
     if (!printResult?.success || printResult?.printTest?.success === false) {
-      errorMessage.value =
+      hidQrPreviewError.value =
         printResult?.printTest?.error ||
         printResult?.error ||
         "Unable to print HID QR Code. Please check the printer connection.";
@@ -2064,14 +2365,40 @@ async function printHidQrCodePass(visitorId = "", manageProcessing = true) {
 
     hidQrPrinted.value = true;
     return true;
-  } catch (error: any) {
-    errorMessage.value = error?.message || "Unable to print HID QR Code.";
+  } catch (error: unknown) {
+    hidQrPreviewError.value = errorConverter(error) || "Unable to print HID QR Code.";
     return false;
   } finally {
-    if (manageProcessing) processing.value = false;
+    hidQrPrinting.value = false;
   }
 }
 
+function formatHidQrExpiry(value: string) {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
+}
+
+function downloadHidQrCode() {
+  if (!hidQrPreview.imageUrl) return;
+  const safeName = String(visitor.name || "visitor")
+    .trim()
+    .replace(/[^a-z0-9]+/gi, "-")
+    .replace(/^-|-$/g, "")
+    .toLowerCase();
+  const link = document.createElement("a");
+  link.href = hidQrPreview.imageUrl;
+  link.download = `hid-visitor-qr-${safeName || "visitor"}.png`;
+  link.click();
+}
+
+function closeHidQrPreview() {
+  hidQrPreviewDialog.value = false;
+  const completion = hidQrPendingCompletion.value;
+  hidQrPendingCompletion.value = null;
+  if (completion === "done:more") emit("done:more");
+  else if (completion === "done") emit("done");
+}
+
 watch(
   () => visitor.plateNumber,
   (newVal) => {
@@ -2148,11 +2475,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 {
@@ -2160,6 +2557,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 {
@@ -2172,44 +2572,208 @@ 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);
+}
+
+.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);
 }
 
-.nric-options-title {
-  color: #06253b;
-  font-size: 1.45rem;
-  line-height: 1.2;
+.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__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 var(--border);
+  border-radius: var(--r-inner);
+  background: #ffffff;
+}
+
+.hid-qr-reveal {
+  display: flex;
+  width: 280px;
+  height: 280px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  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>