@7365admin1/layer-common 4.35.1-staging.433 → 4.35.1-staging.435

package/components/InventoryImportDialog.vue

@@ -1,16 +1,12 @@
 <template>
   <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`"
+    :title="copy.title"
+    :noun="copy.noun"
+    :name-label="kind === 'suppliers' ? 'Supplier' : 'Item'"
+    :fill-hint="copy.fill"
+    :duplicate-note="copy.duplicate"
+    :template-file-name="`${copy.file}-${slug}.xlsx`"
     :download-template="downloadTemplate"
     :check="(file: File) => run(file, false)"
     :commit="(file: File) => run(file, true)"
@@ -26,21 +22,54 @@ import type { TImportResult } from "../utils/import-result";
 const show = defineModel<boolean>({ default: false });
 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" },
+  /** items: the item list with opening stock. receipts: bulk deliveries of existing items. suppliers: the supplier list. */
+  kind: { type: String as PropType<"items" | "receipts" | "suppliers">, default: "items" },
 });
 const emit = defineEmits(["done"]);
 
-const { importItems, importTemplate, receiveTemplate, importReceipts } = useInventory();
+const { importItems, importTemplate, receiveTemplate, importReceipts, supplierTemplate, importSuppliers } = 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 downloadTemplate = () => (props.kind === "receipts" ? receiveTemplate(props.store._id) : importTemplate(props.store._id));
+const COPY = {
+  items: {
+    title: "Import Items from Excel",
+    noun: "items",
+    fill: "One row per item. Unit, Packing, Category and Supplier have dropdowns with this store's values (a new supplier can still be typed in). Current Stock and the columns after it are the opening stock (date, supplier, PO no.), recorded like a delivery.",
+    duplicate: "Items already in the store are skipped and never changed, so uploading twice never doubles stock.",
+    file: "inventory-items",
+    done: (n: number) => `${n} item(s) added.`,
+  },
+  receipts: {
+    title: "Import Deliveries from Excel",
+    noun: "delivery lines",
+    fill: "One row per item delivered: date received, supplier (pick from the dropdown, or type a new one), 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.",
+    duplicate: "Every row is a delivery — uploading the same file twice records it twice.",
+    file: "receive-stock",
+    done: (n: number) => `${n} delivery line(s) received.`,
+  },
+  suppliers: {
+    title: "Import Suppliers from Excel",
+    noun: "suppliers",
+    fill: "One row per supplier. Only Supplier Name is required; contact person, phone, email, address, payment terms and notes are optional.",
+    duplicate: "Suppliers already in your list are skipped and left unchanged.",
+    file: "suppliers",
+    done: (n: number) => `${n} supplier(s) added.`,
+  },
+};
+const copy = computed(() => COPY[props.kind]);
+
+const downloadTemplate = () =>
+  props.kind === "receipts" ? receiveTemplate(props.store._id) : props.kind === "suppliers" ? supplierTemplate(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>;
+  (props.kind === "receipts"
+    ? importReceipts(props.store._id, file, commit)
+    : props.kind === "suppliers"
+      ? importSuppliers(props.store._id, file, commit)
+      : importItems(props.store._id, file, commit)) as Promise<TImportResult>;
 
 function finished(result: TImportResult) {
-  notify(props.kind === "receipts" ? `${result.ready} delivery line(s) received.` : `${result.ready} item(s) added.`);
+  notify(copy.value.done(result.ready));
   emit("done");
 }
 </script>

package/components/InventoryItemDialog.vue

@@ -58,7 +58,7 @@
               </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 />
+                <InventorySupplierField v-if="show" v-model="f.openingSupplier" :store-id="store._id" :disabled="!f.openingQty" hint="Optional. Pick from your supplier list, or type a new one." />
               </v-col>
               <v-col cols="12" sm="6">
                 <InputLabel title="PO no." class="mb-1" />

package/components/InventoryLinesDialog.vue

@@ -83,7 +83,7 @@
           <v-row v-if="mode === 'receive'" dense>
             <v-col cols="12" md="6">
               <InputLabel title="Supplier" class="mb-1" />
-              <v-text-field v-model="supplier" density="comfortable" placeholder="e.g. GSK Hardware Pte Ltd" />
+              <InventorySupplierField v-if="show" v-model="supplier" :store-id="store._id" />
             </v-col>
             <v-col cols="12" md="3">
               <InputLabel title="PO number" class="mb-1" />

package/components/InventoryMain.vue

@@ -100,6 +100,9 @@
         <v-window-item v-if="isStaff" value="reports">
           <InventoryReportsTab :store="store" :sites="storeSites" />
         </v-window-item>
+        <v-window-item v-if="isStaff" value="suppliers">
+          <InventorySuppliersTab :store="store" />
+        </v-window-item>
         <v-window-item v-if="store.access.canManage" value="settings">
           <InventorySettingsTab :store="store" :org-sites="orgSites" @saved="loadStores" />
         </v-window-item>
@@ -182,6 +185,7 @@ const tabs = computed(() => {
     { value: "requests", label: a.canApprove ? "Requests" : "My Requests", badge: a.canApprove ? pendingCount.value : 0 },
     ...(a.canApprove ? [{ value: "technicians", label: worker.many }] : []),
     ...(isStaff.value ? [{ value: "reports", label: "Reports" }] : []),
+    ...(isStaff.value ? [{ value: "suppliers", label: "Suppliers" }] : []),
     ...(a.canManage ? [{ value: "settings", label: "Settings" }] : []),
   ];
 });

package/components/InventorySupplierField.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <v-combobox
+      v-model="model"
+      v-model:search="search"
+      :items="names"
+      :loading="loading"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      density="comfortable"
+      clearable
+      hide-details
+      maxlength="200"
+      aria-label="Supplier — pick from your list or type a new one"
+      @blur="snap"
+    >
+      <template #no-data>
+        <v-list-item v-if="typed" prepend-icon="mdi-plus" @click="model = typed">
+          <v-list-item-title>Add "{{ typed }}" as a new supplier</v-list-item-title>
+        </v-list-item>
+        <v-list-item v-else>
+          <v-list-item-title class="text-medium-emphasis">No suppliers yet — type a name to add one</v-list-item-title>
+        </v-list-item>
+      </template>
+      <template v-if="typed && !listedSupplierName(typed, names)" #append-item>
+        <v-divider />
+        <v-list-item prepend-icon="mdi-plus" @click="model = typed">
+          <v-list-item-title>Add "{{ typed }}" as a new supplier</v-list-item-title>
+        </v-list-item>
+      </template>
+    </v-combobox>
+    <div class="text-caption mt-1" style="min-height: 20px">
+      <span v-if="near" class="text-warning">
+        Did you mean <a href="#" class="text-warning font-weight-bold" @click.prevent="model = near">{{ near }}</a>? Otherwise "{{ current }}" is added as a new supplier.
+      </span>
+      <span v-else-if="isNew" class="text-medium-emphasis">New supplier — it is added to your supplier list when you save.</span>
+      <span v-else class="text-medium-emphasis">{{ hint }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useInventory from "../composables/useInventory";
+import { listedSupplierName, nearSupplierName } from "../utils/inventory-suppliers";
+
+/**
+ * Supplier picker: the organisation's supplier list as a searchable dropdown.
+ * A name not in the list can still be typed; the server adds it to the list
+ * (name only) when the delivery is saved, and matches any spelling of a listed name.
+ */
+const model = defineModel<string>({ default: "" });
+const props = defineProps({
+  storeId: { type: String, required: true },
+  disabled: { type: Boolean, default: false },
+  placeholder: { type: String, default: "Pick a supplier or type a new one" },
+  hint: { type: String, default: "Pick from your supplier list, or type a new one." },
+});
+
+const { getSuppliers } = useInventory();
+const names = ref<string[]>([]);
+const loading = ref(false);
+const search = ref<string | null>("");
+
+const typed = computed(() => String(search.value ?? "").replace(/\s+/g, " ").trim());
+const current = computed(() => String(model.value ?? "").replace(/\s+/g, " ").trim());
+const isNew = computed(() => !!current.value && !listedSupplierName(current.value, names.value));
+const near = computed(() => (isNew.value ? nearSupplierName(current.value, names.value) : undefined));
+
+/** A listed supplier typed in another spelling becomes the list's spelling. */
+function snap() {
+  if (model.value == null) return void (model.value = ""); // cleared: no supplier, never null to the server
+  const listed = listedSupplierName(model.value, names.value);
+  if (listed && listed !== model.value) model.value = listed;
+}
+watch(model, snap);
+
+async function load() {
+  if (!props.storeId) return;
+  loading.value = true;
+  try {
+    const res = await getSuppliers(props.storeId);
+    names.value = [...res.items.map((s) => s.name), ...(res.fromDeliveries ?? []).map((s) => s.name)].sort((a, b) =>
+      a.localeCompare(b, "en", { numeric: true, sensitivity: "base" }),
+    );
+  } catch {
+    names.value = []; // typing a name still works
+  } finally {
+    loading.value = false;
+  }
+}
+watch(() => props.storeId, load, { immediate: true });
+defineExpose({ reload: load });
+</script>

package/components/InventorySuppliersTab.vue

@@ -0,0 +1,210 @@
+<template>
+  <div>
+    <AppCard class="pa-4 mb-4">
+      <p class="text-body-2 text-medium-emphasis mb-3">
+        Your organisation's suppliers, shared by all its stores. They appear in the Supplier dropdown on Receive Stock and on opening stock.
+        Only the name is needed — contact details are optional. A supplier typed on a delivery is added here automatically.
+      </p>
+      <div class="d-flex flex-wrap align-center ga-2">
+        <v-text-field
+          v-model="search"
+          density="compact"
+          prepend-inner-icon="mdi-magnify"
+          placeholder="Search name, contact, phone or email"
+          hide-details
+          clearable
+          style="min-width: 240px; max-width: 360px"
+        />
+        <v-switch v-if="canManage" v-model="includeInactive" color="primary" density="compact" hide-details label="Show inactive" class="ml-2" />
+        <v-spacer />
+        <template v-if="canManage">
+          <v-btn variant="outlined" class="text-none" prepend-icon="mdi-file-excel-outline" @click="importOpen = true">Import from Excel</v-btn>
+          <v-btn variant="flat" class="text-none screen-btn-primary" prepend-icon="mdi-plus" @click="edit()">Add Supplier</v-btn>
+        </template>
+      </div>
+    </AppCard>
+
+    <AppCard v-if="canManage && fromDeliveries.length" class="pa-4 mb-4">
+      <div class="text-subtitle-2 mb-1">Suppliers on past deliveries, not in the list yet</div>
+      <p class="text-caption text-medium-emphasis mb-2">Add them so they can be picked, and fill in their details if you want to.</p>
+      <div class="d-flex flex-wrap ga-2 align-center">
+        <v-chip v-for="s in fromDeliveries" :key="s.name" variant="outlined" append-icon="mdi-plus" :disabled="adding" @click="addName(s.name)">
+          {{ s.name }}
+        </v-chip>
+        <v-btn size="small" variant="text" class="text-none" :loading="adding" @click="addAll">Add all {{ fromDeliveries.length }}</v-btn>
+      </div>
+    </AppCard>
+
+    <AppCard class="pa-0">
+      <v-data-table :headers="headers" :items="items" :loading="loading" density="comfortable" :items-per-page="25" no-data-text="No suppliers yet. Add one, import a list, or type a new supplier on Receive Stock.">
+        <template #item.name="{ item }">
+          <span class="font-weight-medium">{{ item.name }}</span>
+          <v-chip v-if="item.status === 'inactive'" size="x-small" class="ml-2">Inactive</v-chip>
+        </template>
+        <template #item.contact="{ item }">
+          <div>{{ item.contactPerson || "—" }}</div>
+          <div class="text-caption text-medium-emphasis">{{ [item.phone, item.email].filter(Boolean).join(" · ") }}</div>
+        </template>
+        <template #item.actions="{ item }">
+          <v-btn v-if="canManage" size="small" variant="text" class="text-none" @click="edit(item)">Edit</v-btn>
+        </template>
+      </v-data-table>
+    </AppCard>
+
+    <v-dialog v-model="dialog" max-width="560">
+      <AppCard class="pa-6">
+        <div class="text-h6 mb-1">{{ editing ? "Edit supplier" : "Add supplier" }}</div>
+        <p class="text-body-2 text-medium-emphasis mb-4">Only the name is required. Fill in the rest only if you want to — you can come back to it later.</p>
+        <v-form ref="form" @submit.prevent="save">
+          <InputLabel title="Supplier name" required class="mb-1" />
+          <v-text-field v-model="f.name" density="comfortable" maxlength="200" :rules="[requiredRule]" autofocus />
+          <v-row dense>
+            <v-col cols="12" sm="6">
+              <InputLabel title="Contact person" class="mb-1" />
+              <v-text-field v-model="f.contactPerson" density="comfortable" maxlength="120" hint="Optional" persistent-hint />
+            </v-col>
+            <v-col cols="12" sm="6">
+              <InputLabel title="Phone" class="mb-1" />
+              <v-text-field v-model="f.phone" density="comfortable" maxlength="40" hint="Optional" persistent-hint />
+            </v-col>
+            <v-col cols="12" sm="6">
+              <InputLabel title="Email" class="mb-1" />
+              <v-text-field v-model="f.email" type="email" density="comfortable" maxlength="200" :rules="[emailRule]" hint="Optional" persistent-hint />
+            </v-col>
+            <v-col cols="12" sm="6">
+              <InputLabel title="Payment terms" class="mb-1" />
+              <v-text-field v-model="f.paymentTerms" density="comfortable" maxlength="120" placeholder="e.g. 30 days, COD" hint="Optional" persistent-hint />
+            </v-col>
+          </v-row>
+          <InputLabel title="Address" class="mb-1 mt-2" />
+          <v-textarea v-model="f.address" density="comfortable" rows="2" auto-grow maxlength="500" hint="Optional" persistent-hint />
+          <InputLabel title="Notes" class="mb-1 mt-2" />
+          <v-textarea v-model="f.notes" density="comfortable" rows="2" auto-grow maxlength="1000" hint="Optional" persistent-hint />
+          <v-switch
+            v-if="editing"
+            v-model="active"
+            color="primary"
+            hide-details
+            class="mt-2"
+            :label="active ? 'Active — shown in the Supplier dropdown' : 'Inactive — hidden from the dropdown, kept on past deliveries'"
+          />
+          <div class="d-flex justify-end ga-2 mt-4">
+            <v-btn variant="text" class="text-none" @click="dialog = false">Cancel</v-btn>
+            <v-btn type="submit" variant="flat" class="text-none screen-btn-primary" :loading="saving">{{ editing ? "Save" : "Add supplier" }}</v-btn>
+          </div>
+        </v-form>
+      </AppCard>
+    </v-dialog>
+
+    <InventoryImportDialog v-model="importOpen" :store="store" kind="suppliers" @done="load" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import useInventory from "../composables/useInventory";
+import useUtils from "../composables/useUtils";
+
+const props = defineProps({
+  store: { type: Object as PropType<TInventoryStore>, required: true },
+});
+
+const { getSuppliers, createSupplier, updateSupplier } = useInventory();
+const { requiredRule, debounce } = useUtils();
+const notify = inject<(text: string, color?: string) => void>("inventoryNotify", () => {});
+
+const items = ref<TInventorySupplier[]>([]);
+const fromDeliveries = ref<{ name: string }[]>([]);
+const canManage = ref(false);
+const loading = ref(false);
+const search = ref<string | null>("");
+const includeInactive = ref(false);
+const importOpen = ref(false);
+const adding = ref(false);
+
+const headers = [
+  { title: "Supplier", key: "name" },
+  { title: "Contact", key: "contact", sortable: false },
+  { title: "Payment terms", key: "paymentTerms" },
+  { title: "", key: "actions", sortable: false, align: "end" as const },
+];
+
+async function load() {
+  loading.value = true;
+  try {
+    const res = await getSuppliers(props.store._id, { search: search.value || "", includeInactive: includeInactive.value });
+    items.value = res.items;
+    fromDeliveries.value = res.fromDeliveries ?? [];
+    canManage.value = res.canManage;
+  } catch (error: any) {
+    notify(error?.data?.message || "Could not load the suppliers.", "error");
+  } finally {
+    loading.value = false;
+  }
+}
+const reload = debounce(load, 300);
+watch(search, reload);
+watch(includeInactive, load);
+watch(() => props.store._id, load, { immediate: true });
+
+async function addName(name: string) {
+  adding.value = true;
+  try {
+    await createSupplier(props.store._id, { name });
+    notify(`"${name}" added to your suppliers.`);
+    await load();
+  } catch (error: any) {
+    notify(error?.data?.message || "Could not add the supplier.", "error");
+  } finally {
+    adding.value = false;
+  }
+}
+async function addAll() {
+  adding.value = true;
+  let added = 0;
+  for (const s of fromDeliveries.value) {
+    try {
+      await createSupplier(props.store._id, { name: s.name });
+      added++;
+    } catch {
+      /* already added by someone else: skip */
+    }
+  }
+  adding.value = false;
+  notify(`${added} supplier(s) added.`);
+  await load();
+}
+
+// ---- add / edit
+const blank = () => ({ name: "", contactPerson: "", phone: "", email: "", address: "", paymentTerms: "", notes: "" });
+const dialog = ref(false);
+const form = ref();
+const saving = ref(false);
+const editing = ref<TInventorySupplier | null>(null);
+const f = reactive(blank());
+const active = ref(true);
+const emailRule = (v: string) => !v || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) || "Enter a valid email, or leave it blank";
+
+function edit(s?: TInventorySupplier) {
+  editing.value = s ?? null;
+  Object.assign(f, blank(), s ? { name: s.name, contactPerson: s.contactPerson, phone: s.phone, email: s.email, address: s.address, paymentTerms: s.paymentTerms, notes: s.notes } : {});
+  active.value = s ? s.status === "active" : true;
+  dialog.value = true;
+}
+
+async function save() {
+  const { valid } = await form.value.validate();
+  if (!valid) return;
+  saving.value = true;
+  try {
+    if (editing.value) await updateSupplier(props.store._id, editing.value._id, { ...f, status: active.value ? "active" : "inactive" });
+    else await createSupplier(props.store._id, { ...f });
+    notify(editing.value ? "Supplier saved." : `"${f.name.trim()}" added to your suppliers.`);
+    dialog.value = false;
+    await load();
+  } catch (error: any) {
+    notify(error?.data?.message || "Could not save the supplier.", "error");
+  } finally {
+    saving.value = false;
+  }
+}
+</script>

package/components/MemberMain.vue

@@ -402,6 +402,15 @@ const props = defineProps({
       },
     ],
   },
+  /**
+   * Tabs after Active / Inactive that the app renders itself on the same
+   * route (e.g. property management's "Service Providers"). Clicking one
+   * sets the route's `status` like the built-in tabs do.
+   */
+  extraTabs: {
+    type: Array as PropType<Array<{ name: string; status: string }>>,
+    default: () => [],
+  },
 });
 
 const items = ref<Array<Record<string, any>>>([]);
@@ -442,6 +451,7 @@ const normalizedRouteParams = computed(() => {
 const tabOptions = [
   { name: "Active", status: "active" },
   { name: "Inactive", status: "suspended" },
+  ...props.extraTabs,
 ];
 
 function toRoute(status: any) {

package/components/MemberServiceProviders.vue

@@ -0,0 +1,327 @@
+<template>
+  <div>
+    <!--
+      Members > Service Providers (owner request 2026-09-28). The property
+      manager sees who from its service providers can open this site's
+      information. Read only: each provider manages its own people.
+    -->
+    <PageHeader
+      :title="props.title"
+      subtitle="People from your service providers who can open this site's information. Their company manages who is on this list."
+    >
+      <template #actions>
+        <AppButton
+          variant="ghost"
+          :loading="exporting"
+          :disabled="!visible.length"
+          data-test="sp-members-export"
+          @click="exportExcel"
+        >
+          Export to Excel
+        </AppButton>
+      </template>
+    </PageHeader>
+
+    <!-- One chip per provider company; a click filters to that company. -->
+    <div v-if="companies.length" class="sp-chips mb-3" data-test="sp-members-companies">
+      <button
+        v-for="c in companies"
+        :key="c.orgId"
+        type="button"
+        class="sp-chip"
+        :class="{ 'sp-chip--active': company === c.orgId }"
+        :aria-pressed="company === c.orgId"
+        @click="company = company === c.orgId ? '' : c.orgId"
+      >
+        <span class="sp-chip__name">{{ companyChipText(c.name, c.people) }}</span>
+        <span class="sp-chip__type">{{ c.typeLabel }}<template v-if="c.invitedVia"> · via {{ c.invitedVia }}</template></span>
+      </button>
+    </div>
+
+    <AppCard class="table-card">
+      <CardToolbar :count="countText">
+        <template #tabs>
+          <button
+            v-for="tab in props.tabs"
+            :key="tab.status"
+            type="button"
+            role="tab"
+            class="app-tab"
+            :class="{ 'app-tab--active': tab.status === props.status }"
+            :aria-selected="tab.status === props.status"
+            @click="toTab(tab.status)"
+          >
+            {{ tab.name }}
+          </button>
+        </template>
+
+        <template #right>
+          <AppField
+            v-model="search"
+            search
+            compact
+            placeholder="Search name, email, company"
+            klass="app-toolbar__search"
+          />
+          <v-select
+            v-model="type"
+            :items="typeItems"
+            item-title="title"
+            item-value="value"
+            density="compact"
+            variant="outlined"
+            hide-details
+            class="sp-type-filter"
+            aria-label="Service"
+            data-test="sp-members-type"
+          />
+          <AppButton
+            variant="icon"
+            icon="mdi-refresh"
+            aria-label="Refresh"
+            @click="load()"
+          />
+        </template>
+      </CardToolbar>
+
+      <div class="app-table-scroll">
+        <v-data-table
+          :headers="headers"
+          :items="visible"
+          item-value="_id"
+          :items-per-page="50"
+          fixed-header
+          :loading="loading"
+          style="max-height: calc(100vh - 320px)"
+        >
+          <template #item.name="{ item }">
+            <div class="font-weight-medium">{{ item.name || "-" }}</div>
+            <div class="sp-sub">{{ item.email }}</div>
+          </template>
+          <template #item.company="{ item }">
+            <div>{{ item.company || "-" }}</div>
+            <div v-if="item.invitedVia" class="sp-sub">Invited by {{ item.invitedVia }}</div>
+          </template>
+          <template #item.typeLabel="{ item }">
+            <StatusChip :dot="false" pill tone="info" :label="item.typeLabel" />
+          </template>
+          <template #item.role="{ item }">
+            {{ item.role || "No role" }}
+          </template>
+          <template #item.addedAt="{ item }">
+            {{ spDay(item.addedAt) || "-" }}
+          </template>
+          <template #item.status="{ item }">
+            <StatusChip
+              :tone="item.status === 'active' ? 'ok' : 'neutral'"
+              :label="item.status === 'active' ? 'Active' : 'Inactive'"
+            />
+          </template>
+          <template #item.actions="{ item }">
+            <v-btn
+              v-if="mailFor(item)"
+              variant="text"
+              size="small"
+              class="text-none"
+              :href="mailFor(item)"
+              data-test="sp-members-email"
+            >
+              Email company
+            </v-btn>
+          </template>
+          <template #no-data>
+            <div class="pa-8 text-center text-body-2 text-medium-emphasis" data-test="sp-members-empty">
+              {{ emptyText }}
+            </div>
+          </template>
+        </v-data-table>
+      </div>
+    </AppCard>
+
+    <Snackbar v-model="snackbar" :text="message" color="error" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  TSiteProviderCompany,
+  TSiteProviderMember,
+} from "../composables/useServiceProvider";
+import {
+  companyChipText,
+  concernMailto,
+  filterProviderMembers,
+  providerMembersEmptyText,
+  serviceTypeOptions,
+} from "../utils/site-provider-members";
+import { spDay } from "../utils/sp-inviter-row";
+import { saveBlob } from "../composables/useInventory";
+
+const props = defineProps({
+  title: { type: String, default: "Members" },
+  siteId: { type: String, default: "" },
+  siteName: { type: String, default: "" },
+  /** the page's current tab (route `status`) */
+  status: { type: String, default: "service-providers" },
+  /** the Members tabs, in order; clicking one changes the route's `status` */
+  tabs: {
+    type: Array as PropType<Array<{ name: string; status: string }>>,
+    default: () => [
+      { name: "Active", status: "active" },
+      { name: "Inactive", status: "suspended" },
+      { name: "Service Providers", status: "service-providers" },
+    ],
+  },
+});
+
+const { getSiteMembers, exportSiteMembers } = useServiceProvider();
+const { getSiteById } = useSite();
+// The site in words, for the export file name and the email subject.
+const siteLabel = ref(props.siteName);
+
+const items = ref<TSiteProviderMember[]>([]);
+const companies = ref<TSiteProviderCompany[]>([]);
+const loading = ref(false);
+const exporting = ref(false);
+const search = ref("");
+const type = ref("");
+const company = ref("");
+const snackbar = ref(false);
+const message = ref("");
+
+const headers = [
+  { title: "Name", key: "name", sortable: true, minWidth: "180px" },
+  { title: "Company", key: "company", sortable: true, minWidth: "160px" },
+  { title: "Service", key: "typeLabel", sortable: true },
+  { title: "Role at this site", key: "role", sortable: true },
+  { title: "Added", key: "addedAt", sortable: true },
+  { title: "Status", key: "status", sortable: true },
+  { title: "", key: "actions", sortable: false, align: "end" as const },
+];
+
+const typeItems = computed(() => [
+  { title: "All services", value: "" },
+  ...serviceTypeOptions(items.value),
+]);
+
+const filters = computed(() => ({
+  type: type.value,
+  company: company.value,
+  search: search.value,
+}));
+
+const visible = computed(() => filterProviderMembers(items.value, filters.value));
+
+const countText = computed(() =>
+  loading.value && !items.value.length
+    ? ""
+    : `${visible.value.length} of ${items.value.length}`,
+);
+
+const emptyText = computed(() =>
+  providerMembersEmptyText({
+    companies: companies.value.length,
+    total: items.value.length,
+    filtered: Boolean(type.value || company.value || search.value.trim()),
+  }),
+);
+
+function mailFor(item: TSiteProviderMember) {
+  const c = companies.value.find((x) => x.orgId === item.companyId);
+  return concernMailto({
+    companyEmail: c?.email,
+    person: item.name || item.email,
+    siteName: siteLabel.value,
+  });
+}
+
+async function load() {
+  if (!props.siteId) return;
+  loading.value = true;
+  try {
+    const data = await getSiteMembers(props.siteId);
+    items.value = Array.isArray(data?.items) ? data.items : [];
+    companies.value = Array.isArray(data?.companies) ? data.companies : [];
+  } catch (error: any) {
+    items.value = [];
+    companies.value = [];
+    message.value = error?.data?.message || "Could not load your service providers' people.";
+    snackbar.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function exportExcel() {
+  exporting.value = true;
+  try {
+    const blob = await exportSiteMembers(props.siteId, filters.value);
+    saveBlob(blob, `${siteLabel.value || "Site"} - service provider people.xlsx`);
+  } catch {
+    message.value = "Could not export the list.";
+    snackbar.value = true;
+  } finally {
+    exporting.value = false;
+  }
+}
+
+const route = useRoute();
+function toTab(status: string) {
+  if (status === props.status) return;
+  navigateTo({
+    name: route.name as string,
+    params: { ...(route.params as Record<string, string>), status },
+  });
+}
+
+watch(() => props.siteId, load);
+onMounted(async () => {
+  load();
+  if (!siteLabel.value && props.siteId) {
+    const site: any = await getSiteById(props.siteId).catch(() => null);
+    siteLabel.value = site?.name ?? "";
+  }
+});
+</script>
+
+<style scoped>
+.sp-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.sp-chip {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.sp-chip--active {
+  border-color: var(--accent-strong);
+  box-shadow: inset 0 0 0 1px var(--accent-strong);
+}
+
+.sp-chip__name {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.sp-chip__type,
+.sp-sub {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.sp-type-filter {
+  min-width: 170px;
+  max-width: 220px;
+}
+</style>

package/composables/useInventory.ts

@@ -83,6 +83,20 @@ export default function useInventory() {
       body.append("file", file);
       return api<TImportResult>(`/stores/${store}/receive-import`, { method: "POST", body, query: { commit } });
     },
+
+    /** The organisation's supplier list (active), plus — for managers — past-delivery names not yet in it. */
+    getSuppliers: (store: string, query: { search?: string; includeInactive?: boolean } = {}) =>
+      api<{ items: TInventorySupplier[]; fromDeliveries: { name: string; lastUsed: string; count: number }[]; canManage: boolean }>(`/stores/${store}/suppliers`, { query }),
+    createSupplier: (store: string, body: Partial<TInventorySupplier> & { name: string }) =>
+      api<TInventorySupplier>(`/stores/${store}/suppliers`, { method: "POST", body }),
+    updateSupplier: (store: string, id: string, body: Partial<TInventorySupplier>) =>
+      api<TInventorySupplier>(`/stores/${store}/suppliers/${id}`, { method: "PATCH", body }),
+    supplierTemplate: (store: string) => api<Blob>(`/stores/${store}/suppliers-template`, { responseType: "blob" }),
+    importSuppliers: (store: string, file: File, commit: boolean) => {
+      const body = new FormData();
+      body.append("file", file);
+      return api<TImportResult>(`/stores/${store}/suppliers-import`, { method: "POST", body, query: { commit } });
+    },
   };
 }
 

package/composables/useServiceProvider.ts

@@ -1,3 +1,31 @@
+/** One person from a provider company with a membership at this site. */
+export type TSiteProviderMember = {
+  _id: string;
+  name: string;
+  email: string;
+  companyId: string;
+  company: string;
+  /** the company's service code (e.g. "security_agency") */
+  type: string;
+  typeLabel: string;
+  role: string;
+  status: string;
+  addedAt?: string | null;
+  /** a subcontractor: the provider that brought its company onto the site */
+  invitedVia?: string;
+};
+
+export type TSiteProviderCompany = {
+  orgId: string;
+  name: string;
+  type: string;
+  typeLabel: string;
+  email?: string;
+  since?: string | null;
+  invitedVia?: string;
+  people: number;
+};
+
 export default function useServiceProvider() {
   const serviceProviders = useState<Array<TServiceProvider>>(
     "serviceProviders",
@@ -259,7 +287,38 @@ export default function useServiceProvider() {
     );
   }
 
+  /**
+   * Members > Service Providers: the provider people with access to this
+   * site, and one entry per provider company with its head count. The
+   * site's own organisation only - the server refuses anyone else.
+   */
+  function getSiteMembers(siteId: string): Promise<{
+    items: TSiteProviderMember[];
+    companies: TSiteProviderCompany[];
+  }> {
+    return useNuxtApp().$api("/api/service-providers/site-members", {
+      method: "GET",
+      query: { siteId },
+    });
+  }
+
+  /** The same list as an Excel file, under the same filters. */
+  function exportSiteMembers(
+    siteId: string,
+    filters: { type?: string; company?: string; search?: string } = {},
+  ): Promise<Blob> {
+    const query: Record<string, string> = { siteId, format: "xlsx" };
+    for (const [k, v] of Object.entries(filters)) if (v) query[k] = v;
+    return useNuxtApp().$api<Blob>("/api/service-providers/site-members", {
+      method: "GET",
+      query,
+      responseType: "blob",
+    });
+  }
+
   return {
+    getSiteMembers,
+    exportSiteMembers,
     serviceProviders,
     serviceProvider,
     serviceProviderCategories,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.35.1-staging.433",
+  "version": "4.35.1-staging.435",
   "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/types/inventory.d.ts

@@ -97,3 +97,16 @@ declare type TInventoryTransaction = {
 };
 
 declare type TInventoryPeriod = { from: string; to: string; site?: string; locationType?: string };
+
+/** An organisation's supplier (shared by its stores). Only the name is required. */
+declare type TInventorySupplier = {
+  _id: string;
+  name: string;
+  contactPerson: string;
+  phone: string;
+  email: string;
+  address: string;
+  paymentTerms: string;
+  notes: string;
+  status: "active" | "inactive";
+};

package/utils/inventory-suppliers.ts

@@ -0,0 +1,45 @@
+/**
+ * Supplier-name helpers for the inventory supplier picker. Browser-safe, no
+ * Node globals; names are unique so Nuxt auto-imports cannot clash.
+ * The server applies the same rules (API-core `utils/inventory-suppliers.ts`).
+ */
+
+/** Trimmed, spaces collapsed, lower case: two names with the same key are the same supplier. */
+export function supplierNameKey(name: unknown): string {
+  return String(name ?? "").replace(/\s+/g, " ").trim().toLowerCase();
+}
+
+/** The list's own spelling of `name`, when the list already has it in any spelling. */
+export function listedSupplierName(name: unknown, names: string[]): string | undefined {
+  const key = supplierNameKey(name);
+  return key ? names.find((n) => supplierNameKey(n) === key) : undefined;
+}
+
+const COMPANY_WORDS = /\b(pte|ltd|private|limited|co|company|llp|inc|corp|sdn|bhd|the)\b/g;
+const coreName = (name: string) => supplierNameKey(name).replace(/[^a-z0-9 ]+/g, " ").replace(COMPANY_WORDS, " ").replace(/\s+/g, " ").trim();
+
+function editDistanceWithin(a: string, b: string, cap: number) {
+  if (Math.abs(a.length - b.length) > cap) return cap + 1;
+  let prev = Array.from({ length: b.length + 1 }, (_, j) => j);
+  for (let i = 1; i <= a.length; i++) {
+    const cur = [i];
+    for (let j = 1; j <= b.length; j++) cur[j] = Math.min(prev[j] + 1, cur[j - 1] + 1, prev[j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1));
+    prev = cur;
+  }
+  return prev[b.length];
+}
+
+/** A listed supplier a NEW name probably means ("ABC Trading" → "ABC Trading Pte Ltd"); undefined when listed or nothing close. */
+export function nearSupplierName(name: string, names: string[]): string | undefined {
+  if (!supplierNameKey(name) || listedSupplierName(name, names)) return undefined;
+  const c = coreName(name);
+  if (c.length < 3) return undefined;
+  const cap = c.length >= 8 ? 2 : 1;
+  return names.find((n) => {
+    const o = coreName(n);
+    if (!o) return false;
+    if (o === c) return true;
+    if (o.length >= 3 && (o.startsWith(`${c} `) || c.startsWith(`${o} `))) return true;
+    return o.length >= 4 && editDistanceWithin(c, o, cap) <= cap;
+  });
+}

package/utils/site-provider-members.ts

@@ -0,0 +1,96 @@
+/**
+ * Members > Service Providers (owner request 2026-09-28): the property
+ * manager sees every person from its service providers who can open this
+ * site's information. Pure helpers, so the screen's wording and filters are
+ * tested without mounting it. The server applies the same filter rule to the
+ * Excel export (`filterSiteProviderMembers` in core).
+ */
+
+export type TProviderMemberRow = {
+  name?: string;
+  email?: string;
+  company?: string;
+  companyId?: string;
+  type?: string;
+  role?: string;
+  invitedVia?: string;
+};
+
+export type TProviderMemberFilters = {
+  type?: string;
+  company?: string;
+  search?: string;
+};
+
+export function filterProviderMembers<T extends TProviderMemberRow>(
+  items: T[],
+  { type = "", company = "", search = "" }: TProviderMemberFilters,
+): T[] {
+  const needle = search.trim().toLowerCase();
+  return items.filter(
+    (m) =>
+      (!type || m.type === type) &&
+      (!company || m.companyId === company) &&
+      (!needle ||
+        [m.name, m.email, m.company, m.role, m.invitedVia]
+          .map((v) => String(v ?? "").toLowerCase())
+          .some((v) => v.includes(needle))),
+  );
+}
+
+/** "Aigle Security · 12 people" */
+export function companyChipText(name: string, people: number): string {
+  return `${name || "Unnamed company"} · ${people} ${people === 1 ? "person" : "people"}`;
+}
+
+/** What an empty table says: nothing on site, nobody added yet, or the filters. */
+export function providerMembersEmptyText({
+  companies,
+  total,
+  filtered,
+}: {
+  companies: number;
+  total: number;
+  filtered: boolean;
+}): string {
+  if (!companies) return "No service providers work at this site yet.";
+  if (!total) return "Your service providers have not given anyone access to this site yet.";
+  if (filtered) return "No one matches these filters.";
+  return "No one to show.";
+}
+
+/** The service types present, for the filter, in a stable order. */
+export function serviceTypeOptions(
+  items: Array<{ type?: string; typeLabel?: string }>,
+): Array<{ title: string; value: string }> {
+  const seen = new Map<string, string>();
+  for (const m of items) {
+    const value = String(m.type ?? "");
+    if (value && !seen.has(value)) seen.set(value, String(m.typeLabel || value));
+  }
+  return [...seen.entries()]
+    .map(([value, title]) => ({ title, value }))
+    .sort((a, b) => a.title.localeCompare(b.title));
+}
+
+/**
+ * "Email the company" about one person: a mail to the provider company,
+ * naming the person and the site. Nothing is changed in the app - the
+ * provider manages its own people.
+ */
+export function concernMailto({
+  companyEmail,
+  person,
+  siteName,
+}: {
+  companyEmail?: string;
+  person: string;
+  siteName?: string;
+}): string {
+  const to = String(companyEmail ?? "").trim();
+  if (!to) return "";
+  const where = siteName ? ` at ${siteName}` : "";
+  const subject = `About ${person}${where}`;
+  const body = `Hello,\n\nWe would like to talk about ${person}'s access${where}.\n\n`;
+  return `mailto:${encodeURIComponent(to)}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+}