@7365admin1/layer-common 4.115.0 → 4.116.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @iservice365/layer-common
 
+## 4.116.0
+
+### Minor Changes
+
+- 66b0224: Vehicle Management: plate menu gets "Print sticker again" (same code) and "Undo re-issue"; the re-issue confirm explains it; the Print QR stickers dialog labels each row "Has sticker - prints the same code" / "New sticker" and can list only vehicles with a sticker. Reprinting a plate linked to a blank sticker prints that blank code.
+- b9429e8: Vehicle Management: the QR sticker column and the Preview plate table show each linked plate's printed sticker code (with a copy button) when the server sends it, so staff can match a blank sticker to a vehicle.
+
 ## 4.115.0
 
 ### Patch Changes
@@ -3104,11 +3111,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/VehicleManagement.vue

@@ -61,6 +61,9 @@
         <v-chip size="small" variant="tonal" :color="qrStickerSummary(rowPlates(item)).color" data-test="vehicle-qr-cell">
           {{ qrStickerSummary(rowPlates(item)).label }}
         </v-chip>
+        <div v-for="plate in rowPlates(item).filter((p: any) => p.qrCode)" :key="plate._id ?? plate.plateNumber">
+          <VehicleStickerCode :code="plate.qrCode" :label="rowPlates(item).length > 1 ? plate.plateNumber : ''" />
+        </div>
       </template>
 
       <template #item.category="{ value }">
@@ -111,8 +114,12 @@
                 <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"
+                <v-list-item v-if="qrStickersOn && plate.hasQrSticker" title="Print sticker again" prepend-icon="mdi-printer"
+                  data-test="vehicle-qr-print-again" @click="openStickerDialog([String(plate._id)])" />
+                <v-list-item v-if="qrStickersOn" title="Re-issue sticker (lost or stolen)" prepend-icon="mdi-qrcode-edit"
                   @click="askReissue(plate as TPlateNumber)" />
+                <v-list-item v-if="qrStickersOn" title="Undo re-issue" prepend-icon="mdi-undo"
+                  data-test="vehicle-qr-undo" @click="askUndo(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"
@@ -221,6 +228,7 @@
                       <template #item.plateNumber="{ value, item: plateNumberItem }">
                         <span class="d-inline-flex align-center ga-2">
                           {{ value }}
+                          <VehicleStickerCode v-if="qrEnabled && (plateNumberItem as any).qrCode" :code="(plateNumberItem as any).qrCode" />
                           <AnprCameraBadge :cameras="(plateNumberItem as any).anprCameras ?? []" :plate-number="value"
                             :plate-id="(plateNumberItem as any)._id ?? ''" :status="(plateNumberItem as any).status ?? ''"
                             :type="(plateNumberItem as any).type ?? ''" :end="(plateNumberItem as any).end ?? null"
@@ -241,8 +249,12 @@
                             <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-if="qrStickersOn && (plateNumberItem as any).hasQrSticker" title="Print sticker again" prepend-icon="mdi-printer"
+                              data-test="vehicle-qr-print-again" @click="openStickerDialog([String((plateNumberItem as any)._id)])" />
+                            <v-list-item v-if="qrStickersOn" title="Re-issue sticker (lost or stolen)" prepend-icon="mdi-qrcode-edit"
+                              @click="askReissue((plateNumberItem as any) as TPlateNumber)" />
+                            <v-list-item v-if="qrStickersOn" title="Undo re-issue" prepend-icon="mdi-undo"
+                              data-test="vehicle-qr-undo" @click="askUndo((plateNumberItem as any) 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"
@@ -378,8 +390,9 @@
       <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.
+          Use this when a sticker is lost or stolen. A new QR sticker will be made for {{ qrReissuePlate?.plateNumber }}.
+          The old sticker stops working, so the new one must be pasted on the car. You can undo this afterwards
+          (Undo re-issue) if the old sticker turns up. To print the same sticker again, use Print sticker again instead.
           <v-alert v-if="qrReissueError" type="error" variant="tonal" density="compact" class="mt-3">{{ qrReissueError }}</v-alert>
         </v-card-text>
         <v-card-actions>
@@ -392,6 +405,21 @@
       </v-card>
     </v-dialog>
 
+    <v-dialog v-model="dialog.qrUndo" width="460">
+      <v-card data-test="vehicle-qr-undo-dialog">
+        <v-card-title>Undo re-issue?</v-card-title>
+        <v-card-text>
+          {{ qrPlate?.plateNumber }}: {{ UNDO_REISSUE_NOTE }}
+          <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.qrUndo = false">Cancel</v-btn>
+          <v-btn color="primary" variant="flat" class="text-none" :loading="qrBusy" @click="confirmUndo">Undo re-issue</v-btn>
+        </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>
@@ -456,7 +484,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 { BLANK_LIST_NOTE, blankSummaryText, qrStickerSummary, stickerCodeHint, type BlankSummary } from '../utils/vehicle-qr-blank';
+import { BLANK_LIST_NOTE, UNDO_REISSUE_NOTE, blankSummaryText, qrStickerSummary, stickerCodeHint, type BlankSummary } from '../utils/vehicle-qr-blank';
 import { isPermissionRefusalError } from '../utils/permission-refusal';
 
 
