@7365admin1/layer-common 4.113.0 → 4.114.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 4.114.0
+
+### Minor Changes
+
+- Vehicle Mgmt: the Link QR sticker dialog now offers a searchable list of the blank stickers still available, a Scan sticker camera button and typing as fallback; a count of blank stickers available (printed / linked) shows on Vehicle Mgmt and in the Blank stickers tab of the print dialog
+
 ## 4.113.0
 
 ### Minor Changes

package/components/VehicleManagement.vue

@@ -11,6 +11,9 @@
         subtitle="The register of residents' and visitors' vehicles. Works with or without number-plate (LPR) cameras - cameras only add automatic plate matching at the gate."
       >
         <template #actions>
+          <span v-if="qrStickersOn && qrSummary" class="text-caption text-medium-emphasis mr-2" data-test="vehicle-qr-summary">
+            {{ blankSummaryText(qrSummary) }}
+          </span>
           <AppButton v-if="qrStickersOn" icon="mdi-qrcode" variant="ghost" @click="openStickerDialog()">
             Print QR stickers
           </AppButton>
@@ -393,10 +396,15 @@
       <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)" />
+          Pick an available sticker code, scan the sticker, or type the code printed on it. It will show
+          {{ qrPlate?.plateNumber }} when scanned.
+          <v-combobox v-model="qrLinkCode" v-model:search="qrSearch" :items="qrCodes" no-filter clearable label="Sticker code"
+            placeholder="Pick or type ABCD-EFGH-JKMN-PQRS-TVWX-YZ01" density="compact" variant="outlined" class="mt-3"
+            :disabled="qrBusy" :hint="qrLinkHint" persistent-hint hide-no-data data-test="vehicle-qr-link-code"
+            @keyup.enter="confirmLink(false)" />
+          <p v-if="qrSummary" class="text-caption mt-2" data-test="vehicle-qr-link-summary">{{ blankSummaryText(qrSummary) }}</p>
+          <p class="text-caption text-medium-emphasis">{{ BLANK_LIST_NOTE }}</p>
+          <VehicleQrCodeScanner class="mt-2" :disabled="qrBusy" @scanned="onQrScanned" />
           <v-alert v-if="qrLinkAskReplace" type="warning" variant="tonal" density="compact" class="mt-3">
             {{ qrError }} Link it anyway?
           </v-alert>
@@ -405,7 +413,7 @@
         <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()"
+          <v-btn color="primary" variant="flat" class="text-none" :loading="qrBusy" :disabled="!qrCodeToLink"
             data-test="vehicle-qr-link-go" @click="confirmLink(qrLinkAskReplace)">
             {{ qrLinkAskReplace ? "Link and stop the old sticker" : "Link" }}
           </v-btn>
@@ -448,7 +456,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 { qrStickerSummary, stickerCodeHint } from '../utils/vehicle-qr-blank';
+import { BLANK_LIST_NOTE, blankSummaryText, qrStickerSummary, stickerCodeHint, type BlankSummary } from '../utils/vehicle-qr-blank';
 import { isPermissionRefusalError } from '../utils/permission-refusal';
 
 
