@7365admin1/layer-common 4.35.1-staging.426 → 4.35.1-staging.428

package/assets/css/primitives.css

@@ -982,6 +982,19 @@ select option {
   background: var(--accent);
 }
 
+/*
+ * A plain `v-switch` (no `.app-switch`). Vuetify paints its OFF track with the
+ * theme's surface-variant, which this theme sets to near-white (251,251,248),
+ * so on a white card an off switch showed only its thumb and did not read as
+ * a switch at all (Inventory > Settings, Site Settings, Online Forms...). Give
+ * the off track a visible tint in both themes; when ON, Vuetify's `bg-*`
+ * colour class (`!important`) still wins, so the checked colour is unchanged.
+ */
+.v-switch:not(.app-switch) .v-switch__track {
+  background-color: rgba(var(--v-theme-on-surface), 0.26);
+  opacity: 1;
+}
+
 .app-switch .v-selection-control__input {
   position: absolute;
   inset: 0;

package/components/AreaMain.vue

@@ -64,9 +64,8 @@
                       v-bind="t"
                       class="ma-1 screen-icon-btn"
                       variant="flat"
-                      href="/files/area-sample-data.xlsx"
-                      target="_blank"
-                      download
+                      :loading="templateDownloading"
+                      @click="downloadLiveTemplate"
                     >
                       <v-icon>mdi-download</v-icon>
                     </v-btn>
@@ -310,16 +309,25 @@
 
   <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 
-  <input
-    ref="fileInput"
-    type="file"
-    accept=".csv,.xlsx,.xls"
-    style="display: none"
-    @change="onFileSelected"
+  <ImportExcelDialog
+    v-model="showImport"
+    title="Import Areas from Excel"
+    noun="areas"
+    name-label="Area"
+    fill-hint="One area per row: its name, Type (Common or Toilet, from the dropdown), Set and the units to check, separated by commas."
+    duplicate-note="Areas already on the list (same name and type) are skipped and left unchanged."
+    template-file-name="areas-import-template.xlsx"
+    :download-template="() => downloadTemplate('areas', importQuery)"
+    :check="(file: File) => checkImport('areas', file, importQuery)"
+    :commit="(file: File) => commitImport('areas', file, importQuery)"
+    @done="getTaskRefresh()"
+    @error="(text: string) => showMessage(text, 'error')"
   />
 </template>
 
 <script setup lang="ts">
+import useImportTemplates from "../composables/useImportTemplates";
+import { saveBlob } from "../composables/useInventory";
 import QrcodeVue from "qrcode.vue";
 import useAreas from "../composables/useAreas";
 import useUnits from "../composables/useUnits";
@@ -406,7 +414,6 @@ const {
   createArea,
   updateArea,
   deleteArea,
-  uploadAreas,
   getAreaById,
   exportAreas,
 } = useAreas();
@@ -461,7 +468,6 @@ const selectedItem = ref<Record<string, any> | null>(null);
 const message = ref("");
 const messageSnackbar = ref(false);
 const messageColor = ref("");
-const fileInput = ref<HTMLInputElement | null>(null);
 
 const dialogShowMoreActions = ref(false);
 const dialogShowForm = ref(false);
@@ -573,29 +579,26 @@ async function handleDownloadExcel() {
 }
 
 function onImportData() {
-  fileInput.value?.click();
+  showImport.value = true;
 }
 
-async function onFileSelected(event: Event) {
-  const target = event.target as HTMLInputElement;
-  const file = target.files?.[0];
-
-  if (!file) return;
-
-    try {
-      submitting.value = true;
-      const response = await uploadAreas(file, props.site, props.serviceType);
-      showMessage(response?.message, "success");
-
-      await getTaskRefresh();
-    } catch (err: any) {
-      showMessage(err?.data?.message, "error");
-    } finally {
-      submitting.value = false;
-      if (target) target.value = "";
-    }
+// The template is made live from this property's own data (dropdowns, instructions, the property named inside).
+const { downloadTemplate, checkImport, commitImport } = useImportTemplates();
+const importQuery = computed(() => ({ site: String(props.site ?? ""), serviceType: props.serviceType || undefined }));
+const showImport = ref(false);
+const templateDownloading = ref(false);
+async function downloadLiveTemplate() {
+  templateDownloading.value = true;
+  try {
+    saveBlob(await downloadTemplate("areas", importQuery.value), "areas-import-template.xlsx");
+  } catch (error: any) {
+    showMessage(error?.data?.message || "Could not download the template.", "error");
+  } finally {
+    templateDownloading.value = false;
+  }
 }
 
+
 function onCreateItem() {
   dialogMode.value = "add";
   editingItem.value = {};

package/components/BuildingManagement/units.vue

@@ -25,8 +25,21 @@
           </AppButton>
         </template>
       </PageHeader>
-      <input ref="bulkUploadFileInput" type="file" accept=".xlsx,.xls,.csv" class="d-none"
-        @change="handleBulkUploadFileChange" />
+      <!-- Check-then-save import: every row shown with its row number and reason before anything is saved. -->
+      <ImportExcelDialog
+        v-model="showImport"
+        title="Import Blocks, Levels and Units from Excel"
+        noun="rows"
+        name-label="Building / Level / Unit"
+        fill-hint="One row per unit: block number, building name, level and unit. Building Name and Level have dropdowns with this property's own values."
+        duplicate-note="Units already on that level are skipped and left unchanged."
+        template-file-name="units-import-template.xlsx"
+        :download-template="() => downloadTemplate('building-units', { site })"
+        :check="(file: File) => checkImport('building-units', file, { site })"
+        :commit="(file: File) => commitImport('building-units', file, { site })"
+        @done="getBuildingUnit()"
+        @error="(text: string) => showMessage(text, 'error')"
+      />
     </v-col>
 
     <!-- Was `v-card` + a `grey-lighten-4` `v-toolbar` + a bare `v-data-table`. -->
@@ -160,6 +173,8 @@
 </template>
 
 <script setup lang="ts">
+import useImportTemplates from "../../composables/useImportTemplates";
+import { saveBlob } from "../../composables/useInventory";
 import { useDisplay } from 'vuetify/lib/composables/display.mjs';
 
 const props = defineProps({
@@ -339,28 +354,20 @@ async function handleDeleteBuildingUnit() {
   }
 }
 
-function openBulkUploadFilePicker() {
-  if (bulkUploadLoading.value) {
-    return;
-  }
+// The template is made live from this property's data; the import checks every row before saving.
+const { downloadTemplate, checkImport, commitImport } = useImportTemplates();
+const showImport = ref(false);
 
-  bulkUploadFile.value = null;
-  bulkUploadSkippedErrors.value = [];
-  bulkUploadSkippedSummary.value = [];
-  bulkUploadSkippedDialog.value = false;
-  if (bulkUploadFileInput.value) {
-    bulkUploadFileInput.value.value = "";
-    bulkUploadFileInput.value.click();
-  }
+function openBulkUploadFilePicker() {
+  showImport.value = true;
 }
 
-function downloadBulkUploadTemplate() {
-  const link = document.createElement("a");
-  link.href = "/files/Bulk-Upload-Unit-Template.xlsx";
-  link.download = "Bulk-Upload-Unit-Template.xlsx";
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
+async function downloadBulkUploadTemplate() {
+  try {
+    saveBlob(await downloadTemplate("building-units", { site }), "units-import-template.xlsx");
+  } catch (error: any) {
+    showMessage(error?.data?.message || "Could not download the template.", "error");
+  }
 }
 
 function formatSkippedSummaryReason(item: Record<string, any>) {
@@ -413,6 +420,8 @@ function getBulkUploadSkippedSummary(result: Record<string, any> | null | undefi
   return [];
 }
 
+// ponytail: the old direct upload (this handler and the skipped-rows dialog) is no longer reachable —
+// Bulk Upload opens ImportExcelDialog. Delete it once the new import is confirmed in production.
 async function handleBulkUploadFileChange(event: Event) {
   const input = event.target as HTMLInputElement;
   const file = input.files?.[0] ?? null;

package/components/CameraBulkImportDialog.vue

@@ -6,7 +6,7 @@
       <!-- Step 1 — the file. -->
       <template v-if="!results.length">
         <p class="text-body-2 mb-4">
-          Upload the camera survey sheet as a CSV file. Each row is one camera:
+          Upload the camera survey sheet (the Excel template, or a CSV). Each row is one camera:
           its name, the recorder it is on, and its channel number on that
           recorder. The live-view address is worked out for you — do not type
           one.
@@ -14,12 +14,12 @@
 
         <v-file-input
           v-model="file"
-          accept=".csv,text/csv"
+          accept=".xlsx,.csv,text/csv"
           density="comfortable"
           variant="outlined"
           prepend-icon=""
           prepend-inner-icon="mdi-file-delimited-outline"
-          label="Camera survey sheet (.csv)"
+          label="Camera survey sheet (.xlsx or .csv)"
           :disabled="busy"
           @update:model-value="readFile"
         />
@@ -147,6 +147,9 @@
 <script setup lang="ts">
 import useSiteSettings from "../composables/useSiteSettings";
 import { cameraCsvTemplate, parseCameraCsv } from "../utils/camera-csv";
+import { isExampleLine, isWorkbookName, templateRefusal, xlsxMeta, xlsxToGrid } from "../utils/vehicle-bulk-sheet";
+import useImportTemplates from "../composables/useImportTemplates";
+import { saveBlob } from "../composables/useInventory";
 
 /**
  * Adding a site's cameras from the technician's survey sheet.
@@ -177,6 +180,7 @@ const prop = defineProps({
 const emit = defineEmits(["cancel", "imported"]);
 
 const { bulkImportSiteCameras } = useSiteSettings();
+const { downloadTemplate: downloadLiveTemplate } = useImportTemplates();
 
 const file = ref<File | File[] | null>(null);
 const fileError = ref("");
@@ -240,14 +244,22 @@ function close() {
   emit("cancel");
 }
 
-function downloadTemplate() {
-  const blob = new Blob([cameraCsvTemplate()], { type: "text/csv" });
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement("a");
-  link.href = url;
-  link.download = "camera-survey-sheet.csv";
-  link.click();
-  URL.revokeObjectURL(url);
+/** The Excel template (Yes/No dropdowns, an example row, an Instructions sheet); the CSV headings if it cannot be made. */
+async function downloadTemplate() {
+  try {
+    saveBlob(await downloadLiveTemplate("cameras", { site: prop.site }), "camera-survey-sheet.xlsx");
+  } catch {
+    saveBlob(new Blob([cameraCsvTemplate()], { type: "text/csv" }), "camera-survey-sheet.csv");
+  }
+}
+
+/** A filled-in Excel template, as the CSV text the survey-sheet reader takes; the example row left out. */
+function gridToCsv(grid: string[][]) {
+  const quote = (v: string) => (/[",\r\n]/.test(v) ? `"${v.replace(/"/g, '""')}"` : v);
+  return grid
+    .filter((line) => !isExampleLine(line))
+    .map((line) => line.map((cell) => quote(String(cell ?? ""))).join(","))
+    .join("\n");
 }
 
 /** What the sheet carries that a camera record has no field for. */
@@ -264,7 +276,24 @@ async function readFile(selected: File | File[] | null) {
   const chosen = Array.isArray(selected) ? selected[0] : selected;
   if (!chosen) return;
 
-  const parsed = parseCameraCsv(await chosen.text());
+  let text: string;
+  if (isWorkbookName(chosen.name)) {
+    const workbook = await chosen.arrayBuffer();
+    const refusal = templateRefusal(await xlsxMeta(workbook), { kind: "cameras", site: prop.site });
+    if (refusal) {
+      fileError.value = refusal;
+      return;
+    }
+    try {
+      text = gridToCsv(await xlsxToGrid(workbook));
+    } catch {
+      fileError.value = "This file could not be read. Save it as Excel (.xlsx) from the template and try again.";
+      return;
+    }
+  } else {
+    text = await chosen.text();
+  }
+  const parsed = parseCameraCsv(text);
 
   if (parsed.missingColumns.length) {
     fileError.value = `This file is missing: ${parsed.missingColumns.join(", ")}. Download the blank sheet to see the columns it needs.`;

package/components/DashboardMain.vue

@@ -31,7 +31,9 @@
               <span class="text-blue-grey">Balance: {{ item.qty }}</span>
             </div>
           </div>
-          <div v-else class="print-kpi-meta mt-2">No supplies recorded</div>
+          <div v-else class="print-kpi-meta mt-2">
+            {{ card.raw?.basis === "below-alert-level" ? "0 · every item is above its alert level" : "No supplies recorded" }}
+          </div>
         </template>
         <template v-else>
           <div class="print-kpi-value">{{ card.value }}</div>
@@ -401,6 +403,11 @@
                 <span class="text-medium-emphasis">Balance: {{ item.qty }}</span>
               </div>
             </div>
+            <!-- Nothing low: say so with the number, not "No data" - that reads as "not set up". -->
+            <div v-else-if="card.raw?.basis === 'below-alert-level'" class="d-flex flex-column">
+              <span class="text-h5 font-weight-bold text-high-emphasis">0</span>
+              <span class="text-body-2 text-medium-emphasis">Every item is above its alert level</span>
+            </div>
             <DashboardEmptyState v-else compact />
           </template>
         </AppKpiTile>
@@ -1230,7 +1237,7 @@ import type { CookieOptions } from "#app";
 // Explicitly, not by auto-import: every other component in this layer reaches
 // its utils by relative path (`StatusChip.vue`, `CameraWall.vue`,
 // `plugins/vuetify.ts`), and a bare call resolved to nothing when driven.
-import { buildWorkOrderStatus } from "../utils/dashboard";
+import { buildWorkOrderStatus, chartTopValue } from "../utils/dashboard";
 import { permissionsDenied } from "../utils/module-routes";
 import { grantsPermission } from "../utils/permission-spellings";
 import { workerTerm, workerTitle } from "../utils/worker-terms";
@@ -2155,8 +2162,8 @@ const customizeWidgets = computed(() => {
       },
       {
         key: "activity",
-        title: "This Week Activity (Line Chart)",
-        description: "Compare incidents and work orders over time.",
+        title: "Activity chart",
+        description: "Work orders opened and closed over the chosen period.",
       },
       {
         key: "upcomingEvents",
@@ -2217,8 +2224,8 @@ const customizeWidgets = computed(() => {
       },
       {
         key: "activity",
-        title: "This Week Activity (Line Chart)",
-        description: "Compare incidents and work orders over time.",
+        title: "Activity chart",
+        description: "Work orders opened and closed over the chosen period.",
       },
       {
         key: "activePatrol",
@@ -2714,7 +2721,7 @@ const secondarySeries = computed(() =>
 const primaryLegendLabel = computed(() => activityChart.value.primaryLabel);
 const secondaryLegendLabel = computed(() => activityChart.value.secondaryLabel);
 const chartMax = computed(() =>
-  Math.max(1, ...primarySeries.value, ...secondarySeries.value)
+  chartTopValue([...primarySeries.value, ...secondarySeries.value])
 );
 const hasChartData = computed(
   () => primarySeries.value.some(Boolean) || secondarySeries.value.some(Boolean)

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>