@7365admin1/layer-common 4.90.1 → 4.90.2-staging.484

package/components/InvitationClientForm.vue

@@ -388,9 +388,27 @@ watch(
 const roles = ref<any[]>([])
 const { getRoles } = useRole()
 
+/*
+ * `type` is the ROLE type, not the service the client subscribes to, and the
+ * only caller (`ClientMain.vue` "Invite Client") passes no `app` prop -- so
+ * this sent `type: ""` and the endpoint applied no type filter at all. The
+ * dropdown therefore listed every org-less role of every type, which includes
+ * the platform's OWN staff roles (`type: "admin"` -- the two rows the console's
+ * `/super-admin/role-permissions` screen edits). Offering a Seven365 console
+ * staff role on a CLIENT invitation is the defect.
+ *
+ * A client admin's role is `type: "organization"`, which is what the client
+ * roles screen (`org/[organization]/roles-permissions.vue`) already lists. This
+ * narrows to exactly that. It is a narrowing of this one picker only: no role
+ * changes, no permission changes, and the org-less `organization` roles that
+ * were already being picked are all still offered.
+ *
+ * Keying off the selected service instead would empty the dropdown -- no
+ * org-less role carries a service type -- so `props.app` is not the filter.
+ */
 const { data: roleData, refresh: refreshRoles } = await useLazyAsyncData(
   "roles",
-  () => getRoles({ org: org.value?._id, type: props.app, limit: 50 }),
+  () => getRoles({ org: org.value?._id, type: "organization", limit: 50 }),
   { watch: [() => props.app] }
 )
 

package/components/MemberInformation.vue

@@ -10,12 +10,12 @@
         <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorScanPassMessage = ''">
           <v-row no-gutters class="pt-5 ga-2">
             <v-col cols="12">
-              <InputLabel class="text-capitalize" title="Full Name" required />
+              <InputLabel class="text-capitalize" title="Full Name (Required)" required />
               <v-text-field v-model.trim="memberForm.name" density="compact" hide-details :rules="[requiredRule]" />
             </v-col>
 
             <v-col cols="12">
-              <InputLabel class="text-capitalize" title="NRIC" required />
+              <InputLabel class="text-capitalize" title="NRIC (Required)" required />
               <v-menu v-model="memberNRICSearchMenu" location="bottom" offset-y :close-on-content-click="false">
                 <template #activator="{ props: menuProps }">
                   <InputNRICNumber v-bind="menuProps" v-model.trim="memberForm.nric" density="compact" hide-details
@@ -34,7 +34,7 @@
             </v-col>
 
             <v-col cols="12">
-              <InputLabel class="text-capitalize" title="Phone Number" required />
+              <InputLabel class="text-capitalize" title="Phone Number (Required)" required />
               <v-menu v-model="memberPhoneSearchMenu" location="bottom" offset-y :close-on-content-click="false">
                 <template #activator="{ props: menuProps }">
                   <InputPhoneNumberV2 v-bind="menuProps" v-model="memberForm.contact" density="compact"
@@ -54,7 +54,7 @@
 
             <v-col cols="12">
               <v-autocomplete v-model="selectedPass" v-model:search="passInput" :hide-no-data="false" class="mt-3"
-                :items="passItemsFilteredFinal" item-title="prefixAndName" item-value="_id" label="Pass (optional)"
+                :items="passItemsFilteredFinal" item-title="prefixAndName" item-value="_id" label="Pass (Optional)"
                 variant="outlined" density="compact" :error-messages="errorScanPassMessage" persistent-hint small-chips
                 :clearable="clearable" @click="fetchPasses">
                 <template v-slot:no-data>

package/components/PassInformation.vue

@@ -19,7 +19,7 @@
           :rules="props.passRules"
           item-title="prefixAndName"
           item-value="_id"
-          label="Pass"
+          label="Pass (Optional)"
           variant="outlined"
           hide-details
           persistent-hint
@@ -48,7 +48,7 @@
             :rules="props.passRules"
             item-title="prefixAndName"
             item-value="_id"
-            label="Keys"
+            label="Keys (Optional)"
             multiple
             variant="outlined"
             hide-details

package/components/TableMain.vue

@@ -59,17 +59,32 @@
             >
               {{ createLabel }}
             </v-btn>
-            <v-text-field
+            <!--
+              The design's search field. This was a `v-text-field` with only a
+              `max-width`, so inside the actions row it shrank to its minimum
+              and showed "Se" and a magnifier, at a different height and
+              border from the button beside it. Same `search` model; clearing
+              now sets "" instead of Vuetify's null.
+            -->
+            <AppField
               v-if="canSearch"
               v-model="searchInput"
-              density="compact"
+              search
               placeholder="Search"
-              clearable
-              max-width="300"
-              append-inner-icon="mdi-magnify"
-              hide-details
+              aria-label="Search"
               class="table-card__search"
-            />
+            >
+              <template v-if="searchInput" #trailing>
+                <button
+                  type="button"
+                  class="app-field__trailing"
+                  aria-label="Clear search"
+                  @click="searchInput = ''"
+                >
+                  <v-icon icon="mdi-close" size="16" />
+                </button>
+              </template>
+            </AppField>
             <!-- Ghost/secondary, as the design specifies for Scan QR Code. -->
             <v-btn
               v-if="canScanVisitorQRCode"

package/components/VisitorForm.vue

@@ -16,14 +16,14 @@
       <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''">
         <v-row no-gutters class="pt-4">
           <v-col v-if="shouldShowField('attachments')" class="w-100">
-            <InputLabel class="text-capitalize" title="Attach Image" />
+            <InputLabel class="text-capitalize" title="Attach Image (Optional)" />
             <InputFileV2 v-model="visitor.attachments" multiple :max-length="3" />
           </v-col>
 
           <v-col v-if="shouldShowField('nric')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel class="text-capitalize" title="NRIC" :required="requireNRIC" />
+                <InputLabel class="text-capitalize" :title="requireNRIC ? 'NRIC (Required)' : 'NRIC (Optional)'" :required="requireNRIC" />
                 <v-menu v-model="nricSearchMenu" location="bottom" offset-y :close-on-content-click="false"
                   content-class="visitor-form__menu">
                   <template #activator="{ props }">
@@ -55,11 +55,11 @@
           <v-col v-if="shouldShowField('contact')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel class="text-capitalize" title="Phone Number" required />
+                <InputLabel class="text-capitalize" :title="requireContact ? 'Phone Number (Required)' : 'Phone Number (Optional)'" :required="requireContact" />
                 <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]"
