@7365admin1/layer-common 4.90.2-staging.485 → 4.90.2-staging.487

package/components/AccessCardDetailsDialog.vue

@@ -68,9 +68,9 @@
           <!-- Visitor / Resident Credentials -->
           <template v-if="details.userCred">
             <v-divider />
-            <div class="card-details__section">
+            <!-- <div class="card-details__section">
               {{ details.userType ?? "Visitor Information" }}
-            </div>
+            </div> -->
 
             <div v-if="details.userCred.email">
               <div class="card-details__label">Email</div>

package/components/AccessCardPreviewDialog.vue

@@ -50,18 +50,28 @@
 
         <!-- Person Selector -->
         <InputLabel title="Person" required class="mb-1" />
-        <v-select
+        <!--
+          An autocomplete rather than a select: a unit's Management and provider
+          lists are short, but a site's can run to dozens, and scrolling for a
+          name is slow. `custom-filter` widens the match beyond the title,
+          because the thing an operator remembers is often the email or the role
+          - and a member's name IS frequently their email address.
+        -->
+        <v-autocomplete
           v-model="assignPerson"
+          v-model:search="personSearch"
           :items="assignPeopleItems"
+          :custom-filter="filterPerson"
           density="compact"
           item-title="name"
           item-value="assigneeId"
           hide-details="auto"
-          placeholder="Select person..."
+          placeholder="Search or select person..."
           persistent-placeholder
           :loading="peopleLoading"
           :disabled="peopleLoading"
           return-object
+          :hide-no-data="false"
           :no-data-text="assignNoDataText"
         >
           <!--
@@ -98,7 +108,7 @@
               </div>
             </div>
           </template>
-        </v-select>
+        </v-autocomplete>
 
         <!--
           A card is assigned by writing the person's USER id onto it, so a row
@@ -455,6 +465,20 @@ const { getEncryptedAcmUrl } = useSiteEntryPassSettings();
 const { getAll: getMembers } = useMember();
 const { getSiteMembers } = useServiceProvider();
 
+/**
+ * The member type of whichever app this layer is running in
+ * ("property_management_agency", "security_agency", ...), which `/api/members`
+ * requires and rejects empty.
+ *
+ * Read HERE, during setup, not inside the loader that uses it:
+ * `useRuntimeConfig` needs the Nuxt instance, and that is only guaranteed
+ * synchronously in setup. Called from an async function resumed after an
+ * await — which is exactly what the loader is — it throws "nuxt instance
+ * unavailable", the loader's catch turns that into an empty list, and the
+ * Management group silently shows nothing with no request ever sent.
+ */
+const APP = String(useRuntimeConfig().public.APP ?? "");
+
 const historyDialog = ref(false);
 const showAssignForm = ref(false);
 const assignPerson = ref<Record<string, any> | null>(null);
@@ -471,10 +495,22 @@ const assignPerson = ref<Record<string, any> | null>(null);
  */
 type AssignCategory = "residents" | "management" | "providers";
 
