@7365admin1/layer-common 4.146.0 → 4.147.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @iservice365/layer-common
 
+## 4.147.0
+
+### Minor Changes
+
+- a071f19: Visitor list, Add and Register follow the security mobile app (isecure365) for every visitor type - the same functions and process, the web keeps its own styling.
+
+  Visitor form (Drive-In, Walk-In, Contractor, Delivery, Pick-Up, Drop-Off):
+
+  - One page with only Submit ("Update" when saving onto a record) - Contractor no longer pages. Order as the app: NRIC, Phone, Vehicle, Name, Contractor / Delivery Type, Block, Level, Unit, Registered Company Name, Company Name, Photos (Delivery, up to 5), Remarks, then Pass & Keys, Members and Entry Pass.
+  - Pass & Keys (and a member's Visitor Pass) only with See All Passes And Keys AND Update Passes And Keys (new `canAssignPassKeys` prop, default off). A contractor's pass waits for the Contractor Type; changing to a type that takes another pass asks first and clears the passes picked.
+  - Delivery type saved as `food` / `parcel` (Food by default); the delivery company snaps to the listed spelling and a new one is added to the site's list after the save.
+  - Saved the same way for every type: empty fields left out of a new visit and sent as null on an update; checked in on save (a back-office user sends `clientUserType`, no times); `createdBy` / `updatedBy`; `status: "registered"` and no `unitName` when registering; pick-up / drop-off remarks default to the type; contractor passes / keys / members as the app (`add: true` on a record).
+  - Checks in the app's order: unregistered plate, then not-checked-out (only with an NRIC or phone; not on a plain edit). Skip NRIC and each check-out from the list carry the Submit on by itself; a visitor holding a pass or key records what came back before the check-out.
+  - Ban / white list (900 / 901) and a refused pass ("Pass VP01 is In Use") handled for every type. Entry pass only for a contractor with the NFC pass switch, issued for a register too; a failed issue says "Visitor saved, pass not issued".
+  - Autofill: looked up across every visitor type (walk-in included, never pick-up / drop-off); one match fills straight away; a registered camera plate fills only the empty fields; companies offered only from the same type; never block / level / unit; chooser Back / Fill In; delete a wrongly saved person from the match cards.
+  - Contractor members: "Add Member" opens a dialog (NRIC, Phone, Name, Visitor Pass), the app's duplicate / required checks and the member's not-checked-out check; cards with Remove; up to 10.
+
+  Visitor list: Visitors / Guests / Unregistered Visitor tabs and filters as the app (Unregistered needs an entry ANPR camera too), 30-day Singapore dates, the app's row content, check-out / pass & key / NFC return dialogs with `updatedBy`, pass & key assigning gated on `canAssignPassKeys`, register picker "Register {plate} as".
+
+  Earlier in this change (Drive-In and Walk-In):
+
+  - Pass & Keys sit under Remarks; no keys for Drive-In / Walk-In (`passKeys: []`), one visitor pass (`add: true` when registering a record).
+  - Order of checks: unregistered plate, then not-checked-out (now also when registering an unregistered record).
+  - New visit: empty fields left out, checked in on save (`checkIn` now); a back-office user (service-provider / site) sends `clientUserType` with no check-in / check-out.
+  - Registering: emptied fields are sent as null; no unitName.
+  - Picking an unregistered plate match keeps what was typed and takes only the record's plate.
+  - A ban / white list answer (code 900 / 901) is shown as an error instead of a save; a pass the server says is in use is unselected.
+
+  NRIC, as the security mobile app, for every visitor type with an NRIC (Drive-In, Walk-In, Contractor, Delivery) and the contractor member input:
+
+  - an eye to show / hide the NRIC;
+  - "Scan" opens the camera (new `NricScanDialog`) and reads the NRIC and name off the card in the browser (tesseract.js), with the app's own reader (`utils/nric-card.ts`, ported as is): accepted only on a matching check letter (an M-series FIN read twice), number alone after 3 reads without a name. Nothing is uploaded or kept.
+
+  New plate notice and Register, as the security mobile app:
+
+  - shown only for a read with both the plate and the record id, when the site's Unregistered switch is on AND it has an entry / both ANPR camera; on every page, the Unregistered tab included; stays until closed (no 20 s timeout);
+  - the record for Register is kept apart (`registerVisitorFormData`) and only a new arrival replaces it - camera alerts and list reloads no longer wipe it or cancel a pending Register; cleared on a site switch and when the layout unmounts (logout);
+  - the button reads "Register" with the visitor Update right (new `canUpdateVisitor` prop), otherwise "Go to Unregistered"; the type picker opens only with the Update right and the record is used once; the row's Register button now needs Update (was Add);
+  - registering an unregistered record runs the not-checked-out check for every type.
+  - Register (row or notice) opens the form straight away with only the record's id and the camera's plate (editable) - nothing fetched or looked up in the loaded rows, so a record not on the current page no longer leaves Submit doing nothing; the guard keys in the rest and the save updates the record by its id.
+  - Unregistered-plate list: "Cancel & Add New" now carries on with the paused Submit (or Next) straight away as a new visitor, without checking that plate against the Unregistered list again.
+  - NRIC scan, as the security mobile app (2026-10-20): pauses on "Check the details" (NRIC and name) with "Fill In" / "Scan Again" instead of filling in by itself; a number whose check letter fails is offered, with a warning, once read the same twice in a row; the name is read without its small "Name" label and the Race value is never taken for it.
+
+  Delivery photos and company list, richer Preview (2026-10-22):
+
+  - Delivery form: photos as the app (Gallery / Camera, up to 5, carousel with Edit / Delete, uploaded on Submit as `attachments`); the delivery company list is read when the input is clicked, and each listed company can be renamed or removed (the site's latest list is re-read first). `FileInput` exposes `openCameraDialog`.
+  - Preview: Type and Contractor Type first; a delivery's Company; Pass and Keys as the list's chips; the Lead card's pass (names looked up from ids); Photos and ANPR Snapshots in carousels with a full-screen view; the Manual Checkout "i" only for a manual check-out.
+  - Pass & key menu and dialog: "Add Key" with no keys held, "Add/Remove Key" once the visitor holds keys.
+
 ## 4.146.0
 
 ### Minor Changes
@@ -3432,11 +3481,11 @@ Monthly report: a month that had patrols opens the list of that month's patrol r
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/components/AddPassKeyToVisitor.vue

@@ -1,41 +1,51 @@
 <template>
   <v-card width="100%" class="screen-modal passkey" :loading="processing">
     <div class="passkey__head">
-      <v-card-title>{{ isEditMode ? "Edit" : "Assign" }} Pass &amp; Keys</v-card-title>
-      <AppButton
-        variant="icon"
-        icon="mdi-close"
-        aria-label="Close"
-        @click="emit('close')"
-      />
+      <v-card-title>{{ dialogTitle }}</v-card-title>
+      <v-btn icon="mdi-close" variant="text" aria-label="Close" @click="emit('close')" />
     </div>
 
     <div class="screen-modal__body passkey__body">
       <!-- `.filter-field` is the design's input, and it is a descendant
            selector, so both autocompletes get it from this one class. -->
       <v-row no-gutters class="ga-1 filter-field">
+        <!-- Whose passes and keys these are, as the return dialog. -->
         <v-col cols="12">
-          <span class="passkey__name">Name: {{ prop.visitor.name }}</span>
+          <div class="passkey__who">
+            <div class="passkey__who-line font-weight-bold">
+              <v-icon icon="mdi-account-outline" size="18" />
+              {{ prop.visitor.name || "N/A" }}
+            </div>
+            <div class="passkey__who-line">
+              <v-icon icon="mdi-storefront-outline" size="18" />
+              {{ visitorLocation }}
+            </div>
+          </div>
         </v-col>
 
         <!-- Pass section -->
-        <v-col cols="12" class="mt-3">
-          <InputLabel title="Pass" />
+        <v-col v-if="showPass" cols="12" class="mt-3">
+          <p class="passkey__label">Pass</p>
 
           <!-- Existing pass -->
-          <div v-if="existingPass" class="d-flex align-center ga-2 mb-2">
-            <StatusChip tone="info" :dot="false">
-              <v-icon icon="mdi-card-bulleted-outline" size="13" />
-              {{ existingPass.prefixAndName }}
-            </StatusChip>
-            <span class="passkey__current">(current)</span>
-          </div>
-
-          <!-- New pass selector -->
+          <template v-if="existingPass">
+            <p class="passkey__sublabel">Current</p>
+            <div class="d-flex flex-wrap ga-2 mb-3">
+              <v-chip variant="outlined" prepend-icon="mdi-card-bulleted-outline"
+                class="font-weight-bold passkey-chip passkey-chip--pass">
+                {{ existingPass.prefixAndName }}
+              </v-chip>
+            </div>
+            <p class="passkey__sublabel">New pass</p>
+          </template>
+
+          <!-- New pass selector, with Scan Pass beside it (as iSecure). -->
+          <div class="scan-row">
           <v-autocomplete
             v-model="selectedPass"
+            class="scan-row__field"
             v-model:search="passInput"
-            :label="existingPass?.keyId ? 'Change pass' : undefined"
+            
             :hide-no-data="false"
             :items="passItems"
             item-title="prefixAndName"
@@ -61,49 +71,52 @@
               </v-list-item>
             </template>
           </v-autocomplete>
+            <v-btn variant="flat" class="text-none screen-btn-primary scan-row__btn" prepend-icon="mdi-qrcode"
+              data-test="passkey-scan-pass" :disabled="processing" @click="openScanner('pass')">
+              Scan Pass
+            </v-btn>
+          </div>
+          <p v-if="passNotice" :class="['passkey__notice', passNotice.error && 'passkey__notice--error']">
+            {{ passNotice.text }}
+          </p>
         </v-col>
 
         <!-- Keys section -->
         <v-col v-if="showKeys" cols="12" class="mt-3">
-          <InputLabel title="Keys" />
+          <p class="passkey__label">Keys</p>
 
-          <!-- Existing keys -->
-          <div
-            v-if="existingKeys.length > 0"
-            class="d-flex flex-wrap ga-1 mb-2"
-          >
-            <!-- The design's tag chip, keeping the remove control the product
-                 already had: the tone and the shape are the shared ones, only
-                 the close button is drawn inside rather than by Vuetify. -->
-            <StatusChip
-              v-for="key in existingKeys.filter((k) => k.status != 'Removed')"
-              :key="key.keyId"
-              tone="warn"
-              :dot="false"
-            >
-              <v-icon icon="mdi-key" size="13" />
-              {{ key.prefixAndName }}
-              <button
-                class="passkey__remove"
-                :aria-label="`Remove ${key.prefixAndName}`"
-                @click="removeExistingKey(key)"
+          <!-- Existing keys: ✕ takes one off (saved as "Removed"). -->
+          <template v-if="existingKeys.some((k) => k.status != 'Removed')">
+            <p class="passkey__sublabel">Current</p>
+            <div class="d-flex flex-wrap ga-2 mb-3">
+              <v-chip
+                v-for="key in existingKeys.filter((k) => k.status != 'Removed')"
+                :key="key.keyId"
+                variant="outlined"
+                prepend-icon="mdi-key"
+                closable
+                :close-label="`Remove ${key.prefixAndName}`"
+                class="font-weight-bold passkey-chip passkey-chip--key"
+                @click:close="removeExistingKey(key)"
               >
-                <v-icon icon="mdi-close-circle" size="14" />
-              </button>
-            </StatusChip>
-            <span class="passkey__current align-self-center">(current)</span>
-          </div>
-
-          <!-- New keys selector -->
+                {{ key.prefixAndName }}
+              </v-chip>
+            </div>
+            <p class="passkey__sublabel">Add more keys</p>
+          </template>
+
+          <!-- New keys selector, with Scan Key beside it (as iSecure). -->
+          <div class="scan-row">
           <v-autocomplete
             v-model="selectedKeys"
+            class="scan-row__field"
             v-model:search="keyInput"
             :hide-no-data="false"
             :items="keyItems"
             item-title="prefixAndName"
             item-value="_id"
             :item-props="keyItemProps"
-            :label="existingKeys.length > 0 ? 'Add more keys' : undefined"
+            
             multiple
             variant="outlined"
             hide-details
@@ -127,6 +140,14 @@
               </v-list-item>
             </template>
           </v-autocomplete>
+            <v-btn variant="flat" class="text-none screen-btn-primary scan-row__btn" prepend-icon="mdi-qrcode"
+              data-test="passkey-scan-key" :disabled="processing" @click="openScanner('key')">
+              Scan Key
+            </v-btn>
+          </div>
+          <p v-if="keyNotice" :class="['passkey__notice', keyNotice.error && 'passkey__notice--error']">
+            {{ keyNotice.text }}
+          </p>
         </v-col>
       </v-row>
 
@@ -135,10 +156,13 @@
       </v-row>
     </div>
 
+    <VisitorPassKeyQRScanner v-if="scanner.open" :dialog="scanner.open" v-model:scanned-value="scanner.value"
+      @close-dialog="scanner.open = false" />
+
     <div class="passkey__footer">
       <AppButton variant="ghost" @click="emit('close')">Cancel</AppButton>
       <AppButton :disabled="!canSubmit" @click="handleSubmit">
-        {{ isEditMode ? "Save" : "Assign" }}
+        {{ submitLabel }}
       </AppButton>
     </div>
   </v-card>
@@ -149,6 +173,7 @@ import type { PropType } from "vue";
 import usePassKey from "../composables/usePassKey";
 import useVisitor from "../composables/useVisitor";
 import useKeyPresses from "../composables/useKeyPresses";
+import VisitorPassKeyQRScanner from "./VisitorPassKeyQRScanner.vue";
 
 const prop = defineProps({
   visitor: {
@@ -159,8 +184,13 @@ const prop = defineProps({
     type: String,
     required: true,
   },
+  /**
+   * iSecure's pass & key dialogs: "add" is Assign (Assign Pass & Keys for a
+   * contractor, Add Pass otherwise), "add-keys" is Add Key(s) (contractor),
+   * "edit-pass" is Change Pass, "edit" the combined edit.
+   */
   mode: {
-    type: String as PropType<"add" | "edit">,
+    type: String as PropType<"add" | "edit" | "add-keys" | "edit-pass">,
     default: "add",
   },
 });
@@ -172,6 +202,17 @@ const emit = defineEmits<{
 
 const { getPassKeysByPageSearch } = usePassKey();
 const { updateVisitor } = useVisitor();
+const { currentUser } = useLocalAuth();
+
+const { formatLocation } = useSecurityUtils();
+const visitorLocation = computed(
+  () =>
+    formatLocation({
+      block: (prop.visitor as any).block,
+      level: (prop.visitor as any).level,
+      unit: (prop.visitor as any).unit,
+    }) || "N/A"
+);
 
 const processing = ref(false);
 const errorMessage = ref("");
@@ -195,8 +236,40 @@ const existingKeys = ref<
   { keyId: string; prefixAndName: string; status?: string }[]
 >([]);
 
-const isEditMode = computed(() => prop.mode === "edit");
-const showKeys = computed(() => prop.visitor.type === "contractor");
+// Every mode but Assign starts from what the visitor holds now.
+const isEditMode = computed(() => prop.mode !== "add");
+const isContractor = computed(() => prop.visitor.type === "contractor");
+const showPass = computed(() => prop.mode !== "add-keys");
+const showKeys = computed(() => isContractor.value && prop.mode !== "edit-pass");
+
+const dialogTitle = computed(() => {
+  switch (prop.mode) {
+    case "add-keys":
+      // Once the visitor holds keys the dialog adds AND removes them.
+      return prop.visitor.passKeys?.some((key: any) => key?.status != "Removed")
+        ? "Add/Remove Key(s)"
+        : "Add Key(s)";
+    case "edit-pass":
+      return "Change Pass";
+    case "edit":
+      return "Edit Pass & Keys";
+    default:
+      return isContractor.value ? "Assign Pass & Keys" : "Add Pass";
+  }
+});
+
+const submitLabel = computed(() => {
+  switch (prop.mode) {
+    case "add-keys":
+      return "Add";
+    case "edit-pass":
+      return "Update";
+    case "edit":
+      return "Save";
+    default:
+      return isContractor.value ? "Save" : "Add";
+  }
+});
 // The key's press (if the site has any) under each key in the picker. Read
 // only when the key picker is shown.
 const { keyItemProps } = useKeyPresses(() => (showKeys.value ? prop.site : ""));
@@ -364,8 +437,136 @@ watch(
   { deep: true, immediate: true }
 );
 
+/*
+ * Scan Pass / Scan Key (iSecure `onPassScanned` / `onScanned`): the QR holds
+ * the pass or key name (`prefixAndName`, e.g. VP01). It is looked up on the
+ * server across every status, so a pass or key that is not Available is
+ * reported with its status instead of "not found".
+ */
+const PASS_TYPE_LABELS: Record<string, string> = {
+  "visitor-pass": "Visitor Pass",
+  "contractor-pass": "Contractor Pass",
+  "agent-pass": "Agent Pass",
+  "pass-key": "Key",
+};
+
+type TNotice = { text: string; error: boolean } | null;
+const passNotice = ref<TNotice>(null);
+const keyNotice = ref<TNotice>(null);
+const scanner = reactive<{ open: boolean; value: string; target: "pass" | "key" }>({
+  open: false,
+  value: "",
+  target: "pass",
+});
+
+function openScanner(target: "pass" | "key") {
+  if (target === "pass") passNotice.value = null;
+  else keyNotice.value = null;
+  scanner.target = target;
+  scanner.value = "";
+  scanner.open = true;
+}
+
+type TScanned = { _id: string; prefixAndName?: string; status?: string; passType?: string };
+
+async function findScanned(code: string): Promise<TScanned[]> {
+  const same = (item: TScanned) =>
+    (item.prefixAndName ?? "").trim().toLowerCase() === code.toLowerCase();
+  try {
+    const res: any = await getPassKeysByPageSearch({
+      search: code,
+      page: 1,
+      limit: 50,
+      sites: [prop.site],
+    });
+    const items: TScanned[] = res?.items ?? res?.data?.items ?? [];
+    return items.filter(same);
+  } catch {
+    // Offline / failed: the Available lists already loaded.
+    return [
+      ...((passesData.value as any)?.items ?? []),
+      ...((keysData.value as any)?.items ?? []),
+    ].filter(same);
+  }
+}
+
+async function onPassScanned(code: string) {
+  const fail = (text: string) => (passNotice.value = { text, error: true });
+  const found = await findScanned(code);
+  if (!found.length) return fail(`Pass or Key ${code} not found.`);
+  const item = found[0];
+  const isKey = item.passType === "pass-key";
+  const label = PASS_TYPE_LABELS[item.passType ?? ""] ?? (isKey ? "Key" : "Pass");
+  const name = item.prefixAndName ?? code;
+  if (found.length > 1) return fail(`${label} ${name} found duplicates.`);
+  if (isKey) return fail(`${label} ${name} is a key, not a pass.`);
+  if (item.status && item.status !== "Available") return fail(`${label} ${name} is ${item.status}.`);
+  if (existingPassId.value === item._id)
+    return fail(`${label} ${name} is already selected to this visitor.`);
+  if (!passTypesComputed.value.includes(item.passType ?? "")) {
+    const allowed = passTypesComputed.value
+      .map((t) => PASS_TYPE_LABELS[t] ?? t)
+      .join(" / ");
+    return fail(`${label} ${name} cannot be used for this visitor type (${allowed}).`);
+  }
+  // Shown in the picker even if the loaded list did not have it yet.
+  if (!passItems.value.some((p) => p._id === item._id)) {
+    passItems.value = [...passItems.value, item as TPassKey];
+  }
+  selectedPass.value = item._id;
+  passNotice.value = { text: `${label} ${name} selected.`, error: false };
+}
+
+async function onKeyScanned(code: string) {
+  const fail = (text: string) => (keyNotice.value = { text, error: true });
+  const found = await findScanned(code);
+  if (!found.length) return fail(`Pass or Key ${code} not found.`);
+  const item = found[0];
+  const isKey = item.passType === "pass-key";
+  const label = PASS_TYPE_LABELS[item.passType ?? ""] ?? (isKey ? "Key" : "Pass");
+  const name = item.prefixAndName ?? code;
+  if (found.length > 1) return fail(`${label} ${name} found duplicates.`);
+  if (!isKey) return fail(`You are scanning a key, but ${label} ${name} is a pass, not a key.`);
+  // A current key marked for removal: scanning it just undoes that.
+  if (existingKeys.value.some((k) => k.keyId === item._id && k.status === "Removed")) {
+    selectedKeys.value = [...selectedKeys.value, item._id];
+    selectKeys();
+    keyNotice.value = { text: `${label} ${name} restored.`, error: false };
+    return;
+  }
+  if (
+    selectedKeys.value.includes(item._id) ||
+    existingKeys.value.some((k) => k.keyId === item._id && k.status !== "Removed")
+  )
+    return fail(`${label} ${name} is already selected to this visitor.`);
+  if (item.status && item.status !== "Available") return fail(`${label} ${name} is ${item.status}.`);
+  if (!keyItems.value.some((k) => k._id === item._id)) {
+    keyItems.value = [...keyItems.value, item as TPassKey];
+  }
+  selectedKeys.value = [...selectedKeys.value, item._id];
+  keyNotice.value = { text: `${label} ${name} selected.`, error: false };
+}
+
+watch(
+  () => scanner.value,
+  (value) => {
+    const code = String(value ?? "").trim();
+    if (!code) return;
+    scanner.value = "";
+    if (scanner.target === "pass") void onPassScanned(code);
+    else void onKeyScanned(code);
+  }
+);
+
+// Picking by hand clears the last scan message.
+watch(selectedPass, () => {
+  if (passNotice.value?.error) passNotice.value = null;
+});
+
 const canSubmit = computed(() => {
   const hasRemovedKeys = existingKeys.value.some((k) => k.status === "Removed");
+  if (prop.mode === "edit-pass") return !!selectedPass.value;
+  if (prop.mode === "add-keys") return selectedKeys.value.length > 0 || hasRemovedKeys;
   return (
     !!selectedPass.value || selectedKeys.value.length > 0 || hasRemovedKeys
   );
@@ -394,7 +595,8 @@ async function handleSubmit() {
         add: true,
       });
     }
-    payload.visitorPass = finalPasses;
+    // Add Key(s) changes the keys only (iSecure `addKeysPayload`).
+    if (showPass.value) payload.visitorPass = finalPasses;
 
     // Build final keys list: kept existing + newly selected
     if (showKeys.value) {
@@ -413,6 +615,7 @@ async function handleSubmit() {
       payload.passKeys = finalKeys;
     }
 
+    payload.updatedBy = currentUser.value?._id;
     await updateVisitor(prop.visitor._id, payload);
     emit("done");
     emit("close");
@@ -468,6 +671,81 @@ async function handleSubmit() {
   opacity: 1;
 }
 
+/* A Scan button beside its input, the same height, as on the visitor form. */
+.scan-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.scan-row__field {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.scan-row__btn {
+  flex: 0 0 auto;
+}
+
+.passkey__notice {
+  margin: 6px 0 0;
+  font-size: var(--fs-cell);
+  font-weight: 600;
+  color: rgb(var(--v-theme-success));
+}
+
+.passkey__notice--error {
+  color: var(--err);
+}
+
+.passkey__who {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 8px;
+  font-size: 0.9375rem;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.passkey__who-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.passkey__label {
+  margin: 6px 0 6px;
+  font-size: 1rem;
+  font-weight: 600;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.passkey__sublabel {
+  margin: 0 0 6px;
+  font-size: var(--fs-cell);
+  color: var(--text2);
+}
+
+/* The same pass / key chips as the visitor list and the return dialog. */
+.passkey-chip.v-chip {
+  --v-chip-height: 32px;
+  font-size: 0.875rem;
+  padding: 0 12px;
+  background: rgb(var(--v-theme-surface));
+  color: rgb(var(--v-theme-on-surface));
+  border: 1.5px solid rgba(var(--v-theme-on-surface), 0.87);
+}
+
+.passkey-chip--pass :deep(.v-chip__prepend .v-icon) {
+  color: #1565c0;
+}
+
+.passkey-chip--key :deep(.v-chip__prepend .v-icon) {
+  color: #e65100;
+}
+
 .passkey__footer {
   display: flex;
   justify-content: flex-end;

package/components/FileInput.vue

@@ -288,6 +288,10 @@ const removeFile = (index) => {
 onUnmounted(() => {
   stopCamera();
 });
+
+// Lets a screen open the camera from its own button (the visitor form's
+// "Camera") while the picker itself stays hidden.
+defineExpose({ openCameraDialog });
 </script>
 
 <style scoped>