@7365admin1/layer-common 4.82.0 → 4.82.1-staging.469

package/components/HidUserEnrollment.vue

@@ -25,7 +25,11 @@
          the old table card, so it stays above the shared one. -->
     <v-alert
       v-if="selectedReader"
-      :type="selectedReader.portalId && selectedReader.portalName ? 'info' : 'warning'"
+      :type="
+        selectedReader.portalId && selectedReader.portalName
+          ? 'info'
+          : 'warning'
+      "
       variant="tonal"
       density="compact"
       class="mb-4"
@@ -50,7 +54,9 @@
       @update:page="goToPage"
     >
       <template v-if="!props.cardManagement" #actions>
-        <AppButton icon="mdi-account-plus" @click="openEnroll">Enroll</AppButton>
+        <AppButton icon="mdi-account-plus" @click="openEnroll"
+          >Enroll</AppButton
+        >
       </template>
 
       <!-- The design puts filters on their own full-width row under the
@@ -67,8 +73,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"
@@ -93,7 +99,15 @@
       </template>
 
       <template #[`item.hidUserId`]="{ item }">
-        <span class="app-cell--num">{{ formatHidUid(item.hidUserId) || "N/A" }}</span>
+        <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
@@ -113,7 +127,10 @@
             {{ formatPhysicalCard(card) }}
           </span>
         </div>
-        <span v-else-if="getUserCardLoadError(item)" class="hid-card-load-error">
+        <span
+          v-else-if="getUserCardLoadError(item)"
+          class="hid-card-load-error"
+        >
           Unable to load
           <v-tooltip activator="parent" location="top">
             {{ getUserCardLoadError(item) }}
@@ -133,13 +150,20 @@
         </AppButton>
         <v-menu v-else>
           <template #activator="{ props: menuProps }">
-            <AppButton v-bind="menuProps" variant="row" icon="mdi-dots-vertical" />
+            <AppButton
+              v-bind="menuProps"
+              variant="row"
+              icon="mdi-dots-vertical"
+            />
           </template>
 
           <v-list density="compact" min-width="150">
             <v-list-item title="View" @click="openView(item)" />
             <v-list-item title="Edit" @click="openEdit(item)" />
-            <v-list-item title="Manage HID Cards" @click="openCardManager(item)" />
+            <v-list-item
+              title="Manage HID Cards"
+              @click="openCardManager(item)"
+            />
             <v-list-item
               title="Delete"
               class="text-error"
@@ -155,23 +179,31 @@
       <template #no-data>
         <div class="table-card__empty">
           <v-icon
-            :icon="props.cardManagement ? 'mdi-card-account-details-outline' : 'mdi-account-off-outline'"
+            :icon="
+              props.cardManagement
+                ? 'mdi-card-account-details-outline'
+                : 'mdi-account-off-outline'
+            "
             size="32"
           />
           <span>
-            {{ props.cardManagement ? "No HID users available for card assignment." : "No HID users enrolled yet." }}
+            {{
+              props.cardManagement
+                ? "No HID users available for card assignment."
+                : "No HID users enrolled yet."
+            }}
           </span>
         </div>
       </template>
     </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 +245,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,45 +263,197 @@
             />
           </div>
 
-          <div class="field-label">Name <span>*</span></div>
-          <AppField
-            v-model="form.name"
-            aria-label="Name"
-            placeholder="Enter name"
-            klass="mb-3"
-          />
-
-          <div class="field-label">Link To <span>*</span></div>
+          <!-- WHO IS BEING ENROLLED.
+               The write path has always carried three subject categories -
+               `subjectLink` below maps them onto `person`, `member` or
+               `serviceProvider` - but the form only ever offered residents.
+               Staff hold no unit, so choosing Member replaces the whole
+               block/level/unit cascade with a single picker.
+               Enrolment only: an identity's subject cannot change category
+               after the fact, so an edit STATES the type rather than offering
+               it. -->
+          <div class="field-label">Enrolling <span>*</span></div>
           <AppSelect
+            v-if="!selectedUser"
             v-model="form.subjectCategory"
             :items="subjectCategoryOptions"
-            placeholder="Select person type"
             klass="mb-3"
             @update:model-value="onSubjectCategoryChanged"
           />
