@7365admin1/layer-common 4.110.1 → 4.111.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 4.111.0
+
+### Minor Changes
+
+- 0ba99c0: Vehicle QR blank (pre-generated) stickers: the Print QR stickers dialog gets "Blank stickers (link later)" (count 1-500, same designs, shapes, sizes, print / save sheet / PNG-JPEG; the printed code sits in the plate slot with a cut-off "not linked yet" strip), and each vehicle row gets "Link QR sticker" (type the printed code - case, spaces and dashes ignored; replace confirm when the vehicle already has a sticker) and "Remove QR sticker". useVehicle: getBlankVehicleQrStickers, linkVehicleQr, unlinkVehicleQr.
+
+## 4.110.2
+
+### Patch Changes
+
+- aa41164: Staging QA 2026-10-08: comboboxes are outlined like other fields; Edit Unit saves a unit whose level is a bare id (message says unit, not building); Tenancies period buttons fit a phone and the renew message shows a readable date; confirm prompts read "Are you sure you want to".
+
 ## 4.110.1
 
 ### Patch Changes
@@ -30,6 +42,7 @@ The report PDF is laid out as a document rather than a screenshot cut into pages
 The report CSV is built from the report's data instead of read off the first table on screen (`buildReportCsv` in `utils/report-export.ts`, `patrolReportCsv` / `dailyReportCsv` / `monthlyReportCsv` in `utils/nfc-patrol-report.ts`; each tab's `export` event now carries its tables): the report, site, route and date on the first lines, then every table under its title. The Patrol CSV now has every checkpoint, with each skip's remarks and photo link on its row (it used to carry only schedule against actual); the Daily CSV adds a Skipped Checkpoints table, one row per skip naming its run. UTF-8 with a byte order mark so Excel reads it, cells a spreadsheet would run as a formula kept as text, and named like the PDF. Signatures load eagerly so ones below the fold are no longer missing from the PDF.
 
 Monthly report: a month that had patrols opens the list of that month's patrol runs (new `PatrolMonthDialog`) - by day then scheduled start, with the month's totals in its title, ten runs a page ("1-10 of 124" and the arrows, like the app's tables) - and each run opens the same Patrol Route Details dialog, checkpoints and skip photos included. Built from the year of logs the report already loads (`mapLogsToMonthRuns`, sharing `monthIndexOf` with the yearly table so a month's list adds up to its row), so opening a month asks the server nothing. The summary-row mapping moved from the daily composable to `mapLogToSummaryRow()` and now carries the run's `date`, which the details dialog shows.
+
 - 8d3d430: NFC Routes: the Security Check Schedule reads at a glance. Each check window is a pill that never breaks across lines ("09:01 – 14:40"), earliest first instead of in the order the times were typed, with "+1" on a window that ends the next day (new `NFCRouteScheduleTimes`, `routeWindows` in `utils/nfc-patrol-schedule.ts`). The table shows the first three and folds the rest into "+N more" (all of them on hover), so a busy route keeps a normal row; the Route Details dialog shows them all under "Security Check Schedule · 9 checks a day". Route days read Monday first with runs as ranges - "Mon – Sat", "Every day" - instead of "Mon, Wed, Fri, Tue, Thu, Sat" (`formatRouteDays`).
 
 ## 4.108.0
@@ -3067,11 +3080,11 @@ Monthly report: a month that had patrols opens the list of that month's patrol r
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                                                                                                                                                                                              GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                                                                                                                                                                                              GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                                                                                                                                                                                                GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                                                                                                                                                                                                GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                                                                                                                                                                                              owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                                                                                                                                                                                              staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                                                                                                                                                                                                owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                                                                                                                                                                                                staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/components/BuildingUnitFormAdd.vue

