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

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/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.434",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/utils/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)}`;
+}