@7365admin1/layer-common 4.88.0 → 4.89.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 4.89.0
+
+### Minor Changes
+
+- f4bbb6e: Members > Service Providers: the row of company chips above the table is replaced by a Company filter in the toolbar (each company with its service, head count and "via" inviter; narrowed by the Service filter) and a one-line summary ("7 companies · 37 people · 1 company has not added anyone yet").
+
 ## 4.88.0
 
 ### Minor Changes
@@ -1998,11 +2004,11 @@
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                                                                                                                                                                GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                                                                                                                                                                GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                                                                                                                                                                  GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                                                                                                                                                                  GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                                                                                                                                                                owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                                                                                                                                                                staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                                                                                                                                                                  owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                                                                                                                                                                  staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

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/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.88.0",
+  "version": "4.89.0",
   "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

@@ -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,