@7365admin1/layer-common 4.94.0 → 4.96.0

package/components/InventoryMyStockTab.vue

@@ -6,11 +6,26 @@
       <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" />
       <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>
@@ -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 ${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>
 
@@ -33,14 +50,29 @@
       >
         <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>
         </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="colleagueDraftsOffered">
+      <div class="text-subtitle-2 mb-2">Colleagues' jobs in progress ({{ colleagueDrafts.length }})</div>
+      <div v-if="!colleagueDrafts.length" class="text-body-2 text-medium-emphasis mb-3">No unfinished jobs from your colleagues right now.</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 }} × {{ 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>
+      </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>
@@ -56,12 +88,15 @@
           </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>
           <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="freeOf(h) > 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>
@@ -112,9 +147,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 }}: {{ holdText(give.holding) }}. 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"
@@ -125,6 +160,7 @@
               placeholder="Search a name"
               density="comfortable"
               no-filter
+              no-data-text="No colleague from your company works at this property."
               :rules="[(v: string) => !!v || 'Choose who you are giving it to']"
               @update:search="searchColleagues"
             />
@@ -151,6 +187,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 {{ 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" validate-on="blur invalid-input">
+            <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 +236,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, holdText, inventoryStepsLive, qtyUnit } from "../utils/inventory-ack";
 
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },
@@ -185,6 +261,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) => `${qtyUnit(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 +335,32 @@ async function loadDrafts() {
     drafts.value = [];
   }
 }
+const colleagueDrafts = ref<TInventoryUsageDraft[]>([]);
+const colleagueDraftsOffered = computed(() => ctl.value.recordUsage && stepsLive.value);
+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 (${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));
+    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[]>([]);
@@ -237,7 +389,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");
@@ -264,7 +416,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 +477,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/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

@@ -0,0 +1,67 @@
+<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 { qtyUnit } from "../utils/inventory-ack";
+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) => `${qtyUnit(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>

package/components/InventoryReportsTab.vue

@@ -7,6 +7,7 @@
         <v-btn v-if="ctl.fullReports" value="technicians" class="text-none">{{ worker.many }}</v-btn>
         <v-btn v-if="ctl.fullReports" value="purchases" class="text-none">Purchases</v-btn>
         <v-btn v-if="ctl.fullReports || ctl.review" value="handovers" class="text-none">Hand-overs</v-btn>
+        <v-btn v-if="stepsLive && (ctl.fullReports || ctl.review)" value="reconciliation" class="text-none">Reconciliation</v-btn>
       </v-btn-toggle>
       <v-select
         v-if="report === 'purchases'"
@@ -21,7 +22,7 @@
       />
       <v-text-field v-model="month" type="month" :label="report === 'purchases' && span === 'year' ? 'Up to month' : 'Month'" density="compact" hide-details style="max-width: 180px" />
       <v-select
-        v-if="(report === 'usage' || report === 'movement') && sites.length > 1"
+        v-if="(report === 'usage' || report === 'movement' || report === 'reconciliation') && sites.length > 1"
         v-model="site"
         :items="[{ _id: '', name: 'All properties' }, ...sites]"
         item-title="name"
@@ -60,6 +61,7 @@
         hide-details
         style="max-width: 260px"
       />
+      <v-text-field v-if="report === 'reconciliation'" v-model="itemText" label="Item" prepend-inner-icon="mdi-magnify" density="compact" hide-details clearable style="max-width: 220px" />
       <v-checkbox v-if="report === 'usage' && canCheck" v-model="uncheckedOnly" label="Not checked yet" density="compact" hide-details class="flex-grow-0" />
       <v-spacer />
       <v-btn v-if="report === 'purchases'" class="text-none screen-btn-ghost" variant="outlined" prepend-icon="mdi-clipboard-search-outline" @click="openPo('')">
@@ -146,7 +148,35 @@
       </v-row>
     </template>
 
+    <!-- Reconciliation (client 2026-10-02): per item, where every unit went, and whether it tallies. -->
+    <template v-if="report === 'reconciliation'">
+      <v-progress-linear v-if="loading" indeterminate color="primary" />
+      <div v-else-if="!reconRows.length" class="text-center text-medium-emphasis py-10">Nothing moved in this period.</div>
+      <v-alert v-if="!loading && reconRows.length && !reconFull" type="info" variant="tonal" density="compact" class="mb-2">
+        You see your own company's people only. The store's owner sees the store's side too.
+      </v-alert>
+      <v-alert v-if="!loading && notTallying" type="error" variant="tonal" density="compact" class="mb-2">
+        {{ notTallying === 1 ? "1 item does not" : `${notTallying} items do not` }} tally. They are marked in red below.
+      </v-alert>
+      <AppCard v-for="r in reconRows" :key="String(r.item)" class="pa-4 mb-3" :style="r.check && !r.check.ok ? 'border-left: 4px solid rgb(var(--v-theme-error))' : ''">
+        <div class="d-flex flex-wrap align-center ga-2 mb-1">
+          <div class="font-weight-medium">{{ r.name }}</div>
+          <div class="text-caption text-medium-emphasis">{{ [r.code, r.unit].filter(Boolean).join(" · ") }}</div>
+          <v-spacer />
+          <v-chip v-if="r.check" size="small" variant="tonal" :color="r.check.ok ? 'success' : 'error'">{{ r.check.ok ? "Tallies" : "Does not tally" }}</v-chip>
+        </div>
+        <div v-if="r.store" class="text-body-2 mb-1">
+          <strong>Store:</strong> {{ reconStoreText(r) }}
+        </div>
+        <div v-for="p in r.people" :key="String(p.holder)" class="text-body-2">
+          <strong>{{ p.holderLabel || p.name }}:</strong> {{ reconciliationPersonText(p, r.unit) }}
+        </div>
+        <div v-if="r.check" class="text-caption mt-1" :class="r.check.ok ? 'text-medium-emphasis' : 'text-error'">{{ reconciliationCheckText(r.check) }}</div>
+      </AppCard>
+    </template>
+
     <v-data-table
+      v-else
       v-model="selected"
       :headers="tableHeaders"
       :items="shownRows"
@@ -190,6 +220,9 @@
       </template>
       <template #item.state="{ item }">
         <v-chip size="x-small" variant="tonal" :color="item.status === 'draft' ? 'info' : 'success'">{{ item.status === "draft" ? "In progress" : "Submitted" }}</v-chip>
+        <div v-if="item.status === 'draft' && stepsLive && ctl.recordUsage && String(item.holder) !== me" class="mt-1">
+          <v-btn size="x-small" variant="outlined" class="text-none" :loading="takingOver === item._id" @click="takeOver(item)">Take over</v-btn>
+        </div>
         <div v-for="f in item.flags ?? []" :key="f" class="mt-1">
           <v-chip size="x-small" variant="tonal" color="warning">{{ flagWords[f] ?? f }}</v-chip>
         </div>
@@ -227,10 +260,12 @@
 import useInventory, { saveBlob } from "../composables/useInventory";
 import useWorkerTerm, { workerAppKey } from "../composables/useWorkerTerm";
 import useUtils from "../composables/useUtils";
+import useLocalAuth from "../composables/useLocalAuth";
 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, qtyUnit, reconciliationCheckText, reconciliationPersonText, writeOffReasonText } from "../utils/inventory-ack";
 
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },
@@ -248,7 +283,8 @@ const appSlug = workerAppKey();
 const now = new Date();
 const month = ref(`${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`);
 // An approver without `view-reports` gets only the usage check screen.