+          <p v-else class="field-hint mb-3">{{ subjectCategoryLabel }}</p>
+
+          <!-- 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 && isResidentSubject">
+            <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">Resident / Staff / Provider <span>*</span></div>
-          <AppSelect
-            v-model="form.subjectId"
-            :items="subjectOptions"
-            :loading="loadingSubjects"
-            placeholder="Select an existing site record"
+            <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="isResidentSubject && (!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>
+
+          <!-- STAFF. One picker, because a member has no unit to narrow by.
+               The candidates are the permission subjects the Access Permissions
+               screen already reads - active members of this site or its
+               organisation, each carrying its role as a subtitle. Filtering is
+               AppSelect's own, over the loaded page, so typing costs no request.
+               A member with no app account is not in the list at all: reader
+               access is bound by user id, so there is nothing to bind. The note
+               below says how many were left out rather than letting a missing
+               colleague read as a bug. -->
+          <template v-if="!selectedUser && !isResidentSubject">
+            <div class="field-label">Member <span>*</span></div>
+            <AppSelect
+              v-model="form.subjectId"
+              :items="memberOptions"
+              searchable
+              search-placeholder="Search staff by name or role"
+              :placeholder="memberPlaceholder"
+              :has-more="hasMoreMembers"
+              :loading-more="loadingMoreMembers"
+              klass="mb-3"
+              @update:model-value="onMemberChanged"
+              @load-more="loadMoreMembers"
+            />
+            <!-- Ten at a time, because that page size shares the Members
+                 menu's cache entry. The rest arrive as the list is scrolled, so
+                 this only has to SAY where the list has got to - and warn that
+                 the search box filters what is loaded, not the whole estate. -->
+            <p v-if="memberRangeNote" class="field-hint mb-3">
+              {{ memberRangeNote }}
+            </p>
+            <p v-if="hiddenMemberNote" class="field-hint mb-3">
+              {{ hiddenMemberNote }}
+            </p>
+          </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="isResidentSubject && 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. -->
+          <!-- A mirror of the chosen member's role, on the same rule as Name:
+               restated from the record, never collected. -->
+          <template v-if="!selectedUser && !isResidentSubject">
+            <div class="field-label">Role</div>
+            <AppField
+              v-model="form.subjectRole"
+              aria-label="Role"
+              placeholder="Select a member above"
+              readonly
+              klass="mb-3"
+            />
+          </template>
+
+          <div class="field-label">Name</div>
+          <AppField
+            v-model="form.name"
+            aria-label="Name"
+            :placeholder="
+              isResidentSubject
+                ? 'Select a resident above'
+                : 'Select a member above'
+            "
+            readonly
             klass="mb-3"
           />
 
           <div class="field-label">ID</div>
-          <AppField v-model="form.hidUserId" aria-label="ID" readonly klass="mb-3" />
+          <AppField
+            v-model="form.hidUserId"
+            aria-label="ID"
+            readonly
+            klass="mb-3"
+          />
 
           <div class="field-label">Registration No. <span>*</span></div>
           <AppField
             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 +463,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 +473,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" />
@@ -290,33 +483,82 @@
           <!-- `persistent-hint` was Vuetify's; the design's settings module
                draws an explanatory line as 12-13px/600 in `--muted`. -->
           <p class="field-hint">
-            {{ selectedUser && pinEnrolled ? "Leave blank to keep the current PIN." : "PIN works as an alternative to face or QR." }}
+            {{
+              selectedUser && pinEnrolled
+                ? "Leave blank to keep the current PIN."
+                : "PIN works as an alternative to face or QR."
+            }}
           </p>
           <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 +570,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 +589,28 @@
             ><strong>{{
               selectedUser ? getMappingStatus(selectedUser) : "N/A"
             }}</strong>
-            <span>Access PIN</span
-            ><strong>{{ selectedUser?.metadata?.pinEnrolled ? "Configured" : "N/A" }}</strong>
+            <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 />
-          <AppButton variant="ghost" @click="viewDialog = false">Close</AppButton>
+        <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>
@@ -369,7 +618,11 @@
 
           <v-progress-linear v-if="loadingCards" indeterminate class="mb-3" />
           <div v-else-if="physicalCards.length" class="hid-card-list mb-4">
-            <div v-for="card in physicalCards" :key="card.id" class="hid-card-row">
+            <div
+              v-for="card in physicalCards"
+              :key="card.id"
+              class="hid-card-row"
+            >
               <v-icon icon="mdi-card-account-details-outline" size="22" />
               <div class="hid-card-row__content">
                 <strong>{{ formatPhysicalCard(card) }}</strong>
@@ -383,7 +636,13 @@
               />
             </div>
           </div>
-          <v-alert v-else type="info" variant="tonal" density="compact" class="mb-4">
+          <v-alert
+            v-else
+            type="info"
+            variant="tonal"
+            density="compact"
+            class="mb-4"
+          >
             No physical HID card is assigned to this user.
           </v-alert>
 
@@ -397,7 +656,8 @@
             {{ cardProfileLabel }}
           </v-alert>
           <p class="field-hint hid-card-type-hint">
-            PACS uses Facility Code + Card Number. CSN uses the raw serial number read from the physical card.
+            PACS uses Facility Code + Card Number. CSN uses the raw serial
+            number read from the physical card.
           </p>
           <template v-if="hybridCardProfile">
             <div class="field-label mt-3">Presented Card Type</div>
@@ -408,11 +668,13 @@
               class="mb-3"
             />
             <p class="field-hint hid-card-type-hint">
-              Choose MIFARE CSN for a MIFARE card. Choose PACS for any other card in this reader mode.
+              Choose MIFARE CSN for a MIFARE card. Choose PACS for any other
+              card in this reader mode.
             </p>
           </template>
           <p class="field-hint hid-card-access-hint">
-            The card uses this HID user's existing portal and access rules; assigning a card does not grant new access.
+            The card uses this HID user's existing portal and access rules;
+            assigning a card does not grant new access.
           </p>
 
           <div v-if="cardForm.cardType === 'pacs'" class="hid-card-fields">
@@ -449,9 +711,15 @@
             density="compact"
             class="mt-4"
           >
-            Present the physical card to the selected Amico reader. The request will time out after 30 seconds.
+            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,15 +738,21 @@
             <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 />
-          <AppButton variant="ghost" :disabled="enrollingCard" @click="cardDialog = false">
+        <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>
         </v-card-actions>
@@ -486,31 +760,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>
@@ -522,11 +796,30 @@
 </template>
 
 <script setup lang="ts">
