@7365admin1/layer-common 4.149.1 → 4.150.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 4.150.0
+
+### Minor Changes
+
+- b43efad: HID Access, the staging work released to main (owner decision 2026-10-28). The HID management permission group with five flags, menus and buttons following them, Use HID access in the M&E role catalogue, and the menu group, settings panel and service named HID Reader; a reader says who it is for and shows only the matching tabs and enrolling types, a person is enrolled on every reader that serves them with a result per reader and updated and deleted on each; a service provider's own people are enrolled one at a time or in bulk, with the registration number taken from the reader being enrolled on; the visitor form offers HID QR Code again, lists the enrollment readers, issues the pass for the whole visit day and says how long it lasts, with the site choosing whole day or single use in its visitor settings.
+
+## 4.149.2
+
+### Patch Changes
+
+- d1c8392: Members list: role chips start with a capital letter (a role saved as "owner" reads "Owner").
+
 ## 4.149.1
 
 ### Patch Changes
@@ -3542,11 +3554,11 @@ Monthly report: a month that had patrols opens the list of that month's patrol r
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/components/EntryPassInformation.vue

@@ -206,6 +206,13 @@
             </div>
           </div>
         </v-card>
+        <!-- How long the pass lasts, from the site's setting; the same words
+             as the resident app's invite form. -->
+        <div v-if="hidQrUsage" class="text-caption text-primary font-weight-medium mt-2">
+          {{ hidQrUsage === "singleUse"
+            ? "HID: Single use, expires after the first entry"
+            : "HID: Valid all day, until 11:59 pm" }}
+        </div>
         <v-alert
           v-if="!hidPortalName"
           type="warning"
