@7365admin1/layer-common 4.42.0 → 4.43.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 4.43.0
+
+### Minor Changes
+
+- bb75a19: Service Providers screen (inviter's side): accepted providers appear under Service Providers for the site; the Invitations tab shows only this site's invitations with the company that accepted, who invited and when, when it was answered or expired, and a View provider panel; "Members" is now "Staff on site" and is not shown for invitations.
+
+## 4.42.1
+
+### Patch Changes
+
+- 531a883: Dashboard Customize: the widget toggles use the platform switch (`app-switch`), so ON and OFF are clearly different in light and dark mode, and Submit uses the theme's primary colour. The Customize choice is now remembered per signed-in user and per app (one `dashboard-widgets` cookie storing hidden widgets), so another user on the same browser, or another service app, no longer inherits it, and new widgets appear by default. Widget visibility follows the estate permission rule (`grantsPermission`): a saved role with an empty permission list sees every widget, and every shipped spelling of a grant counts. Hiding a KPI tile no longer leaves a gap in the row.
+
 ## 4.42.0
 
 ### Minor Changes
@@ -1477,11 +1489,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/DashboardMain.vue

@@ -317,7 +317,7 @@
         cols="12"
         sm="6"
         md="4"
-        lg="3"
+        :lg="kpiColLg"
         class="d-flex"
       >
         <!--
@@ -1107,14 +1107,19 @@
                     {{ widget.description }}
                   </div>
                 </div>
+                <!--
+                  `app-switch` is the platform toggle (primitives.css): blue
+                  track + white knob right when ON, grey knob left when OFF, in
+                  both themes. The old blue-grey colour drew ON as near-black on the
+                  dark card and grey on the light one - on and off looked alike.
+                -->
                 <v-switch
                   v-model="draftVisibleWidgetKeys"
                   :value="widget.key"
-                  color="blue-grey-darken-4"
-                  inset
+                  class="app-switch flex-grow-0"
                   hide-details
                   density="compact"
-                  aria-label="Toggle dashboard widget"
+                  :aria-label="`Show ${widget.title}`"
                 />
               </div>
             </v-card>
@@ -1136,7 +1141,7 @@
           </v-btn>
           <v-btn
             variant="flat"
-            color="blue-grey-darken-4"
+            color="primary"
             class="text-none font-weight-bold px-6"
             style="min-width: 110px"
             @click="submitCustomize"
@@ -1227,6 +1232,12 @@ import type { CookieOptions } from "#app";
 // `plugins/vuetify.ts`), and a bare call resolved to nothing when driven.
 import { buildWorkOrderStatus } from "../utils/dashboard";
 import { permissionsDenied } from "../utils/module-routes";
+import { grantsPermission } from "../utils/permission-spellings";
+import {
+  hiddenDashboardWidgets,
+  saveHiddenDashboardWidgets,
+  type TDashboardWidgetPrefs,
+} from "../utils/dashboard-widget-prefs";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -1482,21 +1493,20 @@ function canViewWidget(key: string) {
     return false;
   }
 
-  if (permissions.includes("*")) return true;
+  // The estate rule (`grantsPermission`): a saved role with an EMPTY list, or
+  // `*`, means everything. core seeds default roles with `permissions: []`, so
+  // an exact `includes` test showed those accounts an empty dashboard while
+  // every menu in the app let them in. `grantsPermission` also accepts every
+  // shipped spelling of a grant (`work-orders:` / `workOrder:` / ...).
+  if (!permissions.length || permissions.includes("*")) return true;
 
   if (bySchedule) {
     return hasSchedulePermission(permissions, "see-all-schedules");
   }
 
-  if (isPropertyMode.value && modulePermissions) {
-    return modulePermissions.some((permission) =>
-      permissions.includes(permission)
-    );
-  }
-
   if (modulePermissions) {
     return modulePermissions.some((permission) =>
-      permissions.includes(permission)
+      grantsPermission(permissions, permission)
     );
   }
 
@@ -2049,33 +2059,28 @@ const securityDefaultWidgetKeys = [
 ];
 
 /**
- * THE CUSTOMISE CHOICE, REMEMBERED.
+ * THE CUSTOMISE CHOICE, REMEMBERED - per signed-in user, per app.
  *
- * Hiding a widget worked and then forgot: nothing was written anywhere, so a
- * reload brought every panel back and the dialog was decoration.
+ * A cookie on the layer's own `cookieConfig` (the parent-domain cookie `theme`
+ * and `landing-page` already use; localStorage would be per-hostname and there
+ * is no preferences API on the server). What is stored and why it is keyed by
+ * user and app is in `utils/dashboard-widget-prefs.ts`.
  *
- * A COOKIE, and specifically the layer's own `cookieConfig` - the same
- * mechanism `sid`, `user`, `landing-page` and the light/dark preference already
- * travel on (see `composables/useThemePreference.ts` for the full reasoning).
- * localStorage would be per-origin, and this is one component shipped into
- * seven applications on seven hostnames. No new storage mechanism, and no
- * invented endpoint - there is no save API on the server for this.
- *
- * One cookie per dashboard MODE, because the three modes have different widget
- * sets and a security member's choice must not decide what a hygiene member
- * sees.
+ * The earlier `dashboard-widgets-<mode>` cookies are not read: they belonged
+ * to whoever last used the browser, and to five apps at once.
  */
-const widgetPrefsCookie = useCookie<string[] | null>(
-  `dashboard-widgets-${
-    isPropertyMode.value
-      ? "property"
-      : isSecurityMode.value
-      ? "security"
-      : "service"
-  }`,
-  runtimeConfig.public.cookieConfig as CookieOptions<string[] | null> & {
-    readonly?: false;
-  }
+const cookieOptions = runtimeConfig.public.cookieConfig as CookieOptions<any> & {
+  readonly?: false;
+};
+const widgetPrefsCookie = useCookie<TDashboardWidgetPrefs | null>(
+  "dashboard-widgets",
+  cookieOptions
+);
+// The `user` cookie holds the signed-in user's id (`useLocalAuth`).
+const widgetPrefsUser = String(useCookie("user", cookieOptions).value ?? "");
+const widgetPrefsApp = String(props.serviceType ?? "");
+const hiddenByUser = ref<string[]>(
+  hiddenDashboardWidgets(widgetPrefsCookie.value, widgetPrefsUser, widgetPrefsApp)
 );
 
 const defaultVisibleWidgetKeys = computed(() => {
@@ -2096,26 +2101,10 @@ const defaultVisibleWidgetKeys = computed(() => {
 watch(
   defaultVisibleWidgetKeys,
   (keys) => {
-    const nextKeys = [...keys];
-    if (!visibleWidgetKeys.value.length) {
-      // A remembered choice wins on first paint, filtered against the keys this
-      // mode actually has so a stale cookie cannot resurrect a removed widget.
-      // `Array.isArray` rather than a length check: "the user hid everything"
-      // and "there is no cookie" are different answers.
-      const remembered = Array.isArray(widgetPrefsCookie.value)
-        ? widgetPrefsCookie.value.filter((k) => nextKeys.includes(k))
-        : null;
-      const initial = remembered ?? nextKeys;
-      visibleWidgetKeys.value = initial;
-      draftVisibleWidgetKeys.value = [...initial];
-      return;
-    }
-    visibleWidgetKeys.value = visibleWidgetKeys.value.filter((k) =>
-      nextKeys.includes(k)
-    );
-    draftVisibleWidgetKeys.value = draftVisibleWidgetKeys.value.filter((k) =>
-      nextKeys.includes(k)
+    visibleWidgetKeys.value = keys.filter(
+      (k) => !hiddenByUser.value.includes(k)
     );
+    draftVisibleWidgetKeys.value = [...visibleWidgetKeys.value];
   },
   { immediate: true }
 );
@@ -2546,6 +2535,13 @@ const visibleKpiCards = computed(() =>
   kpiCards.value.filter((card) => isWidgetVisible(card.key))
 );
 
+// Four tiles fill a row at `lg`; hiding one in Customize left a hole where it
+// had been. Fewer tiles share the row instead.
+const kpiColLg = computed(() => {
+  const shown = visibleKpiCards.value.length;
+  return shown >= 4 || shown === 0 ? 3 : 12 / shown;
+});
+
 /**
  * Nothing to draw, and which of the two reasons it is.
  *
@@ -3599,10 +3595,20 @@ function resetCustomizeDraft() {
 }
 
 function submitCustomize() {
-  visibleWidgetKeys.value = [...draftVisibleWidgetKeys.value];
-  // The write is the whole point - see `widgetPrefsCookie`. Saving on Submit
-  // rather than on every switch keeps Cancel meaning cancel.
-  widgetPrefsCookie.value = [...draftVisibleWidgetKeys.value];
+  const hidden = defaultVisibleWidgetKeys.value.filter(
+    (k) => !draftVisibleWidgetKeys.value.includes(k)
+  );
+  hiddenByUser.value = hidden;
+  visibleWidgetKeys.value = defaultVisibleWidgetKeys.value.filter(
+    (k) => !hidden.includes(k)
+  );
+  // The write is the whole point - see `widgetPrefsCookie`.
+  widgetPrefsCookie.value = saveHiddenDashboardWidgets(
+    widgetPrefsCookie.value,
+    widgetPrefsUser,
+    widgetPrefsApp,
+    hidden
+  );
   widgetSearch.value = "";
   customizeDialog.value = false;
 }

package/components/ServiceProviderMain.vue

@@ -101,9 +101,14 @@
           style="max-height: calc(100vh - 280px)"
         >
           <template #item.companyName="{ item }">
-            <span class="d-block text-truncate sp-col-company">{{
-              item.companyName
-            }}</span>
+            <span
+              class="d-block text-truncate sp-col-company"
+              :class="{ 'sp-muted': item.companyKnown === false }"
+            >{{ item.companyName }}</span>
+            <div v-if="item.contactPhone" class="sp-sub">{{ item.contactPhone }}</div>
+          </template>
+          <template #item.invited="{ item }">
+            <span class="d-block text-truncate">{{ item.invitedLine || "-" }}</span>
           </template>
           <template #item.email="{ item }">
             <span class="d-block text-truncate sp-col-email">{{
@@ -128,9 +133,10 @@
             -->
             <StatusChip
               class="text-none"
-              :status="item.statusRaw || item.status"
+              :status="item.viewStatus || item.statusRaw || item.status"
               :label="item.status"
             />
+            <div v-if="item.statusLine" class="mt-1 sp-sub">{{ item.statusLine }}</div>
             <!-- Was `text-caption text-medium-emphasis` - Roboto 12px at
                  Vuetify's 60% opacity. The design's sub-line is `--muted`. -->
             <div v-if="item.rejectionReason" class="mt-1 sp-reject-reason">
@@ -157,6 +163,11 @@
                 </v-btn>
               </template>
               <v-list density="compact" min-width="220">
+                <v-list-item
+                  v-if="item.providerOrgId"
+                  title="View provider"
+                  @click="openProvider(item)"
+                />
                 <v-list-item
                   title="Cancel invitation"
                   :disabled="!canCancelInvite(item)"
@@ -178,6 +189,21 @@
                 />
               </v-list>
             </v-menu>
+            <!--
+              A provider on this site through an accepted invitation. Its row is
+              the engagement itself, not a stored service-providers record, so
+              the In-Active move (which acts on that record) does not apply.
+            -->
+            <v-btn
+              v-else-if="item.source === 'engagement'"
+              icon
+              variant="text"
+              density="comfortable"
+              aria-label="View provider"
+              @click="openProvider(item)"
+            >
+              <v-icon>mdi-information-outline</v-icon>
+            </v-btn>
             <v-menu v-else-if="item.source === 'provider'" location="bottom end">
               <template #activator="{ props: menuProps }">
                 <v-btn
@@ -239,6 +265,26 @@
 
     Same members, same two columns, same loading and empty copy, same close.
   -->
+  <!-- The provider, as the organisation that invited it may see it. -->
+  <v-dialog v-model="providerDialog" max-width="480">
+    <v-card class="screen-modal">
+      <v-card-title>{{ providerRow?.companyName }}</v-card-title>
+      <v-card-text class="screen-modal__body">
+        <dl class="sp-details">
+          <template v-for="line in providerLines" :key="line[0]">
+            <dt>{{ line[0] }}</dt>
+            <dd>{{ line[1] }}</dd>
+          </template>
+        </dl>
+      </v-card-text>
+      <div class="screen-modal__footer">
+        <v-btn class="screen-btn-ghost" variant="outlined" @click="providerDialog = false">
+          Close
+        </v-btn>
+      </div>
+    </v-card>
+  </v-dialog>
+
   <v-dialog v-model="viewDialog" max-width="514">
     <v-card class="screen-modal">
       <v-card-title>Members ({{ memberDialogCount }})</v-card-title>
@@ -669,6 +715,12 @@ import useVerification from "../composables/useVerification";
 // import useRole from "../composables/useRole";
 import { errorConverter } from "../utils/data";
 import { pickRouteName } from "../utils/route-name";
+import {
+  sentCompany,
+  sentInvitedLine,
+  sentStatusLine,
+  spDay,
+} from "../utils/sp-inviter-row";
 
 type ListTab = "active" | "pending" | "inactive";
 
@@ -681,9 +733,21 @@ type TableRow = {
   type: string;
   members: string;
   status: string;
-  source: "provider" | "invite";
+  /** provider: a stored row; engagement: on the site through an accepted
+   *  invitation; invite: an invitation this organisation sent. */
+  source: "provider" | "engagement" | "invite";
   /** the stored status, for deciding which actions a row may offer */
   statusRaw?: string;
+  /** what the row reads as (a lapsed "pending" is "expired") - the chip tone */
+  viewStatus?: string;
+  statusLine?: string;
+  companyKnown?: boolean;
+  invitedLine?: string;
+  providerOrgId?: string;
+  contactEmail?: string;
+  contactPhone?: string;
+  answeredAt?: string | null;
+  onSite?: boolean;
   /** shown under a "Not approved" row, in Seven365's own words */
   rejectionReason?: string;
   siteName?: string;
@@ -774,7 +838,7 @@ const billingRouteName = pickRouteName(
   "service-provider-mgmt-billing"
 );
 
-const headers = [
+const providerHeaders = [
   {
     title: "Company name",
     value: "companyName",
@@ -797,7 +861,8 @@ const headers = [
     maxWidth: "180px",
   },
   {
-    title: "Members",
+    // The provider's people assigned to this site - not its whole headcount.
+    title: "Staff on site",
     value: "members",
     sortable: false,
     width: "88px",
@@ -819,6 +884,20 @@ const headers = [
   },
 ];
 
+/** The Invitations tab: who it went to, who sent it and when, what happened. */
+const inviteHeaders = [
+  { ...providerHeaders[0], title: "Company" },
+  { ...providerHeaders[1], title: "Invited email" },
+  { ...providerHeaders[2], title: "Service" },
+  { title: "Invited", value: "invited", sortable: false, minWidth: "150px" },
+  { ...providerHeaders[4], width: "200px" },
+  providerHeaders[5],
+];
+
+const headers = computed(() =>
+  listTab.value === "pending" ? inviteHeaders : providerHeaders
+);
+
 const { natureOfBusinessV3 } = useLocal();
 const { requiredRule, emailRule, debounce } = useUtils();
 const { getUserByEmail } = useUser();
@@ -1171,6 +1250,37 @@ function typeDisplay(type: string, nature?: string) {
   return hit?.title ?? type ?? "-";
 }
 
+const providerDialog = ref(false);
+const providerRow = ref<TableRow | null>(null);
+
+function openProvider(row: TableRow) {
+  providerRow.value = row;
+  providerDialog.value = true;
+}
+
+/** Only what the inviting organisation needs; nothing about the provider's
+ *  own staff or other clients. */
+const providerLines = computed<Array<[string, string]>>(() => {
+  const row = providerRow.value;
+  if (!row) return [];
+  const lines: Array<[string, string]> = [
+    ["Service", row.type],
+    ["Email", row.contactEmail || row.email],
+  ];
+  if (row.contactPhone) lines.push(["Phone", row.contactPhone]);
+  if (row.source === "invite") {
+    lines.push(["Invited", row.invitedLine || "-"]);
+    if (row.answeredAt) lines.push(["Accepted", spDay(row.answeredAt)]);
+    lines.push([
+      "On this site",
+      row.onSite ? "Yes" : "No - removed since it accepted",
+    ]);
+  } else {
+    lines.push(["Staff on this site", row.members]);
+  }
+  return lines.filter((line) => line[1]);
+});
+
 function statusDisplay(raw: string, source: TableRow["source"]) {
   if (source === "invite") return "Pending";
   const s = (raw || "").toLowerCase();
@@ -1228,12 +1338,14 @@ function mapProviderRows(raw: Record<string, any>[]): TableRow[] {
     _id: String(row._id ?? ""),
     userId: String(row.user ?? ""),
     serviceProviderOrgId: String(row.serviceProviderOrgId ?? ""),
-    companyName: row.name ?? "-",
+    companyName: row.name || "-",
     email: formatEmailCell(row.email),
+    contactEmail: String(row.email ?? ""),
+    contactPhone: String(row.contact ?? ""),
     type: typeDisplay(row.type ?? "", row.nature),
     members: formatMembersCell(row.members),
     status: statusDisplay(row.status ?? "active", "provider"),
-    source: "provider",
+    source: row.source === "engagement" ? "engagement" : "provider",
   }));
 }
 
@@ -1247,24 +1359,35 @@ function inviteTypeLabel(t: string) {
 }
 
 function mapInviteRows(raw: Record<string, any>[]): TableRow[] {
-  return raw.map((row) => ({
+  return raw.map((row) => {
+    const company = sentCompany(row);
+    return {
     _id: String(row._id ?? ""),
     userId: String(row.user ?? ""),
-    serviceProviderOrgId: String(row.metadata?.serviceProviderOrgId ?? ""),
-    companyName: row.metadata?.name || "-",
+    serviceProviderOrgId: String(row.providerOrgId || row.metadata?.serviceProviderOrgId || ""),
+    companyName: company.text,
+    companyKnown: company.known,
     email: formatEmailCell(row.email),
     type: row.metadata?.app
       ? typeDisplay(row.metadata.app)
       : inviteTypeLabel(row.type ?? ""),
-    members: "-",
-    // Every invitation used to read "Pending" whatever had happened to it. It
-    // now says which of the seven states it is actually in, in words.
-    status: row.statusLabel || serviceProviderInviteLabel(row.status),
+    members: "",
+    status:
+      row.statusLabel || serviceProviderInviteLabel(row.viewStatus || row.status),
     statusRaw: String(row.status ?? ""),
+    viewStatus: String(row.viewStatus || row.status || ""),
+    statusLine: sentStatusLine(row),
+    invitedLine: sentInvitedLine(row),
+    providerOrgId: String(row.providerOrgId ?? ""),
+    contactEmail: String(row.contactEmail ?? ""),
+    contactPhone: String(row.contactPhone ?? ""),
+    answeredAt: row.answeredAt ?? null,
+    onSite: Boolean(row.onSite),
     rejectionReason: row.rejectionReason ?? "",
     siteName: row.metadata?.siteName ?? "",
     source: "invite",
-  }));
+    };
+  });
 }
 
 async function loadList() {
@@ -1294,6 +1417,8 @@ async function loadList() {
       // cancellation is visible here instead of the row simply vanishing.
       const data = await getInvitations({
         org: props.orgId,
+        // this site's invitations, not every site the organisation has
+        siteId: props.siteId,
         status:
           "awaiting-approval,pending,complete,rejected,declined,cancelled,expired",
         page: page.value,
@@ -1313,6 +1438,9 @@ async function loadList() {
       search: searchText.value?.trim() || "",
       limit: pageSize,
       status: statusParam,
+      // the active tab also lists providers on this site through an
+      // accepted invitation
+      ...(statusParam === "active" ? { include: "engagements" } : {}),
     });
     items.value = mapProviderRows(rowsOf(data));
     pages.value = data.pages ?? 0;
@@ -1569,6 +1697,32 @@ async function submitServiceProviderInvite() {
 
 /* The design's sub-line: `--muted` at 12px, the same figure batch I's
    `AttachmentsViewer` settled on. There is no `--fs-sub` token. */
+.sp-muted {
+  color: var(--muted);
+}
+
+.sp-sub {
+  font-family: var(--font-sans);
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.sp-details {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 8px 16px;
+  margin: 0;
+}
+
+.sp-details dt {
+  color: var(--muted);
+}
+
+.sp-details dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
 .sp-reject-reason,
 .sp-no-permission,
 .sp-members-note {

package/composables/useServiceProvider.ts

@@ -58,6 +58,8 @@ export default function useServiceProvider() {
     orgId = "",
     siteId = "",
     status = "",
+    /** "engagements": also providers engaged through an accepted invitation. */
+    include = "",
   } = {}) {
     return useNuxtApp().$api<Record<string, any>>("/api/service-providers", {
       method: "GET",
@@ -69,6 +71,7 @@ export default function useServiceProvider() {
         orgId,
         siteId,
         ...(status ? { status } : {}),
+        ...(include ? { include } : {}),
       },
     });
   }

package/composables/useServiceProviderInvitation.ts

@@ -18,6 +18,21 @@ export type TServiceProviderInvitation = {
   expireAt?: string;
   deletedAt?: string | null;
   metadata?: Record<string, any>;
+  /** A lapsed "pending" reads "expired"; `status` stays the stored value. */
+  viewStatus?: string;
+  /** The company that accepted it, or the new company's name (sign-up). */
+  companyName?: string;
+  providerOrgId?: string;
+  service?: string;
+  invitedByName?: string;
+  invitedAt?: string | null;
+  /** When it was accepted, declined, cancelled or expired. */
+  answeredAt?: string | null;
+  /** Shown only once accepted. */
+  contactEmail?: string;
+  contactPhone?: string;
+  /** Accepted and still engaged on the site. */
+  onSite?: boolean;
   history?: Array<{
     action: string;
     at: string;
@@ -73,7 +88,9 @@ export default function useServiceProviderInvitation() {
 
   function getInvitations({
     org = "",
+    siteId = "",
     status = "",
+    search = "",
     page = 1,
     limit = 20,
   } = {}): Promise<{
@@ -83,7 +100,14 @@ export default function useServiceProviderInvitation() {
   }> {
     return useNuxtApp().$api(base, {
       method: "GET",
-      query: { org, status, page, limit },
+      query: {
+        org,
+        status,
+        page,
+        limit,
+        ...(siteId ? { siteId } : {}),
+        ...(search ? { search } : {}),
+      },
     });
   }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.42.0",
+  "version": "4.43.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/dashboard-widget-prefs.ts

@@ -0,0 +1,54 @@
+/**
+ * The dashboard's Customize choice, as it is remembered in one cookie.
+ *
+ * WHOSE and WHICH APP. The old cookie was keyed only by dashboard mode, so the
+ * next person to sign in on the same browser inherited the last person's
+ * choice, and Hygiene, M&E, Pest, Landscape and Pool all shared ONE choice -
+ * hiding a panel in one hid it in the other four.
+ *
+ * HIDDEN, not shown. The old cookie listed the widgets to show, so any widget
+ * added after someone once pressed Submit stayed hidden for them forever.
+ * Remembering what was switched OFF lets a new widget appear by default.
+ *
+ * Still a cookie on the layer's `cookieConfig` (the same parent-domain cookie
+ * `theme` and `landing-page` use): there is no preferences API on the server.
+ * One cookie holds the signed-in user's choice for every app; a different user
+ * signing in starts from the defaults and replaces it on their first Submit.
+ */
+export type TDashboardWidgetPrefs = {
+  user: string;
+  hidden: Record<string, string[]>;
+};
+
+function prefsFor(stored: unknown, user: string) {
+  if (!user || !stored || typeof stored !== "object") return null;
+  const prefs = stored as Partial<TDashboardWidgetPrefs>;
+  if (prefs.user !== user) return null;
+  if (!prefs.hidden || typeof prefs.hidden !== "object") return null;
+  return prefs.hidden;
+}
+
+/** The widgets this user switched off in this app. Empty = the defaults. */
+export function hiddenDashboardWidgets(
+  stored: unknown,
+  user: string,
+  app: string,
+): string[] {
+  const list = prefsFor(stored, user)?.[app];
+  return Array.isArray(list)
+    ? list.filter((key): key is string => typeof key === "string")
+    : [];
+}
+
+/** The cookie value after this user saves `hidden` for this app. */
+export function saveHiddenDashboardWidgets(
+  stored: unknown,
+  user: string,
+  app: string,
+  hidden: readonly string[],
+): TDashboardWidgetPrefs {
+  return {
+    user,
+    hidden: { ...(prefsFor(stored, user) ?? {}), [app]: [...hidden] },
+  };
+}

package/utils/sp-inviter-row.ts

@@ -0,0 +1,69 @@
+/**
+ * The inviting organisation's view of one service-provider invitation, in
+ * words. Pure, so it is tested without a browser.
+ *
+ * The company name comes from the server (`companyName`: the company that
+ * accepted, or the new company's name a sign-up invitation carried). While an
+ * invitation is unanswered the company is genuinely not known yet - the cell
+ * says so instead of drawing "-".
+ */
+
+export type TSentInvitation = {
+  status?: string;
+  viewStatus?: string;
+  statusLabel?: string;
+  companyName?: string;
+  metadata?: Record<string, any>;
+  invitedByName?: string;
+  invitedAt?: string | null;
+  createdAt?: string | null;
+  answeredAt?: string | null;
+  onSite?: boolean;
+};
+
+const ANSWERED: Record<string, string> = {
+  complete: "Accepted",
+  declined: "Declined",
+  cancelled: "Cancelled",
+  rejected: "Not approved",
+  expired: "Expired",
+};
+
+export function spDay(value?: string | null): string {
+  if (!value) return "";
+  const d = new Date(value);
+  return Number.isNaN(d.getTime())
+    ? ""
+    : d.toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" });
+}
+
+/** The company cell: the name, or why there is none yet. */
+export function sentCompany(row: TSentInvitation): { text: string; known: boolean } {
+  const name = String(row.companyName || row.metadata?.name || "").trim();
+  if (name) return { text: name, known: true };
+  const status = row.viewStatus || row.status || "";
+  return {
+    text: ["pending", "awaiting-approval"].includes(status) ? "Not accepted yet" : "Not accepted",
+    known: false,
+  };
+}
+
+/** "Invited by Tommy on 24 Sep 2026". */
+export function sentInvitedLine(row: TSentInvitation): string {
+  const who = String(row.invitedByName ?? "").trim();
+  const when = spDay(row.invitedAt ?? row.createdAt);
+  return [who ? `by ${who}` : "", when ? `on ${when}` : ""].filter(Boolean).join(" ");
+}
+
+/** The line under the status: when it was answered, and what it means now. */
+export function sentStatusLine(row: TSentInvitation): string {
+  const status = row.viewStatus || row.status || "";
+  const when = spDay(row.answeredAt);
+  if (status === "complete" && row.onSite === false) {
+    return `Accepted${when ? ` on ${when}` : ""} · no longer on this site`;
+  }
+  if (ANSWERED[status]) return when ? `${ANSWERED[status]} on ${when}` : "";
+  if (status === "awaiting-approval") return "Seven365 checks it before it is sent";
+  if (status === "pending") return "Sent - waiting for their answer";
+  return "";
+}