+                    <InputPhoneNumberV2 v-bind="props" v-model="visitor.contact" :rules="[requireContact ? requiredRule : () => true]"
                       @focus="isPhoneFieldFocused = true" @blur="isPhoneFieldFocused = false" density="comfortable"
                       :key="currentAutofillSource + 'phone-key'" @update:model-value="handleUpdatePhoneNumber" />
                   </template>
@@ -87,12 +87,13 @@
           <v-col v-if="shouldShowField('plateNumber')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel class="text-capitalize" title="Vehicle Number" :required="isVehicleRequired" />
+                <InputLabel class="text-capitalize" :title="isVehicleRequired ? 'Vehicle Number (Required)' : 'Vehicle Number (Optional)'" :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"
                   content-class="visitor-form__menu">
                   <template #activator="{ props }">
                     <InputVehicleNumber v-bind="props" v-model="visitor.plateNumber" density="comfortable"
+                      :rules="[isVehicleRequired ? requiredRule : () => true]"
                       @update:model-value="handleUpdateVehicleNumber" @focus="handleFocusPlateNumber"
                       @blur="isPlateNumberFieldFocused = false" />
                   </template>
@@ -117,7 +118,7 @@
           </v-col>
 
           <v-col v-if="shouldShowField('contractorType')" cols="12">
-            <InputLabel class="text-capitalize" title="Contractor Type" required />
+            <InputLabel class="text-capitalize" title="Contractor Type (Required)" required />
             <v-combobox v-model="contractorTypeObj" v-model:search="contractorTypeInput" ref="contractorTypeCombo"
               autocomplete="off" :hide-no-data="false" @update:focused="handleFocusedContractorType"
               :items="contractorTypes" :rules="[requiredRule]" item-value="value"
@@ -139,7 +140,7 @@
           <v-col v-if="shouldShowField('name')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel class="text-capitalize" title="Full Name" required />
+                <InputLabel class="text-capitalize" title="Full Name (Required)" required />
                 <v-text-field v-model.trim="visitor.name" density="comfortable" :rules="[requiredRule]" />
               </v-col>
             </v-row>
@@ -159,7 +160,7 @@
                      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 />
+                <InputLabel class="text-capitalize" title="Delivery Type (Required)" 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>
@@ -170,8 +171,9 @@
 
           <template v-if="shouldShowField('company')">
             <v-col cols="12">