@@ -560,7 +588,7 @@ const activeTab = ref<TVehicleTab>("residents");
 
 
 const { formatCamelCaseToWords, formatDate, debounce, maskNRIC } = useUtils();
-const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle, blockVehicle, unblockVehicle, getSpecificVehicleById, getActiveCameraCounts, getVehicleQrSettings, regenerateVehicleQr, linkVehicleQr, unlinkVehicleQr, getAvailableBlankVehicleQr } = useVehicle();
+const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle, blockVehicle, unblockVehicle, getSpecificVehicleById, getActiveCameraCounts, getVehicleQrSettings, regenerateVehicleQr, undoReissueVehicleQr, linkVehicleQr, unlinkVehicleQr, getAvailableBlankVehicleQr } = 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.
@@ -674,6 +702,28 @@ async function confirmUnlink() {
   }
 }
 
+function askUndo(plate: TPlateNumber) {
+  qrPlate.value = plate || null;
+  qrError.value = "";
+  dialog.qrUndo = true;
+}
+
+async function confirmUndo() {
+  const id = qrPlate.value?._id;
+  if (!id) return;
+  qrBusy.value = true;
+  qrError.value = "";
+  try {
+    await undoReissueVehicleQr(String(id));
+    dialog.qrUndo = false;
+    showMessage(`Earlier QR sticker restored for ${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;
@@ -786,6 +836,7 @@ const dialog = reactive({
   bulkVehicle: false,
   qrStickers: false,
   qrReissue: false,
+  qrUndo: false,
   qrLink: false,
   qrUnlink: false,
 });

package/components/VehicleQrStickerDialog.vue

@@ -33,27 +33,32 @@
           </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)" />
+              aria-label="Select all on this page" @update:model-value="(v: any) => tickGroup(shownPlates.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-checkbox v-if="mode === 'vehicles' && !fromReissue" v-model="onlyWithSticker" density="compact" hide-details
+            label="Only vehicles with a sticker (reprint)" data-test="vehicle-qr-only-sticker" />
           <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>
+              <tr><th style="width: 48px" /><th>Blk-Level-Unit</th><th>Owner</th><th>Plate</th><th>Status</th><th>Sticker</th></tr>
             </thead>
             <tbody>
-              <tr v-for="p in plates" :key="p.id">
+              <tr v-for="p in shownPlates" :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>
+                <td class="text-caption" :class="p.hasSticker ? 'text-success' : 'text-medium-emphasis'" data-test="vehicle-qr-row-note">
+                  {{ p.hasSticker ? STICKER_SAME_NOTE : STICKER_NEW_NOTE }}
+                </td>
               </tr>
-              <tr v-if="!plates.length"><td colspan="5" class="text-center text-medium-emphasis py-6">No vehicles to list</td></tr>
+              <tr v-if="!shownPlates.length"><td colspan="6" class="text-center text-medium-emphasis py-6">No vehicles to list</td></tr>
             </tbody>
           </v-table>
           <p v-if="mode === 'vehicles'" class="text-caption text-medium-emphasis mt-2 mb-0">
@@ -227,7 +232,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, blankSummaryText, type BlankSummary } from "../utils/vehicle-qr-blank";
+import { BLANK_DEFAULT_COUNT, BLANK_MAX_COUNT, BLANK_STRIP_NOTE, STICKER_NEW_NOTE, STICKER_SAME_NOTE, blankCount, blankStickerItems, blankSummaryText, reprintItems, type BlankSummary } from "../utils/vehicle-qr-blank";
 import { errorConverter } from "../utils/data";
 import { saveFile, stickerBundleName, stickerFileNames, svgToImage, zipFiles, type ImageFormat } from "../utils/vehicle-qr-export";
 import {
@@ -370,8 +375,10 @@ const sizeItems = computed(() => {
 });
 const sizeLines = computed(() => stickerSizeLines(normalizeDesign(design)));
 
-const allOnPageTicked = computed(() => plates.value.length > 0 && plates.value.every((p) => selected.value.includes(p.id)));
-const someOnPageTicked = computed(() => plates.value.some((p) => selected.value.includes(p.id)));
+const onlyWithSticker = ref(false);
+const shownPlates = computed(() => (onlyWithSticker.value ? plates.value.filter((p) => p.hasSticker) : plates.value));
+const allOnPageTicked = computed(() => shownPlates.value.length > 0 && shownPlates.value.every((p) => selected.value.includes(p.id)));
+const someOnPageTicked = computed(() => shownPlates.value.some((p) => selected.value.includes(p.id)));
 
 function tickGroup(ids: string[], on: boolean) {
   selected.value = setIds(selected.value, ids, on);
@@ -444,7 +451,7 @@ async function goReview() {
     isBlank.value = false;
     const { ids, dropped: over } = idsForRequest(selected.value);
     const res = await getVehicleQrStickers(props.site, ids);
-    items.value = (res?.items ?? []) as StickerItem[];
+    items.value = reprintItems((res?.items ?? []) as StickerItem[]);
     siteName.value = String((res as any)?.site?.name ?? "");
     missing.value = res?.missing ?? [];
     dropped.value = over;

package/components/VehicleStickerCode.vue

@@ -0,0 +1,27 @@
+<template>
+  <span class="d-inline-flex align-center ga-1 text-caption" data-test="vehicle-sticker-code">
+    <span v-if="label" class="text-medium-emphasis">{{ label }}</span>
+    <code class="vehicle-sticker-code">{{ code }}</code>
+    <v-btn :icon="copied ? 'mdi-check' : 'mdi-content-copy'" flat size="x-small" density="compact"
+      aria-label="Copy sticker code" @click.stop="copy" />
+  </span>
+</template>
+
+<script setup lang="ts">
+// A blank sticker's printed code, with a copy button. Shown only when the server sent it.
+const props = defineProps<{ code: string; label?: string }>();
+const copied = ref(false);
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(props.code);
+    copied.value = true;
+    setTimeout(() => (copied.value = false), 1500);
+  } catch {
+    /* clipboard blocked: the code is still readable on screen */
+  }
+}
+</script>
+
+<style scoped>
+.vehicle-sticker-code { font-size: 0.75rem; letter-spacing: 0.02em; }
+</style>

package/composables/useVehicle.ts

@@ -307,6 +307,12 @@ function getSpecificVehicleById(id: string){
     );
   }
 
+  function undoReissueVehicleQr(id: string) {
+    return useNuxtApp().$api<{ vehicleId: string; restored: boolean }>(`/api/vehicles/qr/undo-reissue/id/${id}`, {
+      method: "PUT",
+    });
+  }
+
   // Blank (pre-generated) stickers: print codes first, link them to vehicles later.
   function getBlankVehicleQrStickers(site: string, count: number) {
     return useNuxtApp().$api<{
@@ -363,6 +369,7 @@ function getSpecificVehicleById(id: string){
     setVehicleQrSettings,
     getVehicleQrStickers,
     regenerateVehicleQr,
+    undoReissueVehicleQr,
     getBlankVehicleQrStickers,
     getAvailableBlankVehicleQr,
     linkVehicleQr,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.115.0",
+  "version": "4.116.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-blank.ts

@@ -53,6 +53,27 @@ export function plateLines(plate: string): string[] {
   return isBlankCode(plate) ? [plate.slice(0, 14), plate.slice(15)] : [plate];
 }
 
+const BLANK_TOKEN = /^[0-9A-HJKMNP-TV-Z]{24}$/;
+
+/**
+ * Reprinting a plate whose sticker was a blank one: print that same code in the
+ * plate slot (as the original blank sticker did) so the new sticker matches the
+ * old one. Any other sticker keeps its plate number.
+ */
+export function reprintItems<T extends { token?: string; plateNumber?: string }>(items: T[]): T[] {
+  return items.map((i) =>
+    i.token && BLANK_TOKEN.test(i.token) ? { ...i, plateNumber: (i.token.match(/.{4}/g) ?? []).join("-") } : i,
+  );
+}
+
+/** The print dialog's per-row note: a plate that has a sticker prints the same code again. */
+export const STICKER_SAME_NOTE = "Has sticker - prints the same code";
+export const STICKER_NEW_NOTE = "New sticker";
+
+/** Shown before undoing a re-issue: stickers re-issued before 11 Oct 2026 saved nothing to go back to. */
+export const UNDO_REISSUE_NOTE =
+  "Puts back the sticker this vehicle had before its last re-issue (the newer one stops working). Only possible for re-issues made after 11 Oct 2026; if the earlier sticker was a blank one, its code is back in the available list and can be linked again.";
+
 /** The list's "QR sticker" cell for one row: how many of its plates already hold a sticker. */
 export function qrStickerSummary(plates: Array<{ hasQrSticker?: boolean }>): { label: string; color: string } {
   const total = plates.length;

package/utils/vehicle-qr-sticker.ts

@@ -181,6 +181,8 @@ export type StickerPlateRow = {
   status: string;
   ownerName: string;
   unitLabel: string;
+  /** The list says this plate already has a sticker (printing it again prints the same code). */
+  hasSticker: boolean;
 };
 
 const text = (v: unknown) => (v == null ? "" : String(v).trim());
@@ -242,6 +244,7 @@ export function stickerPlateRows(rows: Array<Record<string, any>>): StickerPlate
         plateNumber: text(plate.plateNumber),
         status: text(plate.status).toLowerCase(),
         ownerName: text(row?.name ?? plate.name),
+        hasSticker: plate.hasQrSticker === true,
         unitLabel: stickerUnitLabel({
           block: row?.block?.name ?? row?.block,
           level: row?.level?.name ?? row?.level,