+// Shared with the Access Permissions screen: `paginate` never echoes the page it
+// was asked for, and `items` sits at the root on some of these endpoints and
+// under `data` on others. This reads both, so the mistake is made once.
+import {
+  HID_ENROLMENT_SUBJECTS,
+  hiddenSubjectNote,
+  memberCandidateOf,
+  memberHasAccount,
+  readMemberPage,
+  subjectCategoryLabel as labelForSubjectCategory,
+} from "../utils/hid-enrolment-subject";
+
 const props = defineProps({
   site: {
     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,12 +840,16 @@ const {
   getUserPinStatus,
   setUserPin,
   deleteUserPin,
+  getUserPasswordStatus,
+  setUserPassword,
+  deleteUserPassword,
   runObjectOperation,
   createIdentity,
   updateIdentity,
   deleteIdentity,
-  getPermissionCandidates,
 } = useHidAmico();
+const { getAll: getAllMembers } = useMember();
+const runtimeConfig = useRuntimeConfig();
 
 type HidMetadata = Record<string, unknown> & {
   name?: string;
@@ -566,6 +863,7 @@ type HidMetadata = Record<string, unknown> & {
   lastAccessAt?: string;
   facialScores?: Record<string, unknown>;
   pinEnrolled?: boolean;
+  passwordSet?: boolean;
   hidPhysicalCards?: HidCard[];
 };
 
@@ -616,6 +914,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 +938,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);
@@ -657,17 +963,79 @@ const facialEnrolled = ref(false);
 function hasFacialEnrollment(user?: HidUser | null) {
   return Boolean(
     user?.metadata?.facialEnrolled ||
-    user?.metadata?.facialData ||
-    user?.metadata?.imageTimestamp
+      user?.metadata?.facialData ||
+      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;
+};
+
+/**
+ * THE SUBJECT TYPE THIS SCREEN WAS LAST USED FOR.
+ *
+ * Module scope, not component scope, and deliberately: the dialog is rebuilt on
+ * every open and the component itself is unmounted when the operator moves
+ * between HID screens, so a local ref would forget the choice immediately.
+ * Enrolling ten guards in a row should not mean picking "Member" ten times.
+ *
+ * Not persisted. Surviving a hard refresh is a smaller benefit than surviving
+ * the dialog, and `useHidReaderSelection` already set the precedent for where
+ * that line sits.
+ */
+const REMEMBERED_SUBJECT_CATEGORY = ref<THidPermissionCategory>("resident");
+
 const form = reactive({
   reader: "",
   block: "",
@@ -678,24 +1046,385 @@ const form = reactive({
   registration: "",
   isAdministrator: false,
   accessPin: "",
+  password: "",
   photoPreview: "",
-  subjectCategory: "resident" as THidPermissionCategory,
+  subjectCategory: REMEMBERED_SUBJECT_CATEGORY.value,
   subjectId: "",
+  /** A mirror of the chosen member's role. Never sent; display only. */
+  subjectRole: "",
 });
 
 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.`;
+});
+
+/* ── THE SUBJECT TYPE ──────────────────────────────────────────────────── */
+
+const subjectCategoryOptions = HID_ENROLMENT_SUBJECTS;
+
+const isResidentSubject = computed(() => form.subjectCategory === "resident");
+
+/* What an EDIT shows in place of the control, since the type cannot change.
+   Looked up in the util, not in the switch's own options: records carry
+   `service_provider` too, and the options list would have called those
+   "Resident". */
+const subjectCategoryLabel = computed(() =>
+  labelForSubjectCategory(form.subjectCategory)
+);
+
+/* ── STAFF CANDIDATES ─────────────────────────────────────────────────────
+ *
+ * Read from `GET /api/members` — the SAME endpoint, with the same filters, that
+ * the Members menu reads. That is deliberate and was the fix for a real bug: the
+ * first version used the HID permission-candidate endpoint, which applies NO
+ * `type` filter, so it offered every active members row at the site including
+ * service providers and residents. A picker that disagrees with the Members menu
+ * is a picker the operator cannot trust.
+ *
+ * `type` is the running app, the same way `HidQrCodeConfiguration` reads it, so
+ * the property app lists its own staff and the security app lists its own. The
+ * members endpoint expands legacy spellings of a type itself (`appTypeQuery`).
+ *
+ * Service providers get their own option next; they are not silently folded in
+ * here.
+ */
+/*
+ * TEN, to share the Members menu's cache key.
+ *
+ * `member.repo.ts` caches each page under a key that INCLUDES `limit`, so a
+ * different limit is a different cache entry with its own 15-minute life. This
+ * picker asked for 50 and got its own rarely-touched slot, which went stale and
+ * showed six members where the Members menu showed nine - the same query, the
+ * same instant, two answers. Asking for the menu's own page size means the two
+ * read the same entry and cannot disagree.
+ */
+const MEMBER_PAGE_LIMIT = 10;
+
+type MemberCandidate = { subjectId: string; name: string; subtitle: string };
+
+const memberCandidates = ref<MemberCandidate[]>([]);
+const loadingMembers = ref(false);
+const loadingMoreMembers = ref(false);
+const membersLoaded = ref(false);
+/** The last page successfully loaded; 0 before the first. */
+const memberPage = ref(0);
+/** Rows fetched so far, INCLUDING those hidden for having no account. */
+const memberRowsLoaded = ref(0);
+/** What the server says matches the query, across every page. */
+const memberTotalRows = ref(0);
+/* Active staff dropped for having no app account. Counted here rather than
+ * asked of the server, because this endpoint returns the `user` field and so
+ * the answer is already in hand - see `hiddenMemberNote`. */
+const hiddenMemberCount = ref(0);
+
+const hasMoreMembers = computed(
+  () => memberRowsLoaded.value < memberTotalRows.value
+);
+
+/*
+ * Bumped on every request, so a response that is no longer the current one is
+ * dropped. Scroll-loading makes this matter: a page still in flight when the
+ * dialog reopens, or when the type is switched away and back, would otherwise
+ * append onto a list that has since been replaced. Same guard, and the same
+ * reason, as `cardRequestSeq` in `EntryPassInformation.vue`.
+ */
+let memberRequestSeq = 0;
+
+const memberOptions = computed(() =>
+  memberCandidates.value.map((candidate) => ({
+    // Role in the title as well as the mirror below: two people can share a name,
+    // and the popover is where they have to be told apart.
+    title: candidate.subtitle
+      ? `${candidate.name} — ${candidate.subtitle}`
+      : candidate.name,
+    value: candidate.subjectId,
+  }))
+);
+
+const memberPlaceholder = computed(() => {
+  if (loadingMembers.value) return "Loading staff...";
+  if (!membersLoaded.value) return "Select a member";
+  if (memberOptions.value.length) return "Select a member";
+  return hiddenMemberCount.value
+    ? "No staff here can be enrolled yet"
+    : "No staff at this site";
+});
+
+/* The same courtesy the resident cascade pays: say why somebody the operator
+ * can see in the Members menu is not in this list. */
+const hiddenMemberNote = computed(() => {
+  // Only once everything is loaded. Half a list gives half a count, and
+  // "3 members at this site" would then be a number about this PAGE wearing the
+  // word "site" - the range note below carries the partial truth instead.
+  if (loadingMembers.value || hasMoreMembers.value) return "";
+  return hiddenSubjectNote(hiddenMemberCount.value, "member");
+});
+
+/* What is loaded against what exists - and the warning that the picker's own
+   search only ever sees what has been fetched. */
+const memberRangeNote = computed(() =>
+  hasMoreMembers.value
+    ? `Showing ${memberRowsLoaded.value} of ${memberTotalRows.value}. Search looks only at these.`
+    : ""
+);
+
+/** Back to "nothing loaded", so the next open starts from page one. */
+function resetMemberCandidates() {
+  // Anything still in flight belongs to the list being thrown away.
+  memberRequestSeq += 1;
+  memberCandidates.value = [];
+  hiddenMemberCount.value = 0;
+  memberPage.value = 0;
+  memberRowsLoaded.value = 0;
+  memberTotalRows.value = 0;
+  membersLoaded.value = false;
+}
+
+/**
+ * One page of this site's active staff.
+ *
+ * Paged rather than fetched whole: a page of ten is what the Members menu asks
+ * for, and sharing that page size shares its cache entry. `append` is what
+ * separates the first load from Load more - the first replaces, the rest add.
+ *
+ * NEVER THROWS. The list is left as it is and the placeholder says so, because
+ * choosing "Member" must not break the dialog.
+ */
+async function fetchMemberPage(page: number, append: boolean) {
+  const memberType = String(runtimeConfig.public.APP ?? "").trim();
+  // "App" is the nuxt config's own placeholder default. Without a real app there
+  // is no member type to ask for, and a typeless query returns nothing anyway.
+  if (!props.site || !props.org || !memberType || memberType === "App") {
+    resetMemberCandidates();
+    membersLoaded.value = true;
+    return;
+  }
+
+  const seq = (memberRequestSeq += 1);
+  const busy = append ? loadingMoreMembers : loadingMembers;
+  busy.value = true;
+  try {
+    const response = await getAllMembers({
+      org: props.org,
+      siteId: props.site,
+      type: memberType,
+      status: "active",
+      page,
+      limit: MEMBER_PAGE_LIMIT,
+    });
+    if (seq !== memberRequestSeq) return;
+    const parsed = readMemberPage(response);
+    const enrollable = parsed.items.filter(memberHasAccount);
+    const candidates = enrollable.map(memberCandidateOf);
+
+    memberCandidates.value = append
+      ? [...memberCandidates.value, ...candidates]
+      : candidates;
+    const hiddenOnPage = parsed.items.length - enrollable.length;
+    hiddenMemberCount.value = append
+      ? hiddenMemberCount.value + hiddenOnPage
+      : hiddenOnPage;
+    memberRowsLoaded.value = append
+      ? memberRowsLoaded.value + parsed.items.length
+      : parsed.items.length;
+    memberTotalRows.value = parsed.total;
+    memberPage.value = page;
+    membersLoaded.value = true;
+  } catch (error: unknown) {
+    if (seq !== memberRequestSeq) return;
+    console.error("Unable to load staff for HID enrollment:", error);
+    // An "append" that failed keeps what is already on screen; a first load has
+    // nothing to keep. Either way the dialog stays usable.
+    if (!append) resetMemberCandidates();
+    membersLoaded.value = true;
+  } finally {
+    // Always its OWN flag, superseded or not: a request that leaves its spinner
+    // set strands the list behind a wait that will never end.
+    busy.value = false;
+  }
+}
+
+/** The first page, replacing whatever was there. */
+function loadMemberCandidates() {
+  return fetchMemberPage(1, false);
+}
+
+/** The next page, added to the list. */
+function loadMoreMembers() {
+  if (loadingMembers.value || loadingMoreMembers.value || !hasMoreMembers.value)
+    return;
+  return fetchMemberPage(memberPage.value + 1, true);
+}
+
+/**
+ * Switching type clears the chosen subject, and nothing else.
+ *
+ * The id spaces do not overlap - a `site.people._id` submitted as a `member`
+ * would be refused by the server, and worse, a stale one could name a real
+ * member - so it is cleared rather than carried. Name and Role mirror the
+ * choice, so they clear with it.
+ */
+async function onSubjectCategoryChanged() {
+  REMEMBERED_SUBJECT_CATEGORY.value = form.subjectCategory;
+  form.subjectId = "";
+  form.subjectRole = "";
+  form.name = "";
+  residentConflict.value = null;
+
+  if (!isResidentSubject.value && !membersLoaded.value) {
+    await loadMemberCandidates();
+  }
+}
+
+/* The staff equivalent of `onResidentChanged`. */
+async function onMemberChanged() {
+  const candidate = memberCandidates.value.find(
+    (item) => String(item.subjectId) === String(form.subjectId)
+  );
+  form.name = String(candidate?.name ?? "");
+  form.subjectRole = String(candidate?.subtitle ?? "");
+  await checkSubjectEnrollment();
+}
+
+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",
@@ -705,23 +1434,37 @@ const cardForm = reactive({
 });
 
 const cardReader = computed(() => {
-  const readerId = String(cardUser.value?.reader || selectedReaderId.value || "");
-  return readers.value.find((reader) => String(reader._id) === readerId) || null;
+  const readerId = String(
+    cardUser.value?.reader || selectedReaderId.value || ""
+  );
+  return (
+    readers.value.find((reader) => String(reader._id) === readerId) || null
+  );
 });
-const cardProfileConfigured = computed(() => ["pacs", "csn", "csn_for_mifare"].includes(
-  String(cardReader.value?.cardReadingMode || ""),
-));
-const hybridCardProfile = computed(() => cardReader.value?.cardReadingMode === "csn_for_mifare");
+const cardProfileConfigured = computed(() =>
+  ["pacs", "csn", "csn_for_mifare"].includes(
+    String(cardReader.value?.cardReadingMode || "")
+  )
+);
+const hybridCardProfile = computed(
+  () => cardReader.value?.cardReadingMode === "csn_for_mifare"
+);
 const hybridCardTypeOptions = [
   { title: "MIFARE card (CSN)", value: "csn" },
   { title: "Other card (PACS)", value: "pacs" },
 ];
 const cardProfileLabel = computed(() => {
   const mode = String(cardReader.value?.cardReadingMode || "unconfigured");
-  if (mode === "pacs") return `PACS · ${(cardReader.value?.pacsFormat || "raw").toUpperCase()}`;
-  if (mode === "csn") return `CSN · ${(cardReader.value?.csnByteOrder || "msb").toUpperCase()} first`;
+  if (mode === "pacs")
+    return `PACS · ${(cardReader.value?.pacsFormat || "raw").toUpperCase()}`;
+  if (mode === "csn")
+    return `CSN · ${(
+      cardReader.value?.csnByteOrder || "msb"
+    ).toUpperCase()} first`;
   if (mode === "csn_for_mifare") {
-    return `PACS for non-MIFARE cards · CSN for MIFARE (${(cardReader.value?.csnByteOrder || "msb").toUpperCase()} first)`;
+    return `PACS for non-MIFARE cards · CSN for MIFARE (${(
+      cardReader.value?.csnByteOrder || "msb"
+    ).toUpperCase()} first)`;
   }
   return "Configure the card data mode on the HID Reader screen before assigning a card.";
 });
@@ -738,6 +1481,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 },
 ];
@@ -749,8 +1494,12 @@ const cardHeaders = [
   { title: "", value: "action-table", sortable: false },
 ];
 
-const tableTitle = computed(() => props.cardManagement ? "HID Cards" : "HID Users");
-const tableHeaders = computed(() => props.cardManagement ? cardHeaders : userHeaders);
+const tableTitle = computed(() =>
+  props.cardManagement ? "HID Cards" : "HID Users"
+);
+const tableHeaders = computed(() =>
+  props.cardManagement ? cardHeaders : userHeaders
+);
 
 /**
  * The list is paged on the SERVER, so the shared pager only moves the cursor -
@@ -767,14 +1516,45 @@ 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"}`,
+    title: `${reader.name || reader.deviceId || reader._id} — ${
+      reader.portalName || "Portal not configured"
+    }`,
     value: reader._id,
   }))
 );
-const selectedReader = computed(() =>
-  readers.value.find((reader) => reader._id === (selectedReaderId.value || form.reader)) || null,
+const selectedReader = computed(
+  () =>
+    readers.value.find(
+      (reader) => reader._id === (selectedReaderId.value || form.reader)
+    ) || null
 );
 
 const pageRange = computed(() => {
@@ -801,15 +1581,28 @@ async function loadReaders() {
   const response = await getReaders({ site: props.site, page: 1, limit: 100 });
   const responseRecord = toRecord(response);
   const responseData = toRecord(responseRecord.data);
-  const items = responseRecord.items ?? responseData.items ?? responseData.readers ?? [];
+  const items =
+    responseRecord.items ?? responseData.items ?? responseData.readers ?? [];
   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,32 +1612,83 @@ 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)
         .map((user) => toHidNumericId(user.hidUserId))
-        .filter((userId: number | undefined): userId is number => Boolean(userId)),
+        .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,11 +1699,12 @@ 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;
   }
 }
 
-
 function resetForm() {
   form.reader = selectedReaderId.value || readers.value[0]?._id || "";
   form.block = "";
@@ -870,6 +1715,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;
@@ -877,34 +1726,201 @@ function resetForm() {
   selectedPhotoFile.value = null;
   removePhotoRequested.value = false;
   facialEnrolled.value = false;
-  form.subjectCategory = "resident";
+  // The type the operator last enrolled, not a hard "resident": somebody adding
+  // a shift of guards should not re-pick Member for each one.
+  form.subjectCategory = REMEMBERED_SUBJECT_CATEGORY.value;
   form.subjectId = "";
+  form.subjectRole = "";
+  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 checkSubjectEnrollment();
+}
+
+/**
+ * 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.
+ */
+/**
+ * Is this subject already enrolled on this reader?
+ *
+ * Category-agnostic, since staff can be enrolled too. `findResidentIdentity`
+ * queries the server's `subject` parameter, which is matched against every link
+ * field - `person`, `member`, `serviceProvider`, `user` - so a member needs no
+ * separate lookup. The server refuses a duplicate either way; this only puts the
+ * refusal in front of the operator before the device is touched.
+ */
+async function checkSubjectEnrollment() {
+  residentConflict.value = null;
+  const readerId =
+    selectedReaderId.value || form.reader || readers.value[0]?._id;
+  if (!readerId || !form.subjectId) 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,8 +1932,14 @@ async function openEnroll() {
   ]);
   form.hidUserId = hidUserId;
   form.registration = registration;
-  await loadSubjectCandidates();
   formDialog.value = true;
+
+  // `resetForm` restores the remembered type, so the dialog can open straight
+  // onto Member with an empty list. Loaded after the dialog is up, not before:
+  // the request must not delay it, and the picker carries its own loading
+  // placeholder. Fresh each opening, because staff change between them.
+  resetMemberCandidates();
+  if (!isResidentSubject.value) await loadMemberCandidates();
 }
 
 async function openEdit(user: HidUser) {
@@ -931,6 +1953,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 = "";
@@ -938,24 +1964,39 @@ async function openEdit(user: HidUser) {
   form.subjectCategory = user.person
     ? "resident"
     : user.serviceProvider
-      ? "service_provider"
-      : "property_management";
-  form.subjectId = String(user.person || user.member || user.serviceProvider || "");
-  await loadSubjectCandidates();
+    ? "service_provider"
+    : "property_management";
+  form.subjectId = String(
+    user.person || user.member || user.serviceProvider || ""
+  );
+  // 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.
   }
-
 }
 
 function openView(user: HidUser) {
@@ -1030,16 +2071,53 @@ 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
+    ? isResidentSubject.value
+      ? "a resident"
+      : "a member"
+    : !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)) {
-    showToast("Reconnect this HID reader and select a portal before enrolling facial recognition.", "error");
+  if (
+    selectedPhotoFile.value &&
+    (!selectedReader.value?.portalId || !selectedReader.value?.portalName)
+  ) {
+    showToast(
+      "Reconnect this HID reader and select a portal before enrolling facial recognition.",
+      "error"
+    );
+    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 checkSubjectEnrollment();
+  if (alreadyEnrolled) {
+    showToast(residentConflictMessage.value, "error");
     return;
   }
 
@@ -1056,22 +2134,37 @@ 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 +2181,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 +2191,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;
     }
@@ -1128,7 +2227,10 @@ async function saveUser() {
           where: { users: { id: newlyCreatedHidUserId } },
         });
       } catch (rollbackError) {
-        console.error("Unable to roll back the partially enrolled HID user:", rollbackError);
+        console.error(
+          "Unable to roll back the partially enrolled HID user:",
+          rollbackError
+        );
       }
     }
     console.error("Unable to save HID user:", error);
