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

package/components/InventoryHistoryDialog.vue

@@ -64,7 +64,12 @@
           <template #item.photos="{ item }">
             <InventoryPhotoThumbs :photos="item.photos" :before-at="item.photosBeforeAt" :after-at="item.photosAfterAt" />
           </template>
-          <template #item.by="{ item }">{{ item.createdByLabel || item.createdByName }}</template>
+          <template #item.by="{ item }">
+            {{ item.createdByLabel || item.createdByName }}
+            <div v-if="item.attendedWith" class="text-caption text-medium-emphasis">Also attended: {{ item.attendedWith }}</div>
+            <div v-if="item.startedByName" class="text-caption text-medium-emphasis">Started by {{ item.startedByName }}</div>
+            <div v-if="item.type === 'write_off' && item.remarks" class="text-caption text-medium-emphasis">"{{ item.remarks }}"</div>
+          </template>
           <template #item.holderBalance="{ value }">{{ value ?? "—" }}</template>
         </v-data-table-server>
       </v-card-text>
@@ -77,6 +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";
 
 /**
  * History of stock (owner 2026-09-29, "where they used their stock"): one person's (`holder`, "me" =
@@ -116,6 +122,7 @@ const typeChoices = [
   { value: "issue", title: "Taken from store" },
   { value: "handover", title: "Hand-overs" },
   { value: "return", title: "Given back" },
+  ...(inventoryStepsLive(props.store) ? [{ value: "write_off", title: "Written off" }] : []),
 ];
 
 const intro = computed(() =>

package/components/InventoryItemDetail.vue

@@ -11,6 +11,8 @@
           <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 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">
               {{ [inventoryItemMeta(item), item.reorderLevel ? `Alert at ${item.reorderLevel}` : "", item.unitCost !== undefined ? `$${Number(item.unitCost).toFixed(2)} each` : ""].filter(Boolean).join(" · ") }}
             </div>
@@ -21,7 +23,18 @@
         <div class="d-flex flex-wrap ga-2 mb-4" v-if="ctl.editItem || ctl.count">
           <v-btn v-if="ctl.editItem" class="text-none screen-btn-ghost" variant="outlined" prepend-icon="mdi-pencil-outline" @click="emit('edit', item)">Edit item</v-btn>
           <v-btn v-if="ctl.count" class="text-none screen-btn-ghost" variant="outlined" prepend-icon="mdi-counter" @click="counting = !counting">Stock count</v-btn>
+          <v-btn v-if="ctl.count && stepsLive && item.onHand > 0" class="text-none screen-btn-ghost" variant="outlined" prepend-icon="mdi-delete-alert-outline" @click="writingOff = true">Write off</v-btn>
         </div>
+        <InventoryWriteOffDialog
+          v-model="writingOff"
+          :store="store"
+          from="store"
+          :item="item._id"
+          :item-name="item.name"
+          :unit="item.unit"
+          :max="item.onHand"
+          @done="(show = false), emit('done')"
+        />
 
         <v-form v-if="counting" ref="countForm" class="mb-4">
           <AppCard class="pa-4">
@@ -80,6 +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";
 
 const show = defineModel<boolean>({ default: false });
 const props = defineProps({
@@ -103,6 +117,8 @@ const counted = ref<number | null>(null);
 const reason = ref("");
 const saving = ref(false);
 const countForm = ref();
+const writingOff = ref(false);
+const stepsLive = computed(() => inventoryStepsLive(props.store));
 
 const formatDate = (d: string) => standardFormatDate(d);
 
@@ -121,6 +137,7 @@ function describe(t: TInventoryTransaction) {
       t.reference || "",
     );
   if (t.type === "adjust") parts.push(t.remarks || "");
+  if (t.type === "write_off") parts.push(`${t.qty} ${writeOffLabel(t.writeOffReason).toLowerCase()}`, (t.holderChange ?? 0) < 0 ? `by ${who}` : "from the shelf", t.remarks || "");
   if (t.type === "opening") parts.push(t.supplier || "", t.reference ? `PO ${t.reference}` : "", t.receivedBy ? `received by ${t.receivedBy}` : "", t.remarks || "");
   return parts.filter(Boolean).join(" · ");
 }

package/components/InventoryLinesDialog.vue

@@ -170,6 +170,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 { RECEIVING_TYPES, receivingFields, receivingProblem, type TReceivingType } from "../utils/inventory-receiving";
 
 type TMode = "receive" | "issue" | "request" | "return";
@@ -217,7 +218,25 @@ const COPY: Record<TMode, { title: string; help: string; button: string; success
     success: "Stock returned to the store.",
   },
 };
-const copy = computed(() => COPY[props.mode]);
+// 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 copy = computed(() => {
+  const c = COPY[props.mode];
+  if (!reserving.value) return c;
+  if (props.mode === "request")
+    return {
+      ...c,
+      help: "Ask the store for what you need, up to what is available (shown under each item). The quantity is set aside for you as soon as you send it, so nobody else can take it. If the request is rejected or cancelled, it goes back to the store.",
+      success: "Request sent. The items are set aside for you until the store keeper approves. Then open My Requests and tap Received once you have them.",
+    };
+  if (props.mode === "issue")
+    return {
+      ...c,
+      help: "Hand stock to someone at the store counter. It leaves the store at once. They tap Received in their app to confirm they got it, and can use it after that.",
+      success: "Stock issued. The person is asked to tap Received to confirm they got it.",
+    };
+  return c;
+});
 
 const form = ref();
 const saving = ref(false);
@@ -254,12 +273,15 @@ const choices = computed<any[]>(() =>
 const siteChoices = computed(() => (props.sites.length ? props.sites : props.store.sites.map((_id) => ({ _id, name: _id === props.siteId ? "This property" : "Other property" }))));
 
 const unitOf = (id: string) => choices.value.find((c) => c._id === id)?.unit ?? "";
-const availableOf = (id: string) => choices.value.find((c) => c._id === id)?.onHand;
+const availableOf = (id: string) => {
+  const c = choices.value.find((x) => x._id === id);
+  return c && (props.mode === "request" || props.mode === "issue") ? availableQty(c) : c?.onHand;
+};
 
 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}`;
-  return `Available: ${item.onHand} ${item.unit}`;
+  return availableTextOf(item);
 }
 
 function qtyRule(line: TRow) {
@@ -270,7 +292,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)} in the store — ask for ${available} or fewer` : "None left in the store";
+      return available > 0 ? `Only ${available} ${unitOf(line.item)} available — ${props.mode === "request" ? "ask for" : "give"} ${available} or fewer` : "None available right now";
     return true;
   };
 }

package/components/InventoryMain.vue

@@ -34,6 +34,22 @@
       Equipment is now in Inventory.
     </v-alert>
 
+    <!-- Client 2026-10-02 (Winsland): each property keeps its own stock, so say plainly whose stock this is. -->
+    <v-alert v-if="mySites.length > 1" type="info" variant="tonal" density="compact" class="mb-4" icon="mdi-office-building-marker-outline">
+      <div class="d-flex flex-wrap align-center ga-2">
+        <span>You are viewing <strong>{{ currentSiteName }}</strong>'s inventory.</span>
+        <v-spacer />
+        <v-menu>
+          <template #activator="{ props: menu }">
+            <v-btn v-bind="menu" size="small" variant="outlined" class="text-none" append-icon="mdi-chevron-down">Switch property</v-btn>
+          </template>
+          <v-list density="compact" max-height="320">
+            <v-list-item v-for="s in mySites" :key="s._id" :title="s.name" :active="s._id === siteId" @click="switchSite(s._id)" />
+          </v-list>
+        </v-menu>
+      </div>
+    </v-alert>
+
     <v-progress-linear v-if="loading" indeterminate color="primary" class="mb-4" />
 
     <AppCard v-else-if="loadError" class="pa-6">
@@ -99,6 +115,12 @@
           <v-btn size="small" variant="flat" color="warning" class="text-none" @click="tab = 'requests'">Review requests</v-btn>
         </div>
       </v-alert>
+      <v-alert v-if="toConfirm > 0 && tab !== 'mine'" type="warning" variant="tonal" density="compact" class="mb-4" icon="mdi-package-variant-closed-check">
+        <div class="d-flex align-center flex-wrap ga-2">
+          <span>{{ toConfirm === 1 ? "1 delivery is" : `${toConfirm} deliveries are` }} waiting for you to tap Received. You can use the items after that.</span>
+          <v-btn size="small" variant="flat" color="warning" class="text-none" @click="tab = 'mine'">Open My Stock</v-btn>
+        </div>
+      </v-alert>
       <v-tabs v-model="tab" color="primary" class="mb-4" show-arrows>
         <v-tab v-for="t in tabs" :key="t.value" :value="t.value" class="text-none">
           {{ t.label }}
@@ -114,7 +136,7 @@
           <InventoryMyStockTab :store="store" :site-id="siteId" :sites="storeSites" @changed="refreshCounts" />
         </v-window-item>
         <v-window-item v-if="ctl.tabs.requests" value="requests">
-          <InventoryRequestsTab :store="store" :site-id="siteId" @changed="refreshCounts" />
+          <InventoryRequestsTab :store="store" :site-id="siteId" :focus-request="focusRequest" @changed="refreshCounts" />
         </v-window-item>
         <v-window-item v-if="ctl.tabs.people" value="technicians">
           <InventoryTechniciansTab :store="store" @changed="refreshCounts" />
@@ -139,9 +161,12 @@
 import useInventory from "../composables/useInventory";
 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 { inventoryControls } from "../utils/inventory-presets";
+import { inventoryStepsLive } from "../utils/inventory-ack";
+import useLocalAuth from "../composables/useLocalAuth";
 
 const props = defineProps({
   orgId: { type: String, required: true },
@@ -152,8 +177,10 @@ const movedFromEquipment = useRoute().query.moved === "equipment";
 // A notification link (`?storeId=&tab=`, NotificationBell): open that store on that tab, once.
 const linkQuery = useRoute().query;
 const linked = { storeId: String(linkQuery.storeId ?? ""), tab: String(linkQuery.tab ?? "") };
+// `?requestId=` (approved / confirm-received alerts): the Requests tab opens on that request.
+const focusRequest = String(linkQuery.requestId ?? "");
 
-const { getStores, createStore: apiCreateStore, getRequests, getReport } = useInventory();
+const { getHandovers, getStores, getStore, createStore: apiCreateStore, getRequests, getReport } = useInventory();
 const { getSites } = useSite();
 const { requiredRule } = useUtils();
 
@@ -217,7 +244,7 @@ const tabs = computed(() => {
     // Hide, never grey: each tab only for the job that uses it (API-core decides `access`).
     ...(ctl.value.tabs.mine ? [{ value: "mine", label: "My Stock" }] : []),
     ...(ctl.value.tabs.requests ? [{ value: "requests", label: a.canApprove ? "Requests" : "My Requests", badge: a.canApprove ? pendingCount.value : 0 }] : []),
-    ...(ctl.value.tabs.people ? [{ value: "technicians", label: worker.many }] : []),
+    ...(ctl.value.tabs.people ? [{ value: "technicians", label: worker.many, badge: returnsWaiting.value }] : []),
     ...(ctl.value.tabs.reports ? [{ value: "reports", label: a.canReports ? "Reports" : "Usage check" }] : []),
     ...(!ctl.value.tabs.reports && companyUsage.value ? [{ value: "reports", label: "Company usage" }] : []),
     ...(ctl.value.tabs.suppliers ? [{ value: "suppliers", label: "Suppliers" }] : []),
@@ -244,6 +271,7 @@ async function loadStores() {
     loading.value = false;
   }
   refreshCounts();
+  loadStoreDetail();
 }
 
 /**
@@ -265,7 +293,38 @@ async function probeCompanyUsage() {
   }
 }
 
+/** Stock issued to me that I have not confirmed yet (only where the API has the Received step). */
+const toConfirm = ref(0);
+const { currentUser } = useLocalAuth();
+async function refreshToConfirm() {
+  const s = store.value;
+  toConfirm.value = 0;
+  if (!s || !ctl.value.tabs.mine || !inventoryStepsLive(s)) return;
+  try {
+    const me = String(currentUser.value?._id ?? "");
+    const res = await getRequests(s._id, { status: "issued", limit: 100 });
+    toConfirm.value = res.items.filter((r) => String(r.requestedBy) === me && (r.ackStatus === "awaiting" || r.ackStatus === "not_received")).length;
+  } catch {
+    toConfirm.value = 0;
+  }
+}
+
+/** Returns started by holders, waiting for a store keeper (badge on the staff tab). */
+const returnsWaiting = ref(0);
+async function refreshReturns() {
+  const s = store.value;
+  returnsWaiting.value = 0;
+  if (!s || !ctl.value.takeReturn || !inventoryStepsLive(s)) return;
+  try {
+    returnsWaiting.value = (await getHandovers(s._id, { status: "pending", limit: 1 }))?.returnsWaiting ?? 0;
+  } catch {
+    returnsWaiting.value = 0;
+  }
+}
+
 async function refreshCounts() {
+  refreshToConfirm();
+  refreshReturns();
   if (!store.value?.access.canApprove) return (pendingCount.value = 0);
   try {
     pendingCount.value = (await getRequests(store.value._id, { status: "pending", limit: 1 }))?.pendingCount ?? 0;
@@ -274,6 +333,43 @@ 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 }[]>([]);
+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 {
+    const res = await getCustomerSites({ org: props.orgId, limit: 100 });
+    const seen = new Set<string>();
+    mySites.value = (res?.items ?? [])
+      .map((i: any) => ({ _id: String(i.site ?? ""), name: String(i.name ?? "") }))
+      .filter((s: { _id: string }) => s._id && !seen.has(s._id) && seen.add(s._id));
+  } catch {
+    mySites.value = [];
+  }
+}
+const route = useRoute();
+function switchSite(site: string) {
+  if (site === props.siteId) return;
+  navigateTo({ name: route.name as string, params: { ...route.params, site } });
+}
+
+/** The store's own settings (the reminder interval also tells the screens the new steps exist on the server). */
+async function loadStoreDetail() {
+  const s = store.value;
+  if (!s) return;
+  try {
+    const full = await getStore(s._id);
+    if (typeof full?.lowStockReminderDays === "number") {
+      s.lowStockReminderDays = full.lowStockReminderDays;
+      refreshToConfirm();
+      refreshReturns();
+    }
+  } catch {
+    /* the list's copy is enough to work with */
+  }
+}
+
 async function loadOrgSites() {
   try {
     const res = await getSites({ orgId: props.orgId, limit: 100 });
@@ -307,11 +403,13 @@ watch(storeId, () => {
   tab.value = wanted && tabs.value.some((t) => t.value === wanted) ? wanted : "stock";
   refreshCounts();
   probeCompanyUsage();
+  loadStoreDetail();
 });
 watch(() => props.siteId, loadStores);
 
 onMounted(() => {
   loadStores();
   loadOrgSites();
+  loadMySites();
 });
 </script>

package/components/InventoryMyStockTab.vue

@@ -6,6 +6,21 @@
       <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</v-btn>
     </div>
 
+    <!-- Issued to me, waiting for me to tap Received (owner 2026-10-03). Reminded daily until I do. -->
+    <AppCard
+      v-for="r in toReceive"
+      :key="r._id"
+      class="pa-4 mb-3 d-flex flex-wrap align-center ga-3"
+      :style="{ borderLeft: `4px solid rgb(var(--v-theme-${r.ackStatus === 'not_received' ? 'error' : 'warning'}))` }"
+    >
+      <v-icon :icon="r.ackStatus === 'not_received' ? 'mdi-package-variant-remove' : 'mdi-package-variant-closed-check'" :color="r.ackStatus === 'not_received' ? 'error' : 'warning'" />
+      <div class="flex-grow-1" style="min-width: 220px">
+        <div class="font-weight-medium">{{ receiveTitle(r) }}</div>
+        <div class="text-body-2">{{ ackText(r, true) }}</div>
+      </div>
+      <InventoryReceiptActions :request="r" @done="changed" />
+    </AppCard>
+
     <!-- Give to colleague: what waits for me to confirm, and what I gave that waits for them. -->
     <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" />
@@ -18,7 +33,9 @@
     </AppCard>
     <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">Waiting for {{ h.toName }} to confirm {{ h.qty }} {{ h.unit }} {{ h.itemName }}.</div>
+      <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}.` }}
+      </div>
       <v-btn class="text-none" variant="text" size="small" :loading="acting === h._id + 'c'" @click="cancelHandover(h)">Cancel</v-btn>
     </AppCard>
 
@@ -35,12 +52,26 @@
         <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="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>
         </div>
         <v-btn class="text-none screen-btn-primary" variant="flat" size="small" @click="continueDraft(d)">{{ d.photos?.after?.length ? "Review and submit" : "Add after photo" }}</v-btn>
       </AppCard>
     </template>
 
+    <!-- Colleagues' open drafts (same company): any technician can take one over and finish it from their own stock. -->
+    <template v-if="colleagueDrafts.length">
+      <div class="text-subtitle-2 mb-2">Colleagues' jobs in progress ({{ colleagueDrafts.length }})</div>
+      <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="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>
+      </AppCard>
+    </template>
+
     <v-progress-linear v-if="loading" indeterminate color="primary" />
     <AppCard v-else-if="!holdings.length" class="pa-6 text-center">
       <div class="text-body-1 mb-1">You are not holding any stock.</div>
@@ -58,10 +89,13 @@
             <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 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>
           <div class="d-flex flex-column ga-1">
             <v-btn v-if="(h.free ?? h.qty) > 0 && ctl.recordUsage" class="text-none screen-btn-primary" variant="flat" size="small" @click="use(h)">Record usage</v-btn>
             <v-btn v-if="h.qty > 0" class="text-none screen-btn-ghost" variant="outlined" size="small" @click="openGive(h)">Give to colleague</v-btn>
+            <v-btn v-if="stepsLive && freeOf(h) > 0" class="text-none screen-btn-ghost" variant="outlined" size="small" @click="openReturn(h)">Return to store</v-btn>
+            <v-btn v-if="stepsLive && ctl.recordUsage && freeOf(h) > 0" class="text-none" variant="text" size="small" prepend-icon="mdi-delete-alert-outline" @click="openWriteOff(h)">Write off</v-btn>
             <v-btn class="text-none" variant="text" size="small" prepend-icon="mdi-history" @click="openHistory(h)">History</v-btn>
           </div>
         </AppCard>
@@ -151,6 +185,45 @@
         </div>
       </v-card>
     </v-dialog>
+    <v-dialog v-model="ret.show" max-width="480" persistent>
+      <v-card v-if="ret.holding" class="screen-modal">
+        <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.
+          </p>
+          <v-form ref="retForm">
+            <InputLabel title="Quantity" required class="mb-1" />
+            <v-text-field
+              v-model.number="ret.qty"
+              type="number"
+              min="1"
+              density="comfortable"
+              :suffix="ret.holding.unit"
+              style="max-width: 200px"
+              :rules="[retQtyRule]"
+            />
+            <InputLabel title="Note (optional)" class="mb-1" />
+            <v-text-field v-model="ret.note" density="comfortable" maxlength="500" placeholder="e.g. job cancelled, not needed" />
+          </v-form>
+        </v-card-text>
+        <div class="screen-modal__footer">
+          <v-btn class="screen-btn-ghost" variant="outlined" :disabled="ret.saving" @click="ret.show = false">Cancel</v-btn>
+          <v-btn class="screen-btn-primary" variant="flat" :loading="ret.saving" @click="submitReturn">Ask to return</v-btn>
+        </div>
+      </v-card>
+    </v-dialog>
+    <InventoryWriteOffDialog
+      v-model="wo.show"
+      :store="store"
+      from="holding"
+      :item="String(wo.holding?.item ?? '')"
+      :item-name="wo.holding?.itemName ?? ''"
+      :unit="wo.holding?.unit ?? ''"
+      :max="wo.holding ? freeOf(wo.holding) : 0"
+      :site-id="siteId"
+      @done="changed"
+    />
     <InventoryLinesDialog v-model="showRequest" mode="request" :store="store" :site-id="siteId" @done="changed" />
   </div>
 </template>
@@ -161,7 +234,8 @@ import useFile from "../composables/useFile";
 import useUtils from "../composables/useUtils";
 import useLocalAuth from "../composables/useLocalAuth";
 import { inventoryControls } from "../utils/inventory-presets";
-import { draftCardText } from "../utils/inventory-usage";
+import { colleagueDraftText, draftCardText } from "../utils/inventory-usage";
+import { ackText, inventoryStepsLive } from "../utils/inventory-ack";
 
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },
@@ -185,6 +259,56 @@ const usage = reactive({ show: false, holding: null as TInventoryHolding | null,
 const drafts = ref<TInventoryUsageDraft[]>([]);
 const staleDays = ref(3);
 const history = reactive({ show: false, item: "", title: "", usageOnly: false });
+const stepsLive = computed(() => inventoryStepsLive(props.store));
+
+/** Free to use, give, return or write off: not in drafts, not waiting for Received (the API's `free`), not already being given. */
+const freeOf = (h: TInventoryHolding) => Math.max(0, (h.free ?? h.qty) - pendingOf(String(h.item)));
+
+// 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)}` : ""}`;
+async function loadToReceive() {
+  if (!stepsLive.value) return (toReceive.value = []);
+  try {
+    const res = await api.getRequests(props.store._id, { status: "issued", limit: 100 });
+    toReceive.value = res.items.filter((r) => String(r.requestedBy) === me.value && (r.ackStatus === "awaiting" || r.ackStatus === "not_received"));
+  } catch {
+    toReceive.value = [];
+  }
+}
+
+const retForm = ref();
+const ret = reactive({ show: false, holding: null as TInventoryHolding | null, qty: 1 as number | null, note: "", saving: false });
+const retQtyRule = (v: any) => {
+  if (!Number.isInteger(Number(v)) || Number(v) < 1) return "Enter a whole number";
+  const max = ret.holding ? freeOf(ret.holding) : 0;
+  return Number(v) <= max || `You can return up to ${max}`;
+};
+function openReturn(h: TInventoryHolding) {
+  Object.assign(ret, { show: true, holding: h, qty: freeOf(h), note: "", saving: false });
+}
+async function submitReturn() {
+  const { valid } = await retForm.value.validate();
+  if (!valid || !ret.holding) return;
+  ret.saving = true;
+  try {
+    const site = props.store.sites.includes(props.siteId) ? props.siteId : props.store.sites[0];
+    await api.requestReturn(props.store._id, { site, item: String(ret.holding.item), qty: Number(ret.qty), note: ret.note });
+    notify("Return requested. Bring the items to the store keeper; they leave your stock once the keeper accepts them.");
+    ret.show = false;
+    changed();
+  } catch (error: any) {
+    notify(error?.data?.message || "Could not request the return.", "error");
+  } finally {
+    ret.saving = false;
+  }
+}
+
+const wo = reactive({ show: false, holding: null as TInventoryHolding | null });
+function openWriteOff(h: TInventoryHolding) {
+  Object.assign(wo, { show: true, holding: h });
+}
 
 function openHistory(h: TInventoryHolding) {
   Object.assign(history, { show: true, item: String(h.item), title: `History — ${h.itemName}`, usageOnly: false });
@@ -209,6 +333,31 @@ async function loadDrafts() {
     drafts.value = [];
   }
 }
+const colleagueDrafts = ref<TInventoryUsageDraft[]>([]);
+async function loadColleagueDrafts() {
+  // stepsLive = the API knows ?colleagues (an older API ignores it and returns my own, hence the mine/holder filter too).
+  if (!ctl.value.recordUsage || !stepsLive.value) return (colleagueDrafts.value = []);
+  try {
+    const res = await api.getUsageDrafts(props.store._id, "colleagues");
+    colleagueDrafts.value = res.items.filter((d) => !d.mine && String(d.holder) !== me.value);
+  } catch {
+    colleagueDrafts.value = []; // 403/404: not offered, nothing to show
+  }
+}
+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;
+  acting.value = d._id + "t";
+  try {
+    await api.takeOverDraft(String(d._id));
+    notify("The job is yours now. Finish it under My drafts.");
+    changed();
+  } catch (error: any) {
+    notify(error?.data?.message || "Could not take over the job.", "error");
+  } finally {
+    acting.value = "";
+  }
+}
 const notify = inject<(text: string, color?: string) => void>("inventoryNotify", () => {});
 
 const handovers = ref<TInventoryHandover[]>([]);
@@ -264,7 +413,7 @@ const give = reactive({ show: false, holding: null as TInventoryHolding | null,
 const pendingOf = (item: string) => waiting.value.filter((h) => String(h.item) === item).reduce((s, h) => s + h.qty, 0);
 const giveQtyRule = (v: number | null) => {
   if (!v || v < 1 || !Number.isInteger(Number(v))) return "Enter a whole number";
-  const free = (give.holding?.qty ?? 0) - pendingOf(String(give.holding?.item ?? ""));
+  const free = give.holding ? freeOf(give.holding) : 0;
   return Number(v) <= free || `You can give up to ${Math.max(0, free)}`;
 };
 const colleagues = ref<{ _id: string; name: string; label?: string }[]>([]);
@@ -325,9 +474,12 @@ function changed() {
   load();
   loadHandovers();
   loadDrafts();
+  loadColleagueDrafts();
+  loadToReceive();
   emit("changed");
 }
 
-watch(() => props.store._id, () => (load(), loadHandovers(), loadDrafts()));
-onMounted(() => (load(), loadHandovers(), loadDrafts()));
+watch(() => props.store._id, () => (load(), loadHandovers(), loadDrafts(), loadColleagueDrafts(), loadToReceive()));
+watch(stepsLive, () => (loadToReceive(), loadColleagueDrafts()));
+onMounted(() => (load(), loadHandovers(), loadDrafts(), loadColleagueDrafts(), loadToReceive()));
 </script>

package/components/InventoryReceiptActions.vue

@@ -0,0 +1,66 @@
+<template>
+  <!-- The person the stock was issued to confirms it reached them (owner 2026-10-03). -->
+  <div class="d-flex flex-wrap ga-2">
+    <v-btn v-if="request.ackStatus === 'awaiting'" class="text-none screen-btn-ghost" variant="outlined" size="small" :disabled="!!busy" @click="openNotReceived">Not received</v-btn>
+    <v-btn class="text-none screen-btn-primary" variant="flat" size="small" :loading="busy === 'received'" :disabled="!!busy" @click="received">Received</v-btn>
+
+    <v-dialog v-model="nr.show" max-width="480">
+      <v-card class="screen-modal">
+        <v-card-title>Not received</v-card-title>
+        <v-card-text class="screen-modal__body">
+          <p class="text-body-2 mb-3">Tell the store keeper what happened. They are told at once and will follow up with you.</p>
+          <v-textarea v-model="nr.reason" rows="2" auto-grow density="comfortable" maxlength="500" placeholder="e.g. nobody handed it to me, only 2 of the 5 were in the bag" />
+        </v-card-text>
+        <div class="screen-modal__footer">
+          <v-btn class="screen-btn-ghost" variant="outlined" :disabled="busy === 'not'" @click="nr.show = false">Cancel</v-btn>
+          <v-btn class="screen-btn-primary" variant="flat" :loading="busy === 'not'" :disabled="!nr.reason.trim()" @click="notReceived">Send to store keeper</v-btn>
+        </div>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useInventory from "../composables/useInventory";
+
+const props = defineProps({ request: { type: Object as PropType<TInventoryRequest>, required: true } });
+const emit = defineEmits(["done"]);
+
+const api = useInventory();
+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(", ");
+
+function openNotReceived() {
+  Object.assign(nr, { show: true, reason: "" });
+}
+
+async function received() {
+  busy.value = "received";
+  try {
+    await api.acknowledgeRequest(props.request._id);
+    notify(`Thank you. ${items()} ${props.request.lines.length === 1 ? "is" : "are"} now in My Stock, ready to use.`);
+    emit("done");
+  } catch (error: any) {
+    notify(error?.data?.message || "Could not save. Please try again.", "error");
+  } finally {
+    busy.value = "";
+  }
+}
+
+async function notReceived() {
+  busy.value = "not";
+  try {
+    await api.notReceived(props.request._id, nr.reason.trim());
+    notify("Sent. The store keeper will check and follow up with you.");
+    nr.show = false;
+    emit("done");
+  } catch (error: any) {
+    notify(error?.data?.message || "Could not send. Please try again.", "error");
+  } finally {
+    busy.value = "";
+  }
+}
+</script>