-const assignCategories: { value: AssignCategory; label: string }[] = [
-  { value: "residents", label: "Resident / Tenant" },
-  { value: "management", label: "Management" },
-  { value: "providers", label: "Service Provider" },
+const assignCategories: {
+  value: AssignCategory;
+  label: string;
+  /**
+   * What the server stores as the card's `holderType` (core
+   * `EAccessCardHolderTypes`). Sent with the assignment, because `assignees`
+   * alone is ambiguous: it is a `users` id for a resident and a membership id
+   * for a provider, and only the group says which to resolve against. These
+   * strings are a server contract - the labels above are free to change, these
+   * are not.
+   */
+  holderType: "Visitor/Resident" | "Management" | "Service Provider";
+}[] = [
+  { value: "residents", label: "Resident / Tenant", holderType: "Visitor/Resident" },
+  { value: "management", label: "Management", holderType: "Management" },
+  { value: "providers", label: "Service Provider", holderType: "Service Provider" },
 ];
 
 const assignCategory = ref<AssignCategory>("residents");
@@ -500,6 +536,30 @@ type AssignRow = {
 };
 
 const assignPeopleItems = ref<AssignRow[]>([]);
+
+/** What is typed in the person picker. Cleared whenever the group changes. */
+const personSearch = ref("");
+
+/**
+ * Match a person on everything the row shows, not just the name.
+ *
+ * Vuetify filters on the title alone by default, which is too narrow here: a
+ * Management member's name is often their email address, and two provider
+ * people from one company are told apart only by their role. Both of those sit
+ * in the second line, so a name-only match would hide the row an operator is
+ * actually searching for.
+ *
+ * The first argument is the title Vuetify matched against; it is ignored in
+ * favour of the row itself, which carries all three fields.
+ */
+function filterPerson(_title: string, query: string, item: any): boolean {
+  const q = String(query ?? "").trim().toLowerCase();
+  if (!q) return true;
+  const row = item?.raw ?? {};
+  return [row.name, row.subtitle, row.meta].some((field) =>
+    String(field ?? "").toLowerCase().includes(q),
+  );
+}
 const peopleLoading = ref(false);
 const assignLoading = ref(false);
 const assignError = ref("");
@@ -597,7 +657,7 @@ async function loadManagementRows(): Promise<AssignRow[]> {
     org: props.orgId,
     siteId: props.siteId,
     unit: props.unit._id,
-    type: String(useRuntimeConfig().public.APP ?? ""),
+    type: APP,
     status: "active",
     page: 1,
     limit: 50,
@@ -678,9 +738,19 @@ async function loadAssignPeople() {
           : await loadResidentRows();
     if (seq !== assignLoadSeq) return;
     assignPeopleItems.value = rows;
-  } catch {
+  } catch (e: any) {
     if (seq !== assignLoadSeq) return;
     assignPeopleItems.value = [];
+    /*
+     * Say that the list failed rather than showing an empty one.
+     *
+     * This swallowed everything, so a group whose request 400'd, or never got
+     * sent at all, looked exactly like a group with nobody in it - there was
+     * nothing on screen to tell the two apart, and no way to tell from the UI
+     * that anything had gone wrong.
+     */
+    assignError.value =
+      e?.data?.message ?? e?.message ?? "Could not load the list. Please try again.";
   } finally {
     if (seq === assignLoadSeq) peopleLoading.value = false;
   }
@@ -688,6 +758,9 @@ async function loadAssignPeople() {
 
 function onAssignCategoryChange() {
   assignPerson.value = null;
+  // A term typed for the previous group means nothing in the next one, and
+  // leaving it would show an empty list over a list that has people in it.
+  personSearch.value = "";
   assignError.value = "";
   loadAssignPeople();
 }
@@ -695,6 +768,7 @@ function onAssignCategoryChange() {
 async function openAssignForm() {
   showAssignForm.value = true;
   assignPerson.value = null;
+  personSearch.value = "";
   assignCategory.value = "residents";
   assignError.value = "";
   assignPeopleItems.value = [];
@@ -714,6 +788,7 @@ async function openAssignForm() {
 function cancelAssign() {
   showAssignForm.value = false;
   assignPerson.value = null;
+  personSearch.value = "";
   assignCategory.value = "residents";
   assignPeopleItems.value = [];
   assignError.value = "";
@@ -744,6 +819,8 @@ async function confirmAssign() {
       type: selectedCardType.value,
       acm_url: encryptedAcmUrl.value,
       id: props.selectedCardInUnit?._id,
+      holderType: assignCategories.find((c) => c.value === assignCategory.value)
+        ?.holderType,
     });
     emit("assign-to-person", {
       card: props.selectedCardInUnit,

package/components/SiteSettings.vue

@@ -199,6 +199,22 @@
         </v-expansion-panel-text>
       </v-expansion-panel>
 
+      <v-expansion-panel v-if="canManageVehicleQr">
+        <v-expansion-panel-title>
+          <v-icon class="mr-2">mdi-qrcode</v-icon>
+          Vehicle QR stickers
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <v-switch v-model="vehicleQrEnabled" :loading="vehicleQrSaving" :disabled="vehicleQrSaving"
+            label="Vehicle QR stickers" color="primary" hide-details data-test="vehicle-qr-switch"
+            @update:model-value="saveVehicleQr" />
+          <p class="text-caption text-medium-emphasis mt-2 mb-0">
+            When on, staff can print a QR sticker for each vehicle from Vehicle Mgmt, and guards can scan it to see
+            which unit the vehicle belongs to.
+          </p>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+
       <slot
         name="panels"
         :can-manage="canManageSiteSettings"
@@ -215,6 +231,7 @@ import useFile from "../composables/useFile";
 import useSiteSettings from "../composables/useSiteSettings";
 import useUtils from "../composables/useUtils";
 import useANPRSettings from "../composables/useANPRSettings";
+import useVehicle from "../composables/useVehicle";
 
 const props = defineProps({
   siteId: { type: String, required: true },
@@ -233,6 +250,7 @@ const { canManageSiteInformation,
   canManageCCTVCamera,
   canManageDeliveryCompanies,
   canManageResidentVisitors,
+  canManageVehicleQr,
 } = useSettingsPermission();
 
 const { getSiteById, updateSitebyId, updateSiteInformation } =
@@ -405,6 +423,36 @@ function handleUpdateCompanies(value: string[]) {
 
 const route = useRoute();
 
+// Vehicle QR stickers switch (off until someone turns it on).
+const { getVehicleQrSettings, setVehicleQrSettings } = useVehicle();
+const vehicleQrEnabled = ref(false);
+const vehicleQrSaving = ref(false);
+
+await useLazyAsyncData(`vehicle-qr-${props.siteId}`, async () => {
+  if (!canManageVehicleQr.value) return null;
+  try {
+    vehicleQrEnabled.value = !!(await getVehicleQrSettings(props.siteId))?.enabled;
+  } catch {
+    vehicleQrEnabled.value = false;
+  }
+  return null;
+});
+
+async function saveVehicleQr(value: boolean | null) {
+  const enabled = !!value;
+  vehicleQrSaving.value = true;
+  try {
+    const res = await setVehicleQrSettings(props.siteId, enabled);
+    vehicleQrEnabled.value = !!res?.enabled;
+    show(enabled ? "Vehicle QR stickers turned on" : "Vehicle QR stickers turned off", "success");
+  } catch (e: any) {
+    vehicleQrEnabled.value = !enabled;
+    show(e?.data?.message || "Could not change the Vehicle QR stickers setting", "error");
+  } finally {
+    vehicleQrSaving.value = false;
+  }
+}
+
 function show(message: string, color: string) {
   toast.show = true;
   toast.message = message;

package/components/VehicleManagement.vue

@@ -8,6 +8,9 @@
     <v-col cols="12">
       <PageHeader title="Vehicle Mgmt">
         <template #actions>
+          <AppButton v-if="qrStickersOn" icon="mdi-qrcode" variant="ghost" @click="openStickerDialog()">
+            Print QR stickers
+          </AppButton>
           <AppButton v-if="canCreateVehicle" icon="mdi-plus" @click="handleAddVehicleClick">
             Add Vehicle
           </AppButton>
@@ -82,17 +85,19 @@
         be drawn.
       -->
       <template #item.action="{ item }">
-        <v-menu v-if="rowHasVehicleActions(item, vehiclePermissions)" location="bottom end">
+        <v-menu v-if="rowHasVehicleActions(item, vehiclePermissions) || qrStickersOn" location="bottom end">
           <template #activator="{ props: menuProps }">
             <AppButton v-bind="menuProps" variant="row" icon="mdi-dots-vertical" aria-label="Vehicle actions"
               @click.stop />
           </template>
           <v-list density="compact">
             <template v-for="plate in rowPlates(item)" :key="plate._id ?? plate.plateNumber">
-              <template v-if="vehiclePlateActions(plate, vehiclePermissions).length">
+              <template v-if="vehiclePlateActions(plate, vehiclePermissions).length || qrStickersOn">
                 <v-list-subheader v-if="rowPlates(item).length > 1">
                   {{ plate.plateNumber }}
                 </v-list-subheader>
+                <v-list-item v-if="qrStickersOn" title="Re-issue sticker" prepend-icon="mdi-qrcode-edit"
+                  @click="askReissue(plate as TPlateNumber)" />
                 <v-list-item v-for="action in vehiclePlateActions(plate, vehiclePermissions)" :key="action.key"
                   :title="action.title" :prepend-icon="action.icon" :base-color="action.color"
                   @click="runVehicleAction(action.key, plate as TPlateNumber)" />
@@ -212,11 +217,13 @@
                           v-tooltip:top="'History'" @click="openHistory(plateNumberItem as TPlateNumber)" />
                       </template>
                       <template #item.action="{ item: plateNumberItem }">
-                        <v-menu v-if="vehiclePlateActions(plateNumberItem, vehiclePermissions).length">
+                        <v-menu v-if="vehiclePlateActions(plateNumberItem, vehiclePermissions).length || qrStickersOn">
                           <template #activator="{ props: menuProps }">
                             <v-btn icon="mdi-dots-vertical" v-bind="menuProps" flat size="x-small" />
                           </template>
                           <v-list density="compact">
+                            <v-list-item v-if="qrStickersOn" title="Re-issue sticker" prepend-icon="mdi-qrcode-edit"
+                              @click="askReissue(plateNumberItem as TPlateNumber)" />
                             <v-list-item
                               v-for="action in vehiclePlateActions(plateNumberItem, vehiclePermissions)"
                               :key="action.key" :title="action.title" :prepend-icon="action.icon"
@@ -341,6 +348,26 @@
         </v-card-text>
       </v-card>
     </v-dialog>
+    <VehicleQrStickerDialog v-if="qrStickersOn" v-model="dialog.qrStickers" :site="props.site" :rows="items"
+      :view="activeTab" :search="searchInput" :vehicle-ids="qrVehicleIds" />
+
+    <v-dialog v-model="dialog.qrReissue" width="460">
+      <v-card>
+        <v-card-title>Re-issue sticker?</v-card-title>
+        <v-card-text>
+          A new QR sticker will be made for {{ qrReissuePlate?.plateNumber }}. The old sticker will stop working, so
+          the new one must be pasted on the car.
+          <v-alert v-if="qrReissueError" type="error" variant="tonal" density="compact" class="mt-3">{{ qrReissueError }}</v-alert>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn variant="text" class="text-none" @click="dialog.qrReissue = false">Cancel</v-btn>
+          <v-btn color="primary" variant="flat" class="text-none" :loading="qrReissuing" @click="confirmReissue">
+            Re-issue
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
 </template>
@@ -460,7 +487,53 @@ const activeTab = ref<TVehicleTab>("residents");
 
 
 const { formatCamelCaseToWords, formatDate, debounce, maskNRIC } = useUtils();
-const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle, blockVehicle, unblockVehicle, getSpecificVehicleById, getActiveCameraCounts } = useVehicle();
+const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle, blockVehicle, unblockVehicle, getSpecificVehicleById, getActiveCameraCounts, getVehicleQrSettings, regenerateVehicleQr } = useVehicle();
+
+// Vehicle QR stickers: the site's switch (Settings) decides whether the print
+// and re-issue actions exist; only people who may update vehicles get them.
+const qrEnabled = ref(false);
+const qrStickersOn = computed(() => qrEnabled.value && props.canUpdateVehicle);
+const qrVehicleIds = ref<string[]>([]);
+const qrReissuePlate = ref<TPlateNumber | null>(null);
+const qrReissuing = ref(false);
+const qrReissueError = ref("");
+
+async function loadQrSetting() {
+  try {
+    qrEnabled.value = !!(await getVehicleQrSettings(props.site))?.enabled;
+  } catch {
+    qrEnabled.value = false;
+  }
+}
+onMounted(loadQrSetting);
+
+function openStickerDialog(ids: string[] = []) {
+  qrVehicleIds.value = ids;
+  dialog.qrStickers = true;
+}
+
+function askReissue(plate: TPlateNumber) {
+  qrReissuePlate.value = plate || null;
+  qrReissueError.value = "";
+  dialog.qrReissue = true;
+}
+
+async function confirmReissue() {
+  const id = qrReissuePlate.value?._id;
+  if (!id) return;
+  qrReissuing.value = true;
+  qrReissueError.value = "";
+  try {
+    await regenerateVehicleQr(String(id));
+    dialog.qrReissue = false;
+    dialog.showMoreActions = false;
+    openStickerDialog([String(id)]);
+  } catch (e: any) {
+    qrReissueError.value = errorConverter(e);
+  } finally {
+    qrReissuing.value = false;
+  }
+}
 
 /**
  * Active ANPR cameras per list at the site. A live plate on fewer cameras
@@ -543,7 +616,9 @@ const dialog = reactive({
   blockVehicle: false,
   unblockVehicle: false,
   history: false,
-  bulkVehicle: false
+  bulkVehicle: false,
+  qrStickers: false,
+  qrReissue: false,
 });
 
 

package/components/VehicleQrStickerDialog.vue

@@ -0,0 +1,249 @@
+<template>
+  <v-dialog :model-value="modelValue" width="1100" scrollable persistent @update:model-value="close">
+    <v-card data-test="vehicle-qr-dialog">
+      <v-card-title class="d-flex align-center">
+        <v-icon class="mr-2">mdi-qrcode</v-icon>
+        {{ step === "select" ? "Print QR stickers" : "Check before printing" }}
+        <v-spacer />
+        <v-btn icon="mdi-close" variant="text" size="small" aria-label="Close" @click="close(false)" />
+      </v-card-title>
+
+      <v-card-text>
+        <v-alert v-if="error" type="error" variant="tonal" density="compact" class="mb-3">{{ error }}</v-alert>
+
+        <!-- Step 1: choose vehicles -->
+        <template v-if="step === 'select'">
+          <div class="d-flex flex-wrap align-center ga-2 mb-2">
+            <v-checkbox-btn :model-value="allOnPageTicked" :indeterminate="someOnPageTicked && !allOnPageTicked"
+              aria-label="Select all on this page" @update:model-value="(v: any) => tickGroup(plates.map((p) => p.id), !!v)" />
+            <span class="text-body-2">Select all on this page</span>
+            <v-spacer />
+            <v-btn variant="tonal" size="small" class="text-none" :loading="loadingAll" @click="loadAll">
+              Select all matching the current tab and search
+            </v-btn>
+          </div>
+          <v-table density="compact" fixed-header height="360">
+            <thead>
+              <tr><th style="width: 48px" /><th>Blk-Level-Unit</th><th>Owner</th><th>Plate</th><th>Status</th></tr>
+            </thead>
+            <tbody>
+              <tr v-for="p in plates" :key="p.id">
+                <td><v-checkbox-btn :model-value="selected.includes(p.id)" :aria-label="`Select ${p.plateNumber}`"
+                    @update:model-value="(v: any) => tickGroup([p.id], !!v)" /></td>
+                <td>{{ p.unitLabel || "-" }}</td>
+                <td>{{ p.ownerName || "-" }}</td>
+                <td class="font-weight-bold">{{ p.plateNumber }}</td>
+                <td>{{ p.status || "-" }}</td>
+              </tr>
+              <tr v-if="!plates.length"><td colspan="5" class="text-center text-medium-emphasis py-6">No vehicles to list</td></tr>
+            </tbody>
+          </v-table>
+          <p class="text-caption text-medium-emphasis mt-2 mb-0">
+            Up to {{ STICKER_MAX_PER_REQUEST }} stickers at a time. Ticked: {{ selected.length }}.
+          </p>
+        </template>
+
+        <!-- Step 2: review + preview -->
+        <template v-else>
+          <v-alert v-if="missing.length" type="warning" variant="tonal" density="compact" class="mb-3">
+            {{ missing.length }} vehicle(s) could not be found and were skipped.
+          </v-alert>
+          <v-alert v-if="dropped" type="info" variant="tonal" density="compact" class="mb-3">
+            {{ dropped }} more vehicle(s) were over the {{ STICKER_MAX_PER_REQUEST }} limit - print again for the rest.
+          </v-alert>
+          <v-table density="compact" fixed-header height="220">
+            <thead>
+              <tr><th style="width: 48px" /><th>Blk-Level-Unit</th><th>Owner</th><th>Plate</th><th>Check</th></tr>
+            </thead>
+            <tbody>
+              <tr v-for="it in items" :key="it.vehicleId">
+                <td><v-checkbox-btn :model-value="ticked.includes(it.vehicleId)" :aria-label="`Print ${it.plateNumber}`"
+                    @update:model-value="(v: any) => (ticked = setIds(ticked, [it.vehicleId], !!v))" /></td>
+                <td>{{ installerLine(it).place || "-" }}</td>
+                <td>{{ installerLine(it).owner || "-" }}</td>
+                <td class="font-weight-bold">{{ it.plateNumber }}</td>
+                <td>
+                  <v-chip v-if="stickerWarning(it.status)" size="small" variant="tonal"
+                    :color="stickerWarning(it.status)!.level" prepend-icon="mdi-alert">
+                    {{ stickerWarning(it.status)!.text }}
+                  </v-chip>
+                  <span v-else class="text-medium-emphasis">OK</span>
+                </td>
+              </tr>
+            </tbody>
+          </v-table>
+          <p class="text-caption text-medium-emphasis my-2">
+            Expired, blocklisted and inactive vehicles start unticked. Each sticker has a cut-off strip under the
+            dashed line saying which unit and owner it is for - cut it off before pasting the sticker on the car.
+          </p>
+          <iframe ref="frame" title="Sticker sheet preview" :srcdoc="docHtml" class="sticker-preview" />
+        </template>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-btn v-if="step === 'review' && !fromReissue" variant="text" class="text-none" @click="step = 'select'">Back</v-btn>
+        <v-spacer />
+        <v-btn variant="text" class="text-none" @click="close(false)">Cancel</v-btn>
+        <v-btn v-if="step === 'select'" color="primary" variant="flat" class="text-none" :disabled="!selected.length"
+          :loading="loading" @click="goReview">
+          Preview {{ selected.length }} sticker{{ selected.length === 1 ? "" : "s" }}
+        </v-btn>
+        <v-btn v-else color="primary" variant="flat" class="text-none" prepend-icon="mdi-printer"
+          :disabled="!ticked.length || !docHtml" @click="print">
+          Print {{ ticked.length }} sticker{{ ticked.length === 1 ? "" : "s" }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts" setup>
+import QRCode from "qrcode";
+import useVehicle from "../composables/useVehicle";
+import { errorConverter } from "../utils/data";
+import {
+  STICKER_MAX_PER_REQUEST,
+  buildStickerDocument,
+  defaultPlateIds,
+  defaultStickerIds,
+  idsForRequest,
+  installerLine,
+  setIds,
+  stickerPlateRows,
+  stickerWarning,
+  type StickerItem,
+  type StickerPlateRow,
+} from "../utils/vehicle-qr-sticker";
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  site: { type: String, required: true },
+  /** The list's rows on the current page. */
+  rows: { type: Array as PropType<Array<Record<string, any>>>, default: () => [] },
+  /** The list's current tab and search, used by "select all matching". */
+  view: { type: String, default: "" },
+  search: { type: String, default: "" },
+  /** Vehicle ids to go straight to review with (a re-issued sticker). */
+  vehicleIds: { type: Array as PropType<string[]>, default: () => [] },
+});
+const emit = defineEmits(["update:modelValue"]);
+
+const { getVehicles, getVehicleQrStickers } = useVehicle();
+
+const step = ref<"select" | "review">("select");
+const plates = ref<StickerPlateRow[]>([]);
+const selected = ref<string[]>([]);
+const items = ref<StickerItem[]>([]);
+const ticked = ref<string[]>([]);
+const missing = ref<string[]>([]);
+const dropped = ref(0);
+const loading = ref(false);
+const loadingAll = ref(false);
+const error = ref("");
+const docHtml = ref("");
+const frame = ref<HTMLIFrameElement | null>(null);
+const fromReissue = computed(() => props.vehicleIds.length > 0);
+
+const allOnPageTicked = computed(() => plates.value.length > 0 && plates.value.every((p) => selected.value.includes(p.id)));
+const someOnPageTicked = computed(() => plates.value.some((p) => selected.value.includes(p.id)));
+
+function tickGroup(ids: string[], on: boolean) {
+  selected.value = setIds(selected.value, ids, on);
+}
+
+function close(value: boolean) {
+  emit("update:modelValue", value);
+}
+
+watch(
+  () => props.modelValue,
+  async (open) => {
+    if (!open) return;
+    error.value = "";
+    items.value = [];
+    docHtml.value = "";
+    step.value = "select";
+    plates.value = stickerPlateRows(props.rows);
+    selected.value = defaultPlateIds(plates.value);
+    if (props.vehicleIds.length) {
+      selected.value = [...props.vehicleIds];
+      await goReview();
+    }
+  },
+  { immediate: true },
+);
+
+/** Every page of the current tab + search, up to the per-request cap. */
+async function loadAll() {
+  loadingAll.value = true;
+  error.value = "";
+  try {
+    const all: Array<Record<string, any>> = [];
+    let page = 1;
+    let pages = 1;
+    do {
+      const res: any = await getVehicles({ page, limit: 100, search: props.search, view: props.view, site: props.site });
+      all.push(...(res?.items ?? []));
+      pages = res?.pages || 1;
+      page += 1;
+    } while (page <= pages && stickerPlateRows(all).length < STICKER_MAX_PER_REQUEST);
+    plates.value = stickerPlateRows(all);
+    selected.value = defaultPlateIds(plates.value);
+  } catch (e: any) {
+    error.value = errorConverter(e);
+  } finally {
+    loadingAll.value = false;
+  }
+}
+
+async function goReview() {
+  loading.value = true;
+  error.value = "";
+  try {
+    const { ids, dropped: over } = idsForRequest(selected.value);
+    const res = await getVehicleQrStickers(props.site, ids);
+    items.value = (res?.items ?? []) as StickerItem[];
+    missing.value = res?.missing ?? [];
+    dropped.value = over;
+    ticked.value = defaultStickerIds(items.value);
+    step.value = "review";
+  } catch (e: any) {
+    error.value = errorConverter(e);
+  } finally {
+    loading.value = false;
+  }
+}
+
+// The same document is the preview and the print job. Error correction Q and a
+// 4-module quiet zone; the QR is drawn at 32 mm so it scans from arm's length.
+let renderToken = 0;
+watch([items, ticked], async () => {
+  const mine = ++renderToken;
+  const chosen = items.value.filter((i) => ticked.value.includes(i.vehicleId));
+  if (!chosen.length) {
+    docHtml.value = "";
+    return;
+  }
+  const svgs = await Promise.all(
+    chosen.map((i) => QRCode.toString(i.qr, { type: "svg", errorCorrectionLevel: "Q", margin: 4 })),
+  );
+  if (mine === renderToken) docHtml.value = buildStickerDocument(chosen, svgs);
+});
+
+function print() {
+  const win = frame.value?.contentWindow;
+  if (!win) return;
+  win.focus();
+  win.print();
+}
+</script>
+
+<style scoped>
+.sticker-preview {
+  width: 100%;
+  height: 460px;
+  border: 1px solid var(--v-border-color, #ccc);
+  border-radius: 8px;
+  background: #e9e9e9;
+}
+</style>

package/composables/useAccessManagement.ts

@@ -319,7 +319,23 @@ export default function useAccessManagement() {
     );
   }
 
-  function assignUser(payload: { assignees: string[]; unit: string; type: string; acm_url: string; id?: string }) {
+  /**
+   * `holderType` is the GROUP the card was given from — "Visitor/Resident",
+   * "Management" or "Service Provider" (core `EAccessCardHolderTypes`).
+   *
+   * It is what lets the server resolve the holder afterwards: `assignees`
+   * carries a `users` id for a resident, but a membership id for a service
+   * provider, and only the group says which collection to look in. Omit it and
+   * the card stores `holderType: null`, so card details cannot name the holder.
+   */
+  function assignUser(payload: {
+    assignees: string[];
+    unit: string;
+    type: string;
+    acm_url: string;
+    id?: string;
+    holderType?: "Visitor/Resident" | "Management" | "Service Provider";
+  }) {
     return useNuxtApp().$api<Record<string, any>>(
       `/api/access-management/assign-user`,
       { method: "POST", body: payload }

package/composables/useSettingsPermission.ts

@@ -122,6 +122,19 @@ export function useSettingsPermission() {
     );
   });
 
+  // Vehicle QR stickers switch: whoever may update vehicles (same grant the
+  // server checks on PUT /api/vehicles/qr/settings/site/:site).
+  const vehiclePermissions: TPermissions = {
+    "vehicle-mgmt": {
+      "update-vehicle": { check: true, description: "Allows the user to update vehicle details." },
+    },
+  };
+  const canManageVehicleQr = computed(() => {
+    if (!userAppRole.value) return false;
+    if (userAppRole.value.permissions.includes("*")) return true;
+    return hasPermission(userAppRole.value, vehiclePermissions, "vehicle-mgmt", "update-vehicle");
+  });
+
   const canManageSiteSettings = computed(() => {
     return canManageSiteInformation.value || canManageANPRCamera.value || canManageCCTVCamera.value || canManageDeliveryCompanies.value || canManageResidentVisitors.value || canManageWorkOrderSettings.value || canManageBillingAndSOAConfiguration.value || canManageNFCManagement.value || canManageNFCPatrolSettings.value || canManageEntryPass.value || canManageRedDotSettings.value
   })
@@ -138,6 +151,7 @@ export function useSettingsPermission() {
     canManageNFCPatrolSettings,
     canManageEntryPass,
     canManageRedDotSettings,
+    canManageVehicleQr,
     canManageSiteSettings
 
   };

package/composables/useVehicle.ts

@@ -272,6 +272,41 @@ function getSpecificVehicleById(id: string){
 }
 
 
+  // Vehicle QR stickers (core vehicle-qr). Per-site switch, bulk sticker data,
+  // and re-issue (the old sticker stops working).
+  function getVehicleQrSettings(site: string) {
+    return useNuxtApp().$api<{ site: string; enabled: boolean }>(
+      `/api/vehicles/qr/settings/site/${site}`,
+      { method: "GET" },
+    );
+  }
+
+  function setVehicleQrSettings(site: string, enabled: boolean) {
+    return useNuxtApp().$api<{ site: string; enabled: boolean }>(
+      `/api/vehicles/qr/settings/site/${site}`,
+      { method: "PUT", body: { enabled } },
+    );
+  }
+
+  function getVehicleQrStickers(site: string, vehicleIds: string[]) {
+    return useNuxtApp().$api<{
+      site: { _id: string; name: string };
+      items: Array<Record<string, any>>;
+      missing: string[];
+    }>("/api/vehicles/qr/stickers", {
+      method: "POST",
+      body: { site, vehicleIds },
+    });
+  }
+
+  function regenerateVehicleQr(id: string) {
+    return useNuxtApp().$api<{ vehicleId: string; qr: string; token: string }>(
+      `/api/vehicles/qr/regenerate/id/${id}`,
+      { method: "PUT" },
+    );
+  }
+
+
   return {
     getVehicles,
     addVehicle,
@@ -290,6 +325,10 @@ function getSpecificVehicleById(id: string){
     getActiveCameraCounts,
     syncVehicle,
     searchMultipleVehiclesByUnitId,
-    getSpecificVehicleById
+    getSpecificVehicleById,
+    getVehicleQrSettings,
+    setVehicleQrSettings,
+    getVehicleQrStickers,
+    regenerateVehicleQr,
   };
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.90.2-staging.485",
+  "version": "4.90.2-staging.487",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/utils/vehicle-qr-sticker.ts

@@ -0,0 +1,184 @@
+/**
+ * Vehicle QR stickers - the pure parts (labels, selection, paging, print page).
+ *
+ * Kept free of Vue and of the QR library so `node --test` can run it. The
+ * sticker itself carries NO resident detail: just the QR, the plate and the
+ * Seven365 line. Block / level / unit / owner appear ONLY on the installer
+ * strip under the dashed cut line, which is cut off before the sticker is
+ * pasted on the car.
+ */
+
+/** The server's most vehicles per request (POST /api/vehicles/qr/stickers). */
+export const STICKER_MAX_PER_REQUEST = 500;
+
+/** A4 sheet: 4 columns x 4 rows of 47 mm cells. */
+export const STICKER_COLUMNS = 4;
+export const STICKER_ROWS = 4;
+export const STICKERS_PER_PAGE = STICKER_COLUMNS * STICKER_ROWS;
+
+export type StickerItem = {
+  vehicleId: string;
+  qr: string;
+  token?: string;
+  block?: string;
+  level?: string;
+  unit?: string;
+  plateNumber?: string;
+  ownerName?: string;
+  status?: string;
+};
+
+export type StickerPlateRow = {
+  id: string;
+  plateNumber: string;
+  status: string;
+  ownerName: string;
+  unitLabel: string;
+};
+
+const text = (v: unknown) => (v == null ? "" : String(v).trim());
+
+/** "Blk 4 #02-01". Tolerates a unit that already carries its level ("02-01"). */
+export function stickerUnitLabel(parts: { block?: unknown; level?: unknown; unit?: unknown }): string {
+  const block = text(parts.block).replace(/^(blk|block)\.?\s*/i, "");
+  const level = text(parts.level).replace(/^(level|lvl|floor)\.?\s*/i, "");
+  const unit = text(parts.unit).replace(/^(unit)\.?\s*/i, "").replace(/^#/, "");
+  const home = unit.includes("-") || !level ? unit : `${level}-${unit}`;
+  return [block ? `Blk ${block}` : "", home ? `#${home}` : ""].filter(Boolean).join(" ");
+}
+
+/** The installer strip under the cut line: where it goes and whose car. */
+export function installerLine(item: Pick<StickerItem, "block" | "level" | "unit" | "ownerName">): {
+  place: string;
+  owner: string;
+} {
+  return { place: stickerUnitLabel(item), owner: text(item.ownerName) };
+}
+
+export type StickerWarning = { level: "error" | "warning"; text: string };
+
+/** What the preview says about a status. Null = nothing to warn about. */
+export function stickerWarning(status: unknown): StickerWarning | null {
+  switch (text(status).toLowerCase()) {
+    case "expired":
+      return { level: "error", text: "Season pass expired" };
+    case "blocklisted":
+      return { level: "error", text: "On the blocklist" };
+    case "inactive":
+      return { level: "warning", text: "Vehicle is inactive" };
+    case "pending":
+      return { level: "warning", text: "Waiting for approval" };
+    default:
+      return null;
+  }
+}
+
+/** Stickers that should NOT be ticked for printing until someone chooses to. */
+export function stickerStartsUnticked(status: unknown): boolean {
+  return stickerWarning(status)?.level === "error" || text(status).toLowerCase() === "inactive";
+}
+
+/** The ids ticked by default in the preview. */
+export function defaultStickerIds(items: Pick<StickerItem, "vehicleId" | "status">[]): string[] {
+  return items.filter((i) => !stickerStartsUnticked(i.status)).map((i) => i.vehicleId);
+}
+
+/** One selectable row per plate, from the list's grouped rows. */
+export function stickerPlateRows(rows: Array<Record<string, any>>): StickerPlateRow[] {
+  const out: StickerPlateRow[] = [];
+  for (const row of rows ?? []) {
+    const plates: any[] = Array.isArray(row?.plates) && row.plates.length ? row.plates : [row];
+    for (const plate of plates) {
+      if (!plate?._id) continue;
+      out.push({
+        id: String(plate._id),
+        plateNumber: text(plate.plateNumber),
+        status: text(plate.status).toLowerCase(),
+        ownerName: text(row?.name ?? plate.name),
+        unitLabel: stickerUnitLabel({
+          block: row?.block?.name ?? row?.block,
+          level: row?.level?.name ?? row?.level,
+          unit: row?.unit?.name ?? row?.unit,
+        }),
+      });
+    }
+  }
+  return out;
+}
+
+/** Plates ticked on first open: live ones only (active / season pass). */
+export function defaultPlateIds(plates: StickerPlateRow[]): string[] {
+  return plates.filter((p) => p.status === "active" || p.status === "temporary").map((p) => p.id);
+}
+
+/** Tick or untick a group of ids (e.g. "select all on this page"). */
+export function setIds(selected: string[], ids: string[], on: boolean): string[] {
+  const rest = selected.filter((id) => !ids.includes(id));
+  return on ? [...rest, ...ids] : rest;
+}
+
+/** The ids to send: unique, in order, at most what the server accepts. */
+export function idsForRequest(ids: string[]): { ids: string[]; dropped: number } {
+  const unique = [...new Set(ids)];
+  return { ids: unique.slice(0, STICKER_MAX_PER_REQUEST), dropped: Math.max(0, unique.length - STICKER_MAX_PER_REQUEST) };
+}
+
+/** Split into sheets. */
+export function stickerPages<T>(items: T[], perPage: number = STICKERS_PER_PAGE): T[][] {
+  const pages: T[][] = [];
+  for (let i = 0; i < items.length; i += perPage) pages.push(items.slice(i, i + perPage));
+  return pages;
+}
+
+export function escapeHtml(value: unknown): string {
+  return text(value)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+const PRINT_CSS = `
+@page { size: A4; margin: 6mm; }
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; background: #fff; color: #111; font-family: Arial, Helvetica, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+.page { display: grid; grid-template-columns: repeat(${STICKER_COLUMNS}, 47mm); gap: 2mm; justify-content: center; align-content: start; width: 198mm; height: 285mm; margin: 0 auto; break-after: page; }
+.page:last-child { break-after: auto; }
+.cell { width: 47mm; break-inside: avoid; }
+.card { width: 47mm; height: 58mm; border: 0.3mm solid #1a1a1a; border-radius: 3mm; padding: 2mm 2mm 1.6mm; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; }
+.qr { width: 32mm; height: 32mm; display: block; }
+.qr svg { width: 100%; height: 100%; display: block; }
+.plate { font-size: 13pt; font-weight: 800; letter-spacing: 0.3mm; line-height: 1.1; }
+.hint { font-size: 5.8pt; color: #333; line-height: 1.2; }
+.brand { display: flex; align-items: center; justify-content: center; gap: 1mm; font-size: 6pt; color: #222; border-top: 0.2mm solid #ccc; width: 100%; padding-top: 1mm; }
+.mark { width: 3.2mm; height: 3.2mm; border-radius: 0.8mm; background: #111; color: #fff; font-weight: 800; font-size: 5pt; line-height: 3.2mm; text-align: center; }
+.cut { margin-top: 1.2mm; border-top: 0.3mm dashed #666; padding-top: 1mm; font-size: 6.5pt; line-height: 1.25; color: #111; min-height: 8mm; }
+.cut .owner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cut .note { color: #666; font-size: 5.5pt; }
+@media screen { body { background: #e9e9e9; zoom: 0.75; padding: 4mm 0; } .page { background: #fff; margin-bottom: 4mm; height: auto; min-height: 285mm; box-shadow: 0 0 2mm rgba(0,0,0,.25); } }
+`;
+
+/**
+ * One full HTML document: A4 sheets of stickers. `qrSvgs` is parallel to
+ * `items` (the QR for each, already drawn). Every value is HTML-escaped - an
+ * owner name is typed by a person.
+ */
+export function buildStickerDocument(items: StickerItem[], qrSvgs: string[]): string {
+  const cells = items.map((item, i) => {
+    const { place, owner } = installerLine(item);
+    return (
+      `<div class="cell"><div class="card">` +
+      `<div class="qr">${qrSvgs[i] ?? ""}</div>` +
+      `<div class="plate">${escapeHtml(item.plateNumber)}</div>` +
+      `<div class="hint">Scan with iSecure365 / iMA365</div>` +
+      `<div class="brand"><span class="mark">7</span>Powered by Seven365</div>` +
+      `</div>` +
+      `<div class="cut"><div><b>${escapeHtml(place || "-")}</b></div>` +
+      `<div class="owner">Owner: ${escapeHtml(owner || "-")}</div>` +
+      `<div class="note">Installer: cut here, then paste on this car</div></div></div>`
+    );
+  });
+  const pages = stickerPages(cells).map((p) => `<div class="page">${p.join("")}</div>`);
+  return `<!doctype html><html><head><meta charset="utf-8"><title>Vehicle QR stickers</title><style>${PRINT_CSS}</style></head><body>${pages.join("")}</body></html>`;
+}