@7365admin1/layer-common 4.90.2-staging.494 → 4.90.2-staging.495

package/components/InventoryHistoryDialog.vue

@@ -24,7 +24,7 @@
             <tbody>
               <tr v-for="h in holdings" :key="h._id">
                 <td>{{ h.itemName }}</td>
-                <td class="text-right">{{ h.qty }} {{ h.unit }}</td>
+                <td class="text-right">{{ qtyUnit(h.qty, h.unit) }}</td>
                 <td class="text-right">{{ h.inDrafts || "—" }}</td>
                 <td class="text-right">{{ h.usedThisMonth ?? 0 }}</td>
               </tr>
@@ -58,7 +58,7 @@
           <template #item.date="{ value }">{{ standardFormatDateTime(value) }}</template>
           <template #item.what="{ item }">{{ historyText(item) }}</template>
           <template #item.person="{ item }">{{ item.holderLabel || item.holderName || "—" }}</template>
-          <template #item.qty="{ item }">{{ item.qty }} {{ item.unit }}</template>
+          <template #item.qty="{ item }">{{ qtyUnit(item.qty, item.unit) }}</template>
           <template #item.where="{ item }">{{ whereText(item.location) || (item.type === "handover" ? item.remarks : "") || "—" }}</template>
           <template #item.reference="{ item }">{{ item.type === "handover" ? "—" : item.reference || "—" }}</template>
           <template #item.photos="{ item }">
@@ -82,7 +82,7 @@ import useInventory from "../composables/useInventory";
 import useUtils from "../composables/useUtils";
 import useLocalAuth from "../composables/useLocalAuth";
 import { historyText, whereText } from "../utils/inventory-usage";
