@7365admin1/layer-common 4.72.0 → 4.73.1-staging.452

package/components/HidUserEnrollment.vue

@@ -67,8 +67,8 @@
           <AppField
             v-model="search"
             search
-            placeholder="Search"
-            @keyup.enter="reloadUsersFromFirstPage"
+            placeholder="Search name, UID or registration no."
+            @keyup.enter="onSearchSubmit"
           />
           <AppSelect
             v-if="!props.cardManagement"
@@ -96,6 +96,12 @@
         <span class="app-cell--num">{{ formatHidUid(item.hidUserId) || "N/A" }}</span>
       </template>
 
+      <!-- The reader allocates this alongside the UID. A row the reader holds
+           that we never enrolled has none, so it is not always present. -->
+      <template #[`item.registration`]="{ item }">
+        <span class="app-cell--num">{{ item.registration || "N/A" }}</span>
+      </template>
+
       <!-- The shared chip. `utils/status.ts` now carries Mapped/Unmapped with
            the same tones this screen's private `getMappingStatusClass` gave
            them, so the map is one list rather than a fourth private copy. -->
@@ -166,12 +172,12 @@
     </TableMain>
 
     <v-dialog v-model="formDialog" max-width="420" persistent>
-      <v-card rounded="lg">
-        <v-card-title class="small-title">
+      <v-card class="screen-modal">
+        <v-card-title>
           {{ selectedUser ? "Edit User Information" : "Enroll" }}
         </v-card-title>
 
-        <v-card-text>
+        <v-card-text class="screen-modal__body">
           <div class="photo-wrap">
             <v-menu>
               <template #activator="{ props: menuProps }">
@@ -213,6 +219,15 @@
                 />
               </v-list>
             </v-menu>
+            <!-- Sits under the button because it describes what the button
+                 is reporting: the reader holds a face, and this is its
+                 reference. Nothing to show while enrolling - the value does not
+                 exist until the reader has accepted a photo. -->
+            <p v-if="editFacialData" class="photo-facial">
+              <span class="photo-facial__label">Facial Data</span>
+              <span class="photo-facial__value">{{ editFacialData }}</span>
+            </p>
+
             <input
               ref="photoInput"
               type="file"
@@ -222,29 +237,96 @@
             />
           </div>
 
-          <div class="field-label">Name <span>*</span></div>
+          <!-- Block / Level / Unit / Resident. Enrolment only.
+               Enrollment is resident-only and the resident must already exist
+               in iService365 - you pick a person, you do not type one. Name is
+               therefore a mirror of that record, never an input, so the reader
+               can never end up holding a name the app does not know.
+               Every option is derived from the residents themselves, so a
+               block, level or unit only appears when somebody lives there.
+               The list loads on first touch of Block, not on dialog open.
+               Enrolment only, with no exception. Editing does not move
+               anybody: the record already carries its block, level and unit,
+               `openEdit` loads them into the form and `saveUser` writes them
+               back untouched, so the location survives an edit without being
+               asked for. A row that never had one keeps not having one; that
+               is not a reason to make somebody fill in a location before they
+               can change a PIN. -->
+          <template v-if="!selectedUser">
+            <div class="field-label">Block <span>*</span></div>
+            <!-- The listener sits on a wrapper, NOT on AppSelect: AppSelect
+                 spreads `$attrs` over its v-menu activator AFTER the activator's
+                 own bindings, so an `@click` here would replace the handler that
+                 opens the dropdown. `focusin` covers keyboard users, and both
+                 are idempotent - `ensureOccupancy()` fetches once.
+                 AppSelect has no `loading` prop either; the placeholder carries
+                 the loading and empty states instead. -->
+            <div @click="onBlockOpened" @focusin="onBlockOpened">
+              <AppSelect
+                v-model="form.block"
+                :items="blockOptions"
+                :placeholder="blockPlaceholder"
+                klass="mb-3"
+                @update:model-value="onBlockChanged"
+              />
+            </div>
+
+            <div class="field-label">Level <span>*</span></div>
+            <AppSelect
+              v-model="form.level"
+              :items="levelOptions"
+              :disabled="!form.block"
+              placeholder="Select level"
+              klass="mb-3"
+              @update:model-value="onLevelChanged"
+            />
+
+            <div class="field-label">Unit <span>*</span></div>
+            <AppSelect
+              v-model="form.unit"
+              :items="unitOptions"
+              :disabled="!form.level"
+              placeholder="Select unit"
+              klass="mb-3"
+              @update:model-value="onUnitChanged"
+            />
+          </template>
+
+          <!-- Drawn only where it can offer something: while enrolling, or
+               while editing a record whose stored unit gives it a list. A row
+               with no unit has no candidates to show, and the dialog is then
+               purely the reader's own credentials - photo, PIN, password -
+               which is exactly the edit that must not be blocked. -->
+          <template v-if="!selectedUser || form.unit">
+            <div class="field-label">Resident <span>*</span></div>
+            <AppSelect
+              v-model="form.subjectId"
+              :items="subjectOptions"
+              :disabled="!form.unit"
+              :placeholder="unitResidentPlaceholder"
+              klass="mb-3"
+              @update:model-value="onResidentChanged"
+            />
+          </template>
+          <!-- The duplicate check. It is reader-scoped: this resident holding a
+               HID user on another gate is normal and says nothing here. -->
+          <p v-if="checkingResident" class="field-hint">Checking enrollment...</p>
+          <p v-else-if="residentConflict" class="field-hint field-hint--error mb-3">
+            {{ residentConflictMessage }}
+          </p>
+          <p v-else-if="unitResidentNote" class="field-hint mb-3">
+            {{ unitResidentNote }}
+          </p>
+
+          <!-- Read-only: it restates the chosen resident, it does not collect
+               anything. `selectedUser` is the edit case, where the name is
+               whatever the reader already holds. -->
+          <div class="field-label">Name</div>
           <AppField
             v-model="form.name"
             aria-label="Name"
-            placeholder="Enter name"
-            klass="mb-3"
-          />
-
-          <div class="field-label">Link To <span>*</span></div>
-          <AppSelect
-            v-model="form.subjectCategory"
-            :items="subjectCategoryOptions"
-            placeholder="Select person type"
-            klass="mb-3"
-            @update:model-value="onSubjectCategoryChanged"
-          />
-
-          <div class="field-label">Resident / Staff / Provider <span>*</span></div>
-          <AppSelect
-            v-model="form.subjectId"
-            :items="subjectOptions"
-            :loading="loadingSubjects"
-            placeholder="Select an existing site record"
+            placeholder="Select a resident above"
+            readonly
             klass="mb-3"
           />
 
@@ -256,11 +338,11 @@
             v-model="form.registration"
             aria-label="Registration No."
             placeholder="Enter registration no."
-            :readonly="!selectedUser"
+            readonly
             klass="mb-3"
           />
 
