@7365admin1/layer-common 4.41.0 → 4.43.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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
+
+- 5472953: Roles and permissions (owner approval 2026-09-25): Robots offered in the Property Management and Cleaning role editors; the PM editor's camera-wall row reads "CCTV" (label only, `virtual-patrol:*` strings unchanged); PM's CCTV page follows the client's module list (`org-site-cctv` -> `virtual-patrol`, fails open); `NavigationDrawer` takes `sectionLabels` so an app can rename a sidebar heading.
+
 ## 4.41.0
 
 ### Minor Changes
@@ -1471,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/Layout/NavigationDrawer.vue

@@ -129,6 +129,9 @@ import { withoutDeniedRoutes } from "../../utils/module-routes";
 const props = defineProps({
   navigationItems: { type: Array, required: true },
   title: { type: String, default: "" },
+  // An app's own name for a section heading (`withSections`), e.g.
+  // `{ "SECURITY OPERATIONS": "ESTATE SECURITY" }` in Property Management.
+  sectionLabels: { type: Object, default: () => ({}) },
 });
 
 const emit = defineEmits(["navigate"]);
@@ -196,7 +199,7 @@ const navigationItems = computed(() => {
   return withoutDeniedRoutes(items, userAppModulesDenied.value);
 });
 
-const sectionedItems = computed(() => withSections(navigationItems.value));
+const sectionedItems = computed(() => withSections(navigationItems.value, props.sectionLabels as Record<string, string>));
 
 /**
  * The design's brand tile carries the product's own mark. One icon for eleven

package/components/RolePermissionFormCreate.vue

@@ -139,7 +139,7 @@
                   </template>
                   <v-list-item-title>
                     <span class="text-capitalize role-create__row-title">
-                      {{ formatResourceLabel(String(resourceKey)) }}
+                      {{ formatResourceLabel(String(resourceKey), props.type) }}
                     </span>
                   </v-list-item-title>
                   <template #append>
@@ -279,6 +279,7 @@ const props = defineProps({
   },
 });
 
+
 const emit = defineEmits(["cancel", "success", "success:create-more"]);
 
 const validForm = ref(false);
@@ -537,14 +538,14 @@ const moduleSearch = ref<string | null>("");
 /** `safePermissions`, narrowed to what the search box matches. */
 const visiblePermissions = computed(() => {
   const query = (moduleSearch.value ?? "").trim().toLowerCase();
-  const all = sortResourcesByLabel(safePermissions.value);
+  const all = sortResourcesByLabel(safePermissions.value, props.type);
   if (!query) return all;
 
   const matches: Record<string, any> = {};
   for (const [resource, actions] of Object.entries(all)) {
     const haystack = [
       resource,
-      formatResourceLabel(resource),
+      formatResourceLabel(resource, props.type),
       ...Object.keys(actions ?? {}).flatMap((action) => [
         action,
         formatActionLabel(action),

package/components/RolePermissionFormPreviewUpdate.vue

@@ -102,7 +102,7 @@
                     />
                   </template>
                   <v-list-item-title class="text-capitalize role-perm__row-title">
-                    {{ formatResourceLabel(String(resourceKey)) }}
+                    {{ formatResourceLabel(String(resourceKey), props.type) }}
                   </v-list-item-title>
                   <template #append>
                     <div class="role-perm__cat-actions">
@@ -191,7 +191,7 @@
                   <v-divider v-if="resourceIndex > 0" />
                   <v-list-item density="compact" :ripple="false">
                     <v-list-item-title class="text-capitalize role-perm__row-title">
-                      {{ formatResourceLabel(String(resourceKey)) }}
+                      {{ formatResourceLabel(String(resourceKey), props.type) }}
                     </v-list-item-title>
                     <v-list-item-subtitle class="role-perm__row-sub">
                       {{
@@ -311,8 +311,15 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  // The role type the editor was opened for; only changes a module's NAME
+  // where one app calls a key something else (`RESOURCE_LABELS_BY_TYPE`).
+  type: {
+    type: String,
+    default: "",
+  },
 });
 
+
 /** A role holding the wildcard has ONE stored entry and reaches everything. */
 const holdsWildcard = computed(() => (definedModel.value ?? []).includes("*"));
 
@@ -486,14 +493,14 @@ const moduleSearch = ref<string | null>("");
 
 const visiblePermissions = computed(() => {
   const query = (moduleSearch.value ?? "").trim().toLowerCase();
-  const all = sortResourcesByLabel(safePermissions.value);
+  const all = sortResourcesByLabel(safePermissions.value, props.type);
   if (!query) return all;
 
   const matches: Record<string, any> = {};
   for (const [resource, actions] of Object.entries(all)) {
     const haystack = [
       resource,
-      formatResourceLabel(resource),
+      formatResourceLabel(resource, props.type),
       ...Object.keys((actions as Record<string, unknown>) ?? {}).flatMap(
         (action) => [action, formatActionLabel(action)]
       ),
@@ -509,7 +516,7 @@ const visiblePermissions = computed(() => {
 // Same A-Z as the tree above it; a second list in a second order reads as a
 // different kind of thing.
 const sortedNotOffered = computed(() =>
-  sortResourcesByLabel(props.notOfferedPermissions as Record<string, any>)
+  sortResourcesByLabel(props.notOfferedPermissions as Record<string, any>, props.type)
 );
 
 /*

package/components/RolePermissionMain.vue

@@ -120,6 +120,7 @@
         :can-update-role="props.canUpdateRole"
         :catalogue-size="permissionCatalogueSize"
         :module-count="permissionModuleCount"
+        :type="props.type"
       />
     </v-dialog>
 

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/useCleaningPermission.ts

@@ -13,6 +13,7 @@ export default function useCleaningPermission() {
     bulletinBoardPermissions,
  
     inventoryPermissions,
+    robotPermissions,
   } = useCommonPermissions();
   const permissions: TPermissions = {
     inventory: inventoryPermissions,
@@ -291,6 +292,7 @@ export default function useCleaningPermission() {
           "Allows the user to view detailed information for item checkouts.",
       },
     },
+    "robot-mgmt": robotPermissions,
   };
 
   return {

package/composables/useCommonPermission.ts

@@ -331,7 +331,39 @@ export function useCommonPermissions() {
     },
   };
 
+  /*
+   * ROBOTS - owner approval 2026-09-25, item 1: the Property Management and
+   * Cleaning role editors offer Robots, so a narrower role can be given robot
+   * access. Same five strings, spelling and wording as `useSecurityPermission`
+   * and exactly what core `robot-permission.util.ts ROBOT_PERMISSIONS` enforces.
+   * Catalogue-only: offering an entry grants nobody anything until it is ticked.
+   */
+  const robotPermissions = {
+    "add-robot": {
+      check: true,
+      description: "Allows the user to add a new robot to the system.",
+    },
+    "see-all-robots": {
+      check: true,
+      description: "Allows the user to view the list of all robots.",
+    },
+    "see-robot-details": {
+      check: true,
+      description: "Allows the user to view the details of a specific robot.",
+    },
+    "update-robot": {
+      check: true,
+      description: "Allows the user to update robot details.",
+    },
+    "delete-robot": {
+      check: true,
+      description:
+        "Allows the user to remove a robot from the system permanently.",
+    },
+  };
+
   return {
+    robotPermissions,
     inventoryPermissions,
     invitationPermissions,
     memberPermissions,

package/composables/usePropertyPermission.ts

@@ -42,6 +42,7 @@ export default function usePropertyPermission() {
     siteSettingsPermissions,
   
     inventoryPermissions,
+    robotPermissions,
   } = useCommonPermissions();
 
 
@@ -618,6 +619,7 @@ export default function usePropertyPermission() {
           "Allows the user to view the list of all resident transactions on mobile. Checked by the iMA365 mobile app.",
       },
     },
+    "robot-mgmt": robotPermissions,
     "site-settings": siteSettingsPermissions
   };
 

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.41.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/module-routes.ts

@@ -12,7 +12,7 @@
  * (checked against every app's own `useLocalPermission` nav gate, 2026-09-11).
  * Shared or ambiguous pages stay out: calendar, keys (gated on `site-settings`),
  * access-mgmt (`site-settings:manage-entry-pass` also opens it), equipment and
- * inventory, the property CCTV wall, service-providers and support tickets.
+ * inventory, service-providers and support tickets.
  *
  * NEVER MAPPED: the dashboard, settings, members, invitations and roles. A client
  * must always be able to run its own people and roles; the server never denies
@@ -40,6 +40,13 @@ export const MODULE_ROUTES: Readonly<Record<string, string>> = Object.freeze({
   // Includes its CCTV page: security's drawer shows it to whoever can see
   // Virtual Patrol, so it follows the same module.
   "org-site-virtual-patrol": "virtual-patrol",
+  // Property Management's camera wall (owner approval 2026-09-25, item 3). Its
+  // menu, page and the server's wall endpoint all read the four legacy
+  // `virtual-patrol:` strings (`useCameraViewPermission`, core
+  // `CAMERA_VIEW_PERMISSIONS`), and the PM role editor now calls that row
+  // "CCTV". So it follows the same module as Security's own CCTV page above.
+  // Fails open like every entry: a client with no module list keeps it.
+  "org-site-cctv": "virtual-patrol",
   "org-site-robot-management": "robot-mgmt",
   "org-site-attendance": "attendance-mgmt",
   "org-site-my-attendance": "my-attendance",

package/utils/nav-sections.ts

@@ -125,7 +125,13 @@ export const SECTION_ORDER: string[] = [
  * objects; only the order changes.
  */
 export function withSections<T extends { title?: string }>(
-  items: T[]
+  items: T[],
+  /**
+   * An application's own name for a heading, e.g. Property Management prints
+   * SECURITY OPERATIONS as ESTATE SECURITY (owner approval 2026-09-25, item 6).
+   * Changes the printed label only; grouping and order are unchanged.
+   */
+  labels: Readonly<Record<string, string>> = {}
 ): Array<TSectionedNavItem<T>> {
   // An unmapped title inherits the section of the item above it.
   let current = "";
@@ -144,7 +150,7 @@ export function withSections<T extends { title?: string }>(
 
   let printed = "";
   return grouped.map(({ item, section }) => {
-    const label = section === printed ? "" : section;
+    const label = section === printed ? "" : labels[section] ?? section;
     printed = section;
     return { item, section: label };
   });

package/utils/permission-labels.ts

@@ -55,14 +55,31 @@ export const RESOURCE_LABELS: Record<string, string> = {
   roles: "Roles and permissions",
 };
 
+/**
+ * Names that differ BY APPLICATION, keyed by the role `type` the editor is
+ * opened with. Only where one key means a different screen in one app.
+ *
+ * Owner approval 2026-09-25, item 2: in the Property Management editor the
+ * `virtual-patrol` row is the CCTV camera wall (the four legacy strings
+ * `useCameraViewPermission` and core `CAMERA_VIEW_PERMISSIONS` read), not the
+ * Security app's Virtual Patrol. Label only: the key and every stored string
+ * stay `virtual-patrol:*`, so every role that holds them keeps working.
+ */
+export const RESOURCE_LABELS_BY_TYPE: Record<string, Record<string, string>> = {
+  property_management_agency: { "virtual-patrol": "CCTV" },
+  real_estate_developer: { "virtual-patrol": "CCTV" },
+};
+
 /**
  * `work_orders` -> `Work orders`.
  *
  * Sentence case, not Title Case: a list of 47 Title Cased phrases is harder to
  * scan, not easier.
  */
-export function formatResourceLabel(key: string): string {
+export function formatResourceLabel(key: string, type?: string): string {
   if (!key) return "";
+  const byType = type ? RESOURCE_LABELS_BY_TYPE[type]?.[key] : undefined;
+  if (byType) return byType;
   if (RESOURCE_LABELS[key]) return RESOURCE_LABELS[key];
 
   const words = key
@@ -115,11 +132,12 @@ export function formatActionLabel(action: string): string {
  */
 export function sortResourcesByLabel<T>(
   tree: Record<string, T> | null | undefined,
+  type?: string,
 ): Record<string, T> {
   if (!tree || typeof tree !== "object") return {};
   const sorted: Record<string, T> = {};
   for (const key of Object.keys(tree).sort((a, b) =>
-    formatResourceLabel(a).localeCompare(formatResourceLabel(b), undefined, {
+    formatResourceLabel(a, type).localeCompare(formatResourceLabel(b, type), undefined, {
       sensitivity: "base",
       numeric: true,
     }),

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 "";
+}