@7365admin1/layer-common 4.112.0 → 4.114.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- 92f08bca: Vehicle Mgmt: new "QR sticker" column (Linked / None / n of m) and an All / With sticker / Without sticker filter, shown only while the site's QR switch is on
+
 ## 4.112.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>
@@ -48,9 +51,18 @@
 
       <!-- Search joins the toolbar row rather than stacking a second one. -->
       <template #prepend-additional>
+        <v-select v-if="qrEnabled" v-model="qrStickerFilter" :items="qrStickerFilterItems" label="QR sticker"
+          density="compact" variant="outlined" hide-details class="vehicle-qr-filter" style="max-width: 190px"
+          data-test="vehicle-qr-filter" />
         <AppField v-model="searchInput" search compact placeholder="Search" klass="app-toolbar__search" />
       </template>
 
+      <template #item.qrSticker="{ item }">
+        <v-chip size="small" variant="tonal" :color="qrStickerSummary(rowPlates(item)).color" data-test="vehicle-qr-cell">
+          {{ qrStickerSummary(rowPlates(item)).label }}
+        </v-chip>
+      </template>
+
       <template #item.category="{ value }">
         {{ formatValues("category", value) }}
       </template>
@@ -384,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>
@@ -396,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>
@@ -439,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 { 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';
 
 
@@ -456,9 +473,11 @@ const props = defineProps({
 });
 
 
-const headers = [
+const headers = computed(() => [
   { title: "Name", value: "name" },
   { title: "Vehicle Numbers", value: "plates" },
+  // Only while the site's QR switch is on (like the print button).
+  ...(qrEnabled.value ? [{ title: "QR sticker", value: "qrSticker", sortable: false }] : []),
   { title: "NRIC", value: "nric" },
   { title: "Block", value: "block.name" },
   { title: "Floor", value: "level.name" },
@@ -467,7 +486,7 @@ const headers = [
   // { title: "Type", value: "type" },
   // { title: "Status", value: "status" },
   { title: "", value: "action" },
-]
+])
 
 const plateHeaders = [
   { title: "Plate Number", value: "plateNumber" },
@@ -541,11 +560,17 @@ 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.
 const qrEnabled = ref(false);
+const qrStickerFilter = ref("");
+const qrStickerFilterItems = [
+  { title: "All", value: "" },
+  { title: "With sticker", value: "with" },
+  { title: "Without sticker", value: "without" },
+];
 const qrStickersOn = computed(() => qrEnabled.value && props.canUpdateVehicle);
 const qrVehicleIds = ref<string[]>([]);
 const qrReissuePlate = ref<TPlateNumber | null>(null);
@@ -568,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);
@@ -838,6 +895,7 @@ const { data: getVehiclesReq, refresh: getVehiclesRefresh, pending: getVehiclesP
         search: searchInput.value,
         view: activeTab.value,
         site: props.site,
+        qrSticker: qrEnabled.value ? qrStickerFilter.value : "",
       }),
     {
       watch: [page],
@@ -1321,6 +1379,11 @@ watch(searchInput, () => {
   debouncedSearch()
 })
 
+watch(qrStickerFilter, () => {
+  page.value = 1;
+  getVehiclesRefresh();
+})
+
 // A new tab starts from its first page and loads straight away.
 watch(activeTab, () => {
   page.value = 1;

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

@@ -9,12 +9,13 @@ export default function useVehicle() {
     site = "",
     status = "",
     view = "",
+    qrSticker = "",
   } = {}) {
     // `view` is the screen's tab: residents, season-passes or block-listed.
     // Every status comes back unless `status` narrows it.
     return await useNuxtApp().$api<Record<string, any>>("/api/vehicles", {
       method: "GET",
-      query: { search, page, limit, order, type, category, site, status, view },
+      query: { search, page, limit, order, type, category, site, status, view, qrSticker },
     });
   }
 
@@ -314,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", {
@@ -352,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.112.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/types/people.d.ts

@@ -48,7 +48,7 @@ declare type TOccupancyRoleOption = {
   description: string;
 };
 
-declare type TPlateNumber = { plateNumber: string, recNo?: string, _id?: string, status: TVehicleStatus, type: TVehicleType, anprCameras?: TVehicleAnprCamera[] };
+declare type TPlateNumber = { plateNumber: string, recNo?: string, _id?: string, status: TVehicleStatus, type: TVehicleType, anprCameras?: TVehicleAnprCamera[], hasQrSticker?: boolean };
 
 
 // `""` is the FORM's "nothing picked yet" - it is stripped from the payload

package/utils/vehicle-qr-blank.ts

@@ -52,3 +52,25 @@ export const isBlankCode = (plate: unknown): boolean => /^([0-9A-Z]{4}-){5}[0-9A
 export function plateLines(plate: string): string[] {
   return isBlankCode(plate) ? [plate.slice(0, 14), plate.slice(15)] : [plate];
 }
+
+/** 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;
+  const linked = plates.filter((p) => p?.hasQrSticker === true).length;
+  if (!total || !linked) return { label: "None", color: "grey" };
+  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.";