@7365admin1/layer-common 4.64.4 → 4.65.1

package/components/EntryPassInformation.vue

@@ -99,10 +99,18 @@
       <template v-if="passType === 'NFC'">
         <div class="mt-3">
           <InputLabel title="Select Cards" />
-          <v-select
+          <!-- Was a `v-select` over the first 100 cards, which only lets the
+               operator scroll. Typing now goes to the endpoint as `search`
+               (debounced, page 1), and reaching the end of the list fetches
+               the next page. Vuetify's own client-side match on `cardNo` is
+               left on as well: API-core does not read `search` yet, so until
+               it does that is what makes typing narrow the list. -->
+          <v-autocomplete
             v-model="selectedCards"
+            v-model:search="cardSearch"
             :items="filteredCardItems"
             :loading="cardsLoading"
+            :hide-no-data="false"
             item-title="cardNo"
             item-value="_id"
             density="comfortable"
@@ -110,10 +118,30 @@
             chips
             closable-chips
             hide-details
-            placeholder="Select cards..."
+            placeholder="Search or select cards..."
             return-object
+            @update:model-value="cardSearch = ''"
           >
-          </v-select>
+            <template #append-item>
+              <!-- Sentinel for infinite scroll. Keyed on the page so it
+                   re-mounts after each append: an IntersectionObserver only
+                   reports changes, so a sentinel that stays in view after a
+                   short page would otherwise never fire again. -->
+              <div
+                v-if="cardHasMore"
+                :key="cardPage"
+                v-intersect="onCardListEndReached"
+                class="d-flex justify-center py-2"
+              >
+                <v-progress-circular
+                  v-if="cardsLoadingMore"
+                  indeterminate
+                  size="20"
+                  width="2"
+                />
+              </div>
+            </template>
+          </v-autocomplete>
         </div>
 
         <div class="mt-3">
@@ -322,6 +350,7 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue", "update:quantity", "update:cards", "update:availableQrCount"]);
 
 const { getAvailableContractorCards, generateQrVms } = useAccessManagement();
