@7365admin1/layer-common 4.90.2 → 4.91.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 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
+
+- d7c20a9: Visitor form: required and optional fields now match the security mobile app, and every field says "(Required)" or "(Optional)". Phone is optional for Drive-in and Walk-in; NRIC is optional for Delivery; Vehicle Number is required for Drive-in, Pick-Up and Drop-Off; Company Name is required for Contractor; Delivery Company is required. Walk-in no longer shows Company Name, and only the fields on the form are sent when a visitor is saved (no hidden company on Walk-in, no purpose on Drive-in). Pass, Keys and contractor member fields are labelled too.
+
 ## 4.90.2
 
 ### Patch Changes
@@ -2022,11 +2034,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/MemberInformation.vue

@@ -10,12 +10,12 @@
         <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorScanPassMessage = ''">
           <v-row no-gutters class="pt-5 ga-2">
             <v-col cols="12">
-              <InputLabel class="text-capitalize" title="Full Name" required />
+              <InputLabel class="text-capitalize" title="Full Name (Required)" required />
               <v-text-field v-model.trim="memberForm.name" density="compact" hide-details :rules="[requiredRule]" />
             </v-col>
 
             <v-col cols="12">
-              <InputLabel class="text-capitalize" title="NRIC" required />
+              <InputLabel class="text-capitalize" title="NRIC (Required)" required />
               <v-menu v-model="memberNRICSearchMenu" location="bottom" offset-y :close-on-content-click="false">
                 <template #activator="{ props: menuProps }">
                   <InputNRICNumber v-bind="menuProps" v-model.trim="memberForm.nric" density="compact" hide-details
@@ -34,7 +34,7 @@
             </v-col>
 
             <v-col cols="12">
-              <InputLabel class="text-capitalize" title="Phone Number" required />
+              <InputLabel class="text-capitalize" title="Phone Number (Required)" required />
               <v-menu v-model="memberPhoneSearchMenu" location="bottom" offset-y :close-on-content-click="false">
                 <template #activator="{ props: menuProps }">
                   <InputPhoneNumberV2 v-bind="menuProps" v-model="memberForm.contact" density="compact"
@@ -54,7 +54,7 @@
 
             <v-col cols="12">
               <v-autocomplete v-model="selectedPass" v-model:search="passInput" :hide-no-data="false" class="mt-3"
-                :items="passItemsFilteredFinal" item-title="prefixAndName" item-value="_id" label="Pass (optional)"
+                :items="passItemsFilteredFinal" item-title="prefixAndName" item-value="_id" label="Pass (Optional)"
                 variant="outlined" density="compact" :error-messages="errorScanPassMessage" persistent-hint small-chips
                 :clearable="clearable" @click="fetchPasses">
                 <template v-slot:no-data>

package/components/PassInformation.vue

@@ -19,7 +19,7 @@
           :rules="props.passRules"
           item-title="prefixAndName"
           item-value="_id"
-          label="Pass"
+          label="Pass (Optional)"
           variant="outlined"
           hide-details
           persistent-hint
@@ -48,7 +48,7 @@
             :rules="props.passRules"
             item-title="prefixAndName"
             item-value="_id"
-            label="Keys"
+            label="Keys (Optional)"
             multiple
             variant="outlined"
             hide-details

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/components/VisitorForm.vue

@@ -16,14 +16,14 @@
       <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''">
         <v-row no-gutters class="pt-4">
           <v-col v-if="shouldShowField('attachments')" class="w-100">
-            <InputLabel class="text-capitalize" title="Attach Image" />
+            <InputLabel class="text-capitalize" title="Attach Image (Optional)" />
             <InputFileV2 v-model="visitor.attachments" multiple :max-length="3" />
           </v-col>
 
           <v-col v-if="shouldShowField('nric')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel class="text-capitalize" title="NRIC" :required="requireNRIC" />
+                <InputLabel class="text-capitalize" :title="requireNRIC ? 'NRIC (Required)' : 'NRIC (Optional)'" :required="requireNRIC" />
                 <v-menu v-model="nricSearchMenu" location="bottom" offset-y :close-on-content-click="false"
                   content-class="visitor-form__menu">
                   <template #activator="{ props }">
@@ -55,11 +55,11 @@
           <v-col v-if="shouldShowField('contact')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel class="text-capitalize" title="Phone Number" required />
+                <InputLabel class="text-capitalize" :title="requireContact ? 'Phone Number (Required)' : 'Phone Number (Optional)'" :required="requireContact" />
                 <v-menu v-model="phoneSearchMenu" location="bottom" offset-y :close-on-content-click="false"
                   content-class="visitor-form__menu">
                   <template #activator="{ props }">
