@7365admin1/layer-common 4.72.0 → 4.73.1-staging.452

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>