@@ -341,6 +348,12 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  // The site's HID pass usage, for the hint under the HID QR Code card. Null
+  // shows no hint (not loaded, or a caller that does not pass it).
+  hidQrUsage: {
+    type: String as PropType<"wholeDay" | "singleUse" | null>,
+    default: null,
+  },
   excludedCardIds: {
     type: Array as PropType<string[]>,
     default: () => [],

package/components/HidAccessPermissions.vue

@@ -20,15 +20,23 @@
         density="compact"
         class="ma-4"
       >
-        Set a location on this HID Face Reader before managing permissions.
+        Set a location on this HID Reader before managing permissions.
       </v-alert>
 
       <template v-else>
         <div class="hid-access-permissions__intro">
           <p class="text-body-2 text-medium-emphasis mb-0">
-            Residents enrolled on this reader. Enrolling already grants access — switch
-            somebody off to close the door to them without removing their face, card
-            or PIN.
+            Everybody enrolled on this reader, by type. Enrolling already grants
+            access — switch somebody off to close the door to them without removing
+            their face, card or PIN.
+          </p>
+          <!-- Why a tab is missing. Left unsaid, an absent tab reads as a broken
+               screen rather than as a setting on the reader. -->
+          <p
+            v-if="audienceNote"
+            class="text-body-2 text-medium-emphasis mb-0 hid-access-permissions__audience-note"
+          >
+            {{ audienceNote }}
           </p>
         </div>
 
@@ -45,12 +53,36 @@
             @refresh="loadEnrolled"
             @update:page="goToPage"
           >
+            <!-- WHICH OF THE READER'S PEOPLE TO SHOW.
+                 The reader holds residents, members and contractors; each tab is
+                 one `type`, filtered and paged by the server. The strip is
+                 `TableMain`'s own slot and the shared `.app-tab` markup, the same
+                 as every other tabbed table here - not a `v-tabs`, whose selected
+                 state is drawn from Vuetify's `on-surface` rather than the
+                 design's accent underline.
+                 The count beside each label is the whole reader's, from the
+                 draft, so it follows an unsaved tick. -->
+            <template #tabs>
+              <button
+                v-for="tab in visibleTabs"
+                :key="tab.value"
+                type="button"
+                class="app-tab"
+                :class="{ 'app-tab--active': activeTab === tab.value }"
+                :aria-pressed="activeTab === tab.value"
+                @click="selectTab(tab.value)"
+              >
+                {{ tab.label }}
+                <span class="hid-access-permissions__tab-count">{{ tabCount(tab) }}</span>
+              </button>
+            </template>
+
             <template #extension>
               <div class="app-filter-row">
                 <AppField
                   v-model="search"
                   search
-                  placeholder="Search name, unit or registration"
+                  :placeholder="searchPlaceholder"
                   @keyup.enter="searchFromFirstPage"
                 />
               </div>
@@ -97,7 +129,11 @@
         </span>
         <v-spacer />
         <AppButton variant="ghost" :disabled="saving" @click="open = false">Cancel</AppButton>
+        <!-- Reachable only from a menu item the users right draws; the same
+             right is asked again here so the dialog stays read only if it is
+             ever opened some other way. -->
         <AppButton
+          v-if="canManageHidUsers"
           icon="mdi-content-save-outline"
           :loading="saving"
           :disabled="!readerLocation || !dirty || saving"
@@ -121,9 +157,13 @@ import {
   readCandidatePage,
   seedAssignments,
   setAssignment,
+  subjectOfIdentity,
   toAssignmentPayload,
   type HidAssignmentState,
 } from "../utils/hid-permission-assignments";
+/* Mirrors core's audience rules — core is what enforces them; this only decides
+   which tabs are worth drawing. */
+import { visibleAudienceTabs } from "../utils/hid-reader-audiences";
 
 /**
  * WHO MAY PASS THIS READER — a review and revoke screen, not a picker.
@@ -149,6 +189,8 @@ const props = defineProps<{
   reader: Record<string, unknown> | null;
 }>();
 
+const { canManageHidUsers } = useHidAccessPermission();
+
 const emit = defineEmits<{
   (event: "update:modelValue", value: boolean): void;
   (event: "saved"): void;
@@ -156,11 +198,79 @@ const emit = defineEmits<{
 
 const { getSitePermissions, getIdentities, updateSitePermissions } = useHidAmico();
 
-/* Name over unit in one cell rather than a "Unit" column — see `subtitleOf`. */
-const headers = [
-  { title: "Resident", value: "name", sortable: false },
+/**
+ * WHO EACH TAB LISTS, AND WHAT A GRANT MADE FROM IT IS FILED UNDER.
+ *
+ * `type` is the identity's own, filtered by the SERVER (`listIdentities` does an
+ * exact match on it), and it is what the enrolment writes and what
+ * `permissionIdentityType` re-confirms on every reconcile. `category` is the
+ * permission category a NEW grant from this tab belongs to.
+ *
+ * The two are a pair rather than one derived from the other, because the tab is
+ * the only thing on this screen that knows which of them the operator means: a
+ * contractor and a property-management member are both a `member` link, and
+ * guessing between them from the record is exactly what went wrong before.
+ */
+const TABS = [
+  { value: "resident", label: "Resident", noun: "Resident", type: "resident", category: "resident" },
+  { value: "member", label: "Member", noun: "Member", type: "staff", category: "property_management" },
+  {
+    value: "provider",
+    label: "Service provider",
+    noun: "Person",
+    type: "contractor",
+    category: "service_provider_member",
+  },
+] as const satisfies ReadonlyArray<{
+  value: string;
+  label: string;
+  noun: string;
+  type: string;
+  category: THidPermissionCategory;
+}>;
+
+const activeTab = ref<(typeof TABS)[number]["value"]>("resident");
+
+/*
+ * ONLY THE TABS THIS READER SERVES.
+ *
+ * A reader whose audiences exclude a category cannot hold a grant in it - core
+ * refuses the save - so a tab for it would be a list the operator can look at
+ * and never act on. See `visibleAudienceTabs`, which also keeps one tab when a
+ * reader serves nobody, because a dialog with no tabs and no explanation reads
+ * as a broken screen.
+ *
+ * A reader saved before audiences existed has none, and that reads as all four -
+ * so this changes nothing for one.
+ */
+const audienceTabs = computed(() => visibleAudienceTabs(props.reader, TABS));
+const visibleTabs = computed(() => audienceTabs.value.tabs);
+const audienceNote = computed(() => {
+  if (audienceTabs.value.emptied) {
+    return "This reader is not set to serve anybody. Switch an audience on in the reader's settings before granting access here.";
+  }
+  if (audienceTabs.value.narrowed) {
+    return "Only the kinds of people this reader serves are shown. The rest are switched off in the reader's settings.";
+  }
+  return "";
+});
+
+const currentTab = computed(
+  () => visibleTabs.value.find((tab) => tab.value === activeTab.value)
+    ?? visibleTabs.value[0]
+    ?? TABS[0],
+);
+
+/** Granted counts per category, for the tab strip. One call, all three. */
+const counts = ref<Record<string, number>>({});
+const tabCount = (tab: (typeof TABS)[number]) => counts.value[tab.category] ?? 0;
+
+/* Name over unit in one cell rather than a "Unit" column — see `subtitleOf`.
+   The first column follows the tab; "Door access" is the same action for all. */
+const headers = computed(() => [
+  { title: currentTab.value.noun, value: "name", sortable: false },
   { title: "Door access", value: "selected", sortable: false, width: 190 },
-];
+]);
 
 const search = ref("");
 const page = ref(1);
@@ -183,10 +293,17 @@ const open = computed({
 const readerId = computed(() => String(props.reader?._id ?? ""));
 const readerLocation = computed(() => String(props.reader?.location ?? "").trim());
 const readerLabel = computed(() => {
-  const name = String(props.reader?.name ?? "").trim() || "HID Face Reader";
+  const name = String(props.reader?.name ?? "").trim() || "HID Reader";
   return readerLocation.value ? `${name} · ${readerLocation.value}` : name;
 });
 
+/* "unit" only means something for a resident. */
+const searchPlaceholder = computed(() =>
+  activeTab.value === "resident"
+    ? "Search name, unit or registration"
+    : "Search name or registration",
+);
+
 const assignedTotal = computed(() => draft.value.size);
 const dirty = computed(() => hasChanges(savedState.value, draft.value));
 /* The draft is the truth once the dialog is open, so `selected` is recomputed
@@ -199,6 +316,10 @@ watch(
     if (!isOpen || !readerId.value) return;
     search.value = "";
     page.value = 1;
+    // The first tab this reader actually serves, not always Resident: opening on
+    // one it does not serve would draw an empty list under a heading that cannot
+    // accept a grant.
+    activeTab.value = visibleTabs.value[0]?.value ?? "resident";
     void loadAll();
   },
   { immediate: true },
@@ -221,6 +342,13 @@ async function loadAssignments() {
     const assignments = response?.data?.assignments ?? [];
     savedState.value = seedAssignments(assignments);
     draft.value = seedAssignments(assignments);
+    /*
+     * Counted from the assignments themselves rather than the server's `counts`
+     * block, so the strip follows the DRAFT and a tick updates the number it
+     * sits beside. `countByCategory` is the same helper the candidate screens
+     * use.
+     */
+    counts.value = countByCategory(draft.value);
   } catch (error) {
     showToast(getErrorMessage(error, "Unable to load this reader's permissions."), "error");
   }
@@ -230,27 +358,6 @@ function toRecord(value: unknown): Record<string, unknown> {
   return value && typeof value === "object" ? (value as Record<string, unknown>) : {};
 }
 
-/**
- * The subject an identity names, in the order `createIdentity` validates them.
- *
- * A visitor returns null and is left out of the list: visitor access comes from
- * `user_access_rules`, not from a group, so there is nothing here to switch
- * off. An identity linked to nobody — a device user the reader holds that was
- * never tied to a person — is dropped for the same reason.
- */
-function subjectOf(identity: Record<string, unknown>) {
-  if (identity.person) {
-    return { subjectId: String(identity.person), category: "resident" as const };
-  }
-  if (identity.member) {
-    return { subjectId: String(identity.member), category: "property_management" as const };
-  }
-  if (identity.serviceProvider) {
-    return { subjectId: String(identity.serviceProvider), category: "service_provider" as const };
-  }
-  return null;
-}
-
 /**
  * Why a row cannot be switched, in words the reader of the screen can act on.
  *
@@ -294,10 +401,10 @@ async function loadEnrolled() {
       page: page.value,
       limit: 10,
       search: search.value.trim(),
-      // Residents only, and filtered by the SERVER rather than here. The pager's
-      // count comes back from the same query, so narrowing the list on this side
-      // would print a total that never matched the rows under it.
-      type: "resident",
+      // THIS TAB's people, and filtered by the SERVER rather than here. The
+      // pager's count comes back from the same query, so narrowing the list on
+      // this side would print a total that never matched the rows under it.
+      type: currentTab.value.type,
     });
     const result = readCandidatePage(response);
     /*
@@ -309,11 +416,13 @@ async function loadEnrolled() {
      */
     enrolled.value = result.items.map((row) => {
       const identity = toRecord(row);
-      const subject = subjectOf(identity);
+      const subject = subjectOfIdentity(identity);
       const metadata = toRecord(identity.metadata);
       return {
         subjectId: subject?.subjectId ?? "",
-        category: subject?.category ?? "resident",
+        // The record's own category where it has one; otherwise the tab's,
+        // which is the only thing that knows what the operator means.
+        category: subject?.category ?? currentTab.value.category,
         // The row's own key. `subjectId` is empty for the rows below, and two
         // empty keys would collapse into one row in the table.
         rowKey: String(identity._id ?? identity.hidUserId ?? Math.random()),
@@ -342,6 +451,24 @@ async function loadEnrolled() {
   }
 }
 
+/**
+ * Switching tabs refetches, because the filter is the SERVER's.
+ *
+ * The draft is untouched: it is the whole reader's, and the save sends all of it
+ * whatever tab is in front of you. Clearing it here - or building the payload
+ * from the loaded rows - is what would revoke everybody on the other two tabs.
+ *
+ * Search is cleared with the tab. It is a server-side search within one type, so
+ * carrying it across would land on an empty list and look like the tab was empty.
+ */
+function selectTab(value: (typeof TABS)[number]["value"]) {
+  if (activeTab.value === value) return;
+  activeTab.value = value;
+  search.value = "";
+  page.value = 1;
+  void loadEnrolled();
+}
+
 function goToPage(value: number) {
   page.value = Number(value) || 1;
   void loadEnrolled();
@@ -352,15 +479,34 @@ function searchFromFirstPage() {
   void loadEnrolled();
 }
 
+/**
+ * Grant or revoke one person.
+ *
+ * The category comes from the row where the server gave it one, and otherwise
+ * from the TAB - never from re-reading the identity's links on this side. A
+ * contractor and a property-management member are both a `member` link, and the
+ * stale local copy of that reading is what used to file contractors as staff: the
+ * reconcile then derived `staff` from that category and rewrote the person's
+ * type, moving them into the Member tab.
+ *
+ * An ALREADY GRANTED person keeps the category their assignment holds, so merely
+ * visiting a tab and toggling somebody off and on cannot re-file them.
+ */
 function toggle(item: THidPermissionCandidate, selected: boolean) {
-  if (!String(item.subjectId ?? "")) return;
+  const subjectId = String(item.subjectId ?? "");
+  if (!subjectId) return;
+  const category = savedState.value.get(subjectId)?.category
+    ?? item.category
+    ?? currentTab.value.category;
   draft.value = setAssignment(
     draft.value,
     savedState.value,
-    String(item.subjectId ?? ""),
-    item.category,
+    subjectId,
+    category,
     selected,
   );
+  // The strip sits beside the rows, so it follows the tick rather than the save.
+  counts.value = countByCategory(draft.value);
 }
 
 async function save() {
@@ -401,6 +547,22 @@ function getErrorMessage(error: unknown, fallback: string) {
 </script>
 
 <style scoped lang="scss">
+/* The granted count beside a tab label. Quieter than the label and set in
+   tabular figures so the three tabs do not shift width as numbers change. */
+/* Quieter than the intro above it, and set apart so it reads as a condition of
+   this reader rather than part of the screen's own description. */
+.hid-access-permissions__audience-note {
+  margin-top: 6px;
+  font-style: italic;
+}
+
+.hid-access-permissions__tab-count {
+  margin-left: 6px;
+  color: var(--muted);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
 .hid-access-permissions {
   &__title { padding-block: 16px; }
 

package/components/HidEnabledGate.vue

@@ -22,16 +22,14 @@
        denial here would flash "no permission" at the owner on every load. -->
   <template v-if="!isAppRoleResolved" />
 
-  <slot v-else-if="hidEnabled && canAccessHidScreens" />
+  <slot v-else-if="hidEnabled && permitted" />
 
   <div v-else-if="hidEnabled" class="screen-empty hid-gate">
     <span class="hid-gate__icon tone-info">
       <v-icon icon="mdi-lock-outline" size="24" />
     </span>
-    <h2 class="hid-gate__title">You do not have permission for HID access management</h2>
-    <p class="hid-gate__body">
-      Ask an administrator to grant your role access card management for this site.
-    </p>
+    <h2 class="hid-gate__title">{{ deniedTitle }}</h2>
+    <p class="hid-gate__body">{{ deniedBody }}</p>
   </div>
 
   <div v-else class="screen-empty hid-gate">
@@ -50,10 +48,18 @@ const props = withDefaults(
     org: string;
     message?: string;
     redirectToSettings?: boolean;
+    /**
+     * Which HID right opens the screen behind this gate. `view` is the admin
+     * screens (readers, users, cards, intercom, access logs: `canViewHid`);
+     * `use` is the member's own HID QR Code page (`canUseHid`). Defaults to the
+     * stricter one, so a page that forgets to say is an admin page.
+     */
+    level?: "view" | "use";
   }>(),
   {
     message: "Enable HID as a service for this site before accessing this screen.",
     redirectToSettings: true,
+    level: "view",
   },
 );
 
@@ -61,13 +67,26 @@ const { getSiteById } = useSiteSettings();
 const { getHidServiceEnabled } = useOptionalServices();
 
 // The permission half of the same gate. This component is the only thing all
-// six `access-mgmt` pages have in common, so putting the check here governs all
-// six -- and all 66 inherited routes across the eleven apps -- without a page
-// guard per screen. See `composables/useHidAccessPermission.ts` for why the
-// gate cannot remove access that currently works.
-const { canAccessHidScreens } = useHidAccessPermission();
+// seven `access-mgmt` HID pages have in common, so putting the check here
+// governs all of them, and every inherited route across the eleven apps,
+// without a page guard per screen. See `composables/useHidAccessPermission.ts`
+// for the five flags and the alias period.
+const { canViewHid, canUseHid } = useHidAccessPermission();
 const { isAppRoleResolved } = useLocalSetup();
 
+const permitted = computed(() => (props.level === "use" ? canUseHid.value : canViewHid.value));
+
+const deniedTitle = computed(() =>
+  props.level === "use"
+    ? "You do not have permission for HID access"
+    : "You do not have permission for HID access management",
+);
+const deniedBody = computed(() =>
+  props.level === "use"
+    ? "Ask an administrator to grant your role HID access for this site."
+    : "Ask an administrator to grant your role HID management for this site.",
+);
+
 // Do not await this request during route setup. Every HID page uses this gate;
 // awaiting it makes Nuxt Suspense keep rendering the previous page until the
 // site request finishes, so the URL changes while the visible module appears

package/components/HidIntercomManagement.vue

@@ -46,16 +46,18 @@
       @update:page="page = $event"
     >
       <!-- The action swaps with the tab, as it did in the old top bar. -->
+      <!-- Contacts are reader objects, so adding one is the readers right.
+           The web call is a member level call and stays for everyone. -->
       <template #actions>
         <AppButton
-          v-if="activeTab === 'contacts'"
+          v-if="activeTab === 'contacts' && canManageHidReaders"
           icon="mdi-plus"
           @click="openContactDialog()"
         >
           Add Contacts
         </AppButton>
         <AppButton
-          v-else
+          v-else-if="activeTab !== 'contacts'"
           icon="mdi-phone-in-talk-outline"
           class="web-call-button"
           :class="webPhoneButtonClass"
@@ -151,23 +153,30 @@
           <template #activator="{ props: menuProps }">
             <AppButton v-bind="menuProps" variant="row" icon="mdi-dots-vertical" />
           </template>
+          <!-- The reader's SIP settings, call settings, dial code and contacts
+               are reader configuration: the readers right. View and the status
+               check stay for the view right. -->
           <v-list v-if="activeTab === 'intercom'" density="compact" class="screen-menu">
             <v-list-item class="screen-menu__item" title="View" prepend-icon="mdi-eye" @click="openViewDialog(item)" />
-            <v-list-item
-              class="screen-menu__item"
-              title="Test Connection with SIP"
-              prepend-icon="mdi-lan-check"
-              :disabled="testingSipReaderId === item.reader._id"
-              @click="testSipConnection(item)"
-            />
-            <v-list-item class="screen-menu__item" title="Call Settings" prepend-icon="mdi-cog" @click="openCallDialog(item)" />
-            <v-list-item class="screen-menu__item" title="Dial Code" prepend-icon="mdi-dialpad" @click="openDialCodeDialog(item)" />
+            <template v-if="canManageHidReaders">
+              <v-list-item
+                class="screen-menu__item"
+                title="Test Connection with SIP"
+                prepend-icon="mdi-lan-check"
+                :disabled="testingSipReaderId === item.reader._id"
+                @click="testSipConnection(item)"
+              />
+              <v-list-item class="screen-menu__item" title="Call Settings" prepend-icon="mdi-cog" @click="openCallDialog(item)" />
+              <v-list-item class="screen-menu__item" title="Dial Code" prepend-icon="mdi-dialpad" @click="openDialCodeDialog(item)" />
+            </template>
           </v-list>
           <v-list v-else density="compact" class="screen-menu">
             <v-list-item class="screen-menu__item" title="Check reader SIP status" prepend-icon="mdi-lan-check" @click="testContactSipStatus(item)" />
             <v-list-item class="screen-menu__item" title="View" prepend-icon="mdi-eye" @click="openContactView(item)" />
-            <v-list-item class="screen-menu__item" title="Edit" prepend-icon="mdi-pencil" @click="openContactDialog(item)" />
-            <v-list-item class="screen-menu__item screen-menu__item--danger" title="Delete" prepend-icon="mdi-delete-outline" @click="openDeleteContact(item)" />
+            <template v-if="canManageHidReaders">
+              <v-list-item class="screen-menu__item" title="Edit" prepend-icon="mdi-pencil" @click="openContactDialog(item)" />
+              <v-list-item class="screen-menu__item screen-menu__item--danger" title="Delete" prepend-icon="mdi-delete-outline" @click="openDeleteContact(item)" />
+            </template>
           </v-list>
         </v-menu>
       </template>
@@ -749,6 +758,10 @@ type IntercomRow = {
   pjsip: Record<string, unknown>;
 };
 
+// Reader configuration (SIP, call settings, dial code, contacts) is the readers
+// right. The screen itself is behind `HidEnabledGate` (the view right).
+const { canManageHidReaders } = useHidAccessPermission();
+
 const {
   getReaders,
   getReaderConfiguration,

package/components/HidProfileQrCode.vue

@@ -121,7 +121,7 @@ import type { HidProfileQr } from "../composables/useHidAmico";
 
 const props = defineProps<{ site: string }>();
 
-const { getReaders, getProfileQr, issueProfileQr, deleteProfileQr } = useHidAmico();
+const { getEnrollmentReaders, getProfileQr, issueProfileQr, deleteProfileQr } = useHidAmico();
 
 type HidReaderOption = { _id: string; name?: string; portalName?: string };
 
@@ -200,7 +200,11 @@ function downloadQr() {
 
 async function loadReaders() {
   if (!props.site) return;
-  const response = toRecord(await getReaders({ site: props.site, page: 1, limit: 100 }));
+  /* The self service list, not the admin one. `GET /readers` sits behind the
+     HID view right, so a member holding only `hid-mgmt:use-hid-access` (the
+     right this page is drawn for) was refused before the picker could fill.
+     `enrollment-readers` is the same site's enabled readers, for members. */
+  const response = toRecord(await getEnrollmentReaders(props.site));
   const data = toRecord(response.data);
   const items = response.items ?? data.items ?? data.readers ?? [];
   readers.value = (Array.isArray(items) ? items : []).filter((reader) => reader?._id);

package/components/HidQrCodeConfiguration.vue

@@ -1,14 +1,14 @@
 <!--
   HID QR CODE CONFIGURATION - the reader's own settings, inside Site Settings.
 
-  It is mounted in `SiteSettings.vue`'s "HID Face Reader" expansion panel, next
+  It is mounted in `SiteSettings.vue`'s "HID Reader" expansion panel, next
   to `HidServiceSettingsPanel`, so it takes the shape the handoff gives a
   settings module BODY: section labels at 13px/700, explanatory lines at
   12-13px/600 in `--muted`, the 38x22 toggle, 40px fields and 38px buttons.
 
   Two pieces of legacy chrome are gone rather than restyled:
     * the `#082e43` navy title bar. The design puts NO card inside an accordion
-      body - the accordion head ("HID Face Reader") is the card, and a second
+      body - the accordion head ("HID Reader") is the card, and a second
       titled panel inside it is a header the design does not draw. Its title is
       kept as the body's first section label.
     * the chevron button that sat on that bar. It had no `@click` and no model: