@7365admin1/layer-common 4.97.1-staging.500 → 4.97.1-staging.502

package/components/HidAccessPermissions.vue

@@ -26,9 +26,9 @@
       <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>
         </div>
 
@@ -45,12 +45,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 TABS"
+                :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>
@@ -121,6 +145,7 @@ import {
   readCandidatePage,
   seedAssignments,
   setAssignment,
+  subjectOfIdentity,
   toAssignmentPayload,
   type HidAssignmentState,
 } from "../utils/hid-permission-assignments";
@@ -156,11 +181,52 @@ 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");
+const currentTab = computed(
+  () => TABS.find((tab) => tab.value === activeTab.value) ?? 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);
@@ -187,6 +253,13 @@ const readerLabel = computed(() => {
   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 +272,7 @@ watch(
     if (!isOpen || !readerId.value) return;
     search.value = "";
     page.value = 1;
+    activeTab.value = "resident";
     void loadAll();
   },
   { immediate: true },
@@ -221,6 +295,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 +311,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 +354,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 +369,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 +404,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 +432,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 +500,15 @@ 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. */
+.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/HidUserEnrollment.vue

@@ -969,6 +969,7 @@ import {
   memberCandidateOf,
   memberHasAccount,
   HID_ALL_SERVICES,
+  enrolmentSubjectOfCategory,
   permissionCategoryOf,
   providerAccountsKnown,
   providerCandidateOf,
@@ -993,6 +994,7 @@ import {
 import {
   seedAssignments,
   setAssignment,
+  subjectOfIdentity,
   toAssignmentPayload,
   type HidAssignmentState,
 } from "../utils/hid-permission-assignments";
@@ -2570,22 +2572,20 @@ async function openEdit(user: HidUser) {
   form.photoPreview = "";
   facialEnrolled.value = hasFacialEnrollment(user);
   /*
-   * Read in the order `createIdentity` validates the links, with one extra
-   * test. A `member` link is how BOTH a property-management member and a
-   * service provider's own employee are stored - the person's membership at
-   * this site - so the identity's `type` is what tells them apart. Without
-   * that test a contractor's edit would be headed "Member".
+   * ONE reading of the links, shared with the Access Permissions screen.
+   * `subjectOfIdentity` knows that a `member` link is how BOTH a
+   * property-management member and a service provider's own employee are stored,
+   * and uses the identity's `type` to tell them apart - without which a
+   * contractor's edit would be headed "Member".
+   *
+   * This was the same ternary written out inline. The other copy of it went
+   * stale, so neither is written out any more.
    */
-  form.subjectCategory = user.person
-    ? "resident"
-    : user.serviceProvider
-    ? "service_provider"
-    : user.member && String(user.type ?? "") === "contractor"
-    ? "service_provider_staff"
-    : "property_management";
-  form.subjectId = String(
-    user.person || user.member || user.serviceProvider || ""
-  );
+  const editedSubject = subjectOfIdentity(user as Record<string, unknown>);
+  form.subjectCategory = enrolmentSubjectOfCategory(
+    editedSubject?.category
+  ) as TEnrolmentSubjectValue;
+  form.subjectId = editedSubject?.subjectId ?? "";
   // 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;

package/components/VehicleQrStickerDialog.vue

@@ -78,48 +78,66 @@
           </p>
           <div class="text-subtitle-2 mt-3 mb-1">Sticker design</div>
           <p class="text-caption text-medium-emphasis mb-2">
-            Pick a look for the stickers. Every choice here has been tested to scan with iSecure365 and iMA365, and the
-            QR code stays the same size. Your choice is remembered on this computer.
+            Pick a look for the stickers. Every choice here has been tested to scan with iSecure365 and iMA365. Your
+            choice is remembered on this computer.
           </p>
-          <v-row dense data-test="vehicle-qr-design">
-            <v-col cols="12" sm="6" md="4" lg>
+          <div class="text-body-2 mb-1">QR code shape</div>
+          <p class="text-caption text-medium-emphasis mb-1">
+            In a shaped code the dots fill the whole shape - the real code sits in the middle with a thin white ring round
+            it, and the plate number goes on the dark tag at the bottom.
+          </p>
+          <div class="shape-picker" role="radiogroup" aria-label="QR code shape" data-test="vehicle-qr-shapes">
+            <button v-for="s in shapeThumbs" :key="s.value" type="button" role="radio" class="shape-option"
+              :class="{ 'shape-option--on': design.shape === s.value }" :aria-checked="design.shape === s.value"
+              :data-shape="s.value" @click="design.shape = s.value">
+              <img class="shape-thumb" :src="s.src" alt="" />
+              <span class="text-caption">{{ s.title }}</span>
+            </button>
+          </div>
+          <v-row dense class="mt-2" data-test="vehicle-qr-design">
+            <v-col cols="12" sm="6" md="4">
+              <v-select v-model="design.size" :items="sizeItems" label="Sticker size" density="compact" hide-details
+                data-test="vehicle-qr-size" />
+            </v-col>
+            <v-col cols="12" sm="6" md="4">
+              <v-select v-model="design.frame" :items="frameItems" label="Frame" density="compact" hide-details
+                data-test="vehicle-qr-frame" />
+            </v-col>
+            <v-col cols="12" sm="6" md="4">
               <v-select v-model="design.dots" :items="DOT_OPTIONS" label="QR dots" density="compact" hide-details />
             </v-col>
-            <v-col cols="12" sm="6" md="4" lg>
+            <v-col cols="12" sm="6" md="4">
               <v-select v-model="design.eyes" :items="EYE_OPTIONS" label="QR corners" density="compact" hide-details />
             </v-col>
-            <v-col cols="12" sm="6" md="4" lg>
+            <v-col cols="12" sm="6" md="4">
               <v-select v-model="design.theme" :items="STICKER_THEMES" item-value="id" label="Colours" density="compact"
                 hide-details />
             </v-col>
-            <v-col cols="12" sm="6" md="4" lg>
+            <v-col cols="12" sm="6" md="4">
               <v-select v-model="design.label" :items="LABEL_OPTIONS" label="Words under the plate" density="compact"
                 hide-details />
             </v-col>
-            <v-col cols="12" sm="6" md="4" lg="auto" class="d-flex align-center">
-              <v-btn variant="text" size="small" class="text-none" @click="resetDesign">Back to the standard look</v-btn>
-            </v-col>
           </v-row>
-          <div class="text-body-2 mt-3 mb-1">Sticker shape</div>
-          <div class="shape-picker" role="radiogroup" aria-label="Sticker shape" data-test="vehicle-qr-shapes">
-            <button v-for="s in shapeThumbs" :key="s.value" type="button" role="radio" class="shape-option"
-              :class="{ 'shape-option--on': design.frame === s.value }" :aria-checked="design.frame === s.value"
-              :data-shape="s.value" @click="design.frame = s.value">
-              <img class="shape-thumb" :src="s.src" alt="" />
-              <span class="text-caption">{{ s.title }}</span>
-            </button>
+          <div class="d-flex align-center flex-wrap">
+            <v-switch v-model="design.cutLines" label="Show cut lines" color="primary" density="compact" hide-details
+              inset class="mt-1 mr-4" data-test="vehicle-qr-cut-lines" />
+            <v-btn variant="text" size="small" class="text-none" @click="resetDesign">Back to the standard look</v-btn>
           </div>
-          <v-switch v-model="design.cutLines" label="Show cut lines" color="primary" density="compact" hide-details inset
-            class="mt-1" data-test="vehicle-qr-cut-lines" />
-          <v-alert type="info" variant="tonal" density="compact" class="mt-1" data-test="vehicle-qr-cut-guide">
-            <div class="font-weight-medium">{{ sheetSummary(design.frame) }}.</div>
-            <div>Print at 100% ("Actual size" in the print window), not "Fit to page", so the QR code stays full size.</div>
+          <v-alert type="warning" variant="tonal" density="compact" class="mt-2" data-test="vehicle-qr-size-info">
+            <div class="font-weight-medium">Sizes - check before you print</div>
+            <ul class="size-list">
+              <li v-for="line in sizeLines" :key="line">{{ line }}</li>
+            </ul>
             <div>
-              How to cut: first cut the sheet into pieces through the middle of the gaps (the small + marks show where),
-              then cut round each sticker {{ design.cutLines ? "on the light-grey line" : "along its edge" }} - with scissors
-              or a cutting machine. Cut off the strip with the unit and owner before pasting.
+              Every sheet also has a small "Size check" bar at the bottom that must measure exactly 10 mm with a ruler. If
+              it does not, the printer shrank or stretched the page - print again at 100%.
             </div>
           </v-alert>
+          <v-alert type="info" variant="tonal" density="compact" class="mt-2" data-test="vehicle-qr-cut-guide">
+            How to cut: first cut the sheet into pieces through the middle of the gaps (the small + marks show where),
+            then cut round each sticker {{ design.cutLines ? "on the light-grey line" : "along its edge" }} - with scissors
+            or a cutting machine. Cut off the strip with the unit and owner before pasting.
+          </v-alert>
           <iframe ref="frame" title="Sticker sheet preview" :srcdoc="docHtml" class="sticker-preview mt-3" />
         </template>
       </v-card-text>
@@ -152,9 +170,11 @@ import {
   defaultStickerIds,
   idsForRequest,
   installerLine,
+  STICKER_QR_MODULES,
   setIds,
-  sheetSummary,
   stickerPlateRows,
+  stickerSizeInfo,
+  stickerSizeLines,
   stickerWarning,
   type StickerItem,
   type StickerPlateRow,
@@ -164,10 +184,12 @@ import {
   DOT_OPTIONS,
   EYE_OPTIONS,
   LABEL_OPTIONS,
-  SHAPE_OPTIONS,
+  QR_SHAPE_OPTIONS,
   QR_ECC,
   STICKER_THEMES,
+  frameOptionsFor,
   normalizeDesign,
+  sizeOptionsFor,
   stickerFaceSvg,
   type StickerDesign,
 } from "../utils/vehicle-qr-design";
@@ -224,18 +246,39 @@ function resetDesign() {
   Object.assign(design, DEFAULT_STICKER_DESIGN);
 }
 
-// A small live picture of every shape in the current dots / corners / colours.
-const sampleCode = QRCode.create("S365V:SamplePreviewToken0000", {
-  errorCorrectionLevel: QR_ECC as QRCode.QRCodeErrorCorrectionLevel,
-}).modules;
+// A small live picture of every QR shape in the current dots / corners / colours.
+const SAMPLE = "S365V:SamplePreviewToken00000";
+const sampleCode = QRCode.create(SAMPLE, { errorCorrectionLevel: QR_ECC as QRCode.QRCodeErrorCorrectionLevel }).modules;
 const shapeThumbs = computed(() => {
   const look = normalizeDesign(design);
-  return SHAPE_OPTIONS.map((o) => ({
-    ...o,
-    src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(stickerFaceSvg(sampleCode, { ...look, frame: o.value, cutLines: false }))}`,
-  }));
+  return QR_SHAPE_OPTIONS.map((o) => {
+    const frame = o.value === "square" ? (look.shape === "square" ? look.frame : "rounded") : "none";
+    const svg = stickerFaceSvg(sampleCode, { ...look, shape: o.value, frame, size: "standard", cutLines: false }, SAMPLE);
+    return { ...o, src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}` };
+  });
 });
 
+// A shape change can leave a frame or size that shape does not offer (the badge
+// frame, or a size whose QR would print under 25 mm): fall back to one it does.
+watch(
+  () => [design.shape, design.frame, design.size],
+  () => {
+    const fixed = normalizeDesign(design);
+    if (!sizeOptionsFor(fixed, STICKER_QR_MODULES).some((o) => o.value === fixed.size)) fixed.size = "standard";
+    if (fixed.frame !== design.frame) design.frame = fixed.frame;
+    if (fixed.size !== design.size) design.size = fixed.size;
+  },
+);
+const frameItems = computed(() => frameOptionsFor(design.shape));
+const sizeItems = computed(() => {
+  const look = normalizeDesign(design);
+  return sizeOptionsFor(look, STICKER_QR_MODULES).map((o) => {
+    const info = stickerSizeInfo({ ...look, size: o.value });
+    return { value: o.value, title: `${o.title} - ${Math.round(info.shapeW)} mm wide, QR ${Math.round(info.qrMm)} mm` };
+  });
+});
+const sizeLines = computed(() => stickerSizeLines(normalizeDesign(design)));
+
 const allOnPageTicked = computed(() => plates.value.length > 0 && plates.value.every((p) => selected.value.includes(p.id)));
 const someOnPageTicked = computed(() => plates.value.some((p) => selected.value.includes(p.id)));
 
@@ -307,9 +350,9 @@ async function goReview() {
   }
 }
 
-// The same document is the preview and the print job. The QR content, error
-// correction (Q), 4-module quiet zone and 32 mm size are the same on every
-// design; only the look of the dots, corners, colours and frame changes.
+// The same document is the preview and the print job. The QR content and error
+// correction (Q) are the same on every design; the shape, size and look change,
+// and every sheet carries the sizes and a 10 mm size check.
 watch(
   [items, ticked, design, siteName],
   () => {
@@ -319,10 +362,9 @@ watch(
       return;
     }
     const look = normalizeDesign(design);
-    const faces = chosen.map((i) =>
-      stickerFaceSvg(QRCode.create(i.qr, { errorCorrectionLevel: QR_ECC as QRCode.QRCodeErrorCorrectionLevel }).modules, look),
-    );
-    docHtml.value = buildStickerDocument(chosen, faces, { design: look, siteName: siteName.value });
+    const codes = chosen.map((i) => QRCode.create(i.qr, { errorCorrectionLevel: QR_ECC as QRCode.QRCodeErrorCorrectionLevel }).modules);
+    const faces = chosen.map((i, k) => stickerFaceSvg(codes[k], look, i.qr));
+    docHtml.value = buildStickerDocument(chosen, faces, { design: look, siteName: siteName.value, modules: codes[0].size });
   },
   { deep: true },
 );
@@ -336,6 +378,9 @@ function print() {
 </script>
 
 <style scoped>
+.size-list {
+  margin: 2px 0 4px 18px;
+}
 .shape-picker {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.97.1-staging.500",
+  "version": "4.97.1-staging.502",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/utils/hid-enrolment-subject.ts

@@ -240,6 +240,28 @@ export function permissionCategoryOf(category: unknown): string {
   return "property_management";
 }
 
+/**
+ * The dropdown value for a grant's category — the inverse of
+ * `permissionCategoryOf`.
+ *
+ * An edit STATES the subject type rather than offering it, because an identity's
+ * category cannot change after it is created. This is how a stored record is
+ * turned back into the value the form holds, and it is wider than the dropdown on
+ * purpose: records in the wild carry `service_provider`, which names a COMPANY
+ * and which the dropdown does not offer.
+ *
+ * Paired with `subjectOfIdentity` so the mapping lives in one place. `openEdit`
+ * used to repeat the whole links-and-type ternary inline, which is how the copy
+ * in `HidAccessPermissions.vue` was able to go stale without anything noticing.
+ */
+export function enrolmentSubjectOfCategory(category: unknown): string {
+  const value = String(category ?? "");
+  if (value === "resident") return "resident";
+  if (value === "service_provider_member") return "service_provider_staff";
+  if (value === "service_provider") return "service_provider";
+  return "property_management";
+}
+
 /* ── PROVIDER STAFF AS PICKER ROWS ─────────────────────────────────────── */
 
 /**