+const { debounce } = useUtils();
 
 const nfcEnabled = computed(() => props.settings?.data?.settings?.nfcPass ?? false);
 const hidQrCodeEnabled = computed(() => {
@@ -367,21 +396,53 @@ const filteredCardItems = computed(() =>
     : cardItems.value
 );
 const cardsLoading = ref(false);
+const cardsLoadingMore = ref(false);
+// Typed text in the card picker. Reset after each pick so the next search
+// starts from the full list instead of staying narrowed to the last term.
+const cardSearch = ref("");
+const CARD_PAGE_SIZE = 100;
+const cardPage = ref(1);
+const cardHasMore = ref(false);
+// Bumped on every request. A response whose number is no longer current is
+// dropped, so a slow page-1 search cannot overwrite a newer one and a
+// load-more cannot append onto a list that has since been replaced.
+let cardRequestSeq = 0;
 const generating = ref(false);
 const availableCount = ref<number | null>(null);
 
-async function fetchCards(type: "NFC" | "QRCODE" = "NFC") {
+// The picker is NFC-only (see the template's `v-if`), so only NFC fetches
+// carry the search term and only NFC reacts to typing. The QR path keeps
+// its page-1, no-search fetch and its top-up generation untouched.
+const cardFetchType = computed<"NFC" | "QRCODE" | null>(() =>
+  passType.value === "NFC" ? "NFC" : passType.value === "QR" ? "QRCODE" : null,
+);
+
+async function fetchCards(
+  type: "NFC" | "QRCODE" = "NFC",
+  opts: { page?: number; append?: boolean } = {},
+) {
   if (!props.siteId || !props.unitId) return;
-  cardsLoading.value = true;
+  const page = opts.page ?? 1;
+  const append = opts.append === true;
+  const seq = ++cardRequestSeq;
+  const query = {
+    type,
+    siteId: props.siteId,
+    unitId: props.unitId,
+    page,
+    limit: CARD_PAGE_SIZE,
+    // Vuetify writes null into the search model when it clears the field.
+    search: type === "NFC" ? cardSearch.value ?? "" : undefined,
+  };
+
+  if (append) cardsLoadingMore.value = true;
+  else cardsLoading.value = true;
   if (type === "QRCODE") emit("update:availableQrCount", null);
   try {
-    const res = await getAvailableContractorCards({
-      type,
-      siteId: props.siteId,
-      unitId: props.unitId,
-    });
-    cardItems.value = res?.data?.[0]?.items ?? [];
-    availableCount.value = (res?.data?.[2] as any)?.count ?? cardItems.value.length;
+    const res = await getAvailableContractorCards(query);
+    if (seq !== cardRequestSeq) return;
+    let items: any[] = res?.data?.[0]?.items ?? [];
+    availableCount.value = (res?.data?.[2] as any)?.count ?? items.length;
 
     if (type === "QRCODE" && props.settings?.data?._id && availableCount.value !== null && availableCount.value > 0 && availableCount.value < 50) {
       cardsLoading.value = false;
@@ -392,30 +453,64 @@ async function fetchCards(type: "NFC" | "QRCODE" = "NFC") {
         quantity: 50,
       });
       // Re-fetch to get the updated count after generation
-      const refreshed = await getAvailableContractorCards({
-        type,
-        siteId: props.siteId,
-        unitId: props.unitId,
-      });
-      cardItems.value = refreshed?.data?.[0]?.items ?? [];
-      availableCount.value = (refreshed?.data?.[2] as any)?.count ?? cardItems.value.length;
+      const refreshed = await getAvailableContractorCards(query);
+      if (seq !== cardRequestSeq) return;
+      items = refreshed?.data?.[0]?.items ?? [];
+      availableCount.value = (refreshed?.data?.[2] as any)?.count ?? items.length;
       generating.value = false;
     }
 
+    cardItems.value = append ? [...cardItems.value, ...items] : items;
+    cardPage.value = page;
+    // A short page is the last one. An exact multiple of the page size costs
+    // one extra, empty fetch, which then turns this off.
+    cardHasMore.value = items.length === CARD_PAGE_SIZE;
+
     if (type === "QRCODE") emit("update:availableQrCount", availableCount.value);
   } catch (err: any) {
+    if (seq !== cardRequestSeq) return;
     const msg = err?.data?.message ?? err?.message ?? String(err);
     showSnackbar(`Entry pass service error: ${msg}`);
-    availableCount.value = null;
-    cardItems.value = [];
     generating.value = false;
-    if (type === "QRCODE") emit("update:availableQrCount", null);
+    // A failed load-more keeps what is already listed; a failed first page
+    // clears the list as before.
+    if (!append) {
+      availableCount.value = null;
+      cardItems.value = [];
+      cardHasMore.value = false;
+      if (type === "QRCODE") emit("update:availableQrCount", null);
+    }
   } finally {
-    cardsLoading.value = false;
-    generating.value = false;
+    // Only the request that is still current may clear the flags; a stale
+    // one finishing late must not switch off a newer request's spinner.
+    if (seq === cardRequestSeq) {
+      cardsLoading.value = false;
+      cardsLoadingMore.value = false;
+      generating.value = false;
+    }
   }
 }
 
+function onCardListEndReached(isIntersecting: boolean) {
+  if (!isIntersecting || !cardHasMore.value) return;
+  if (cardsLoading.value || cardsLoadingMore.value) return;
+  const type = cardFetchType.value;
+  if (!type) return;
+  fetchCards(type, { page: cardPage.value + 1, append: true });
+}
+
+const searchCards = debounce(() => {
+  if (cardFetchType.value !== "NFC") return;
+  fetchCards("NFC");
+}, 500);
+
+// Vuetify hands back null when it clears the field, and re-sets "" on blur;
+// only a real change of the trimmed term should cost a request.
+watch(cardSearch, (val, old) => {
+  if ((val ?? "").trim() === (old ?? "").trim()) return;
+  searchCards();
+});
+
 function addCard(card: any) {
   const already = selectedCards.value.some((c) => c._id === card._id);
   if (!already) selectedCards.value = [...selectedCards.value, card];

package/components/ImportExcelDialog.vue

@@ -0,0 +1,136 @@
+<template>
+  <v-dialog v-model="show" max-width="820" persistent 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" :disabled="busy" @click="show = false" />
+      </v-card-title>
+      <v-card-text class="screen-modal__body">
+        <ol class="text-body-2 mb-4 pl-4">
+          <li class="mb-1">
+            Download the template. It already has this property's lists as dropdowns and an Instructions sheet.
+            <v-btn variant="text" size="small" class="text-none" prepend-icon="mdi-download" :loading="downloading" @click="download">Download template</v-btn>
+          </li>
+          <li class="mb-1">{{ fillHint }}</li>
+          <li class="mb-1">Upload it and press <strong>Check file</strong>. Nothing is saved yet — you see every row first.</li>
+          <li>If any row needs fixing, fix it in the file and upload it again. {{ duplicateNote }}</li>
+        </ol>
+
+        <v-file-input
+          v-model="file"
+          accept=".xlsx"
+          label="Excel file made from the template (.xlsx)"
+          prepend-icon="mdi-file-excel-outline"
+          density="comfortable"
+          show-size
+          :disabled="busy"
+          @update:model-value="result = null"
+        />
+
+        <template v-if="result">
+          <v-alert :type="result.committed ? 'success' : result.errors ? 'error' : 'info'" variant="tonal" class="mb-3">
+            {{ importSummary(result, noun) }}
+            <div v-if="result.errors && !result.committed" class="mt-2">
+              Fix the rows marked "Needs fixing" in your file, save it, then choose it again above.
+              <br />
+              <v-btn size="small" variant="outlined" class="text-none mt-2" prepend-icon="mdi-file-download-outline" @click="downloadErrors">Download the list of rows to fix</v-btn>
+            </div>
+          </v-alert>
+          <v-table density="compact" height="300" fixed-header>
+            <thead>
+              <tr>
+                <th style="width: 72px">Row</th>
+                <th>{{ nameLabel }}</th>
+                <th>Result</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="r in result.rows" :key="r.row">
+                <td>{{ r.row }}</td>
+                <td>{{ r.name || "—" }}</td>
+                <td :class="r.status === 'error' ? 'text-error' : r.status === 'skipped' ? 'text-medium-emphasis' : 'text-success'">
+                  <strong>{{ IMPORT_STATUS_LABEL[r.status] }}</strong>{{ r.message ? ` — ${r.message}` : "" }}
+                </td>
+              </tr>
+            </tbody>
+          </v-table>
+        </template>
+      </v-card-text>
+      <div class="screen-modal__footer">
+        <v-btn class="screen-btn-ghost" variant="outlined" :disabled="busy" @click="show = false">{{ result?.committed ? "Close" : "Cancel" }}</v-btn>
+        <v-btn v-if="!result" class="screen-btn-primary" variant="flat" :disabled="!selected" :loading="busy" @click="run(false)">Check file</v-btn>
+        <v-btn v-else-if="!result.committed && !result.errors" class="screen-btn-primary" variant="flat" :disabled="!result.ready" :loading="busy" @click="run(true)">
+          Save {{ result.ready }} {{ noun }}
+        </v-btn>
+      </div>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { saveBlob } from "../composables/useInventory";
+import { IMPORT_STATUS_LABEL, importErrorReportCsv, importSummary, type TImportResult } from "../utils/import-result";
+
+/**
+ * One "Import from Excel" dialog for every list: download the live template,
+ * check the file (nothing saved), see every row with its row number and
+ * reason, download the rows to fix, and save only an error-free file.
+ */
+const show = defineModel<boolean>({ default: false });
+const props = defineProps({
+  title: { type: String, required: true },
+  /** Plural noun for the rows, e.g. "items", "units". */
+  noun: { type: String, default: "rows" },
+  nameLabel: { type: String, default: "Name" },
+  fillHint: { type: String, default: "Fill in one row per line, starting under the grey example row. Columns marked * are required." },
+  duplicateNote: { type: String, default: "Rows already in the system are skipped and left unchanged." },
+  templateFileName: { type: String, required: true },
+  downloadTemplate: { type: Function as PropType<() => Promise<Blob>>, required: true },
+  check: { type: Function as PropType<(file: File) => Promise<TImportResult>>, required: true },
+  commit: { type: Function as PropType<(file: File) => Promise<TImportResult>>, required: true },
+});
+const emit = defineEmits<{ done: [result: TImportResult]; error: [message: string] }>();
+
+const file = ref<File | File[] | null>(null);
+const selected = computed<File | null>(() => (Array.isArray(file.value) ? (file.value[0] ?? null) : file.value));
+const result = ref<TImportResult | null>(null);
+const busy = ref(false);
+const downloading = ref(false);
+
+async function download() {
+  downloading.value = true;
+  try {
+    saveBlob(await props.downloadTemplate(), props.templateFileName);
+  } catch (error: any) {
+    emit("error", error?.data?.message || "Could not download the template.");
+  } finally {
+    downloading.value = false;
+  }
+}
+
+function downloadErrors() {
+  if (!result.value) return;
+  saveBlob(new Blob([importErrorReportCsv(result.value)], { type: "text/csv;charset=utf-8" }), props.templateFileName.replace(/\.xlsx$/i, "") + "-rows-to-fix.csv");
+}
+
+async function run(commit: boolean) {
+  if (!selected.value) return;
+  busy.value = true;
+  try {
+    result.value = await (commit ? props.commit : props.check)(selected.value);
+    if (commit) emit("done", result.value);
+  } catch (error: any) {
+    emit("error", error?.data?.message || "Could not read the file.");
+  } finally {
+    busy.value = false;
+  }
+}
+
+watch(show, (open) => {
+  if (open) {
+    file.value = null;
+    result.value = null;
+  }
+});
+</script>

package/components/InventoryImportDialog.vue

@@ -1,117 +1,46 @@
 <template>
-  <v-dialog v-model="show" max-width="760" persistent scrollable>
-    <v-card class="screen-modal">
-      <v-card-title class="d-flex align-center">
-        Import Items from Excel
-        <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">
-        <ol class="text-body-2 mb-4 pl-4">
-          <li class="mb-1">
-            Download the template and fill in one row per item, with the quantity in the store today.
-            <v-btn variant="text" size="small" class="text-none" prepend-icon="mdi-download" :loading="downloading" @click="download">Download template</v-btn>
-          </li>
-          <li class="mb-1">Upload the file. We check it first; nothing is saved yet.</li>
-          <li>Review the result and confirm. Items already in the store are skipped, so uploading twice never doubles stock.</li>
-        </ol>
-
-        <v-file-input
-          v-model="file"
-          accept=".xlsx"
-          label="Excel file (.xlsx)"
-          prepend-icon="mdi-file-excel-outline"
-          density="comfortable"
-          show-size
-          @update:model-value="result = null"
-        />
-
-        <template v-if="result">
-          <v-alert :type="result.errors ? 'warning' : 'success'" variant="tonal" class="mb-3">
-            <template v-if="result.committed">{{ result.ready }} item(s) added.</template>
-            <template v-else>{{ result.ready }} item(s) ready to add.</template>
-            <span v-if="result.skipped"> {{ result.skipped }} skipped.</span>
-            <span v-if="result.errors"> {{ result.errors }} row(s) need fixing (they will not be added).</span>
-          </v-alert>
-          <v-table density="compact" height="280" fixed-header>
-            <thead>
-              <tr>
-                <th>Row</th>
-                <th>Item</th>
-                <th>Result</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="r in result.rows" :key="r.row">
-                <td>{{ r.row }}</td>
-                <td>{{ r.name || "—" }}</td>
-                <td :class="r.status === 'error' ? 'text-error' : r.status === 'skipped' ? 'text-medium-emphasis' : 'text-success'">
-                  {{ label[r.status] }}{{ r.message ? `: ${r.message}` : "" }}
-                </td>
-              </tr>
-            </tbody>
-          </v-table>
-        </template>
-      </v-card-text>
-      <div class="screen-modal__footer">
-        <v-btn class="screen-btn-ghost" variant="outlined" :disabled="busy" @click="show = false">{{ result?.committed ? "Close" : "Cancel" }}</v-btn>
-        <v-btn v-if="!result" class="screen-btn-primary" variant="flat" :disabled="!selected" :loading="busy" @click="run(false)">Check file</v-btn>
-        <v-btn v-else-if="!result.committed" class="screen-btn-primary" variant="flat" :disabled="!result.ready" :loading="busy" @click="run(true)">
-          Add {{ result.ready }} item(s)
-        </v-btn>
-      </div>
-    </v-card>
-  </v-dialog>
+  <ImportExcelDialog
+    v-model="show"
+    :title="kind === 'receipts' ? 'Import Deliveries from Excel' : 'Import Items from Excel'"
+    :noun="kind === 'receipts' ? 'delivery lines' : 'items'"
+    name-label="Item"
+    :fill-hint="
+      kind === 'receipts'
+        ? 'One row per item delivered: date received, supplier, PO no., the item (pick from the dropdown), quantity and price. Rows with the same date, supplier and PO no. are saved as one delivery.'
+        : 'One row per item. Unit, Packing and Category have dropdowns with this store\'s values. Current Stock and the columns after it are the opening stock (date, supplier, PO no.), recorded like a delivery.'
+    "
+    :duplicate-note="kind === 'receipts' ? 'Every row is a delivery — uploading the same file twice records it twice.' : 'Items already in the store are skipped and never changed, so uploading twice never doubles stock.'"
+    :template-file-name="kind === 'receipts' ? `receive-stock-${slug}.xlsx` : `inventory-items-${slug}.xlsx`"
+    :download-template="downloadTemplate"
+    :check="(file: File) => run(file, false)"
+    :commit="(file: File) => run(file, true)"
+    @done="finished"
+    @error="(message: string) => notify(message, 'error')"
+  />
 </template>
 
 <script setup lang="ts">
-import useInventory, { saveBlob } from "../composables/useInventory";
+import useInventory from "../composables/useInventory";
+import type { TImportResult } from "../utils/import-result";
 
 const show = defineModel<boolean>({ default: false });
-const props = defineProps({ store: { type: Object as PropType<TInventoryStore>, required: true } });
+const props = defineProps({
+  store: { type: Object as PropType<TInventoryStore>, required: true },
+  /** items: the item list with opening stock. receipts: bulk deliveries of existing items. */
+  kind: { type: String as PropType<"items" | "receipts">, default: "items" },
+});
 const emit = defineEmits(["done"]);
 
-const { importItems, importTemplate } = useInventory();
+const { importItems, importTemplate, receiveTemplate, importReceipts } = useInventory();
 const notify = inject<(text: string, color?: string) => void>("inventoryNotify", () => {});
+const slug = computed(() => String(props.store.name ?? "store").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "store");
 
-const file = ref<File | File[] | null>(null);
-const selected = computed<File | null>(() => (Array.isArray(file.value) ? file.value[0] ?? null : file.value));
-const result = ref<Awaited<ReturnType<typeof importItems>> | null>(null);
-const busy = ref(false);
-const downloading = ref(false);
-const label: Record<string, string> = { ready: "Ready", added: "Added", skipped: "Skipped", error: "Needs fixing" };
+const downloadTemplate = () => (props.kind === "receipts" ? receiveTemplate(props.store._id) : importTemplate(props.store._id));
+const run = (file: File, commit: boolean) =>
+  (props.kind === "receipts" ? importReceipts(props.store._id, file, commit) : importItems(props.store._id, file, commit)) as Promise<TImportResult>;
 
-async function download() {
-  downloading.value = true;
-  try {
-    saveBlob(await importTemplate(), "inventory-import-template.xlsx");
-  } catch {
-    notify("Could not download the template.", "error");
-  } finally {
-    downloading.value = false;
-  }
+function finished(result: TImportResult) {
+  notify(props.kind === "receipts" ? `${result.ready} delivery line(s) received.` : `${result.ready} item(s) added.`);
+  emit("done");
 }
-
-async function run(commit: boolean) {
-  if (!selected.value) return;
-  busy.value = true;
-  try {
-    result.value = await importItems(props.store._id, selected.value, commit);
-    if (commit) {
-      notify(`${result.value.ready} item(s) added.`);
-      emit("done");
-    }
-  } catch (error: any) {
-    notify(error?.data?.message || "Could not read the file.", "error");
-  } finally {
-    busy.value = false;
-  }
-}
-
-watch(show, (open) => {
-  if (open) {
-    file.value = null;
-    result.value = null;
-  }
-});
 </script>

package/components/InventoryItemDetail.vue

@@ -12,7 +12,7 @@
           <div class="flex-grow-1">
             <div class="text-h5 mb-1" :class="item.lowStock ? 'text-error' : ''">{{ item.onHand }} {{ item.unit }} in store</div>
             <div class="text-body-2 text-medium-emphasis">
-              {{ [item.code && `Code ${item.code}`, item.category, item.packing, item.reorderLevel ? `Alert at ${item.reorderLevel}` : "", item.unitCost !== undefined ? `$${Number(item.unitCost).toFixed(2)} each` : ""].filter(Boolean).join(" · ") }}
+              {{ [inventoryItemMeta(item), item.reorderLevel ? `Alert at ${item.reorderLevel}` : "", item.unitCost !== undefined ? `$${Number(item.unitCost).toFixed(2)} each` : ""].filter(Boolean).join(" · ") }}
             </div>
             <div v-if="item.description" class="text-body-2 mt-2">{{ item.description }}</div>
           </div>
@@ -77,6 +77,7 @@
 import useInventory from "../composables/useInventory";
 import useFile from "../composables/useFile";
 import useUtils from "../composables/useUtils";
+import { inventoryItemMeta } from "../utils/inventory-store-label";
 
 const show = defineModel<boolean>({ default: false });
 const props = defineProps({
@@ -114,7 +115,7 @@ function describe(t: TInventoryTransaction) {
       t.reference || "",
     );
   if (t.type === "adjust") parts.push(t.remarks || "");
-  if (t.type === "opening") parts.push(t.remarks || "");
+  if (t.type === "opening") parts.push(t.supplier || "", t.reference ? `PO ${t.reference}` : "", t.receivedBy ? `received by ${t.receivedBy}` : "", t.remarks || "");
   return parts.filter(Boolean).join(" · ");
 }
 

package/components/InventoryItemDialog.vue

@@ -35,11 +35,39 @@
               <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]" 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" />
-              <v-text-field v-model.number="f.openingQty" type="number" min="0" density="comfortable" :rules="[wholeRule]" hint="Quantity in the store today" persistent-hint />
-            </v-col>
           </v-row>
+          <!-- Stock already on the shelf, recorded like a delivery (one "Opening stock" entry in the item's history). -->
+          <template v-if="!item">
+            <div class="text-subtitle-2 mt-4">Opening stock</div>
+            <div class="text-caption text-medium-emphasis mb-2">
+              Stock you already have. It is recorded like a delivery and shows in the item's history and the Purchases report as "Opening stock".
+              Supplier and PO no. are optional — old stock may have none. Leave the quantity at 0 if you have none yet.
+            </div>
+            <v-row dense>
+              <v-col cols="12" sm="4">
+                <InputLabel title="Quantity" class="mb-1" />
+                <v-text-field v-model.number="f.openingQty" type="number" min="0" density="comfortable" :rules="[wholeRule]" :suffix="f.unit || ''" hint="How many are in the store now" persistent-hint />
+              </v-col>
+              <v-col cols="12" sm="4">
+                <InputLabel title="Date received (as at)" class="mb-1" />
+                <v-text-field v-model="f.openingDate" type="date" :max="today" density="comfortable" :disabled="!f.openingQty" hint="Blank = today" persistent-hint />
+              </v-col>
+              <v-col cols="12" sm="4">
+                <InputLabel title="Received by" class="mb-1" />
+                <v-text-field v-model="f.openingReceivedBy" density="comfortable" maxlength="120" :disabled="!f.openingQty" placeholder="You" hint="Blank = you" persistent-hint />
+              </v-col>
+              <v-col cols="12" sm="6">
+                <InputLabel title="Supplier" class="mb-1" />
+                <v-text-field v-model="f.openingSupplier" density="comfortable" maxlength="200" :disabled="!f.openingQty" hint="Optional" persistent-hint />
+              </v-col>
+              <v-col cols="12" sm="6">
+                <InputLabel title="PO no." class="mb-1" />
+                <v-text-field v-model="f.openingReference" density="comfortable" maxlength="100" :disabled="!f.openingQty" hint="Optional" persistent-hint />
+              </v-col>
+            </v-row>
+            <InputLabel title="Remarks" class="mb-1 mt-2" />
+            <v-text-field v-model="f.openingRemarks" density="comfortable" maxlength="1000" :disabled="!f.openingQty" placeholder="e.g. counted during stock-take" />
+          </template>
           <InputLabel title="Description" class="mb-1 mt-2" />
           <v-textarea v-model="f.description" rows="2" auto-grow density="comfortable" placeholder="Size, model, where it is used" />
           <InputLabel title="Photo" class="mb-1" />
@@ -63,7 +91,7 @@
 </template>
 
 <script setup lang="ts">
-import useInventory from "../composables/useInventory";
+import useInventory, { pickedDate } from "../composables/useInventory";
 import useUtils from "../composables/useUtils";
 
 const show = defineModel<boolean>({ default: false });
@@ -83,7 +111,23 @@ const moneyRule = (v: any) => v === "" || v === null || Number(v) >= 0 || "Enter
 
 const form = ref();
 const saving = ref(false);
-const blank = () => ({ name: "", unit: "pcs", packing: "", code: "", category: "", reorderLevel: 0, unitCost: 0, openingQty: 0, description: "" });
+const blank = () => ({
+  name: "",
+  unit: "pcs",
+  packing: "",
+  code: "",
+  category: "",
+  reorderLevel: 0,
+  unitCost: 0,
+  openingQty: 0,
+  openingDate: "",
+  openingSupplier: "",
+  openingReference: "",
+  openingReceivedBy: "",
+  openingRemarks: "",
+  description: "",
+});
+const today = new Date().toLocaleDateString("en-CA");
 const f = reactive(blank());
 const photo = ref<string[]>([]);
 const inUse = ref(true);
@@ -116,7 +160,18 @@ async function save() {
       await updateItem(props.item._id, { ...body, status: inUse.value ? "active" : "inactive" });
       notify("Item saved.");
     } else {
-      await createItem(props.store._id, { ...body, openingQty: Number(f.openingQty || 0) });
+      const qty = Number(f.openingQty || 0);
+      const opening = qty
+        ? {
+            openingQty: qty,
+            openingDate: pickedDate(f.openingDate),
+            openingSupplier: f.openingSupplier,
+            openingReference: f.openingReference,
+            openingReceivedBy: f.openingReceivedBy,
+            openingRemarks: f.openingRemarks,
+          }
+        : { openingQty: 0 };
+      await createItem(props.store._id, { ...body, ...opening });
       notify("Item added.");
     }
     show.value = false;

package/components/InventoryReportsTab.vue

@@ -184,7 +184,7 @@ const help: Record<string, string> = {
   movement: "For each item: stock at the start of the month, what came in, 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.",
   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, with totals by month and by supplier, to see how purchasing changes over time.",
+  purchases: "Every delivery received, and opening stock entered with new items (Type: Opening stock), with totals by month and by supplier.",
 };
 
 const headers: Record<string, any[]> = {
@@ -231,6 +231,7 @@ const headers: Record<string, any[]> = {
   ],
   purchases: [
     { title: "Date", key: "date" },
+    { title: "Type", key: "kind" },
     { title: "Supplier", key: "supplier" },
     { title: "PO No.", key: "reference" },
     { title: "Item", key: "itemName" },

package/components/InventorySettingsTab.vue

@@ -39,6 +39,7 @@
 <script setup lang="ts">
 import useInventory from "../composables/useInventory";
 import useUtils from "../composables/useUtils";
+import { inventorySiteOptions } from "../utils/inventory-store-label";
 
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },
@@ -57,11 +58,7 @@ const sites = ref<string[]>([]);
 const showInResidentApp = ref(false);
 const showCostInResidentApp = ref(false);
 
-const siteItems = computed(() => {
-  const known = new Map(props.orgSites.map((s) => [s._id, s.name]));
-  for (const id of props.store.sites) if (!known.has(id)) known.set(id, "Current property");
-  return [...known].map(([_id, name]) => ({ _id, name }));
-});
+const siteItems = computed(() => inventorySiteOptions(props.orgSites, props.store));
 
 function reset() {
   name.value = props.store.name;