@7365admin1/layer-common 4.97.1-staging.506 → 4.97.1-staging.508

package/components/HidAccessPermissions.vue

@@ -30,6 +30,14 @@
             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>
 
         <v-card-text class="hid-access-permissions__body">
@@ -56,7 +64,7 @@
                  draft, so it follows an unsaved tick. -->
             <template #tabs>
               <button
-                v-for="tab in TABS"
+                v-for="tab in visibleTabs"
                 :key="tab.value"
                 type="button"
                 class="app-tab"
@@ -149,6 +157,9 @@ import {
   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.
@@ -213,8 +224,35 @@ const TABS = [
 }>;
 
 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(
-  () => TABS.find((tab) => tab.value === activeTab.value) ?? TABS[0],
+  () => 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. */
@@ -272,7 +310,10 @@ watch(
     if (!isOpen || !readerId.value) return;
     search.value = "";
     page.value = 1;
-    activeTab.value = "resident";
+    // 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 },
@@ -502,6 +543,13 @@ function getErrorMessage(error: unknown, fallback: string) {
 <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);

package/components/HidReaderForm.vue

@@ -49,6 +49,43 @@
           Disabling keeps the reader in Standalone mode and uses manual log pulls instead.
         </p>
 
+        <!-- WHO THIS READER IS FOR.
+             A site with several doors rarely wants every door open to everybody:
+             a service entrance for contractors, a lobby for residents. Switching
+             an audience off stops new grants in that category - the server
+             refuses them, so this is not only a hint - and takes the matching tab
+             off the Access Permissions screen.
+             Each switch says what it DOES rather than only what it is called: a
+             row of four labels with no sentences is a guess about what they
+             control. -->
+        <InputLabel title="Who may use this reader" required class="mb-1" />
+        <div class="reader-audiences mb-1">
+          <div
+            v-for="field in audienceFields"
+            :key="field.value"
+            class="reader-audience"
+          >
+            <v-switch
+              v-model="audiences[field.value]"
+              :label="field.label"
+              :aria-label="field.label"
+              hide-details
+              inset
+              density="compact"
+              :color="audiences[field.value] ? 'success' : 'muted'"
+            />
+            <p class="reader-audience__hint">{{ field.hint }}</p>
+          </div>
+        </div>
+        <p v-if="noAudienceSelected" class="reader-discovery-hint reader-audiences__empty mb-3">
+          Nobody can be enrolled on this reader while all four are off. Existing
+          people keep the access they already have.
+        </p>
+        <p v-else class="reader-discovery-hint mt-1 mb-3">
+          Switching one off stops new people of that kind being given this reader.
+          It does not remove anybody who already has it.
+        </p>
+
         <InputLabel title="Username" required class="mb-1" />
         <v-text-field
           v-model="draft.username"
@@ -214,6 +251,15 @@
 </template>
 
 <script setup lang="ts">
+/* Mirrors core's `hid-reader-audience.util.ts`, which is what enforces this —
+   kept in a util with tests because the absent-means-all default is the part
+   that could close a door by accident. */
+import {
+  HID_READER_AUDIENCE_FIELDS,
+  readerAudiences,
+  type THidReaderAudiences,
+} from "../utils/hid-reader-audiences";
+
 type HidReaderFormRecord = {
   name?: string;
   baseUrl?: string;
@@ -248,6 +294,7 @@ type HidReaderFormPayload = {
   pacsFormat: "raw" | "wiegand";
   operatingMode: "standalone" | "online";
   monitorEnabled: boolean;
+  audiences: THidReaderAudiences;
 };
 
 const props = defineProps({
@@ -314,6 +361,24 @@ const draft = reactive({
   operatingMode: "standalone" as "standalone" | "online",
 });
 
+/*
+ * WHO THIS READER IS FOR. All four on by default, which is the same reading core
+ * gives an absent field - a reader being added should not quietly be closed to
+ * somebody because a switch defaulted off.
+ */
+const audiences = reactive<THidReaderAudiences>({
+  resident: true,
+  residentVisitor: true,
+  member: true,
+  serviceProvider: true,
+});
+const audienceFields = HID_READER_AUDIENCE_FIELDS;
+/* Switching every audience off leaves a reader nobody can be enrolled on, which
+   is legal but almost never meant - so it is said out loud rather than refused. */
+const noAudienceSelected = computed(() =>
+  HID_READER_AUDIENCE_FIELDS.every((field) => audiences[field.value] === false)
+);
+
 const cardModeOptions = [
   { title: "PACS (facility code + card number)", value: "pacs" },
   { title: "CSN", value: "csn" },
@@ -352,6 +417,10 @@ watch(
     discoveryError.value = "";
     discoveredConnection.value = "";
     draft.location = props.reader?.location ?? "";
+    // Read through `readerAudiences`, so a reader saved before this field
+    // existed opens with all four on rather than all four off - and a save from
+    // this form therefore cannot close it by accident.
+    Object.assign(audiences, readerAudiences(props.reader as Record<string, unknown> | null));
     draft.username = props.reader?.username ?? "";
     draft.password = props.reader?.password ?? "";
     monitorEnabled.value = props.reader?.monitorStatus !== "disabled";
@@ -451,6 +520,9 @@ function submit() {
     ...draft,
     portalName: portal?.name || draft.portalName,
     monitorEnabled: monitorEnabled.value,
+    // Spread, not passed by reference: the payload leaves this dialog and the
+    // reactive object keeps being edited behind it.
+    audiences: { ...audiences },
   };
 
   emit("submit", payload);
@@ -462,6 +534,28 @@ function submit() {
   overflow: hidden;
 }
 
+/* Four rows rather than a row of four: each switch carries a sentence, and at
+   phone width a horizontal strip would either wrap badly or clip the hints. */
+.reader-audiences {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.reader-audience__hint {
+  margin: -4px 0 0;
+  padding-left: 2px;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+/* Said in the warning colour, not refused: a reader nobody may use is legal and
+   occasionally deliberate - a door being decommissioned. */
+.reader-audiences__empty {
+  color: var(--err);
+}
+
 /* Type comes from `.screen-modal .v-card-title`; only the header strip's own
    padding and rule stay here. `#ececec` was a fixed near-white line, i.e.
    invisible on a light card and a bright scratch across a dark one. */

package/components/HidUserEnrollment.vue

@@ -274,13 +274,26 @@
                it. -->
           <div class="field-label">Enrolling <span>*</span></div>
           <AppSelect
-            v-if="!selectedUser"
+            v-if="!selectedUser && subjectCategoryOptions.length"
             v-model="form.subjectCategory"
             :items="subjectCategoryOptions"
             klass="mb-3"
             @update:model-value="onSubjectCategoryChanged"
           />
-          <p v-else class="field-hint mb-3">{{ subjectCategoryLabel }}</p>
+          <p v-else-if="selectedUser" class="field-hint mb-3">{{ subjectCategoryLabel }}</p>
+          <!-- WHY THERE IS NOTHING TO PICK. Drawn in place of the dropdown when
+               the reader serves nobody, and beneath it when only some types were
+               removed. Without it, a missing option reads as a screen that failed
+               to load rather than as a setting on the reader.
+               Nothing extra is needed to stop the save: with no type there is no
+               subject, and the save already refuses that. -->
+          <p
+            v-if="!selectedUser && subjectCategoryNote"
+            class="field-hint mb-3"
+            :class="{ 'field-hint--error': enrolmentSubjects.emptied }"
+          >
+            {{ subjectCategoryNote }}
+          </p>
 
           <!-- Block / Level / Unit / Resident. Enrolment only.
                Enrollment is resident-only and the resident must already exist
@@ -980,6 +993,9 @@ import {
   subjectLinkOf,
   type HidEnrolmentSubject,
 } from "../utils/hid-enrolment-subject";
+/* Mirrors core's audience rules — core is what enforces them; this only decides
+   which types are worth offering. */
+import { availableEnrolmentSubjects } from "../utils/hid-reader-audiences";
 /* The SAME filter the Members > Service Providers screen applies, not a second
    copy of the rule: a picker that disagrees with the screen the operator was
    just looking at is a picker they cannot trust. Core applies it to the Excel
@@ -1367,7 +1383,36 @@ const unitResidentNote = computed(() => {
 
 /* ── THE SUBJECT TYPE ──────────────────────────────────────────────────── */
 
-const subjectCategoryOptions = HID_ENROLMENT_SUBJECTS;
+/**
+ * ONLY THE TYPES THE TARGETED READER WILL ACCEPT.
+ *
+ * Offering one it refuses is not merely untidy: the server rejects the grant on
+ * SAVE, after a person has been chosen and a face captured - and the capture is
+ * the expensive step at a reader.
+ *
+ * A SET of readers rather than one, so the fan-out enrolment that lands a person
+ * on every matching reader asks the same question without this being rewritten.
+ * Today the set holds whichever reader the screen has selected.
+ */
+const enrolmentSubjects = computed(() => availableEnrolmentSubjects(
+  [selectedReader.value as Record<string, unknown> | null],
+  HID_ENROLMENT_SUBJECTS,
+  (option) => permissionCategoryOf(option.value),
+));
+const subjectCategoryOptions = computed(() => enrolmentSubjects.value.options);
+
+/* Why a type is missing, and - when none is left - why there is nothing to pick.
+   An absent option with no explanation reads as a broken screen. */
+const subjectCategoryNote = computed(() => {
+  if (enrolmentSubjects.value.emptied) {
+    return "This reader has no types switched on. Switch Resident, Member or"
+      + " Service provider on in the reader's settings before enrolling anybody here.";
+  }
+  if (enrolmentSubjects.value.narrowed) {
+    return "Only the kinds of people this reader serves are listed.";
+  }
+  return "";
+});
 
 const isResidentSubject = computed(() => form.subjectCategory === "resident");
 /* Members and provider staff both pick ONE PERSON from a flat list, but from
@@ -2184,7 +2229,14 @@ async function init() {
   await loadUsers();
 }
 
-async function loadReaders() {
+/**
+ * `resolveSelection` is off when the enrolment dialog refreshes this.
+ *
+ * The tail of this function re-resolves the SHARED reader selection, which is
+ * right on first load and wrong from a dialog: opening Enroll should not be able
+ * to move the reader the operator picked on the screen behind it.
+ */
+async function loadReaders(options: { resolveSelection?: boolean } = {}) {
   if (!props.site) return;
   const response = await getReaders({ site: props.site, page: 1, limit: 100 });
   const responseRecord = toRecord(response);
@@ -2198,7 +2250,9 @@ async function loadReaders() {
      resolver refuses a remembered reader that is not this site's, so a site
      switch or a deleted reader falls back to the first rather than querying
      an id the site does not own. */
-  selectedReaderId.value = resolveForSite(props.site, readers.value);
+  if (options.resolveSelection !== false) {
+    selectedReaderId.value = resolveForSite(props.site, readers.value);
+  }
 }
 
 /**
@@ -2334,9 +2388,19 @@ function resetForm() {
   selectedPhotoFile.value = null;
   removePhotoRequested.value = false;
   facialEnrolled.value = false;
-  // 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;
+  /*
+   * The type the operator last enrolled, not a hard "resident": somebody adding
+   * a shift of guards should not re-pick Member for each one.
+   *
+   * UNLESS this reader does not serve it. `AppSelect` draws blank when its value
+   * is not among its items - the same way "All services" drew blank when its
+   * value was "" - so the remembered type falls back to the first one on offer.
+   */
+  const offered = subjectCategoryOptions.value;
+  const remembered = REMEMBERED_SUBJECT_CATEGORY.value;
+  form.subjectCategory = offered.some((option) => option.value === remembered)
+    ? remembered
+    : (offered[0]?.value ?? remembered);
   form.subjectId = "";
   form.subjectRole = "";
   residentConflict.value = null;
@@ -2533,11 +2597,25 @@ async function checkSubjectEnrollment() {
 
 async function openEnroll() {
   selectedUser.value = null;
-  resetForm();
+  /*
+   * READERS FIRST, and before `resetForm`.
+   *
+   * The audiences decide which types are offered and which one the form opens
+   * on, and they are edited on a different screen - so the copy loaded when this
+   * screen mounted can be stale by the time somebody clicks Enroll. Without this
+   * the dropdown offers a type the reader no longer serves until the page is
+   * reloaded.
+   *
+   * Folded into the same wait as the id allocations so it costs no extra delay,
+   * and with the shared selection left alone: opening Enroll must not move the
+   * reader chosen on the screen behind it.
+   */
   const [hidUserId, registration] = await Promise.all([
     getNextUid(),
     getNextRegistration(),
+    loadReaders({ resolveSelection: false }),
   ]);
+  resetForm();
   form.hidUserId = hidUserId;
   form.registration = registration;
   formDialog.value = true;

package/components/VehicleQrStickerDialog.vue

@@ -144,8 +144,9 @@
           </v-alert>
           <v-alert type="info" variant="tonal" density="compact" class="mt-2" data-test="vehicle-qr-save-guide">
             To print the same stickers again later: <b>Save sheet file</b> keeps this exact sheet on your computer - open
-            it any time and print (at 100%). <b>Save as PNG</b> gives one picture per sticker (300 or 600 dpi, real size),
-            e.g. for a print shop; several stickers come in one ZIP file. You can also come back to Vehicles any time and
+            it any time and print (at 100%). <b>Save as image</b> gives one PNG or JPEG picture per sticker (300 or 600 dpi,
+            real size), e.g. for a print shop; several stickers come in one ZIP file. PNG keeps the outside of a shaped
+            sticker see-through; JPEG puts it on white. You can also come back to Vehicles any time and
             print again - a vehicle keeps the same QR code until it is regenerated.
           </v-alert>
           <iframe ref="frame" title="Sticker sheet preview" :srcdoc="docHtml" class="sticker-preview mt-3" />
@@ -168,13 +169,14 @@
           <v-menu location="top">
             <template #activator="{ props: menu }">
               <v-btn v-bind="menu" variant="tonal" class="text-none" prepend-icon="mdi-file-image"
-                :disabled="!ticked.length || !docHtml" :loading="savingPng" data-test="vehicle-qr-save-png">
-                Save as PNG
+                :disabled="!ticked.length || !docHtml" :loading="savingImage" data-test="vehicle-qr-save-image">
+                Save as image
               </v-btn>
             </template>
             <v-list density="compact">
-              <v-list-item v-for="d in [300, 600]" :key="d" :title="`${d} dpi${d === 600 ? ' (sharpest)' : ''}`"
-                :data-test="`vehicle-qr-png-${d}`" @click="savePng(d)" />
+              <v-list-item v-for="o in IMAGE_CHOICES" :key="o.format + o.dpi"
+                :title="`${o.format.toUpperCase()} - ${o.dpi} dpi${o.dpi === 600 ? ' (sharpest)' : ''}`"
+                :data-test="`vehicle-qr-${o.format}-${o.dpi}`" @click="saveImages(o.format, o.dpi)" />
             </v-list>
           </v-menu>
         </template>
@@ -191,7 +193,7 @@
 import QRCode from "qrcode";
 import useVehicle from "../composables/useVehicle";
 import { errorConverter } from "../utils/data";
-import { pngWithDpi, saveFile, stickerBundleName, stickerFileNames, svgToPng, zipFiles } from "../utils/vehicle-qr-export";
+import { saveFile, stickerBundleName, stickerFileNames, svgToImage, zipFiles, type ImageFormat } from "../utils/vehicle-qr-export";
 import {
   STICKER_MAX_PER_REQUEST,
   buildStickerDocument,
@@ -423,26 +425,33 @@ function saveSheet() {
   saveFile(`${stickerBundleName(siteName.value)}.html`, docHtml.value, "text/html");
 }
 
-const savingPng = ref(false);
-/** One PNG per sticker at real size; more than one come in a ZIP. */
-async function savePng(dpi: number) {
+const IMAGE_CHOICES: { format: ImageFormat; dpi: number }[] = [
+  { format: "png", dpi: 300 },
+  { format: "png", dpi: 600 },
+  { format: "jpeg", dpi: 300 },
+  { format: "jpeg", dpi: 600 },
+];
+const savingImage = ref(false);
+/** One PNG or JPEG per sticker at real size; more than one come in a ZIP. */
+async function saveImages(format: ImageFormat, dpi: number) {
   const chosen = chosenItems();
   if (!chosen.length) return;
-  savingPng.value = true;
+  savingImage.value = true;
   error.value = "";
   try {
     const [faces, opts] = faceArgs(chosen);
     const cards = stickerCardSvgs(chosen, faces, { ...opts, dpi });
-    const names = stickerFileNames(chosen.map((i) => i.plateNumber));
+    const ext = format === "jpeg" ? "jpg" : "png";
+    const names = stickerFileNames(chosen.map((i) => i.plateNumber), ext);
     const files = [];
-    for (const [k, c] of cards.entries()) files.push({ name: names[k], data: pngWithDpi(await svgToPng(c.svg, c.width, c.height), dpi) });
-    if (files.length === 1) saveFile(files[0].name, files[0].data, "image/png");
+    for (const [k, c] of cards.entries()) files.push({ name: names[k], data: await svgToImage(c.svg, c.width, c.height, format, dpi) });
+    if (files.length === 1) saveFile(files[0].name, files[0].data, `image/${format}`);
     else saveFile(`${stickerBundleName(siteName.value)}.zip`, zipFiles(files), "application/zip");
   } catch (e: any) {
     console.error(e);
-    error.value = "The PNG files could not be made in this browser - use Save sheet file instead, or try Chrome or Edge.";
+    error.value = "The pictures could not be made in this browser - use Save sheet file instead, or try Chrome or Edge.";
   } finally {
-    savingPng.value = false;
+    savingImage.value = false;
   }
 }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.97.1-staging.506",
+  "version": "4.97.1-staging.508",
   "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-reader-audiences.ts

@@ -0,0 +1,179 @@
+/**
+ * WHO A READER IS FOR — the frontend's reading of it.
+ *
+ * Mirrors `hid-reader-audience.util.ts` in core, which is the authority and the
+ * only thing that enforces it. This repository cannot import core's copy, so
+ * there is one here — and it lives in a util with tests rather than inside a
+ * component, because the DEFAULT is the part that can take a door offline.
+ *
+ * A site with several doors rarely wants every door open to everybody: a service
+ * entrance for contractors, a lobby for residents. Declaring that on the reader
+ * is what lets an enrolment work out which readers a person belongs on.
+ */
+
+export const HID_READER_AUDIENCES = [
+  "resident",
+  "residentVisitor",
+  "member",
+  "serviceProvider",
+] as const;
+
+export type THidReaderAudience = (typeof HID_READER_AUDIENCES)[number];
+export type THidReaderAudiences = Record<THidReaderAudience, boolean>;
+
+/** What each switch is called, and what it means, on the reader form. */
+export const HID_READER_AUDIENCE_FIELDS: ReadonlyArray<{
+  value: THidReaderAudience;
+  label: string;
+  hint: string;
+}> = [
+  {
+    value: "resident",
+    label: "Resident",
+    hint: "Residents of this site may be enrolled on this reader.",
+  },
+  {
+    value: "residentVisitor",
+    label: "Resident visitor",
+    hint: "A resident may issue a visitor QR pass for this reader.",
+  },
+  {
+    value: "member",
+    label: "Member",
+    hint: "Property management staff may be enrolled on this reader.",
+  },
+  {
+    value: "serviceProvider",
+    label: "Service provider",
+    hint: "A service provider's people may be enrolled on this reader.",
+  },
+];
+
+/**
+ * ABSENT MEANS ALL FOUR, and that is the whole backward-compatibility story.
+ *
+ * Every reader registered before this field existed has no `audiences`. Reading
+ * that as "serves nobody" would show every existing reader as closed to
+ * everyone, and - worse - a save from that screen would then write those
+ * falsehoods and actually close them.
+ *
+ * A field that is present but missing a key is read the same way, so a partial
+ * record cannot quietly close a door either. Only a real `false` closes one.
+ */
+export function readerAudiences(
+  reader: Record<string, unknown> | null | undefined,
+): THidReaderAudiences {
+  const stored = reader?.audiences;
+  const record = stored && typeof stored === "object"
+    ? stored as Record<string, unknown>
+    : {};
+  return HID_READER_AUDIENCES.reduce((audiences, audience) => ({
+    ...audiences,
+    [audience]: record[audience] === undefined ? true : record[audience] === true,
+  }), {} as THidReaderAudiences);
+}
+
+/** Does this reader serve that audience? */
+export function readerServesAudience(
+  reader: Record<string, unknown> | null | undefined,
+  audience: THidReaderAudience,
+): boolean {
+  return readerAudiences(reader)[audience] === true;
+}
+
+/**
+ * The audience a permission category answers to.
+ *
+ * Both service-provider categories share one switch: a property manager thinks
+ * "may contractors use this door", not "may contractor companies use it as
+ * distinct from contractor people". Unrecognised returns null, so a category
+ * added later is visibly unmapped rather than silently lumped in with one.
+ */
+export function audienceOfCategory(category: unknown): THidReaderAudience | null {
+  switch (String(category ?? "")) {
+    case "resident":
+      return "resident";
+    case "property_management":
+      return "member";
+    case "service_provider":
+    case "service_provider_member":
+      return "serviceProvider";
+    default:
+      return null;
+  }
+}
+
+/**
+ * Which of the Access Permissions tabs this reader is worth showing.
+ *
+ * A reader that serves nobody in 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.
+ *
+ * NEVER RETURNS NOTHING. A reader with every audience switched off would leave a
+ * dialog with no tabs and no explanation, which reads as a broken screen; the
+ * first tab is kept so there is always something to show, and it will simply be
+ * empty. The caller is told whether that happened so it can say why.
+ */
+export function visibleAudienceTabs<T extends { category: unknown }>(
+  reader: Record<string, unknown> | null | undefined,
+  tabs: readonly T[],
+): { tabs: T[]; narrowed: boolean; emptied: boolean } {
+  const served = tabs.filter((tab) => {
+    const audience = audienceOfCategory(tab.category);
+    return audience ? readerServesAudience(reader, audience) : false;
+  });
+  if (!served.length) {
+    return { tabs: tabs.slice(0, 1), narrowed: true, emptied: true };
+  }
+  return { tabs: served, narrowed: served.length !== tabs.length, emptied: false };
+}
+
+/**
+ * WHICH SUBJECT TYPES CAN BE ENROLLED on the readers being targeted.
+ *
+ * Takes a SET of readers rather than one, deliberately. Today an enrolment goes
+ * to the reader selected on the screen, so the set has one member; once
+ * enrolment fans out to every reader whose audiences match, the same question is
+ * asked of several. Shaping it this way now means the call site changes later
+ * and this does not.
+ *
+ * Offering a type the reader will not accept is not merely untidy: the server
+ * refuses the grant, and it refuses it on SAVE - after the operator has chosen a
+ * person and captured a face, which on a reader is the expensive step.
+ *
+ * `category` on each option is the dropdown's own value, mapped to a permission
+ * category and then to an audience by composing the two functions that already
+ * exist, rather than by a third mapping that could drift from them.
+ */
+export function availableEnrolmentSubjects<T extends { value: unknown }>(
+  readers: ReadonlyArray<Record<string, unknown> | null | undefined>,
+  options: readonly T[],
+  categoryOfOption: (option: T) => unknown,
+): { options: T[]; narrowed: boolean; emptied: boolean } {
+  /*
+   * NO READER YET IS NOT "NO AUDIENCES". The dialog can be mounted before a
+   * reader has been chosen, and showing nothing then would read as a reader that
+   * serves nobody rather than as a question not yet answered.
+   */
+  const known = readers.filter(Boolean) as Array<Record<string, unknown>>;
+  if (!known.length) {
+    return { options: [...options], narrowed: false, emptied: false };
+  }
+
+  const served = options.filter((option) => {
+    const audience = audienceOfCategory(categoryOfOption(option));
+    if (!audience) return false;
+    // ANY of the targeted readers is enough: the enrolment lands on whichever
+    // of them serve this person, not on all of them.
+    return known.some((reader) => readerServesAudience(reader, audience));
+  });
+
+  return {
+    options: served,
+    narrowed: served.length !== options.length,
+    // Nothing offered at all. The caller says why rather than drawing an empty
+    // dropdown, which looks like a screen that failed to load.
+    emptied: !served.length,
+  };
+}

package/utils/vehicle-qr-export.ts

@@ -1,8 +1,8 @@
 /**
- * Vehicle QR stickers - saving them as files (PNG images, a ZIP of PNGs, or the
+ * Vehicle QR stickers - saving them as files (PNG / JPEG images, a ZIP of them, or the
  * print sheet itself) so the same stickers can be printed again later.
  *
- * The byte work (PNG print size, ZIP) is pure so `node --test` can run it; the
+ * The byte work (PNG / JPEG print size, ZIP) is pure so `node --test` can run it; the
  * browser part (SVG -> canvas -> PNG, download) is at the bottom.
  */
 
@@ -41,6 +41,26 @@ export function pngWithDpi(png: Uint8Array, dpi: number): Uint8Array {
   return out;
 }
 
+/**
+ * Stamp the print size into a JPEG's JFIF header (dots per inch), adding the
+ * header when the encoder left it out.
+ */
+export function jpegWithDpi(jpeg: Uint8Array, dpi: number): Uint8Array {
+  const isJfif = jpeg[2] === 0xff && jpeg[3] === 0xe0 && String.fromCharCode(...jpeg.subarray(6, 11)) === "JFIF\0";
+  const out = isJfif ? jpeg.slice() : new Uint8Array(jpeg.length + 18);
+  if (!isJfif) {
+    out.set([0xff, 0xd8, 0xff, 0xe0, 0, 16, 0x4a, 0x46, 0x49, 0x46, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0]);
+    out.set(jpeg.subarray(2), 20);
+  }
+  const v = new DataView(out.buffer);
+  out[13] = 1; // unit: dots per inch
+  v.setUint16(14, dpi);
+  v.setUint16(16, dpi);
+  return out;
+}
+
+export type ImageFormat = "png" | "jpeg";
+
 /**
  * A plain ZIP (stored, no compression - PNGs are already compressed) that
  * Windows, macOS and phones open without extra software.
@@ -103,14 +123,14 @@ export function fileNamePart(value: unknown, fallback = "sticker"): string {
   return s || fallback;
 }
 
-/** One PNG name per sticker, by plate; the same plate twice gets -2, -3. */
-export function stickerFileNames(plates: unknown[]): string[] {
+/** One image name per sticker, by plate; the same plate twice gets -2, -3. */
+export function stickerFileNames(plates: unknown[], ext = "png"): string[] {
   const seen = new Map<string, number>();
   return plates.map((p) => {
     const base = fileNamePart(p).toUpperCase();
     const n = (seen.get(base) ?? 0) + 1;
     seen.set(base, n);
-    return `${base}${n > 1 ? `-${n}` : ""}.png`;
+    return `${base}${n > 1 ? `-${n}` : ""}.${ext}`;
   });
 }
 
@@ -122,8 +142,12 @@ export function stickerBundleName(siteName: unknown, when = new Date()): string
 
 // ---- browser only -------------------------------------------------------
 
-/** Draw an SVG image (sized in pixels) onto a canvas and return the PNG bytes. */
-export async function svgToPng(svg: string, width: number, height: number): Promise<Uint8Array> {
+/**
+ * Draw an SVG image (sized in pixels) onto a canvas and return the PNG or JPEG
+ * bytes with the print size stamped in. JPEG has no see-through, so it gets
+ * white paper behind the sticker; quality 0.95 keeps the QR edges clean.
+ */
+export async function svgToImage(svg: string, width: number, height: number, format: ImageFormat, dpi: number): Promise<Uint8Array> {
   const img = new Image();
   img.decoding = "sync";
   img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
@@ -131,10 +155,16 @@ export async function svgToPng(svg: string, width: number, height: number): Prom
   const canvas = document.createElement("canvas");
   canvas.width = width;
   canvas.height = height;
-  canvas.getContext("2d")!.drawImage(img, 0, 0, width, height);
-  const blob = await new Promise<Blob | null>((ok) => canvas.toBlob(ok, "image/png"));
+  const ctx = canvas.getContext("2d")!;
+  if (format === "jpeg") {
+    ctx.fillStyle = "#fff";
+    ctx.fillRect(0, 0, width, height);
+  }
+  ctx.drawImage(img, 0, 0, width, height);
+  const blob = await new Promise<Blob | null>((ok) => canvas.toBlob(ok, `image/${format}`, 0.95));
   if (!blob) throw new Error("This browser could not make the picture.");
-  return new Uint8Array(await blob.arrayBuffer());
+  const bytes = new Uint8Array(await blob.arrayBuffer());
+  return format === "jpeg" ? jpegWithDpi(bytes, dpi) : pngWithDpi(bytes, dpi);
 }
 
 /** Hand the browser a file to save (it goes to the Downloads folder). */