@7365admin1/layer-common 4.73.1-staging.464 → 4.73.1-staging.465

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
@@ -93,7 +99,9 @@
       </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
@@ -119,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) }}
@@ -139,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"
@@ -161,11 +179,19 @@
       <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>
@@ -237,6 +263,25 @@
             />
           </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"
+            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
@@ -252,7 +297,7 @@
                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">
+          <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
@@ -297,7 +342,7 @@
                with no unit has no candidates to show, and the dialog is then
                purely the reader's own credentials - photo, PIN, password -
                which is exactly the edit that must not be blocked. -->
-          <template v-if="!selectedUser || form.unit">
+          <template v-if="isResidentSubject && (!selectedUser || form.unit)">
             <div class="field-label">Resident <span>*</span></div>
             <AppSelect
               v-model="form.subjectId"
@@ -308,30 +353,96 @@
               @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">
+          <p v-if="checkingResident" class="field-hint">
+            Checking enrollment...
+          </p>
+          <p
+            v-else-if="residentConflict"
+            class="field-hint field-hint--error mb-3"
+          >
             {{ residentConflictMessage }}
           </p>
-          <p v-else-if="unitResidentNote" class="field-hint mb-3">
+          <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="Select a resident above"
+            :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
@@ -372,7 +483,11 @@
           <!-- `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"
@@ -389,7 +504,11 @@
           <AppField
             v-model="form.password"
             aria-label="Password"
-            :placeholder="selectedUser && passwordSet ? 'Enter a new password' : 'Enter password'"
+            :placeholder="
+              selectedUser && passwordSet
+                ? 'Enter a new password'
+                : 'Enter password'
+            "
             autocomplete="new-password"
             :type="showPassword ? 'text' : 'password'"
           >
@@ -400,12 +519,19 @@
                 :aria-label="showPassword ? 'Hide password' : 'Show password'"
                 @click="showPassword = !showPassword"
               >
-                <v-icon :icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'" size="18" />
+                <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." }}
+            {{
+              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"
@@ -464,13 +590,19 @@
               selectedUser ? getMappingStatus(selectedUser) : "N/A"
             }}</strong>
             <span>PIN</span
-            ><strong>{{ selectedUser?.metadata?.pinEnrolled ? "Configured" : "N/A" }}</strong>
+            ><strong>{{
+              selectedUser?.metadata?.pinEnrolled ? "Configured" : "N/A"
+            }}</strong>
             <span>Password</span
-            ><strong>{{ selectedUser?.metadata?.passwordSet ? "Configured" : "N/A" }}</strong>
+            ><strong>{{
+              selectedUser?.metadata?.passwordSet ? "Configured" : "N/A"
+            }}</strong>
           </div>
         </v-card-text>
         <v-card-actions class="screen-modal__footer">
-          <AppButton variant="ghost" @click="viewDialog = false">Close</AppButton>
+          <AppButton variant="ghost" @click="viewDialog = false"
+            >Close</AppButton
+          >
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -486,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>
@@ -500,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>
 
@@ -514,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>
@@ -525,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">
@@ -566,7 +711,8 @@
             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
@@ -602,7 +748,11 @@
         <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">
+          <AppButton
+            variant="ghost"
+            :disabled="enrollingCard"
+            @click="cardDialog = false"
+          >
             Close
           </AppButton>
         </v-card-actions>
@@ -646,6 +796,18 @@
 </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,
@@ -686,6 +848,8 @@ const {
   updateIdentity,
   deleteIdentity,
 } = useHidAmico();
+const { getAll: getAllMembers } = useMember();
+const runtimeConfig = useRuntimeConfig();
 
 type HidMetadata = Record<string, unknown> & {
   name?: string;
@@ -799,8 +963,8 @@ 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
   );
 }
 
@@ -858,6 +1022,20 @@ type UnitPerson = {
   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: "",
@@ -870,8 +1048,10 @@ const form = reactive({
   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();
@@ -917,13 +1097,17 @@ function formatBlockTitle(block?: OccupiedBlock | null) {
     : `Block ${block.block ?? ""}`.trim();
 }
 
-const blockOptions = computed(() => occupiedBlocks.value.map((block) => ({
-  title: formatBlockTitle(block),
-  value: String(block._id ?? ""),
-})));
+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);
+  const block = occupiedBlocks.value.find(
+    (item) => String(item._id ?? "") === form.block
+  );
   return (block?.levels ?? []).map((level) => ({
     title: String(level.name ?? ""),
     value: String(level._id ?? ""),
@@ -931,8 +1115,12 @@ const levelOptions = computed(() => {
 });
 
 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);
+  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 ?? ""),
@@ -944,30 +1132,267 @@ const unitOptions = computed(() => {
 // 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)),
+  unitPeople.value.filter((person) => Boolean(person.user))
 );
 
 const unenrollableUnitPeopleCount = computed(
-  () => unitPeople.value.length - enrollableUnitPeople.value.length,
+  () => 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 ?? ""),
-})));
+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 "";
+  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.`;
+  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) {
@@ -1009,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.";
 });
