@7365admin1/layer-common 4.90.2-staging.490 → 4.90.2-staging.492

package/components/InventoryItemDetail.vue

@@ -79,6 +79,7 @@ import useFile from "../composables/useFile";
 import useUtils from "../composables/useUtils";
 import { inventoryItemMeta } from "../utils/inventory-store-label";
 import { inventoryControls } from "../utils/inventory-presets";
+import { receiptRefText } from "../utils/inventory-receiving";
 
 const show = defineModel<boolean>({ default: false });
 const props = defineProps({
@@ -107,7 +108,7 @@ const formatDate = (d: string) => standardFormatDate(d);
 
 function describe(t: TInventoryTransaction) {
   const parts: string[] = [];
-  if (t.type === "receive") parts.push(t.supplier || "", t.reference ? `PO ${t.reference}` : "");
+  if (t.type === "receive") parts.push(t.supplier || "", receiptRefText(t));
   const who = (t as any).holderLabel || t.holderName;
   if (t.type === "issue") parts.push(`${t.qty} to ${who}`, t.reference || "");
   if (t.type === "return") parts.push(`${t.qty} from ${who}`);

package/components/InventoryLinesDialog.vue

@@ -10,6 +10,13 @@
       <v-card-text class="screen-modal__body">
         <p class="text-body-2 text-medium-emphasis mb-4">{{ copy.help }}</p>
         <v-form ref="form">
+          <template v-if="mode === 'receive'">
+            <InputLabel title="How did this stock come in?" required class="mb-1" />
+            <v-btn-toggle v-model="receivingType" mandatory divided variant="outlined" density="comfortable" class="mb-1 receiving-type">
+              <v-btn v-for="t in RECEIVING_TYPES" :key="t.value" :value="t.value" class="text-none">{{ t.title }}</v-btn>
+            </v-btn-toggle>
+            <p class="text-caption text-medium-emphasis mb-3">{{ receivingHelp }}</p>
+          </template>
           <template v-if="mode === 'issue' || mode === 'return'">
             <InputLabel :title="mode === 'issue' ? 'Give to' : 'Returned by'" required class="mb-1" />
             <v-autocomplete
@@ -65,6 +72,18 @@
               :rules="[qtyRule(line)]"
               :suffix="unitOf(line.item)"
             />
+            <v-text-field
+              v-if="mode === 'receive' && receivingType !== 'CASH'"
+              v-model.number="line.ordered"
+              type="number"
+              min="1"
+              label="Ordered (optional)"
+              density="comfortable"
+              style="max-width: 150px"
+              :rules="[orderedRule]"
+              hint="Qty on the PO"
+              persistent-hint
+            />
             <v-text-field
               v-if="mode === 'receive'"
               v-model.number="line.unitCost"
@@ -89,18 +108,35 @@
               <InputLabel title="Supplier" class="mb-1" />
               <InventorySupplierField v-if="show" v-model="supplier" :store-id="store._id" />
             </v-col>
-            <v-col cols="12" md="3">
-              <InputLabel title="PO number" class="mb-1" />
-              <v-text-field v-model="reference" density="comfortable" />
-            </v-col>
-            <v-col cols="12" md="3">
+            <v-col cols="12" md="6">
               <InputLabel title="Date received" class="mb-1" />
               <v-text-field v-model="date" type="date" :max="today" density="comfortable" />
             </v-col>
+            <v-col v-if="receivingType !== 'CASH'" cols="12" md="4">
+              <InputLabel :title="receivingType === 'PO' ? 'PO number' : 'PO number (optional)'" :required="receivingType === 'PO'" class="mb-1" />
+              <v-text-field v-model="reference" density="comfortable" placeholder="e.g. PO-0412" />
+            </v-col>
+            <template v-if="receivingType === 'DO'">
+              <v-col cols="12" sm="6" md="4">
+                <InputLabel title="DO number" required class="mb-1" />
+                <v-text-field v-model="doNumber" density="comfortable" />
+              </v-col>
+              <v-col cols="12" sm="6" md="4">
+                <InputLabel title="DO date" required class="mb-1" />
+                <v-text-field v-model="doDate" type="date" :max="today" density="comfortable" />
+              </v-col>
+            </template>
+            <v-col v-if="receivingType === 'CASH'" cols="12" md="6">
+              <InputLabel title="Receipt number (optional)" class="mb-1" />
+              <v-text-field v-model="receiptNumber" density="comfortable" placeholder="From the shop receipt" />
+            </v-col>
             <v-col cols="12">
-              <InputLabel title="Delivery photo (optional)" class="mb-1" />
+              <InputLabel title="Delivery photos (optional)" class="mb-1" />
               <InventoryPhotoInput v-model="photos" />
             </v-col>
+            <v-col v-if="receivingError" cols="12">
+              <v-alert type="warning" variant="tonal" density="compact">{{ receivingError }}</v-alert>
+            </v-col>
           </v-row>
 
           <template v-if="mode === 'request' || mode === 'issue'">
@@ -134,9 +170,10 @@
 import useInventory, { pickedDate } from "../composables/useInventory";
 import useUtils from "../composables/useUtils";
 import { normaliseUsedBy, usedByChips, usedByText } from "../utils/inventory-used-by";
+import { RECEIVING_TYPES, receivingFields, receivingProblem, type TReceivingType } from "../utils/inventory-receiving";
 
 type TMode = "receive" | "issue" | "request" | "return";
-type TRow = { item: string; qty: number | null; unitCost?: number | null };
+type TRow = { item: string; qty: number | null; unitCost?: number | null; ordered?: number | null };
 
 const show = defineModel<boolean>({ default: false });
 const props = defineProps({
@@ -169,7 +206,7 @@ const COPY: Record<TMode, { title: string; help: string; button: string; success
   },
   request: {
     title: "Request Stock",
-    help: "Ask the store for the items you need. You will see them under My Stock once the store keeper approves.",
+    help: "Ask the store for the items you need — up to what the store has (shown under each item). You will see them under My Stock once the store keeper approves.",
     button: "Send request",
     success: "Request sent to the store.",
   },
@@ -184,7 +221,7 @@ const copy = computed(() => COPY[props.mode]);
 
 const form = ref();
 const saving = ref(false);
-const blank = (): TRow => ({ item: "", qty: null, unitCost: null });
+const blank = (): TRow => ({ item: "", qty: null, unitCost: null, ordered: null });
 const rows = ref<TRow[]>([blank()]);
 const supplier = ref("");
 const reference = ref("");
@@ -194,6 +231,19 @@ const today = new Date().toLocaleDateString("en-CA");
 const date = ref(today);
 const holder = ref("");
 const site = ref(props.siteId);
+// Receiving (client 2026-10-02): PO / DO / cash, each with its own paperwork.
+const receivingType = ref<TReceivingType>("PO");
+const doNumber = ref("");
+const doDate = ref("");
+const receiptNumber = ref("");
+const tried = ref(false);
+const receivingHelp = computed(() => RECEIVING_TYPES.find((t) => t.value === receivingType.value)?.help ?? "");
+const hasOrdered = (r: TRow) => r.ordered !== null && r.ordered !== undefined && r.ordered !== ("" as any);
+const receivingCheck = () =>
+  receivingProblem({ type: receivingType.value, poNumber: reference.value, doNumber: doNumber.value, doDate: doDate.value, anyOrdered: receivingType.value !== "CASH" && rows.value.some(hasOrdered) });
+/** Shown once they have tried to save, so the form does not open with a warning. */
+const receivingError = computed(() => (props.mode === "receive" && tried.value ? receivingCheck() : ""));
+const orderedRule = (v: number | null | string) => v === null || v === "" || (Number.isInteger(Number(v)) && Number(v) >= 1) || "Whole number";
 
 const itemChoices = ref<TInventoryItem[]>([]);
 const choices = computed<any[]>(() =>
@@ -218,7 +268,9 @@ function qtyRule(line: TRow) {
     if (props.mode === "receive") return true;
     const available = availableOf(line.item);
     const total = rows.value.filter((r) => r.item === line.item).reduce((s, r) => s + Number(r.qty || 0), 0);
-    if (props.mode !== "request" && available !== undefined && total > available) return `Only ${available} available`;
+    // Requests too (client 2026-10-02): nobody can ask for more than the store has; the server refuses it as well.
+    if (available !== undefined && total > available)
+      return available > 0 ? `Only ${available} ${unitOf(line.item)} in the store — ask for ${available} or fewer` : "None left in the store";
     return true;
   };
 }
@@ -266,16 +318,29 @@ const searchPeople = debounce(async (q: string) => {
 }, 300);
 
 async function submit() {
+  tried.value = true;
   const { valid } = await form.value.validate();
-  if (!valid) return;
+  if (!valid || (props.mode === "receive" && receivingCheck())) return;
   const lines = rows.value.filter((r) => r.item && r.qty).map((r) => ({ item: r.item, qty: Number(r.qty) }));
   saving.value = true;
   try {
     if (props.mode === "receive") {
       await api.receive(props.store._id, {
-        lines: rows.value.map((r) => ({ item: r.item, qty: Number(r.qty), ...(r.unitCost !== null && r.unitCost !== undefined && r.unitCost !== ("" as any) ? { unitCost: Number(r.unitCost) } : {}) })),
+        lines: rows.value.map((r) => ({
+          item: r.item,
+          qty: Number(r.qty),
+          ...(r.unitCost !== null && r.unitCost !== undefined && r.unitCost !== ("" as any) ? { unitCost: Number(r.unitCost) } : {}),
+          ...(receivingType.value !== "CASH" && hasOrdered(r) ? { poOrderedQty: Number(r.ordered) } : {}),
+        })),
         supplier: supplier.value,
-        reference: reference.value,
+        ...receivingFields({
+          type: receivingType.value,
+          poNumber: reference.value,
+          doNumber: doNumber.value,
+          // The server refuses a future time: today's DO date is "now", an earlier one noon that day.
+          doDateIso: doDate.value ? (pickedDate(doDate.value) ?? new Date().toISOString()) : undefined,
+          receiptNumber: receiptNumber.value,
+        }),
         date: pickedDate(date.value),
         photos: photos.value,
         remarks: remarks.value,
@@ -307,7 +372,20 @@ watch(show, (open) => {
   date.value = today;
   holder.value = "";
   site.value = props.siteId;
+  receivingType.value = "PO";
+  doNumber.value = "";
+  doDate.value = "";
+  receiptNumber.value = "";
+  tried.value = false;
   if (props.mode !== "return") loadItems();
   if (props.mode === "issue") searchPeople("");
 });
 </script>
+
+<style scoped>
+/* Three choices side by side on a computer, wrapping on a phone. */
+.receiving-type {
+  height: auto !important;
+  flex-wrap: wrap;
+}
+</style>

package/components/InventoryPhotoInput.vue

@@ -16,16 +16,18 @@
         {{ label }}
       </v-btn>
     </div>
-    <input ref="picker" type="file" accept="image/*" multiple hidden @change="upload" />
-    <div v-if="error" class="text-caption text-error mt-1">{{ error }}</div>
+    <input ref="picker" type="file" :accept="PHOTO_ACCEPT" multiple hidden @change="upload" />
+    <div class="text-caption text-medium-emphasis mt-1">{{ hint }}</div>
+    <div v-if="error" class="text-caption text-error mt-1" role="alert">{{ error }}</div>
   </div>
 </template>
 
 <script setup lang="ts">
 import useFile from "../composables/useFile";
+import { photoCheck, scaledSize, PHOTO_ACCEPT, SHRINK_STEPS, PHOTO_MAX_BYTES } from "../utils/inventory-receiving";
 
 const model = defineModel<string[]>({ default: () => [] });
-defineProps({
+const props = defineProps({
   label: { type: String, default: "Add photo" },
   max: { type: Number, default: 5 },
 });
@@ -35,20 +37,56 @@ const picker = ref<HTMLInputElement>();
 const uploading = ref(false);
 const error = ref("");
 
+const hint = computed(() => `JPG, PNG or WebP, up to ${props.max} photo${props.max === 1 ? "" : "s"}, 5 MB each. Bigger photos are made smaller for you.`);
+
+/** Redraw a too-big photo smaller as a JPEG (no library: the browser's canvas). Null when it cannot get under 5 MB. */
+async function shrink(file: File): Promise<File | null> {
+  try {
+    const bitmap = await createImageBitmap(file);
+    for (const step of SHRINK_STEPS) {
+      const { width, height } = scaledSize(bitmap.width, bitmap.height, step.side);
+      const canvas = document.createElement("canvas");
+      Object.assign(canvas, { width, height });
+      const ctx = canvas.getContext("2d")!;
+      ctx.fillStyle = "#fff"; // a see-through PNG would turn black as a JPEG
+      ctx.fillRect(0, 0, width, height);
+      ctx.drawImage(bitmap, 0, 0, width, height);
+      const blob = await new Promise<Blob | null>((done) => canvas.toBlob(done, "image/jpeg", step.quality));
+      if (blob && blob.size <= PHOTO_MAX_BYTES) return new File([blob], file.name.replace(/\.[^.]+$/, "") + ".jpg", { type: "image/jpeg" });
+    }
+  } catch {
+    /* the browser could not read it */
+  }
+  return null;
+}
+
 async function upload(event: Event) {
   const files = Array.from((event.target as HTMLInputElement).files ?? []);
   (event.target as HTMLInputElement).value = "";
   if (!files.length) return;
   uploading.value = true;
-  error.value = "";
+  const problems: string[] = [];
+  const room = props.max - model.value.length;
+  if (files.length > room) problems.push(`Only ${props.max} photo${props.max === 1 ? "" : "s"} can be added here, so the first ${room} were kept.`);
   try {
-    for (const file of files.slice(0, 5 - model.value.length)) {
+    for (const picked of files.slice(0, room)) {
+      const check = photoCheck(picked);
+      let file: File | null = picked;
+      if (check === "shrink") {
+        file = await shrink(picked);
+        if (!file) problems.push(`"${picked.name}" is too big (over 5 MB) and could not be made smaller. Please pick another photo.`);
+      } else if (check !== "ok") {
+        problems.push(check);
+        file = null;
+      }
+      if (!file) continue;
       const res = await addFile(file);
       if (res?.id) model.value = [...model.value, res.id as string];
     }
   } catch {
-    error.value = "A photo could not be uploaded. Please try again.";
+    problems.push("A photo could not be uploaded. Please check your connection and try again.");
   } finally {
+    error.value = problems.join(" ");
     uploading.value = false;
   }
 }

package/components/InventoryPoDialog.vue

@@ -0,0 +1,111 @@
+<template>
+  <v-dialog v-model="show" max-width="720" scrollable>
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        Check a purchase order
+        <v-spacer />
+        <v-btn icon="mdi-close" variant="text" class="screen-modal__close" aria-label="Close" @click="show = false" />
+      </v-card-title>
+
+      <v-card-text class="screen-modal__body">
+        <p class="text-body-2 text-medium-emphasis mb-3">
+          Type a PO number to see, for each item, how many were ordered, how many have arrived so far (over every delivery), and what is still to come.
+        </p>
+        <v-form class="d-flex ga-2 align-start mb-4" @submit.prevent="lookUp">
+          <v-text-field v-model="po" placeholder="e.g. PO-0412" density="comfortable" prepend-inner-icon="mdi-magnify" hide-details autofocus class="flex-grow-1" />
+          <v-btn type="submit" class="text-none screen-btn-primary" variant="flat" :loading="loading" :disabled="!po.trim()" style="height: 48px">Look up</v-btn>
+        </v-form>
+
+        <div v-if="error" class="text-body-2 text-error">{{ error }}</div>
+        <div v-else-if="result && !result.lines.length" class="text-center text-medium-emphasis py-6">
+          Nothing has been received against PO "{{ result.po }}" in this store yet. Check the number, or record the delivery with Receive Stock.
+        </div>
+
+        <template v-else-if="result">
+          <div class="text-subtitle-2 mb-2">PO {{ result.po }} — {{ result.lines.length }} item{{ result.lines.length === 1 ? "" : "s" }}</div>
+          <AppCard v-for="l in result.lines" :key="l.item" class="pa-3 mb-2">
+            <div class="d-flex flex-wrap align-center ga-2">
+              <div class="font-weight-medium">{{ l.itemName }}</div>
+              <v-spacer />
+              <v-chip size="small" variant="tonal" :color="chip(l).color">{{ chip(l).label }}</v-chip>
+            </div>
+            <div class="text-body-2 mt-1">{{ poLineText(l) }}</div>
+            <v-progress-linear
+              v-if="l.ordered"
+              :model-value="Math.min(100, (l.received / l.ordered) * 100)"
+              :color="chip(l).color"
+              height="6"
+              rounded
+              class="my-2"
+              :aria-label="`${l.received} of ${l.ordered} received`"
+            />
+            <div v-for="d in l.deliveries" :key="d._id" class="text-caption text-medium-emphasis">
+              {{ standardFormatDate(d.date) }} · {{ d.qty }} {{ l.unit }} · {{ deliveryText(d) }}
+            </div>
+          </AppCard>
+        </template>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import useInventory from "../composables/useInventory";
+import useUtils from "../composables/useUtils";
+import { poLineText, receivingLabel } from "../utils/inventory-receiving";
+
+const show = defineModel<boolean>({ default: false });
+const props = defineProps({
+  store: { type: Object as PropType<TInventoryStore>, required: true },
+  /** Open straight on this PO (a PO number clicked in a report). */
+  initialPo: { type: String, default: "" },
+});
+
+const api = useInventory();
+const { standardFormatDate } = useUtils();
+
+const po = ref("");
+const loading = ref(false);
+const error = ref("");
+const result = ref<{ po: string; lines: TInventoryPoLine[] } | null>(null);
+
+const chip = (l: TInventoryPoLine) =>
+  l.ordered === null
+    ? { label: "Ordered qty not recorded", color: undefined }
+    : l.outstanding
+      ? { label: `${l.outstanding} to come`, color: "warning" }
+      : { label: "Complete", color: "success" };
+
+const deliveryText = (d: TInventoryPoLine["deliveries"][number]) =>
+  [
+    receivingLabel(d.receivingType),
+    d.doNumber ? `DO ${d.doNumber}${d.doDate ? ` (${standardFormatDate(d.doDate)})` : ""}` : "",
+    d.receiptNumber ? `Receipt ${d.receiptNumber}` : "",
+    d.supplier,
+    d.receivedBy ? `received by ${d.receivedBy}` : "",
+  ]
+    .filter(Boolean)
+    .join(" · ");
+
+async function lookUp() {
+  if (!po.value.trim()) return;
+  loading.value = true;
+  error.value = "";
+  try {
+    result.value = await api.getPurchaseOrder(props.store._id, po.value.trim());
+  } catch (e: any) {
+    result.value = null;
+    error.value = e?.data?.message || "Could not look up this PO. Please try again.";
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(show, (open) => {
+  if (!open) return;
+  po.value = props.initialPo;
+  result.value = null;
+  error.value = "";
+  if (po.value) lookUp();
+});
+</script>

package/components/InventoryReportsTab.vue

@@ -62,6 +62,9 @@
       />
       <v-checkbox v-if="report === 'usage' && canCheck" v-model="uncheckedOnly" label="Not checked yet" density="compact" hide-details class="flex-grow-0" />
       <v-spacer />
+      <v-btn v-if="report === 'purchases'" class="text-none screen-btn-ghost" variant="outlined" prepend-icon="mdi-clipboard-search-outline" @click="openPo('')">
+        Check a PO
+      </v-btn>
       <v-btn v-if="ctl.fullReports || report === 'usage'" class="text-none screen-btn-ghost" variant="outlined" prepend-icon="mdi-file-excel-outline" :loading="exporting" @click="exportExcel">
         Export Excel
       </v-btn>
@@ -169,6 +172,16 @@
         {{ item.received }}<span v-if="item.receivedOpening" class="d-block text-caption text-medium-emphasis">incl. {{ item.receivedOpening }} opening stock</span>
       </template>
       <template #item.receivedCost="{ value }">{{ money(value) }}</template>
+      <template #item.receivingType="{ item }">{{ item.kind === "Opening stock" ? "Opening stock" : receivingLabel(item.receivingType) }}</template>
+      <template #item.reference="{ item }">
+        <a v-if="report === 'purchases' && item.reference" href="#" class="text-primary" title="See ordered vs received for this PO" @click.prevent="openPo(item.reference)">{{ item.reference }}</a>
+        <span v-else>{{ item.reference || "—" }}</span>
+      </template>
+      <template #item.doNumber="{ item }">
+        <span v-if="item.doNumber">{{ item.doNumber }}<span v-if="item.doDate" class="d-block text-caption text-medium-emphasis">{{ standardFormatDate(item.doDate) }}</span></span>
+        <span v-else>—</span>
+      </template>
+      <template #item.poOrderedQty="{ value }">{{ value ?? "—" }}</template>
       <template #item.usedCost="{ value }">{{ money(value) }}</template>
       <template #item.siteUsedCost="{ value }">{{ money(value) }}</template>
       <!-- The supervisor checks usage against the technician's before/after photos (click to enlarge, with the time taken). -->
@@ -206,6 +219,7 @@
       </template>
     </v-data-table>
     <InventoryHistoryDialog v-model="drill.show" :store="store" :holder="drill.holder" :item="drill.item" :title="drill.title" />
+    <InventoryPoDialog v-model="po.show" :store="store" :initial-po="po.number" />
   </div>
 </template>
 
@@ -216,6 +230,7 @@ import useUtils from "../composables/useUtils";
 import { inventoryControls } from "../utils/inventory-presets";
 import { USED_BY_FILTERS } from "../utils/inventory-used-by";
 import { USAGE_FLAG_WORDS, USAGE_STATUS_CHOICES, usagePathText, usageQuery, usageTotals } from "../utils/inventory-usage";
+import { receivingLabel } from "../utils/inventory-receiving";
 
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },
@@ -253,6 +268,8 @@ const staleDays = ref(3);
 const flagWords = computed(() => ({ ...USAGE_FLAG_WORDS, old_draft: `Draft older than ${staleDays.value} days` }) as Record<string, string>);
 const flagChoices = computed(() => [{ value: "", title: "Everything" }, ...Object.entries(flagWords.value).map(([value, title]) => ({ value, title }))]);
 const drill = reactive({ show: false, holder: "", item: "", title: "" });
+const po = reactive({ show: false, number: "" });
+const openPo = (number: string) => Object.assign(po, { show: true, number });
 function openPerson(r: any) {
   Object.assign(drill, { show: true, holder: String(r.holder ?? ""), item: "", title: r.holderLabel || r.technician });
 }
@@ -278,7 +295,7 @@ const help: Record<string, string> = {
   movement: "For each item: stock at the start of the month, what came in (deliveries and opening stock), what was issued and returned, count differences, and stock at the end.",
   usage: "Every usage of this store's items, by anyone: who (company and service), where, which work order, before and after photos with their times, and how the stock reached them. Click a person or an item to see its full history. Use it for tenant billing; tick records and mark them checked once verified.",
   technicians: "For each person: stock they held at the start, took, used, returned, and hold at the end of the month.",
-  purchases: "Every delivery received, and opening stock entered with new items (Type: Opening stock), with totals by month and by supplier.",
+  purchases: "Every delivery received — by PO, DO or cash — and opening stock entered with new items, with totals by month and by supplier. Click a PO number (or Check a PO) to see ordered against received.",
   handovers: "Stock passed from one person to a colleague: who gave it, who received it, and whether they confirmed.",
 };
 
@@ -391,12 +408,15 @@ const headers: Record<string, any[]> = {
   ],
   purchases: [
     { title: "Date", key: "date" },
-    { title: "Type", key: "kind" },
+    { title: "Type", key: "receivingType" },
     { title: "Supplier", key: "supplier" },
     { title: "PO No.", key: "reference" },
+    { title: "DO No. / date", key: "doNumber" },
+    { title: "Receipt No.", key: "receiptNumber" },
     { title: "Item", key: "itemName" },
     { title: "Unit", key: "unit" },
-    { title: "Qty", key: "qty" },
+    { title: "Ordered", key: "poOrderedQty" },
+    { title: "Received", key: "qty" },
     { title: "Unit price", key: "unitCost" },
     { title: "Total", key: "totalCost" },
     { title: "Received by", key: "receivedBy" },

package/components/InventoryRequestsTab.vue

@@ -7,6 +7,15 @@
         <v-btn value="rejected" class="text-none">Rejected</v-btn>
         <v-btn value="" class="text-none">All</v-btn>
       </v-btn-toggle>
+      <v-text-field
+        v-model="search"
+        placeholder="Search item, person, reference or remarks"
+        prepend-inner-icon="mdi-magnify"
+        density="compact"
+        hide-details
+        clearable
+        class="request-search"
+      />
       <v-spacer />
       <v-btn v-if="ctl.request" class="text-none screen-btn-primary" variant="flat" prepend-icon="mdi-cart-arrow-down" @click="showRequest = true">
         Request Stock
@@ -15,7 +24,7 @@
 
     <v-progress-linear v-if="loading" indeterminate color="primary" />
     <div v-else-if="!requests.length" class="text-center text-medium-emphasis py-10">
-      {{ status === "pending" ? (store.access.canApprove ? "No requests waiting for approval." : "You have no requests waiting. Use Request Stock to ask the store for items.") : "No requests to show." }}
+      {{ search ? `No requests match "${search}". Try another word, or pick "All" to look through every status.` : status === "pending" ? (store.access.canApprove ? "No requests waiting for approval." : "You have no requests waiting. Use Request Stock to ask the store for items.") : "No requests to show." }}
     </div>
 
     <AppCard v-for="r in requests" :key="r._id" class="pa-4 mb-3">
@@ -63,11 +72,11 @@
                 v-model.number="l.give"
                 type="number"
                 min="0"
-                :max="l.qty"
+                :max="Math.min(l.qty, l.onHand ?? l.qty)"
                 label="Give"
                 density="comfortable"
                 style="max-width: 120px"
-                :rules="[(v: any) => (Number.isInteger(Number(v)) && Number(v) >= 0 && Number(v) <= l.qty) || `0 to ${l.qty}`]"
+                :rules="[(v: any) => (Number.isInteger(Number(v)) && Number(v) >= 0 && Number(v) <= l.qty) || `0 to ${l.qty}`, (v: any) => l.onHand === undefined || Number(v) <= l.onHand || `Only ${l.onHand} in store`]"
               />
             </div>
             <InputLabel title="Remarks" class="mb-1 mt-2" />
@@ -107,6 +116,7 @@ const notify = inject<(text: string, color?: string) => void>("inventoryNotify",
 const chip = REQUEST_STATUS;
 
 const status = ref("pending");
+const search = ref("");
 const requests = ref<TInventoryRequest[]>([]);
 const page = ref(1);
 const pages = ref(0);
@@ -119,7 +129,7 @@ const isMine = (r: TInventoryRequest) => String(r.requestedBy) === String(curren
 async function load(p = 1) {
   loading.value = true;
   try {
-    const res = await api.getRequests(props.store._id, { page: p, limit: 20, status: status.value || undefined });
+    const res = await api.getRequests(props.store._id, { page: p, limit: 20, status: status.value || undefined, search: search.value?.trim() || undefined });
     requests.value = p === 1 ? res.items : [...requests.value, ...res.items];
     page.value = p;
     pages.value = res.pages;
@@ -214,6 +224,19 @@ async function reject() {
 }
 
 watch(status, () => load(1));
+// Typed search waits until the typing stops.
+let typing: ReturnType<typeof setTimeout> | undefined;
+watch(search, () => {
+  clearTimeout(typing);
+  typing = setTimeout(() => load(1), 400);
+});
 watch(() => props.store._id, () => load(1));
 onMounted(() => load(1));
 </script>
+
+<style scoped>
+.request-search {
+  min-width: 220px;
+  max-width: 340px;
+}
+</style>

package/components/InventoryStockTab.vue

@@ -17,6 +17,7 @@
         <v-list density="compact">
           <v-list-item prepend-icon="mdi-truck-delivery-outline" title="Record a delivery" @click="open('receive')" />
           <v-list-item prepend-icon="mdi-file-excel-outline" title="Import deliveries from Excel" @click="showReceiveImport = true" />
+          <v-list-item prepend-icon="mdi-clipboard-search-outline" title="Check a purchase order (PO)" @click="showPo = true" />
         </v-list>
       </v-menu>
       <v-btn v-if="ctl.issue && !storeEmpty" class="text-none screen-btn-primary" variant="flat" prepend-icon="mdi-hand-extended-outline" @click="open('issue')">
@@ -117,6 +118,7 @@
     <InventoryItemDialog v-model="itemDialog.show" :store="store" :item="itemDialog.item" @done="done" />
     <InventoryImportDialog v-model="showImport" :store="store" @done="done" />
     <InventoryImportDialog v-model="showReceiveImport" :store="store" kind="receipts" @done="done" />
+    <InventoryPoDialog v-model="showPo" :store="store" />
     <InventoryLegacyImportDialog v-model="showLegacy" :store="store" @done="done" />
     <v-dialog v-model="bulk.show" max-width="480">
       <v-card class="screen-modal">
@@ -256,6 +258,7 @@ function openItem(item: TInventoryItem) {
 
 const showImport = ref(false);
 const showReceiveImport = ref(false);
+const showPo = ref(false);
 const showLegacy = ref(false);
 // Offer the old Equipment copy only where this store's sites have old records not yet copied.
 const legacyToCopy = ref(false);

package/components/VehicleQrStickerDialog.vue

@@ -76,7 +76,34 @@
             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" />
+          <div class="text-subtitle-2 mt-3 mb-1">Sticker design</div>
+          <p class="text-caption text-medium-emphasis mb-2">
+            Pick a look for the stickers. Every choice here has been tested to scan with iSecure365 and iMA365, and the
+            QR code stays the same size. Your choice is remembered on this computer.
+          </p>
+          <v-row dense data-test="vehicle-qr-design">
+            <v-col cols="12" sm="6" md="4" lg>
+              <v-select v-model="design.dots" :items="DOT_OPTIONS" label="QR dots" density="compact" hide-details />
+            </v-col>
+            <v-col cols="12" sm="6" md="4" lg>
+              <v-select v-model="design.eyes" :items="EYE_OPTIONS" label="QR corners" density="compact" hide-details />
+            </v-col>
+            <v-col cols="12" sm="6" md="4" lg>
+              <v-select v-model="design.theme" :items="STICKER_THEMES" item-value="id" label="Colours" density="compact"
+                hide-details />
+            </v-col>
+            <v-col cols="12" sm="6" md="4" lg>
+              <v-select v-model="design.frame" :items="FRAME_OPTIONS" label="Sticker shape" density="compact" hide-details />
+            </v-col>
+            <v-col cols="12" sm="6" md="4" lg>
+              <v-select v-model="design.label" :items="LABEL_OPTIONS" label="Words under the plate" density="compact"
+                hide-details />
+            </v-col>
+            <v-col cols="12" sm="6" md="4" lg="auto" class="d-flex align-center">
+              <v-btn variant="text" size="small" class="text-none" @click="resetDesign">Back to the standard look</v-btn>
+            </v-col>
+          </v-row>
+          <iframe ref="frame" title="Sticker sheet preview" :srcdoc="docHtml" class="sticker-preview mt-3" />
         </template>
       </v-card-text>
 
@@ -114,6 +141,18 @@ import {
   type StickerItem,
   type StickerPlateRow,
 } from "../utils/vehicle-qr-sticker";
+import {
+  DEFAULT_STICKER_DESIGN,
+  DOT_OPTIONS,
+  EYE_OPTIONS,
+  FRAME_OPTIONS,
+  LABEL_OPTIONS,
+  QR_ECC,
+  STICKER_THEMES,
+  normalizeDesign,
+  stickerFaceSvg,
+  type StickerDesign,
+} from "../utils/vehicle-qr-design";
 
 const props = defineProps({
   modelValue: { type: Boolean, default: false },
@@ -143,6 +182,29 @@ const error = ref("");
 const docHtml = ref("");
 const frame = ref<HTMLIFrameElement | null>(null);
 const fromReissue = computed(() => props.vehicleIds.length > 0);
+const siteName = ref("");
+
+// The last design chosen in this browser. Storage can be blocked (private
+// window): then it is simply the standard look each time.
+const DESIGN_KEY = "vehicleQrStickerDesign";
+function loadDesign(): StickerDesign {
+  try {
+    return normalizeDesign(JSON.parse(localStorage.getItem(DESIGN_KEY) || "null"));
+  } catch {
+    return { ...DEFAULT_STICKER_DESIGN };
+  }
+}
+const design = reactive<StickerDesign>(loadDesign());
+watch(design, (d) => {
+  try {
+    localStorage.setItem(DESIGN_KEY, JSON.stringify(d));
+  } catch {
+    /* not saved - nothing else to do */
+  }
+});
+function resetDesign() {
+  Object.assign(design, DEFAULT_STICKER_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)));
@@ -203,6 +265,7 @@ async function goReview() {
     const { ids, dropped: over } = idsForRequest(selected.value);
     const res = await getVehicleQrStickers(props.site, ids);
     items.value = (res?.items ?? []) as StickerItem[];
+    siteName.value = String((res as any)?.site?.name ?? "");
     missing.value = res?.missing ?? [];
     dropped.value = over;
     ticked.value = defaultStickerIds(items.value);
@@ -214,21 +277,25 @@ async function goReview() {
   }
 }
 
-// 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);
-});
+// The same document is the preview and the print job. The QR content, error
+// correction (Q), 4-module quiet zone and 32 mm size are the same on every
+// design; only the look of the dots, corners, colours and frame changes.
+watch(
+  [items, ticked, design, siteName],
+  () => {
+    const chosen = items.value.filter((i) => ticked.value.includes(i.vehicleId));
+    if (!chosen.length) {
+      docHtml.value = "";
+      return;
+    }
+    const look = normalizeDesign(design);
+    const faces = chosen.map((i) =>
+      stickerFaceSvg(QRCode.create(i.qr, { errorCorrectionLevel: QR_ECC as QRCode.QRCodeErrorCorrectionLevel }).modules, look),
+    );
+    docHtml.value = buildStickerDocument(chosen, faces, { design: look, siteName: siteName.value });
+  },
+  { deep: true },
+);
 
 function print() {
   const win = frame.value?.contentWindow;

package/composables/useInventory.ts

@@ -53,7 +53,7 @@ export default function useInventory() {
     discardUsageDraft: (id: string) => api(`/usage-drafts/${id}/discard`, { method: "POST" }),
     submitUsageDraft: (id: string, body: { photosAfter?: string[]; date?: string }) => api<TInventoryTransaction>(`/usage-drafts/${id}/submit`, { method: "POST", body }),
 
-    getRequests: (store: string, query: { page?: number; limit?: number; status?: string; mine?: boolean }) =>
+    getRequests: (store: string, query: { page?: number; limit?: number; status?: string; mine?: boolean; search?: string }) =>
       api<{ items: TInventoryRequest[]; total: number; pendingCount: number; page: number; pages: number }>(`/stores/${store}/requests`, { query }),
     createRequest: (store: string, body: Record<string, any>) => api(`/stores/${store}/requests`, { method: "POST", body }),
     approveRequest: (id: string, body: { lines?: TInventoryLine[]; remarks?: string }) =>
@@ -84,6 +84,9 @@ export default function useInventory() {
 
     getReport: (store: string, report: "movement" | "usage" | "technicians" | "purchases" | "handovers", query: TInventoryPeriod & Record<string, any>) =>
       api<{ rows: any[]; totalQty?: number; totalCost?: number; scope?: "all" | "own_company"; staleAfterDays?: number }>(`/stores/${store}/reports/${report}`, { query }),
+    /** One PO across all its deliveries: ordered vs received per item (report viewers and store keepers). */
+    getPurchaseOrder: (store: string, po: string) =>
+      api<{ po: string; lines: TInventoryPoLine[] }>(`/stores/${store}/reports/purchase-order`, { query: { po } }),
     exportReport: (store: string, report: string, query: TInventoryPeriod & Record<string, any>) =>
       api<Blob>(`/stores/${store}/reports/${report}/export`, { query, responseType: "blob" }),
     checkUsage: (store: string, ids: string[], checked: boolean) =>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.90.2-staging.490",
+  "version": "4.90.2-staging.492",
   "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/inventory.d.ts

@@ -105,6 +105,12 @@ declare type TInventoryTransaction = {
   location?: { type: "common_area" | "tenant_unit"; area?: string; unit?: string; unitName?: string; tenantName?: string };
   reference?: string;
   supplier?: string;
+  /** Receiving (2026-10): missing on older rows = PO. */
+  receivingType?: "PO" | "DO" | "CASH";
+  doNumber?: string;
+  doDate?: string | null;
+  receiptNumber?: string;
+  poOrderedQty?: number | null;
   unitCost: number;
   totalCost: number;
   photos?: { before: string[]; after: string[]; other: string[] };
@@ -164,3 +170,24 @@ declare type TInventoryHandover = {
   createdAt: string;
   decidedAt?: string;
 };
+
+/** GET /stores/:id/reports/purchase-order: one item of a PO, ordered (null = not recorded) vs received. */
+declare type TInventoryPoLine = {
+  item: string;
+  itemName: string;
+  unit: string;
+  ordered: number | null;
+  received: number;
+  outstanding: number | null;
+  deliveries: {
+    _id: string;
+    date: string;
+    qty: number;
+    receivingType: "PO" | "DO" | "CASH";
+    doNumber: string;
+    doDate: string | null;
+    receiptNumber: string;
+    supplier: string;
+    receivedBy: string;
+  }[];
+};

package/utils/inventory-receiving.ts

@@ -0,0 +1,90 @@
+/**
+ * Receiving (client meeting 2026-10-02): how a delivery came in, and the limits on its photos.
+ * The server (API-core `receiveSchema`) is the gate; these keep the form from sending what it refuses.
+ */
+
+export type TReceivingType = "PO" | "DO" | "CASH";
+
+export const RECEIVING_TYPES: { value: TReceivingType; title: string; help: string }[] = [
+  { value: "PO", title: "Purchase order (PO)", help: "Goods ordered with a PO. Enter the PO number so you can track what has arrived against what was ordered." },
+  { value: "DO", title: "Delivery order (DO)", help: "Goods came with a supplier's delivery order. The DO number and DO date are needed; add the PO number too if there is one." },
+  { value: "CASH", title: "Cash purchase", help: "Bought and paid on the spot. Enter the shop receipt number if there is one." },
+];
+
+/** Old rows carry no type: they were PO receipts. */
+export const receivingLabel = (t?: string | null) => ({ PO: "PO", DO: "DO", CASH: "Cash" })[String(t || "PO").toUpperCase() as TReceivingType] ?? "PO";
+
+/** "PO PO-0412 · DO D-77 (1 Oct)" — the paperwork a delivery came with, for history lines. */
+export function receiptRefText(
+  t: { receivingType?: string | null; reference?: string; doNumber?: string; receiptNumber?: string },
+) {
+  return [
+    t.reference ? `PO ${t.reference}` : "",
+    t.doNumber ? `DO ${t.doNumber}` : "",
+    t.receiptNumber ? `Receipt ${t.receiptNumber}` : "",
+    String(t.receivingType || "").toUpperCase() === "CASH" && !t.receiptNumber ? "Cash purchase" : "",
+  ]
+    .filter(Boolean)
+    .join(" · ");
+}
+
+/** "60 of 100 received · 40 still to come" / "60 received (ordered quantity not recorded)". */
+export function poLineText(l: { ordered: number | null; received: number; outstanding: number | null; unit?: string }) {
+  const u = l.unit ? ` ${l.unit}` : "";
+  if (l.ordered === null || l.ordered === undefined) return `${l.received}${u} received (ordered quantity not recorded)`;
+  const rest = l.outstanding ? `${l.outstanding}${u} still to come` : l.received > l.ordered ? `${l.received - l.ordered}${u} more than ordered` : "all received";
+  return `${l.received} of ${l.ordered}${u} received · ${rest}`;
+}
+
+/** What the form must still have before a receipt of this type can be sent ("" = ready). */
+export function receivingProblem(f: { type: TReceivingType; poNumber: string; doNumber: string; doDate: string; anyOrdered: boolean }) {
+  if (f.type === "PO" && !f.poNumber.trim()) return "Enter the PO number.";
+  if (f.type === "DO" && !f.doNumber.trim()) return "Enter the DO number for a delivery order (DO) receipt.";
+  if (f.type === "DO" && !f.doDate) return "Enter the DO date.";
+  if (f.anyOrdered && !f.poNumber.trim()) return "Enter the PO number to record the quantity ordered.";
+  return "";
+}
+
+/** The type-specific part of the receive body: only the fields that belong to the chosen type. */
+export function receivingFields(f: { type: TReceivingType; poNumber: string; doNumber: string; doDateIso?: string; receiptNumber: string }) {
+  return {
+    receivingType: f.type,
+    reference: f.type === "CASH" ? "" : f.poNumber.trim(),
+    ...(f.type === "DO" ? { doNumber: f.doNumber.trim(), ...(f.doDateIso ? { doDate: f.doDateIso } : {}) } : {}),
+    ...(f.type === "CASH" && f.receiptNumber.trim() ? { receiptNumber: f.receiptNumber.trim() } : {}),
+  };
+}
+
+/** Photos: what the server accepts (JPEG / PNG / WebP / iPhone HEIC), 5 MB each. */
+export const PHOTO_MAX_BYTES = 5 * 1024 * 1024;
+export const PHOTO_ACCEPT = "image/jpeg,image/png,image/webp,image/heic,image/heif,.jpg,.jpeg,.png,.webp,.heic,.heif";
+const PHOTO_EXT = /\.(jpe?g|png|webp|heic|heif)$/i;
+/** Types a browser canvas can redraw smaller (not HEIC). */
+const SHRINKABLE = ["image/jpeg", "image/png", "image/webp"];
+
+const mb = (bytes: number) => (bytes / 1024 / 1024).toFixed(1);
+
+/**
+ * What to do with a picked file: "ok", "shrink" (too big but the browser can make it smaller),
+ * or a sentence telling the person why it cannot be used.
+ */
+export function photoCheck(file: { name: string; type: string; size: number }): "ok" | "shrink" | string {
+  const typeOk = /^image\/(jpeg|png|webp|heic|heif)$/i.test(file.type) || (!file.type && PHOTO_EXT.test(file.name));
+  if (!typeOk) return `"${file.name}" is not a photo we can use. Please pick a JPG, PNG or WebP picture.`;
+  if (file.size <= PHOTO_MAX_BYTES) return "ok";
+  if (SHRINKABLE.includes(file.type.toLowerCase())) return "shrink";
+  return `"${file.name}" is ${mb(file.size)} MB. Each photo must be 5 MB or smaller — please take it at a lower size or pick another.`;
+}
+
+/** Long side of a shrunk photo, and JPEG qualities to try in turn until it fits. */
+export const SHRINK_STEPS = [
+  { side: 2560, quality: 0.85 },
+  { side: 1920, quality: 0.8 },
+  { side: 1600, quality: 0.7 },
+];
+
+/** Size of a photo scaled so its longer side is at most `side` (never enlarged). */
+export function scaledSize(width: number, height: number, side: number) {
+  const k = Math.min(1, side / Math.max(width, height));
+  return { width: Math.round(width * k), height: Math.round(height * k) };
+}

package/utils/vehicle-qr-design.ts

@@ -0,0 +1,268 @@
+/**
+ * Vehicle QR sticker designs - the sticker face (frame + QR) as plain shapes.
+ *
+ * The QR library only gives us the dark/light module grid; we draw it here so
+ * the look can change while the code itself does not: same payload, same error
+ * correction (Q), a 4-module quiet zone and a 32 mm QR on every design. The
+ * shapes are kept as data (`stickerFacePaints`) so the test can draw them to
+ * pixels and decode them - every design must still scan. Colours are dark ink
+ * on light paper only; the test checks each theme's contrast.
+ */
+
+export type QrMatrix = { size: number; get(row: number, col: number): number | boolean };
+
+export type DotShape = "square" | "rounded" | "dots";
+export type EyeShape = "square" | "rounded" | "circle";
+export type FrameShape = "rounded" | "square" | "soft" | "arch" | "ticket";
+export type LabelChoice = "app" | "verify" | "site" | "none";
+
+export type StickerTheme = { id: string; title: string; ink: string; eye: string; paper: string };
+
+export type StickerDesign = { dots: DotShape; eyes: EyeShape; theme: string; frame: FrameShape; label: LabelChoice };
+
+export const DOT_OPTIONS: { value: DotShape; title: string }[] = [
+  { value: "square", title: "Squares (classic)" },
+  { value: "rounded", title: "Rounded squares" },
+  { value: "dots", title: "Round dots" },
+];
+
+export const EYE_OPTIONS: { value: EyeShape; title: string }[] = [
+  { value: "square", title: "Square" },
+  { value: "rounded", title: "Rounded" },
+  { value: "circle", title: "Circle" },
+];
+
+export const FRAME_OPTIONS: { value: FrameShape; title: string }[] = [
+  { value: "rounded", title: "Rounded corners" },
+  { value: "square", title: "Square corners" },
+  { value: "soft", title: "Extra round" },
+  { value: "arch", title: "Badge (round top)" },
+  { value: "ticket", title: "Ticket (cut corners)" },
+];
+
+export const LABEL_OPTIONS: { value: LabelChoice; title: string }[] = [
+  { value: "app", title: "Scan with iSecure365 / iMA365" },
+  { value: "verify", title: "Scan to verify vehicle" },
+  { value: "site", title: "Site name" },
+  { value: "none", title: "No extra words" },
+];
+
+// Dark ink on light paper only - never inverted, never pale. Checked by test.
+export const STICKER_THEMES: StickerTheme[] = [
+  { id: "black", title: "Black on white", ink: "#000000", eye: "#000000", paper: "#ffffff" },
+  { id: "navy", title: "Navy blue", ink: "#0b2545", eye: "#0b2545", paper: "#ffffff" },
+  { id: "navy-red", title: "Navy with red corners", ink: "#0b2545", eye: "#8b1a1a", paper: "#ffffff" },
+  { id: "green", title: "Dark green on mint", ink: "#14462b", eye: "#14462b", paper: "#f2faf4" },
+  { id: "maroon", title: "Maroon on cream", ink: "#5c0f1d", eye: "#5c0f1d", paper: "#fff8ee" },
+  { id: "purple", title: "Deep purple", ink: "#33105c", eye: "#33105c", paper: "#ffffff" },
+  { id: "charcoal", title: "Charcoal on cream", ink: "#222222", eye: "#222222", paper: "#fffbea" },
+];
+
+export const DEFAULT_STICKER_DESIGN: StickerDesign = {
+  dots: "square",
+  eyes: "square",
+  theme: "black",
+  frame: "rounded",
+  label: "app",
+};
+
+/** A saved or typed-in design with anything unknown replaced by the default. */
+export function normalizeDesign(raw: unknown): StickerDesign {
+  const r = (raw && typeof raw === "object" ? raw : {}) as Record<string, unknown>;
+  const pick = <T extends string>(v: unknown, list: { value: T }[], d: T): T =>
+    list.some((o) => o.value === v) ? (v as T) : d;
+  const d = DEFAULT_STICKER_DESIGN;
+  return {
+    dots: pick(r.dots, DOT_OPTIONS, d.dots),
+    eyes: pick(r.eyes, EYE_OPTIONS, d.eyes),
+    theme: STICKER_THEMES.some((t) => t.id === r.theme) ? String(r.theme) : d.theme,
+    frame: pick(r.frame, FRAME_OPTIONS, d.frame),
+    label: pick(r.label, LABEL_OPTIONS, d.label),
+  };
+}
+
+export function stickerTheme(id: string): StickerTheme {
+  return STICKER_THEMES.find((t) => t.id === id) ?? STICKER_THEMES[0];
+}
+
+/** WCAG relative luminance of "#rrggbb". */
+export function stickerLuminance(hex: string): number {
+  const n = parseInt(hex.slice(1), 16);
+  const lin = (c: number) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+  return 0.2126 * lin(((n >> 16) & 255) / 255) + 0.7152 * lin(((n >> 8) & 255) / 255) + 0.0722 * lin((n & 255) / 255);
+}
+
+export function stickerContrast(a: string, b: string): number {
+  const [hi, lo] = [stickerLuminance(a), stickerLuminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+// ---- geometry (all in mm; the card is 47 x 58) ----------------------------
+
+export const CARD_W = 47;
+export const CARD_H = 58;
+export const QR_MM = 32; // the whole QR including its quiet zone
+export const QUIET_MODULES = 4;
+/** Error correction on every design (no centre logo, so Q stays enough). */
+export const QR_ECC = "Q";
+const STROKE = 0.35;
+
+/** A rectangle with per-corner radii [tl, tr, br, bl], or concave cut corners. */
+export type Box = { t: "box"; x: number; y: number; w: number; h: number; r?: number[]; notch?: number };
+export type Circle = { t: "circle"; cx: number; cy: number; r: number };
+export type Shape = Box | Circle;
+/** A filled shape; `hole` is cut out of it (rings, the frame line). */
+export type Paint = { shape: Shape; hole?: Shape; fill: string };
+
+/** Top of the QR on the card: lower on the badge so the round top keeps clear of the code. */
+export function qrTop(frame: FrameShape): number {
+  return frame === "arch" ? 7 : 2.5;
+}
+
+function cardBox(frame: FrameShape, inset: number): Box {
+  const x = inset;
+  const w = CARD_W - inset * 2;
+  const h = CARD_H - inset * 2;
+  const r = (v: number) => Math.max(0, v - inset);
+  switch (frame) {
+    case "square":
+      return { t: "box", x, y: x, w, h, r: [r(0.8), r(0.8), r(0.8), r(0.8)] };
+    case "soft":
+      return { t: "box", x, y: x, w, h, r: [r(8), r(8), r(8), r(8)] };
+    case "arch":
+      return { t: "box", x, y: x, w, h, r: [w / 2, w / 2, r(3), r(3)] };
+    case "ticket":
+      return { t: "box", x, y: x, w, h, notch: 4 + inset };
+    default:
+      return { t: "box", x, y: x, w, h, r: [r(3), r(3), r(3), r(3)] };
+  }
+}
+
+function isFinder(n: number, row: number, col: number): boolean {
+  return (row < 7 && col < 7) || (row < 7 && col >= n - 7) || (row >= n - 7 && col < 7);
+}
+
+/** Every shape on the sticker face, painted in order. */
+export function stickerFacePaints(matrix: QrMatrix, design: StickerDesign): Paint[] {
+  const theme = stickerTheme(design.theme);
+  const n = matrix.size;
+  const m = QR_MM / (n + QUIET_MODULES * 2);
+  const ox = (CARD_W - QR_MM) / 2 + QUIET_MODULES * m;
+  const oy = qrTop(design.frame) + QUIET_MODULES * m;
+  const paints: Paint[] = [
+    { shape: cardBox(design.frame, 0), fill: theme.paper },
+    { shape: cardBox(design.frame, 0), hole: cardBox(design.frame, STROKE), fill: theme.ink },
+  ];
+  const box = (x: number, y: number, w: number, h: number, rad = 0): Box => ({ t: "box", x, y, w, h, r: [rad, rad, rad, rad] });
+
+  for (let row = 0; row < n; row++) {
+    for (let col = 0; col < n; col++) {
+      if (!matrix.get(row, col) || isFinder(n, row, col)) continue;
+      const x = ox + col * m;
+      const y = oy + row * m;
+      if (design.dots === "dots") {
+        paints.push({ shape: { t: "circle", cx: x + m / 2, cy: y + m / 2, r: m * 0.45 }, fill: theme.ink });
+      } else if (design.dots === "rounded") {
+        paints.push({ shape: box(x, y, m, m, m * 0.3), fill: theme.ink });
+      } else {
+        // ponytail: one rect per horizontal run, so adjacent squares never show a hairline seam
+        let end = col;
+        while (end + 1 < n && matrix.get(row, end + 1) && !isFinder(n, row, end + 1)) end++;
+        paints.push({ shape: box(x, y, (end - col + 1) * m, m), fill: theme.ink });
+        col = end;
+      }
+    }
+  }
+
+  for (const [r0, c0] of [[0, 0], [0, n - 7], [n - 7, 0]]) {
+    const x = ox + c0 * m;
+    const y = oy + r0 * m;
+    if (design.eyes === "circle") {
+      const cx = x + 3.5 * m;
+      const cy = y + 3.5 * m;
+      paints.push({ shape: { t: "circle", cx, cy, r: 3.5 * m }, hole: { t: "circle", cx, cy, r: 2.5 * m }, fill: theme.eye });
+      paints.push({ shape: { t: "circle", cx, cy, r: 1.5 * m }, fill: theme.eye });
+    } else {
+      const round = design.eyes === "rounded";
+      paints.push({
+        shape: box(x, y, 7 * m, 7 * m, round ? 2 * m : 0),
+        hole: box(x + m, y + m, 5 * m, 5 * m, round ? 1.2 * m : 0),
+        fill: theme.eye,
+      });
+      paints.push({ shape: box(x + 2 * m, y + 2 * m, 3 * m, 3 * m, round ? 0.9 * m : 0), fill: theme.eye });
+    }
+  }
+  return paints;
+}
+
+// ---- drawing ---------------------------------------------------------------
+
+const f = (v: number) => String(Math.round(v * 1000) / 1000);
+
+function boxPath(b: Box): string {
+  const { x, y, w, h } = b;
+  if (b.notch) {
+    const k = b.notch;
+    return (
+      `M${f(x + k)} ${f(y)}H${f(x + w - k)}A${f(k)} ${f(k)} 0 0 0 ${f(x + w)} ${f(y + k)}` +
+      `V${f(y + h - k)}A${f(k)} ${f(k)} 0 0 0 ${f(x + w - k)} ${f(y + h)}` +
+      `H${f(x + k)}A${f(k)} ${f(k)} 0 0 0 ${f(x)} ${f(y + h - k)}` +
+      `V${f(y + k)}A${f(k)} ${f(k)} 0 0 0 ${f(x + k)} ${f(y)}Z`
+    );
+  }
+  const [tl, tr, br, bl] = b.r ?? [0, 0, 0, 0];
+  const arc = (r: number, ex: number, ey: number) => (r ? `A${f(r)} ${f(r)} 0 0 1 ${f(ex)} ${f(ey)}` : "");
+  return (
+    `M${f(x + tl)} ${f(y)}H${f(x + w - tr)}${arc(tr, x + w, y + tr)}` +
+    `V${f(y + h - br)}${arc(br, x + w - br, y + h)}` +
+    `H${f(x + bl)}${arc(bl, x, y + h - bl)}` +
+    `V${f(y + tl)}${arc(tl, x + tl, y)}Z`
+  );
+}
+
+function shapePath(s: Shape): string {
+  if (s.t === "box") return boxPath(s);
+  const { cx, cy, r } = s;
+  return `M${f(cx - r)} ${f(cy)}A${f(r)} ${f(r)} 0 1 0 ${f(cx + r)} ${f(cy)}A${f(r)} ${f(r)} 0 1 0 ${f(cx - r)} ${f(cy)}Z`;
+}
+
+/** The face as one SVG, 47 x 58 mm. Runs of same-colour shapes share one path. */
+export function paintsToSvg(paints: Paint[]): string {
+  const out: string[] = [];
+  let fill = "";
+  let d = "";
+  const flush = () => d && out.push(`<path fill="${fill}" d="${d}"/>`);
+  for (const p of paints) {
+    if (p.hole) {
+      // A ring is its own evenodd path, so its hole never cuts a neighbour.
+      flush();
+      d = "";
+      out.push(`<path fill="${p.fill}" fill-rule="evenodd" d="${shapePath(p.shape)}${shapePath(p.hole)}"/>`);
+      continue;
+    }
+    if (p.fill !== fill) {
+      flush();
+      fill = p.fill;
+      d = "";
+    }
+    d += shapePath(p.shape);
+  }
+  flush();
+  return (
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${CARD_W} ${CARD_H}" width="${CARD_W}mm" height="${CARD_H}mm">` +
+    out.join("") +
+    `</svg>`
+  );
+}
+
+export function stickerFaceSvg(matrix: QrMatrix, design: StickerDesign): string {
+  return paintsToSvg(stickerFacePaints(matrix, design));
+}
+
+/** The words under the plate for this design ("" = none). */
+export function stickerLabel(design: StickerDesign, siteName = ""): string {
+  if (design.label === "none") return "";
+  if (design.label === "verify") return "Scan to verify vehicle";
+  if (design.label === "site") return String(siteName ?? "").trim();
+  return "Scan with iSecure365 / iMA365";
+}

package/utils/vehicle-qr-sticker.ts

@@ -8,6 +8,8 @@
  * pasted on the car.
  */
 
+import { DEFAULT_STICKER_DESIGN, QR_MM, qrTop, stickerLabel, stickerTheme, type StickerDesign } from "./vehicle-qr-design.ts";
+
 /** The server's most vehicles per request (POST /api/vehicles/qr/stickers). */
 export const STICKER_MAX_PER_REQUEST = 500;
 
@@ -146,13 +148,13 @@ html, body { margin: 0; padding: 0; background: #fff; color: #111; font-family:
 .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; }
+.card { position: relative; width: 47mm; height: 58mm; }
+.face, .face svg { position: absolute; inset: 0; width: 47mm; height: 58mm; display: block; }
+.words { position: absolute; left: 3mm; right: 3mm; bottom: 2mm; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; }
 .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; }
+.hint { font-size: 5.8pt; line-height: 1.2; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
+.brand { display: flex; align-items: center; justify-content: center; gap: 1mm; font-size: 6pt; border-top: 0.2mm solid #ccc; width: 100%; padding-top: 1mm; }
+.mark { width: 3.2mm; height: 3.2mm; border-radius: 0.8mm; color: #fff; font-weight: 800; font-size: 5pt; line-height: 3.2mm; text-align: center; }
 .cut { margin-top: 1.2mm; border-top: 0.3mm dashed #666; padding-top: 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; }
@@ -160,20 +162,29 @@ html, body { margin: 0; padding: 0; background: #fff; color: #111; font-family:
 `;
 
 /**
- * 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.
+ * One full HTML document: A4 sheets of stickers. `faceSvgs` is parallel to
+ * `items` (each sticker's frame + QR, already drawn for the chosen design).
+ * Every value is HTML-escaped - an owner or site name is typed by a person.
  */
-export function buildStickerDocument(items: StickerItem[], qrSvgs: string[]): string {
+export function buildStickerDocument(
+  items: StickerItem[],
+  faceSvgs: string[],
+  opts: { design?: StickerDesign; siteName?: string } = {},
+): string {
+  const design = opts.design ?? DEFAULT_STICKER_DESIGN;
+  const { ink } = stickerTheme(design.theme);
+  const label = stickerLabel(design, opts.siteName);
+  const wordsTop = qrTop(design.frame) + QR_MM + 0.8;
   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="cell"><div class="card" style="color:${ink}">` +
+      `<div class="face">${faceSvgs[i] ?? ""}</div>` +
+      `<div class="words" style="top:${wordsTop}mm">` +
       `<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>` +
+      (label ? `<div class="hint">${escapeHtml(label)}</div>` : "") +
+      `<div class="brand"><span class="mark" style="background:${ink}">7</span>Powered by Seven365</div>` +
+      `</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>`