-const report = ref<"movement" | "usage" | "technicians" | "purchases" | "handovers">(ctl.value.fullReports ? "movement" : "usage");
+const stepsLive = computed(() => inventoryStepsLive(props.store));
+const report = ref<"movement" | "usage" | "technicians" | "purchases" | "handovers" | "reconciliation">(ctl.value.fullReports ? "movement" : "usage");
 const span = ref<"month" | "year">("year");
 const site = ref("");
 const locationType = ref("");
@@ -297,8 +333,35 @@ const help: Record<string, string> = {
   technicians: "For each person: stock they held at the start, took, used, returned, and hold at the end of the month.",
   purchases: "Every delivery received — by PO, DO or cash — and opening stock entered with new items, with totals by month and by supplier. Click a PO number (or Check a PO) to see ordered against received.",
   handovers: "Stock passed from one person to a colleague: who gave it, who received it, and whether they confirmed.",
+  reconciliation:
+    "For each item: what came in (PO, DO, cash, opening stock), what the store issued, and for each person what they took, used (and where), wrote off, gave to colleagues, returned and still hold. Every item should tally; anything that does not is marked red.",
 };
 
+// Reconciliation rows, narrowed by the Item box.
+const itemText = ref("");
+const reconFull = ref(true);
+const reconRows = computed(() => {
+  if (report.value !== "reconciliation") return [];
+  const q = (itemText.value || "").trim().toLowerCase();
+  return rows.value.filter((r) => !q || String(r.name ?? "").toLowerCase().includes(q) || String(r.code ?? "").toLowerCase().includes(q));
+});
+const notTallying = computed(() => reconRows.value.filter((r) => r.check && !r.check.ok).length);
+function reconStoreText(r: any) {
+  const s = r.store;
+  const got = [s.received.po && `${s.received.po} by PO`, s.received.do && `${s.received.do} by DO`, s.received.cash && `${s.received.cash} by cash`, s.received.opening && `${s.received.opening} opening stock`].filter(Boolean).join(", ");
+  return [
+    `start ${s.opening}`,
+    `received ${s.received.total}${got ? ` (${got})` : ""}`,
+    `issued ${s.issued}`,
+    s.returned ? `returned ${s.returned}` : "",
+    s.adjusted ? `stock count ${s.adjusted > 0 ? "+" : ""}${s.adjusted}` : "",
+    s.writtenOff ? `written off from the shelf ${s.writtenOff}` : "",
+    `end ${qtyUnit(s.closing, r.unit)}`,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+}
+
 const handoverStatus: Record<string, string> = { pending: "Waiting to confirm", accepted: "Confirmed", declined: "Declined", cancelled: "Cancelled" };
 
 // "Company · Service" of the person on each row, for the filter (usage, staff and hand-over reports).
@@ -359,6 +422,7 @@ const headers: Record<string, any[]> = {
     { title: "End", key: "closing" },
     { title: "Used", key: "usedByTechnicians" },
     { title: "Usage cost", key: "usedCost" },
+    { title: "Written off", key: "writtenOffAll" },
   ],
   usage: [
     { title: "Date", key: "date" },
@@ -392,6 +456,7 @@ const headers: Record<string, any[]> = {
     { title: "Used", key: "used" },
     { title: "Returned", key: "returned" },
     { title: "To colleagues", key: "gaveToColleagues" },
+    { title: "Written off", key: "writtenOffText" },
     { title: "Holding at end", key: "closing" },
     { title: "In hand now", key: "inHandNow" },
   ],
@@ -424,15 +489,17 @@ const headers: Record<string, any[]> = {
 };
 
 const siteName = computed(() => (site.value ? props.sites.find((s) => s._id === site.value)?.name ?? "" : ""));
+// The "Written off" columns only from an API that records write-offs.
+const baseHeaders = (key: string) => (stepsLive.value ? headers[key] : (headers[key] ?? []).filter((h) => h.key !== "writtenOffAll" && h.key !== "writtenOffText"));
 const tableHeaders = computed(() =>
   report.value === "movement" && siteName.value
     ? [
-        ...headers.movement,
+        ...baseHeaders("movement"),
         { title: `Issued for ${siteName.value}`, key: "siteIssued" },
         { title: `Used at ${siteName.value}`, key: "siteUsed" },
         { title: `Usage cost at ${siteName.value}`, key: "siteUsedCost" },
       ]
-    : headers[report.value],
+    : baseHeaders(report.value),
 );
 
 function period(): TInventoryPeriod & { unchecked?: boolean } {
@@ -442,7 +509,7 @@ function period(): TInventoryPeriod & { unchecked?: boolean } {
   return {
     from: from.toISOString(),
     to: to.toISOString(),
-    ...((report.value === "usage" || report.value === "movement") && site.value ? { site: site.value } : {}),
+    ...((report.value === "usage" || report.value === "movement" || report.value === "reconciliation") && site.value ? { site: site.value } : {}),
     ...(report.value === "usage" && locationType.value ? { locationType: locationType.value } : {}),
     ...(report.value === "usage" && uncheckedOnly.value ? { unchecked: true } : {}),
     ...(usedBy.value ? { usedBy: usedBy.value } : {}),
@@ -473,7 +540,13 @@ async function load() {
   selected.value = [];
   try {
     const res: any = await api.getReport(props.store._id, report.value, period());
-    rows.value = res.rows;
+    // Written off: the store shelf plus people's own stock (movement); "5 used up, 2 spoilt" (staff).
+    rows.value = (res.rows ?? []).map((r: any) => ({
+      ...r,
+      ...(r.writtenOff !== undefined || r.writtenOffByTechnicians !== undefined ? { writtenOffAll: (r.writtenOff ?? 0) + (r.writtenOffByTechnicians ?? 0) } : {}),
+      ...(report.value === "technicians" ? { writtenOffText: writeOffReasonText(r.writtenOffByReason) || (r.writtenOff ? String(r.writtenOff) : "") } : {}),
+    }));
+    reconFull.value = res.full !== false;
     totals.qty = res.totalQty ?? 0;
     totals.cost = res.totalCost ?? 0;
     scope.value = res.scope ?? "all";
@@ -488,6 +561,24 @@ async function load() {
   }
 }
 
+// Shift hand-over (client 2026-10-02): a colleague finishes a draft someone else started, from their own stock.
+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 ${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));
+    notify("The draft is yours now. Finish it from My Stock > My drafts.");
+    await load();
+  } catch (error: any) {
+    notify(error?.data?.message || "Could not take over the draft.", "error");
+  } finally {
+    takingOver.value = "";
+  }
+}
+
 async function setChecked(checked: boolean) {
   if (!selected.value.length) return;
   checking.value = checked ? "on" : "off";