@@ -552,7 +560,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 } = useVehicle();
+const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle, blockVehicle, unblockVehicle, getSpecificVehicleById, getActiveCameraCounts, getVehicleQrSettings, regenerateVehicleQr, 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.
@@ -585,24 +593,56 @@ 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) : ""));
+const qrLinkHint = computed(() => (qrCodeToLink.value ? stickerCodeHint(qrCodeToLink.value) : ""));
+// the combobox keeps a typed-but-not-committed code in its search text
+const qrSearch = ref("");
+const qrCodes = ref<string[]>([]);
+const qrSummary = ref<BlankSummary | null>(null);
+const qrCodeToLink = computed(() => String(qrLinkCode.value || qrSearch.value || "").trim());
+
+// Saved blank codes still free to link + the site's printed / linked / available count.
+async function loadQrAvailable(search = "") {
+  if (!qrStickersOn.value) return;
+  try {
+    const res = await getAvailableBlankVehicleQr(props.site, { search, limit: 50 });
+    qrSummary.value = res?.summary ?? null;
+    qrCodes.value = (res?.items ?? []).map((i) => i.code);
+  } catch {
+    qrSummary.value = null;
+    qrCodes.value = [];
+  }
+}
+let qrSearchTimer: ReturnType<typeof setTimeout> | undefined;
+watch(qrSearch, (v) => {
+  clearTimeout(qrSearchTimer);
+  if (dialog.qrLink) qrSearchTimer = setTimeout(() => loadQrAvailable(String(v ?? "")), 250);
+});
+watch(qrStickersOn, (on) => on && loadQrAvailable());
+watch(() => dialog.qrStickers, (open) => !open && loadQrAvailable());
+function onQrScanned(code: string) {
+  qrLinkCode.value = code;
+  qrSearch.value = code;
+}
 
 function askLink(plate: TPlateNumber) {
   qrPlate.value = plate || null;
   qrLinkCode.value = "";
+  qrSearch.value = "";
   qrLinkAskReplace.value = false;
   qrError.value = "";
   dialog.qrLink = true;
+  loadQrAvailable();
 }
 
 async function confirmLink(replace: boolean) {
   const id = qrPlate.value?._id;
-  if (!id || !qrLinkCode.value.trim()) return;
+  if (!id || !qrCodeToLink.value) return;
   qrBusy.value = true;
   qrError.value = "";
   try {
-    await linkVehicleQr(qrLinkCode.value.trim(), String(id), replace);
+    await linkVehicleQr(qrCodeToLink.value, String(id), replace);
     dialog.qrLink = false;
+    loadQrAvailable();
     showMessage(`QR sticker linked to ${qrPlate.value?.plateNumber}`, "success");
   } catch (e: any) {
     qrError.value = errorConverter(e);

package/components/VehicleQrCodeScanner.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <v-btn variant="tonal" size="small" class="text-none" prepend-icon="mdi-qrcode-scan" data-test="vehicle-qr-scan-btn"
+      :disabled="disabled" @click="on ? stop() : start()">
+      {{ on ? "Stop scanning" : "Scan sticker" }}
+    </v-btn>
+    <div v-show="on" :id="readerId" class="mt-2" style="width: 100%; max-width: 320px" />
+    <p v-if="err" class="text-caption text-error mt-1">{{ err }}</p>
+  </div>
+</template>
+<script setup lang="ts">
+// Camera scan of a blank sticker: emits the code the QR carries ("S365V:" is trimmed).
+defineProps({ disabled: { type: Boolean, default: false } });
+const emit = defineEmits<{ (e: "scanned", code: string): void }>();
+const { $Html5Qrcode }: any = useNuxtApp();
+const readerId = `vqr-reader-${Math.random().toString(36).slice(2, 8)}`;
+const on = ref(false);
+const err = ref("");
+let scanner: any = null;
+
+async function start() {
+  err.value = "";
+  on.value = true;
+  await nextTick();
+  try {
+    scanner = new $Html5Qrcode(readerId);
+    await scanner.start(
+      { facingMode: "environment" },
+      { fps: 10, qrbox: { width: 220, height: 220 } },
+      async (text: string) => {
+        emit("scanned", String(text).replace(/^\s*S365V:/i, "").trim());
+        await stop();
+      },
+      () => {},
+    );
+  } catch {
+    err.value = "Could not start the camera. Allow camera access, or type the code instead.";
+    on.value = false;
+    scanner = null;
+  }
+}
+
+async function stop() {
+  const s = scanner;
+  scanner = null;
+  on.value = false;
+  try {
+    await s?.stop();
+    s?.clear?.();
+  } catch {
+    /* already stopped */
+  }
+}
+
+onBeforeUnmount(stop);
+</script>

package/components/VehicleQrStickerDialog.vue

@@ -24,6 +24,9 @@
               on a car, then link it to that vehicle in Vehicles > 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>
+            <p v-if="blankSummary" class="text-body-2 font-weight-medium mb-3" data-test="vehicle-qr-blank-summary">
+              {{ blankSummaryText(blankSummary) }}
+            </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" />
@@ -224,7 +227,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 { BLANK_DEFAULT_COUNT, BLANK_MAX_COUNT, BLANK_STRIP_NOTE, blankCount, blankStickerItems, blankSummaryText, 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 {
@@ -273,7 +276,16 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:modelValue"]);
 
-const { getVehicles, getVehicleQrStickers, getBlankVehicleQrStickers } = useVehicle();
+const { getVehicles, getVehicleQrStickers, getBlankVehicleQrStickers, getAvailableBlankVehicleQr } = useVehicle();
+
+const blankSummary = ref<BlankSummary | null>(null);
+async function loadBlankSummary() {
+  try {
+    blankSummary.value = (await getAvailableBlankVehicleQr(props.site, { limit: 1 }))?.summary ?? null;
+  } catch {
+    blankSummary.value = null;
+  }
+}
 
 // "vehicles" = stickers for chosen vehicles; "blank" = codes made in advance, linked to a vehicle later.
 const mode = ref<"vehicles" | "blank">("vehicles");
@@ -373,6 +385,7 @@ watch(
   () => props.modelValue,
   async (open) => {
     if (!open) return;
+    loadBlankSummary();
     error.value = "";
     items.value = [];
     docHtml.value = "";
@@ -425,6 +438,7 @@ async function goReview() {
       ticked.value = items.value.map((i) => i.vehicleId);
       isBlank.value = true;
       step.value = "review";
+      loadBlankSummary();
       return;
     }
     isBlank.value = false;

package/composables/useVehicle.ts

@@ -315,6 +315,17 @@ function getSpecificVehicleById(id: string){
     }>("/api/vehicles/qr/blank-stickers", { method: "POST", body: { site, count } });
   }
 
+  // Blank codes saved when printed and still free to link, plus {printed, linked, available}.
+  function getAvailableBlankVehicleQr(site: string, query: { search?: string; page?: number; limit?: number } = {}) {
+    return useNuxtApp().$api<{
+      summary: { printed: number; linked: number; available: number };
+      total: number;
+      page: number;
+      limit: number;
+      items: Array<{ token: string; code: string }>;
+    }>(`/api/vehicles/qr/blank-stickers/site/${site}`, { query });
+  }
+
   // `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", {
@@ -353,6 +364,7 @@ function getSpecificVehicleById(id: string){
     getVehicleQrStickers,
     regenerateVehicleQr,
     getBlankVehicleQrStickers,
+    getAvailableBlankVehicleQr,
     linkVehicleQr,
     unlinkVehicleQr,
   };

package/package.json

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

@@ -61,3 +61,16 @@ export function qrStickerSummary(plates: Array<{ hasQrSticker?: boolean }>): { l
   if (linked === total) return { label: "Linked", color: "success" };
   return { label: `${linked} of ${total}`, color: "warning" };
 }
+
+export type BlankSummary = { printed: number; linked: number; available: number };
+
+/** "12 blank stickers available to link (20 printed, 8 linked)" - or what to do when none were printed yet. */
+export function blankSummaryText(s: Partial<BlankSummary> | null | undefined): string {
+  if (!s) return "";
+  const { printed = 0, linked = 0, available = 0 } = s;
+  if (!printed) return "No blank stickers printed yet. Print some under Print QR stickers > Blank stickers.";
+  return `${available} blank sticker${available === 1 ? "" : "s"} available to link (${printed} printed, ${linked} linked)`;
+}
+
+/** Shown beside the pick-list: stickers printed before the list existed were never saved. */
+export const BLANK_LIST_NOTE = "Stickers printed before 9 Oct 2026 are not in this list - scan them or type their code.";