@7365admin1/layer-common 4.72.0 → 4.73.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 4.73.0
+
+### Minor Changes
+
+- cd5501e: Inventory: usage drafts (save the before photo first, add the after photo and submit later; edit or discard with a confirm; My drafts cards with an old-draft warning; "in drafts / free" on holdings); History per item and "My usage" with date, item and place filters; Usage report as the store owner's usage tracking (status incl. in-progress drafts, person, item, place, work order, flags, search; totals by item / person / company; photo thumbnails with times; draft and submit times; how the stock reached the person; Excel with the same filters and photo links; click a person or an item for its full history); a provider's supervisor gets "Company usage" for its own people at the main store.
+
 ## 4.72.0
 
 ### Minor Changes
@@ -1879,11 +1885,11 @@
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                                                                                                                          GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                                                                                                                          GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                                                                                                                            GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                                                                                                                            GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                                                                                                                          owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                                                                                                                          staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                                                                                                                            owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                                                                                                                            staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/components/InventoryHistoryDialog.vue

@@ -0,0 +1,205 @@
+<template>
+  <v-dialog v-model="show" max-width="1100" scrollable>
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        {{ title }}
+        <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">{{ intro }}</p>
+
+        <!-- A supervisor opening a person: what they hold now, then everything that happened to their stock. -->
+        <template v-if="holder && holder !== 'me' && holder !== selfId && (store.access.canApprove || store.access.canHandle)">
+          <div class="text-subtitle-2 mb-1">Holding now</div>
+          <v-table density="compact" class="mb-4 border rounded">
+            <thead>
+              <tr>
+                <th>Item</th>
+                <th class="text-right">In hand</th>
+                <th class="text-right">In drafts</th>
+                <th class="text-right">Used this month</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="h in holdings" :key="h._id">
+                <td>{{ h.itemName }}</td>
+                <td class="text-right">{{ h.qty }} {{ h.unit }}</td>
+                <td class="text-right">{{ h.inDrafts || "—" }}</td>
+                <td class="text-right">{{ h.usedThisMonth ?? 0 }}</td>
+              </tr>
+              <tr v-if="!holdings.length">
+                <td colspan="4" class="text-center text-medium-emphasis py-3">Not holding any stock now.</td>
+              </tr>
+            </tbody>
+          </v-table>
+        </template>
+
+        <div class="d-flex flex-wrap ga-2 mb-2">
+          <v-text-field v-model="from" type="date" label="From" density="compact" hide-details style="max-width: 170px" />
+          <v-text-field v-model="to" type="date" label="To" density="compact" hide-details style="max-width: 170px" />
+          <v-select v-model="type" :items="typeChoices" label="What" density="compact" hide-details style="max-width: 200px" />
+          <v-select v-if="!item" v-model="itemPick" :items="[{ value: '', title: 'All items' }, ...itemChoices]" label="Item" density="compact" hide-details style="max-width: 240px" />
+          <v-text-field v-model="location" label="Where (unit, tenant or area)" density="compact" hide-details clearable style="max-width: 240px" />
+        </div>
+
+        <v-data-table-server
+          :headers="headers"
+          :items="rows"
+          :items-length="total"
+          :loading="loading"
+          :items-per-page="limit"
+          :page="page"
+          density="compact"
+          class="border rounded"
+          :no-data-text="emptyText"
+          @update:page="(p: number) => ((page = p), load())"
+        >
+          <template #item.date="{ value }">{{ standardFormatDateTime(value) }}</template>
+          <template #item.what="{ item }">{{ historyText(item) }}</template>
+          <template #item.person="{ item }">{{ item.holderLabel || item.holderName || "—" }}</template>
+          <template #item.qty="{ item }">{{ item.qty }} {{ item.unit }}</template>
+          <template #item.where="{ item }">{{ whereText(item.location) || (item.type === "handover" ? item.remarks : "") || "—" }}</template>
+          <template #item.reference="{ item }">{{ item.type === "handover" ? "—" : item.reference || "—" }}</template>
+          <template #item.photos="{ item }">
+            <InventoryPhotoThumbs :photos="item.photos" :before-at="item.photosBeforeAt" :after-at="item.photosAfterAt" />
+          </template>
+          <template #item.by="{ item }">{{ item.createdByLabel || item.createdByName }}</template>
+          <template #item.holderBalance="{ value }">{{ value ?? "—" }}</template>
+        </v-data-table-server>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import useInventory from "../composables/useInventory";
+import useUtils from "../composables/useUtils";
+import useLocalAuth from "../composables/useLocalAuth";
+import { historyText, whereText } from "../utils/inventory-usage";
+
+/**
+ * History of stock (owner 2026-09-29, "where they used their stock"): one person's (`holder`, "me" =
+ * the signed-in person), one item's (`item`: its whole chain across people), or both. Received from the
+ * store, hand-overs in and out, usage with where + work order + photos, and returns. Drafts are not history.
+ */
+const show = defineModel<boolean>({ default: false });
+const props = defineProps({
+  store: { type: Object as PropType<TInventoryStore>, required: true },
+  holder: { type: String, default: "" },
+  item: { type: String, default: "" },
+  title: { type: String, default: "History" },
+  /** Open on "Used" only (My usage). */
+  usageOnly: { type: Boolean, default: false },
+});
+
+const api = useInventory();
+const { standardFormatDateTime } = useUtils();
+const { currentUser } = useLocalAuth();
+const selfId = computed(() => String(currentUser.value?._id ?? ""));
+const rows = ref<TInventoryTransaction[]>([]);
+const holdings = ref<TInventoryHolding[]>([]);
+const total = ref(0);
+const page = ref(1);
+const limit = 50;
+const loading = ref(false);
+const from = ref("");
+const to = ref("");
+const type = ref("");
+const location = ref("");
+const itemPick = ref("");
+const itemChoices = ref<{ value: string; title: string }[]>([]);
+
+const typeChoices = [
+  { value: "", title: "Everything" },
+  { value: "use", title: "Used" },
+  { value: "issue", title: "Taken from store" },
+  { value: "handover", title: "Hand-overs" },
+  { value: "return", title: "Given back" },
+];
+
+const intro = computed(() =>
+  props.usageOnly
+    ? "Where the stock was used: date, place, work order and the before / after photos. Filter by date, item or place."
+    : props.item && !props.holder
+    ? "Every movement of this item: into the store, to each person, between colleagues, where it was used and what came back."
+    : "Everything that happened to this stock: taken from the store, hand-overs, where it was used (with the work order and photos) and returns.",
+);
+const emptyText = computed(() => (from.value || to.value || type.value || location.value || itemPick.value ? "Nothing matches these filters." : "Nothing recorded yet."));
+const headers = computed(() => [
+  { title: "Date", key: "date", sortable: false },
+  { title: "What happened", key: "what", sortable: false },
+  ...(props.item ? [] : [{ title: "Item", key: "itemName", sortable: false }]),
+  ...(props.holder ? [] : [{ title: "Person", key: "person", sortable: false }]),
+  { title: "Qty", key: "qty", sortable: false },
+  { title: "Where", key: "where", sortable: false },
+  { title: "Work order / ref", key: "reference", sortable: false },
+  { title: "Photos", key: "photos", sortable: false },
+  { title: "Recorded by", key: "by", sortable: false },
+  ...(props.holder ? [{ title: "In hand after", key: "holderBalance", sortable: false }] : []),
+]);
+
+async function load() {
+  loading.value = true;
+  try {
+    const res = await api.getTransactions(props.store._id, {
+      page: page.value,
+      limit,
+      ...(props.holder ? { holder: props.holder } : {}),
+      ...(props.item || itemPick.value ? { item: props.item || itemPick.value } : {}),
+      ...(type.value ? { type: type.value } : {}),
+      ...(location.value ? { location: location.value } : {}),
+      ...(from.value ? { from: new Date(`${from.value}T00:00:00`).toISOString() } : {}),
+      ...(to.value ? { to: new Date(`${to.value}T23:59:59.999`).toISOString() } : {}),
+    });
+    rows.value = res.items;
+    total.value = res.total;
+  } catch (error: any) {
+    rows.value = [];
+    total.value = 0;
+    notify(error?.data?.message || "Could not load the history.", "error");
+  } finally {
+    loading.value = false;
+  }
+}
+const notify = inject<(text: string, color?: string) => void>("inventoryNotify", () => {});
+
+async function loadHoldings() {
+  holdings.value = [];
+  // The API gives another person's holdings to the store's approvers / storekeepers only.
+  if (!props.holder || props.holder === "me" || props.holder === selfId.value || !(props.store.access.canApprove || props.store.access.canHandle)) return;
+  try {
+    holdings.value = await api.getHoldings(props.store._id, props.holder);
+  } catch {
+    holdings.value = [];
+  }
+}
+
+let resetting = false;
+watch([from, to, type, location, itemPick], () => {
+  if (resetting) return;
+  page.value = 1;
+  load();
+});
+watch(show, async (open) => {
+  if (!open) return;
+  resetting = true;
+  page.value = 1;
+  from.value = "";
+  to.value = "";
+  location.value = "";
+  itemPick.value = "";
+  type.value = props.usageOnly ? "use" : "";
+  await nextTick();
+  resetting = false;
+  load();
+  loadHoldings();
+  if (!props.item) {
+    try {
+      itemChoices.value = (await api.getItems(props.store._id, { limit: 200 })).items.map((i) => ({ value: i._id, title: i.name }));
+    } catch {
+      itemChoices.value = [];
+    }
+  }
+});
+</script>