@@ -387,7 +387,7 @@ async function submit() {
     emit("success");
   } catch (error: any) {
     message.value =
-      error.response?._data?.message || "Failed to create building";
+      error.response?._data?.message || "Could not add the unit. Please try again.";
     showMessage(message.value, "error");
   } finally {
     disable.value = false;

package/components/BuildingUnitFormEdit.vue

@@ -536,7 +536,8 @@ async function submit() {
 
     await updateById(buildingUnit.value._id ?? "", {
       name: buildingUnit.value.name,
-      level: buildingUnit.value.level._id,
+      // The level arrives as a populated object, or as a bare id when it could not be looked up.
+      level: (buildingUnit.value.level as any)?._id ?? buildingUnit.value.level ?? "",
       // category: buildingUnit.value.category,
       buildingUnitFiles: (buildingUnit.value.buildingUnitFiles as string[] || []).map((id) => ({ id, name: buildingUnitFilesNames.value[id] ?? "" })),
       companyName: buildingUnit.value.companyName,
@@ -550,7 +551,7 @@ async function submit() {
     emit("success");
   } catch (error: any) {
     message.value =
-      error.response?._data?.message || "Failed to create building";
+      error.response?._data?.message || "Could not save the unit. Please try again.";
   } finally {
     disable.value = false;
   }

package/components/BulletinBoardManagement.vue

@@ -75,7 +75,7 @@
         </v-dialog>
 
         <v-dialog v-model="dialog.deletePrompt" width="450" persistent>
-            <CardDeleteConfirmation prompt-title="Are you sure want to delete this announcement?"
+            <CardDeleteConfirmation prompt-title="Are you sure you want to delete this announcement?"
                 :loading="loading.deletingAnnouncement" @close="dialog.deletePrompt = false"
                 @delete="handleProceedDeleteAnnouncement" />
         </v-dialog>

package/components/CameraMain.vue

@@ -288,7 +288,7 @@
           style="max-height: 100vh; overflow-y: auto"
           class="pa-5 my-5 px-7 text-center"
         >
-          Are you sure want to delete this {{ camera.type }} camera?
+          Are you sure you want to delete this {{ camera.type }} camera?
         </v-card-text>
 
         <v-toolbar class="pa-0" density="compact">

package/components/UnitPersonCard.vue

@@ -70,7 +70,7 @@
 
     <v-dialog v-model="dialog.showPrompt" persistent width="540">
       <DialogReusablePrompt :loading="loadingOwnerProcessing"
-        :prompt-title="`Are you sure want to ${person.isOwner ? 'remove' : 'add'} (${person.name}) as owner ?`"
+        :prompt-title="`Are you sure you want to ${person.isOwner ? 'remove' : 'add'} (${person.name}) as owner ?`"
         @proceed="handleApprove(person)" @close="dialog.showPrompt = false" />
     </v-dialog>
   </v-card-text>

package/components/UnitTenancies.vue

@@ -22,10 +22,11 @@
     <v-col cols="12">
       <AppCard class="pa-4">
         <div class="d-flex align-center flex-wrap ga-2 mb-3">
+          <span class="text-body-2">Ending in the next</span>
           <v-btn-toggle v-model="days" mandatory density="comfortable" variant="outlined" divided data-test="tn-days" @update:model-value="load">
-            <v-btn :value="30" class="text-none">Next 30 days</v-btn>
-            <v-btn :value="60" class="text-none">Next 60 days</v-btn>
-            <v-btn :value="90" class="text-none">Next 90 days</v-btn>
+            <v-btn :value="30" class="text-none">30 days</v-btn>
+            <v-btn :value="60" class="text-none">60 days</v-btn>
+            <v-btn :value="90" class="text-none">90 days</v-btn>
           </v-btn-toggle>
           <v-spacer />
           <v-btn variant="text" icon="mdi-refresh" aria-label="Refresh" :loading="loading" @click="load" />
@@ -217,7 +218,7 @@ async function confirmRenew() {
       leaseEnd: `${renewEnd.value}T23:59`,
     });
     renewOpen.value = false;
-    say(`Tenancy for ${current.value.unit} renewed to ${renewEnd.value}.`);
+    say(`Tenancy for ${current.value.unit} renewed to ${new Date(`${renewEnd.value}T00:00`).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" })}.`);
     await load();
   } catch (e: any) {
     renewError.value = message(e, "The tenancy could not be renewed. Please try again.");

package/components/VehicleManagement.vue

@@ -101,6 +101,10 @@
                 </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-if="qrStickersOn" title="Link QR sticker" prepend-icon="mdi-link-variant"
+                  @click="askLink(plate as TPlateNumber)" />
+                <v-list-item v-if="qrStickersOn" title="Remove QR sticker" prepend-icon="mdi-link-variant-off"
+                  @click="askUnlink(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)" />
@@ -227,6 +231,10 @@
                           <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-if="qrStickersOn" title="Link QR sticker" prepend-icon="mdi-link-variant"
+                              @click="askLink(plateNumberItem as TPlateNumber)" />
+                            <v-list-item v-if="qrStickersOn" title="Remove QR sticker" prepend-icon="mdi-link-variant-off"
+                              @click="askUnlink(plateNumberItem as TPlateNumber)" />
                             <v-list-item
                               v-for="action in vehiclePlateActions(plateNumberItem, vehiclePermissions)"
                               :key="action.key" :title="action.title" :prepend-icon="action.icon"
@@ -276,7 +284,7 @@
         snackbar, along with the device's raw `{"ErrorCode":...}` reply.
       -->
       <DialogReusablePrompt :loading="approvingVehicle" :message="actionError" message-error :no-permission="revoked.approve"
-        :prompt-title="`Are you sure want to approve this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
+        :prompt-title="`Are you sure you want to approve this vehicle - ${selectedPlateNumberObject?.plateNumber}?`"
         @proceed="submitApprove" @close="closeActionDialog('approveVehicle')" />
     </v-dialog>
     <!-- Like Delete, Restore says what it does at the barrier: a whitelist
@@ -371,6 +379,48 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+
+    <v-dialog v-model="dialog.qrLink" width="460">
+      <v-card data-test="vehicle-qr-link-dialog">
+        <v-card-title>Link QR sticker</v-card-title>
+        <v-card-text>
+          Type the code printed on the sticker. It will show {{ qrPlate?.plateNumber }} when scanned.
+          <v-text-field v-model="qrLinkCode" label="Sticker code" placeholder="ABCD-EFGH-JKMN-PQRS-TVWX-YZ01" density="compact"
+            variant="outlined" class="mt-3" autofocus :disabled="qrBusy" :hint="qrLinkHint" persistent-hint
+            data-test="vehicle-qr-link-code" @keyup.enter="confirmLink(false)" />
+          <v-alert v-if="qrLinkAskReplace" type="warning" variant="tonal" density="compact" class="mt-3">
+            {{ qrError }} Link it anyway?
+          </v-alert>
+          <v-alert v-else-if="qrError" type="error" variant="tonal" density="compact" class="mt-3">{{ qrError }}</v-alert>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" class="text-none" @click="dialog.qrLink = false">Cancel</v-btn>
+          <v-btn color="primary" variant="flat" class="text-none" :loading="qrBusy" :disabled="!qrLinkCode.trim()"
+            data-test="vehicle-qr-link-go" @click="confirmLink(qrLinkAskReplace)">
+            {{ qrLinkAskReplace ? "Link and stop the old sticker" : "Link" }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="dialog.qrUnlink" width="460">
+      <v-card data-test="vehicle-qr-unlink-dialog">
+        <v-card-title>Remove QR sticker?</v-card-title>
+        <v-card-text>
+          The QR sticker on {{ qrPlate?.plateNumber }} will stop working. Scanning it will no longer show this vehicle.
+          <v-alert v-if="qrError" type="error" variant="tonal" density="compact" class="mt-3">{{ qrError }}</v-alert>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" class="text-none" @click="dialog.qrUnlink = false">Cancel</v-btn>
+          <v-btn color="error" variant="flat" class="text-none" :loading="qrBusy" data-test="vehicle-qr-unlink-go"
+            @click="confirmUnlink">
+            Remove
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
 </template>
@@ -389,6 +439,7 @@ import {
 // `error.message` put ofetch's own developer string in the delete dialog:
 // `[PUT] "/api/vehicles/6a9691f25648d7633171c9e3": 502`.
 import { errorConverter } from '../utils/data';
+import { stickerCodeHint } from '../utils/vehicle-qr-blank';
 import { isPermissionRefusalError } from '../utils/permission-refusal';
 
 
@@ -490,7 +541,7 @@ const activeTab = ref<TVehicleTab>("residents");
 
 
 const { formatCamelCaseToWords, formatDate, debounce, maskNRIC } = useUtils();
-const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle, blockVehicle, unblockVehicle, getSpecificVehicleById, getActiveCameraCounts, getVehicleQrSettings, regenerateVehicleQr } = useVehicle();
+const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle, blockVehicle, unblockVehicle, getSpecificVehicleById, getActiveCameraCounts, getVehicleQrSettings, regenerateVehicleQr, linkVehicleQr, unlinkVehicleQr } = 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.
@@ -510,6 +561,63 @@ async function loadQrSetting() {
 }
 onMounted(loadQrSetting);
 
+// Link a blank (pre-printed) sticker to a vehicle, or take a sticker off one.
+const qrPlate = ref<TPlateNumber | null>(null);
+const qrLinkCode = ref("");
+const qrLinkAskReplace = ref(false);
+const qrBusy = ref(false);
+const qrError = ref("");
+// a gentle hint once something is typed, never a block - the server has the final say
+const qrLinkHint = computed(() => (qrLinkCode.value.trim() ? stickerCodeHint(qrLinkCode.value) : ""));
+
+function askLink(plate: TPlateNumber) {
+  qrPlate.value = plate || null;
+  qrLinkCode.value = "";
+  qrLinkAskReplace.value = false;
+  qrError.value = "";
+  dialog.qrLink = true;
+}
+
+async function confirmLink(replace: boolean) {
+  const id = qrPlate.value?._id;
+  if (!id || !qrLinkCode.value.trim()) return;
+  qrBusy.value = true;
+  qrError.value = "";
+  try {
+    await linkVehicleQr(qrLinkCode.value.trim(), String(id), replace);
+    dialog.qrLink = false;
+    showMessage(`QR sticker linked to ${qrPlate.value?.plateNumber}`, "success");
+  } catch (e: any) {
+    qrError.value = errorConverter(e);
+    // the vehicle already has a sticker: ask, then resend with replace
+    qrLinkAskReplace.value = !replace && /already has a QR sticker/i.test(qrError.value);
+  } finally {
+    qrBusy.value = false;
+  }
+}
+
+function askUnlink(plate: TPlateNumber) {
+  qrPlate.value = plate || null;
+  qrError.value = "";
+  dialog.qrUnlink = true;
+}
+
+async function confirmUnlink() {
+  const id = qrPlate.value?._id;
+  if (!id) return;
+  qrBusy.value = true;
+  qrError.value = "";
+  try {
+    await unlinkVehicleQr(String(id));
+    dialog.qrUnlink = false;
+    showMessage(`QR sticker removed from ${qrPlate.value?.plateNumber}`, "success");
+  } catch (e: any) {
+    qrError.value = errorConverter(e);
+  } finally {
+    qrBusy.value = false;
+  }
+}
+
 function openStickerDialog(ids: string[] = []) {
   qrVehicleIds.value = ids;
   dialog.qrStickers = true;
@@ -622,6 +730,8 @@ const dialog = reactive({
   bulkVehicle: false,
   qrStickers: false,
   qrReissue: false,
+  qrLink: false,
+  qrUnlink: false,
 });
 
 

package/components/VehicleQrStickerDialog.vue

@@ -13,7 +13,22 @@
 
         <!-- Step 1: choose vehicles -->
         <template v-if="step === 'select'">
-          <div class="d-flex flex-wrap align-center ga-2 mb-2">
+          <v-btn-toggle v-model="mode" mandatory density="compact" color="primary" variant="outlined" divided class="mb-3"
+            data-test="vehicle-qr-mode">
+            <v-btn value="vehicles" class="text-none" data-test="vehicle-qr-mode-vehicles">For vehicles</v-btn>
+            <v-btn value="blank" class="text-none" data-test="vehicle-qr-mode-blank">Blank stickers (link later)</v-btn>
+          </v-btn-toggle>
+          <div v-if="mode === 'blank'" data-test="vehicle-qr-blank">
+            <p class="text-body-2 mb-3">
+              Make QR stickers before you know which car each is for. Each sticker has its own code printed on it. Paste it
+              on a car, then link it to that vehicle in Vehicles &gt; Link QR sticker - or scan it with iMA365 / iSecure365
+              and pick the vehicle there. Until it is linked, scanning it shows "not linked yet".
+            </p>
+            <v-text-field v-model.number="blankQty" type="number" :min="1" :max="BLANK_MAX_COUNT" label="How many stickers?"
+              density="compact" variant="outlined" style="max-width: 240px" :hint="`1 to ${BLANK_MAX_COUNT} at a time`"
+              persistent-hint data-test="vehicle-qr-blank-count" />
+          </div>
+          <div v-if="mode === 'vehicles'" 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>
@@ -22,7 +37,7 @@
               Select all matching the current tab and search
             </v-btn>
           </div>
-          <v-table density="compact" fixed-header height="360">
+          <v-table v-if="mode === 'vehicles'" 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>
@@ -38,7 +53,7 @@
               <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">
+          <p v-if="mode === 'vehicles'" 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>
@@ -53,12 +68,18 @@
           </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>
+              <tr v-if="isBlank"><th style="width: 48px" /><th>Code</th><th>Note</th></tr>
+              <tr v-else><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>
+                <template v-if="isBlank">
+                  <td class="font-weight-bold">{{ it.plateNumber }}</td>
+                  <td class="text-medium-emphasis">{{ BLANK_STRIP_NOTE }}</td>
+                </template>
+                <template v-else>
                 <td>{{ installerLine(it).place || "-" }}</td>
                 <td>{{ installerLine(it).owner || "-" }}</td>
                 <td class="font-weight-bold">{{ it.plateNumber }}</td>
@@ -69,10 +90,20 @@
                   </v-chip>
                   <span v-else class="text-medium-emphasis">OK</span>
                 </td>
+                </template>
               </tr>
             </tbody>
           </v-table>
-          <p class="text-caption text-medium-emphasis my-2">
+          <v-alert v-if="isBlank && design.shape !== 'square' && design.text === 'none'" type="warning" variant="tonal"
+            density="compact" class="my-2" data-test="vehicle-qr-blank-notext">
+            With "No text" the sticker's code is not printed on it, so these stickers can only be linked by scanning them with
+            iMA365 / iSecure365 - Vehicles &gt; Link QR sticker needs the printed code. Pick another Text option to print it.
+          </v-alert>
+          <p v-if="isBlank" class="text-caption text-medium-emphasis my-2">
+            Each sticker has a cut-off strip under the dashed line saying it is not linked yet - cut it off before pasting
+            the sticker on the car. The code on the sticker is what you type in Vehicles &gt; Link QR sticker.
+          </p>
+          <p v-else 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>
@@ -157,9 +188,10 @@
         <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-if="step === 'select'" color="primary" variant="flat" class="text-none"
+          :disabled="mode === 'blank' ? !blankCount(blankQty) : !selected.length" :loading="loading" @click="goReview">
+          <template v-if="mode === 'blank'">Preview {{ blankCount(blankQty) }} blank sticker{{ blankCount(blankQty) === 1 ? "" : "s" }}</template>
+          <template v-else>Preview {{ selected.length }} sticker{{ selected.length === 1 ? "" : "s" }}</template>
         </v-btn>
         <template v-if="step === 'review'">
           <v-btn variant="tonal" class="text-none" prepend-icon="mdi-content-save" :disabled="!ticked.length || !docHtml"
@@ -192,6 +224,7 @@
 <script lang="ts" setup>
 import QRCode from "qrcode";
 import useVehicle from "../composables/useVehicle";
+import { BLANK_DEFAULT_COUNT, BLANK_MAX_COUNT, BLANK_STRIP_NOTE, blankCount, blankStickerItems } from "../utils/vehicle-qr-blank";
 import { errorConverter } from "../utils/data";
 import { saveFile, stickerBundleName, stickerFileNames, svgToImage, zipFiles, type ImageFormat } from "../utils/vehicle-qr-export";
 import {
@@ -240,7 +273,12 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:modelValue"]);
 
-const { getVehicles, getVehicleQrStickers } = useVehicle();
+const { getVehicles, getVehicleQrStickers, getBlankVehicleQrStickers } = useVehicle();
+
+// "vehicles" = stickers for chosen vehicles; "blank" = codes made in advance, linked to a vehicle later.
+const mode = ref<"vehicles" | "blank">("vehicles");
+const blankQty = ref<number | string>(BLANK_DEFAULT_COUNT);
+const isBlank = ref(false); // the mode the shown review was made in
 
 const step = ref<"select" | "review">("select");
 const plates = ref<StickerPlateRow[]>([]);
@@ -339,6 +377,8 @@ watch(
     items.value = [];
     docHtml.value = "";
     step.value = "select";
+    mode.value = "vehicles";
+    isBlank.value = false;
     plates.value = stickerPlateRows(props.rows);
     selected.value = defaultPlateIds(plates.value);
     if (props.vehicleIds.length) {
@@ -376,6 +416,18 @@ async function goReview() {
   loading.value = true;
   error.value = "";
   try {
+    if (mode.value === "blank" && !props.vehicleIds.length) {
+      const blank = await getBlankVehicleQrStickers(props.site, blankCount(blankQty.value));
+      items.value = blankStickerItems(blank?.items ?? []);
+      siteName.value = String(blank?.site?.name ?? "");
+      missing.value = [];
+      dropped.value = 0;
+      ticked.value = items.value.map((i) => i.vehicleId);
+      isBlank.value = true;
+      step.value = "review";
+      return;
+    }
+    isBlank.value = false;
     const { ids, dropped: over } = idsForRequest(selected.value);
     const res = await getVehicleQrStickers(props.site, ids);
     items.value = (res?.items ?? []) as StickerItem[];

package/composables/useVehicle.ts

@@ -306,6 +306,27 @@ function getSpecificVehicleById(id: string){
     );
   }
 
+  // Blank (pre-generated) stickers: print codes first, link them to vehicles later.
+  function getBlankVehicleQrStickers(site: string, count: number) {
+    return useNuxtApp().$api<{
+      site: { _id: string; name: string };
+      items: Array<{ token: string; qr: string; code: string }>;
+    }>("/api/vehicles/qr/blank-stickers", { method: "POST", body: { site, count } });
+  }
+
+  // `token` is sent as typed - the server ignores case, spaces and dashes.
+  function linkVehicleQr(token: string, vehicleId: string, replace?: boolean) {
+    return useNuxtApp().$api<Record<string, any>>("/api/vehicles/qr/link", {
+      method: "POST",
+      body: { token, vehicleId, ...(replace ? { replace: true } : {}) },
+    });
+  }
+
+  function unlinkVehicleQr(id: string) {
+    return useNuxtApp().$api<{ vehicleId: string; linked: boolean }>(`/api/vehicles/qr/unlink/id/${id}`, {
+      method: "PUT",
+    });
+  }
 
   return {
     getVehicles,
@@ -330,5 +351,8 @@ function getSpecificVehicleById(id: string){
     setVehicleQrSettings,
     getVehicleQrStickers,
     regenerateVehicleQr,
+    getBlankVehicleQrStickers,
+    linkVehicleQr,
+    unlinkVehicleQr,
   };
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.110.1",
+  "version": "4.111.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/plugins/vuetify.ts

@@ -129,6 +129,12 @@ export default defineNuxtPlugin((app) => {
         density: "comfortable",
         menuProps: { attach: document.body, zIndex: 3000 },
       },
+      // Same look as the other fields: without this every combobox drew grey and filled.
+      VCombobox: {
+        variant: "outlined",
+        density: "comfortable",
+        menuProps: { attach: document.body, zIndex: 3000 },
+      },
       VSelect: {
         variant: "outlined",
         density: "comfortable",

package/utils/vehicle-qr-blank.ts

@@ -0,0 +1,54 @@
+/**
+ * Blank (pre-generated) vehicle QR stickers - the pure parts: turn the
+ * server's blank codes into sticker items, and check a code typed by staff.
+ * Kept free of Vue so `node --test` can run it.
+ */
+
+import type { StickerItem } from "./vehicle-qr-sticker.ts";
+
+/** Most blank stickers per request (server: POST /api/vehicles/qr/blank-stickers). */
+export const BLANK_MAX_COUNT = 500;
+export const BLANK_DEFAULT_COUNT = 20;
+/** Characters in a blank sticker token (Crockford base32, 120 bits). */
+export const BLANK_TOKEN_LENGTH = 24;
+
+/** What the installer strip says under a blank sticker. */
+export const BLANK_STRIP_NOTE = "Not linked yet - link it in Vehicles > Link QR sticker, or scan it with iMA365 / iSecure365";
+
+export type BlankItem = { token: string; qr: string; code: string };
+
+/** A whole number 1..500, or 0 when the field is empty or not a number. */
+export function blankCount(value: unknown): number {
+  const n = Math.floor(Number(value));
+  return Number.isFinite(n) && n >= 1 ? Math.min(n, BLANK_MAX_COUNT) : 0;
+}
+
+/** Sticker items for the normal sticker flow: token = the unique key, the code is printed in the plate slot. */
+export function blankStickerItems(items: BlankItem[]): StickerItem[] {
+  return items.map((i) => ({ vehicleId: i.token, qr: i.qr, token: i.token, plateNumber: i.code, status: "active", blank: true }));
+}
+
+/** What staff type, as the server reads it: no spaces or dashes, capitals, I/L as 1, O as 0. A pasted "S365V:" is ignored. */
+export function normalizeStickerCode(input: unknown): string {
+  return String(input ?? "")
+    .replace(/^\s*S365V:/i, "")
+    .replace(/[^0-9A-Za-z]/g, "")
+    .toUpperCase()
+    .replace(/[IL]/g, "1")
+    .replace(/O/g, "0");
+}
+
+/** "" when the typed code looks right, else a gentle hint (the server has the final say). */
+export function stickerCodeHint(input: unknown): string {
+  const code = normalizeStickerCode(input);
+  if (code.length === BLANK_TOKEN_LENGTH && /^[0-9A-HJKMNP-TV-Z]+$/.test(code)) return "";
+  return "Sticker codes look like ABCD-EFGH-JKMN-PQRS-TVWX-YZ01 (24 letters and numbers, printed under the QR code).";
+}
+
+/** A blank sticker's printed code, "ABCD-EFGH-JKMN-PQRS-TVWX-YZ01"? */
+export const isBlankCode = (plate: unknown): boolean => /^([0-9A-Z]{4}-){5}[0-9A-Z]{4}$/.test(String(plate ?? ""));
+
+/** Two lines for a blank code so the letters can be big enough to read; anything else is one line. */
+export function plateLines(plate: string): string[] {
+  return isBlankCode(plate) ? [plate.slice(0, 14), plate.slice(15)] : [plate];
+}

package/utils/vehicle-qr-sticker.ts

@@ -18,6 +18,7 @@ import {
   stickerTheme,
   type StickerDesign,
 } from "./vehicle-qr-design.ts";
+import { BLANK_STRIP_NOTE, plateLines } from "./vehicle-qr-blank.ts";
 
 /** The server's most vehicles per request (POST /api/vehicles/qr/stickers). */
 export const STICKER_MAX_PER_REQUEST = 500;
@@ -170,6 +171,8 @@ export type StickerItem = {
   plateNumber?: string;
   ownerName?: string;
   status?: string;
+  /** A blank (pre-generated) sticker: `plateNumber` holds its printed code and it is not linked to a vehicle yet. */
+  blank?: boolean;
 };
 
 export type StickerPlateRow = {
@@ -304,6 +307,7 @@ html, body { margin: 0; padding: 0; background: #fff; color: #111; font-family:
 .mark { width: 3.2mm; height: 3.2mm; border-radius: 0.8mm; 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: 0.8mm; font-size: 6.5pt; line-height: 1.2; color: #111; height: ${l.stripH - 1.2}mm; overflow: hidden; }
 .cut.free { margin-top: 1.6mm; border-top: 0; padding-top: 0; height: ${l.stripH - 1.6}mm; }
+.cut.blank { font-size: 5pt; line-height: 1.15; }
 .cut .owner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .info { position: absolute; left: 0; right: 0; bottom: 0; height: ${INFO_H}mm; border-top: 0.2mm solid #bbb; padding-top: 1mm; font-size: 6.5pt; line-height: 1.3; color: #333; display: flex; gap: 3mm; align-items: flex-start; }
 .info .sizes { flex: 1; }
@@ -342,7 +346,7 @@ function plateSizeMm(plate: string, boxW: number, max = 4.6): number {
  * `items` (each sticker's frame + QR, already drawn for the chosen design).
  * Every value is HTML-escaped - an owner or site name is typed by a person.
  */
-type CardContext = { ink: string; label: string; layout: SheetLayout; k: number; shaped: boolean; bare: boolean; wordsTop: number; tag: { x: number; y: number; w: number; h: number } | null };
+type CardContext = { cardW: number; ink: string; label: string; layout: SheetLayout; k: number; shaped: boolean; bare: boolean; wordsTop: number; tag: { x: number; y: number; w: number; h: number } | null };
 
 function cardContext(design: StickerDesign, siteName: string | undefined, n: number): CardContext {
   const g = stickerGeometry(design, n);
@@ -350,6 +354,7 @@ function cardContext(design: StickerDesign, siteName: string | undefined, n: num
   // Shaped codes: plate (and words) in ink on the paper tab under the shape - or no text at all.
   const shaped = !!g.pts;
   return {
+    cardW: sheetLayout(design).cellW,
     ink: stickerTheme(design.theme).ink,
     label: stickerLabel(design, siteName),
     layout: sheetLayout(design),
@@ -363,17 +368,20 @@ function cardContext(design: StickerDesign, siteName: string | undefined, n: num
 
 /** The sticker itself (frame + QR + plate words) - what goes on the car. */
 function cardHtml(item: StickerItem, face: string, c: CardContext): string {
-  const plate = escapeHtml(item.plateNumber);
-  const label = c.label ? `<div class="hint">${escapeHtml(c.label)}</div>` : "";
+  const lines = plateLines(text(item.plateNumber));
+  const plate = lines.map(escapeHtml).join("<br>");
+  const longest = lines.reduce((a, l) => (l.length > a.length ? l : a), "");
+  // a two-line code has no room for the words under it inside the tag
+  const label = c.label && !(c.tag && lines.length > 1) ? `<div class="hint">${escapeHtml(c.label)}</div>` : "";
   const words = c.shaped && !c.tag
     ? ""
     : c.tag
     ? `<div class="words band" style="left:${c.tag.x}mm;right:auto;top:${c.tag.y}mm;width:${c.tag.w}mm;height:${c.tag.h}mm">` +
-      `<div class="plate" style="font-size:${plateSizeMm(text(item.plateNumber), c.tag.w, 4.6 * c.k)}mm">${plate}</div>` +
+      `<div class="plate" style="font-size:${plateSizeMm(longest, c.tag.w, 4.6 * c.k)}mm">${plate}</div>` +
       label +
       `</div>`
     : `<div class="words" style="top:${c.wordsTop}mm">` +
-      `<div class="plate">${plate}</div>` +
+      `<div class="plate"${lines.length > 1 ? ` style="font-size:${plateSizeMm(longest, c.cardW - 6, 4.6)}mm"` : ""}>${plate}</div>` +
       label +
       `<div class="brand"><span class="mark" style="background:${c.ink}">7</span>Powered by Seven365</div>` +
       `</div>`;
@@ -395,10 +403,13 @@ export function buildStickerDocument(
   const c = cardContext(design, opts.siteName, n);
   const cells = items.map((item, i) => {
     const { place, owner } = installerLine(item);
+    const [noteHead, noteRest] = BLANK_STRIP_NOTE.split(" - ");
+    const strip = item.blank
+      ? `<div class="cut${c.bare ? " free" : ""} blank"><div><b>${escapeHtml(noteHead)}</b></div><div>${escapeHtml(noteRest)}</div></div>`
+      : `<div class="cut${c.bare ? " free" : ""}"><div><b>${escapeHtml(place || "-")}</b></div><div class="owner">Owner: ${escapeHtml(owner || "-")}</div></div>`;
     return (
       `<div class="cell">${cardHtml(item, faceSvgs[i] ?? "", c)}` +
-      `<div class="cut${c.bare ? " free" : ""}"><div><b>${escapeHtml(place || "-")}</b></div>` +
-      `<div class="owner">Owner: ${escapeHtml(owner || "-")}</div></div></div>`
+      `${strip}</div>`
     );
   });
   const marks = cropMarksSvg(c.layout);