-              <InputLabel class="text-capitalize" title="Company Name" />
+              <InputLabel class="text-capitalize" :title="requireCompany ? 'Company Name (Required)' : 'Company Name (Optional)'" :required="requireCompany" />
               <v-combobox v-model="visitor.company" v-model:search="companyNameInput" ref="companyCombo"
+                :rules="[requireCompany ? requiredRule : () => true]"
                 autocomplete="off" :hide-no-data="true" :items="companyNames" item-value="value"
                 @update:model-value="handleSelectCompanyName" variant="outlined" density="comfortable" persistent-hint
                 small-chips>
@@ -182,8 +184,9 @@
          
           <template v-if="shouldShowField('delivery-company')">
             <v-col cols="12">
-              <InputLabel class="text-capitalize" title="Delivery Company" />
+              <InputLabel class="text-capitalize" title="Delivery Company (Required)" required />
               <v-combobox v-model="deliveryCompany" v-model:search="deliveryCompanyInput" ref="companyCombo"
+                :rules="[requiredRule]"
                 autocomplete="off" :hide-no-data="false" :items="deliveryCompanyList" item-value="value"
                 :loading="siteDataPending" variant="outlined" density="comfortable" persistent-hint small-chips>
                 <template v-slot:no-data>
@@ -205,7 +208,7 @@
 
 
           <v-col v-if="shouldShowField('block')" cols="12">
-            <InputLabel class="text-capitalize" title="Block" required />
+            <InputLabel class="text-capitalize" title="Block (Required)" required />
             <v-autocomplete v-model="visitor.block" :items="blocksArray" item-value="value" autocomplete="off"
               item-title="title" :key="blockListDataPending ? 'block-list-pending' : 'block-list-ready'
                 " :loading="blockListDataPending" @update:model-value="handleChangeBlock" density="comfortable"
@@ -213,13 +216,13 @@
           </v-col>
 
           <v-col v-if="shouldShowField('level')" cols="12">
-            <InputLabel class="text-capitalize" title="Level" required />
+            <InputLabel class="text-capitalize" title="Level (Required)" required />
             <v-autocomplete v-model="visitor.level" :items="levelsArray" density="comfortable" autocomplete="off"
               :disabled="!visitor.block" :key="levelsDataPending ? 'level-list-pending' : 'level-list-ready'
                 " :loading="levelsDataPending" @update:model-value="handleChangeLevel" :rules="[requiredRule]" />
           </v-col>
           <v-col v-if="shouldShowField('unit')" cols="12">
-            <InputLabel class="text-capitalize" title="Unit" required />
+            <InputLabel class="text-capitalize" title="Unit (Required)" required />
             <v-autocomplete v-model="visitor.unit" :items="unitsArray" density="comfortable" autocomplete="off"
               item-title="title" item-value="value" :disabled="!visitor.level"
               :key="unitsDataPending ? 'unit-list-pending' : 'unit-list-ready'" :loading="unitsDataPending"
@@ -227,14 +230,14 @@
           </v-col>
 
           <v-col v-if="shouldShowField('unit')" cols="12">
-            <InputLabel class="text-capitalize" title="Registered Unit Company Name" required
+            <InputLabel class="text-capitalize" title="Registered Unit Company Name"
               :key="'unit-key' + visitor.level" />
             <v-text-field v-model.trim="registeredUnitCompanyName" density="comfortable"
               :loading="buildingUnitDataPending" readonly class="no-pointer" />
           </v-col>
 
           <v-col v-if="shouldShowField('remarks')" cols="12">
-            <InputLabel class="text-capitalize" title="Remarks" />
+            <InputLabel class="text-capitalize" title="Remarks (Optional)" />
             <v-textarea v-model="visitor.remarks" density="comfortable" :rows="3" no-resize />
           </v-col>
 
@@ -831,12 +834,29 @@ const formMode = computed<"add" | "edit" | "register">(() => {
   return selectedUnregisteredVisitor.value ? "register" : prop.mode;
 });
 
