@7365admin1/layer-common 4.71.2 → 4.73.0

package/components/InventoryReportsTab.vue

@@ -6,6 +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 v-if="ctl.fullReports || ctl.review" value="handovers" class="text-none">Hand-overs</v-btn>
       </v-btn-toggle>
       <v-select
         v-if="report === 'purchases'"
@@ -41,21 +42,54 @@
         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-select
+        v-if="store.ownerType === 'property'"
+        v-model="usedBy"
+        :items="USED_BY_FILTERS"
+        label="Used by"
+        density="compact"
+        hide-details
+        style="max-width: 220px"
+      />
+      <v-select
+        v-if="serviceChoices.length > 1"
+        v-model="serviceFilter"
+        :items="[{ value: '', title: 'All companies' }, ...serviceChoices]"
+        label="Company / service"
+        density="compact"
+        hide-details
+        style="max-width: 260px"
+      />
+      <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">
@@ -69,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">
@@ -99,16 +146,22 @@
     <v-data-table
       v-model="selected"
       :headers="tableHeaders"
-      :items="rows"
+      :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>
+      <template #item.decidedAt="{ value }">{{ value ? standardFormatDate(value) : "—" }}</template>
+      <template #item.status="{ value }">
+        <v-chip size="x-small" variant="tonal" :color="value === 'accepted' ? 'success' : value === 'pending' ? 'warning' : undefined">{{ handoverStatus[value] ?? value }}</v-chip>
+      </template>
       <template #item.locationType="{ value }">{{ value === "tenant_unit" ? "Tenant unit" : "Common area" }}</template>
       <template #item.unitCost="{ value }">{{ money(value) }}</template>
       <template #item.totalCost="{ value }">{{ money(value) }}</template>
@@ -118,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>
+      </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>
-        <span v-else class="text-medium-emphasis">—</span>
+      </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>
@@ -135,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>
 
@@ -142,8 +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 },
@@ -152,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 });
@@ -166,11 +233,32 @@ 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">(ctl.value.fullReports ? "movement" : "usage");
+const report = ref<"movement" | "usage" | "technicians" | "purchases" | "handovers">(ctl.value.fullReports ? "movement" : "usage");
 const span = ref<"month" | "year">("year");
 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 }[] });
@@ -188,11 +276,58 @@ 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.",
 };
 
