@7365admin1/layer-common 4.60.0 → 4.61.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 4.61.0
+
+### Minor Changes
+
+- 872164d: Inventory is easier to use: a new store shows only **Add Items** until it has items; the item form explains Unit, Packing, the low-stock alert and unit price; the item picker is labelled; requests read "Waiting for approval" / "Approved" with "N handed over (asked M)" and who decided and when; cancelling a request asks first; item history shows who did each step; Record Usage says "Tenant unit"; the Usage report shows the before/after photos the supervisor checks; "Count diff." reads "Stock count +/-"; a technician's activity says "Taken from store".
+
 ## 4.60.0
 
 ### Minor Changes
@@ -1661,11 +1667,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/InventoryItemDetail.vue

@@ -46,6 +46,7 @@
               <th class="text-right">Store</th>
               <th class="text-right">Balance</th>
               <th>Details</th>
+              <th>By</th>
             </tr>
           </thead>
           <tbody>
@@ -57,9 +58,10 @@
               </td>
               <td class="text-right">{{ t.type === "use" ? "" : t.storeBalance }}</td>
               <td class="text-caption">{{ describe(t) }}</td>
+              <td class="text-caption">{{ t.createdByName }}</td>
             </tr>
             <tr v-if="!history.length && !loading">
-              <td colspan="5" class="text-center text-medium-emphasis py-4">Nothing recorded yet.</td>
+              <td colspan="6" class="text-center text-medium-emphasis py-4">Nothing recorded yet.</td>
             </tr>
           </tbody>
         </v-table>

package/components/InventoryItemDialog.vue

@@ -13,11 +13,11 @@
           <v-row dense>
             <v-col cols="12" sm="4">
               <InputLabel title="Unit" required class="mb-1" />
-              <v-combobox v-model="f.unit" :items="units" :rules="[requiredRule]" density="comfortable" />
+              <v-combobox v-model="f.unit" :items="units" :rules="[requiredRule]" density="comfortable" hint="How you count it (pcs, box, can)" persistent-hint />
             </v-col>
             <v-col cols="12" sm="4">
               <InputLabel title="Packing" class="mb-1" />
-              <v-text-field v-model="f.packing" density="comfortable" placeholder="e.g. 25 pcs / box" maxlength="60" />
+              <v-text-field v-model="f.packing" density="comfortable" placeholder="e.g. 25 pcs / box" maxlength="60" hint="How the supplier packs it (info only)" persistent-hint />
             </v-col>
             <v-col cols="12" sm="4">
               <InputLabel title="Item code" class="mb-1" />
@@ -29,11 +29,11 @@
             </v-col>
             <v-col cols="12" sm="4">
               <InputLabel title="Low stock alert at" class="mb-1" />
-              <v-text-field v-model.number="f.reorderLevel" type="number" min="0" density="comfortable" :rules="[wholeRule]" hint="0 = no alert" persistent-hint />
+              <v-text-field v-model.number="f.reorderLevel" type="number" min="0" density="comfortable" :rules="[wholeRule]" hint="Alert when stock falls to this. 0 = no alert" persistent-hint />
             </v-col>
             <v-col cols="12" sm="4">
               <InputLabel title="Unit price" class="mb-1" />
-              <v-text-field v-model.number="f.unitCost" type="number" min="0" step="0.01" prefix="$" density="comfortable" :rules="[moneyRule]" />
+              <v-text-field v-model.number="f.unitCost" type="number" min="0" step="0.01" prefix="$" density="comfortable" :rules="[moneyRule]" hint="Price of one unit" persistent-hint />
             </v-col>
             <v-col v-if="!item" cols="12" sm="4">
               <InputLabel title="Current stock" class="mb-1" />

package/components/InventoryLinesDialog.vue

@@ -39,7 +39,8 @@
               :items="choices"
               item-title="name"
               item-value="_id"
-              placeholder="Choose item"
+              label="Item"
+              placeholder="Type to search"
               density="comfortable"
               :rules="[requiredRule]"
               class="flex-grow-1"
@@ -75,7 +76,9 @@
             />
             <v-btn v-if="rows.length > 1" icon="mdi-delete-outline" variant="text" aria-label="Remove line" @click="rows.splice(i, 1)" />
           </div>
-          <v-btn variant="text" class="text-none mb-4" prepend-icon="mdi-plus" @click="rows.push(blank())">Add another item</v-btn>
+          <div class="mb-4">
+            <v-btn variant="text" class="text-none" prepend-icon="mdi-plus" @click="rows.push(blank())">Add another item</v-btn>
+          </div>
 
           <v-row v-if="mode === 'receive'" dense>
             <v-col cols="12" md="6">

package/components/InventoryMyStockTab.vue

@@ -44,7 +44,7 @@
         <tr v-for="t in activity" :key="t._id">
           <td class="text-no-wrap">{{ standardFormatDate(t.date) }}</td>
           <td>{{ t.itemName }}</td>
-          <td>{{ typeLabels[t.type] }}</td>
+          <td>{{ t.type === "issue" ? "Taken from store" : t.type === "return" ? "Given back to store" : typeLabels[t.type] }}</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(" · ") }}

