@7365admin1/layer-common 4.71.2 → 4.73.0

package/components/InventoryMyStockTab.vue

@@ -6,6 +6,41 @@
       <v-btn v-if="ctl.request" class="text-none screen-btn-primary" variant="flat" prepend-icon="mdi-cart-arrow-down" @click="showRequest = true">Request Stock</v-btn>
     </div>
 
+    <!-- Give to colleague: what waits for me to confirm, and what I gave that waits for them. -->
+    <AppCard v-for="h in toConfirm" :key="h._id" class="pa-4 mb-3 d-flex flex-wrap align-center ga-3" style="border-left: 4px solid rgb(var(--v-theme-warning))">
+      <v-icon icon="mdi-hand-coin-outline" color="warning" />
+      <div class="flex-grow-1">
+        <div class="font-weight-medium">{{ h.fromLabel || h.fromName }} is giving you {{ h.qty }} {{ h.unit }} {{ h.itemName }}</div>
+        <div class="text-caption text-medium-emphasis">{{ standardFormatDate(h.createdAt) }}{{ h.note ? ` · ${h.note}` : "" }} · Confirm once you have it in hand.</div>
+      </div>
+      <v-btn class="text-none screen-btn-ghost" variant="outlined" size="small" :loading="acting === h._id + 'd'" @click="decide(h, false)">Decline</v-btn>
+      <v-btn class="text-none screen-btn-primary" variant="flat" size="small" :loading="acting === h._id + 'a'" @click="decide(h, true)">I received it</v-btn>
+    </AppCard>
+    <AppCard v-for="h in waiting" :key="h._id" class="pa-3 mb-3 d-flex flex-wrap align-center ga-3">
+      <v-icon icon="mdi-timer-sand" color="medium-emphasis" />
+      <div class="flex-grow-1 text-body-2">Waiting for {{ h.toName }} to confirm {{ h.qty }} {{ h.unit }} {{ h.itemName }}.</div>
+      <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>
@@ -22,13 +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.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>
-          <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>
         </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>
@@ -44,10 +88,10 @@
         <tr v-for="t in activity" :key="t._id">
           <td class="text-no-wrap">{{ standardFormatDate(t.date) }}</td>
           <td>{{ t.itemName }}</td>
-          <td>{{ t.type === "issue" ? "Taken from store" : t.type === "return" ? "Given back to store" : typeLabels[t.type] }}</td>
+          <td>{{ activityText(t) }}</td>
           <td class="text-right">{{ t.qty }}</td>
           <td class="text-caption">
-            {{ [t.location?.type === "tenant_unit" ? `${t.location.unitName} ${t.location.tenantName || ""}` : t.location?.area, t.reference].filter(Boolean).join(" · ") }}
+            {{ [t.location?.type === "tenant_unit" ? `${t.location.unitName} ${t.location.tenantName || ""}` : t.location?.area, t.type === "handover" ? t.remarks : t.reference].filter(Boolean).join(" · ") }}
           </td>
           <td class="text-right">{{ t.holderBalance }}</td>
         </tr>
@@ -57,7 +101,56 @@
       </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">
+          Give to colleague
+          <v-spacer />
+          <v-btn icon="mdi-close" variant="text" class="screen-modal__close" aria-label="Close" @click="give.show = false" />
+        </v-card-title>
+        <v-card-text class="screen-modal__body">
+          <p class="text-body-2 text-medium-emphasis mb-3">
+            {{ give.holding?.itemName }}: you hold {{ give.holding?.qty }} {{ give.holding?.unit }}. It moves to your colleague once they confirm they received it.
+          </p>
+          <v-form ref="giveForm">
+            <InputLabel title="Colleague" required class="mb-1" />
+            <v-autocomplete
+              v-model="give.to"
+              :items="colleagues"
+              :item-title="(p: any) => p.label || p.name"
+              item-value="_id"
+              :loading="colleaguesLoading"
+              placeholder="Search a name"
+              density="comfortable"
+              no-filter
+              :rules="[(v: string) => !!v || 'Choose who you are giving it to']"
+              @update:search="searchColleagues"
+            />
+            <InputLabel title="Quantity" required class="mb-1" />
+            <v-text-field
+              v-model.number="give.qty"
+              type="number"
+              min="1"
+              density="comfortable"
+              :suffix="give.holding?.unit"
+              :rules="[giveQtyRule]"
+              hint="Counted in the unit the store issues it in."
+              persistent-hint
+            />
+            <InputLabel title="Note (optional)" class="mb-1 mt-2" />
+            <v-text-field v-model="give.note" density="comfortable" maxlength="500" placeholder="e.g. for the lift lobby job" />
+            <InputLabel title="Photo (optional)" class="mb-1" />
+            <InventoryPhotoInput v-model="give.photos" :max="1" />
+          </v-form>
+        </v-card-text>
+        <div class="screen-modal__footer">
+          <v-btn class="screen-btn-ghost" variant="outlined" :disabled="give.saving" @click="give.show = false">Cancel</v-btn>
+          <v-btn class="screen-btn-primary" variant="flat" :loading="give.saving" @click="submitGive">Give</v-btn>
+        </div>
+      </v-card>
+    </v-dialog>
     <InventoryLinesDialog v-model="showRequest" mode="request" :store="store" :site-id="siteId" @done="changed" />
   </div>
 </template>