+// Fields this form actually has for the visitor type - drives both what is
+// shown and what is sent on submit, so nothing outside the form is saved.
+// typeFieldMap also feeds the details dialog, so it can list more than this:
+//   - walk-in "company": not on the security mobile app's walk-in, hidden here
+//     but still shown on older walk-in records in the details dialog;
+//   - guest "purpose": never drawn in this form.
+const formFieldsExcluded: Partial<Record<TVisitorType, string[]>> = {
+  "walk-in": ["company"],
+  guest: ["purpose"],
+};
+
+const isFormField = (
+  fieldKey: keyof TVisitorPayload | "delivery-company"
+) => {
+  if (formFieldsExcluded[prop.type]?.includes(fieldKey)) return false;
+  return !!typeFieldMap[prop.type]?.includes(fieldKey);
+};
+
 const shouldShowField = (
   fieldKey: keyof TVisitorPayload | "delivery-company"
 ) => {
   if ((!withStep2.value && !withStep3.value) || contractorStep.value === 1) {
-    const visibleFields = typeFieldMap[prop.type];
-    return visibleFields?.includes(fieldKey);
+    return isFormField(fieldKey);
   }
 };
 
@@ -866,8 +886,21 @@ const showShowKeysField = computed(() => {
   return ["guest", "contractor", "walk-in"].includes(prop.type);
 });
 