package/components/InventoryReportsTab.vue

@@ -111,6 +111,15 @@
       <template #item.totalCost="{ value }">{{ money(value) }}</template>
       <template #item.receivedCost="{ value }">{{ money(value) }}</template>
       <template #item.usedCost="{ value }">{{ money(value) }}</template>
+      <!-- The supervisor checks usage against the technician's before/after photos. -->
+      <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>
+        </div>
+        <span v-else class="text-medium-emphasis">—</span>
+      </template>
       <template #item.checkedByName="{ item }">
         <v-chip v-if="item.checkedByName" size="x-small" color="success" variant="tonal">{{ item.checkedByName }}</v-chip>
         <span v-else class="text-medium-emphasis">—</span>
@@ -125,6 +134,7 @@
 <script setup lang="ts">
 import useInventory, { saveBlob } from "../composables/useInventory";
 import useUtils from "../composables/useUtils";
+import useFile from "../composables/useFile";
 
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },
@@ -133,6 +143,11 @@ const props = defineProps({
 
 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 notify = inject<(text: string, color?: string) => void>("inventoryNotify", () => {});
 
 const now = new Date();
@@ -174,7 +189,7 @@ const headers: Record<string, any[]> = {
     { title: "Purchase cost", key: "receivedCost" },
     { title: "Issued", key: "issued" },
     { title: "Returned", key: "returned" },
-    { title: "Count diff.", key: "adjusted" },
+    { title: "Stock count +/-", key: "adjusted" },
     { title: "End", key: "closing" },
     { title: "Used", key: "usedByTechnicians" },
     { title: "Usage cost", key: "usedCost" },
@@ -185,11 +200,12 @@ const headers: Record<string, any[]> = {
     { title: "Where", key: "locationType" },
     { title: "Unit / Area", key: "location" },
     { title: "Tenant", key: "tenantName" },
-    { title: "Item", key: "itemName" },
+    { title: "Item", key: "itemName", minWidth: "180px" },
     { title: "Qty", key: "qty" },
     { title: "Unit price", key: "unitCost" },
     { title: "Total", key: "totalCost" },
     { title: "Technician", key: "technician" },
+    { title: "Photos", key: "photos", sortable: false },
     { title: "Reference", key: "reference" },
     { title: "Reported by", key: "reportedBy" },
     { title: "Checked by", key: "checkedByName" },

package/components/InventoryRequestsTab.vue

@@ -3,7 +3,7 @@
     <div class="d-flex flex-wrap ga-2 align-center mb-3">
       <v-btn-toggle v-model="status" mandatory density="comfortable" variant="outlined" divided>
         <v-btn value="pending" class="text-none">Waiting</v-btn>
-        <v-btn value="issued" class="text-none">Issued</v-btn>
+        <v-btn value="issued" class="text-none">Approved</v-btn>
         <v-btn value="rejected" class="text-none">Rejected</v-btn>
         <v-btn value="" class="text-none">All</v-btn>
       </v-btn-toggle>
@@ -15,7 +15,7 @@
 
     <v-progress-linear v-if="loading" indeterminate color="primary" />
     <div v-else-if="!requests.length" class="text-center text-medium-emphasis py-10">
-      {{ status === "pending" ? "No requests waiting." : "No requests to show." }}
+      {{ status === "pending" ? (store.access.canApprove ? "No requests waiting for approval." : "You have no requests waiting. Use Request Stock to ask the store for items.") : "No requests to show." }}
     </div>
 
     <AppCard v-for="r in requests" :key="r._id" class="pa-4 mb-3">
@@ -30,11 +30,11 @@
         </template>
       </div>
       <div v-for="l in r.lines" :key="String(l.item)" class="text-body-2">
-        {{ l.itemName }} — {{ r.status === "issued" ? `${l.issuedQty} of ${l.qty}` : l.qty }} {{ l.unit }}
+        {{ requestLineText(r.status, l) }}
       </div>
       <div v-if="r.reference || r.remarks" class="text-caption text-medium-emphasis mt-1">{{ [r.reference, r.remarks].filter(Boolean).join(" · ") }}</div>
       <div v-if="r.decidedByName" class="text-caption mt-1">
-        {{ r.status === "issued" ? "Issued" : "Rejected" }} by {{ r.decidedByName }}{{ r.decisionRemarks ? `: ${r.decisionRemarks}` : "" }}
+        {{ requestOutcomeText(r, standardFormatDateTime) }}
       </div>
     </AppCard>
 
@@ -86,6 +86,7 @@
 <script setup lang="ts">
 import useInventory from "../composables/useInventory";
 import useUtils from "../composables/useUtils";
+import { REQUEST_STATUS, requestLineText, requestOutcomeText } from "../utils/inventory-request-text";
 import useLocalAuth from "../composables/useLocalAuth";
 
 const props = defineProps({
@@ -99,12 +100,7 @@ const { standardFormatDateTime } = useUtils();
 const { currentUser } = useLocalAuth();
 const notify = inject<(text: string, color?: string) => void>("inventoryNotify", () => {});
 
-const chip: Record<string, { label: string; color: string }> = {
-  pending: { label: "Waiting", color: "warning" },
-  issued: { label: "Issued", color: "success" },
-  rejected: { label: "Rejected", color: "error" },
-  cancelled: { label: "Cancelled", color: "grey" },
-};
+const chip = REQUEST_STATUS;
 
 const status = ref("pending");
 const requests = ref<TInventoryRequest[]>([]);
@@ -136,6 +132,7 @@ function changed() {
 }
 
 async function cancel(r: TInventoryRequest) {
+  if (!confirm("Cancel this request? The store keeper will no longer see it.")) return;
   busyId.value = r._id;
   try {
     await api.cancelRequest(r._id);

package/components/InventoryStockTab.vue

@@ -10,10 +10,10 @@
     </v-row>
 
     <div class="d-flex flex-wrap ga-2 align-center mb-3">
-      <v-btn v-if="store.access.canManage" class="text-none screen-btn-primary" variant="flat" prepend-icon="mdi-truck-delivery-outline" @click="open('receive')">
+      <v-btn v-if="store.access.canManage && !storeEmpty" class="text-none screen-btn-primary" variant="flat" prepend-icon="mdi-truck-delivery-outline" @click="open('receive')">
         Receive Stock
       </v-btn>
-      <v-btn v-if="store.access.canApprove" class="text-none screen-btn-primary" variant="flat" prepend-icon="mdi-hand-extended-outline" @click="open('issue')">
+      <v-btn v-if="store.access.canApprove && !storeEmpty" class="text-none screen-btn-primary" variant="flat" prepend-icon="mdi-hand-extended-outline" @click="open('issue')">
         Issue Stock
       </v-btn>
       <v-btn v-if="store.access.canRequest && !store.access.canManage" class="text-none screen-btn-primary" variant="flat" prepend-icon="mdi-cart-arrow-down" @click="open('request')">
@@ -21,7 +21,7 @@
       </v-btn>
       <v-menu v-if="store.access.canManage">
         <template #activator="{ props: menu }">
-          <v-btn v-bind="menu" class="text-none screen-btn-ghost" variant="outlined" append-icon="mdi-chevron-down">Add Items</v-btn>
+          <v-btn v-bind="menu" class="text-none" :class="storeEmpty ? 'screen-btn-primary' : 'screen-btn-ghost'" :variant="storeEmpty ? 'flat' : 'outlined'" append-icon="mdi-chevron-down">Add Items</v-btn>
         </template>
         <v-list density="compact">
           <v-list-item prepend-icon="mdi-plus" title="Add one item" @click="editItem(null)" />
@@ -116,6 +116,8 @@ const lowCount = ref(0);
 const search = ref("");
 const lowOnly = ref(false);
 const limit = 20;
+// A new store has nothing to receive or hand out yet: its first step is Add Items.
+const storeEmpty = computed(() => !loading.value && total.value === 0 && !search.value && !lowOnly.value);
 const pageRange = computed(() => (total.value ? `${(page.value - 1) * limit + 1}-${Math.min(page.value * limit, total.value)} of ${total.value}` : "0 of 0"));
 
 const headers = computed(() => [

package/components/InventoryUsageDialog.vue

@@ -45,7 +45,7 @@
             :items="units"
             item-title="name"
             item-value="_id"
-            label="Unit"
+            label="Tenant unit (type the unit no. or tenant name)"
             placeholder="Search unit or tenant name"
             density="comfortable"
             no-filter

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.60.0",
+  "version": "4.61.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/utils/inventory-request-text.ts

@@ -0,0 +1,29 @@
+/**
+ * How a stock request reads to a technician and a store keeper: plain status
+ * words, how many were handed over against how many were asked, and who
+ * decided and when. Used by `InventoryRequestsTab`.
+ */
+type TLine = { itemName: string; unit: string; qty: number; issuedQty: number };
+type TRequest = { status: string; decidedByName?: string; decidedAt?: string; decisionRemarks?: string };
+
+export const REQUEST_STATUS: Record<string, { label: string; color: string }> = {
+  pending: { label: "Waiting for approval", color: "warning" },
+  issued: { label: "Approved", color: "success" },
+  rejected: { label: "Rejected", color: "error" },
+  cancelled: { label: "Cancelled", color: "grey" },
+};
+
+export function requestLineText(status: string, l: TLine) {
+  return status === "issued"
+    ? `${l.itemName} — ${l.issuedQty} ${l.unit} handed over (asked ${l.qty})`
+    : `${l.itemName} — ${l.qty} ${l.unit}`;
+}
+
+/** "Approved and handed over by X on <when> — remarks", or "" before a decision. */
+export function requestOutcomeText(r: TRequest, formatWhen: (d: string) => string) {
+  if (!r.decidedByName) return "";
+  const what = r.status === "issued" ? "Approved and handed over" : "Rejected";
+  const when = r.decidedAt ? ` on ${formatWhen(r.decidedAt)}` : "";
+  const why = r.decisionRemarks ? ` — ${r.decisionRemarks}` : "";
+  return `${what} by ${r.decidedByName}${when}${why}`;
+}