-                    <InputPhoneNumberV2 v-bind="props" v-model="visitor.contact" :rules="[requiredRule]"
+                    <InputPhoneNumberV2 v-bind="props" v-model="visitor.contact" :rules="[requireContact ? requiredRule : () => true]"
                       @focus="isPhoneFieldFocused = true" @blur="isPhoneFieldFocused = false" density="comfortable"
                       :key="currentAutofillSource + 'phone-key'" @update:model-value="handleUpdatePhoneNumber" />
                   </template>
@@ -87,12 +87,13 @@
           <v-col v-if="shouldShowField('plateNumber')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel class="text-capitalize" title="Vehicle Number" :required="isVehicleRequired" />
+                <InputLabel class="text-capitalize" :title="isVehicleRequired ? 'Vehicle Number (Required)' : 'Vehicle Number (Optional)'" :required="isVehicleRequired" />
                 <!-- <v-text-field v-model.trim.uppercase="visitor.plateNumber" density="comfortable" /> -->
                 <v-menu v-model="vehicleSearchMenu" location="bottom" offset-y :close-on-content-click="false"
                   content-class="visitor-form__menu">
                   <template #activator="{ props }">
                     <InputVehicleNumber v-bind="props" v-model="visitor.plateNumber" density="comfortable"
+                      :rules="[isVehicleRequired ? requiredRule : () => true]"
                       @update:model-value="handleUpdateVehicleNumber" @focus="handleFocusPlateNumber"
                       @blur="isPlateNumberFieldFocused = false" />
                   </template>
@@ -117,7 +118,7 @@
           </v-col>
 
           <v-col v-if="shouldShowField('contractorType')" cols="12">
-            <InputLabel class="text-capitalize" title="Contractor Type" required />
+            <InputLabel class="text-capitalize" title="Contractor Type (Required)" required />
             <v-combobox v-model="contractorTypeObj" v-model:search="contractorTypeInput" ref="contractorTypeCombo"
               autocomplete="off" :hide-no-data="false" @update:focused="handleFocusedContractorType"
               :items="contractorTypes" :rules="[requiredRule]" item-value="value"
@@ -139,7 +140,7 @@
           <v-col v-if="shouldShowField('name')" cols="12">
             <v-row>
               <v-col cols="12">
-                <InputLabel class="text-capitalize" title="Full Name" required />
+                <InputLabel class="text-capitalize" title="Full Name (Required)" required />
                 <v-text-field v-model.trim="visitor.name" density="comfortable" :rules="[requiredRule]" />
               </v-col>
             </v-row>
@@ -159,7 +160,7 @@
                      place of `primary`, which is the darker link tone. Without
                      the label this was the only required field in the form with
                      nothing naming it: just a bare Food/Parcel pair. -->
-                <InputLabel class="text-capitalize" title="Delivery Type" required />
+                <InputLabel class="text-capitalize" title="Delivery Type (Required)" required />
                 <v-radio-group v-model="visitor.deliveryType" inline color="accent" :rules="[requiredRule]">
                   <v-radio label="Food" value="Food"></v-radio>
                   <v-radio label="Parcel" value="Parcel"></v-radio>
@@ -170,8 +171,9 @@
 
           <template v-if="shouldShowField('company')">
             <v-col cols="12">
-              <InputLabel class="text-capitalize" title="Company Name" />
+              <InputLabel class="text-capitalize" :title="requireCompany ? 'Company Name (Required)' : 'Company Name (Optional)'" :required="requireCompany" />
               <v-combobox v-model="visitor.company" v-model:search="companyNameInput" ref="companyCombo"
+                :rules="[requireCompany ? requiredRule : () => true]"
                 autocomplete="off" :hide-no-data="true" :items="companyNames" item-value="value"
                 @update:model-value="handleSelectCompanyName" variant="outlined" density="comfortable" persistent-hint
                 small-chips>
@@ -182,8 +184,9 @@
          
           <template v-if="shouldShowField('delivery-company')">
             <v-col cols="12">
-              <InputLabel class="text-capitalize" title="Delivery Company" />
+              <InputLabel class="text-capitalize" title="Delivery Company (Required)" required />
               <v-combobox v-model="deliveryCompany" v-model:search="deliveryCompanyInput" ref="companyCombo"
+                :rules="[requiredRule]"
                 autocomplete="off" :hide-no-data="false" :items="deliveryCompanyList" item-value="value"
                 :loading="siteDataPending" variant="outlined" density="comfortable" persistent-hint small-chips>
                 <template v-slot:no-data>
@@ -205,7 +208,7 @@
 
 
           <v-col v-if="shouldShowField('block')" cols="12">
-            <InputLabel class="text-capitalize" title="Block" required />
+            <InputLabel class="text-capitalize" title="Block (Required)" required />
             <v-autocomplete v-model="visitor.block" :items="blocksArray" item-value="value" autocomplete="off"
               item-title="title" :key="blockListDataPending ? 'block-list-pending' : 'block-list-ready'
                 " :loading="blockListDataPending" @update:model-value="handleChangeBlock" density="comfortable"