@@ -68,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 },
@@ -80,14 +174,135 @@ 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[]>([]);
+const me = computed(() => String(currentUser.value?._id ?? ""));
+const toConfirm = computed(() => handovers.value.filter((h) => h.status === "pending" && String(h.to) === me.value));
+const waiting = computed(() => handovers.value.filter((h) => h.status === "pending" && String(h.from) === me.value));
+const acting = ref("");
+
+function activityText(t: TInventoryTransaction) {
+  if (t.type === "issue") return "Taken from store";
+  if (t.type === "return") return "Given back to store";
+  if (t.type === "handover") return (t.holderChange ?? 0) < 0 ? "Given to colleague" : "Received from colleague";
+  return typeLabels[t.type];
+}
+
+async function loadHandovers() {
+  try {
+    handovers.value = (await api.getHandovers(props.store._id, { mine: true, status: "pending", limit: 50 })).items;
+  } catch {
+    handovers.value = [];
+  }
+}
+
+async function decide(h: TInventoryHandover, accept: boolean) {
+  acting.value = h._id + (accept ? "a" : "d");
+  try {
+    if (accept) await api.acceptHandover(h._id);
+    else await api.declineHandover(h._id, "");
+    notify(accept ? `You received ${h.qty} ${h.unit} ${h.itemName} from ${h.fromName}.` : `Declined. The ${h.itemName} stays with ${h.fromName}.`);
+    changed();
+  } catch (error: any) {
+    notify(error?.data?.message || "Could not update the hand-over.", "error");
+  } finally {
+    acting.value = "";
+  }
+}
+
+async function cancelHandover(h: TInventoryHandover) {
+  acting.value = h._id + "c";
+  try {
+    await api.cancelHandover(h._id);
+    notify("Hand-over cancelled.");
+    changed();
+  } catch (error: any) {
+    notify(error?.data?.message || "Could not cancel.", "error");
+  } finally {
+    acting.value = "";
+  }
+}
+
+const giveForm = ref();
+const give = reactive({ show: false, holding: null as TInventoryHolding | null, to: "", qty: 1 as number | null, note: "", photos: [] as string[], saving: false });
+const pendingOf = (item: string) => waiting.value.filter((h) => String(h.item) === item).reduce((s, h) => s + h.qty, 0);
+const giveQtyRule = (v: number | null) => {
+  if (!v || v < 1 || !Number.isInteger(Number(v))) return "Enter a whole number";
+  const free = (give.holding?.qty ?? 0) - pendingOf(String(give.holding?.item ?? ""));
+  return Number(v) <= free || `You can give up to ${Math.max(0, free)}`;
+};
+const colleagues = ref<{ _id: string; name: string; label?: string }[]>([]);
+const colleaguesLoading = ref(false);
+let searchTimer: ReturnType<typeof setTimeout> | undefined;
+function searchColleagues(q: string) {
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(async () => {
+    colleaguesLoading.value = true;
+    try {
+      colleagues.value = await api.getColleagues(props.store._id, q || "");
+    } catch {
+      colleagues.value = [];
+    } finally {
+      colleaguesLoading.value = false;
+    }
+  }, 300);
+}
+function openGive(h: TInventoryHolding) {
+  Object.assign(give, { show: true, holding: h, to: "", qty: 1, note: "", photos: [], saving: false });
+  searchColleagues("");
+}
+async function submitGive() {
+  const { valid } = await giveForm.value.validate();
+  if (!valid || !give.holding) return;
+  give.saving = true;
+  try {
+    await api.createHandover(props.store._id, { site: props.siteId, item: String(give.holding.item), to: give.to, qty: Number(give.qty), note: give.note, photos: give.photos });
+    const name = colleagues.value.find((c) => c._id === give.to)?.name ?? "your colleague";
+    notify(`Waiting for ${name} to confirm.`);
+    give.show = false;
+    changed();
+  } catch (error: any) {
+    notify(error?.data?.message || "Could not give it.", "error");
+  } finally {
+    give.saving = false;
+  }
+}
 
 async function load() {
   loading.value = true;
@@ -103,14 +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);
-onMounted(load);
+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>