@7365admin1/layer-common 4.90.3 → 4.92.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @iservice365/layer-common
 
+## 4.92.0
+
+### Minor Changes
+
+- 9883bfd: Invite member: pick several sites in one invitation.
+
+  - `InvitationForm`: when it is the org-level "Invite member" (no fixed site), the Site field is a multi-select with removable chips (at least one site required). One site: roles are that site's roles plus organisation roles, as before. Two or more: only organisation roles are offered (a site role is valid at its own site only), with a hint saying so and how to give different roles per site. Site apps and onboarding keep their fixed single site.
+  - `useUser().inviteMemberClient` takes `sites`: one site sends `siteId` as before, several send `siteIds` (needs the matching `@7365admin1/core` release; older core ignores it). New helper `utils/invite-sites.ts`.
+  - `InvitationMain`: the Organization app's Invitations list no longer filters to `app: organization`, so site invitations sent from there are listed (the "Site Invited To" column shows each site). Site apps are unchanged.
+
+## 4.91.0
+
+### Minor Changes
+
+- 4401c78: Vehicle QR stickers (web). Settings gets a "Vehicle QR stickers" switch (people who may update vehicles). When it is on, Vehicle Mgmt gets "Print QR stickers": pick vehicles (this page, or every match for the tab and search), check each one's Blk-Level-Unit, owner, plate and any expired / blocklisted warning, then print an A4 sheet of compact stickers (QR drawn in the browser, plate, Powered by Seven365) with a cut-off installer strip under a dashed line naming the unit and owner. Per-vehicle "Re-issue sticker" (the old sticker stops working). Needs core vehicle-qr (core #2644/#2645, API-core #1538/#1539).
+
 ## 4.90.3
 
 ### Patch Changes