@@ -1055,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 -
@@ -1101,12 +1544,17 @@ 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(() => {
@@ -1133,7 +1581,8 @@ 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);
@@ -1202,7 +1651,9 @@ async function loadUsers() {
     const responseRecord = toRecord(response);
     const responseData = toRecord(responseRecord.data);
     const responseItems = responseRecord.items ?? responseData.items ?? [];
-    const allItems = (Array.isArray(responseItems) ? responseItems : []).map(toHidUser);
+    const allItems = (Array.isArray(responseItems) ? responseItems : []).map(
+      toHidUser
+    );
     const matchingItems = clientFiltersVisitors
       ? allItems.filter((user) => !isVisitorUser(user))
       : allItems;
@@ -1215,12 +1666,16 @@ async function loadUsers() {
       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 = clientFiltersVisitors
       ? matchingItems.length
-      : Number(responseRecord.total ?? responseData.total ?? users.value.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);
@@ -1250,7 +1705,6 @@ async function loadUsers() {
   }
 }
 
-
 function resetForm() {
   form.reader = selectedReaderId.value || readers.value[0]?._id || "";
   form.block = "";
@@ -1272,19 +1726,25 @@ 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;
 }
 
-
 /** 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);
+  return (
+    toText(data.message) ||
+    toText(record.message) ||
+    toText(record.statusMessage)
+  );
 }
 
 // Called when the Block select is first touched, not when the dialog opens.
@@ -1292,21 +1752,27 @@ 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 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[];
+    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",
+      reason
+        ? `Unable to load units: ${reason}`
+        : "Unable to load units for this site.",
+      "error"
     );
   } finally {
     loadingOccupancy.value = false;
@@ -1331,8 +1797,10 @@ async function loadUnitPeople() {
     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",
+      reason
+        ? `Unable to load residents: ${reason}`
+        : "Unable to load residents for this unit.",
+      "error"
     );
   } finally {
     loadingUnitPeople.value = false;
@@ -1372,10 +1840,10 @@ function clearResidentSelection() {
 // The auto-fill the whole cascade exists for.
 async function onResidentChanged() {
   const person = unitPeople.value.find(
-    (item) => String(item._id) === String(form.subjectId),
+    (item) => String(item._id) === String(form.subjectId)
   );
   form.name = String(person?.name ?? "");
-  await checkResidentEnrollment();
+  await checkSubjectEnrollment();
 }
 
 /**
@@ -1403,11 +1871,15 @@ async function findResidentIdentity(readerId: string, personId: string) {
   const responseData = toRecord(responseRecord.data);
   const responseItems =
     responseRecord.items ?? responseData.items ?? responseData.identities ?? [];
-  const identities = (Array.isArray(responseItems) ? responseItems : []).map(toHidUser);
+  const identities = (Array.isArray(responseItems) ? responseItems : []).map(
+    toHidUser
+  );
   const editingId = String(selectedUser.value?._id ?? "");
 
   return (
-    identities.find((identity) => !editingId || String(identity._id ?? "") !== editingId) ?? null
+    identities.find(
+      (identity) => !editingId || String(identity._id ?? "") !== editingId
+    ) ?? null
   );
 }
 
@@ -1418,17 +1890,33 @@ async function findResidentIdentity(readerId: string, personId: string) {
  * the server refuses the duplicate anyway. This is a courtesy check that keeps
  * a doomed enrollment off the physical reader, not the guard itself.
  */
-async function checkResidentEnrollment() {
+/**
+ * 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 || form.subjectCategory !== "resident") return 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);
+    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);
+    console.error(
+      "Unable to check whether this resident is already enrolled:",
+      error
+    );
     return null;
   } finally {
     checkingResident.value = false;
@@ -1445,6 +1933,13 @@ async function openEnroll() {
   form.hidUserId = hidUserId;
   form.registration = registration;
   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) {
@@ -1469,9 +1964,11 @@ 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 || "");
+    ? "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;
@@ -1500,7 +1997,6 @@ async function openEdit(user: HidUser) {
   } catch {
     // Preserve the last known status if the reader is temporarily offline.
   }
-
 }
 
 function openView(user: HidUser) {
@@ -1583,24 +2079,35 @@ async function saveUser() {
   const missing = !readerId
     ? "a reader"
     : !selectedUser.value && !form.subjectId
+    ? isResidentSubject.value
       ? "a resident"
-      : !form.name
-        ? "a name"
-        : !form.hidUserId
-          ? "an ID"
-          : !form.registration
-            ? "a registration number"
-            : "";
+      : "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");
+    showToast(
+      `This HID user needs ${missing} before it can be saved.`,
+      "error"
+    );
     return;
   }
   if (form.accessPin && !/^\d{1,32}$/.test(form.accessPin)) {
     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;
   }
 
@@ -1608,7 +2115,7 @@ async function saveUser() {
   // somebody else enrolls the same resident, and the reader is only ever
   // written to below this line. A duplicate caught here costs one request; the
   // same duplicate caught by the server costs a created HID user and a rollback.
-  const alreadyEnrolled = await checkResidentEnrollment();
+  const alreadyEnrolled = await checkSubjectEnrollment();
   if (alreadyEnrolled) {
     showToast(residentConflictMessage.value, "error");
     return;
@@ -1634,20 +2141,24 @@ async function saveUser() {
     // 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"
+          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",
-      }
+            | "resident"
+            | "staff"
+            | "contractor"
+            | "visitor"
+            | "unknown",
+        }
       : {};
 
     const payload = {
@@ -1716,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);
@@ -1829,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) {
@@ -1848,7 +2362,7 @@ async function deleteUser() {
 
 async function saveIdentityOnReader(
   readerId: string,
-  payload: HidIdentityPayload,
+  payload: HidIdentityPayload
 ) {
   const existingIdentity = await findExistingIdentityOnReader(
     readerId,
@@ -1860,7 +2374,11 @@ async function saveIdentityOnReader(
   }
 
   try {
-    await createIdentity(readerId, { ...payload, site: props.site, ...(props.org ? { orgId: props.org } : {}) });
+    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;
@@ -1876,7 +2394,7 @@ async function saveIdentityOnReader(
 
 async function findExistingIdentityOnReader(
   readerId: string,
-  payload: HidIdentityPayload,
+  payload: HidIdentityPayload
 ) {
   const response = await getIdentities(readerId, {
     page: 1,
@@ -1885,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 || "");
@@ -1903,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) {
@@ -1937,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, {
@@ -1952,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;
 
@@ -2043,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:
@@ -2065,8 +2585,10 @@ function isUnsupportedUserTypeFilter(error: unknown) {
   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"));
+  return (
+    normalized.includes("usertype") &&
+    (normalized.includes("not allowed") || normalized.includes("unknown"))
+  );
 }
 
 function toHidNumericId(value: unknown) {
@@ -2097,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;
 }
@@ -2118,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 = "";
@@ -2134,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 };
 }
@@ -2157,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;
@@ -2178,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 };
@@ -2284,7 +2832,8 @@ async function cancelPhysicalCardEnrollment() {
 }
 
 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;
 
@@ -2310,7 +2859,12 @@ 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"}`;
 }
 
@@ -2318,9 +2872,15 @@ function buildUnitLabel() {
   // `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 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 ?? ""),
@@ -2328,7 +2888,8 @@ function buildUnitLabel() {
   ].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 ?? "");
+  if (!parts.length)
+    return String(selectedUser.value?.metadata?.unitLabel ?? "");
   return parts.join(" / ");
 }
 
@@ -2416,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,
+          },
         };
       })
     : [];
@@ -2444,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) => {
@@ -2487,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) {
@@ -2519,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>)
     : {};
 }
 
@@ -2576,8 +3152,16 @@ 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,
   };
 }
 
@@ -2712,7 +3296,6 @@ watch(selectedReaderId, (value) => {
   box-shadow: var(--shadow-menu);
 }
 
-
 .admin-rule-indicator {
   display: inline-flex;
   vertical-align: middle;