@7365admin1/layer-common 4.95.0 → 4.97.0

package/components/InventoryRequestsTab.vue

@@ -4,6 +4,7 @@
       <v-btn-toggle v-model="status" mandatory density="comfortable" variant="outlined" divided>
         <v-btn value="pending" class="text-none">Waiting</v-btn>
         <v-btn value="issued" class="text-none">Approved</v-btn>
+        <v-btn v-if="stepsLive" value="confirm" class="text-none">Waiting for Received</v-btn>
         <v-btn value="rejected" class="text-none">Rejected</v-btn>
         <v-btn value="" class="text-none">All</v-btn>
       </v-btn-toggle>
@@ -24,14 +25,20 @@
 
     <v-progress-linear v-if="loading" indeterminate color="primary" />
     <div v-else-if="!requests.length" class="text-center text-medium-emphasis py-10">
-      {{ 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." }}
+      {{ search ? `No requests match "${search}". Try another word, or pick "All" to look through every status.` : status === "confirm" ? "Nothing is waiting for anyone to tap Received." : 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">
+    <AppCard
+      v-for="r in requests"
+      :key="r._id"
+      class="pa-4 mb-3"
+      :style="r._id === focusRequest ? { borderLeft: '4px solid rgb(var(--v-theme-primary))' } : undefined"
+    >
       <div class="d-flex flex-wrap align-center ga-2 mb-2">
         <div class="font-weight-medium">{{ r.requestedByLabel || r.requestedByName || "Someone" }}</div>
         <div class="text-caption text-medium-emphasis">{{ standardFormatDateTime(r.createdAt) }}</div>
         <v-chip size="small" :color="chip[r.status].color" variant="tonal">{{ chip[r.status].label }}</v-chip>
+        <v-chip v-if="r.status === 'issued' && r.ackStatus && r.ackStatus !== 'received'" size="small" :color="ACK_CHIP[r.ackStatus].color" variant="tonal">{{ ACK_CHIP[r.ackStatus].label }}</v-chip>
         <!-- One store can supply several properties: say which one this request is for. -->
         <v-chip v-if="store.sites.length > 1 && r.siteName" size="small" variant="outlined" prepend-icon="mdi-office-building-outline">For {{ r.siteName }}</v-chip>
         <v-spacer />
@@ -39,6 +46,7 @@
           <v-btn v-if="ctl.review" class="text-none screen-btn-primary" variant="flat" @click="openDecision(r)">Review</v-btn>
           <v-btn v-else-if="isMine(r)" class="text-none screen-btn-ghost" variant="outlined" :loading="busyId === r._id" @click="cancel(r)">Cancel</v-btn>
         </template>
+        <InventoryReceiptActions v-if="r.status === 'issued' && isMine(r) && (r.ackStatus === 'awaiting' || r.ackStatus === 'not_received')" :request="r" @done="changed" />
       </div>
       <div v-for="l in r.lines" :key="String(l.item)" class="text-body-2">
         {{ requestLineText(r.status, l) }}
@@ -47,6 +55,9 @@
       <div v-if="r.decidedByName" class="text-caption mt-1">
         {{ requestOutcomeText(r, standardFormatDateTime) }}
       </div>
+      <div v-if="ackText(r, isMine(r))" class="text-body-2 mt-1" :class="r.ackStatus === 'not_received' ? 'text-error' : r.ackStatus === 'awaiting' ? 'text-warning' : 'text-medium-emphasis'">
+        {{ ackText(r, isMine(r)) }}
+      </div>
     </AppCard>
 
     <div class="text-center" v-if="page < pages">
@@ -62,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 }} · In store {{ l.onHand ?? "…" }} {{ l.unit }}</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"
@@ -76,7 +87,7 @@
                 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}`, (v: any) => l.onHand === undefined || Number(v) <= l.onHand || `Only ${l.onHand} in store`]"
+                :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} available`]"
               />
             </div>
             <InputLabel title="Remarks" class="mb-1 mt-2" />
@@ -100,10 +111,13 @@ 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, qtyUnit } from "../utils/inventory-ack";
 
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },
   siteId: { type: String, required: true },
+  /** A request to open first (notification link). Shown on top, marked, in the "All" list. */
+  focusRequest: { type: String, default: "" },
 });
 const ctl = computed(() => inventoryControls(props.store.access));
 const emit = defineEmits(["changed"]);
@@ -114,8 +128,9 @@ const { currentUser } = useLocalAuth();
 const notify = inject<(text: string, color?: string) => void>("inventoryNotify", () => {});
 
 const chip = REQUEST_STATUS;
