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

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/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.491",
   "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) };
+}