@@ -1143,6 +2245,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);
@@ -1222,7 +2343,7 @@ async function deleteUser() {
     );
     await deleteUserPin(
       selectedReaderId.value,
-      toHidNumericId(selectedUser.value.hidUserId),
+      toHidNumericId(selectedUser.value.hidUserId)
     );
     await deleteHidUserFromReader(selectedReaderId.value, selectedUser.value);
     if (selectedUser.value._id) {
@@ -1241,7 +2362,7 @@ async function deleteUser() {
 
 async function saveIdentityOnReader(
   readerId: string,
-  payload: HidIdentityPayload,
+  payload: HidIdentityPayload
 ) {
   const existingIdentity = await findExistingIdentityOnReader(
     readerId,
@@ -1253,7 +2374,11 @@ 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;
@@ -1269,7 +2394,7 @@ async function saveIdentityOnReader(
 
 async function findExistingIdentityOnReader(
   readerId: string,
-  payload: HidIdentityPayload,
+  payload: HidIdentityPayload
 ) {
   const response = await getIdentities(readerId, {
     page: 1,
@@ -1278,8 +2403,11 @@ async function findExistingIdentityOnReader(
   });
   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 responseItems =
+    responseRecord.items ?? responseData.items ?? responseData.identities ?? [];
+  const identities = (Array.isArray(responseItems) ? responseItems : []).map(
+    toHidUser
+  );
   const hidUserId = String(payload.hidUserId || "");
   const registration = String(payload.registration || "");
   const cardNo = String(payload.cardNo || "");
@@ -1296,7 +2424,7 @@ async function findExistingIdentityOnReader(
 
 async function createHidUserOnReader(
   readerId: string,
-  user: { id?: number; name: string; registration: string },
+  user: { id?: number; name: string; registration: string }
 ) {
   const existing = await getHidUserFromReader(readerId, user.id);
   if (existing) {
@@ -1330,7 +2458,7 @@ async function getHidUserFromReader(readerId: string, id: unknown) {
 
 async function updateHidUserOnReader(
   readerId: string,
-  user: { id?: number; name: string; registration: string },
+  user: { id?: number; name: string; registration: string }
 ) {
   const { id, ...values } = user;
   await runObjectOperation(readerId, {
@@ -1345,10 +2473,7 @@ async function updateHidUserOnReader(
   });
 }
 
-async function deleteHidUserFromReader(
-  readerId: string,
-  user: HidUser,
-) {
+async function deleteHidUserFromReader(readerId: string, user: HidUser) {
   const id = toHidNumericId(user.hidUserId);
   if (!readerId || !id) return;
 
@@ -1436,7 +2561,9 @@ async function getHidUserRole(readerId: string, userId: number) {
   return Array.isArray(roles) ? roles[0] : undefined;
 }
 
-function toHidUserObject(identity: Pick<HidUser, "hidUserId" | "name" | "registration">) {
+function toHidUserObject(
+  identity: Pick<HidUser, "hidUserId" | "name" | "registration">
+) {
   return {
     id: toHidNumericId(identity.hidUserId),
     name:
@@ -1447,6 +2574,23 @@ 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;
@@ -1475,16 +2619,19 @@ async function loadVisibleUserCards(items: HidUser[]) {
         const response = await getUserCards(selectedReaderId.value, hidUserId);
         const responseData = toRecord(toRecord(response).data);
         const cards = responseData.cards;
-        return [String(hidUserId), (Array.isArray(cards) ? cards : []).map(toHidCard)] as const;
+        return [
+          String(hidUserId),
+          (Array.isArray(cards) ? cards : []).map(toHidCard),
+        ] as const;
       } catch (error: unknown) {
         cardErrors[String(hidUserId)] = getHidErrorMessage(error);
         return [String(hidUserId), []] as const;
       }
-    }),
+    })
   );
 
   physicalCardsByUserId.value = Object.fromEntries(
-    entries.filter(([hidUserId]) => Boolean(hidUserId)),
+    entries.filter(([hidUserId]) => Boolean(hidUserId))
   );
   physicalCardErrorsByUserId.value = cardErrors;
 }
@@ -1496,12 +2643,16 @@ function getUserPhysicalCards(user: HidUser) {
 
 function getUserCardLoadError(user: HidUser) {
   const hidUserId = toHidNumericId(user.hidUserId);
-  return hidUserId ? physicalCardErrorsByUserId.value[String(hidUserId)] || "" : "";
+  return hidUserId
+    ? physicalCardErrorsByUserId.value[String(hidUserId)] || ""
+    : "";
 }
 
 async function openCardManager(user: HidUser) {
   cardUser.value = user;
-  const reader = readers.value.find((item) => String(item._id) === String(user.reader || selectedReaderId.value));
+  const reader = readers.value.find(
+    (item) => String(item._id) === String(user.reader || selectedReaderId.value)
+  );
   cardForm.cardType = reader?.cardReadingMode === "pacs" ? "pacs" : "csn";
   cardForm.facilityCode = "";
   cardForm.cardNumber = "";
@@ -1512,7 +2663,9 @@ async function openCardManager(user: HidUser) {
 }
 
 function getCardReaderAndUser() {
-  const readerId = String(cardUser.value?.reader || selectedReaderId.value || "");
+  const readerId = String(
+    cardUser.value?.reader || selectedReaderId.value || ""
+  );
   const hidUserId = toHidNumericId(cardUser.value?.hidUserId);
   return { readerId, hidUserId };
 }
@@ -1535,7 +2688,11 @@ async function loadPhysicalCards() {
   }
 }
 
-function parsePhysicalCardInteger(value: string, label: string, maximum: bigint) {
+function parsePhysicalCardInteger(
+  value: string,
+  label: string,
+  maximum: bigint
+) {
   if (!/^\d+$/.test(value.trim())) {
     showToast(`${label} must contain numbers only.`, "error");
     return null;
@@ -1556,14 +2713,27 @@ async function assignPhysicalCard() {
     | { cardType: "pacs"; facilityCode: string; cardNumber: string }
     | { cardType: "csn"; cardValue: string };
   if (cardForm.cardType === "pacs") {
-    const facilityCode = parsePhysicalCardInteger(cardForm.facilityCode, "Facility Code", 4294967295n);
-    const cardNumber = parsePhysicalCardInteger(cardForm.cardNumber, "Card Number", 4294967295n);
+    const facilityCode = parsePhysicalCardInteger(
+      cardForm.facilityCode,
+      "Facility Code",
+      4294967295n
+    );
+    const cardNumber = parsePhysicalCardInteger(
+      cardForm.cardNumber,
+      "Card Number",
+      4294967295n
+    );
     if (facilityCode === null || cardNumber === null) return;
     payload = { cardType: "pacs", facilityCode, cardNumber };
   } else {
-    const cardValue = parsePhysicalCardInteger(cardForm.cardValue, "CSN", 18446744073709551615n);
+    const cardValue = parsePhysicalCardInteger(
+      cardForm.cardValue,
+      "CSN",
+      18446744073709551615n
+    );
     if (cardValue === null || BigInt(cardValue) <= 0n) {
-      if (cardValue === "0") showToast("CSN must be greater than zero.", "error");
+      if (cardValue === "0")
+        showToast("CSN must be greater than zero.", "error");
       return;
     }
     payload = { cardType: "csn", cardValue };
@@ -1585,6 +2755,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 +2775,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,20 +2785,55 @@ 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;
   }
 }
 
 async function removePhysicalCard(card: HidCard) {
-  if (!window.confirm(`Remove physical HID card ${formatPhysicalCard(card)}?`)) return;
+  if (!window.confirm(`Remove physical HID card ${formatPhysicalCard(card)}?`))
+    return;
   const { readerId, hidUserId } = getCardReaderAndUser();
   if (!readerId || !hidUserId || !card?.id) return;
 
@@ -1644,13 +2859,38 @@ function formatPhysicalCard(card: HidCard) {
 }
 
 function getPhysicalCardSubtitle(card: HidCard) {
-  const source = card?.source === "reader" ? "Read at reader" : card?.source === "manual" ? "Manual" : "On device";
+  const source =
+    card?.source === "reader"
+      ? "Read at reader"
+      : card?.source === "manual"
+      ? "Manual"
+      : "On device";
   return `${source} - Raw value ${card?.value || "N/A"}`;
 }
 
 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) {
@@ -1737,27 +2977,28 @@ function normalizeHidUsers(response: unknown): HidUser[] {
   const responseRecord = toRecord(response);
   const responseData = toRecord(responseRecord.data);
   const nestedData = toRecord(responseData.data);
-  const items = responseData.users ?? nestedData.users ?? responseRecord.users ?? [];
+  const items =
+    responseData.users ?? nestedData.users ?? responseRecord.users ?? [];
 
   return Array.isArray(items)
     ? items.map((value) => {
         const user = toRecord(value);
         return {
-        _rowKey: `reader-${user.id}`,
-        hidUserId: String(user.id || ""),
-        rawHidUserId: toText(user.id),
-        registration: toText(user.registration),
-        userTypeId: toText(user.user_type_id),
-        cardNo: toText(user.card_value || user.cardNo),
-        name: toText(user.name),
-        metadata: {
+          _rowKey: `reader-${user.id}`,
+          hidUserId: String(user.id || ""),
+          rawHidUserId: toText(user.id),
+          registration: toText(user.registration),
+          userTypeId: toText(user.user_type_id),
+          cardNo: toText(user.card_value || user.cardNo),
           name: toText(user.name),
-          imageTimestamp: user.image_timestamp
-            ? String(user.image_timestamp)
-            : "",
-          lastAccessAt: fromUnixSeconds(user.last_access),
-          hidReaderSource: true,
-        },
+          metadata: {
+            name: toText(user.name),
+            imageTimestamp: user.image_timestamp
+              ? String(user.image_timestamp)
+              : "",
+            lastAccessAt: fromUnixSeconds(user.last_access),
+            hidReaderSource: true,
+          },
         };
       })
     : [];
@@ -1765,7 +3006,7 @@ function normalizeHidUsers(response: unknown): HidUser[] {
 
 function mergeReaderUsersWithIdentities(
   readerUsers: HidUser[],
-  identities: HidUser[],
+  identities: HidUser[]
 ) {
   const identityById = new Map<string, HidUser>();
   identities.forEach((identity) => {
@@ -1808,7 +3049,13 @@ function getMappingStatus(user: HidUser) {
 }
 
 function hasMappedRecord(user: HidUser) {
-  return Boolean(user?.person || user?.user || user?.member || user?.serviceProvider || user?.visitor);
+  return Boolean(
+    user?.person ||
+      user?.user ||
+      user?.member ||
+      user?.serviceProvider ||
+      user?.visitor
+  );
 }
 
 function formatDate(value?: string) {
@@ -1840,18 +3087,26 @@ function getHidErrorMessage(error: unknown) {
   const cause = toRecord(errorRecord.cause);
   const causeResponse = toRecord(cause.response);
   const data = toRecord(
-    errorRecord.data || response._data || response.data || cause.data || causeResponse._data,
+    errorRecord.data ||
+      response._data ||
+      response.data ||
+      cause.data ||
+      causeResponse._data
   );
 
   return toText(
-    data.message || data.error || data.statusMessage || errorRecord.statusMessage || errorRecord.message,
-    "Unable to save HID user.",
+    data.message ||
+      data.error ||
+      data.statusMessage ||
+      errorRecord.statusMessage ||
+      errorRecord.message,
+    "Unable to save HID user."
   );
 }
 
 function toRecord(value: unknown): Record<string, unknown> {
   return typeof value === "object" && value !== null && !Array.isArray(value)
-    ? value as Record<string, unknown>
+    ? (value as Record<string, unknown>)
     : {};
 }
 
@@ -1897,10 +3152,24 @@ function toHidCard(value: unknown): HidCard {
   return {
     ...card,
     id: toText(card.id) || undefined,
-    cardType: card.cardType === "pacs" || card.cardType === "csn" ? card.cardType : undefined,
-    source: card.source === "reader" || card.source === "manual" || card.source === "device" ? card.source : undefined,
+    cardType:
+      card.cardType === "pacs" || card.cardType === "csn"
+        ? card.cardType
+        : undefined,
+    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 +3206,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 +3227,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;
@@ -2003,7 +3296,6 @@ function toHidCard(value: unknown): HidCard {
   box-shadow: var(--shadow-menu);
 }
 
-
 .admin-rule-indicator {
   display: inline-flex;
   vertical-align: middle;
@@ -2143,25 +3435,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) {