+// Required / optional per type - kept in line with the security mobile app.
 const requireNRIC = computed(() => {
-  return prop.type !== "walk-in" && prop.type !== "guest";
+  return prop.type === "contractor";
+});
+
+const requireContact = computed(() => {
+  return ["contractor", "delivery"].includes(prop.type);
+});
+
+const isVehicleRequired = computed(() => {
+  return ["guest", "pick-up", "drop-off"].includes(prop.type);
+});
+
+const requireCompany = computed(() => {
+  return prop.type === "contractor";
 });
 
 const hidQrCodePassConfig = computed(() => {
@@ -910,8 +943,20 @@ const hidQrReaderId = computed(() => (
   hidQrConfiguredReaderId.value || String(hidQrReader.value?._id || "")
 ));
 
+/*
+ * Visitor QR passes are hidden at the manager's request (2026-09-23).
+ *
+ * A flag rather than a deletion: issuing, the preview dialog, printing and the
+ * regenerate handler below are all intact and untouched, so bringing the
+ * feature back is this one line. Every surface that offers a Visitor QR reads
+ * `hidQrCodePassAllowed`, which is why the switch belongs here and not in each
+ * of them.
+ */
+const HID_VISITOR_QR_ENABLED = false;
+
 const hidQrCodePassAllowed = computed(() => {
   return (
+    HID_VISITOR_QR_ENABLED &&
     hidQrCodePassEnabled.value &&
     ["guest", "contractor", "walk-in"].includes(prop.type)
   );
@@ -1942,7 +1987,8 @@ async function submit(options: { skipNonCheckedOutCheck?: boolean } = {}) {
   if (formMode.value === "add" || formMode.value === "register") {
     const allowedFields = typeFieldMap[prop.type];
     for (const key of allowedFields as (keyof TVisitorPayload)[]) {
-      if (visitor[key] !== undefined) {
+      // only what the form has (see isFormField)
+      if (isFormField(key) && visitor[key] !== undefined) {
         payload = {
           ...payload,
           [key]: visitor[key],

package/components/VisitorManagement.vue

@@ -750,11 +750,35 @@
                 class="visitor-preview__row"
               >
                 <div class="visitor-preview__label">{{ label }}</div>
-                <div
-                  v-tooltip:top="selectedVisitorObject[key]"
-                  class="visitor-preview__value"
-                >
-                  {{ maskNRIC(selectedVisitorObject[key]) }}
+                <div>
+                  <!-- Was a hover tooltip on the value: the full NRIC only
+                       reachable by hovering, which says nothing is there to
+                       reach and cannot be reached at all on a touch screen.
+                       The eye alone, at the 14px the Incident Report screens
+                       draw it, is a 14px target - the floor is 24px. So the
+                       NUMBER is the control and the eye is its affordance:
+                       the whole masked value is pressable, which makes the
+                       target the width of the digits rather than of a glyph,
+                       and being a real `button` it also takes a tab stop,
+                       which a `v-icon` with a click handler never did. -->
+                  <button
+                    type="button"
+                    class="visitor-preview__reveal"
+                    :aria-label="showVisitorNric ? 'Hide NRIC' : 'Show NRIC'"
+                    :aria-pressed="showVisitorNric"
+                    @click="showVisitorNric = !showVisitorNric"
+                  >
+                    <span class="visitor-preview__value">
+                      {{
+                        showVisitorNric
+                          ? selectedVisitorObject[key]
+                          : maskNRIC(selectedVisitorObject[key])
+                      }}
+                    </span>
+                    <v-icon size="16" class="visitor-preview__eye">
+                      {{ showVisitorNric ? "mdi-eye-off-outline" : "mdi-eye-outline" }}
+                    </v-icon>
+                  </button>
                 </div>
               </div>
 
@@ -804,6 +828,84 @@
                 </div>
               </div>
 
+              <!--
+                THE CONTRACTOR'S PARTY.
+
+                The list row has always said `( +2 members)` beside the name
+                and then had nowhere to send you for the names themselves. The
+                block spans both columns rather than sitting in the 116px
+                value track: a member is a record, not a value, and several of
+                them in a 250px column is unreadable.
+
+                Read off `selectedVisitorDataObject` (the raw row) and not
+                `selectedVisitorObject`, which filters itself down to
+                `typeFieldMap` plus five fixed keys - `members` is on neither
+                list, and widening that computed would change what four other
+                dialogs on this screen see.
+              -->
+              <div
+                v-else-if="key === 'members' && selectedVisitorMembers.length"
+                class="visitor-preview__row visitor-preview__row--block"
+              >
+                <div class="visitor-preview__label">
+                  {{ label }} ({{ selectedVisitorMembers.length }})
+                </div>
+                <div class="visitor-preview__members">
+                  <div
+                    v-for="(member, index) in selectedVisitorMembers"
+                    :key="member?.nric || member?.name || index"
+                    class="visitor-preview__member"
+                  >
+                    <div class="visitor-preview__value">
+                      {{ member?.name || "N/A" }}
+                    </div>
+                    <template v-for="field in memberDetailFields" :key="field.key">
+                      <div
+                        v-if="member?.[field.key]"
+                        class="visitor-preview__member-line"
+                      >
+                        <span class="visitor-preview__member-key">
+                          {{ field.label }}
+                        </span>
+                        <!-- A member's NRIC is the same class of data as the
+                             visitor's, so it gets the same control. Each
+                             member reveals separately - one toggle for the
+                             whole card would show three people's NRICs to
+                             read one. -->
+                        <button
+                          v-if="field.key === 'nric'"
+                          type="button"
+                          class="visitor-preview__reveal"
+                          :aria-label="
+                            isMemberNricShown(index)
+                              ? `Hide NRIC for ${member?.name || 'this member'}`
+                              : `Show NRIC for ${member?.name || 'this member'}`
+                          "
+                          :aria-pressed="isMemberNricShown(index)"
+                          @click="toggleMemberNric(index)"
+                        >
+                          <span>
+                            {{
+                              isMemberNricShown(index)
+                                ? member.nric
+                                : maskNRIC(member.nric)
+                            }}
+                          </span>
+                          <v-icon size="16" class="visitor-preview__eye">
+                            {{
+                              isMemberNricShown(index)
+                                ? "mdi-eye-off-outline"
+                                : "mdi-eye-outline"
+                            }}
+                          </v-icon>
+                        </button>
+                        <span v-else>{{ member[field.key] }}</span>
+                      </div>
+                    </template>
+                  </div>
+                </div>
+              </div>
+
               <!-- The vehicle number, with Block on its right: the Registered
                    tab only, for someone who may add vehicles. It opens the
                    Vehicle Mgmt Block Listed form with the category taken from
@@ -2124,6 +2226,71 @@ const isSelectedVisitorPendingApproval = computed(
   () => selectedVisitorStatus.value === "pending"
 );
 
+/**
+ * The members a contractor brought with them. Not gated on the Guests tab: the
+ * list row's own `( +N members)` count is not either, and a contractor with a
+ * party has one wherever the screen shows it.
+ *
+ * Blank entries are dropped rather than drawn as an empty card - the payload
+ * carries `""` for every detail nobody filled in, so a member with no name and
+ * no details would otherwise render as a bare inset box.
+ */
+const selectedVisitorMembers = computed<Record<string, any>[]>(() => {
+  const members = selectedVisitorDataObject.value?.members;
+  if (!Array.isArray(members)) return [];
+
+  return members.filter(
+    (member: Record<string, any>) =>
+      member?.name || member?.nric || member?.contact || member?.plateNumber
+  );
+});
+
+/**
+ * WHICH NRICs ARE UNCOVERED RIGHT NOW.
+ *
+ * Per member and not per card, so revealing one person's number does not
+ * uncover the rest of the party's. Both are cleared when the dialog closes -
+ * a preview must not open on the next visitor with the last one's NRIC
+ * already showing, and it is the same `selectedVisitorId` that would carry it
+ * across if the same row were reopened.
+ */
+const showVisitorNric = ref(false);
+const shownMemberNrics = ref<number[]>([]);
+
+function isMemberNricShown(index: number) {
+  return shownMemberNrics.value.includes(index);
+}
+
+function toggleMemberNric(index: number) {
+  shownMemberNrics.value = isMemberNricShown(index)
+    ? shownMemberNrics.value.filter((x) => x !== index)
+    : [...shownMemberNrics.value, index];
+}
+
+watch(
+  () => dialog.viewVisitor,
+  (open) => {
+    if (open) return;
+    showVisitorNric.value = false;
+    shownMemberNrics.value = [];
+  }
+);
+
+/**
+ * What a member row prints under the name, in order. `plateNumber` is in here
+ * because the API returns it on `members[]` even though neither
+ * `TMemberInfo` (this package) nor `TContractorMembers` (API-core's visitor
+ * model, name and nric only) declares it - the two types have drifted from the
+ * document and from each other. Reading the key defensively costs nothing and
+ * shows the vehicle a member actually arrived in; the types are somebody's to
+ * reconcile separately.
+ */
+const memberDetailFields = [
+  { key: "nric", label: "NRIC" },
+  { key: "contact", label: "Contact" },
+  { key: "plateNumber", label: "Vehicle" },
+] as const;
+
 const formatType = (item: any) =>
   (item.deliveryType ? item.deliveryType + "-" : "") + item.type;
 
@@ -2137,6 +2304,7 @@ const formattedFields = {
   level: "Level",
   unit: "Unit",
   purpose: "Purpose",
+  members: "Members",
   checkIn: "Check In",
   snapshotEntryImage: "Entry Image",
   checkOut: "Check Out",
@@ -3143,6 +3311,100 @@ watchEffect(async () => {
   word-break: break-word;
 }
 
+/* A row whose value is a set of records rather than a value - it drops the
+   two-column grid and runs the full width of the card body. */
+.visitor-preview__row--block {
+  display: block;
+}
+
+.visitor-preview__members {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+/*
+ * An added member reads as an inset on the card it sits in - `--hover` on
+ * `--border` at the inner radius. Those are `Card/MemberInfoSummary`'s three
+ * decisions, unchanged, so a member looks the same in the preview as it does
+ * in the form that created it. Only the TYPE differs: that card still prints
+ * `<strong>Label:</strong> value`, which is the pattern this dialog just moved
+ * off, so the lines below are set on the scale rather than inherited.
+ */
+.visitor-preview__member {
+  padding: 9px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--hover);
+}
+
+.visitor-preview__member-line {
+  display: flex;
+  gap: 8px;
+  margin-top: 3px;
+  font-size: var(--fs-breadcrumb);
+  color: var(--text2);
+  word-break: break-word;
+}
+
+.visitor-preview__member-key {
+  flex: 0 0 52px;
+  color: var(--muted);
+}
+
+/*
+ * THE NRIC REVEAL.
+ *
+ * The pressable thing is the masked number, not the glyph beside it: an eye on
+ * its own is a 14-16px target where 24px is the floor, and on a 12.5px member
+ * line an `AppButton variant="icon"` - the layer's 32px icon square - would
+ * make the NRIC line half again the height of the Contact line under it.
+ * Pressing the digits gives a target the width of the value at no cost to the
+ * rhythm, and reads the right way round: the number is what changes.
+ *
+ * It inherits its type rather than setting any, so the visitor's NRIC stays on
+ * `--fs-cell` and a member's on the `--fs-breadcrumb` of the line it sits in.
+ * The negative margin pays back the padding, so a revealed value starts on the
+ * same left edge as every other value in the card.
+ */
+.visitor-preview__reveal {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin: -3px -7px;
+  padding: 3px 7px;
+  border: none;
+  border-radius: var(--r-inner-sm);
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--motion) ease;
+}
+
+.visitor-preview__reveal:hover {
+  background: var(--hover);
+}
+
+.visitor-preview__reveal:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+/* The design's interactive ink - not Vuetify's fixed blue, which is one colour
+   on both themes. `affectedEntities` gives its NRIC eye the same value. */
+.visitor-preview__eye {
+  color: var(--accent-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .visitor-preview__reveal {
+    transition: none;
+  }
+}
+
 /* The width the type filter carried as `max-width="200"` on the v-select. */
 .visitor-type-filter {
   max-width: 200px;