+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).
+const companyOf = (r: any) => [r.holderCompany ?? r.fromCompany, r.holderServiceLabel ?? r.fromServiceLabel].filter(Boolean).join(" · ");
+const serviceFilter = ref("");
+const serviceChoices = computed(() =>
+  [...new Set(rows.value.map(companyOf).filter(Boolean))].sort().map((v) => ({ value: v, title: v })),
+);
+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: [
     { title: "Item", key: "name" },
@@ -210,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" },
@@ -218,23 +354,41 @@ const headers: Record<string, any[]> = {
     { title: "Qty", key: "qty" },
     { title: "Unit price", key: "unitCost" },
     { title: "Total", key: "totalCost" },
-    { title: worker.one, key: "technician" },
-    { 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: [
     { title: "Name", key: "technician" },
+    { title: "Company", key: "holderCompany" },
+    { title: "Service", key: "holderServiceLabel" },
     { title: "Item", key: "itemName" },
     { title: "Unit", key: "unit" },
     { title: "Holding at start", key: "opening" },
     { title: "Taken", key: "taken" },
+    { title: "From colleagues", key: "gotFromColleagues" },
     { title: "Used", key: "used" },
     { title: "Returned", key: "returned" },
+    { title: "To colleagues", key: "gaveToColleagues" },
     { title: "Holding at end", key: "closing" },
     { title: "In hand now", key: "inHandNow" },
   ],
+  handovers: [
+    { title: "Date", key: "createdAt" },
+    { title: "Item", key: "itemName" },
+    { title: "Qty", key: "qty" },
+    { title: "Unit", key: "unit" },
+    { title: "Given by", key: "fromLabel" },
+    { title: "Given to", key: "toLabel" },
+    { title: "Status", key: "status" },
+    { title: "Confirmed / declined", key: "decidedAt" },
+    { title: "Note", key: "note" },
+  ],
   purchases: [
     { title: "Date", key: "date" },
     { title: "Type", key: "kind" },
@@ -271,9 +425,28 @@ function period(): TInventoryPeriod & { unchecked?: boolean } {
     ...((report.value === "usage" || report.value === "movement") && 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 } : {}),
+    ...(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;
@@ -283,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) {
@@ -310,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");
@@ -319,6 +494,13 @@ async function exportExcel() {
   }
 }
 
-watch([report, month, span, site, locationType, uncheckedOnly, () => 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/InventoryRequestsTab.vue

@@ -20,7 +20,7 @@
 
     <AppCard v-for="r in requests" :key="r._id" class="pa-4 mb-3">
       <div class="d-flex flex-wrap align-center ga-2 mb-2">
-        <div class="font-weight-medium">{{ r.requestedByName || "Someone" }}</div>
+        <div class="font-weight-medium">{{ r.requestedByLabel || r.requestedByName || "Someone" }}</div>
         <div class="text-caption text-medium-emphasis">{{ standardFormatDateTime(r.createdAt) }}</div>
         <v-chip size="small" :color="chip[r.status].color" variant="tonal">{{ chip[r.status].label }}</v-chip>
         <!-- One store can supply several properties: say which one this request is for. -->
@@ -47,7 +47,7 @@
     <v-dialog v-model="decision.show" max-width="620" persistent scrollable>
       <v-card v-if="decision.request" class="screen-modal">
         <v-card-title class="d-flex align-center">
-          Request from {{ decision.request.requestedByName }}
+          Request from {{ decision.request.requestedByLabel || decision.request.requestedByName }}
           <v-spacer />
           <v-btn icon="mdi-close" variant="text" class="screen-modal__close" aria-label="Close" @click="decision.show = false" />
         </v-card-title>

package/components/InventoryStockTab.vue

@@ -35,7 +35,25 @@
           <v-list-item v-if="legacyToCopy" prepend-icon="mdi-content-copy" title="Copy from old Equipment list" @click="showLegacy = true" />
         </v-list>
       </v-menu>
+      <v-btn
+        v-if="usedByOwner && selected.length"
+        class="text-none screen-btn-ghost"
+        variant="outlined"
+        prepend-icon="mdi-account-group-outline"
+        @click="openBulk"
+      >
+        Set "Used by" for {{ selected.length }} item{{ selected.length === 1 ? "" : "s" }}
+      </v-btn>
       <v-spacer />
+      <v-select
+        v-if="usedByOwner"
+        v-model="usedByFilter"
+        :items="USED_BY_FILTERS"
+        label="Used by"
+        density="compact"
+        hide-details
+        style="min-width: 200px; max-width: 240px"
+      />
       <v-checkbox v-model="lowOnly" label="Low stock only" density="compact" hide-details class="flex-grow-0" />
       <v-text-field
         v-model="search"
@@ -56,6 +74,8 @@
       v-model:page="page"
       :pages="pages"
       :page-range="pageRange"
+      :show-select="usedByOwner"
+      v-model:selected="selected"
       @refresh="load"
       @row-click="(row: any) => openItem(row.item)"
     >
@@ -68,6 +88,9 @@
           <div>
             <div class="font-weight-medium">{{ item.name }}</div>
             <div class="text-caption text-medium-emphasis">{{ inventoryItemMeta(item) }}</div>
+            <div v-if="isMain && usedByChips(item.usedBy).length" class="d-flex flex-wrap ga-1 mt-1">
+              <v-chip v-for="c in usedByChips(item.usedBy)" :key="c" size="x-small" variant="tonal" color="primary">{{ c }}</v-chip>
+            </div>
           </div>
         </div>
       </template>
@@ -78,6 +101,7 @@
         <v-chip v-if="item.status === 'inactive'" size="x-small" variant="tonal" class="ml-2">Not in use</v-chip>
       </template>
       <template #item.reorderLevel="{ value }">{{ value || "—" }}</template>
+      <template #item.usedBy="{ item }">{{ usedByText(item.usedBy) }}</template>
       <template #item.unitCost="{ value }">{{ value !== undefined ? money(value) : "—" }}</template>
       <template #no-data>
         <div class="py-8 text-center">
@@ -94,6 +118,29 @@
     <InventoryImportDialog v-model="showImport" :store="store" @done="done" />
     <InventoryImportDialog v-model="showReceiveImport" :store="store" kind="receipts" @done="done" />
     <InventoryLegacyImportDialog v-model="showLegacy" :store="store" @done="done" />
+    <v-dialog v-model="bulk.show" max-width="480">
+      <v-card class="screen-modal">
+        <v-card-title>Set "Used by"</v-card-title>
+        <v-card-text class="screen-modal__body">
+          <p class="text-body-2 mb-3">For the {{ selected.length }} selected item{{ selected.length === 1 ? "" : "s" }}.</p>
+          <v-select
+            :model-value="bulk.usedBy"
+            :items="usedByItems"
+            multiple
+            chips
+            closable-chips
+            density="comfortable"
+            :hint="USED_BY_HINT"
+            persistent-hint
+            @update:model-value="(v: string[]) => (bulk.usedBy = nextUsedBy(bulk.usedBy, v))"
+          />
+        </v-card-text>
+        <div class="screen-modal__footer">
+          <v-btn class="screen-btn-ghost" variant="outlined" :disabled="bulk.saving" @click="bulk.show = false">Cancel</v-btn>
+          <v-btn class="screen-btn-primary" variant="flat" :loading="bulk.saving" @click="saveBulk">Save</v-btn>
+        </div>
+      </v-card>
+    </v-dialog>
     <InventoryItemDetail v-model="detail.show" :store="store" :item="detail.item" @edit="editItem" @done="done" />
   </div>
 </template>
@@ -105,6 +152,7 @@ import useUtils from "../composables/useUtils";
 import { inventoryItemMeta } from "../utils/inventory-store-label";
 import { inventoryControls } from "../utils/inventory-presets";
 import { hasLegacyEquipmentToCopy } from "../utils/inventory-legacy";
+import { nextUsedBy, USED_BY_ALL, USED_BY_ALL_LABEL, USED_BY_FILTERS, USED_BY_HINT, USED_BY_OPTIONS, usedByChips, usedByText } from "../utils/inventory-used-by";
 
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },
@@ -114,7 +162,34 @@ const props = defineProps({
 const ctl = computed(() => inventoryControls(props.store.access));
 const emit = defineEmits(["changed"]);
 
-const { getItems, getLegacyEquipment } = useInventory();
+const { getItems, getLegacyEquipment, setUsedBy } = useInventory();
+const notify = inject<(text: string, color?: string) => void>("inventoryNotify", () => {});
+
+// Used by belongs to the main (property) store; its owner sees the column, the filter and bulk edit.
+const isMain = computed(() => props.store.ownerType === "property");
+const usedByOwner = computed(() => isMain.value && props.store.access.canManage);
+const usedByFilter = ref("");
+const selected = ref<string[]>([]);
+const usedByItems = [{ value: USED_BY_ALL, title: USED_BY_ALL_LABEL }, ...USED_BY_OPTIONS];
+const bulk = reactive({ show: false, usedBy: [USED_BY_ALL] as string[], saving: false });
+function openBulk() {
+  Object.assign(bulk, { show: true, usedBy: [USED_BY_ALL], saving: false });
+}
+async function saveBulk() {
+  bulk.saving = true;
+  try {
+    const ids = selected.value.map((s: any) => (typeof s === "string" ? s : s._id));
+    const res = await setUsedBy(props.store._id, ids, bulk.usedBy);
+    notify(`"Used by" set to ${usedByText(bulk.usedBy)} for ${res?.updated ?? ids.length} item(s).`);
+    bulk.show = false;
+    selected.value = [];
+    load();
+  } catch (error: any) {
+    notify(error?.data?.message || "Could not save.", "error");
+  } finally {
+    bulk.saving = false;
+  }
+}
 const { getFileUrl } = useFile();
 const { debounce } = useUtils();
 
@@ -135,6 +210,7 @@ const headers = computed(() => [
   { title: "Item", value: "name" },
   { title: "In store", value: "onHand" },
   { title: "Low stock alert at", value: "reorderLevel" },
+  ...(usedByOwner.value ? [{ title: "Used by", value: "usedBy" }] : []),
   ...(ctl.value.unitPrice ? [{ title: "Unit price", value: "unitCost" }] : []),
 ]);
 
@@ -149,6 +225,7 @@ async function load() {
       search: search.value || "",
       lowStock: lowOnly.value || undefined,
       includeInactive: props.store.access.canManage || undefined,
+      usedBy: (usedByOwner.value && usedByFilter.value) || undefined,
     });
     items.value = res.items;
     pages.value = res.pages;
@@ -199,6 +276,7 @@ function done() {
 
 watch(page, load);
 watch(lowOnly, () => (page.value === 1 ? load() : (page.value = 1)));
+watch(usedByFilter, () => (page.value === 1 ? load() : (page.value = 1)));
 watch(search, debounce(() => (page.value === 1 ? load() : (page.value = 1)), 400));
 watch(() => props.store._id, () => (checkLegacy(), page.value === 1 ? load() : (page.value = 1)));
 onMounted(() => (load(), checkLegacy()));

package/components/InventoryTechniciansTab.vue

@@ -12,6 +12,7 @@
     <AppCard v-for="g in groups" :key="g.holder" class="pa-4 mb-3">
       <div class="d-flex align-center mb-2">
         <div class="font-weight-medium">{{ g.holderName || "Unnamed" }}</div>
+        <div v-if="g.company || g.serviceLabel" class="text-caption text-medium-emphasis">{{ [g.company, g.serviceLabel].filter(Boolean).join(" · ") }}</div>
         <v-spacer />
         <v-btn v-if="ctl.takeReturn" class="text-none screen-btn-ghost" variant="outlined" size="small" prepend-icon="mdi-keyboard-return" @click="openReturn(g)">Receive return</v-btn>
       </div>
@@ -47,11 +48,11 @@ const search = ref("");
 
 const groups = computed(() => {
   const q = (search.value || "").toLowerCase();
-  const map = new Map<string, { holder: string; holderName: string; items: TInventoryHolding[] }>();
+  const map = new Map<string, { holder: string; holderName: string; company?: string; serviceLabel?: string; items: TInventoryHolding[] }>();
   for (const h of holdings.value) {
     if (q && !h.holderName.toLowerCase().includes(q) && !h.itemName.toLowerCase().includes(q)) continue;
     const key = String(h.holder);
-    if (!map.has(key)) map.set(key, { holder: key, holderName: h.holderName, items: [] });
+    if (!map.has(key)) map.set(key, { holder: key, holderName: h.holderName, company: (h as any).holderCompany, serviceLabel: (h as any).holderServiceLabel, items: [] });
     map.get(key)!.items.push(h);
   }
   return [...map.values()];