package/components/InventoryMain.vue

@@ -119,7 +119,7 @@
         <v-window-item v-if="ctl.tabs.people" value="technicians">
           <InventoryTechniciansTab :store="store" @changed="refreshCounts" />
         </v-window-item>
-        <v-window-item v-if="ctl.tabs.reports" value="reports">
+        <v-window-item v-if="ctl.tabs.reports || companyUsage" value="reports">
           <InventoryReportsTab :store="store" :sites="storeSites" />
         </v-window-item>
         <v-window-item v-if="ctl.tabs.suppliers" value="suppliers">
@@ -150,7 +150,7 @@ const props = defineProps({
 
 const movedFromEquipment = useRoute().query.moved === "equipment";
 
-const { getStores, createStore: apiCreateStore, getRequests } = useInventory();
+const { getStores, createStore: apiCreateStore, getRequests, getReport } = useInventory();
 const { getSites } = useSite();
 const { requiredRule } = useUtils();
 
@@ -216,6 +216,7 @@ const tabs = computed(() => {
     ...(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.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" }] : []),
     ...(ctl.value.tabs.settings ? [{ value: "settings", label: "Settings" }] : []),
   ];
@@ -239,6 +240,25 @@ async function loadStores() {
   refreshCounts();
 }
 
+/**
+ * Another company's supervisor at the main store may track its OWN people's usage (the API answers the usage
+ * report for them, scoped). The store's access flags do not say so, so ask once per store.
+ * ponytail: one probe request per store switch; add a flag to the store's access if the API grows one.
+ */
+const companyUsage = ref(false);
+async function probeCompanyUsage() {
+  companyUsage.value = false;
+  const s = store.value;
+  if (!s || ctl.value.tabs.reports || !s.main || s.owner !== false) return;
+  const now = new Date().toISOString();
+  try {
+    await getReport(s._id, "usage", { from: now, to: now });
+    companyUsage.value = true;
+  } catch {
+    companyUsage.value = false;
+  }
+}
+
 async function refreshCounts() {
   if (!store.value?.access.canApprove) return (pendingCount.value = 0);
   try {
@@ -277,6 +297,7 @@ async function createStore() {
 watch(storeId, () => {
   tab.value = "stock";
   refreshCounts();
+  probeCompanyUsage();
 });
 watch(() => props.siteId, loadStores);
 

package/components/InventoryMyStockTab.vue

@@ -22,6 +22,25 @@
       <v-btn class="text-none" variant="text" size="small" :loading="acting === h._id + 'c'" @click="cancelHandover(h)">Cancel</v-btn>
     </AppCard>
 
+    <!-- Usage drafts: before photo saved, job not finished yet. Nothing is taken off the stock until submitted. -->
+    <template v-if="drafts.length">
+      <div class="text-subtitle-2 mb-2">My drafts — in progress ({{ drafts.length }})</div>
+      <AppCard
+        v-for="d in drafts"
+        :key="d._id"
+        class="pa-3 mb-2 d-flex flex-wrap align-center ga-3"
+        :style="{ borderLeft: `4px solid rgb(var(--v-theme-${d.stale ? 'error' : 'info'}))` }"
+      >
+        <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="text-body-2">{{ draftCardText(d, standardFormatDateTime, staleDays).line }}</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>
+
     <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>
@@ -38,16 +57,22 @@
           <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 v-if="h.inDrafts" class="text-caption text-medium-emphasis">{{ h.inDrafts }} in drafts · {{ h.free ?? 0 }} free to use</div>
           </div>
           <div class="d-flex flex-column ga-1">
-            <v-btn v-if="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.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 class="text-none" variant="text" size="small" prepend-icon="mdi-history" @click="openHistory(h)">History</v-btn>
           </div>
         </AppCard>
       </v-col>
     </v-row>
 
-    <div class="text-subtitle-2 mt-6 mb-2">My recent activity</div>
+    <div class="d-flex align-center mt-6 mb-2">
+      <div class="text-subtitle-2">My recent activity</div>
+      <v-spacer />
+      <v-btn class="text-none" variant="text" size="small" prepend-icon="mdi-map-marker-check-outline" @click="openMyUsage">My usage — where I used my stock</v-btn>
+    </div>
     <v-table density="compact">
       <thead>
         <tr>
@@ -76,7 +101,8 @@
       </tbody>
     </v-table>
 
-    <InventoryUsageDialog v-model="usage.show" :store="store" :site-id="siteId" :holding="usage.holding" :sites="sites" @done="changed" />
+    <InventoryUsageDialog v-model="usage.show" :store="store" :site-id="siteId" :holding="usage.holding" :draft="usage.draft" :sites="sites" @done="changed" />
+    <InventoryHistoryDialog v-model="history.show" :store="store" :holder="me" :item="history.item" :title="history.title" :usage-only="history.usageOnly" />
     <v-dialog v-model="give.show" max-width="520" persistent>
       <v-card class="screen-modal">
         <v-card-title class="d-flex align-center">
@@ -135,6 +161,7 @@ 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";
 
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },
@@ -147,14 +174,41 @@ const emit = defineEmits(["changed"]);
 const api = useInventory();
 const { typeLabels } = api;
 const { getFileUrl } = useFile();
-const { standardFormatDate } = useUtils();
+const { standardFormatDate, standardFormatDateTime } = useUtils();
 const { currentUser } = useLocalAuth();
 
 const holdings = ref<TInventoryHolding[]>([]);
 const activity = ref<TInventoryTransaction[]>([]);
 const loading = ref(false);
 const showRequest = ref(false);
-const usage = reactive({ show: false, holding: null as TInventoryHolding | null });
+const usage = reactive({ show: false, holding: null as TInventoryHolding | null, draft: null as TInventoryUsageDraft | null });
+const drafts = ref<TInventoryUsageDraft[]>([]);
+const staleDays = ref(3);
+const history = reactive({ show: false, item: "", title: "", usageOnly: false });
+
+function openHistory(h: TInventoryHolding) {
+  Object.assign(history, { show: true, item: String(h.item), title: `History — ${h.itemName}`, usageOnly: false });
+}
+function openMyUsage() {
+  Object.assign(history, { show: true, item: "", title: "My usage", usageOnly: true });
+}
+function continueDraft(d: TInventoryUsageDraft) {
+  // The draft's own item in hand (its qty is reserved there); a stand-in if the list has not loaded it.
+  const holding =
+    holdings.value.find((h) => String(h.item) === String(d.item)) ??
+    ({ _id: d._id, item: d.item, itemName: d.itemName, unit: d.unit, photo: "", holder: "", holderName: "", qty: d.qty, inDrafts: d.qty } as TInventoryHolding);
+  Object.assign(usage, { show: true, holding, draft: d });
+}
+async function loadDrafts() {
+  if (!ctl.value.recordUsage) return;
+  try {
+    const res = await api.getUsageDrafts(props.store._id);
+    drafts.value = res.items;
+    staleDays.value = res.staleAfterDays ?? 3;
+  } catch {
+    drafts.value = [];
+  }
+}
 const notify = inject<(text: string, color?: string) => void>("inventoryNotify", () => {});
 
 const handovers = ref<TInventoryHandover[]>([]);
@@ -264,15 +318,16 @@ async function load() {
 }
 
 function use(h: TInventoryHolding) {
-  Object.assign(usage, { show: true, holding: h });
+  Object.assign(usage, { show: true, holding: h, draft: null });
 }
 
 function changed() {
   load();
   loadHandovers();
+  loadDrafts();
   emit("changed");
 }
 
-watch(() => props.store._id, () => (load(), loadHandovers()));
-onMounted(() => (load(), loadHandovers()));
+watch(() => props.store._id, () => (load(), loadHandovers(), loadDrafts()));
+onMounted(() => (load(), loadHandovers(), loadDrafts()));
 </script>

package/components/InventoryPhotoThumbs.vue

@@ -0,0 +1,67 @@
+<template>
+  <div v-if="list.length" class="d-flex flex-wrap ga-1 py-1">
+    <button v-for="ph in list" :key="ph.id + ph.label" type="button" class="inventory-thumb" :title="ph.title" :aria-label="`Open ${ph.title}`" @click="open = ph">
+      <v-img :src="getFileUrl(ph.id)" :width="size" :height="size" cover class="rounded" :alt="ph.title" />
+      <span class="inventory-thumb__tag">{{ ph.label }}</span>
+    </button>
+  </div>
+  <span v-else class="text-medium-emphasis">—</span>
+  <v-dialog :model-value="!!open" max-width="820" @update:model-value="open = null">
+    <v-card v-if="open" class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        {{ open.title }}
+        <v-spacer />
+        <v-btn icon="mdi-close" variant="text" aria-label="Close" @click="open = null" />
+      </v-card-title>
+      <v-card-text>
+        <v-img :src="getFileUrl(open.id)" max-height="70vh" contain />
+        <div class="d-flex mt-2">
+          <a :href="getFileUrl(open.id)" target="_blank" rel="noopener" class="text-body-2">Open full size</a>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import useFile from "../composables/useFile";
+import useUtils from "../composables/useUtils";
+
+/** Before / after (and other) photos of a usage or hand-over: small thumbnails, click to enlarge with the time taken. */
+const props = defineProps({
+  photos: { type: Object as PropType<{ before?: string[]; after?: string[]; other?: string[] } | undefined>, default: undefined },
+  beforeAt: { type: String as PropType<string | null | undefined>, default: null },
+  afterAt: { type: String as PropType<string | null | undefined>, default: null },
+  size: { type: Number, default: 36 },
+});
+const { getFileUrl } = useFile();
+const { standardFormatDateTime } = useUtils();
+const open = ref<{ id: string; label: string; title: string } | null>(null);
+const at = (d?: string | null) => (d ? ` — taken ${standardFormatDateTime(d)}` : "");
+const list = computed(() => [
+  ...(props.photos?.before ?? []).map((id) => ({ id, label: "Before", title: `Before photo${at(props.beforeAt)}` })),
+  ...(props.photos?.after ?? []).map((id) => ({ id, label: "After", title: `After photo${at(props.afterAt)}` })),
+  ...(props.photos?.other ?? []).map((id) => ({ id, label: "Photo", title: "Photo" })),
+]);
+</script>
+
+<style scoped>
+.inventory-thumb {
+  position: relative;
+  border: 0;
+  padding: 0;
+  background: none;
+  cursor: zoom-in;
+}
+.inventory-thumb__tag {
+  position: absolute;
+  left: 2px;
+  bottom: 2px;
+  font-size: 9px;
+  line-height: 1;
+  padding: 1px 3px;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+}
+</style>

package/components/InventoryReportsTab.vue

@@ -6,7 +6,7 @@
         <v-btn value="usage" class="text-none">Usage</v-btn>
         <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 value="handovers" class="text-none">Hand-overs</v-btn>
+        <v-btn v-if="ctl.fullReports || ctl.review" value="handovers" class="text-none">Hand-overs</v-btn>
       </v-btn-toggle>
       <v-select
         v-if="report === 'purchases'"
@@ -60,21 +60,36 @@
         hide-details
         style="max-width: 260px"
       />
-      <v-checkbox v-if="report === 'usage'" v-model="uncheckedOnly" label="Not checked yet" density="compact" hide-details class="flex-grow-0" />
+      <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="ctl.fullReports" class="text-none screen-btn-ghost" variant="outlined" prepend-icon="mdi-file-excel-outline" :loading="exporting" @click="exportExcel">
+      <v-btn v-if="ctl.fullReports || report === 'usage'" class="text-none screen-btn-ghost" variant="outlined" prepend-icon="mdi-file-excel-outline" :loading="exporting" @click="exportExcel">
         Export Excel
       </v-btn>
     </div>
 
+    <!-- Usage tracking (owner 2026-09-29): who used what from this store, where, for which work order, with photos. -->
+    <div v-if="report === 'usage'" class="d-flex flex-wrap ga-2 align-center mb-3">
+      <v-select v-model="status" :items="USAGE_STATUS_CHOICES" label="Status" density="compact" hide-details style="max-width: 200px" />
+      <v-select v-model="person" :items="[{ value: '', title: 'Everyone' }, ...personChoices]" label="Person" density="compact" hide-details style="max-width: 280px" />
+      <v-select v-model="itemFilter" :items="[{ value: '', title: 'All items' }, ...itemChoices]" label="Item" density="compact" hide-details style="max-width: 220px" />
+      <v-text-field v-model="locationText" label="Where (unit, tenant or area)" density="compact" hide-details clearable style="max-width: 220px" />
+      <v-text-field v-model="referenceText" label="Work order / ref" density="compact" hide-details clearable style="max-width: 180px" />
+      <v-select v-model="flag" :items="flagChoices" label="Needs a look" density="compact" hide-details style="max-width: 220px" />
+      <v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" density="compact" hide-details clearable style="max-width: 220px" />
+    </div>
+    <v-alert v-if="report === 'usage' && scope === 'own_company'" type="info" variant="tonal" density="compact" class="mb-2">
+      You see your own company's people only. The store's owner sees everyone's.
+    </v-alert>
+
     <p class="text-caption text-medium-emphasis mb-2">{{ help[report] }}</p>
     <p v-if="report === 'movement' && siteName" class="text-caption text-medium-emphasis mb-2">
       Start, received and end are the whole store's (shared by {{ sites.map((s) => s.name).join(" and ") }}). The last columns show what was issued for {{ siteName }} and used there.
     </p>
 
-    <div v-if="report === 'usage' && rows.length" class="d-flex flex-wrap align-center ga-3 mb-2">
+    <div v-if="report === 'usage' && shownRows.length" class="d-flex flex-wrap align-center ga-3 mb-2">
       <div class="text-body-2 font-weight-medium">
-        {{ rows.length }} record(s) · {{ totals.qty }} item(s) used · Total cost {{ money(totals.cost) }}
+        <template v-if="usageSummary.records">{{ usageSummary.records }} record(s) · {{ usageSummary.qty }} item(s) used · Total cost {{ money(usageSummary.cost) }}</template>
+        <template v-if="usageSummary.drafts">{{ usageSummary.records ? " · " : "" }}{{ usageSummary.drafts }} in progress (drafts — not counted as usage until submitted)</template>
       </div>
       <v-spacer />
       <template v-if="canCheck">
@@ -88,6 +103,19 @@
       </template>
     </div>
 
+    <v-row v-if="report === 'usage' && usageSummary.records" dense class="mb-2">
+      <v-col v-for="box in totalBoxes" :key="box.title" cols="12" md="4">
+        <AppCard class="pa-3">
+          <div class="text-subtitle-2 mb-2">{{ box.title }}</div>
+          <div v-for="t in box.rows.slice(0, 6)" :key="t.label" class="d-flex justify-space-between text-body-2 mb-1 ga-2">
+            <span class="text-truncate">{{ t.label }}</span>
+            <span class="text-no-wrap">{{ t.records }} × · {{ t.qty }}{{ t.unit ? ` ${t.unit}` : "" }} · {{ money(t.totalCost) }}</span>
+          </div>
+          <div v-if="box.rows.length > 6" class="text-caption text-medium-emphasis">and {{ box.rows.length - 6 }} more (all in the Excel file)</div>
+        </AppCard>
+      </v-col>
+    </v-row>
+
     <template v-if="report === 'purchases' && rows.length">
       <div class="text-body-2 font-weight-medium mb-2">Total purchases {{ money(totals.cost) }}</div>
       <v-row dense class="mb-2">
@@ -121,11 +149,12 @@
       :items="shownRows"
       :loading="loading"
       :show-select="report === 'usage' && canCheck"
+      :item-selectable="(r: any) => r.status !== 'draft'"
       item-value="_id"
       density="compact"
       :items-per-page="50"
       class="border rounded"
-      no-data-text="Nothing recorded in this period."
+      :no-data-text="noDataText"
     >
       <template #item.date="{ value }">{{ standardFormatDate(value) }}</template>
       <template #item.createdAt="{ value }">{{ standardFormatDate(value) }}</template>
@@ -142,14 +171,31 @@
       <template #item.receivedCost="{ value }">{{ money(value) }}</template>
       <template #item.usedCost="{ value }">{{ money(value) }}</template>
       <template #item.siteUsedCost="{ value }">{{ money(value) }}</template>
-      <!-- The supervisor checks usage against the technician's before/after photos. -->
+      <!-- The supervisor checks usage against the technician's before/after photos (click to enlarge, with the time taken). -->
       <template #item.photos="{ item }">
-        <div v-if="usagePhotos(item).length" class="d-flex ga-1 py-1">
-          <a v-for="ph in usagePhotos(item)" :key="ph.id" :href="getFileUrl(ph.id)" target="_blank" rel="noopener" :title="ph.label">
-            <v-img :src="getFileUrl(ph.id)" width="36" height="36" cover class="rounded" :alt="ph.label" />
-          </a>
+        <InventoryPhotoThumbs :photos="item.photos" :before-at="item.photosBeforeAt" :after-at="item.photosAfterAt" />
+      </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-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>
-        <span v-else class="text-medium-emphasis">—</span>
+      </template>
+      <template #item.technician="{ item }">
+        <a href="#" class="text-primary" @click.prevent="openPerson(item)">{{ item.holderLabel || item.technician }}</a>
+      </template>
+      <template #item.itemName="{ item }">
+        <a v-if="report === 'usage' && scope === 'all'" href="#" class="text-primary" @click.prevent="openItem(item)">{{ item.itemName }}</a>
+        <span v-else>{{ item.itemName }}</span>
+      </template>
+      <template #item.times="{ item }">
+        <div class="text-caption text-no-wrap">
+          <div v-if="item.draftedAt">Draft {{ standardFormatDateTime(item.draftedAt) }}</div>
+          <div v-if="item.submittedAt">Submitted {{ standardFormatDateTime(item.submittedAt) }}</div>
+        </div>
+      </template>
+      <template #item.path="{ item }">
+        <span class="text-caption">{{ usagePathText(item.path, standardFormatDate) || "—" }}</span>
       </template>
       <template #item.checkedByName="{ item }">
         <v-chip v-if="item.checkedByName" size="x-small" color="success" variant="tonal">{{ item.checkedByName }}</v-chip>
@@ -159,6 +205,7 @@
         <span :class="item.reorderLevel && item.closing <= item.reorderLevel ? 'text-error font-weight-bold' : 'font-weight-medium'">{{ item.closing }}</span>
       </template>
     </v-data-table>
+    <InventoryHistoryDialog v-model="drill.show" :store="store" :holder="drill.holder" :item="drill.item" :title="drill.title" />
   </div>
 </template>
 
@@ -166,9 +213,9 @@
 import useInventory, { saveBlob } from "../composables/useInventory";
 import useWorkerTerm, { workerAppKey } from "../composables/useWorkerTerm";
 import useUtils from "../composables/useUtils";
-import useFile from "../composables/useFile";
 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";
 
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },
@@ -177,12 +224,7 @@ const props = defineProps({
 const ctl = computed(() => inventoryControls(props.store.access));
 
 const api = useInventory();
-const { standardFormatDate } = useUtils();
-const { getFileUrl } = useFile();
-const usagePhotos = (row: any) => [
-  ...(row.photos?.before ?? []).map((id: string) => ({ id, label: "Before" })),
-  ...(row.photos?.after ?? []).map((id: string) => ({ id, label: "After" })),
-];
+const { standardFormatDate, standardFormatDateTime } = useUtils();
 const notify = inject<(text: string, color?: string) => void>("inventoryNotify", () => {});
 
 const worker = useWorkerTerm({ providers: true });
@@ -197,6 +239,26 @@ const site = ref("");
 const locationType = ref("");
 const uncheckedOnly = ref(false);
 const usedBy = ref("");
+// Usage tracking filters. Status / place / work order / flag / search go to the server; person and item
+// narrow the loaded rows (their choices come from the rows).
+const status = ref("submitted");
+const person = ref("");
+const itemFilter = ref("");
+const locationText = ref("");
+const referenceText = ref("");
+const flag = ref("");
+const search = ref("");
+const scope = ref<"all" | "own_company">("all");
+const staleDays = ref(3);
+const flagWords = computed(() => ({ ...USAGE_FLAG_WORDS, old_draft: `Draft older than ${staleDays.value} days` }) as Record<string, string>);
+const flagChoices = computed(() => [{ value: "", title: "Everything" }, ...Object.entries(flagWords.value).map(([value, title]) => ({ value, title }))]);
+const drill = reactive({ show: false, holder: "", item: "", title: "" });
+function openPerson(r: any) {
+  Object.assign(drill, { show: true, holder: String(r.holder ?? ""), item: "", title: r.holderLabel || r.technician });
+}
+function openItem(r: any) {
+  Object.assign(drill, { show: true, holder: "", item: String(r.item ?? ""), title: `${r.itemName} — where it went` });
+}
 const rows = ref<any[]>([]);
 const selected = ref<string[]>([]);
 const purchases = reactive({ byMonth: [] as { month: string; deliveries: number; totalCost: number }[], bySupplier: [] as { supplier: string; deliveries: number; totalCost: number }[] });
@@ -214,7 +276,7 @@ const barWidth = (v: number) => {
 
 const help: Record<string, string> = {
   movement: "For each item: stock at the start of the month, what came in (deliveries and opening stock), what was issued and returned, count differences, and stock at the end.",
-  usage: "Every recorded usage: where it was used, for which tenant, by whom, and the cost. Use this for tenant billing. Tick records and mark them checked once verified.",
+  usage: "Every usage of this store's items, by anyone: who (company and service), where, which work order, before and after photos with their times, and how the stock reached them. Click a person or an item to see its full history. Use it for tenant billing; tick records and mark them checked once verified.",
   technicians: "For each person: stock they held at the start, took, used, returned, and hold at the end of the month.",
   purchases: "Every delivery received, and opening stock entered with new items (Type: Opening stock), with totals by month and by supplier.",
   handovers: "Stock passed from one person to a colleague: who gave it, who received it, and whether they confirmed.",
@@ -228,7 +290,43 @@ const serviceFilter = ref("");
 const serviceChoices = computed(() =>
   [...new Set(rows.value.map(companyOf).filter(Boolean))].sort().map((v) => ({ value: v, title: v })),
 );
-const shownRows = computed(() => (serviceFilter.value ? rows.value.filter((r) => companyOf(r) === serviceFilter.value || [r.toCompany, r.toServiceLabel].filter(Boolean).join(" · ") === serviceFilter.value) : rows.value));
+const shownRows = computed(() =>
+  rows.value.filter(
+    (r) =>
+      (!serviceFilter.value || companyOf(r) === serviceFilter.value || [r.toCompany, r.toServiceLabel].filter(Boolean).join(" · ") === serviceFilter.value) &&
+      (report.value !== "usage" || ((!person.value || String(r.holder) === person.value) && (!itemFilter.value || String(r.item) === itemFilter.value))),
+  ),
+);
+const choices = (key: (r: any) => string, label: (r: any) => string) =>
+  report.value !== "usage"
+    ? []
+    : [...new Map(rows.value.map((r) => [key(r), String(label(r) ?? "")])).entries()].map(([value, title]) => ({ value, title })).sort((a, b) => a.title.localeCompare(b.title));
+const personChoices = computed(() => choices((r) => String(r.holder), (r) => r.holderLabel || r.technician));
+const itemChoices = computed(() => choices((r) => String(r.item), (r) => r.itemName));
+const usageSummary = computed(() => {
+  const done = shownRows.value.filter((r) => r.status !== "draft");
+  return {
+    records: done.length,
+    qty: done.reduce((sum, r) => sum + r.qty, 0),
+    cost: Math.round(done.reduce((sum, r) => sum + (r.totalCost ?? 0), 0) * 100) / 100,
+    drafts: shownRows.value.length - done.length,
+  };
+});
+const totalBoxes = computed(() => {
+  const t = usageTotals(shownRows.value);
+  return [
+    { title: "By item", rows: t.byItem },
+    { title: "By person", rows: t.byPerson },
+    { title: "By company", rows: t.byCompany },
+  ];
+});
+const noDataText = computed(() =>
+  report.value !== "usage"
+    ? "Nothing recorded in this period."
+    : status.value === "draft"
+      ? "No usage in progress. Drafts appear here once someone saves a before photo."
+      : "No usage recorded for these filters in this month.",
+);
 
 const headers: Record<string, any[]> = {
   movement: [
@@ -247,6 +345,7 @@ const headers: Record<string, any[]> = {
   ],
   usage: [
     { title: "Date", key: "date" },
+    { title: "Status", key: "state", sortable: false },
     { title: "Property", key: "siteName" },
     { title: "Where", key: "locationType" },
     { title: "Unit / Area", key: "location" },
@@ -255,12 +354,13 @@ const headers: Record<string, any[]> = {
     { title: "Qty", key: "qty" },
     { title: "Unit price", key: "unitCost" },
     { title: "Total", key: "totalCost" },
-    { title: worker.one, key: "technician" },
-    { title: "Company", key: "holderCompany" },
-    { title: "Service", key: "holderServiceLabel" },
-    { title: "Photos", key: "photos", sortable: false },
-    { title: "Reference", key: "reference" },
+    { title: worker.one, key: "technician", minWidth: "200px" },
+    { title: "Photos", key: "photos", sortable: false, minWidth: "124px" },
+    { title: "Work order / ref", key: "reference", minWidth: "130px" },
+    { title: "Saved / submitted", key: "times", sortable: false },
+    { title: "Came from", key: "path", sortable: false, minWidth: "220px" },
     { title: "Reported by", key: "reportedBy" },
+    { title: "Remarks", key: "remarks" },
     { title: "Checked by", key: "checkedByName" },
   ],
   technicians: [
@@ -326,9 +426,27 @@ function period(): TInventoryPeriod & { unchecked?: boolean } {
     ...(report.value === "usage" && locationType.value ? { locationType: locationType.value } : {}),
     ...(report.value === "usage" && uncheckedOnly.value ? { unchecked: true } : {}),
     ...(usedBy.value ? { usedBy: usedBy.value } : {}),
+    ...(report.value === "usage"
+      ? usageQuery({ status: status.value === "submitted" ? "" : status.value, location: locationText.value, reference: referenceText.value, flag: flag.value, search: search.value })
+      : {}),
   };
 }
 
+/** The export carries the person / item / company picked on screen too. */
+function exportFilters() {
+  if (report.value !== "usage") return {};
+  const pick = rows.value.find((r) => companyOf(r) === serviceFilter.value);
+  const base = String(useRuntimeConfig().public.API_DO_STORAGE_ENDPOINT ?? "");
+  return usageQuery({
+    holder: person.value,
+    item: itemFilter.value,
+    company: serviceFilter.value ? pick?.holderCompany : "",
+    service: serviceFilter.value ? pick?.holderService : "",
+    // Photo links in the file open the photo itself.
+    photoBase: base.startsWith("https://") ? base : "",
+  });
+}
+
 async function load() {
   if (!month.value) return;
   loading.value = true;
@@ -338,6 +456,8 @@ async function load() {
     rows.value = res.rows;
     totals.qty = res.totalQty ?? 0;
     totals.cost = res.totalCost ?? 0;
+    scope.value = res.scope ?? "all";
+    staleDays.value = res.staleAfterDays ?? 3;
     purchases.byMonth = res.byMonth ?? [];
     purchases.bySupplier = res.bySupplier ?? [];
   } catch (error: any) {
@@ -365,7 +485,7 @@ async function setChecked(checked: boolean) {
 async function exportExcel() {
   exporting.value = true;
   try {
-    const blob = await api.exportReport(props.store._id, report.value, { ...period(), appSlug });
+    const blob = await api.exportReport(props.store._id, report.value, { ...period(), ...exportFilters(), appSlug });
     saveBlob(blob, `${props.store.name} - ${report.value === "technicians" ? worker.many : report.value} - ${month.value}.xlsx`);
   } catch {
     notify("Could not export the report.", "error");
@@ -374,7 +494,13 @@ async function exportExcel() {
   }
 }
 
-watch([report, month, span, site, locationType, uncheckedOnly, usedBy, () => props.store._id], load);
+watch([report, month, span, site, locationType, uncheckedOnly, usedBy, status, flag, () => props.store._id], load);
+// Typed filters wait until the typing stops.
+let typing: ReturnType<typeof setTimeout> | undefined;
+watch([locationText, referenceText, search], () => {
+  clearTimeout(typing);
+  typing = setTimeout(load, 400);
+});
 watch(report, () => (serviceFilter.value = ""));
 onMounted(load);
 </script>

package/components/InventoryUsageDialog.vue

@@ -2,24 +2,30 @@
   <v-dialog v-model="show" max-width="620" persistent scrollable>
     <v-card v-if="holding" class="screen-modal">
       <v-card-title class="d-flex align-center">
-        Record Usage
+        {{ draft ? "Finish usage (draft)" : "Record Usage" }}
         <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">
         <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.</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>.
+          <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">
           <InputLabel title="How many did you use?" required class="mb-1" />
           <v-text-field
             v-model.number="qty"
             type="number"
             min="1"
-            :max="holding.qty"
+            :max="maxQty"
             :suffix="holding.unit"
             density="comfortable"
             style="max-width: 200px"
-            :rules="[(v: any) => (Number.isInteger(Number(v)) && Number(v) >= 1 && Number(v) <= holding!.qty) || `1 to ${holding!.qty}`]"
+            :rules="[(v: any) => (Number.isInteger(Number(v)) && Number(v) >= 1 && Number(v) <= maxQty) || `1 to ${maxQty}`]"
           />
 
           <InputLabel title="Where?" required class="mb-1" />
@@ -74,15 +80,17 @@
             <v-col cols="12" sm="6">
               <InputLabel title="Photo before" required class="mb-1" />
               <InventoryPhotoInput v-model="photosBefore" :max="3" />
+              <div v-if="draft?.photosBeforeAt" class="text-caption text-medium-emphasis mt-1">Taken {{ standardFormatDateTime(draft.photosBeforeAt) }}</div>
             </v-col>
             <v-col cols="12" sm="6">
               <InputLabel title="Photo after" required class="mb-1" />
               <InventoryPhotoInput v-model="photosAfter" :max="3" />
+              <div v-if="draft?.photosAfterAt" class="text-caption text-medium-emphasis mt-1">Taken {{ standardFormatDateTime(draft.photosAfterAt) }}</div>
             </v-col>
           </v-row>
           <div v-if="photoError" class="text-error text-body-2 mt-1" role="alert">{{ photoError }}</div>
 
-          <InputLabel title="Date used" class="mb-1 mt-3" />
+          <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" />
           <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" />
@@ -91,8 +99,21 @@
         </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">Save usage</v-btn>
+        <v-btn v-if="draft" class="text-none" variant="text" color="error" :disabled="!!saving" @click="confirmDiscard = true">Discard draft</v-btn>
+        <v-spacer v-if="draft" />
+        <v-btn class="screen-btn-ghost" variant="outlined" :disabled="!!saving" @click="show = false">Cancel</v-btn>
+        <v-btn class="screen-btn-ghost text-none" variant="outlined" prepend-icon="mdi-content-save-outline" :loading="saving === 'draft'" :disabled="!!saving" @click="saveDraft">Save draft</v-btn>
+        <v-btn class="screen-btn-primary" variant="flat" :loading="saving === 'submit'" :disabled="!!saving" @click="save">{{ draft ? "Submit usage" : "Save usage" }}</v-btn>
+      </div>
+    </v-card>
+  </v-dialog>
+  <v-dialog v-model="confirmDiscard" max-width="420">
+    <v-card class="screen-modal">
+      <v-card-title>Discard this draft?</v-card-title>
+      <v-card-text>The draft and its photos are removed. Nothing was taken off your stock, so your stock stays as it is.</v-card-text>
+      <div class="screen-modal__footer">
+        <v-btn class="screen-btn-ghost" variant="outlined" @click="confirmDiscard = false">Keep it</v-btn>
+        <v-btn color="error" variant="flat" :loading="saving === 'discard'" @click="discard">Discard</v-btn>
       </div>
     </v-card>
   </v-dialog>
@@ -107,16 +128,24 @@ const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },
   siteId: { type: String, required: true },
   holding: { type: Object as PropType<TInventoryHolding | null>, default: null },
+  /** An existing draft to finish (edit, add the after photo, submit or discard). */
+  draft: { type: Object as PropType<TInventoryUsageDraft | null>, default: null },
   sites: { type: Array as PropType<{ _id: string; name: string }[]>, default: () => [] },
 });
 const emit = defineEmits(["done"]);
 
 const api = useInventory();
-const { requiredRule, debounce } = useUtils();
+const { requiredRule, debounce, standardFormatDateTime } = useUtils();
 const notify = inject<(text: string, color?: string) => void>("inventoryNotify", () => {});
 
 const form = ref();
-const saving = ref(false);
+const saving = ref<"" | "draft" | "submit" | "discard">("");
+const confirmDiscard = ref(false);
+// Stock already promised to the person's OTHER drafts; this draft's own qty is free for it.
+const otherDrafts = computed(() => Math.max(0, (props.holding?.inDrafts ?? 0) - (props.draft?.qty ?? 0)));
+const maxQty = computed(() => Math.max(1, (props.holding?.qty ?? 0) - otherDrafts.value));
+const USAGE_DRAFT_NEEDS_BEFORE = "Take the before photo to save a draft.";
+let prefilling = false;
 const today = new Date().toLocaleDateString("en-CA");
 const qty = ref<number | null>(1);
 const where = ref<"tenant_unit" | "common_area">("tenant_unit");
@@ -159,38 +188,81 @@ async function loadAreas() {
   }
 }
 
+function body() {
+  return {
+    item: props.holding!.item,
+    qty: Number(qty.value),
+    locationType: where.value,
+    ...(where.value === "tenant_unit" ? { unit: unit.value } : { area: area.value }),
+    reference: reference.value,
+    photosBefore: photosBefore.value,
+    photosAfter: photosAfter.value,
+    remarks: remarks.value,
+    reportedBy: reportedBy.value,
+  };
+}
+
+function finished(text: string) {
+  notify(text);
+  show.value = false;
+  emit("done");
+}
+
+/** Save draft: before photo required, after photo optional; nothing is deducted. */
+async function saveDraft() {
+  const { valid } = await form.value.validate();
+  photoError.value = photosBefore.value.length ? "" : USAGE_DRAFT_NEEDS_BEFORE;
+  if (!valid || photoError.value || !props.holding) return;
+  saving.value = "draft";
+  try {
+    if (props.draft) await api.updateUsageDraft(props.draft._id, body());
+    else await api.createUsageDraft(props.store._id, { site: site.value, ...body() });
+    finished("Draft saved. Add the after photo and submit it when the job is done — it is under My drafts.");
+  } catch (error: any) {
+    notify(error?.data?.message || "Could not save the draft.", "error");
+  } finally {
+    saving.value = "";
+  }
+}
+
 async function save() {
   const { valid } = await form.value.validate();
   // Owner decision 2026-09-27: a before AND an after photo on every usage record (the API refuses without).
   photoError.value = photosBefore.value.length && photosAfter.value.length ? "" : USAGE_PHOTOS_REQUIRED;
   if (!valid || photoError.value || !props.holding) return;
-  saving.value = true;
+  saving.value = "submit";
   try {
-    await api.recordUsage(props.store._id, {
-      site: site.value,
-      item: props.holding.item,
-      qty: Number(qty.value),
-      locationType: where.value,
-      ...(where.value === "tenant_unit" ? { unit: unit.value } : { area: area.value }),
-      reference: reference.value,
-      date: pickedDate(date.value),
-      photosBefore: photosBefore.value,
-      photosAfter: photosAfter.value,
-      remarks: remarks.value,
-      reportedBy: reportedBy.value,
-    });
-    notify("Usage saved.");
-    show.value = false;
-    emit("done");
+    if (props.draft) {
+      // Keep any edits, then submit: the stock comes off now.
+      await api.updateUsageDraft(props.draft._id, body());
+      await api.submitUsageDraft(props.draft._id, { photosAfter: photosAfter.value, date: pickedDate(date.value) });
+    } else {
+      await api.recordUsage(props.store._id, { site: site.value, ...body(), date: pickedDate(date.value) });
+    }
+    finished("Usage saved.");
   } catch (error: any) {
     notify(error?.data?.message || "Could not save the usage.", "error");
   } finally {
-    saving.value = false;
+    saving.value = "";
+  }
+}
+
+async function discard() {
+  if (!props.draft) return;
+  saving.value = "discard";
+  try {
+    await api.discardUsageDraft(props.draft._id);
+    confirmDiscard.value = false;
+    finished("Draft discarded.");
+  } catch (error: any) {
+    notify(error?.data?.message || "Could not discard the draft.", "error");
+  } finally {
+    saving.value = "";
   }
 }
 
 watch(site, () => {
-  unit.value = "";
+  if (!prefilling) unit.value = "";
   searchUnits("");
   loadAreas();
 });
@@ -212,6 +284,25 @@ watch(show, (open) => {
   reportedBy.value = "";
   date.value = today;
   site.value = props.store.sites.includes(props.siteId) ? props.siteId : props.store.sites[0];
+  const d = props.draft;
+  if (d) {
+    // Finish a draft: everything as saved; the site cannot change.
+    prefilling = true;
+    site.value = String(d.site ?? site.value);
+    qty.value = d.qty;
+    where.value = d.location?.type === "common_area" ? "common_area" : "tenant_unit";
+    area.value = d.location?.area ?? "";
+    unit.value = String(d.location?.unit ?? "");
+    if (unit.value) units.value = [{ _id: unit.value, name: d.location?.unitName ?? "", tenantName: d.location?.tenantName ?? "" }];
+    reference.value = d.reference ?? "";
+    remarks.value = d.remarks ?? "";
+    reportedBy.value = d.reportedBy ?? "";
+    photosBefore.value = [...(d.photos?.before ?? [])];
+    photosAfter.value = [...(d.photos?.after ?? [])];
+    nextTick(() => (prefilling = false));
+    loadAreas();
+    return;
+  }
   searchUnits("");
   loadAreas();
 });

package/composables/useInventory.ts

@@ -15,6 +15,7 @@ export default function useInventory() {
     receive: "Received",
     issue: "Issued",
     use: "Used",
+    use_draft: "Draft",
     return: "Returned",
     adjust: "Stock count",
     handover: "Hand-over",
@@ -44,6 +45,13 @@ export default function useInventory() {
     issue: (store: string, body: Record<string, any>) => api(`/stores/${store}/issue`, { method: "POST", body }),
     receiveReturn: (store: string, body: Record<string, any>) => api(`/stores/${store}/returns`, { method: "POST", body }),
     recordUsage: (store: string, body: Record<string, any>) => api(`/stores/${store}/usage`, { method: "POST", body }),
+    /** Usage drafts: before photo now, after photo and submit after the job (stock is deducted on submit). */
+    getUsageDrafts: (store: string, everyone = false) =>
+      api<{ items: TInventoryUsageDraft[]; staleAfterDays: number }>(`/stores/${store}/usage-drafts`, { query: everyone ? { everyone: true } : {} }),
+    createUsageDraft: (store: string, body: Record<string, any>) => api<TInventoryUsageDraft>(`/stores/${store}/usage-drafts`, { method: "POST", body }),
+    updateUsageDraft: (id: string, body: Record<string, any>) => api<TInventoryUsageDraft>(`/usage-drafts/${id}`, { method: "PATCH", body }),
+    discardUsageDraft: (id: string) => api(`/usage-drafts/${id}/discard`, { method: "POST" }),
+    submitUsageDraft: (id: string, body: { photosAfter?: string[]; date?: string }) => api<TInventoryTransaction>(`/usage-drafts/${id}/submit`, { method: "POST", body }),
 
     getRequests: (store: string, query: { page?: number; limit?: number; status?: string; mine?: boolean }) =>
       api<{ items: TInventoryRequest[]; total: number; pendingCount: number; page: number; pages: number }>(`/stores/${store}/requests`, { query }),
@@ -74,9 +82,9 @@ export default function useInventory() {
     getPeople: (store: string, search = "") =>
       api<{ _id: string; name: string; orgName: string; email?: string; company?: string; service?: string; serviceLabel?: string; label?: string }[]>(`/stores/${store}/people`, { query: { search } }),
 
-    getReport: (store: string, report: "movement" | "usage" | "technicians" | "purchases" | "handovers", query: TInventoryPeriod & { unchecked?: boolean }) =>
-      api<{ rows: any[]; totalQty?: number; totalCost?: number }>(`/stores/${store}/reports/${report}`, { query }),
-    exportReport: (store: string, report: string, query: TInventoryPeriod & { appSlug?: string }) =>
+    getReport: (store: string, report: "movement" | "usage" | "technicians" | "purchases" | "handovers", query: TInventoryPeriod & Record<string, any>) =>
+      api<{ rows: any[]; totalQty?: number; totalCost?: number; scope?: "all" | "own_company"; staleAfterDays?: number }>(`/stores/${store}/reports/${report}`, { query }),
+    exportReport: (store: string, report: string, query: TInventoryPeriod & Record<string, any>) =>
       api<Blob>(`/stores/${store}/reports/${report}/export`, { query, responseType: "blob" }),
     checkUsage: (store: string, ids: string[], checked: boolean) =>
       api<{ updated: number }>(`/stores/${store}/usage/check`, { method: "POST", body: { ids, checked } }),

package/package.json

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

package/types/inventory.d.ts

@@ -82,6 +82,11 @@ declare type TInventoryHolding = {
   packing?: string;
   /** Used by this holder since the start of the month (Singapore time). */
   usedThisMonth?: number;
+  holderLabel?: string;
+  /** How many sit in the holder's own usage drafts (not deducted until submitted), and what is still free. */
+  inDrafts?: number;
+  draftCount?: number;
+  free?: number;
 };
 
 declare type TInventoryTransaction = {
@@ -89,7 +94,7 @@ declare type TInventoryTransaction = {
   item: string;
   itemName: string;
   unit: string;
-  type: "opening" | "receive" | "issue" | "use" | "return" | "adjust" | "handover";
+  type: "opening" | "receive" | "issue" | "use" | "return" | "adjust" | "handover" | "use_draft";
   qty: number;
   storeChange: number;
   storeBalance: number;
@@ -97,7 +102,7 @@ declare type TInventoryTransaction = {
   holderChange?: number;
   holderBalance?: number;
   site?: string;
-  location?: { type: "common_area" | "tenant_unit"; area?: string; unitName?: string; tenantName?: string };
+  location?: { type: "common_area" | "tenant_unit"; area?: string; unit?: string; unitName?: string; tenantName?: string };
   reference?: string;
   supplier?: string;
   unitCost: number;
@@ -109,8 +114,19 @@ declare type TInventoryTransaction = {
   receivedBy?: string;
   date: string;
   createdByName: string;
+  holder?: string;
+  holderLabel?: string;
+  createdByLabel?: string;
+  /** Usage saved as a draft first. */
+  draftedAt?: string;
+  photosBeforeAt?: string | null;
+  photosAfterAt?: string | null;
+  submittedAt?: string;
 };
 
+/** A usage record saved with its before photo, waiting for the after photo (no stock deducted yet). */
+declare type TInventoryUsageDraft = TInventoryTransaction & { type: "use_draft"; stale: boolean; mine: boolean; clientRef?: string };
+
 declare type TInventoryPeriod = { from: string; to: string; site?: string; locationType?: string; usedBy?: string };
 
 /** An organisation's supplier (shared by its stores). Only the name is required. */

package/utils/inventory-usage.ts

@@ -0,0 +1,94 @@
+/**
+ * Plain words for usage drafts, usage history and the store owner's usage
+ * tracking (owner 2026-09-29). Used by the Record Usage dialog, My Stock and
+ * the Usage report. Pure, so it is tested without a browser.
+ */
+type TLocation = { type?: string; area?: string; unitName?: string; tenantName?: string } | undefined;
+type TDraft = { location?: TLocation; photos?: { before?: string[]; after?: string[] }; photosBeforeAt?: string | null; stale?: boolean };
+type TStep = { type: "issued" | "handed_over"; to: string; by: string; date: string };
+
+export const USAGE_FLAG_WORDS: Record<string, string> = {
+  no_work_order: "No work order",
+  old_draft: "Draft waiting too long",
+  above_typical: "More than usual",
+};
+
+export const USAGE_STATUS_CHOICES = [
+  { value: "submitted", title: "Submitted" },
+  { value: "draft", title: "In progress (drafts)" },
+  { value: "all", title: "All" },
+];
+
+/** "Unit Tower A 05-12 (Tenant Co)" or the common area as typed. */
+export function whereText(location: TLocation) {
+  if (!location) return "";
+  if (location.type === "tenant_unit") return `Unit ${location.unitName ?? ""}${location.tenantName ? ` (${location.tenantName})` : ""}`.trim();
+  return location.area ?? "";
+}
+
+/** "Before photo taken 10:32 · Unit 05-12 · Add the after photo to finish" — the draft card. */
+export function draftCardText(d: TDraft, time: (iso: string) => string, staleDays = 3) {
+  const taken = d.photosBeforeAt ? `Before photo taken ${time(d.photosBeforeAt)}` : "Before photo taken";
+  const next = d.photos?.after?.length ? "Ready to submit" : "Add the after photo to finish";
+  return {
+    line: [taken, whereText(d.location), next].filter(Boolean).join(" · "),
+    warning: d.stale ? `Waiting more than ${staleDays} days — finish or discard it` : "",
+  };
+}
+
+/** "Issued to Ali by Keeper (29/09) → Handed to Bala by Ali (29/09)". */
+export function usagePathText(steps: TStep[] | undefined, day: (iso: string) => string) {
+  if (!steps?.length) return "";
+  return steps.map((s) => `${s.type === "issued" ? "Issued to" : "Handed to"} ${s.to} by ${s.by} (${day(s.date)})`).join(" → ");
+}
+
+/** Query for the report/export: empty filters are left out, so the server applies no filter. */
+export function usageQuery(filters: Record<string, string | boolean | undefined | null>) {
+  return Object.fromEntries(Object.entries(filters).filter(([, v]) => v !== "" && v !== undefined && v !== null && v !== false));
+}
+
+/** Totals per item / person / company, of submitted records only (drafts are not usage yet). */
+export function usageTotals(rows: { status?: string; qty: number; totalCost?: number; unit?: string; itemName?: string; holderLabel?: string; technician?: string; holderCompany?: string }[]) {
+  const group = (label: (r: (typeof rows)[number]) => string) => {
+    const map = new Map<string, { label: string; records: number; qty: number; totalCost: number; unit: string }>();
+    for (const r of rows) {
+      if (r.status === "draft") continue;
+      const k = label(r);
+      const t = map.get(k) ?? { label: k, records: 0, qty: 0, totalCost: 0, unit: r.unit ?? "" };
+      t.records++;
+      t.qty += r.qty;
+      t.totalCost = Math.round((t.totalCost + (r.totalCost ?? 0)) * 100) / 100;
+      // Different units are not added up in words.
+      if (t.unit !== (r.unit ?? "")) t.unit = "";
+      map.set(k, t);
+    }
+    return [...map.values()].sort((a, b) => b.records - a.records || a.label.localeCompare(b.label));
+  };
+  return {
+    byItem: group((r) => r.itemName ?? ""),
+    byPerson: group((r) => r.holderLabel || r.technician || ""),
+    byCompany: group((r) => r.holderCompany || "(company not known)"),
+  };
+}
+
+/** What a history row says happened, from the person's side. */
+export function historyText(t: { type: string; holderChange?: number }) {
+  switch (t.type) {
+    case "issue":
+      return "Taken from store";
+    case "return":
+      return "Given back to store";
+    case "handover":
+      return (t.holderChange ?? 0) < 0 ? "Given to colleague" : "Received from colleague";
+    case "use":
+      return "Used";
+    case "opening":
+      return "Opening stock";
+    case "receive":
+      return "Received into store";
+    case "adjust":
+      return "Stock count";
+    default:
+      return t.type;
+  }
+}