@7365admin1/layer-common 4.73.1-staging.464 → 4.73.1-staging.466

package/components/MemberMain.vue

@@ -115,32 +115,86 @@
           <template #item.nature="{ item }">
             {{ replaceMatch(item.nature, "_", " ") }}
           </template>
-          <!-- The role is a soft pill in the design, not a plain word. The
-               member's REAL role name; a deleted / other-organisation / missing
-               role says so instead of reading as a working grant
-               (memberRoleChip in utils/role.ts, server roleState). -->
-          <template #item.roleName="{ item }">
-            <StatusChip
-              v-if="memberRoleChip(item, orgLevel)"
-              :dot="false"
-              pill
-              :tone="memberRoleChip(item, orgLevel)?.tone"
-              class="member-role-chip"
-              data-test="member-role-chip"
-            >
-              {{ memberRoleChip(item, orgLevel)?.text }}
-            </StatusChip>
+          <!-- Name on top, email underneath in grey - only when it is not the
+               name again (owner report 2026-09-30). Search still matches the
+               email (server side). -->
+          <template #item.name="{ item }">
+            <div class="member-person" data-test="member-person">
+              <div class="member-person__name" :title="memberPerson(item).name">{{ memberPerson(item).name }}</div>
+              <div
+                v-if="memberPerson(item).email"
+                class="member-person__email"
+                :title="memberPerson(item).email"
+              >{{ memberPerson(item).email }}</div>
+            </div>
           </template>