-          <div class="field-label">Access PIN (optional)</div>
+          <div class="field-label">PIN (optional)</div>
           <!--
             The handoff draws no password field anywhere (the sign-in screens
             are the owner's own), so the reveal toggle is this product's, not
@@ -270,8 +352,8 @@
           -->
           <AppField
             v-model="form.accessPin"
-            aria-label="Access PIN"
-            placeholder="Enter numeric access PIN"
+            aria-label="PIN"
+            placeholder="Enter pin"
             inputmode="numeric"
             autocomplete="new-password"
             :type="showPin ? 'text' : 'password'"
@@ -280,7 +362,7 @@
               <button
                 type="button"
                 class="app-field__trailing"
-                :aria-label="showPin ? 'Hide access PIN' : 'Show access PIN'"
+                :aria-label="showPin ? 'Hide PIN' : 'Show PIN'"
                 @click="showPin = !showPin"
               >
                 <v-icon :icon="showPin ? 'mdi-eye-off' : 'mdi-eye'" size="18" />
@@ -295,28 +377,62 @@
           <v-checkbox
             v-if="selectedUser && pinEnrolled"
             v-model="removePinRequested"
-            label="Remove current access PIN"
+            label="Remove current PIN"
+            density="compact"
+            hide-details
+          />
+
+          <!-- Password: the reader stores only a hash plus its salt, so there
+               is nothing to read back and the field is always empty on open.
+               Same reveal toggle as the PIN above. -->
+          <div class="field-label mt-3">Password (optional)</div>
+          <AppField
+            v-model="form.password"
+            aria-label="Password"
+            :placeholder="selectedUser && passwordSet ? 'Enter a new password' : 'Enter password'"
+            autocomplete="new-password"
+            :type="showPassword ? 'text' : 'password'"
+          >
+            <template #trailing>
+              <button
+                type="button"
+                class="app-field__trailing"
+                :aria-label="showPassword ? 'Hide password' : 'Show password'"
+                @click="showPassword = !showPassword"
+              >
+                <v-icon :icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'" size="18" />
+              </button>
+            </template>
+          </AppField>
+          <p class="field-hint">
+            {{ selectedUser && passwordSet ? "A password is set. Leave blank to keep it." : "Used with the user ID on the reader keypad." }}
+          </p>
+          <v-checkbox
+            v-if="selectedUser && passwordSet"
+            v-model="removePasswordRequested"
+            label="Remove current password"
             density="compact"
             hide-details
           />
         </v-card-text>
 
-        <!-- The split footer bar, as panel 2 keeps it: `v-btn` because it needs
-             `:loading` and a full-bleed shape the handoff does not draw. Only
-             the colours change - they were fixed hexes on both themes. -->
-        <v-card-actions class="pa-0">
+        <!-- The shared modal footer: `screen-btn-ghost` + `screen-btn-primary`
+             on `v-btn`, the same pair every other module's dialog uses
+             (`assets/css/screens.css`). `v-btn` stays because the submit needs
+             `:loading`, which `AppButton` does not carry. -->
+        <v-card-actions class="screen-modal__footer">
           <v-btn
-            class="text-none action-cancel"
+            class="text-none screen-btn-ghost"
             variant="flat"
-            height="44"
             @click="formDialog = false"
-            >Cancel</v-btn
           >
+            Cancel
+          </v-btn>
           <v-btn
-            class="text-none action-submit"
+            class="text-none screen-btn-primary"
             variant="flat"
-            height="44"
             :loading="saving"
+            :disabled="Boolean(residentConflict) || checkingResident"
             @click="saveUser"
           >
             Save
@@ -328,9 +444,9 @@
     <HidCameraCaptureDialog v-model="cameraDialog" @capture="onCameraCapture" />
 
     <v-dialog v-model="viewDialog" max-width="430">
-      <v-card rounded="lg">
-        <v-card-title class="small-title">User Information</v-card-title>
-        <v-card-text>
+      <v-card class="screen-modal">
+        <v-card-title>User Information</v-card-title>
+        <v-card-text class="screen-modal__body">
           <div class="detail-grid">
             <span>Name</span><strong>{{ getName(selectedUser) }}</strong>
             <span>User ID</span
@@ -347,21 +463,22 @@
             ><strong>{{
               selectedUser ? getMappingStatus(selectedUser) : "N/A"
             }}</strong>
-            <span>Access PIN</span
+            <span>PIN</span
             ><strong>{{ selectedUser?.metadata?.pinEnrolled ? "Configured" : "N/A" }}</strong>
+            <span>Password</span
+            ><strong>{{ selectedUser?.metadata?.passwordSet ? "Configured" : "N/A" }}</strong>
           </div>
         </v-card-text>
-        <v-card-actions>
-          <v-spacer />
+        <v-card-actions class="screen-modal__footer">
           <AppButton variant="ghost" @click="viewDialog = false">Close</AppButton>
         </v-card-actions>
       </v-card>
     </v-dialog>
 
     <v-dialog v-model="cardDialog" max-width="560" persistent>
-      <v-card rounded="lg">
-        <v-card-title class="small-title">Physical HID Cards</v-card-title>
-        <v-card-text>
+      <v-card class="screen-modal">
+        <v-card-title>Physical HID Cards</v-card-title>
+        <v-card-text class="screen-modal__body">
           <p class="hid-card-user">
             {{ getName(cardUser) }}
             <span>{{ cardUser ? formatHidUid(cardUser.hidUserId) : "" }}</span>
@@ -452,6 +569,11 @@
             Present the physical card to the selected Amico reader. The request will time out after 30 seconds.
           </v-alert>
 
+          <!-- Reading the card at the reader is the primary way in: it is the
+               only one that does not require knowing the facility code and card
+               number up front, which are printed on nothing the operator holds.
+               Assigning by hand stays for the cards whose values are already
+               known. -->
           <div class="hid-card-actions mt-4">
             <AppButton
               variant="secondary"
@@ -470,14 +592,16 @@
             <AppButton
               v-if="enrollingCard"
               variant="ghost"
+              :disabled="cancellingCard"
               @click="cancelPhysicalCardEnrollment"
             >
-              Cancel Reading
+              {{ cancellingCard ? "Cancelling…" : "Cancel Reading" }}
             </AppButton>
           </div>
         </v-card-text>
-        <v-card-actions>
-          <v-spacer />
+        <v-card-actions class="screen-modal__footer">
+          <!-- Closing mid-read would leave the reader listening with nothing
+               to receive the card it reads. -->
           <AppButton variant="ghost" :disabled="enrollingCard" @click="cardDialog = false">
             Close
           </AppButton>
@@ -486,31 +610,31 @@
     </v-dialog>
 
     <v-dialog v-model="deleteDialog" max-width="360" persistent>
-      <v-card rounded="lg">
-        <v-card-title class="small-title">Delete</v-card-title>
-        <v-card-text class="text-body-2">
+      <v-card class="screen-modal">
+        <v-card-title>Delete</v-card-title>
+        <v-card-text class="screen-modal__body text-body-2">
           Are you sure you want to permanently delete this HID user?
           <div class="text-caption text-medium-emphasis mt-2">
             This action will remove the user from the HID reader and mark the
             identity as deleted.
           </div>
         </v-card-text>
-        <v-card-actions class="pa-0">
+        <v-card-actions class="screen-modal__footer">
           <v-btn
-            class="text-none action-cancel"
+            class="text-none screen-btn-ghost"
             variant="flat"
-            height="44"
             @click="deleteDialog = false"
-            >Cancel</v-btn
           >
+            Cancel
+          </v-btn>
           <v-btn
-            class="text-none action-submit"
+            class="text-none screen-btn-primary"
             variant="flat"
-            height="44"
             :loading="deleting"
             @click="deleteUser"
-            >Delete</v-btn
           >
+            Delete
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -527,6 +651,13 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  // Which organisation the access this enrolment grants belongs to. Saving now
+  // assigns the person to the reader, and the assignment is stored per
+  // organisation - see `schemaCreateHidAmicoIdentity`.
+  org: {
+    type: String,
+    default: "",
+  },
   cardManagement: {
     type: Boolean,
     default: false,
@@ -547,11 +678,13 @@ const {
   getUserPinStatus,
   setUserPin,
   deleteUserPin,
+  getUserPasswordStatus,
+  setUserPassword,
+  deleteUserPassword,
   runObjectOperation,
   createIdentity,
   updateIdentity,
   deleteIdentity,
-  getPermissionCandidates,
 } = useHidAmico();
 
 type HidMetadata = Record<string, unknown> & {
@@ -566,6 +699,7 @@ type HidMetadata = Record<string, unknown> & {
   lastAccessAt?: string;
   facialScores?: Record<string, unknown>;
   pinEnrolled?: boolean;
+  passwordSet?: boolean;
   hidPhysicalCards?: HidCard[];
 };
 
@@ -616,6 +750,7 @@ type HidIdentityPayload = Record<string, unknown> & {
 const readers = ref<HidReader[]>([]);
 const users = ref<HidUser[]>([]);
 const administratorUserIds = ref<Set<number>>(new Set());
+const { selectHidReader, resolveForSite } = useHidReaderSelection();
 const selectedReaderId = ref("");
 const search = ref("");
 const status = ref("");
@@ -639,7 +774,14 @@ const physicalCardErrorsByUserId = ref<Record<string, string>>({});
 const loadingCards = ref(false);
 const savingCard = ref(false);
 const enrollingCard = ref(false);
+/*
+ * Cancelling makes the in-flight enrol REJECT, and that rejection is expected
+ * rather than a failure. Without this flag the cancel raises an error toast on
+ * top of the one confirming it, which reads as the cancel having gone wrong.
+ */
 const cardEnrollmentCancelled = ref(false);
+/** The cancel's own round trip to the reader — a second or two, not the enrol's. */
+const cancellingCard = ref(false);
 const deletingCardId = ref("");
 const showPin = ref(false);
 const pinEnrolled = ref(false);
@@ -661,13 +803,61 @@ function hasFacialEnrollment(user?: HidUser | null) {
     user?.metadata?.imageTimestamp
   );
 }
+
+/**
+ * The reader's own reference for the enrolled face, shown while editing.
+ *
+ * We hold neither the image nor the biometric template - the reader does - so
+ * this value is the only handle on the enrollment there is. `getFacialData` is
+ * the roster's Facial Data column, reused here so the dialog and the table
+ * cannot disagree; it answers "N/A" when there is nothing, which is the case
+ * this must not draw a row for.
+ */
+const editFacialData = computed(() => {
+  if (!selectedUser.value) return "";
+  const value = String(getFacialData(selectedUser.value) ?? "").trim();
+  return value && value !== "N/A" ? value : "";
+});
 const removePinRequested = ref(false);
+const passwordSet = ref(false);
+const showPassword = ref(false);
+const removePasswordRequested = ref(false);
 const snackbar = reactive({
   show: false,
   color: "success",
   message: "",
 });
 
+type OccupiedUnit = { _id: string; name: string; people: number };
+type OccupiedLevel = { _id: string; name: string; units?: OccupiedUnit[] };
+type OccupiedBlock = {
+  _id: string;
+  name: string;
+  block: number | null;
+  levels?: OccupiedLevel[];
+};
+type UnitPerson = {
+  _id: string;
+  name?: string;
+  unitName?: string;
+  /**
+   * The resident's app account, and the reason this field is read here.
+   *
+   * A HID identity is refused unless its subject is a valid permission subject
+   * at the site, and for a resident that means a `site.people` row WITH a
+   * linked user - `assertPermissionSubject` in `iservice365-core` filters on
+   * exactly this field. The permission model has no way to represent anyone
+   * else: `resolvePermissionUserBindings` binds reader access by user id and
+   * drops every row without one, so a resident enrolled without an account
+   * would end up on the reader holding no access rules at all.
+   *
+   * The picker this replaced was fed by that same server-side function, so it
+   * could never offer an unenrollable resident. The unit cascade asks People
+   * Management instead, which has no such filter - hence this one.
+   */
+  user?: string | null;
+};
+
 const form = reactive({
   reader: "",
   block: "",
@@ -678,6 +868,7 @@ const form = reactive({
   registration: "",
   isAdministrator: false,
   accessPin: "",
+  password: "",
   photoPreview: "",
   subjectCategory: "resident" as THidPermissionCategory,
   subjectId: "",
@@ -685,18 +876,131 @@ const form = reactive({
 
 const route = useRoute();
 const orgId = computed(() => String(route.params.org || ""));
-const permissionCandidates = ref<THidPermissionCandidate[]>([]);
-const loadingSubjects = ref(false);
-const subjectCategoryOptions = [
-  { title: "Resident", value: "resident" },
-  { title: "Property management", value: "property_management" },
-  { title: "Service provider", value: "service_provider" },
-];
-const subjectOptions = computed(() => permissionCandidates.value.map((candidate) => ({
-  title: candidate.subtitle ? `${candidate.name} · ${candidate.subtitle}` : candidate.name,
-  value: candidate.subjectId,
+
+// The cascade runs on People Management's own endpoints, the same pair the
+// resident forms use:
+//   GET /api/people/site/:site/occupied-structure  - blocks/levels/units that
+//        actually have an occupant, so the picker cannot offer an empty unit
+//   GET /api/people/unit/:unit                     - who is in the chosen one
+// Both are fetched on FIRST USE, never when the dialog opens.
+const { getOccupiedStructure, getPeopleByUnit } = usePeople();
+
+// `resident,tenant` matches the occupancy endpoint's own default, so the units
+// it offers and the people this returns are the same set. Asking the two
+// halves different questions is how a unit ends up offered but empty.
+const OCCUPANT_TYPES = "resident,tenant";
+
+const occupiedBlocks = ref<OccupiedBlock[]>([]);
+const occupancyLoaded = ref(false);
+const loadingOccupancy = ref(false);
+const unitPeople = ref<UnitPerson[]>([]);
+const loadingUnitPeople = ref(false);
+
+// "Is this resident already enrolled on THIS reader?" - the reader keeps its own
+// user table, so the same person at a different gate is normal and does not
+// count. Held here rather than derived, because it is the answer to a request.
+//
+// The server refuses the duplicate as well (`createIdentity` in
+// `iservice365-core`), but by the time it answers, `saveUser` has already
+// created a user on the physical device and has to roll it back. Asking here
+// keeps that off the reader entirely.
+const residentConflict = ref<HidUser | null>(null);
+const checkingResident = ref(false);
+
+// One spelling of a block, used by the picker and by the label stamped onto the
+// record. Two copies of this expression is how the dropdown and the Unit column
+// drift apart.
+function formatBlockTitle(block?: OccupiedBlock | null) {
+  if (!block) return "";
+  return block.name
+    ? `Block ${block.block} (${block.name})`
+    : `Block ${block.block ?? ""}`.trim();
+}
+
+const blockOptions = computed(() => occupiedBlocks.value.map((block) => ({
+  title: formatBlockTitle(block),
+  value: String(block._id ?? ""),
 })));
 
+const levelOptions = computed(() => {
+  const block = occupiedBlocks.value.find((item) => String(item._id ?? "") === form.block);
+  return (block?.levels ?? []).map((level) => ({
+    title: String(level.name ?? ""),
+    value: String(level._id ?? ""),
+  }));
+});
+
+const unitOptions = computed(() => {
+  const block = occupiedBlocks.value.find((item) => String(item._id ?? "") === form.block);
+  const level = (block?.levels ?? []).find((item) => String(item._id ?? "") === form.level);
+  return (level?.units ?? []).map((unit) => ({
+    title: String(unit.name ?? ""),
+    value: String(unit._id ?? ""),
+  }));
+});
+
+// Only the residents the server will actually accept - see `UnitPerson.user`.
+// Offering the rest produced "The linked HID identity subject is not active at
+// this site." at the very end of enrollment, after a user had already been
+// written to the reader.
+const enrollableUnitPeople = computed(() =>
+  unitPeople.value.filter((person) => Boolean(person.user)),
+);
+
+const unenrollableUnitPeopleCount = computed(
+  () => unitPeople.value.length - enrollableUnitPeople.value.length,
+);
+
+// `_id` here is `site.people._id`, which is exactly the `person` that
+// `createIdentity` maps a HID user to.
+const subjectOptions = computed(() => enrollableUnitPeople.value.map((person) => ({
+  title: String(person.name ?? "Resident"),
+  value: String(person._id ?? ""),
+})));
+
+// Says why somebody the operator can see in People Management is missing here.
+// Without it the unit just looks empty and the screen looks broken.
+const unitResidentNote = computed(() => {
+  if (!form.unit || loadingUnitPeople.value || !unenrollableUnitPeopleCount.value) return "";
+  const count = unenrollableUnitPeopleCount.value;
+  const subject = count === 1 ? "1 resident" : `${count} residents`;
+  const verb = count === 1 ? "is" : "are";
+  return `${subject} in this unit ${verb} not listed: HID enrollment needs a resident app account, and ${count === 1 ? "that person has" : "they have"} none yet.`;
+});
+
+const blockPlaceholder = computed(() => {
+  if (loadingOccupancy.value) return "Loading...";
+  if (occupancyLoaded.value && !blockOptions.value.length) {
+    return "No occupied units at this site";
+  }
+  return "Select block";
+});
+
+const unitResidentPlaceholder = computed(() => {
+  if (!form.unit) return "Select a unit first";
+  if (loadingUnitPeople.value) return "Loading residents...";
+  if (enrollableUnitPeople.value.length) return "Select a resident";
+  // The two empty cases are different problems with different fixes, so they
+  // do not share a sentence: nobody lives here, versus nobody here can be
+  // enrolled yet. `unitResidentNote` carries the detail for the second.
+  return unitPeople.value.length
+    ? "No resident here can be enrolled yet"
+    : "No residents in this unit";
+});
+
+// Names the HID user that is in the way, so the operator can go and edit it
+// rather than being told only that something is wrong.
+const residentConflictMessage = computed(() => {
+  const conflict = residentConflict.value;
+  if (!conflict) return "";
+  const label = [getName(conflict), formatHidUid(conflict.hidUserId)]
+    .filter(Boolean)
+    .join(" · ");
+  return label
+    ? `Already enrolled on this reader as ${label}. Edit that HID user instead of enrolling again.`
+    : "Already enrolled on this reader. Edit that HID user instead of enrolling again.";
+});
+
 const cardForm = reactive({
   cardType: "pacs" as "pacs" | "csn",
   facilityCode: "",
@@ -738,6 +1042,8 @@ const userHeaders = [
   { title: "Name", value: "name", sortable: false },
   { title: "Facial Data", value: "facialData", sortable: false },
   { title: "UID", value: "hidUserId", sortable: false },
+  // Reads in the same order the dialog asks for them: UID then registration.
+  { title: "Registration No.", value: "registration", sortable: false },
   { title: "Status", value: "status", sortable: false },
   { title: "", value: "action-table", sortable: false },
 ];
@@ -767,6 +1073,32 @@ function reloadUsersFromFirstPage() {
   loadUsers();
 }
 
+/**
+ * Typing is the search.
+ *
+ * The field used to reload on `@keyup.enter` and on nothing else, so a screen
+ * that looks like every other search box did nothing at all unless you guessed
+ * that Enter was required - no request left the browser.
+ *
+ * Debounced, because each reload is a login/load/logout round trip to a reader
+ * over a VPN, not a database query. Enter still works and skips the wait.
+ */
+const SEARCH_DEBOUNCE_MS = 400;
+let searchDebounce: ReturnType<typeof setTimeout> | undefined;
+
+function onSearchInput() {
+  clearTimeout(searchDebounce);
+  searchDebounce = setTimeout(reloadUsersFromFirstPage, SEARCH_DEBOUNCE_MS);
+}
+
+function onSearchSubmit() {
+  clearTimeout(searchDebounce);
+  reloadUsersFromFirstPage();
+}
+
+watch(search, onSearchInput);
+onBeforeUnmount(() => clearTimeout(searchDebounce));
+
 const readerOptions = computed(() =>
   readers.value.map((reader) => ({
     title: `${reader.name || reader.deviceId || reader._id} — ${reader.portalName || "Portal not configured"}`,
@@ -805,11 +1137,23 @@ async function loadReaders() {
   readers.value = (Array.isArray(items) ? items : [])
     .map(toHidReader)
     .filter((reader): reader is HidReader => reader !== null);
-  if (!selectedReaderId.value && readers.value.length) {
-    selectedReaderId.value = readers.value[0]._id;
-  }
+  /* Shared with every other HID screen — see `useHidReaderSelection`. The
+     resolver refuses a remembered reader that is not this site's, so a site
+     switch or a deleted reader falls back to the first rather than querying
+     an id the site does not own. */
+  selectedReaderId.value = resolveForSite(props.site, readers.value);
 }
 
+/**
+ * Discards a load whose answer arrives after a newer one started.
+ *
+ * Each reload is a slow round trip to a reader over a VPN, and typing now fires
+ * them, so "abc" can have three in flight at once. Without this the reply to
+ * "a" can land last and repopulate the table with the wrong rows. Same monotonic
+ * counter `HidAccessLogDashboard` uses.
+ */
+const loadUsersSequence = ref(0);
+
 async function loadUsers() {
   if (!selectedReaderId.value) {
     users.value = [];
@@ -819,18 +1163,54 @@ async function loadUsers() {
     return;
   }
 
+  const sequence = loadUsersSequence.value + 1;
+  loadUsersSequence.value = sequence;
   loading.value = true;
   try {
-    const response = await getReaderUsers(selectedReaderId.value, {
-      page: page.value,
-      limit: limit.value,
-      search: search.value.trim(),
-      status: status.value.toLowerCase() as "mapped" | "unmapped" | "",
-    });
+    // `userType: "user"` is REQUIRED here, not a nicety. The reader keeps
+    // visitors in the same `users` table, marked `user_type_id = 1`, and the
+    // API's default is `all`. Visitor rows are written by our own visitor-QR
+    // issuance and are never removed - revoke only pushes `end_time` into the
+    // past - so without this filter the enrollment roster counts every visitor
+    // pass ever issued and drifts further from the reader's own Users screen
+    // with each one. This screen enrolls and edits real people; visitors are
+    // owned by the visitor module.
+    let clientFiltersVisitors = false;
+    let response: unknown;
+    try {
+      response = await getReaderUsers(selectedReaderId.value, {
+        page: page.value,
+        limit: limit.value,
+        search: search.value.trim(),
+        status: status.value.toLowerCase() as "mapped" | "unmapped" | "",
+        userType: "user",
+      });
+    } catch (error: unknown) {
+      if (!isUnsupportedUserTypeFilter(error)) throw error;
+
+      // A deployed API can lag behind this shared layer. Keep the roster
+      // correct on one that has not added `userType` yet, the same way
+      // HidReaderUserRoster does, rather than failing the whole screen.
+      clientFiltersVisitors = true;
+      response = await getReaderUsers(selectedReaderId.value, {
+        page: 1,
+        limit: 100,
+        search: search.value.trim(),
+        status: status.value.toLowerCase() as "mapped" | "unmapped" | "",
+      });
+    }
     const responseRecord = toRecord(response);
     const responseData = toRecord(responseRecord.data);
     const responseItems = responseRecord.items ?? responseData.items ?? [];
-    const pageItems = (Array.isArray(responseItems) ? responseItems : []).map(toHidUser);
+    const allItems = (Array.isArray(responseItems) ? responseItems : []).map(toHidUser);
+    const matchingItems = clientFiltersVisitors
+      ? allItems.filter((user) => !isVisitorUser(user))
+      : allItems;
+    const pageStart = (page.value - 1) * limit.value;
+    const pageItems = clientFiltersVisitors
+      ? matchingItems.slice(pageStart, pageStart + limit.value)
+      : matchingItems;
+    if (sequence !== loadUsersSequence.value) return;
     administratorUserIds.value = new Set(
       pageItems
         .filter((user) => user.isAdministrator === true)
@@ -838,13 +1218,22 @@ async function loadUsers() {
         .filter((userId: number | undefined): userId is number => Boolean(userId)),
     );
     users.value = pageItems;
-    total.value = Number(responseRecord.total ?? responseData.total ?? users.value.length);
-    pages.value = Number(responseRecord.pages ?? responseData.pages ?? 1);
-    serverPageRange.value = String(responseRecord.pageRange ?? responseData.pageRange ?? "");
+    total.value = clientFiltersVisitors
+      ? matchingItems.length
+      : Number(responseRecord.total ?? responseData.total ?? users.value.length);
+    pages.value = clientFiltersVisitors
+      ? Math.max(1, Math.ceil(total.value / limit.value))
+      : Number(responseRecord.pages ?? responseData.pages ?? 1);
+    // The server's `pageRange` counts the unfiltered page, so it cannot be
+    // trusted once this screen has done the filtering itself.
+    serverPageRange.value = clientFiltersVisitors
+      ? ""
+      : String(responseRecord.pageRange ?? responseData.pageRange ?? "");
     if (props.cardManagement) {
       await loadVisibleUserCards(users.value);
     }
   } catch (error) {
+    if (sequence !== loadUsersSequence.value) return;
     console.error("Unable to load HID reader users:", error);
     showToast("Unable to load HID users from reader.", "error");
     users.value = [];
@@ -855,7 +1244,9 @@ async function loadUsers() {
     pages.value = 1;
     serverPageRange.value = "";
   } finally {
-    loading.value = false;
+    // Only the newest load owns the spinner; an older one finishing must not
+    // clear it while that newer one is still running.
+    if (sequence === loadUsersSequence.value) loading.value = false;
   }
 }
 
@@ -870,6 +1261,10 @@ function resetForm() {
   form.registration = "";
   form.isAdministrator = false;
   form.accessPin = "";
+  form.password = "";
+  passwordSet.value = false;
+  showPassword.value = false;
+  removePasswordRequested.value = false;
   pinEnrolled.value = false;
   showPin.value = false;
   removePinRequested.value = false;
@@ -879,32 +1274,165 @@ function resetForm() {
   facialEnrolled.value = false;
   form.subjectCategory = "resident";
   form.subjectId = "";
+  residentConflict.value = null;
+  checkingResident.value = false;
 }
 
-async function loadSubjectCandidates() {
-  const readerId = form.reader || selectedReaderId.value;
-  if (!readerId || !orgId.value) {
-    permissionCandidates.value = [];
-    return;
+
+/** Surface what the API actually said - a bare "unable to load" hides the
+ *  difference between a permission refusal, a bad id and a server fault. */
+function apiReason(error: unknown) {
+  const record = toRecord(error);
+  const data = toRecord(record.data);
+  return toText(data.message) || toText(record.message) || toText(record.statusMessage);
+}
+
+// Called when the Block select is first touched, not when the dialog opens.
+async function ensureOccupancy() {
+  if (!props.site || occupancyLoaded.value || loadingOccupancy.value) return;
+  loadingOccupancy.value = true;
+  try {
+    const response = toRecord(await getOccupiedStructure(props.site, {
+      type: OCCUPANT_TYPES,
+      status: "active",
+    }));
+    const data = toRecord(response.data);
+    const blocks = response.blocks ?? data.blocks ?? [];
+    occupiedBlocks.value = (Array.isArray(blocks) ? blocks : []) as OccupiedBlock[];
+    occupancyLoaded.value = true;
+  } catch (error: unknown) {
+    console.error("Unable to load occupied units:", error);
+    occupiedBlocks.value = [];
+    const reason = apiReason(error);
+    showToast(
+      reason ? `Unable to load units: ${reason}` : "Unable to load units for this site.",
+      "error",
+    );
+  } finally {
+    loadingOccupancy.value = false;
   }
-  loadingSubjects.value = true;
+}
+
+async function loadUnitPeople() {
+  unitPeople.value = [];
+  if (!form.unit) return;
+  loadingUnitPeople.value = true;
   try {
-    const response = await getPermissionCandidates(props.site, {
-      orgId: orgId.value,
-      readerId,
-      category: form.subjectCategory,
-      page: 1,
-      limit: 500,
+    const response = await getPeopleByUnit(form.unit, {
+      status: "active",
+      type: OCCUPANT_TYPES,
     });
-    permissionCandidates.value = response.items ?? response.data?.items ?? [];
+    const record = toRecord(response);
+    const rows = Array.isArray(response)
+      ? response
+      : record.data ?? record.items ?? [];
+    unitPeople.value = (Array.isArray(rows) ? rows : []) as UnitPerson[];
+  } catch (error: unknown) {
+    console.error("Unable to load residents for the unit:", error);
+    const reason = apiReason(error);
+    showToast(
+      reason ? `Unable to load residents: ${reason}` : "Unable to load residents for this unit.",
+      "error",
+    );
   } finally {
-    loadingSubjects.value = false;
+    loadingUnitPeople.value = false;
   }
 }
 
-async function onSubjectCategoryChanged() {
+function onBlockChanged() {
+  form.level = "";
+  form.unit = "";
+  unitPeople.value = [];
+  clearResidentSelection();
+}
+
+// Wrapper `@click`/`@focusin` on the Block select: load once, on first touch.
+async function onBlockOpened() {
+  await ensureOccupancy();
+}
+
+function onLevelChanged() {
+  form.unit = "";
+  unitPeople.value = [];
+  clearResidentSelection();
+}
+
+async function onUnitChanged() {
+  clearResidentSelection();
+  await loadUnitPeople();
+}
+
+function clearResidentSelection() {
   form.subjectId = "";
-  await loadSubjectCandidates();
+  residentConflict.value = null;
+  // Name only ever mirrors a chosen resident, so it clears with the choice.
+  if (!selectedUser.value) form.name = "";
+}
+
+// The auto-fill the whole cascade exists for.
+async function onResidentChanged() {
+  const person = unitPeople.value.find(
+    (item) => String(item._id) === String(form.subjectId),
+  );
+  form.name = String(person?.name ?? "");
+  await checkResidentEnrollment();
+}
+
+/**
+ * The HID user this resident already holds on the selected reader, or null.
+ *
+ * `subject`, not `person`. The same resident is stored under different ids
+ * depending on which screen wrote the row - the permissions screen keys on
+ * their user account, this screen on the record the picker offered - so a
+ * filter on one field alone reports "not enrolled" for somebody who plainly is.
+ * `subject` follows the record to its account and matches every link field,
+ * which is exactly what the server does before it accepts an enrollment.
+ *
+ * Reader-scoped by the endpoint itself.
+ */
+async function findResidentIdentity(readerId: string, personId: string) {
+  const response = await getIdentities(readerId, {
+    page: 1,
+    // A resident should hold at most one, but ask for a few: on the edit screen
+    // the first row back can be the very identity being edited, and skipping it
+    // must not hide a real second one behind it.
+    limit: 10,
+    subject: personId,
+  });
+  const responseRecord = toRecord(response);
+  const responseData = toRecord(responseRecord.data);
+  const responseItems =
+    responseRecord.items ?? responseData.items ?? responseData.identities ?? [];
+  const identities = (Array.isArray(responseItems) ? responseItems : []).map(toHidUser);
+  const editingId = String(selectedUser.value?._id ?? "");
+
+  return (
+    identities.find((identity) => !editingId || String(identity._id ?? "") !== editingId) ?? null
+  );
+}
+
+/**
+ * Sets `residentConflict` for the currently selected resident.
+ *
+ * Fails OPEN: if the lookup itself errors the operator is not blocked, because
+ * the server refuses the duplicate anyway. This is a courtesy check that keeps
+ * a doomed enrollment off the physical reader, not the guard itself.
+ */
+async function checkResidentEnrollment() {
+  residentConflict.value = null;
+  const readerId = selectedReaderId.value || form.reader || readers.value[0]?._id;
+  if (!readerId || !form.subjectId || form.subjectCategory !== "resident") return null;
+
+  checkingResident.value = true;
+  try {
+    residentConflict.value = await findResidentIdentity(readerId, form.subjectId);
+    return residentConflict.value;
+  } catch (error: unknown) {
+    console.error("Unable to check whether this resident is already enrolled:", error);
+    return null;
+  } finally {
+    checkingResident.value = false;
+  }
 }
 
 async function openEnroll() {
@@ -916,7 +1444,6 @@ async function openEnroll() {
   ]);
   form.hidUserId = hidUserId;
   form.registration = registration;
-  await loadSubjectCandidates();
   formDialog.value = true;
 }
 
@@ -931,6 +1458,10 @@ async function openEdit(user: HidUser) {
   form.registration = user.registration ?? "";
   form.isAdministrator = hasAdministratorRule(user);
   form.accessPin = "";
+  form.password = "";
+  showPassword.value = false;
+  removePasswordRequested.value = false;
+  passwordSet.value = Boolean(user.metadata?.passwordSet);
   pinEnrolled.value = Boolean(user.metadata?.pinEnrolled);
   removePinRequested.value = false;
   form.photoPreview = "";
@@ -941,17 +1472,31 @@ async function openEdit(user: HidUser) {
       ? "service_provider"
       : "property_management";
   form.subjectId = String(user.person || user.member || user.serviceProvider || "");
-  await loadSubjectCandidates();
+  // The resident this user already holds is not a conflict with itself. A real
+  // one only appears if the operator reassigns the row to somebody else.
+  residentConflict.value = null;
+  // The location is not drawn when editing, but it is still carried: these
+  // three form fields are what `saveUser` writes back and what `buildUnitLabel`
+  // resolves into the Unit column, so a save must not blank them.
+  //
+  // `ensureOccupancy` is what lets `buildUnitLabel` turn them back into names.
+  // The unit's residents are loaded too, because the Resident select IS drawn
+  // here and its options come from that list - without it the select shows the
+  // stored id instead of a name.
+  await ensureOccupancy();
+  if (form.unit) await loadUnitPeople();
   selectedPhotoFile.value = null;
   removePhotoRequested.value = false;
   formDialog.value = true;
 
   try {
-    const status = await getUserPinStatus(
-      form.reader,
-      toHidNumericId(user.hidUserId),
-    );
-    pinEnrolled.value = Boolean(status?.data?.pinEnrolled);
+    const hidUserId = toHidNumericId(user.hidUserId);
+    const [pinStatus, passwordStatus] = await Promise.all([
+      getUserPinStatus(form.reader, hidUserId),
+      getUserPasswordStatus(form.reader, hidUserId),
+    ]);
+    pinEnrolled.value = Boolean(pinStatus?.data?.pinEnrolled);
+    passwordSet.value = Boolean(passwordStatus?.data?.passwordSet);
   } catch {
     // Preserve the last known status if the reader is temporarily offline.
   }
@@ -1030,12 +1575,28 @@ function onPhotoChange(event: Event) {
 async function saveUser() {
   const readerId =
     selectedReaderId.value || form.reader || readers.value[0]?._id;
-  if (!readerId || !form.name || !form.hidUserId || !form.registration || !form.subjectId) {
-    showToast("Please complete the required HID user fields.", "error");
+  // A resident is required to ENROL, because an identity has to be linked to
+  // somebody. It is not required to edit: the reader holds users we never
+  // enrolled, and changing a photo, a PIN or a password on one of those is a
+  // reader-side operation that has nothing to say about who they are. Demanding
+  // a resident there refuses a save for a field the dialog does not even draw.
+  const missing = !readerId
+    ? "a reader"
+    : !selectedUser.value && !form.subjectId
+      ? "a resident"
+      : !form.name
+        ? "a name"
+        : !form.hidUserId
+          ? "an ID"
+          : !form.registration
+            ? "a registration number"
+            : "";
+  if (missing) {
+    showToast(`This HID user needs ${missing} before it can be saved.`, "error");
     return;
   }
   if (form.accessPin && !/^\d{1,32}$/.test(form.accessPin)) {
-    showToast("Access PIN must contain numbers only.", "error");
+    showToast("PIN must contain numbers only.", "error");
     return;
   }
   if (selectedPhotoFile.value && (!selectedReader.value?.portalId || !selectedReader.value?.portalName)) {
@@ -1043,6 +1604,16 @@ async function saveUser() {
     return;
   }
 
+  // Re-asked here, not trusted from the select: the dialog can sit open while
+  // somebody else enrolls the same resident, and the reader is only ever
+  // written to below this line. A duplicate caught here costs one request; the
+  // same duplicate caught by the server costs a created HID user and a rollback.
+  const alreadyEnrolled = await checkResidentEnrollment();
+  if (alreadyEnrolled) {
+    showToast(residentConflictMessage.value, "error");
+    return;
+  }
+
   saving.value = true;
   let newlyCreatedHidUserId: number | undefined;
   try {
@@ -1056,22 +1627,33 @@ async function saveUser() {
       return;
     }
 
+    // The link is sent only when the form actually holds one. Sending
+    // `person: ""` is not "leave it alone", it is "clear it": the server reads
+    // an empty string as a link being removed and then refuses the write for
+    // having no subject at all. Omitting the keys is what makes it keep the
+    // subject the record already has.
+    const subjectLink = form.subjectId
+      ? {
+        person: form.subjectCategory === "resident" ? form.subjectId : "",
+        member: form.subjectCategory === "property_management" ? form.subjectId : "",
+        serviceProvider: form.subjectCategory === "service_provider" ? form.subjectId : "",
+        type: (form.subjectCategory === "resident"
+          ? "resident"
+          : form.subjectCategory === "service_provider"
+            ? "contractor"
+            : "staff") as
+          | "resident"
+          | "staff"
+          | "contractor"
+          | "visitor"
+          | "unknown",
+      }
+      : {};
+
     const payload = {
       hidUserId: String(hidUser.id),
       registration: form.registration,
-      person: form.subjectCategory === "resident" ? form.subjectId : "",
-      member: form.subjectCategory === "property_management" ? form.subjectId : "",
-      serviceProvider: form.subjectCategory === "service_provider" ? form.subjectId : "",
-      type: (form.subjectCategory === "resident"
-        ? "resident"
-        : form.subjectCategory === "service_provider"
-          ? "contractor"
-          : "staff") as
-        | "resident"
-        | "staff"
-        | "contractor"
-        | "visitor"
-        | "unknown",
+      ...subjectLink,
       status: "active" as const,
       metadata: {
         name: form.name,
@@ -1088,6 +1670,7 @@ async function saveUser() {
         imageTimestamp: selectedUser.value?.metadata?.imageTimestamp || "",
         facialScores: selectedUser.value?.metadata?.facialScores || {},
         pinEnrolled: pinEnrolled.value,
+        passwordSet: passwordSet.value,
         hidPhysicalCards: selectedUser.value?.metadata?.hidPhysicalCards || [],
       },
     };
@@ -1097,17 +1680,22 @@ async function saveUser() {
       const facialResult = await syncFacialImage(readerId, hidUser.id);
       applyFacialResult(payload.metadata, facialResult);
       payload.metadata.pinEnrolled = await syncAccessPin(readerId, hidUser.id);
+      payload.metadata.passwordSet = await syncPassword(readerId, hidUser.id);
       if (selectedUser.value._id) {
         await updateIdentity(selectedUser.value._id, payload);
-      } else {
+      } else if (form.subjectId) {
         await saveIdentityOnReader(readerId, payload);
       }
+      // else: a user the reader holds and we have never linked. The photo, PIN
+      // and password above are already on the device; creating an identity for
+      // it would need a subject we deliberately no longer ask for here.
     } else {
       const created = await createHidUserOnReader(readerId, hidUser);
       if (created) newlyCreatedHidUserId = hidUser.id;
       const facialResult = await syncFacialImage(readerId, hidUser.id);
       applyFacialResult(payload.metadata, facialResult);
       payload.metadata.pinEnrolled = await syncAccessPin(readerId, hidUser.id);
+      payload.metadata.passwordSet = await syncPassword(readerId, hidUser.id);
       await saveIdentityOnReader(readerId, payload);
       selectedReaderId.value = readerId;
     }
@@ -1143,6 +1731,25 @@ async function saveUser() {
   }
 }
 
+async function syncPassword(readerId: string, hidUserId: number) {
+  // Mirrors syncAccessPin. Removal wins over a typed value, and a blank field
+  // means "leave whatever is on the reader alone" - the hash cannot be read
+  // back, so blank can never mean "clear it".
+  if (removePasswordRequested.value) {
+    await deleteUserPassword(readerId, hidUserId);
+    passwordSet.value = false;
+    form.password = "";
+    return false;
+  }
+  if (form.password) {
+    await setUserPassword(readerId, hidUserId, form.password);
+    form.password = "";
+    passwordSet.value = true;
+    return true;
+  }
+  return passwordSet.value;
+}
+
 async function syncAccessPin(readerId: string, hidUserId: number) {
   if (removePinRequested.value) {
     await deleteUserPin(readerId, hidUserId);
@@ -1253,7 +1860,7 @@ async function saveIdentityOnReader(
   }
 
   try {
-    await createIdentity(readerId, { ...payload, site: props.site });
+    await createIdentity(readerId, { ...payload, site: props.site, ...(props.org ? { orgId: props.org } : {}) });
   } catch (error: unknown) {
     const message = getHidErrorMessage(error);
     if (!message.toLowerCase().includes("already exists")) throw error;
@@ -1447,6 +2054,21 @@ function toHidUserObject(identity: Pick<HidUser, "hidUserId" | "name" | "registr
   };
 }
 
+function isVisitorUser(user: HidUser) {
+  // The reader marks visitors with `user_type_id = 1`; a real user leaves the
+  // field null. `metadata.hidUserTypeId` is what our API forwards it as.
+  return Number(user.metadata?.hidUserTypeId ?? user.user_type_id) === 1;
+}
+
+function isUnsupportedUserTypeFilter(error: unknown) {
+  const record = toRecord(error);
+  const data = toRecord(record.data);
+  const message = toText(data.message) || toText(record.message);
+  const normalized = message.toLowerCase();
+  return normalized.includes("usertype")
+    && (normalized.includes("not allowed") || normalized.includes("unknown"));
+}
+
 function toHidNumericId(value: unknown) {
   const raw = String(value ?? "").trim();
   if (!raw) return undefined;
@@ -1585,6 +2207,14 @@ async function assignPhysicalCard() {
   }
 }
 
+/**
+ * Read a physical card by presenting it to the reader.
+ *
+ * The way most cards get assigned, because it is the only one that does not
+ * require knowing the facility code and card number in advance - neither is
+ * printed on the card, and an operator holding a blank fob has no way to look
+ * them up. The reader listens for 30 seconds and reports what it read.
+ */
 async function enrollPhysicalCard() {
   const { readerId, hidUserId } = getCardReaderAndUser();
   if (!readerId || !hidUserId) return;
@@ -1597,6 +2227,8 @@ async function enrollPhysicalCard() {
     await loadUsers();
     showToast("Physical HID card read and enrolled on the reader.");
   } catch (error: unknown) {
+    // Cancelling rejects the request above. That is the operator getting what
+    // they asked for, so it must not also be reported as a failure.
     if (!cardEnrollmentCancelled.value) {
       showToast(getHidErrorMessage(error), "error");
     }
@@ -1605,15 +2237,49 @@ async function enrollPhysicalCard() {
   }
 }
 
+/**
+ * Stop the reader listening.
+ *
+ * Told to the DEVICE, not just the screen: abandoning the request on this side
+ * would leave the reader waiting out its 30 seconds and enrolling whatever card
+ * was presented in the meantime.
+ */
+/**
+ * Stop the reader listening, and hand the dialog straight back.
+ *
+ * Told to the DEVICE, not just the screen: abandoning the request on this side
+ * would leave the reader waiting out its remaining seconds and enrolling
+ * whatever card was presented in the meantime.
+ *
+ * The part worth understanding is what the ENROL request does next. The server
+ * cannot tell a cancelled read from a failed one - the reader simply reports no
+ * card - so the enrol that is still in flight ends as a 400, seconds after the
+ * cancel. Waiting for it was the bug: Cancel appeared to do nothing until that
+ * rejection finally arrived.
+ *
+ * So the dialog is released as soon as the DEVICE confirms it has stopped, and
+ * the doomed enrol is left to land on its own. `cardEnrollmentCancelled` is set
+ * before anything is awaited, which is what keeps its 400 silent.
+ */
 async function cancelPhysicalCardEnrollment() {
   const { readerId } = getCardReaderAndUser();
   if (!readerId) return;
+  // Set first, awaited second: the enrol can reject at any point from here.
   cardEnrollmentCancelled.value = true;
+  cancellingCard.value = true;
   try {
     await cancelUserCardEnrollment(readerId);
+    // Only now, because the enrollment lock is released by the call above.
+    // Re-enabling Read at Reader any earlier invites a second attempt that
+    // the reader refuses with "already running".
+    enrollingCard.value = false;
     showToast("Physical HID card reading cancelled.");
   } catch (error: unknown) {
+    // The cancel itself failing is real and worth saying: the reader may still
+    // be listening, so the dialog stays in its reading state.
     showToast(getHidErrorMessage(error), "error");
+  } finally {
+    cancellingCard.value = false;
   }
 }
 
@@ -1649,8 +2315,21 @@ function getPhysicalCardSubtitle(card: HidCard) {
 }
 
 function buildUnitLabel() {
-  const parts = [form.block, form.level, form.unit].filter(Boolean);
-  return parts.length ? `BLK ${parts.join("/")}` : "";
+  // `form.block/level/unit` hold ObjectIds, so the label has to resolve them
+  // back to names through the occupancy tree. Joining the raw values would
+  // stamp "665f.../665f.../665f..." onto the record and into the Unit column.
+  const block = occupiedBlocks.value.find((item) => String(item._id ?? "") === form.block);
+  const level = (block?.levels ?? []).find((item) => String(item._id ?? "") === form.level);
+  const unit = (level?.units ?? []).find((item) => String(item._id ?? "") === form.unit);
+  const parts = [
+    formatBlockTitle(block),
+    String(level?.name ?? ""),
+    String(unit?.name ?? ""),
+  ].filter(Boolean);
+  // Editing a record enrolled before the cascade existed: keep its stored
+  // label rather than blanking it.
+  if (!parts.length) return String(selectedUser.value?.metadata?.unitLabel ?? "");
+  return parts.join(" / ");
 }
 
 function getName(user?: HidUser | null) {
@@ -1901,6 +2580,12 @@ function toHidCard(value: unknown): HidCard {
     source: card.source === "reader" || card.source === "manual" || card.source === "device" ? card.source : undefined,
   };
 }
+
+/* Publish every change, including the seed above: a screen that had to fall
+   back to the first reader should leave the others agreeing with it. */
+watch(selectedReaderId, (value) => {
+  if (value) selectHidReader(props.site, value);
+});
 </script>
 
 <style scoped>
@@ -1937,12 +2622,6 @@ function toHidCard(value: unknown): HidCard {
   max-width: 320px;
 }
 
-.small-title {
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--text);
-}
-
 /* Was `#4f5a66` / `#e53935` - the same two greys on both themes. */
 .field-label {
   color: var(--text2);
@@ -1964,12 +2643,42 @@ function toHidCard(value: unknown): HidCard {
   line-height: 1.45;
 }
 
+/* Same line, saying the field is refused rather than explained. `--err` is the
+   token the required-field asterisk already uses. */
+.field-hint--error {
+  color: var(--err);
+}
+
 .photo-wrap {
   display: grid;
   place-items: center;
   margin-bottom: 14px;
 }
 
+.photo-facial {
+  margin: 10px 0 0;
+  text-align: center;
+}
+
+/* The same small muted word `.field-label` uses, so the caption reads as a
+   field label rather than as a second heading. */
+.photo-facial__label {
+  display: block;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.photo-facial__value {
+  display: block;
+  margin-top: 2px;
+  font-size: 13.5px;
+  font-weight: 500;
+  /* The reader's reference is a long unbroken number; let it wrap rather than
+     widen the dialog. */
+  word-break: break-all;
+}
+
 .photo-button {
   width: 120px;
   height: 120px;
@@ -2143,25 +2852,6 @@ function toHidCard(value: unknown): HidCard {
   color: var(--muted);
 }
 
-/* The split footer bar. The handoff does not draw one, so the SHAPE is the
-   screen's own; only the colours change - `#062d42` was a fixed navy that sat
-   on the dark card unchanged. Same treatment as panel 2. */
-.action-cancel,
-.action-submit {
-  flex: 1;
-  border-radius: 0;
-}
-
-.action-cancel {
-  background: var(--card);
-  color: var(--text2);
-}
-
-.action-submit {
-  background: var(--accent-strong);
-  color: var(--on-accent-strong);
-}
-
 @media (max-width: 960px) {
   .hid-user-filters :deep(.app-field),
   .hid-user-filters :deep(.app-select) {