-import { inventoryStepsLive } from "../utils/inventory-ack";
+import { inventoryStepsLive, qtyUnit } from "../utils/inventory-ack";
 
 /**
  * History of stock (owner 2026-09-29, "where they used their stock"): one person's (`holder`, "me" =

package/components/InventoryItemDetail.vue

@@ -10,7 +10,7 @@
         <div class="d-flex flex-wrap ga-4 mb-4">
           <v-img v-if="item.photo" :src="getFileUrl(item.photo)" width="120" height="120" cover class="rounded flex-grow-0" />
           <div class="flex-grow-1">
-            <div class="text-h5 mb-1" :class="item.lowStock ? 'text-error' : ''">{{ item.onHand }} {{ item.unit }} in store</div>
+            <div class="text-h5 mb-1" :class="item.lowStock ? 'text-error' : ''">{{ qtyUnit(item.onHand, item.unit) }} in store</div>
             <div v-if="item.reserved" class="text-body-2 mb-1">{{ availableText(item) }} (the rest is set aside for requests waiting for approval)</div>
             <div v-if="item.lowStockAlert" class="text-body-2 text-error mb-1">{{ lowStockAlertText(item.lowStockAlert, standardFormatDate) }}</div>
             <div class="text-body-2 text-medium-emphasis">
@@ -93,7 +93,7 @@ import useUtils from "../composables/useUtils";
 import { inventoryItemMeta } from "../utils/inventory-store-label";
 import { inventoryControls } from "../utils/inventory-presets";
 import { receiptRefText } from "../utils/inventory-receiving";
-import { availableText, inventoryStepsLive, lowStockAlertText, writeOffLabel } from "../utils/inventory-ack";
+import { availableText, inventoryStepsLive, lowStockAlertText, qtyUnit, writeOffLabel } from "../utils/inventory-ack";
 
 const show = defineModel<boolean>({ default: false });
 const props = defineProps({

package/components/InventoryItemDialog.vue

@@ -7,7 +7,7 @@
         <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">
-        <v-form ref="form">
+        <v-form ref="form" validate-on="blur invalid-input">
           <InputLabel title="Item name" required class="mb-1" />
           <v-text-field v-model="f.name" :rules="[requiredRule]" density="comfortable" placeholder="e.g. Philips T8 2ft 9W LED Tube" />
           <v-row dense>

package/components/InventoryLinesDialog.vue

@@ -9,7 +9,8 @@
 
       <v-card-text class="screen-modal__body">
         <p class="text-body-2 text-medium-emphasis mb-4">{{ copy.help }}</p>
-        <v-form ref="form">
+        <!-- Errors once a field is left or the button is pressed, never from opening or resetting the form. -->
+        <v-form ref="form" validate-on="blur invalid-input">
           <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">
@@ -40,7 +41,7 @@
               </template>
             </v-autocomplete>
             <v-alert v-if="usedByWarning" type="warning" variant="tonal" density="compact" class="mt-2">{{ usedByWarning }}</v-alert>
-            <v-text-field v-else :model-value="holderName" density="comfortable" readonly />
+            <v-text-field v-if="mode !== 'issue'" :model-value="holderName" density="comfortable" readonly />
           </template>
 
           <div class="text-subtitle-2 mb-2">Items</div>
@@ -170,7 +171,7 @@
 import useInventory, { pickedDate } from "../composables/useInventory";
 import useUtils from "../composables/useUtils";
 import { normaliseUsedBy, usedByChips, usedByText } from "../utils/inventory-used-by";
-import { availableQty, availableText as availableTextOf } from "../utils/inventory-ack";
+import { availableQty, availableText as availableTextOf, qtyUnit } from "../utils/inventory-ack";
 import { RECEIVING_TYPES, receivingFields, receivingProblem, type TReceivingType } from "../utils/inventory-receiving";
 
 type TMode = "receive" | "issue" | "request" | "return";
@@ -195,7 +196,7 @@ const notify = inject<(text: string, color?: string) => void>("inventoryNotify",
 const COPY: Record<TMode, { title: string; help: string; button: string; success: string }> = {
   receive: {
     title: "Receive Stock",
-    help: "Record a delivery from a supplier. The quantities are added to the store straight away.",
+    help: "The quantities are added to the store straight away.",
     button: "Add to store",
     success: "Stock received.",
   },
@@ -220,8 +221,10 @@ const COPY: Record<TMode, { title: string; help: string; button: string; success
 };
 // The API sets requested stock aside at once (owner 2026-10-03) when its items carry `available`.
 const reserving = computed(() => itemChoices.value.some((i) => i.available !== undefined));
+const RECEIVE_TITLES: Record<TReceivingType, string> = { PO: "Record a delivery for a PO", DO: "Record a delivery order (DO)", CASH: "Record a cash purchase" };
 const copy = computed(() => {
   const c = COPY[props.mode];
+  if (props.mode === "receive") return { ...c, title: RECEIVE_TITLES[receivingType.value] };
   if (!reserving.value) return c;
   if (props.mode === "request")
     return {
@@ -279,8 +282,8 @@ const availableOf = (id: string) => {
 };
 
 function availableText(item: any) {
-  if (props.mode === "return") return `In hand: ${item.onHand} ${item.unit}`;
-  if (props.mode === "receive") return `In store: ${item.onHand} ${item.unit}`;
+  if (props.mode === "return") return `In hand: ${qtyUnit(item.onHand, item.unit)}`;
+  if (props.mode === "receive") return `In store: ${qtyUnit(item.onHand, item.unit)}`;
   return availableTextOf(item);
 }
 
@@ -292,7 +295,7 @@ function qtyRule(line: TRow) {
     const total = rows.value.filter((r) => r.item === line.item).reduce((s, r) => s + Number(r.qty || 0), 0);
     // 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)} available — ${props.mode === "request" ? "ask for" : "give"} ${available} or fewer` : "None available right now";
+      return available > 0 ? `Only ${qtyUnit(available, unitOf(line.item))} available — ${props.mode === "request" ? "ask for" : "give"} ${available} or fewer` : "None available right now";
     return true;
   };
 }
@@ -386,6 +389,7 @@ async function submit() {
 
 watch(show, (open) => {
   if (!open) return;
+  form.value?.resetValidation();
   rows.value = [blank()];
   supplier.value = "";
   reference.value = "";

package/components/InventoryMain.vue

@@ -78,7 +78,7 @@
           <InputLabel title="Properties this store supplies" required class="mb-1" />
           <v-select
             v-model="setup.sites"
-            :items="orgSites"
+            :items="setupSiteOptions"
             item-title="name"
             item-value="_id"
             multiple
@@ -163,7 +163,7 @@ import useWorkerTerm from "../composables/useWorkerTerm";
 import useSite from "../composables/useSite";
 import useCustomerSite from "../composables/useCustomerSite";
 import useUtils from "../composables/useUtils";
-import { inventoryManagedBy, inventoryStoreLabel, inventorySuppliesText } from "../utils/inventory-store-label";
+import { inventoryManagedBy, inventorySiteOptions, inventoryStoreLabel, inventorySuppliesText } from "../utils/inventory-store-label";
 import { inventoryControls } from "../utils/inventory-presets";
 import { inventoryStepsLive } from "../utils/inventory-ack";
 import useLocalAuth from "../composables/useLocalAuth";
@@ -336,6 +336,10 @@ async function refreshCounts() {
 /** The properties this person works at in this organisation (the same list as the site switcher). */
 const { getAll: getCustomerSites } = useCustomerSite();
 const mySites = ref<{ _id: string; name: string }[]>([]);