-          <!-- Organization app: every person, and where they may go
-               (owner report 2026-09-29: a site-limited person stays listed). -->
-          <template v-if="orgLevel" #item.siteName="{ item }">
-            <span data-test="member-site-scope">{{ siteAccessLabel(item) }}</span>
+          <!-- ONE compact "Role & access" cell (owner report 2026-09-30, Aigle:
+               an 18-site person's roles and sites were two long paragraphs).
+               Each role once; one site by name, several as "N sites" that opens
+               the full site -> role list (utils/member-row.ts). A deleted /
+               other-organisation / missing role still says so (memberRoleChip,
+               server roleState). -->
+          <template #item.roleName="{ item }">
+            <div class="member-access" data-test="member-access">
+              <StatusChip
+                v-for="r in memberAccess(item, orgLevel).roles.slice(0, 2)"
+                :key="r"
+                :dot="false"
+                pill
+                :tone="memberAccess(item, orgLevel).tone"
+                class="member-role-chip"
+                :class="{ 'member-role-chip--warn': memberAccess(item, orgLevel).tone === 'warn' }"
+                :title="r"
+                data-test="member-role-chip"
+              >
+                {{ r }}
+              </StatusChip>
+              <span
+                v-if="memberAccess(item, orgLevel).roles.length > 2"
+                class="member-access__more"
+              >+{{ memberAccess(item, orgLevel).roles.length - 2 }}</span>
+              <v-menu
+                v-if="memberAccess(item, orgLevel).sites.length > 1"
+                location="bottom start"
+                :close-on-content-click="false"
+              >
+                <template #activator="{ props: siteProps }">
+                  <button
+                    v-bind="siteProps"
+                    type="button"
+                    class="member-access__sites"
+                    data-test="member-site-count"
+                  >
+                    {{ memberAccess(item, orgLevel).scope }}
+                  </button>
+                </template>
+                <v-card class="member-sites-card" data-test="member-site-list">
+                  <v-card-title class="text-subtitle-2">
+                    {{ memberPerson(item).name }} - {{ memberAccess(item, orgLevel).scope }}
+                  </v-card-title>
+                  <v-list density="compact">
+                    <v-list-item
+                      v-for="s in memberAccess(item, orgLevel).sites"
+                      :key="s.siteName"
+                      :title="s.siteName"
+                      :subtitle="s.roleName"
+                    />
+                  </v-list>
+                </v-card>
+              </v-menu>
+              <span
+                v-else-if="memberAccess(item, orgLevel).scope"
+                class="member-access__scope"
+                :title="memberAccess(item, orgLevel).scope"
+                data-test="member-site-scope"
+              >{{ memberAccess(item, orgLevel).scope }}</span>
+            </div>
           </template>
           <template #item.dateInvited="{ item }">
-            {{ formatDateInvited(item.dateInvited) }}
+            <span class="member-nowrap">{{ formatMemberDate(item.dateInvited) }}</span>
           </template>
           <template #item.lastLoginAt="{ item }">
-            <span data-test="member-last-active">{{ formatLastActive(item.lastLoginAt) }}</span>
+            <span class="member-nowrap" data-test="member-last-active">{{ formatLastActive(item.lastLoginAt) }}</span>
           </template>
           <template #item.action-table="{ item }">
            <div class="d-flex align-center justify-end ga-1">
@@ -371,11 +425,11 @@ import {
   otherSiteBannerText,
   roleUsableHere,
   safeReturnTo,
-  siteAccessLabel,
   limitedSites,
   withCurrentRole,
 } from "../utils/role";
 import { formatLastActive } from "../utils/last-active";
+import { formatMemberDate, memberAccess, memberPerson } from "../utils/member-row";
 
 const props = defineProps({
   /** The design's page title. Every app that mounts this screen calls it
@@ -434,40 +488,14 @@ const props = defineProps({
   },
   headers: {
     type: Array as PropType<Array<Record<string, string>>>,
+    // Email sits under the name and the sites inside "Role & access" (owner
+    // report 2026-09-30): two long columns became one compact cell.
     default: () => [
-      {
-        title: "Name",
-
-        value: "name",
-      },
-      {
-        title: "Email",
-
-        value: "email",
-      },
-      {
-        title: "Roles and Permission",
-
-        value: "roleName",
-      },
-      {
-        title: "Site Invited To",
-
-        value: "siteName",
-      },
-      {
-        title: "Date",
-
-        value: "dateInvited",
-      },
-      {
-        title: "Last active",
-        value: "lastLoginAt",
-      },
-      {
-        title: "Action",
-        value: "action-table",
-      },
+      { title: "Name", value: "name" },
+      { title: "Role & access", value: "roleName" },
+      { title: "Date", value: "dateInvited" },
+      { title: "Last active", value: "lastLoginAt" },
+      { title: "Action", value: "action-table" },
     ],
   },
   /**
@@ -809,25 +837,6 @@ function showMessage(msg: string, color: string) {
   messageSnackbar.value = true;
 }
 
-function formatDateInvited(value?: string | null) {
-  if (!value) return "";
-
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return "";
-
-  const parts = new Intl.DateTimeFormat("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-  }).formatToParts(date);
-
-  const getPart = (type: Intl.DateTimeFormatPartTypes) =>
-    parts.find((part) => part.type === type)?.value ?? "";
-
-  // Short ("Sep 29, 2026") so the table fits and the actions stay in view.
-  return `${getPart("month")} ${getPart("day")}, ${getPart("year")}`;
-}
-
 async function handleUpdateMemberStatus() {
   if (!selectedMemberId.value) return;
   updateLoading.value = true;
@@ -876,8 +885,74 @@ const updateActionText = computed(() => {
 .member-table--pin-action :deep(thead th:last-child) {
   z-index: 3;
 }
+/* One line per cell, the same height on every row (owner report 2026-09-30). */
+.member-table :deep(td) {
+  height: 60px;
+  vertical-align: middle;
+}
+.member-table :deep(th) {
+  white-space: nowrap;
+}
+.member-nowrap {
+  white-space: nowrap;
+}
+.member-person {
+  max-width: 260px;
+  min-width: 160px;
+}
+.member-person__name,
+.member-person__email {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.member-person__email {
+  font-size: 12px;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+}
+.member-access {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 6px;
+  max-width: 380px;
+  min-width: 180px;
+}
 .member-table :deep(.member-role-chip) {
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  flex-shrink: 1;
+}
+/* A warning names the fix; it may take two lines rather than be cut off. */
+.member-table :deep(.member-role-chip--warn) {
   white-space: normal;
-  height: auto;
+  max-width: 300px;
+}
+.member-access__more,
+.member-access__scope {
+  font-size: 12px;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.member-access__sites {
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  color: rgb(var(--v-theme-primary));
+  text-decoration: underline;
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+.member-sites-card {
+  max-height: 360px;
+  overflow-y: auto;
+  min-width: 280px;
 }
 </style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.73.1-staging.464",
+  "version": "4.73.1-staging.466",
   "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/hid-enrolment-subject.ts

@@ -0,0 +1,144 @@
+/**
+ * WHO A HID ENROLMENT IS FOR — the pure decisions behind the subject picker.
+ *
+ * `HidUserEnrollment.vue` can enrol a resident or a staff member. The write path
+ * always carried both (`subjectLink` maps them onto `person` or `member`); what
+ * was missing was a way to choose. These are the parts of that choice worth
+ * testing on their own, kept here because a `.vue` component has no test harness
+ * in this repo.
+ */
+
+export type HidEnrolmentSubject = "resident" | "property_management";
+
+/**
+ * The dropdown's options, in the order they are drawn.
+ *
+ * `title`/`value` because `AppSelect` takes that shape. A service-provider
+ * option is expected next; adding it here is most of the work, since the write
+ * path already maps `service_provider` onto `serviceProvider`.
+ */
+export const HID_ENROLMENT_SUBJECTS: ReadonlyArray<{
+  title: string;
+  value: HidEnrolmentSubject;
+}> = [
+  { title: "Resident", value: "resident" },
+  { title: "Member", value: "property_management" },
+];
+
+/**
+ * What an EDIT calls the subject it is already attached to.
+ *
+ * Wider than the dropdown on purpose. An identity's category cannot change after
+ * it is created, so an edit states it rather than offering it — and the records
+ * in the wild include `service_provider`, which the dropdown does not offer yet
+ * but `openEdit` does resolve. Falling back to the first option would label a
+ * contractor "Resident", which is worse than saying nothing useful.
+ */
+export function subjectCategoryLabel(category: unknown): string {
+  const labels: Record<string, string> = {
+    resident: "Resident",
+    property_management: "Member",
+    service_provider: "Service provider",
+    visitor: "Visitor",
+  };
+  return labels[String(category ?? "")] ?? "Unknown";
+}
+
+/**
+ * One page of `GET /api/members`, read defensively.
+ *
+ * `paginate` puts `{ items, pages }` at the root, but `items` sits under `data`
+ * on some of this product's endpoints, so both are read — the same allowance
+ * `readCandidatePage` makes. A response that carries neither is an empty page
+ * rather than a thrown error: an empty staff picker with a placeholder beats a
+ * broken dialog.
+ */
+export function readMemberPage(response: unknown): {
+  items: Record<string, unknown>[];
+  pages: number;
+  total: number;
+} {
+  const source = (response && typeof response === "object" ? response : {}) as Record<string, unknown>;
+  const nested = (source.data && typeof source.data === "object" ? source.data : {}) as Record<string, unknown>;
+  const raw = Array.isArray(source.items)
+    ? source.items
+    : Array.isArray(nested.items)
+      ? nested.items
+      : [];
+  const pages = Number(source.pages ?? nested.pages ?? 1);
+  const items = raw.filter((row): row is Record<string, unknown> => Boolean(row) && typeof row === "object");
+  /*
+   * `total` drives "showing 10 of 23" and the Load more button. It falls back to
+   * the page's own length, not to zero, so a response without it simply reads as
+   * "this is everything" — a missing count must never make the button offer a
+   * page that is not there.
+   */
+  const total = Number(source.total ?? nested.total ?? items.length);
+  return {
+    items,
+    pages: Number.isFinite(pages) && pages > 0 ? Math.floor(pages) : 1,
+    total: Number.isFinite(total) && total >= 0 ? Math.floor(total) : items.length,
+  };
+}
+
+/**
+ * Can this member actually be enrolled?
+ *
+ * Reader access is bound by USER id — `resolvePermissionUserBindings` in
+ * `iservice365-core` drops every subject without one — so a member with no app
+ * account cannot be given access and is not a candidate. The id arrives as a
+ * string from JSON but may be an object if a caller passes a raw document, so
+ * both are read rather than trusting the shape.
+ */
+export function memberHasAccount(row: Record<string, unknown> | null | undefined): boolean {
+  const user = row?.user;
+  if (!user) return false;
+  if (typeof user === "object") {
+    const id = (user as { _id?: unknown; toString?: () => string })._id ?? user;
+    return Boolean(String(id ?? "").trim());
+  }
+  return Boolean(String(user).trim());
+}
+
+/**
+ * How a member reads in the picker: their name, and their role beneath it.
+ *
+ * THE ACCOUNT'S NAME FIRST, then the membership's. The two diverge — a
+ * membership is created with whatever name was typed at invite time, and the
+ * person may have set their own on the account since — and the account name is
+ * the one they are known by. `userName` comes from the members endpoint's own
+ * lookup into `users`; a member with no account has none, but such a row is not
+ * a candidate anyway (`memberHasAccount`).
+ *
+ * Every step falls back, because a row with no name at all still has to be
+ * selectable rather than blank, or it cannot be told apart from the next one.
+ */
+export function memberCandidateOf(row: Record<string, unknown>): {
+  subjectId: string;
+  name: string;
+  subtitle: string;
+} {
+  const text = (value: unknown) => String(value ?? "").trim();
+  return {
+    subjectId: text(row._id),
+    name: text(row.userName) || text(row.name) || text(row.email) || "Member",
+    subtitle: text(row.roleName) || text(row.email) || "",
+  };
+}
+
+/**
+ * Why somebody the operator can see elsewhere is not in this list.
+ *
+ * Left unexplained, an absence reads as a broken screen — the same reason the
+ * resident cascade carries `unitResidentNote`. Returns "" when there is nothing
+ * to say, so the caller can render it unconditionally.
+ */
+export function hiddenSubjectNote(count: number, noun: "resident" | "member"): string {
+  if (!Number.isFinite(count) || count <= 0) return "";
+  const whole = Math.floor(count);
+  const subject = whole === 1 ? `1 ${noun}` : `${whole} ${noun}s`;
+  const verb = whole === 1 ? "is" : "are";
+  const holder = whole === 1 ? "that person has" : "they have";
+  return `${subject} at this site ${verb} not listed:`
+    + ` HID enrollment needs an app account, and ${holder} none yet.`;
+}

package/utils/last-active.ts

@@ -1,3 +1,5 @@
+import { formatMemberDate } from "./member-row.ts";
+
 /**
  * "Last active" on the Members lists: the last time the person signed in
  * (server field `lastLoginAt`). Never signed in since the field existed -> "—".
@@ -12,5 +14,5 @@ export function formatLastActive(value?: string | Date | null, now: Date = new D
   const days = Math.round((dayStart(now) - dayStart(date)) / 86400000);
   if (days === 0) return `Today, ${time}`;
   if (days === 1) return `Yesterday, ${time}`;
-  return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+  return formatMemberDate(date);
 }

package/utils/member-row.ts

@@ -0,0 +1,85 @@
+/**
+ * How one row of the Members table reads (owner report 2026-09-30, Aigle
+ * Members: an 18-site person's row was two ~250px paragraphs, role names were
+ * printed twice, the date wrapped onto three lines and the name was repeated
+ * as the email). Display only: nothing here changes what anybody may do.
+ */
+import { limitedSites, memberRoleChip } from "./role.ts";
+
+/** "Org - Admin ( For Site)" -> "Org Admin (per site)". Display only. */
+export function cleanRoleName(name: unknown): string {
+  if (typeof name !== "string") return "";
+  return name
+    .replace(/\s+/g, " ")
+    .replace(/\(\s+/g, "(")
+    .replace(/\s+\)/g, ")")
+    .replace(/\(for site\)/gi, "(per site)")
+    .replace(/(\S) - (\S)/g, "$1 $2")
+    .trim();
+}
+
+/** One site's role(s), each named once: "Security, Security" -> "Security". */
+function distinctRoles(roleName: unknown): string[] {
+  // ponytail: the server joins a site's roles with ", " (core peoplePage); a
+  // role name that itself holds ", " would be split here - display only.
+  const names = typeof roleName === "string" ? roleName.split(", ") : [];
+  return [...new Set(names.map(cleanRoleName).filter(Boolean))];
+}
+
+export type TMemberSite = { siteName: string; roleName: string };
+export type TMemberAccess = {
+  /** Role chips, each name once. */
+  roles: string[];
+  tone: "info" | "warn";
+  /** Where the person may go: "All sites", one site's name, "18 sites", or "". */
+  scope: string;
+  /** Every site with its role(s) - the popover behind a "N sites" count. */
+  sites: TMemberSite[];
+};
+
+/**
+ * The Members table's one "Role & access" cell.
+ * - Organisation level, limited to sites: the distinct roles once each, plus
+ *   the site's name (one site) or "N sites" (several; `sites` lists them all).
+ * - Organisation level, organisation-wide: the role, "All sites".
+ * - Site level: the role chip as before (it still warns about a role from
+ *   another site), with the row's site name.
+ */
+export function memberAccess(item: Record<string, any> | null | undefined, orgLevel = false): TMemberAccess {
+  const limited = limitedSites(item);
+  if (orgLevel && limited.length) {
+    const sites = limited.map((l) => ({
+      siteName: l.siteName || "A site",
+      roleName: distinctRoles(l.roleName).join(", ") || "No role",
+    }));
+    const roles = [...new Set(limited.flatMap((l) => distinctRoles(l.roleName)))];
+    return {
+      roles: roles.length ? roles : ["No role"],
+      tone: "info",
+      scope: sites.length === 1 ? sites[0].siteName : `${sites.length} sites`,
+      sites,
+    };
+  }
+  const chip = memberRoleChip(item ?? {}, orgLevel);
+  const text = chip ? (chip.tone === "info" ? cleanRoleName(chip.text) : chip.text) : "";
+  const scope = orgLevel ? "All sites" : typeof item?.siteName === "string" ? item.siteName : "";
+  return { roles: text ? [text] : [], tone: chip?.tone ?? "info", scope, sites: [] };
+}
+
+/** Name on top, email underneath - the email only when it adds something. */
+export function memberPerson(item: Record<string, any> | null | undefined): { name: string; email: string } {
+  const name = typeof item?.name === "string" ? item.name.trim() : "";
+  const email = typeof item?.email === "string" ? item.email.trim() : "";
+  if (!name) return { name: email, email: "" };
+  return { name, email: email.toLowerCase() === name.toLowerCase() ? "" : email };
+}
+
+/** "30 Sep 2026" - one line. Bad or empty -> "". */
+export function formatMemberDate(value?: string | Date | null): string {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  // Not en-GB's "short" month: newer ICU prints "Sept".
+  return `${date.getDate()} ${MONTHS[date.getMonth()]} ${date.getFullYear()}`;
+}
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];