+const stepsLive = computed(() => inventoryStepsLive(props.store));
 
-const status = ref("pending");
+const status = ref(props.focusRequest ? "" : "pending");
 const search = ref("");
 const requests = ref<TInventoryRequest[]>([]);
 const page = ref(1);
@@ -129,8 +144,14 @@ 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, search: search.value?.trim() || undefined });
-    requests.value = p === 1 ? res.items : [...requests.value, ...res.items];
+    // "Waiting for Received" is approved requests whose person has not confirmed yet.
+    const confirm = status.value === "confirm";
+    const res = await api.getRequests(props.store._id, { page: p, limit: confirm ? 100 : 20, status: confirm ? "issued" : status.value || undefined, search: search.value?.trim() || undefined });
+    const got = confirm ? res.items.filter((r) => r.ackStatus === "awaiting" || r.ackStatus === "not_received") : res.items;
+    // ponytail: the linked request is found in the first page of "All" (the newest 20); an older one just shows the list.
+    const focused = p === 1 && props.focusRequest ? got.find((r) => r._id === props.focusRequest) : undefined;
+    const rows = focused ? [focused, ...got.filter((r) => r !== focused)] : got;
+    requests.value = p === 1 ? rows : [...requests.value, ...got];
     page.value = p;
     pages.value = res.pages;
   } catch {
@@ -146,7 +167,7 @@ function changed() {
 }
 
 async function cancel(r: TInventoryRequest) {
-  if (!confirm("Cancel this request? The store keeper will no longer see it.")) return;
+  if (!confirm("Cancel this request? The store keeper will no longer see it, and anything set aside for it goes back to the store.")) return;
   busyId.value = r._id;
   try {
     await api.cancelRequest(r._id);
@@ -163,7 +184,7 @@ const decisionForm = ref();
 const decision = reactive({
   show: false,
   request: null as TInventoryRequest | null,
-  lines: [] as { item: string; itemName: string; unit: string; qty: number; give: number; onHand?: number }[],
+  lines: [] as { item: string; itemName: string; unit: string; qty: number; give: number; onHand?: number; reservedQty?: number }[],
   remarks: "",
   busy: "" as "" | "approve" | "reject",
 });
@@ -174,13 +195,14 @@ async function openDecision(r: TInventoryRequest) {
     request: r,
     remarks: "",
     busy: "",
-    lines: r.lines.map((l) => ({ item: String(l.item), itemName: l.itemName, unit: l.unit, qty: l.qty, give: l.qty, onHand: undefined })),
+    lines: r.lines.map((l) => ({ item: String(l.item), itemName: l.itemName, unit: l.unit, qty: l.qty, give: l.qty, onHand: undefined, reservedQty: l.reservedQty })),
   });
   try {
     const res = await api.getItems(props.store._id, { limit: 200, includeInactive: true });
     for (const line of decision.lines) {
       const found = res.items.find((i) => i._id === line.item);
-      line.onHand = found?.onHand ?? 0;
+      // What is free, plus what this request already set aside for itself.
+      line.onHand = approveCap(found, line.reservedQty ?? 0) ?? 0;
       line.give = Math.min(line.qty, line.onHand);
     }
   } catch {
@@ -197,7 +219,7 @@ async function approve() {
       lines: decision.lines.map((l) => ({ item: l.item, qty: Number(l.give) })),
       remarks: decision.remarks,
     });
-    notify("Approved. The stock is now with the requester.");
+    notify(stepsLive.value ? "Approved. The requester is asked to tap Received once they have the items." : "Approved. The stock is now with the requester.");
     decision.show = false;
     changed();
   } catch (error: any) {
@@ -213,7 +235,7 @@ async function reject() {
   decision.busy = "reject";
   try {
     await api.rejectRequest(decision.request._id, decision.remarks.trim());
-    notify("Request rejected.");
+    notify(stepsLive.value ? "Request rejected. Anything set aside for it is back in the store." : "Request rejected.");
     decision.show = false;
     changed();
   } catch (error: any) {

package/components/InventorySettingsTab.vue

@@ -21,6 +21,26 @@
         />
       </template>
 
+      <template v-if="stepsLive">
+        <v-divider class="my-4" />
+        <div class="text-subtitle-1 mb-1">Low stock reminders</div>
+        <p class="text-body-2 text-medium-emphasis mb-2">
+          When an item goes low, the people who manage this store get an alert. Choose how often to remind them until someone records a PO number for it.
+        </p>
+        <v-text-field
+          v-model.number="reminderDays"
+          type="number"
+          min="0"
+          max="30"
+          label="Remind every (days)"
+          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="`How often to remind (days). 0 = no reminders. ${reminderDaysText(reminderDays)}`"
+          persistent-hint
+        />
+      </template>
+
       <v-divider class="my-4" />
       <div class="text-subtitle-1 mb-1">Service365 app</div>
       <p class="text-body-2 text-medium-emphasis mb-2">
@@ -40,6 +60,7 @@
 import useInventory from "../composables/useInventory";
 import useUtils from "../composables/useUtils";
 import { inventorySiteOptions } from "../utils/inventory-store-label";
+import { inventoryStepsLive, reminderDaysText } from "../utils/inventory-ack";
 
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },
@@ -57,6 +78,8 @@ const name = ref("");
 const sites = ref<string[]>([]);
 const showInResidentApp = ref(false);
 const showCostInResidentApp = ref(false);
+const reminderDays = ref<number>(1);
+const stepsLive = computed(() => inventoryStepsLive(props.store));
 
 const siteItems = computed(() => inventorySiteOptions(props.orgSites, props.store));
 
@@ -65,6 +88,7 @@ function reset() {
   sites.value = [...props.store.sites];
   showInResidentApp.value = props.store.showInResidentApp;
   showCostInResidentApp.value = props.store.showCostInResidentApp;
+  reminderDays.value = props.store.lowStockReminderDays ?? 1;
 }
 
 async function save() {
@@ -77,6 +101,8 @@ async function save() {
       sites: sites.value,
       showInResidentApp: showInResidentApp.value,
       showCostInResidentApp: showInResidentApp.value && showCostInResidentApp.value,
+      // Only to an API that has reminders (an older one refuses the unknown field).
+      ...(stepsLive.value ? { lowStockReminderDays: Number(reminderDays.value) } : {}),
     });
     notify("Settings saved.");
     emit("saved");
@@ -87,5 +113,5 @@ async function save() {
   }
 }
 
-watch(() => props.store, reset, { immediate: true });
+watch(() => [props.store, props.store.lowStockReminderDays], reset, { immediate: true });
 </script>

package/components/InventoryStockTab.vue

@@ -96,10 +96,17 @@
         </div>
       </template>
       <template #item.onHand="{ item }">
-        <span :class="item.lowStock ? 'text-error font-weight-bold' : 'font-weight-medium'">{{ item.onHand }}</span>
-        <span class="text-medium-emphasis ml-1">{{ item.unit }}</span>
+        <!-- Owner 2026-10-03: what is requested comes off this number at once (set aside), so everyone sees what is really left. -->
+        <span :class="item.lowStock ? 'text-error font-weight-bold' : 'font-weight-medium'">{{ qtyUnit(availableQty(item), item.unit) }}</span>
         <v-chip v-if="item.lowStock" size="x-small" color="error" variant="tonal" class="ml-2">Low</v-chip>
         <v-chip v-if="item.status === 'inactive'" size="x-small" variant="tonal" class="ml-2">Not in use</v-chip>
+        <div v-if="item.reserved" class="text-caption text-medium-emphasis">+ {{ item.reserved }} set aside for requests (still on the shelf)</div>
+        <div v-if="item.awaitingReceipt" class="text-caption text-medium-emphasis">{{ item.awaitingReceipt }} handed out, waiting for Received</div>
+        <!-- Acknowledge / PO details are for the people who handle the store; a technician sees only the Low chip. -->
+        <div v-if="item.lowStockAlert && canAckLow" class="text-caption text-error" @click.stop>
+          {{ lowStockAlertText(item.lowStockAlert, standardFormatDate) }}
+          <a v-if="canAckLow && !item.lowStockAlert.poNumber" href="#" class="text-primary ml-1" @click.prevent.stop="openAck(item)">Acknowledge</a>
+        </div>
       </template>
       <template #item.reorderLevel="{ value }">{{ value || "—" }}</template>
       <template #item.usedBy="{ item }">{{ usedByText(item.usedBy) }}</template>
@@ -143,6 +150,23 @@
         </div>
       </v-card>
     </v-dialog>
+    <v-dialog v-model="ack.show" max-width="480">
+      <v-card v-if="ack.item" class="screen-modal">
+        <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">
+            {{ 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" />
+          <v-text-field v-model="ack.poNumber" density="comfortable" maxlength="100" placeholder="e.g. PO-0412" />
+        </v-card-text>
+        <div class="screen-modal__footer">
+          <v-btn class="screen-btn-ghost" variant="outlined" :disabled="ack.saving" @click="ack.show = false">Cancel</v-btn>
+          <v-btn class="screen-btn-primary" variant="flat" :loading="ack.saving" @click="saveAck">{{ ack.poNumber.trim() ? "Save PO and stop reminders" : "Mark as seen" }}</v-btn>
+        </div>
+      </v-card>
+    </v-dialog>
     <InventoryItemDetail v-model="detail.show" :store="store" :item="detail.item" @edit="editItem" @done="done" />
   </div>
 </template>
@@ -154,6 +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, 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({
@@ -164,7 +189,30 @@ const props = defineProps({
 const ctl = computed(() => inventoryControls(props.store.access));
 const emit = defineEmits(["changed"]);
 
-const { getItems, getLegacyEquipment, setUsedBy } = useInventory();
+const { getItems, getLegacyEquipment, setUsedBy, acknowledgeLowStock } = useInventory();
+const { standardFormatDate } = useUtils();
+
+// Low stock acknowledge (client 2026-10-02): store managers, approvers and store keepers.
+const canAckLow = computed(() => ctl.value.addItems || ctl.value.review || ctl.value.receive);
+const ack = reactive({ show: false, item: null as TInventoryItem | null, poNumber: "", saving: false });
+function openAck(item: TInventoryItem) {
+  Object.assign(ack, { show: true, item, poNumber: "", saving: false });
+}
+async function saveAck() {
+  if (!ack.item) return;
+  ack.saving = true;
+  try {
+    const po = ack.poNumber.trim();
+    await acknowledgeLowStock(ack.item._id, po);
+    notify(po ? `PO ${po} recorded for ${ack.item.name}. The low stock reminders have stopped.` : `Noted that you have seen ${ack.item.name} is low. Reminders continue until a PO number is recorded.`);
+    ack.show = false;
+    load();
+  } catch (error: any) {
+    notify(error?.data?.message || "Could not save. Please try again.", "error");
+  } finally {
+    ack.saving = false;
+  }
+}
 const notify = inject<(text: string, color?: string) => void>("inventoryNotify", () => {});
 
 // Used by belongs to the main (property) store; its owner sees the column, the filter and bulk edit.
@@ -210,7 +258,7 @@ const pageRange = computed(() => (total.value ? `${(page.value - 1) * limit + 1}
 
 const headers = computed(() => [
   { title: "Item", value: "name" },
-  { title: "In store", value: "onHand" },
+  { title: "Available", value: "onHand" },
   { title: "Low stock alert at", value: "reorderLevel" },
   ...(usedByOwner.value ? [{ title: "Used by", value: "usedBy" }] : []),
   ...(ctl.value.unitPrice ? [{ title: "Unit price", value: "unitCost" }] : []),

package/components/InventoryTechniciansTab.vue

@@ -6,6 +6,17 @@
       <v-text-field v-model="search" density="compact" placeholder="Search name or item" clearable hide-details append-inner-icon="mdi-magnify" style="max-width: 280px" />
     </div>
 
+    <!-- Returns the holder started (owner 2026-10-03): accept once the items are back on the shelf. -->
+    <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 {{ 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>
+      <v-btn class="text-none screen-btn-primary" variant="flat" size="small" :loading="acting === h._id" :disabled="!!acting" @click="acceptReturn(h)">Accept return</v-btn>
+    </AppCard>
+
     <v-progress-linear v-if="loading" indeterminate color="primary" />
     <div v-else-if="!groups.length" class="text-center text-medium-emphasis py-10">Nobody is holding stock from this store.</div>
 
@@ -17,7 +28,9 @@
         <v-btn v-if="ctl.takeReturn" class="text-none screen-btn-ghost" variant="outlined" size="small" prepend-icon="mdi-keyboard-return" @click="openReturn(g)">Receive return</v-btn>
       </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</v-chip>
+        <v-chip v-for="h in g.items" :key="h._id" variant="tonal">
+          {{ 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>
 
@@ -30,18 +43,77 @@
       :holdings="ret.items"
       @done="changed"
     />
+    <v-dialog v-model="decline.show" max-width="480">
+      <v-card v-if="decline.handover" class="screen-modal">
+        <v-card-title>Return not received</v-card-title>
+        <v-card-text class="screen-modal__body">
+          <p class="text-body-2 mb-3">The {{ decline.handover.itemName }} stays with {{ decline.handover.fromName }}. Tell them why, so they know what to do.</p>
+          <v-textarea v-model="decline.reason" rows="2" auto-grow density="comfortable" maxlength="500" placeholder="e.g. nothing was brought to the store" />
+        </v-card-text>
+        <div class="screen-modal__footer">
+          <v-btn class="screen-btn-ghost" variant="outlined" :disabled="!!acting" @click="decline.show = false">Cancel</v-btn>
+          <v-btn class="screen-btn-primary" variant="flat" :loading="!!acting" @click="declineReturn">Send</v-btn>
+        </div>
+      </v-card>
+    </v-dialog>
   </div>
 </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";
 
 const props = defineProps({ store: { type: Object as PropType<TInventoryStore>, required: true } });
 const ctl = computed(() => inventoryControls(props.store.access));
 const emit = defineEmits(["changed"]);
 
-const { getHoldings } = useInventory();
+const { getHoldings, getHandovers, acceptHandover, declineHandover } = useInventory();
+const { standardFormatDate } = useUtils();
+const notify = inject<(text: string, color?: string) => void>("inventoryNotify", () => {});
+
+const returns = ref<TInventoryHandover[]>([]);
+const acting = ref("");
+const decline = reactive({ show: false, handover: null as TInventoryHandover | null, reason: "" });
+async function loadReturns() {
+  if (!ctl.value.takeReturn) return (returns.value = []);
+  try {
+    returns.value = (await getHandovers(props.store._id, { status: "pending", limit: 50 })).items.filter((h) => h.kind === "return");
+  } catch {
+    returns.value = [];
+  }
+}
+async function acceptReturn(h: TInventoryHandover) {
+  acting.value = h._id;
+  try {
+    await acceptHandover(h._id);
+    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");
+  } finally {
+    acting.value = "";
+  }
+}
+function openDecline(h: TInventoryHandover) {
+  Object.assign(decline, { show: true, handover: h, reason: "" });
+}
+async function declineReturn() {
+  const h = decline.handover;
+  if (!h) return;
+  acting.value = h._id;
+  try {
+    await declineHandover(h._id, decline.reason.trim());
+    notify(`Return not accepted. The ${h.itemName} stays with ${h.fromName}, who has been told.`);
+    decline.show = false;
+    changed();
+  } catch (error: any) {
+    notify(error?.data?.message || "Could not update the return.", "error");
+  } finally {
+    acting.value = "";
+  }
+}
 const holdings = ref<TInventoryHolding[]>([]);
 const loading = ref(false);
 const search = ref("");
@@ -76,9 +148,10 @@ function openReturn(g: { holder: string; holderName: string; items: TInventoryHo
 
 function changed() {
   load();
+  loadReturns();
   emit("changed");
 }
 
-watch(() => props.store._id, load);
-onMounted(load);
+watch(() => props.store._id, () => (load(), loadReturns()));
+onMounted(() => (load(), loadReturns()));
 </script>

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"
@@ -92,6 +92,18 @@
 
           <InputLabel :title="draft ? 'Date of the job (used when you submit)' : 'Date used'" class="mb-1 mt-3" />
           <v-text-field v-model="date" type="date" :max="today" density="comfortable" style="max-width: 200px" />
+          <template v-if="stepsLive">
+            <InputLabel title="Also attended (optional)" class="mb-1" />
+            <v-text-field
+              v-model="attendedWith"
+              density="comfortable"
+              maxlength="200"
+              placeholder="e.g. Ahmad, Kumar"
+              hint="Colleagues who did this job with you. The stock still comes from your own stock."
+              persistent-hint
+              class="mb-2"
+            />
+          </template>
           <InputLabel title="Fault reported by (optional)" class="mb-1" />
           <v-text-field v-model="reportedBy" density="comfortable" placeholder="e.g. tenant, security guard" maxlength="120" />
           <InputLabel title="Remarks (optional)" class="mb-1" />
@@ -122,6 +134,7 @@
 <script setup lang="ts">
 import useInventory, { pickedDate } from "../composables/useInventory";
 import useUtils from "../composables/useUtils";
+import { inventoryStepsLive, qtyUnit } from "../utils/inventory-ack";
 
 const show = defineModel<boolean>({ default: false });
 const props = defineProps({
@@ -155,6 +168,8 @@ const area = ref("");
 const reference = ref("");
 const remarks = ref("");
 const reportedBy = ref("");
+const attendedWith = ref("");
+const stepsLive = computed(() => inventoryStepsLive(props.store));
 const date = ref(today);
 const photosBefore = ref<string[]>([]);
 const photosAfter = ref<string[]>([]);
@@ -199,6 +214,8 @@ function body() {
     photosAfter: photosAfter.value,
     remarks: remarks.value,
     reportedBy: reportedBy.value,
+    // Only to an API that knows it (an older one refuses an unknown field).
+    ...(stepsLive.value && attendedWith.value.trim() ? { attendedWith: attendedWith.value.trim() } : {}),
   };
 }
 
@@ -282,6 +299,7 @@ watch(show, (open) => {
   reference.value = "";
   remarks.value = "";
   reportedBy.value = "";
+  attendedWith.value = "";
   date.value = today;
   site.value = props.store.sites.includes(props.siteId) ? props.siteId : props.store.sites[0];
   const d = props.draft;
@@ -297,6 +315,7 @@ watch(show, (open) => {
     reference.value = d.reference ?? "";
     remarks.value = d.remarks ?? "";
     reportedBy.value = d.reportedBy ?? "";
+    attendedWith.value = d.attendedWith ?? "";
     photosBefore.value = [...(d.photos?.before ?? [])];
     photosAfter.value = [...(d.photos?.after ?? [])];
     nextTick(() => (prefilling = false));

package/components/InventoryWriteOffDialog.vue

@@ -0,0 +1,112 @@
+<template>
+  <v-dialog v-model="show" max-width="560" persistent scrollable>
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        Write off {{ itemName }}
+        <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">
+          {{
+            from === "store"
+              ? `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>
+        <!-- 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"
+            type="number"
+            min="1"
+            :max="max"
+            density="comfortable"
+            :suffix="unit"
+            style="max-width: 200px"
+            :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="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" />
+          <v-textarea v-model="remarks" rows="2" auto-grow density="comfortable" maxlength="1000" placeholder="e.g. fell into the drain at block 3" />
+          <InputLabel title="Photos (optional)" class="mb-1" />
+          <InventoryPhotoInput v-model="photos" :max="5" />
+          <v-alert v-if="problem" type="warning" variant="tonal" density="compact" class="mt-2">{{ problem }}</v-alert>
+        </v-form>
+      </v-card-text>
+      <div class="screen-modal__footer">
+        <v-btn class="screen-btn-ghost" variant="outlined" :disabled="saving" @click="show = false">Cancel</v-btn>
+        <v-btn class="screen-btn-primary" variant="flat" :loading="saving" @click="save">Write off</v-btn>
+      </div>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import useInventory from "../composables/useInventory";
+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 });
+const props = defineProps({
+  store: { type: Object as PropType<TInventoryStore>, required: true },
+  from: { type: String as PropType<"holding" | "store">, default: "holding" },
+  item: { type: String, default: "" },
+  itemName: { type: String, default: "" },
+  unit: { type: String, default: "" },
+  max: { type: Number, default: 0 },
+  siteId: { type: String, default: "" },
+});
+const emit = defineEmits(["done"]);
+
+const api = useInventory();
+const notify = inject<(text: string, color?: string) => void>("inventoryNotify", () => {});
+
+const form = ref();
+const qty = ref<number | null>(1);
+const reason = ref<string>(writeOffDefaultReason(props.from));
+const remarks = ref("");
+const photos = ref<string[]>([]);
+const saving = ref(false);
+const tried = ref(false);
+const problem = computed(() => (tried.value ? writeOffProblem({ reason: reason.value ?? "", remarks: remarks.value }) : ""));
+
+async function save() {
+  tried.value = true;
+  const { valid } = await form.value.validate();
+  if (!valid || writeOffProblem({ reason: reason.value ?? "", remarks: remarks.value })) return;
+  saving.value = true;
+  try {
+    await api.writeOff(props.store._id, {
+      from: props.from,
+      ...(props.siteId && props.store.sites.includes(props.siteId) ? { site: props.siteId } : {}),
+      item: props.item,
+      qty: Number(qty.value),
+      reason: reason.value,
+      remarks: remarks.value.trim(),
+      photos: photos.value,
+    });
+    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) {
+    notify(error?.data?.message || "Could not write it off. Please try again.", "error");
+  } finally {
+    saving.value = false;
+  }
+}
+
+watch(show, (open) => {
+  if (!open) return;
+  form.value?.resetValidation();
+  qty.value = 1;
+  reason.value = writeOffDefaultReason(props.from);
+  remarks.value = "";
+  photos.value = [];
+  tried.value = false;
+});
+</script>