+// The property being viewed may be one the organisation serves, not owns: name it, never show its id.
+const setupSiteOptions = computed(() =>
+  inventorySiteOptions(orgSites.value, { sites: setup.sites, siteNames: [...mySites.value, { _id: props.siteId, name: currentSiteName.value }] }),
+);
 const currentSiteName = computed(() => mySites.value.find((s) => s._id === props.siteId)?.name || storeSites.value.find((s) => s._id === props.siteId)?.name || "this property");
 async function loadMySites() {
   try {

package/components/InventoryMyStockTab.vue

@@ -25,7 +25,7 @@
     <AppCard v-for="h in toConfirm" :key="h._id" class="pa-4 mb-3 d-flex flex-wrap align-center ga-3" style="border-left: 4px solid rgb(var(--v-theme-warning))">
       <v-icon icon="mdi-hand-coin-outline" color="warning" />
       <div class="flex-grow-1">
-        <div class="font-weight-medium">{{ h.fromLabel || h.fromName }} is giving you {{ h.qty }} {{ h.unit }} {{ h.itemName }}</div>
+        <div class="font-weight-medium">{{ h.fromLabel || h.fromName }} is giving you {{ qtyUnit(h.qty, h.unit) }} {{ h.itemName }}</div>
         <div class="text-caption text-medium-emphasis">{{ standardFormatDate(h.createdAt) }}{{ h.note ? ` · ${h.note}` : "" }} · Confirm once you have it in hand.</div>
       </div>
       <v-btn class="text-none screen-btn-ghost" variant="outlined" size="small" :loading="acting === h._id + 'd'" @click="decide(h, false)">Decline</v-btn>
@@ -34,7 +34,7 @@
     <AppCard v-for="h in waiting" :key="h._id" class="pa-3 mb-3 d-flex flex-wrap align-center ga-3">
       <v-icon icon="mdi-timer-sand" color="medium-emphasis" />
       <div class="flex-grow-1 text-body-2">
-        {{ h.kind === "return" ? `Returning ${h.qty} ${h.unit} ${h.itemName} to ${h.toName || "the store"}. Hand it to the store keeper; it leaves your stock once they accept it.` : `Waiting for ${h.toName} to confirm ${h.qty} ${h.unit} ${h.itemName}.` }}
+        {{ h.kind === "return" ? `Returning ${qtyUnit(h.qty, h.unit)} ${h.itemName} to ${h.toName || "the store"}. Hand it to the store keeper; it leaves your stock once they accept it.` : `Waiting for ${h.toName} to confirm ${qtyUnit(h.qty, h.unit)} ${h.itemName}.` }}
       </div>
       <v-btn class="text-none" variant="text" size="small" :loading="acting === h._id + 'c'" @click="cancelHandover(h)">Cancel</v-btn>
     </AppCard>
@@ -50,7 +50,7 @@
       >
         <InventoryPhotoThumbs :photos="{ before: d.photos?.before ?? [] }" :before-at="d.photosBeforeAt" :size="44" />
         <div class="flex-grow-1" style="min-width: 200px">
-          <div class="font-weight-medium">{{ d.itemName }} × {{ d.qty }} {{ d.unit }}<span v-if="d.reference" class="text-medium-emphasis"> · {{ d.reference }}</span></div>
+          <div class="font-weight-medium">{{ d.itemName }} × {{ qtyUnit(d.qty, d.unit) }}<span v-if="d.reference" class="text-medium-emphasis"> · {{ d.reference }}</span></div>
           <div class="text-body-2">{{ draftCardText(d, standardFormatDateTime, staleDays).line }}</div>
           <div v-if="d.startedByName" class="text-caption text-medium-emphasis">Started by {{ d.startedByName }}{{ d.takenOverAt ? `, taken over by you ${standardFormatDateTime(d.takenOverAt)}` : "" }}. The stock comes from your own stock when you submit.</div>
           <div v-if="d.stale" class="text-caption text-error">{{ draftCardText(d, standardFormatDateTime, staleDays).warning }}</div>
@@ -65,7 +65,7 @@
       <AppCard v-for="d in colleagueDrafts" :key="d._id" class="pa-3 mb-2 d-flex flex-wrap align-center ga-3" style="border-left: 4px solid rgb(var(--v-theme-secondary))">
         <InventoryPhotoThumbs :photos="{ before: d.photos?.before ?? [] }" :before-at="d.photosBeforeAt" :size="44" />
         <div class="flex-grow-1" style="min-width: 200px">
-          <div class="font-weight-medium">{{ d.itemName }} × {{ d.qty }} {{ d.unit }}</div>
+          <div class="font-weight-medium">{{ d.itemName }} × {{ qtyUnit(d.qty, d.unit) }}</div>
           <div class="text-body-2">{{ colleagueDraftText(d, standardFormatDateTime) }}</div>
         </div>
         <v-btn class="text-none screen-btn-primary" variant="flat" size="small" :loading="acting === d._id + 't'" @click="takeOver(d)">Take over</v-btn>
@@ -87,7 +87,7 @@
           </v-avatar>
           <div class="flex-grow-1">
             <div class="font-weight-medium">{{ h.itemName }}</div>
-            <div class="text-body-2">{{ h.qty }} {{ h.unit }} left · {{ h.usedThisMonth ?? 0 }} used this month</div>
+            <div class="text-body-2">{{ qtyUnit(h.qty, h.unit) }} left · {{ h.usedThisMonth ?? 0 }} used this month</div>
             <div v-if="h.inDrafts" class="text-caption text-medium-emphasis">{{ h.inDrafts }} in drafts · {{ h.free ?? 0 }} free to use</div>
             <div v-if="h.unacknowledged" class="text-caption text-warning">{{ h.unacknowledged }} waiting for you to tap Received (above) before you can use them</div>
           </div>
@@ -146,9 +146,9 @@
         </v-card-title>
         <v-card-text class="screen-modal__body">
           <p class="text-body-2 text-medium-emphasis mb-3">
-            {{ give.holding?.itemName }}: you hold {{ give.holding?.qty }} {{ give.holding?.unit }}. It moves to your colleague once they confirm they received it.
+            {{ give.holding?.itemName }}: you hold {{ qtyUnit(give.holding?.qty, give.holding?.unit) }}. It moves to your colleague once they confirm they received it.
           </p>
-          <v-form ref="giveForm">
+          <v-form ref="giveForm" validate-on="blur invalid-input">
             <InputLabel title="Colleague" required class="mb-1" />
             <v-autocomplete
               v-model="give.to"
@@ -190,9 +190,9 @@
         <v-card-title>Return to store</v-card-title>
         <v-card-text class="screen-modal__body">
           <p class="text-body-2 text-medium-emphasis mb-3">
-            {{ ret.holding.itemName }}: you can return up to {{ freeOf(ret.holding) }} {{ ret.holding.unit }}. The store keeper is told; it goes back into the store once they accept it.
+            {{ ret.holding.itemName }}: you can return up to {{ qtyUnit(freeOf(ret.holding), ret.holding.unit) }}. The store keeper is told; it goes back into the store once they accept it.
           </p>
-          <v-form ref="retForm">
+          <v-form ref="retForm" validate-on="blur invalid-input">
             <InputLabel title="Quantity" required class="mb-1" />
             <v-text-field
               v-model.number="ret.qty"
@@ -235,7 +235,7 @@ import useUtils from "../composables/useUtils";
 import useLocalAuth from "../composables/useLocalAuth";
 import { inventoryControls } from "../utils/inventory-presets";
 import { colleagueDraftText, draftCardText } from "../utils/inventory-usage";
-import { ackText, inventoryStepsLive } from "../utils/inventory-ack";
+import { ackText, inventoryStepsLive, qtyUnit } from "../utils/inventory-ack";
 
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },
@@ -267,7 +267,7 @@ const freeOf = (h: TInventoryHolding) => Math.max(0, (h.free ?? h.qty) - pending
 // Issued to me and not yet confirmed (or reported not received).
 const toReceive = ref<TInventoryRequest[]>([]);
 const receiveTitle = (r: TInventoryRequest) =>
-  `${r.decidedByName || "The store"} issued you ${r.lines.filter((l) => l.issuedQty > 0).map((l) => `${l.issuedQty} ${l.unit} ${l.itemName}`).join(", ")}${r.decidedAt ? ` on ${standardFormatDate(r.decidedAt)}` : ""}`;
+  `${r.decidedByName || "The store"} issued you ${r.lines.filter((l) => l.issuedQty > 0).map((l) => `${qtyUnit(l.issuedQty, l.unit)} ${l.itemName}`).join(", ")}${r.decidedAt ? ` on ${standardFormatDate(r.decidedAt)}` : ""}`;
 async function loadToReceive() {
   if (!stepsLive.value) return (toReceive.value = []);
   try {
@@ -346,7 +346,7 @@ async function loadColleagueDrafts() {
 }
 async function takeOver(d: TInventoryUsageDraft) {
   const who = d.holderName || d.startedByName || "your colleague";
-  if (!confirm(`Take over ${who}'s job (${d.qty} ${d.unit ?? ""} ${d.itemName})? You finish it (after photo, submit), and the stock comes from YOUR own stock, not theirs.`)) return;
+  if (!confirm(`Take over ${who}'s job (${qtyUnit(d.qty, d.unit)} ${d.itemName})? You finish it (after photo, submit), and the stock comes from YOUR own stock, not theirs.`)) return;
   acting.value = d._id + "t";
   try {
     await api.takeOverDraft(String(d._id));
@@ -386,7 +386,7 @@ async function decide(h: TInventoryHandover, accept: boolean) {
   try {
     if (accept) await api.acceptHandover(h._id);
     else await api.declineHandover(h._id, "");
-    notify(accept ? `You received ${h.qty} ${h.unit} ${h.itemName} from ${h.fromName}.` : `Declined. The ${h.itemName} stays with ${h.fromName}.`);
+    notify(accept ? `You received ${qtyUnit(h.qty, h.unit)} ${h.itemName} from ${h.fromName}.` : `Declined. The ${h.itemName} stays with ${h.fromName}.`);
     changed();
   } catch (error: any) {
     notify(error?.data?.message || "Could not update the hand-over.", "error");

package/components/InventoryPoDialog.vue

@@ -40,7 +40,7 @@
               :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) }}
+              {{ standardFormatDate(d.date) }} · {{ qtyUnit(d.qty, l.unit) }} · {{ deliveryText(d) }}
             </div>
           </AppCard>
         </template>
@@ -50,6 +50,7 @@
 </template>
 
 <script setup lang="ts">
+import { qtyUnit } from "../utils/inventory-ack";
 import useInventory from "../composables/useInventory";
 import useUtils from "../composables/useUtils";
 import { poLineText, receivingLabel } from "../utils/inventory-receiving";

package/components/InventoryReceiptActions.vue

@@ -21,6 +21,7 @@
 </template>
 
 <script setup lang="ts">
+import { qtyUnit } from "../utils/inventory-ack";
 import useInventory from "../composables/useInventory";
 
 const props = defineProps({ request: { type: Object as PropType<TInventoryRequest>, required: true } });
@@ -31,7 +32,7 @@ const notify = inject<(text: string, color?: string) => void>("inventoryNotify",
 const busy = ref<"" | "received" | "not">("");
 const nr = reactive({ show: false, reason: "" });
 
-const items = () => props.request.lines.filter((l) => l.issuedQty > 0).map((l) => `${l.issuedQty} ${l.unit} ${l.itemName}`).join(", ");
+const items = () => props.request.lines.filter((l) => l.issuedQty > 0).map((l) => `${qtyUnit(l.issuedQty, l.unit)} ${l.itemName}`).join(", ");
 
 function openNotReceived() {
   Object.assign(nr, { show: true, reason: "" });

package/components/InventoryReportsTab.vue

@@ -265,7 +265,7 @@ 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";
-import { inventoryStepsLive, reconciliationCheckText, reconciliationPersonText, writeOffReasonText } from "../utils/inventory-ack";
+import { inventoryStepsLive, qtyUnit, reconciliationCheckText, reconciliationPersonText, writeOffReasonText } from "../utils/inventory-ack";
 
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },
@@ -356,7 +356,7 @@ function reconStoreText(r: any) {
     s.returned ? `returned ${s.returned}` : "",
     s.adjusted ? `stock count ${s.adjusted > 0 ? "+" : ""}${s.adjusted}` : "",
     s.writtenOff ? `written off from the shelf ${s.writtenOff}` : "",
-    `end ${s.closing} ${r.unit}`,
+    `end ${qtyUnit(s.closing, r.unit)}`,
   ]
     .filter(Boolean)
     .join(" · ");
@@ -566,7 +566,7 @@ const { currentUser } = useLocalAuth();
 const me = computed(() => String(currentUser.value?._id ?? ""));
 const takingOver = ref("");
 async function takeOver(r: any) {
-  if (!confirm(`Take over ${r.technician || "your colleague"}'s draft for ${r.qty} ${r.unit ?? ""} ${r.itemName}? You finish it (after photo, submit), and the stock comes from YOUR own stock, not theirs.`)) return;
+  if (!confirm(`Take over ${r.technician || "your colleague"}'s draft for ${qtyUnit(r.qty, r.unit)} ${r.itemName}? You finish it (after photo, submit), and the stock comes from YOUR own stock, not theirs.`)) return;
   takingOver.value = r._id;
   try {
     await api.takeOverDraft(String(r._id));

package/components/InventoryRequestsTab.vue

@@ -73,11 +73,11 @@
         </v-card-title>
         <v-card-text class="screen-modal__body">
           <p class="text-body-2 text-medium-emphasis mb-3">Hand over the items, then approve. You can give less than asked.</p>
-          <v-form ref="decisionForm">
+          <v-form ref="decisionForm" validate-on="blur invalid-input">
             <div v-for="l in decision.lines" :key="l.item" class="d-flex align-center ga-3 mb-1">
               <div class="flex-grow-1">
                 <div class="font-weight-medium">{{ l.itemName }}</div>
-                <div class="text-caption text-medium-emphasis">Asked {{ l.qty }} · You can give up to {{ l.onHand ?? "…" }} {{ l.unit }}{{ l.reservedQty ? ` (${l.reservedQty} set aside for this request)` : "" }}</div>
+                <div class="text-caption text-medium-emphasis">Asked {{ l.qty }} · You can give up to {{ qtyUnit(l.onHand ?? "…", l.unit) }}{{ l.reservedQty ? ` (${l.reservedQty} set aside for this request)` : "" }}</div>
               </div>
               <v-text-field
                 v-model.number="l.give"
@@ -111,7 +111,7 @@ import useUtils from "../composables/useUtils";
 import { REQUEST_STATUS, requestLineText, requestOutcomeText } from "../utils/inventory-request-text";
 import useLocalAuth from "../composables/useLocalAuth";
 import { inventoryControls } from "../utils/inventory-presets";
-import { ACK_CHIP, ackText, approveCap, inventoryStepsLive } from "../utils/inventory-ack";
+import { ACK_CHIP, ackText, approveCap, inventoryStepsLive, qtyUnit } from "../utils/inventory-ack";
 
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },

package/components/InventorySettingsTab.vue

@@ -36,7 +36,7 @@
           density="comfortable"
           style="max-width: 220px"
           :rules="[(v: any) => (Number.isInteger(Number(v)) && Number(v) >= 0 && Number(v) <= 30) || 'A whole number from 0 to 30']"
-          :hint="reminderDaysText(reminderDays)"
+          :hint="`How often to remind (days). 0 = no reminders. ${reminderDaysText(reminderDays)}`"
           persistent-hint
         />
       </template>

package/components/InventoryStockTab.vue

@@ -155,7 +155,7 @@
         <v-card-title>Low stock: {{ ack.item.name }}</v-card-title>
         <v-card-text class="screen-modal__body">
           <p class="text-body-2 mb-3">
-            {{ availableQty(ack.item) }} {{ ack.item.unit }} left (alert at {{ ack.item.reorderLevel }}). Record the PO number once you have ordered more:
+            {{ qtyUnit(availableQty(ack.item), ack.item.unit) }} left (alert at {{ ack.item.reorderLevel }}). Record the PO number once you have ordered more:
             the reminders then stop. Without a PO number, we note that you have seen it and the reminders carry on.
           </p>
           <InputLabel title="PO number (optional)" class="mb-1" />
@@ -178,7 +178,7 @@ import useUtils from "../composables/useUtils";
 import { inventoryItemMeta } from "../utils/inventory-store-label";
 import { inventoryControls } from "../utils/inventory-presets";
 import { hasLegacyEquipmentToCopy } from "../utils/inventory-legacy";
-import { availableQty, lowStockAlertText } from "../utils/inventory-ack";
+import { availableQty, lowStockAlertText, qtyUnit } from "../utils/inventory-ack";
 import { nextUsedBy, USED_BY_ALL, USED_BY_ALL_LABEL, USED_BY_FILTERS, USED_BY_HINT, USED_BY_OPTIONS, usedByChips, usedByText } from "../utils/inventory-used-by";
 
 const props = defineProps({

package/components/InventoryTechniciansTab.vue

@@ -10,7 +10,7 @@
     <AppCard v-for="h in returns" :key="h._id" class="pa-4 mb-3 d-flex flex-wrap align-center ga-3" style="border-left: 4px solid rgb(var(--v-theme-warning))">
       <v-icon icon="mdi-keyboard-return" color="warning" />
       <div class="flex-grow-1" style="min-width: 220px">
-        <div class="font-weight-medium">{{ h.fromLabel || h.fromName }} wants to return {{ h.qty }} {{ h.unit }} {{ h.itemName }}</div>
+        <div class="font-weight-medium">{{ h.fromLabel || h.fromName }} wants to return {{ qtyUnit(h.qty, h.unit) }} {{ h.itemName }}</div>
         <div class="text-caption text-medium-emphasis">{{ standardFormatDate(h.createdAt) }}{{ h.note ? ` · "${h.note}"` : "" }} · Accept once you have the items back; they go back into the store.</div>
       </div>
       <v-btn class="text-none screen-btn-ghost" variant="outlined" size="small" :disabled="!!acting" @click="openDecline(h)">Not received</v-btn>
@@ -29,7 +29,7 @@
       </div>
       <div class="d-flex flex-wrap ga-2">
         <v-chip v-for="h in g.items" :key="h._id" variant="tonal">
-          {{ h.itemName }}: {{ h.qty }} {{ h.unit }} left · {{ h.usedThisMonth ?? 0 }} used this month{{ h.unacknowledged ? ` · ${h.unacknowledged} not yet confirmed as received` : "" }}
+          {{ h.itemName }}: {{ qtyUnit(h.qty, h.unit) }} left · {{ h.usedThisMonth ?? 0 }} used this month{{ h.unacknowledged ? ` · ${h.unacknowledged} not yet confirmed as received` : "" }}
         </v-chip>
       </div>
     </AppCard>
@@ -60,6 +60,7 @@
 </template>
 
 <script setup lang="ts">
+import { qtyUnit } from "../utils/inventory-ack";
 import useInventory from "../composables/useInventory";
 import { inventoryControls } from "../utils/inventory-presets";
 import useUtils from "../composables/useUtils";
@@ -87,7 +88,7 @@ async function acceptReturn(h: TInventoryHandover) {
   acting.value = h._id;
   try {
     await acceptHandover(h._id);
-    notify(`${h.qty} ${h.unit} ${h.itemName} is back in the store.`);
+    notify(`${qtyUnit(h.qty, h.unit)} ${h.itemName} is back in the store.`);
     changed();
   } catch (error: any) {
     notify(error?.data?.message || "Could not accept the return.", "error");

package/components/InventoryUsageDialog.vue

@@ -9,13 +9,13 @@
       <v-card-text class="screen-modal__body">
         <div class="font-weight-medium">{{ holding.itemName }}</div>
         <div class="text-body-2 text-medium-emphasis mb-4">
-          You have {{ holding.qty }} {{ holding.unit }} in hand<template v-if="otherDrafts"> · {{ otherDrafts }} already in your other drafts</template>.
+          You have {{ qtyUnit(holding.qty, holding.unit) }} in hand<template v-if="otherDrafts"> · {{ otherDrafts }} already in your other drafts</template>.
           <template v-if="!draft"> Took the before photo but the job is not done yet? Save a draft now and finish it later.</template>
         </div>
         <v-alert v-if="draft" type="info" variant="tonal" density="compact" class="mb-4">
           Saved as a draft {{ draft.draftedAt ? standardFormatDateTime(draft.draftedAt) : "" }}. Nothing has been taken off your stock yet — add the after photo and submit when the job is done.
         </v-alert>
-        <v-form ref="form">
+        <v-form ref="form" validate-on="blur invalid-input">
           <InputLabel title="How many did you use?" required class="mb-1" />
           <v-text-field
             v-model.number="qty"
@@ -134,7 +134,7 @@
 <script setup lang="ts">
 import useInventory, { pickedDate } from "../composables/useInventory";
 import useUtils from "../composables/useUtils";
-import { inventoryStepsLive } from "../utils/inventory-ack";
+import { inventoryStepsLive, qtyUnit } from "../utils/inventory-ack";
 
 const show = defineModel<boolean>({ default: false });
 const props = defineProps({

package/components/InventoryWriteOffDialog.vue

@@ -10,11 +10,12 @@
         <p class="text-body-2 text-medium-emphasis mb-3">
           {{
             from === "store"
-              ? `For stock on the store shelf that can no longer be used. ${max} ${unit} on the shelf.`
-              : `For stock in your hands that is used up, spoilt, damaged or lost. It does not go back to the store and is not counted as usage. You can write off up to ${max} ${unit}.`
+              ? `For stock on the store shelf that can no longer be used. ${qtyUnit(max, unit)} on the shelf.`
+              : `For stock in your hands that is used up, spoilt, damaged or lost. It does not go back to the store and is not counted as usage. You can write off up to ${qtyUnit(max, unit)}.`
           }}
         </p>
-        <v-form ref="form">
+        <!-- Errors once a field is left or Write off is pressed, never from opening the form. -->
+        <v-form ref="form" validate-on="blur invalid-input">
           <InputLabel title="How many?" required class="mb-1" />
           <v-text-field
             v-model.number="qty"
@@ -27,7 +28,7 @@
             :rules="[(v: any) => (Number.isInteger(Number(v)) && Number(v) >= 1) || 'Enter a whole number', (v: any) => Number(v) <= max || `You can write off up to ${max}`]"
           />
           <InputLabel title="Why?" required class="mb-1" />
-          <v-chip-group v-model="reason" mandatory selected-class="text-primary" class="mb-2">
+          <v-chip-group v-model="reason" :mandatory="from !== 'store'" selected-class="text-primary" class="mb-2">
             <v-chip v-for="r in WRITE_OFF_REASONS" :key="r.value" :value="r.value" variant="outlined" filter>{{ r.title }}</v-chip>
           </v-chip-group>
           <InputLabel :title="reason === 'other' ? 'What happened?' : 'Remarks (optional)'" :required="reason === 'other'" class="mb-1" />
@@ -47,7 +48,7 @@
 
 <script setup lang="ts">
 import useInventory from "../composables/useInventory";
-import { WRITE_OFF_REASONS, writeOffLabel, writeOffProblem } from "../utils/inventory-ack";
+import { qtyUnit, WRITE_OFF_REASONS, writeOffDefaultReason, writeOffLabel, writeOffProblem } from "../utils/inventory-ack";
 
 /** Write-off (owner 2026-10-03): from the person's own stock (`holding`) or, for a store keeper, from the shelf (`store`). */
 const show = defineModel<boolean>({ default: false });
@@ -67,7 +68,7 @@ const notify = inject<(text: string, color?: string) => void>("inventoryNotify",
 
 const form = ref();
 const qty = ref<number | null>(1);
-const reason = ref("expended");
+const reason = ref<string>(writeOffDefaultReason(props.from));
 const remarks = ref("");
 const photos = ref<string[]>([]);
 const saving = ref(false);
@@ -89,7 +90,7 @@ async function save() {
       remarks: remarks.value.trim(),
       photos: photos.value,
     });
-    notify(`${qty.value} ${props.unit} of ${props.itemName} written off as ${writeOffLabel(reason.value).toLowerCase()}.${props.from === "holding" ? " The store keeper has been told." : ""}`);
+    notify(`${qtyUnit(qty.value, props.unit)} of ${props.itemName} written off as ${writeOffLabel(reason.value).toLowerCase()}.${props.from === "holding" ? " The store keeper has been told." : ""}`);
     show.value = false;
     emit("done");
   } catch (error: any) {
@@ -101,8 +102,9 @@ async function save() {
 
 watch(show, (open) => {
   if (!open) return;
+  form.value?.resetValidation();
   qty.value = 1;
-  reason.value = "expended";
+  reason.value = writeOffDefaultReason(props.from);
   remarks.value = "";
   photos.value = [];
   tried.value = false;

package/package.json

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

package/utils/inventory-ack.ts

@@ -12,6 +12,21 @@ export function inventoryStepsLive(store?: { lowStockReminderDays?: number | nul
   return typeof store?.lowStockReminderDays === "number";
 }
 
+/** Singular / plural of the item units the store offers; any other unit is shown as typed. */
+const UNIT_FORMS: Record<string, [string, string]> = {
+  pc: ["pc", "pcs"], pcs: ["pc", "pcs"], box: ["box", "boxes"], boxes: ["box", "boxes"], set: ["set", "sets"], sets: ["set", "sets"],
+  pack: ["pack", "packs"], packs: ["pack", "packs"], roll: ["roll", "rolls"], rolls: ["roll", "rolls"], can: ["can", "cans"], cans: ["can", "cans"],
+  bottle: ["bottle", "bottles"], bottles: ["bottle", "bottles"], litre: ["litre", "litres"], litres: ["litre", "litres"],
+  metre: ["metre", "metres"], metres: ["metre", "metres"],
+};
+
+/** "1 pc", "2 pcs", "1 box", "3 boxes"; kg and unknown units unchanged. */
+export function qtyUnit(qty: number | string | null | undefined, unit?: string | null) {
+  const forms = UNIT_FORMS[String(unit ?? "").trim().toLowerCase()];
+  const word = forms ? forms[Math.abs(Number(qty)) === 1 ? 0 : 1] : (unit ?? "");
+  return `${qty ?? ""} ${word}`.trim();
+}
+
 /** What can still be requested: `available` from the API, else what is on the shelf. */
 export function availableQty(item: { onHand: number; available?: number }) {
   return item.available ?? item.onHand;
@@ -20,7 +35,7 @@ export function availableQty(item: { onHand: number; available?: number }) {
 /** "Available: 8 pcs · 2 set aside for requests". */
 export function availableText(item: { onHand: number; available?: number; reserved?: number; unit: string }) {
   const reserved = item.reserved ?? 0;
-  return `Available: ${availableQty(item)} ${item.unit}${reserved > 0 ? ` · ${reserved} set aside for requests` : ""}`;
+  return `Available: ${qtyUnit(availableQty(item), item.unit)}${reserved > 0 ? ` · ${reserved} set aside for requests` : ""}`;
 }
 
 /**
@@ -67,6 +82,9 @@ export const WRITE_OFF_REASONS = [
 ] as const;
 export type TWriteOffReason = (typeof WRITE_OFF_REASONS)[number]["value"];
 
+/** A store keeper writing off from the shelf picks the reason (nothing chosen first); a holder starts on "Used up". */
+export const writeOffDefaultReason = (from: "holding" | "store") => (from === "store" ? "" : "expended");
+
 export const writeOffLabel = (reason?: string) => WRITE_OFF_REASONS.find((r) => r.value === reason)?.title ?? (reason || "");
 
 /** The same sentence the API uses, shown before saving. */
@@ -80,7 +98,7 @@ export function writeOffProblem(input: { reason: string; remarks: string }) {
 export function writeOffReasonText(byReason?: Record<string, number> | null, unit = "") {
   return Object.entries(byReason ?? {})
     .filter(([, n]) => n > 0)
-    .map(([reason, n]) => `${n}${unit ? ` ${unit}` : ""} ${writeOffLabel(reason).toLowerCase()}`)
+    .map(([reason, n]) => `${qtyUnit(n, unit)} ${writeOffLabel(reason).toLowerCase()}`)
     .join(", ");
 }
 
@@ -134,7 +152,7 @@ export function reconciliationPersonText(p: {
   if (p.writtenOff) parts.push(writeOffReasonText(p.writtenOffByReason) || `${p.writtenOff} written off`);
   if (p.toColleagues) parts.push(`gave ${p.toColleagues} to colleagues`);
   if (p.returned) parts.push(`returned ${p.returned} to the store`);
-  parts.push(`holds ${p.closing} ${unit}`.trim());
+  parts.push(`holds ${qtyUnit(p.closing, unit)}`);
   if (p.awaitingReceipt) parts.push(`${p.awaitingReceipt} not yet confirmed as received`);
   return parts.join(" · ");
 }

package/utils/inventory-request-text.ts

@@ -3,6 +3,8 @@
  * words, how many were handed over against how many were asked, and who
  * decided and when. Used by `InventoryRequestsTab`.
  */
+import { qtyUnit } from "./inventory-ack.ts";
+
 type TLine = { itemName: string; unit: string; qty: number; issuedQty: number };
 type TRequest = { status: string; decidedByName?: string; decidedAt?: string; decisionRemarks?: string };
 
@@ -13,10 +15,10 @@ export const REQUEST_STATUS: Record<string, { label: string; color: string }> =
   cancelled: { label: "Cancelled", color: "grey" },
 };
 
+/** "(asked N)" only when less was handed over than asked; a counter issue was never asked for. */
 export function requestLineText(status: string, l: TLine) {
-  return status === "issued"
-    ? `${l.itemName} — ${l.issuedQty} ${l.unit} handed over (asked ${l.qty})`
-    : `${l.itemName} — ${l.qty} ${l.unit}`;
+  if (status !== "issued") return `${l.itemName} — ${qtyUnit(l.qty, l.unit)}`;
+  return `${l.itemName} — ${qtyUnit(l.issuedQty, l.unit)} handed over${l.issuedQty !== l.qty ? ` (asked ${l.qty})` : ""}`;
 }
 
 /** "Approved and handed over by X on <when> — remarks", or "" before a decision. */