@@ -2028,11 +2044,11 @@
   `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/InvitationForm.vue

@@ -88,13 +88,24 @@
                   persistent-hint
                   data-test="invite-fixed-site"
                 ></v-text-field>
+                <!--
+                  Several sites (owner request 2026-10-02): one invitation per
+                  site, one e-mail. One role for all of them, so 2+ sites offer
+                  organisation roles only (see `roleSiteFor`).
+                -->
                 <v-autocomplete
                   v-else
-                  v-model="invite.site"
+                  v-model="invite.sites"
                   :items="sites"
+                  multiple
+                  chips
+                  closable-chips
                   class="filter-field"
                   density="comfortable"
-                  :rules="[requiredRule]"
+                  :rules="[sitesRule]"
+                  :hint="invite.sites.length > 1 ? severalSitesHint : ''"
+                  :persistent-hint="invite.sites.length > 1"
+                  data-test="invite-sites"
                   @update:model-value="handleUpdateSite"
                 ></v-autocomplete>
               </v-col>
@@ -163,6 +174,7 @@ import { useLocalSetup } from '../composables/useLocalSetup';
 import useRole from '../composables/useRole';
 import useSite from '../composables/useSite';
 import { inviteRoleOptions } from '../utils/invite-role-options';
+import { roleSiteFor } from '../utils/invite-sites';
 import useUser from '../composables/useUser';
 import useUtils from '../composables/useUtils';
 
@@ -276,6 +288,8 @@ const invite = ref<Record<string, any>>({
   role: "",
   org: "",
   site: "",
+  // the sites picked in the Site field (several allowed); `site` follows it
+  sites: [] as string[],
   siteName: "",
   isMemberInvite: false,
 });
@@ -501,9 +515,17 @@ watchEffect(() => {
 
 const roleOptions = computed(() => inviteRoleOptions(roles.value));
 
+const severalSitesHint =
+  "Several sites: pick an organisation role - it applies at each site. For a different role per site, invite one site at a time.";
+
+const sitesRule = (v: string[]) =>
+  (Array.isArray(v) && v.length > 0) || "Pick at least one site";
+
 const noRolesText = computed(() =>
   rolesError?.value
     ? "The roles could not be loaded. You may not have access to this organisation's roles; refresh, or sign in again."
+    : !fixedSite.value && invite.value.sites.length > 1
+    ? "No organisation roles for this service yet. Create one in Roles & Permissions (Roles for <service>, use at any site), or invite one site at a time."
     : fixedSite.value
     ? "No roles have been created for this site yet. Create one in Roles & Permissions first."
     : "No roles have been created yet. Create one in Roles & Permissions first."
@@ -525,6 +547,7 @@ const rolesPageLink = computed(() => {
 async function handleUpdateApp(value: string)  {
   invite.value.role = "";
   if (!fixedSite.value) {
+    invite.value.sites = [];
     invite.value.site = "";
     invite.value.siteName = "";
   }
@@ -544,12 +567,16 @@ function resetInvite() {
   invite.value.role = "";
   // Same site as before: a fixed site stays fixed, a picked one is cleared.
   invite.value.site = fixedSite.value;
+  invite.value.sites = [];
   if (!invite.value.site) invite.value.siteName = "";
   message.value = "";
 }
 
-function handleUpdateSite(siteId: string) {
-  const obj = sites.value.find((x) => x?.value === siteId);
+function handleUpdateSite(siteIds: string[]) {
+  // The roles list follows `site`: the one chosen site, or "" for several
+  // (organisation roles only); the role watch clears a role no longer offered.
+  invite.value.site = roleSiteFor(siteIds);
+  const obj = sites.value.find((x) => x?.value === invite.value.site);
   invite.value.siteName = obj?.title || "";
 }
 

package/components/InvitationMain.vue

@@ -262,7 +262,10 @@ const {
       search: headerSearch.value,
       // type: "user-invite,member-invite",
       type: "member-invite",
-      app: props.app,
+      // The org console (organization app, no site) lists every invitation of
+      // the organisation, including the site invitations sent from there
+      // (owner request 2026-10-02); the server's list scoping is unchanged.
+      app: props.app === "organization" && !props.siteId ? "" : props.app,
       orgId: props.org,
       // A site app lists only THIS site's invitations; the server checks the
       // caller reaches it (owner report 2026-09-28: LakeGarden's invitations

package/components/SiteSettings.vue

@@ -199,6 +199,22 @@
         </v-expansion-panel-text>
       </v-expansion-panel>
 
+      <v-expansion-panel v-if="canManageVehicleQr">
+        <v-expansion-panel-title>
+          <v-icon class="mr-2">mdi-qrcode</v-icon>
+          Vehicle QR stickers
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <v-switch v-model="vehicleQrEnabled" :loading="vehicleQrSaving" :disabled="vehicleQrSaving"
+            label="Vehicle QR stickers" color="primary" hide-details data-test="vehicle-qr-switch"
+            @update:model-value="saveVehicleQr" />
+          <p class="text-caption text-medium-emphasis mt-2 mb-0">
+            When on, staff can print a QR sticker for each vehicle from Vehicle Mgmt, and guards can scan it to see
+            which unit the vehicle belongs to.
+          </p>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+
       <slot
         name="panels"
         :can-manage="canManageSiteSettings"
@@ -215,6 +231,7 @@ import useFile from "../composables/useFile";
 import useSiteSettings from "../composables/useSiteSettings";
 import useUtils from "../composables/useUtils";
 import useANPRSettings from "../composables/useANPRSettings";
+import useVehicle from "../composables/useVehicle";
 
 const props = defineProps({
   siteId: { type: String, required: true },
@@ -233,6 +250,7 @@ const { canManageSiteInformation,
   canManageCCTVCamera,
   canManageDeliveryCompanies,
   canManageResidentVisitors,
+  canManageVehicleQr,
 } = useSettingsPermission();
 
 const { getSiteById, updateSitebyId, updateSiteInformation } =
@@ -405,6 +423,36 @@ function handleUpdateCompanies(value: string[]) {
 
 const route = useRoute();
 
+// Vehicle QR stickers switch (off until someone turns it on).
+const { getVehicleQrSettings, setVehicleQrSettings } = useVehicle();
+const vehicleQrEnabled = ref(false);
+const vehicleQrSaving = ref(false);
+
+await useLazyAsyncData(`vehicle-qr-${props.siteId}`, async () => {
+  if (!canManageVehicleQr.value) return null;
+  try {
+    vehicleQrEnabled.value = !!(await getVehicleQrSettings(props.siteId))?.enabled;
+  } catch {
+    vehicleQrEnabled.value = false;
+  }
+  return null;
+});
+
+async function saveVehicleQr(value: boolean | null) {
+  const enabled = !!value;
+  vehicleQrSaving.value = true;
+  try {
+    const res = await setVehicleQrSettings(props.siteId, enabled);
+    vehicleQrEnabled.value = !!res?.enabled;
+    show(enabled ? "Vehicle QR stickers turned on" : "Vehicle QR stickers turned off", "success");
+  } catch (e: any) {
+    vehicleQrEnabled.value = !enabled;
+    show(e?.data?.message || "Could not change the Vehicle QR stickers setting", "error");
+  } finally {
+    vehicleQrSaving.value = false;
+  }
+}
+
 function show(message: string, color: string) {
   toast.show = true;
   toast.message = message;

package/components/VehicleManagement.vue

@@ -8,6 +8,9 @@
     <v-col cols="12">
       <PageHeader title="Vehicle Mgmt">
         <template #actions>
+          <AppButton v-if="qrStickersOn" icon="mdi-qrcode" variant="ghost" @click="openStickerDialog()">
+            Print QR stickers
+          </AppButton>
           <AppButton v-if="canCreateVehicle" icon="mdi-plus" @click="handleAddVehicleClick">
             Add Vehicle
           </AppButton>
@@ -82,17 +85,19 @@
         be drawn.
       -->
       <template #item.action="{ item }">
-        <v-menu v-if="rowHasVehicleActions(item, vehiclePermissions)" location="bottom end">
+        <v-menu v-if="rowHasVehicleActions(item, vehiclePermissions) || qrStickersOn" location="bottom end">
           <template #activator="{ props: menuProps }">
             <AppButton v-bind="menuProps" variant="row" icon="mdi-dots-vertical" aria-label="Vehicle actions"
               @click.stop />
           </template>
           <v-list density="compact">
             <template v-for="plate in rowPlates(item)" :key="plate._id ?? plate.plateNumber">
-              <template v-if="vehiclePlateActions(plate, vehiclePermissions).length">
+              <template v-if="vehiclePlateActions(plate, vehiclePermissions).length || qrStickersOn">
                 <v-list-subheader v-if="rowPlates(item).length > 1">
                   {{ plate.plateNumber }}
                 </v-list-subheader>
+                <v-list-item v-if="qrStickersOn" title="Re-issue sticker" prepend-icon="mdi-qrcode-edit"
+                  @click="askReissue(plate as TPlateNumber)" />
                 <v-list-item v-for="action in vehiclePlateActions(plate, vehiclePermissions)" :key="action.key"
                   :title="action.title" :prepend-icon="action.icon" :base-color="action.color"
                   @click="runVehicleAction(action.key, plate as TPlateNumber)" />
@@ -212,11 +217,13 @@
                           v-tooltip:top="'History'" @click="openHistory(plateNumberItem as TPlateNumber)" />
                       </template>
                       <template #item.action="{ item: plateNumberItem }">
-                        <v-menu v-if="vehiclePlateActions(plateNumberItem, vehiclePermissions).length">
+                        <v-menu v-if="vehiclePlateActions(plateNumberItem, vehiclePermissions).length || qrStickersOn">
                           <template #activator="{ props: menuProps }">
                             <v-btn icon="mdi-dots-vertical" v-bind="menuProps" flat size="x-small" />
                           </template>
                           <v-list density="compact">
+                            <v-list-item v-if="qrStickersOn" title="Re-issue sticker" prepend-icon="mdi-qrcode-edit"
+                              @click="askReissue(plateNumberItem as TPlateNumber)" />
                             <v-list-item
                               v-for="action in vehiclePlateActions(plateNumberItem, vehiclePermissions)"
                               :key="action.key" :title="action.title" :prepend-icon="action.icon"
@@ -341,6 +348,26 @@
         </v-card-text>
       </v-card>
     </v-dialog>
+    <VehicleQrStickerDialog v-if="qrStickersOn" v-model="dialog.qrStickers" :site="props.site" :rows="items"
+      :view="activeTab" :search="searchInput" :vehicle-ids="qrVehicleIds" />
+
+    <v-dialog v-model="dialog.qrReissue" width="460">
+      <v-card>
+        <v-card-title>Re-issue sticker?</v-card-title>
+        <v-card-text>
+          A new QR sticker will be made for {{ qrReissuePlate?.plateNumber }}. The old sticker will stop working, so
+          the new one must be pasted on the car.
+          <v-alert v-if="qrReissueError" type="error" variant="tonal" density="compact" class="mt-3">{{ qrReissueError }}</v-alert>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" class="text-none" @click="dialog.qrReissue = false">Cancel</v-btn>
+          <v-btn color="primary" variant="flat" class="text-none" :loading="qrReissuing" @click="confirmReissue">
+            Re-issue
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
 </template>
@@ -460,7 +487,53 @@ const activeTab = ref<TVehicleTab>("residents");
 
 
 const { formatCamelCaseToWords, formatDate, debounce, maskNRIC } = useUtils();
-const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle, blockVehicle, unblockVehicle, getSpecificVehicleById, getActiveCameraCounts } = useVehicle();
+const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle, blockVehicle, unblockVehicle, getSpecificVehicleById, getActiveCameraCounts, getVehicleQrSettings, regenerateVehicleQr } = useVehicle();
+
+// Vehicle QR stickers: the site's switch (Settings) decides whether the print
+// and re-issue actions exist; only people who may update vehicles get them.
+const qrEnabled = ref(false);
+const qrStickersOn = computed(() => qrEnabled.value && props.canUpdateVehicle);
+const qrVehicleIds = ref<string[]>([]);
+const qrReissuePlate = ref<TPlateNumber | null>(null);
+const qrReissuing = ref(false);
+const qrReissueError = ref("");
+
+async function loadQrSetting() {
+  try {
+    qrEnabled.value = !!(await getVehicleQrSettings(props.site))?.enabled;
+  } catch {
+    qrEnabled.value = false;
+  }
+}
+onMounted(loadQrSetting);
+
+function openStickerDialog(ids: string[] = []) {
+  qrVehicleIds.value = ids;
+  dialog.qrStickers = true;
+}
+
+function askReissue(plate: TPlateNumber) {
+  qrReissuePlate.value = plate || null;
+  qrReissueError.value = "";
+  dialog.qrReissue = true;
+}
+
+async function confirmReissue() {
+  const id = qrReissuePlate.value?._id;
+  if (!id) return;
+  qrReissuing.value = true;
+  qrReissueError.value = "";
+  try {
+    await regenerateVehicleQr(String(id));
+    dialog.qrReissue = false;
+    dialog.showMoreActions = false;
+    openStickerDialog([String(id)]);
+  } catch (e: any) {
+    qrReissueError.value = errorConverter(e);
+  } finally {
+    qrReissuing.value = false;
+  }
+}
 
 /**
  * Active ANPR cameras per list at the site. A live plate on fewer cameras
@@ -543,7 +616,9 @@ const dialog = reactive({
   blockVehicle: false,
   unblockVehicle: false,
   history: false,
-  bulkVehicle: false
+  bulkVehicle: false,
+  qrStickers: false,
+  qrReissue: false,
 });
 
 

package/components/VehicleQrStickerDialog.vue

@@ -0,0 +1,249 @@
+<template>
+  <v-dialog :model-value="modelValue" width="1100" scrollable persistent @update:model-value="close">
+    <v-card data-test="vehicle-qr-dialog">
+      <v-card-title class="d-flex align-center">
+        <v-icon class="mr-2">mdi-qrcode</v-icon>
+        {{ step === "select" ? "Print QR stickers" : "Check before printing" }}
+        <v-spacer />
+        <v-btn icon="mdi-close" variant="text" size="small" aria-label="Close" @click="close(false)" />
+      </v-card-title>
+
+      <v-card-text>
+        <v-alert v-if="error" type="error" variant="tonal" density="compact" class="mb-3">{{ error }}</v-alert>
+
+        <!-- Step 1: choose vehicles -->
+        <template v-if="step === 'select'">
+          <div class="d-flex flex-wrap align-center ga-2 mb-2">
+            <v-checkbox-btn :model-value="allOnPageTicked" :indeterminate="someOnPageTicked && !allOnPageTicked"
+              aria-label="Select all on this page" @update:model-value="(v: any) => tickGroup(plates.map((p) => p.id), !!v)" />
+            <span class="text-body-2">Select all on this page</span>
+            <v-spacer />
+            <v-btn variant="tonal" size="small" class="text-none" :loading="loadingAll" @click="loadAll">
+              Select all matching the current tab and search
+            </v-btn>
+          </div>
+          <v-table density="compact" fixed-header height="360">
+            <thead>
+              <tr><th style="width: 48px" /><th>Blk-Level-Unit</th><th>Owner</th><th>Plate</th><th>Status</th></tr>
+            </thead>
+            <tbody>
+              <tr v-for="p in plates" :key="p.id">
+                <td><v-checkbox-btn :model-value="selected.includes(p.id)" :aria-label="`Select ${p.plateNumber}`"
+                    @update:model-value="(v: any) => tickGroup([p.id], !!v)" /></td>
+                <td>{{ p.unitLabel || "-" }}</td>
+                <td>{{ p.ownerName || "-" }}</td>
+                <td class="font-weight-bold">{{ p.plateNumber }}</td>
+                <td>{{ p.status || "-" }}</td>
+              </tr>
+              <tr v-if="!plates.length"><td colspan="5" class="text-center text-medium-emphasis py-6">No vehicles to list</td></tr>
+            </tbody>
+          </v-table>
+          <p class="text-caption text-medium-emphasis mt-2 mb-0">
+            Up to {{ STICKER_MAX_PER_REQUEST }} stickers at a time. Ticked: {{ selected.length }}.
+          </p>
+        </template>
+
+        <!-- Step 2: review + preview -->
+        <template v-else>
+          <v-alert v-if="missing.length" type="warning" variant="tonal" density="compact" class="mb-3">
+            {{ missing.length }} vehicle(s) could not be found and were skipped.
+          </v-alert>
+          <v-alert v-if="dropped" type="info" variant="tonal" density="compact" class="mb-3">
+            {{ dropped }} more vehicle(s) were over the {{ STICKER_MAX_PER_REQUEST }} limit - print again for the rest.
+          </v-alert>
+          <v-table density="compact" fixed-header height="220">
+            <thead>
+              <tr><th style="width: 48px" /><th>Blk-Level-Unit</th><th>Owner</th><th>Plate</th><th>Check</th></tr>
+            </thead>
+            <tbody>
+              <tr v-for="it in items" :key="it.vehicleId">
+                <td><v-checkbox-btn :model-value="ticked.includes(it.vehicleId)" :aria-label="`Print ${it.plateNumber}`"
+                    @update:model-value="(v: any) => (ticked = setIds(ticked, [it.vehicleId], !!v))" /></td>
+                <td>{{ installerLine(it).place || "-" }}</td>
+                <td>{{ installerLine(it).owner || "-" }}</td>
+                <td class="font-weight-bold">{{ it.plateNumber }}</td>
+                <td>
+                  <v-chip v-if="stickerWarning(it.status)" size="small" variant="tonal"
+                    :color="stickerWarning(it.status)!.level" prepend-icon="mdi-alert">
+                    {{ stickerWarning(it.status)!.text }}
+                  </v-chip>
+                  <span v-else class="text-medium-emphasis">OK</span>
+                </td>
+              </tr>
+            </tbody>
+          </v-table>
+          <p class="text-caption text-medium-emphasis my-2">
+            Expired, blocklisted and inactive vehicles start unticked. Each sticker has a cut-off strip under the
+            dashed line saying which unit and owner it is for - cut it off before pasting the sticker on the car.
+          </p>
+          <iframe ref="frame" title="Sticker sheet preview" :srcdoc="docHtml" class="sticker-preview" />
+        </template>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-btn v-if="step === 'review' && !fromReissue" variant="text" class="text-none" @click="step = 'select'">Back</v-btn>
+        <v-spacer />
+        <v-btn variant="text" class="text-none" @click="close(false)">Cancel</v-btn>
+        <v-btn v-if="step === 'select'" color="primary" variant="flat" class="text-none" :disabled="!selected.length"
+          :loading="loading" @click="goReview">
+          Preview {{ selected.length }} sticker{{ selected.length === 1 ? "" : "s" }}
+        </v-btn>
+        <v-btn v-else color="primary" variant="flat" class="text-none" prepend-icon="mdi-printer"
+          :disabled="!ticked.length || !docHtml" @click="print">
+          Print {{ ticked.length }} sticker{{ ticked.length === 1 ? "" : "s" }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts" setup>
+import QRCode from "qrcode";
+import useVehicle from "../composables/useVehicle";
+import { errorConverter } from "../utils/data";
+import {
+  STICKER_MAX_PER_REQUEST,
+  buildStickerDocument,
+  defaultPlateIds,
+  defaultStickerIds,
+  idsForRequest,
+  installerLine,
+  setIds,
+  stickerPlateRows,
+  stickerWarning,
+  type StickerItem,
+  type StickerPlateRow,
+} from "../utils/vehicle-qr-sticker";
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  site: { type: String, required: true },
+  /** The list's rows on the current page. */
+  rows: { type: Array as PropType<Array<Record<string, any>>>, default: () => [] },
+  /** The list's current tab and search, used by "select all matching". */
+  view: { type: String, default: "" },
+  search: { type: String, default: "" },
+  /** Vehicle ids to go straight to review with (a re-issued sticker). */
+  vehicleIds: { type: Array as PropType<string[]>, default: () => [] },
+});
+const emit = defineEmits(["update:modelValue"]);
+
+const { getVehicles, getVehicleQrStickers } = useVehicle();
+
+const step = ref<"select" | "review">("select");
+const plates = ref<StickerPlateRow[]>([]);
+const selected = ref<string[]>([]);
+const items = ref<StickerItem[]>([]);
+const ticked = ref<string[]>([]);
+const missing = ref<string[]>([]);
+const dropped = ref(0);
+const loading = ref(false);
+const loadingAll = ref(false);
+const error = ref("");
+const docHtml = ref("");
+const frame = ref<HTMLIFrameElement | null>(null);
+const fromReissue = computed(() => props.vehicleIds.length > 0);
+
+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)));
+
+function tickGroup(ids: string[], on: boolean) {
+  selected.value = setIds(selected.value, ids, on);
+}
+
+function close(value: boolean) {
+  emit("update:modelValue", value);
+}
+
+watch(
+  () => props.modelValue,
+  async (open) => {
+    if (!open) return;
+    error.value = "";
+    items.value = [];
+    docHtml.value = "";
+    step.value = "select";
+    plates.value = stickerPlateRows(props.rows);
+    selected.value = defaultPlateIds(plates.value);
+    if (props.vehicleIds.length) {
+      selected.value = [...props.vehicleIds];
+      await goReview();
+    }
+  },
+  { immediate: true },
+);
+
+/** Every page of the current tab + search, up to the per-request cap. */
+async function loadAll() {
+  loadingAll.value = true;
+  error.value = "";
+  try {
+    const all: Array<Record<string, any>> = [];
+    let page = 1;
+    let pages = 1;
+    do {
+      const res: any = await getVehicles({ page, limit: 100, search: props.search, view: props.view, site: props.site });
+      all.push(...(res?.items ?? []));
+      pages = res?.pages || 1;
+      page += 1;
+    } while (page <= pages && stickerPlateRows(all).length < STICKER_MAX_PER_REQUEST);
+    plates.value = stickerPlateRows(all);
+    selected.value = defaultPlateIds(plates.value);
+  } catch (e: any) {
+    error.value = errorConverter(e);
+  } finally {
+    loadingAll.value = false;
+  }
+}
+
+async function goReview() {
+  loading.value = true;
+  error.value = "";
+  try {
+    const { ids, dropped: over } = idsForRequest(selected.value);
+    const res = await getVehicleQrStickers(props.site, ids);
+    items.value = (res?.items ?? []) as StickerItem[];
+    missing.value = res?.missing ?? [];
+    dropped.value = over;
+    ticked.value = defaultStickerIds(items.value);
+    step.value = "review";
+  } catch (e: any) {
+    error.value = errorConverter(e);
+  } finally {
+    loading.value = false;
+  }
+}
+
+// The same document is the preview and the print job. Error correction Q and a
+// 4-module quiet zone; the QR is drawn at 32 mm so it scans from arm's length.
+let renderToken = 0;
+watch([items, ticked], async () => {
+  const mine = ++renderToken;
+  const chosen = items.value.filter((i) => ticked.value.includes(i.vehicleId));
+  if (!chosen.length) {
+    docHtml.value = "";
+    return;
+  }
+  const svgs = await Promise.all(
+    chosen.map((i) => QRCode.toString(i.qr, { type: "svg", errorCorrectionLevel: "Q", margin: 4 })),
+  );
+  if (mine === renderToken) docHtml.value = buildStickerDocument(chosen, svgs);
+});
+
+function print() {
+  const win = frame.value?.contentWindow;
+  if (!win) return;
+  win.focus();
+  win.print();
+}
+</script>
+
+<style scoped>
+.sticker-preview {
+  width: 100%;
+  height: 460px;
+  border: 1px solid var(--v-border-color, #ccc);
+  border-radius: 8px;
+  background: #e9e9e9;
+}
+</style>

package/composables/useSettingsPermission.ts

@@ -122,6 +122,19 @@ export function useSettingsPermission() {
     );
   });
 
+  // Vehicle QR stickers switch: whoever may update vehicles (same grant the
+  // server checks on PUT /api/vehicles/qr/settings/site/:site).
+  const vehiclePermissions: TPermissions = {
+    "vehicle-mgmt": {
+      "update-vehicle": { check: true, description: "Allows the user to update vehicle details." },
+    },
+  };
+  const canManageVehicleQr = computed(() => {
+    if (!userAppRole.value) return false;
+    if (userAppRole.value.permissions.includes("*")) return true;
+    return hasPermission(userAppRole.value, vehiclePermissions, "vehicle-mgmt", "update-vehicle");
+  });
+
   const canManageSiteSettings = computed(() => {
     return canManageSiteInformation.value || canManageANPRCamera.value || canManageCCTVCamera.value || canManageDeliveryCompanies.value || canManageResidentVisitors.value || canManageWorkOrderSettings.value || canManageBillingAndSOAConfiguration.value || canManageNFCManagement.value || canManageNFCPatrolSettings.value || canManageEntryPass.value || canManageRedDotSettings.value
   })
@@ -138,6 +151,7 @@ export function useSettingsPermission() {
     canManageNFCPatrolSettings,
     canManageEntryPass,
     canManageRedDotSettings,
+    canManageVehicleQr,
     canManageSiteSettings
 
   };

package/composables/useUser.ts

@@ -1,3 +1,5 @@
+import { inviteSitePayload } from "../utils/invite-sites";
+
 export default function useUser() {
   function inviteUser({
     email = "",
@@ -65,7 +67,10 @@ export default function useUser() {
     org = "",
     site = "",
     siteName = "",
+    sites = [] as string[],
   } = {}) {
+    // `sites` = the several chosen sites; the old single `site` still works.
+    const chosen = sites.length ? sites : site ? [site] : [];
     return useNuxtApp().$api<Record<string, any>>("/api/auth/invite/member", {
       method: "POST",
       body: {
@@ -74,8 +79,7 @@ export default function useUser() {
         role,
         name,
         org,
-        ...(site && { siteId: site }),
-        ...(siteName && { siteName }),
+        ...inviteSitePayload(chosen, siteName),
       },
     });
   }

package/composables/useVehicle.ts

@@ -272,6 +272,41 @@ function getSpecificVehicleById(id: string){
 }
 
 
+  // Vehicle QR stickers (core vehicle-qr). Per-site switch, bulk sticker data,
+  // and re-issue (the old sticker stops working).
+  function getVehicleQrSettings(site: string) {
+    return useNuxtApp().$api<{ site: string; enabled: boolean }>(
+      `/api/vehicles/qr/settings/site/${site}`,
+      { method: "GET" },
+    );
+  }
+
+  function setVehicleQrSettings(site: string, enabled: boolean) {
+    return useNuxtApp().$api<{ site: string; enabled: boolean }>(
+      `/api/vehicles/qr/settings/site/${site}`,
+      { method: "PUT", body: { enabled } },
+    );
+  }
+
+  function getVehicleQrStickers(site: string, vehicleIds: string[]) {
+    return useNuxtApp().$api<{
+      site: { _id: string; name: string };
+      items: Array<Record<string, any>>;
+      missing: string[];
+    }>("/api/vehicles/qr/stickers", {
+      method: "POST",
+      body: { site, vehicleIds },
+    });
+  }
+
+  function regenerateVehicleQr(id: string) {
+    return useNuxtApp().$api<{ vehicleId: string; qr: string; token: string }>(
+      `/api/vehicles/qr/regenerate/id/${id}`,
+      { method: "PUT" },
+    );
+  }
+
+
   return {
     getVehicles,
     addVehicle,
@@ -290,6 +325,10 @@ function getSpecificVehicleById(id: string){
     getActiveCameraCounts,
     syncVehicle,
     searchMultipleVehiclesByUnitId,
-    getSpecificVehicleById
+    getSpecificVehicleById,
+    getVehicleQrSettings,
+    setVehicleQrSettings,
+    getVehicleQrStickers,
+    regenerateVehicleQr,
   };
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.90.3",
+  "version": "4.92.0",
   "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/invite-sites.ts

@@ -0,0 +1,25 @@
+/**
+ * Which sites an "Invite member" request names (owner request 2026-10-02:
+ * invite one person to several sites). One site keeps the old `siteId` shape;
+ * 2 or more send `siteIds` (the server writes one invitation per site and
+ * names every site in one e-mail).
+ */
+export function inviteSitePayload(
+  sites: string[],
+  siteName = "",
+): Record<string, unknown> {
+  if (!sites.length) return {};
+  if (sites.length === 1) {
+    return { siteId: sites[0], ...(siteName && { siteName }) };
+  }
+  return { siteIds: sites };
+}
+
+/**
+ * The one site a role is looked up for: the single chosen site, or "" for 2+
+ * (a site role is valid at its own site only, so several sites offer
+ * organisation roles only).
+ */
+export function roleSiteFor(sites: string[]): string {
+  return sites.length === 1 ? sites[0] : "";
+}

package/utils/vehicle-qr-sticker.ts

@@ -0,0 +1,184 @@
+/**
+ * Vehicle QR stickers - the pure parts (labels, selection, paging, print page).
+ *
+ * Kept free of Vue and of the QR library so `node --test` can run it. The
+ * sticker itself carries NO resident detail: just the QR, the plate and the
+ * Seven365 line. Block / level / unit / owner appear ONLY on the installer
+ * strip under the dashed cut line, which is cut off before the sticker is
+ * pasted on the car.
+ */
+
+/** The server's most vehicles per request (POST /api/vehicles/qr/stickers). */
+export const STICKER_MAX_PER_REQUEST = 500;
+
+/** A4 sheet: 4 columns x 4 rows of 47 mm cells. */
+export const STICKER_COLUMNS = 4;
+export const STICKER_ROWS = 4;
+export const STICKERS_PER_PAGE = STICKER_COLUMNS * STICKER_ROWS;
+
+export type StickerItem = {
+  vehicleId: string;
+  qr: string;
+  token?: string;
+  block?: string;
+  level?: string;
+  unit?: string;
+  plateNumber?: string;
+  ownerName?: string;
+  status?: string;
+};
+
+export type StickerPlateRow = {
+  id: string;
+  plateNumber: string;
+  status: string;
+  ownerName: string;
+  unitLabel: string;
+};
+
+const text = (v: unknown) => (v == null ? "" : String(v).trim());
+
+/** "Blk 4 #02-01". Tolerates a unit that already carries its level ("02-01"). */
+export function stickerUnitLabel(parts: { block?: unknown; level?: unknown; unit?: unknown }): string {
+  const block = text(parts.block).replace(/^(blk|block)\.?\s*/i, "");
+  const level = text(parts.level).replace(/^(level|lvl|floor)\.?\s*/i, "");
+  const unit = text(parts.unit).replace(/^(unit)\.?\s*/i, "").replace(/^#/, "");
+  const home = unit.includes("-") || !level ? unit : `${level}-${unit}`;
+  return [block ? `Blk ${block}` : "", home ? `#${home}` : ""].filter(Boolean).join(" ");
+}
+
+/** The installer strip under the cut line: where it goes and whose car. */
+export function installerLine(item: Pick<StickerItem, "block" | "level" | "unit" | "ownerName">): {
+  place: string;
+  owner: string;
+} {
+  return { place: stickerUnitLabel(item), owner: text(item.ownerName) };
+}
+
+export type StickerWarning = { level: "error" | "warning"; text: string };
+
+/** What the preview says about a status. Null = nothing to warn about. */
+export function stickerWarning(status: unknown): StickerWarning | null {
+  switch (text(status).toLowerCase()) {
+    case "expired":
+      return { level: "error", text: "Season pass expired" };
+    case "blocklisted":
+      return { level: "error", text: "On the blocklist" };
+    case "inactive":
+      return { level: "warning", text: "Vehicle is inactive" };
+    case "pending":
+      return { level: "warning", text: "Waiting for approval" };
+    default:
+      return null;
+  }
+}
+
+/** Stickers that should NOT be ticked for printing until someone chooses to. */
+export function stickerStartsUnticked(status: unknown): boolean {
+  return stickerWarning(status)?.level === "error" || text(status).toLowerCase() === "inactive";
+}
+
+/** The ids ticked by default in the preview. */
+export function defaultStickerIds(items: Pick<StickerItem, "vehicleId" | "status">[]): string[] {
+  return items.filter((i) => !stickerStartsUnticked(i.status)).map((i) => i.vehicleId);
+}
+
+/** One selectable row per plate, from the list's grouped rows. */
+export function stickerPlateRows(rows: Array<Record<string, any>>): StickerPlateRow[] {
+  const out: StickerPlateRow[] = [];
+  for (const row of rows ?? []) {
+    const plates: any[] = Array.isArray(row?.plates) && row.plates.length ? row.plates : [row];
+    for (const plate of plates) {
+      if (!plate?._id) continue;
+      out.push({
+        id: String(plate._id),
+        plateNumber: text(plate.plateNumber),
+        status: text(plate.status).toLowerCase(),
+        ownerName: text(row?.name ?? plate.name),
+        unitLabel: stickerUnitLabel({
+          block: row?.block?.name ?? row?.block,
+          level: row?.level?.name ?? row?.level,
+          unit: row?.unit?.name ?? row?.unit,
+        }),
+      });
+    }
+  }
+  return out;
+}
+
+/** Plates ticked on first open: live ones only (active / season pass). */
+export function defaultPlateIds(plates: StickerPlateRow[]): string[] {
+  return plates.filter((p) => p.status === "active" || p.status === "temporary").map((p) => p.id);
+}
+
+/** Tick or untick a group of ids (e.g. "select all on this page"). */
+export function setIds(selected: string[], ids: string[], on: boolean): string[] {
+  const rest = selected.filter((id) => !ids.includes(id));
+  return on ? [...rest, ...ids] : rest;
+}
+
+/** The ids to send: unique, in order, at most what the server accepts. */
+export function idsForRequest(ids: string[]): { ids: string[]; dropped: number } {
+  const unique = [...new Set(ids)];
+  return { ids: unique.slice(0, STICKER_MAX_PER_REQUEST), dropped: Math.max(0, unique.length - STICKER_MAX_PER_REQUEST) };
+}
+
+/** Split into sheets. */
+export function stickerPages<T>(items: T[], perPage: number = STICKERS_PER_PAGE): T[][] {
+  const pages: T[][] = [];
+  for (let i = 0; i < items.length; i += perPage) pages.push(items.slice(i, i + perPage));
+  return pages;
+}
+
+export function escapeHtml(value: unknown): string {
+  return text(value)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+const PRINT_CSS = `
+@page { size: A4; margin: 6mm; }
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; background: #fff; color: #111; font-family: Arial, Helvetica, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+.page { display: grid; grid-template-columns: repeat(${STICKER_COLUMNS}, 47mm); gap: 2mm; justify-content: center; align-content: start; width: 198mm; height: 285mm; margin: 0 auto; break-after: page; }
+.page:last-child { break-after: auto; }
+.cell { width: 47mm; break-inside: avoid; }
+.card { width: 47mm; height: 58mm; border: 0.3mm solid #1a1a1a; border-radius: 3mm; padding: 2mm 2mm 1.6mm; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; }
+.qr { width: 32mm; height: 32mm; display: block; }
+.qr svg { width: 100%; height: 100%; display: block; }
+.plate { font-size: 13pt; font-weight: 800; letter-spacing: 0.3mm; line-height: 1.1; }
+.hint { font-size: 5.8pt; color: #333; line-height: 1.2; }
+.brand { display: flex; align-items: center; justify-content: center; gap: 1mm; font-size: 6pt; color: #222; border-top: 0.2mm solid #ccc; width: 100%; padding-top: 1mm; }
+.mark { width: 3.2mm; height: 3.2mm; border-radius: 0.8mm; background: #111; color: #fff; font-weight: 800; font-size: 5pt; line-height: 3.2mm; text-align: center; }
+.cut { margin-top: 1.2mm; border-top: 0.3mm dashed #666; padding-top: 1mm; font-size: 6.5pt; line-height: 1.25; color: #111; min-height: 8mm; }
+.cut .owner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cut .note { color: #666; font-size: 5.5pt; }
+@media screen { body { background: #e9e9e9; zoom: 0.75; padding: 4mm 0; } .page { background: #fff; margin-bottom: 4mm; height: auto; min-height: 285mm; box-shadow: 0 0 2mm rgba(0,0,0,.25); } }
+`;
+
+/**
+ * One full HTML document: A4 sheets of stickers. `qrSvgs` is parallel to
+ * `items` (the QR for each, already drawn). Every value is HTML-escaped - an
+ * owner name is typed by a person.
+ */
+export function buildStickerDocument(items: StickerItem[], qrSvgs: string[]): string {
+  const cells = items.map((item, i) => {
+    const { place, owner } = installerLine(item);
+    return (
+      `<div class="cell"><div class="card">` +
+      `<div class="qr">${qrSvgs[i] ?? ""}</div>` +
+      `<div class="plate">${escapeHtml(item.plateNumber)}</div>` +
+      `<div class="hint">Scan with iSecure365 / iMA365</div>` +
+      `<div class="brand"><span class="mark">7</span>Powered by Seven365</div>` +
+      `</div>` +
+      `<div class="cut"><div><b>${escapeHtml(place || "-")}</b></div>` +
+      `<div class="owner">Owner: ${escapeHtml(owner || "-")}</div>` +
+      `<div class="note">Installer: cut here, then paste on this car</div></div></div>`
+    );
+  });
+  const pages = stickerPages(cells).map((p) => `<div class="page">${p.join("")}</div>`);
+  return `<!doctype html><html><head><meta charset="utf-8"><title>Vehicle QR stickers</title><style>${PRINT_CSS}</style></head><body>${pages.join("")}</body></html>`;
+}