@7365admin1/layer-common 4.82.1-staging.475 → 4.82.1-staging.477

package/components/MemberServiceProviders.vue

@@ -22,21 +22,10 @@
       </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>
+    <!-- Who is on the list at a glance; pick one company with the Company filter. -->
+    <p v-if="companies.length" class="sp-summary mb-3" data-test="sp-members-summary">
+      {{ summaryText }}
+    </p>
 
     <AppCard class="table-card">
       <CardToolbar :count="countText">
@@ -75,6 +64,25 @@
             aria-label="Service"
             data-test="sp-members-type"
           />
+          <v-autocomplete
+            v-model="company"
+            :items="companyItems"
+            item-title="title"
+            item-value="value"
+            density="compact"
+            variant="outlined"
+            hide-details
+            clearable
+            placeholder="All companies"
+            no-data-text="No company for this service"
+            class="sp-company-filter"
+            aria-label="Company"
+            data-test="sp-members-company"
+          >
+            <template #item="{ props: itemProps, item }">
+              <v-list-item v-bind="itemProps" :subtitle="item.raw.subtitle" />
+            </template>
+          </v-autocomplete>
           <AppButton
             variant="icon"
             icon="mdi-refresh"
@@ -151,10 +159,11 @@ import type {
   TSiteProviderMember,
 } from "../composables/useServiceProvider";
 import {
-  companyChipText,
+  companyFilterItems,
   concernMailto,
   filterProviderMembers,
   providerMembersEmptyText,
+  providerSummaryText,
   serviceTypeOptions,
 } from "../utils/site-provider-members";
 import { spDay } from "../utils/sp-inviter-row";
@@ -189,7 +198,7 @@ const loading = ref(false);
 const exporting = ref(false);
 const search = ref("");
 const type = ref("");
-const company = ref("");
+const company = ref<string | null>("");
 const snackbar = ref(false);
 const message = ref("");
 
@@ -209,9 +218,18 @@ const typeItems = computed(() => [
   ...serviceTypeOptions(items.value),
 ]);
 
+const companyItems = computed(() => companyFilterItems(companies.value, type.value));
+const summaryText = computed(() => providerSummaryText(companies.value));
+// A company of another service cannot match; drop it when the service changes.
+watch(type, () => {
+  if (company.value && !companyItems.value.some((c) => c.value === company.value)) {
+    company.value = "";
+  }
+});
+
 const filters = computed(() => ({
   type: type.value,
-  company: company.value,
+  company: company.value || "",
   search: search.value,
 }));
 
@@ -294,41 +312,21 @@ onMounted(async () => {
 </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;
+.sp-summary {
   font-size: 14px;
+  color: var(--muted);
 }
 
-.sp-chip__type,
 .sp-sub {
   font-size: 12px;
   color: var(--muted);
 }
 
+.sp-company-filter {
+  min-width: 220px;
+  max-width: 300px;
+}
+
 .sp-type-filter {
   min-width: 170px;
   max-width: 220px;

package/composables/useSiteActions.ts

@@ -0,0 +1,29 @@
+import { NO_SITE_ACTIONS, siteActionsOf, type TSiteActions } from "../utils/site-actions";
+
+/**
+ * May the signed-in person add / delete sites (and add organisations) in this
+ * organisation? Re-asked whenever the organisation changes; hidden until core
+ * answers. See `utils/site-actions.ts`.
+ */
+export default function useSiteActions(org: MaybeRefOrGetter<string>) {
+  const actions = ref<TSiteActions>({ ...NO_SITE_ACTIONS });
+
+  watch(
+    () => toValue(org),
+    async (id) => {
+      actions.value = { ...NO_SITE_ACTIONS };
+      if (!id) return;
+      try {
+        const res = await useNuxtApp().$api<Record<string, any>>("/api/customer-sites", {
+          query: { org: id, status: "active", limit: 1, withActions: true },
+        });
+        if (toValue(org) === id) actions.value = siteActionsOf(res);
+      } catch {
+        // stays hidden - the server refuses the action anyway
+      }
+    },
+    { immediate: true },
+  );
+
+  return actions;
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.82.1-staging.475",
+  "version": "4.82.1-staging.477",
   "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-actions.ts

@@ -0,0 +1,18 @@
+/**
+ * What the signed-in person may do with an organisation's sites, as core
+ * answers it (`GET /api/customer-sites?withActions=true` -> `siteActions`).
+ *
+ * Owner rule 2026-10-01: creating, deleting or removing sites is for Seven365
+ * Super Admin, the organisation's owner and organisation-level members with the
+ * right; a member confined to sites never - whatever their role says. The
+ * server decides and refuses (403); the UI only hides what would be refused.
+ * Anything missing or unreadable reads as "no" (the button stays hidden).
+ */
+export type TSiteActions = { create: boolean; delete: boolean; createCustomer: boolean };
+
+export const NO_SITE_ACTIONS: TSiteActions = Object.freeze({ create: false, delete: false, createCustomer: false });
+
+export function siteActionsOf(response: unknown): TSiteActions {
+  const a = (response as { siteActions?: Record<string, unknown> } | null)?.siteActions ?? {};
+  return { create: a.create === true, delete: a.delete === true, createCustomer: a.createCustomer === true };
+}

package/utils/site-provider-members.ts

@@ -43,6 +43,43 @@ export function companyChipText(name: string, people: number): string {
   return `${name || "Unnamed company"} · ${people} ${people === 1 ? "person" : "people"}`;
 }
 
+/**
+ * The Company filter (owner 2026-10-02: a proper filter instead of a row of
+ * company chips): one entry per company, narrowed to the chosen service,
+ * named with its service, head count and who brought it in.
+ */
+export function companyFilterItems(
+  companies: Array<{ orgId: string; name?: string; type?: string; typeLabel?: string; people: number; invitedVia?: string }>,
+  type = "",
+): Array<{ title: string; value: string; subtitle: string }> {
+  return companies
+    .filter((c) => !type || c.type === type)
+    .map((c) => ({
+      title: c.name || "Unnamed company",
+      value: c.orgId,
+      subtitle: [
+        c.typeLabel || c.type || "",
+        `${c.people} ${c.people === 1 ? "person" : "people"}`,
+        c.invitedVia ? `via ${c.invitedVia}` : "",
+      ]
+        .filter(Boolean)
+        .join(" · "),
+    }));
+}
+
+/** "7 companies · 37 people · 1 company has not added anyone yet" */
+export function providerSummaryText(companies: Array<{ people: number }>): string {
+  const people = companies.reduce((n, c) => n + (c.people || 0), 0);
+  const idle = companies.filter((c) => !c.people).length;
+  return [
+    `${companies.length} ${companies.length === 1 ? "company" : "companies"}`,
+    `${people} ${people === 1 ? "person" : "people"}`,
+    idle ? `${idle} ${idle === 1 ? "company has" : "companies have"} not added anyone yet` : "",
+  ]
+    .filter(Boolean)
+    .join(" · ");
+}
+
 /** What an empty table says: nothing on site, nobody added yet, or the filters. */
 export function providerMembersEmptyText({
   companies,