@@ -213,13 +216,13 @@
           </v-col>
 
           <v-col v-if="shouldShowField('level')" cols="12">
-            <InputLabel class="text-capitalize" title="Level" required />
+            <InputLabel class="text-capitalize" title="Level (Required)" required />
             <v-autocomplete v-model="visitor.level" :items="levelsArray" density="comfortable" autocomplete="off"
               :disabled="!visitor.block" :key="levelsDataPending ? 'level-list-pending' : 'level-list-ready'
                 " :loading="levelsDataPending" @update:model-value="handleChangeLevel" :rules="[requiredRule]" />
           </v-col>
           <v-col v-if="shouldShowField('unit')" cols="12">
-            <InputLabel class="text-capitalize" title="Unit" required />
+            <InputLabel class="text-capitalize" title="Unit (Required)" required />
             <v-autocomplete v-model="visitor.unit" :items="unitsArray" density="comfortable" autocomplete="off"
               item-title="title" item-value="value" :disabled="!visitor.level"
               :key="unitsDataPending ? 'unit-list-pending' : 'unit-list-ready'" :loading="unitsDataPending"
@@ -227,14 +230,14 @@
           </v-col>
 
           <v-col v-if="shouldShowField('unit')" cols="12">
-            <InputLabel class="text-capitalize" title="Registered Unit Company Name" required
+            <InputLabel class="text-capitalize" title="Registered Unit Company Name"
               :key="'unit-key' + visitor.level" />
             <v-text-field v-model.trim="registeredUnitCompanyName" density="comfortable"
               :loading="buildingUnitDataPending" readonly class="no-pointer" />
           </v-col>
 
           <v-col v-if="shouldShowField('remarks')" cols="12">
-            <InputLabel class="text-capitalize" title="Remarks" />
+            <InputLabel class="text-capitalize" title="Remarks (Optional)" />
             <v-textarea v-model="visitor.remarks" density="comfortable" :rows="3" no-resize />
           </v-col>
 
@@ -831,12 +834,29 @@ const formMode = computed<"add" | "edit" | "register">(() => {
   return selectedUnregisteredVisitor.value ? "register" : prop.mode;
 });
 
+// Fields this form actually has for the visitor type - drives both what is
+// shown and what is sent on submit, so nothing outside the form is saved.
+// typeFieldMap also feeds the details dialog, so it can list more than this:
+//   - walk-in "company": not on the security mobile app's walk-in, hidden here
+//     but still shown on older walk-in records in the details dialog;
+//   - guest "purpose": never drawn in this form.
+const formFieldsExcluded: Partial<Record<TVisitorType, string[]>> = {
+  "walk-in": ["company"],
+  guest: ["purpose"],
+};
+
+const isFormField = (
+  fieldKey: keyof TVisitorPayload | "delivery-company"
+) => {
+  if (formFieldsExcluded[prop.type]?.includes(fieldKey)) return false;
+  return !!typeFieldMap[prop.type]?.includes(fieldKey);
+};
+
 const shouldShowField = (
   fieldKey: keyof TVisitorPayload | "delivery-company"
 ) => {
   if ((!withStep2.value && !withStep3.value) || contractorStep.value === 1) {
-    const visibleFields = typeFieldMap[prop.type];
-    return visibleFields?.includes(fieldKey);
+    return isFormField(fieldKey);
   }
 };
 
@@ -866,8 +886,21 @@ const showShowKeysField = computed(() => {
   return ["guest", "contractor", "walk-in"].includes(prop.type);
 });
 
+// Required / optional per type - kept in line with the security mobile app.
 const requireNRIC = computed(() => {
-  return prop.type !== "walk-in" && prop.type !== "guest";
+  return prop.type === "contractor";
+});
+
+const requireContact = computed(() => {
+  return ["contractor", "delivery"].includes(prop.type);
+});
+
+const isVehicleRequired = computed(() => {
+  return ["guest", "pick-up", "drop-off"].includes(prop.type);
+});
+
+const requireCompany = computed(() => {
+  return prop.type === "contractor";
 });
 
 const hidQrCodePassConfig = computed(() => {
@@ -1942,7 +1975,8 @@ async function submit(options: { skipNonCheckedOutCheck?: boolean } = {}) {
   if (formMode.value === "add" || formMode.value === "register") {
     const allowedFields = typeFieldMap[prop.type];
     for (const key of allowedFields as (keyof TVisitorPayload)[]) {
-      if (visitor[key] !== undefined) {
+      // only what the form has (see isFormField)
+      if (isFormField(key) && visitor[key] !== undefined) {
         payload = {
           ...payload,
           [key]: visitor[key],

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/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.2",
+  "version": "4.91.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/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>`;
+}