@7365admin1/layer-common 4.38.0 → 4.39.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 4.39.1
+
+### Patch Changes
+
+- b1c2177: Visitor Mgmt: the Unregistered tab now appears on first load and after switching site, without a hard refresh. `useANPRSettings` takes a ref or getter for the site and keeps one entry per site; the Visitor Mgmt page reads its own site's ANPR switches instead of relying on the layout's plate toast, which kept the first site's switches after a site switch. A plate-toast link to the Unregistered tab is no longer bounced to Registered while the switches are still loading.
+
+## 4.39.0
+
+### Minor Changes
+
+- 3f37bf3: Client invitations: a dedicated module for a service-provider company to answer invitations from its clients (Pending / Accepted / Declined / Expired, plain-language status on every card, Accept / Decline only while waiting). Accepting adds the site to the company on screen. The bell's invitation row opens it. The inviting site's list now also shows accepted invitations. Removes the combined prompt from the member-invitations page.
+
 ## 4.38.0
 
 ### Minor Changes
@@ -1441,11 +1453,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/ClientInvitations.vue

@@ -0,0 +1,259 @@
+<template>
+  <div>
+    <PageHeader
+      title="Client invitations"
+      subtitle="Other organisations asking your company to provide services at their sites."
+    />
+
+    <AppCard class="table-card">
+      <CardToolbar>
+        <template #tabs>
+          <button
+            v-for="t in tabs"
+            :key="t.value"
+            type="button"
+            role="tab"
+            class="app-tab"
+            :class="{ 'app-tab--active': tab === t.value }"
+            :aria-selected="tab === t.value"
+            @click="tab = t.value"
+          >
+            {{ t.label }}<span v-if="counts[t.value]"> ({{ counts[t.value] }})</span>
+          </button>
+        </template>
+      </CardToolbar>
+
+      <div class="pa-4 d-flex flex-column ga-3">
+        <div v-if="loading" class="screen-hint">Loading…</div>
+        <div v-else-if="loadError" class="text-error" role="alert">{{ loadError }}</div>
+        <div v-else-if="!items.length" class="screen-hint">{{ emptyLine }}</div>
+
+        <AppCard
+          v-for="item in items"
+          :key="item._id"
+          class="client-invite"
+          :class="{ 'client-invite--linked': item._id === linked }"
+        >
+          <div class="d-flex align-start ga-3 pa-4">
+            <v-avatar color="primary" variant="tonal" size="44">
+              <v-icon>mdi-office-building-marker-outline</v-icon>
+            </v-avatar>
+            <div class="flex-grow-1">
+              <div class="screen-card-title">
+                {{ item.orgName }} has invited your company to {{ item.siteName }}
+              </div>
+              <div class="screen-hint client-invite__meta">
+                <span v-if="item.service">Services: {{ serviceLabel(item.service) }} · </span>
+                <span v-if="item.invitedByName">Invited by {{ item.invitedByName }} · </span>
+                <span>Sent {{ day(item.createdAt) }}</span>
+              </div>
+            </div>
+            <StatusChip :status="item.status" :label="item.statusLabel" />
+          </div>
+
+          <div class="px-4 pb-4 client-invite__body">
+            {{ stateLine(item) }}
+          </div>
+
+          <!-- Buttons only while the invitation is waiting for an answer. -->
+          <div v-if="item.status === 'pending'" class="d-flex align-center ga-2 px-4 pb-4">
+            <v-btn
+              variant="flat"
+              class="screen-btn-primary"
+              :loading="working[item._id] === 'accept'"
+              :disabled="Boolean(working[item._id])"
+              @click="answer(item, 'accept')"
+            >
+              Accept
+            </v-btn>
+            <v-btn
+              variant="outlined"
+              class="screen-btn-ghost"
+              :loading="working[item._id] === 'decline'"
+              :disabled="Boolean(working[item._id])"
+              @click="answer(item, 'decline')"
+            >
+              Decline
+            </v-btn>
+          </div>
+
+          <div v-else-if="item.status === 'complete'" class="px-4 pb-4">
+            <NuxtLink v-if="item.onThisOrg" :to="`/org/${org}/sites`">Open Sites</NuxtLink>
+            <NuxtLink
+              v-else-if="item.providerOrgId && item.providerOrgId !== org"
+              :to="`/org/${item.providerOrgId}/sites`"
+            >
+              Open {{ item.providerOrgName || "that company" }}'s Sites
+            </NuxtLink>
+          </div>
+
+          <div v-if="errors[item._id]" class="px-4 pb-4 text-error client-invite__body" role="alert">
+            {{ errors[item._id] }}
+          </div>
+        </AppCard>
+      </div>
+    </AppCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * "Client invitations" (owner request 2026-09-24): where a service-provider
+ * company answers invitations from its clients, in four tabs, with one plain
+ * sentence per card saying what happened. Accept / Decline appear only while
+ * an invitation is waiting - an answered one has no buttons at all.
+ *
+ * Accepting adds the site to the company ON SCREEN (`org`), which is what makes
+ * it appear on this company's Sites list and in the service app's site
+ * switcher. The server refuses a company the person is not a member of.
+ */
+import type { TReceivedServiceProviderInvitation } from "../composables/useServiceProviderInvitation";
+
+const props = defineProps({
+  /** The organisation on screen - the company that accepts. */
+  org: { type: String, required: true },
+});
+
+type Tab = "pending" | "accepted" | "declined" | "expired";
+
+const tabs: Array<{ value: Tab; label: string }> = [
+  { value: "pending", label: "Pending" },
+  { value: "accepted", label: "Accepted" },
+  { value: "declined", label: "Declined" },
+  { value: "expired", label: "Expired" },
+];
+
+const route = useRoute();
+const { getReceivedInvitations, getInvitation, acceptInvitation, declineInvitation } =
+  useServiceProviderInvitation();
+
+const tab = ref<Tab>("pending");
+const items = ref<TReceivedServiceProviderInvitation[]>([]);
+const counts = ref<Record<string, number>>({});
+const loading = ref(false);
+const loadError = ref("");
+const working = reactive<Record<string, string>>({});
+const errors = reactive<Record<string, string>>({});
+
+/** The invitation the bell linked to (`?invite=<id>`), outlined. */
+const linked = computed(() => {
+  const value = String(route.query?.invite ?? "").trim();
+  return /^[a-f0-9]{24}$/i.test(value) ? value : "";
+});
+
+const emptyLine = computed(
+  () =>
+    ({
+      pending: "Nothing is waiting for your answer.",
+      accepted: "You have not accepted any invitations yet.",
+      declined: "You have not declined any invitations.",
+      expired: "No expired or withdrawn invitations.",
+    })[tab.value],
+);
+
+function day(value?: string | null) {
+  if (!value) return "";
+  const d = new Date(value);
+  return Number.isNaN(d.getTime())
+    ? ""
+    : d.toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" });
+}
+
+/** " on 24 Sep 2026", or nothing when the date is unknown. */
+function on(value?: string | null) {
+  const text = day(value);
+  return text ? ` on ${text}` : "";
+}
+
+function serviceLabel(value: string) {
+  return value.replace(/[-_]/g, " ").replace(/^\w/, (c) => c.toUpperCase());
+}
+
+/** One sentence: where the invitation stands and what, if anything, to do. */
+function stateLine(item: TReceivedServiceProviderInvitation) {
+  switch (item.status) {
+    case "pending":
+      return `Waiting for you. Accepting adds ${item.siteName} to this company's Sites list${
+        item.expireAt ? ` — please answer by ${day(item.expireAt)}` : ""
+      }.`;
+    case "complete":
+      if (item.onThisOrg) {
+        return `Accepted${on(item.answeredAt)} — ${item.siteName} is on your Sites list as a site you serve for ${item.orgName}.`;
+      }
+      if (!item.providerOrgId || item.providerOrgId === props.org) {
+        return `Accepted${on(item.answeredAt)}, but ${item.siteName} is not on this company's Sites list. Please contact Seven365 support so we can add it.`;
+      }
+      return `Accepted${on(item.answeredAt)} for ${
+        item.providerOrgName || "another of your companies"
+      } — the site is on that company's Sites list, not this one's.`;
+    case "declined":
+      return `Declined${on(item.answeredAt)}. ${item.orgName} has been told.`;
+    case "cancelled":
+      return `${item.orgName} withdrew this invitation${on(item.answeredAt)}.`;
+    default:
+      return `This invitation expired${on(item.expireAt)} without an answer. Ask ${item.orgName} to send a new one if you still want this site.`;
+  }
+}
+
+async function load() {
+  loading.value = true;
+  loadError.value = "";
+  try {
+    const res = await getReceivedInvitations({ org: props.org, status: tab.value });
+    items.value = Array.isArray(res?.items) ? res.items : [];
+    counts.value = res?.counts ?? {};
+  } catch (err: any) {
+    items.value = [];
+    loadError.value = err?.data?.message || "Could not load your client invitations. Please try again.";
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function answer(item: TReceivedServiceProviderInvitation, action: "accept" | "decline") {
+  errors[item._id] = "";
+  working[item._id] = action;
+  try {
+    if (action === "accept") await acceptInvitation(item._id, props.org);
+    else await declineInvitation(item._id);
+    // Follow the invitation to the tab it now belongs to (the tab watcher
+    // reloads the list).
+    tab.value = action === "accept" ? "accepted" : "declined";
+  } catch (err: any) {
+    errors[item._id] =
+      err?.data?.message ||
+      (action === "accept" ? "Could not accept this invitation." : "Could not decline this invitation.");
+  } finally {
+    working[item._id] = "";
+  }
+}
+
+// Opened from the bell: start on the tab the linked invitation is in.
+if (linked.value) {
+  try {
+    const one: any = await getInvitation(linked.value, props.org);
+    if (one?.tab && tabs.some((t) => t.value === one.tab)) tab.value = one.tab;
+  } catch {
+    // Not ours or gone: the page still lists the rest.
+  }
+}
+await load();
+watch(tab, load);
+</script>
+
+<style scoped>
+.client-invite--linked {
+  outline: 2px solid rgb(var(--v-theme-primary));
+  outline-offset: 2px;
+}
+
+.client-invite :deep(.screen-card-title) {
+  display: block;
+  line-height: 1.35;
+}
+
+.client-invite__meta,
+.client-invite__body {
+  font-size: var(--fs-cell);
+}
+</style>

package/components/ServiceProviderMain.vue

@@ -827,7 +827,10 @@ const listTab = ref<ListTab>("active");
 /** The same three tabs, in the same order, with the same labels. */
 const listTabs: Array<{ value: ListTab; label: string }> = [
   { value: "active", label: "Service Providers" },
-  { value: "pending", label: "Pending" },
+  // Every invitation this site sent, whatever became of it - including the
+  // accepted ones, so the client can see "Accepted" and not just a row that
+  // vanished (owner request 2026-09-24).
+  { value: "pending", label: "Invitations" },
   { value: "inactive", label: "In-Active" },
 ];
 const page = ref(1);
@@ -1292,7 +1295,7 @@ async function loadList() {
       const data = await getInvitations({
         org: props.orgId,
         status:
-          "awaiting-approval,pending,rejected,declined,cancelled,expired",
+          "awaiting-approval,pending,complete,rejected,declined,cancelled,expired",
         page: page.value,
         search: searchText.value?.trim() || "",
         limit: pageSize,

package/components/VisitorManagement.vue

@@ -1502,8 +1502,17 @@ const { org: orgId, site: siteId } = route.params as {
   site: string;
 };
 
-const { enableUnregistered } = useANPRSettings(siteId);
+// The page reads its own site's switches rather than relying on the layout's
+// toast to have fetched them - that copy could belong to the previous site.
+const {
+  enableUnregistered,
+  loaded: anprSettingsLoaded,
+  ensureANPRSettings,
+} = useANPRSettings(siteId);
 const enableUnregisteredTab = computed(() => enableUnregistered.value);
+ensureANPRSettings(true).catch(() => {
+  // No settings = no Unregistered tab, same as before.
+});
 
 const {
   getVisitors,
@@ -2933,7 +2942,11 @@ watch([searchInput, dateFrom, dateTo, filterTypes, activeTab], () => {
 const syncVisitorFiltersFromRoute = () => {
   const requestedTab = (route.query.tab as string) || "registered";
   const nextTab =
-    (!enableUnregisteredTab.value && requestedTab === "unregistered") ||
+    // Until the switches are read, keep a requested Unregistered tab (the plate
+    // toast links here) instead of bouncing it to Registered.
+    (anprSettingsLoaded.value &&
+      !enableUnregisteredTab.value &&
+      requestedTab === "unregistered") ||
     (!showResidentTransactionsTab.value && requestedTab === "resident-transactions")
       ? "registered"
       : requestedTab;
@@ -2992,9 +3005,9 @@ const { socketUnregisteredVisitorTrigger, visitorSocketData } =
   useVisitorSocket();
 
 watch(
-  enableUnregisteredTab,
-  (enabled) => {
-    if (!enabled && activeTab.value === "unregistered") {
+  [enableUnregisteredTab, anprSettingsLoaded],
+  ([enabled]) => {
+    if (!enabled && anprSettingsLoaded.value && activeTab.value === "unregistered") {
       activeTab.value = "registered";
     }
   },

package/components/VisitorSocketPopUp.vue

@@ -137,8 +137,9 @@ const config = useRuntimeConfig();
 const publicConfig = config.public as Record<string, string | undefined>;
 const route  = useRoute();
 const { tab } = useVisitor();
+// A getter, not the string: this component outlives site switches.
 const { enableUnregistered, ensureANPRSettings } = useANPRSettings(
-  props.siteId
+  () => props.siteId
 );
 const enableUnregisteredSnackbar = computed(() => enableUnregistered.value);
 const { socketUnregisteredVisitorTrigger, visitorSocketData } =

package/composables/useANPRSettings.ts

@@ -1,19 +1,50 @@
-export default function (siteId?: string) {
-  const stateKey = computed(() =>
-    siteId ? `anpr-settings-${siteId}` : "anpr-settings"
-  );
+import { computed, toValue, type MaybeRefOrGetter } from "vue";
+
+/*
+ * A site's ANPR switches (e.g. "Enable Unregistered Vehicles"), shared by every
+ * caller on the page: the Visitor Mgmt tabs, the plate toast in the layout, and
+ * Site Settings.
+ *
+ * `siteId` may be a ref or a getter. The layout's toast lives across site
+ * switches, so a plain string captured once kept answering for the FIRST site
+ * it saw - and the Visitor Mgmt page never fetched at all, so its
+ * "Unregistered" tab showed only when that stale copy happened to be for the
+ * right site (i.e. after a hard refresh on the page itself).
+ *
+ * One map keyed by site id: a key that is present means "fetched", even when
+ * the site has no settings yet (stored as `{}`).
+ */
+export default function (siteId?: MaybeRefOrGetter<string | undefined>) {
+  const site = computed(() => toValue(siteId) || "");
 
-  const anprSettings = useState<Record<string, any> | null>(
-    stateKey.value,
-    () => null
+  const bySite = useState<Record<string, Record<string, any>>>(
+    "anpr-settings-by-site",
+    () => ({})
   );
 
+  const anprSettings = computed<Record<string, any> | null>({
+    get: () => bySite.value[site.value] ?? null,
+    set: (value) => {
+      bySite.value = { ...bySite.value, [site.value]: value ?? {} };
+    },
+  });
+
+  /** True once this site's settings have been read (or saved) at least once. */
+  const loaded = computed(() => site.value in bySite.value);
+
   const enableUnregistered = computed(
     () => anprSettings.value?.ANPRSwitches?.enableUnregistered === true
   );
 
+  function store(forSite: unknown, response: Record<string, any> | null) {
+    const key = String(forSite ?? "");
+    if (!key) return;
+    bySite.value = { ...bySite.value, [key]: response ?? {} };
+  }
+
   async function fetchANPRSettings(data?: any) {
-    const payload = data ?? (siteId ? { site: siteId, userType: "site" } : undefined);
+    const payload =
+      data ?? (site.value ? { site: site.value, userType: "site" } : undefined);
 
     if (!payload) {
       return anprSettings.value;
@@ -27,23 +58,21 @@ export default function (siteId?: string) {
       }
     );
 
-    if (response) {
-      anprSettings.value = response;
-    }
+    store(payload.site, response);
 
     return response;
   }
 
   async function ensureANPRSettings(force = false) {
-    if (!siteId) {
+    if (!site.value) {
       return anprSettings.value;
     }
 
-    if (!force && anprSettings.value) {
+    if (!force && loaded.value) {
       return anprSettings.value;
     }
 
-    return await fetchANPRSettings({ site: siteId, userType: "site" });
+    return await fetchANPRSettings({ site: site.value, userType: "site" });
   }
 
   async function getANPRSettingBySite(data: any) {
@@ -60,7 +89,7 @@ export default function (siteId?: string) {
     );
 
     if (response) {
-      anprSettings.value = response;
+      store(data?.site, response);
     }
 
     return response;
@@ -68,6 +97,7 @@ export default function (siteId?: string) {
 
   return {
     anprSettings,
+    loaded,
     enableUnregistered,
     ensureANPRSettings,
     getANPRSettingBySite,

package/composables/useServiceProviderInvitation.ts

@@ -26,17 +26,28 @@ export type TServiceProviderInvitation = {
   }>;
 };
 
-/** One row of "Invitations from other organisations". */
+/** One card of "Client invitations" (the service provider's side). */
 export type TReceivedServiceProviderInvitation = {
   _id: string;
+  /** The client organisation that sent it. */
   orgName: string;
   siteName: string;
+  siteId?: string;
+  /** The service asked for, when the sender recorded one (e.g. "security"). */
+  service?: string;
+  invitedByName?: string;
+  createdAt?: string;
+  expireAt?: string;
+  /** When it was accepted, declined or withdrawn. */
+  answeredAt?: string | null;
+  /** pending | complete | declined | expired | cancelled */
   status: string;
   statusLabel: string;
-  expireAt?: string;
-  /** The invited company's own organisation (the one whose list gains the site). */
+  /** The company that accepted it (whose Sites list gained the site). */
   providerOrgId?: string;
   providerOrgName?: string;
+  /** Accepted AND on the Sites list of the company on screen. */
+  onThisOrg?: boolean;
 };
 
 /** The words on screen. Kept beside the server's own list on purpose — a
@@ -133,8 +144,14 @@ export default function useServiceProviderInvitation() {
 
   // ---- the invited service provider ----------------------------------------
 
-  function getInvitation(id: string): Promise<TServiceProviderInvitation> {
-    return useNuxtApp().$api(`${base}/${id}`, { method: "GET" });
+  function getInvitation(
+    id: string,
+    org?: string,
+  ): Promise<TReceivedServiceProviderInvitation & { tab?: string | null }> {
+    return useNuxtApp().$api(`${base}/${id}`, {
+      method: "GET",
+      query: org ? { org } : {},
+    });
   }
 
   function declineInvitation(id: string) {
@@ -143,21 +160,32 @@ export default function useServiceProviderInvitation() {
     });
   }
 
-  /** Adds the site to the invited company's list. The invited account only. */
-  function acceptInvitation(id: string) {
+  /**
+   * Adds the site to `org`'s Sites list - the company on screen, which the
+   * server checks the invited account belongs to.
+   */
+  function acceptInvitation(id: string, org?: string) {
     return useNuxtApp().$api<{ message: string }>(`${base}/${id}/accept`, {
       method: "PUT",
+      body: org ? { org } : {},
     });
   }
 
   /**
-   * Invitations from other organisations still waiting for the signed-in
-   * account's answer — keyed on the account, not on the organisation on screen.
+   * "Client invitations": one tab of the invitations sent to the signed-in
+   * account, plus the count in every tab. `org` is the company on screen.
    */
-  function getReceivedInvitations(): Promise<{
+  function getReceivedInvitations({
+    org,
+    status = "pending",
+  }: { org?: string; status?: string } = {}): Promise<{
     items: TReceivedServiceProviderInvitation[];
+    counts?: Record<string, number>;
   }> {
-    return useNuxtApp().$api(`${base}/received`, { method: "GET" });
+    return useNuxtApp().$api(`${base}/received`, {
+      method: "GET",
+      query: { status, ...(org ? { org } : {}) },
+    });
   }
 
   return {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.38.0",
+  "version": "4.39.1",
   "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.",
@@ -36,7 +36,7 @@
     "build": "nuxt build .playground",
     "generate": "nuxt generate .playground",
     "preview": "nuxt preview .playground",
-    "test": "esbuild composables/useVisitorSocket.ts --format=esm --outfile=test/.build/useVisitorSocket.mjs --log-level=error && esbuild composables/usePlateToastWindow.ts --format=esm --outfile=test/.build/usePlateToastWindow.mjs --log-level=error && esbuild utils/client-invite-modules.ts --bundle --platform=node --format=esm --outfile=test/.build/client-invite-modules.mjs --log-level=error && esbuild utils/robot-display.ts --bundle --platform=node --format=esm --outfile=test/.build/robot-display.mjs --log-level=error && esbuild utils/building-map.ts --bundle --platform=node --format=esm --outfile=test/.build/building-map.mjs --log-level=error && esbuild utils/robot-building.ts --bundle --platform=node --format=esm --outfile=test/.build/robot-building.mjs --log-level=error && esbuild utils/robot-fleet-core.ts --bundle --platform=node --format=esm --outfile=test/.build/robot-fleet-core.mjs --log-level=error && node --experimental-strip-types --test \"test/*.test.mjs\" && yarn test:units",
+    "test": "esbuild composables/useANPRSettings.ts --format=esm --outfile=test/.build/useANPRSettings.mjs --log-level=error && esbuild composables/useVisitorSocket.ts --format=esm --outfile=test/.build/useVisitorSocket.mjs --log-level=error && esbuild composables/usePlateToastWindow.ts --format=esm --outfile=test/.build/usePlateToastWindow.mjs --log-level=error && esbuild utils/client-invite-modules.ts --bundle --platform=node --format=esm --outfile=test/.build/client-invite-modules.mjs --log-level=error && esbuild utils/robot-display.ts --bundle --platform=node --format=esm --outfile=test/.build/robot-display.mjs --log-level=error && esbuild utils/building-map.ts --bundle --platform=node --format=esm --outfile=test/.build/building-map.mjs --log-level=error && esbuild utils/robot-building.ts --bundle --platform=node --format=esm --outfile=test/.build/robot-building.mjs --log-level=error && esbuild utils/robot-fleet-core.ts --bundle --platform=node --format=esm --outfile=test/.build/robot-fleet-core.mjs --log-level=error && node --experimental-strip-types --test \"test/*.test.mjs\" && yarn test:units",
     "test:units": "node --experimental-strip-types --test \"utils/*.test.ts\"",
     "release": "yarn run build && changeset publish"
   },

package/utils/notification-target.ts

@@ -71,7 +71,7 @@ export const VENDOR_ORDER_MODULE = "marketplace-vendor-order";
  * app has that page; every other app sends the click there by URL.
  */
 export const SP_INVITATION_SCREEN = "/service-provider-invitation";
-export const INVITATIONS_ROUTE = "org-organization-invitations-status-status";
+export const INVITATIONS_ROUTE = "org-organization-client-invitations";
 
 export function notificationTarget(
   item: TTargetRow | null | undefined,
@@ -89,10 +89,10 @@ export function notificationTarget(
     const query: Record<string, string> = id ? { invite: id } : {};
     return {
       name: INVITATIONS_ROUTE,
-      params: { organization: org, status: "pending" },
+      params: { organization: org },
       query,
       app: "org",
-      path: `/org/${encodeURIComponent(org)}/invitations/status/pending`,
+      path: `/org/${encodeURIComponent(org)}/client-invitations`,
     };
   }
 

package/components/ServiceProviderInvitationPrompt.vue

@@ -1,162 +0,0 @@
-<template>
-  <!-- `AppCard` is the design's card - 14px radius, a 1px `--border` rule and
-       the one-pixel shadow on `--card`. The `v-card rounded="lg"
-       variant="outlined"` it replaced was Vuetify's own card at its own
-       radius and border weight. -->
-  <AppCard v-if="invitation" class="sp-invite-prompt">
-    <div class="d-flex align-start ga-3 pa-4">
-      <v-avatar color="primary" variant="tonal" size="44">
-        <v-icon>mdi-office-building-marker-outline</v-icon>
-      </v-avatar>
-      <div class="flex-grow-1">
-        <div class="screen-card-title">
-          {{ invitation.orgName }} has invited you to {{ invitation.siteName }}
-        </div>
-        <div class="screen-hint sp-invite-prompt__sub">
-          Approved by Seven365 · {{ expiryLine }}
-        </div>
-      </div>
-    </div>
-
-    <div class="px-4 sp-invite-prompt__body">
-      {{ invitation.orgName }} would like your company to provide services at
-      <strong>{{ invitation.siteName }}</strong
-      >. If you accept, this site will be added to your list of sites.
-    </div>
-
-    <div class="d-flex align-center ga-2 px-4 py-4">
-      <!-- Both stay `v-btn`s: `loading` is the only signal that an accept or a
-           decline is in flight, and `AppButton` has no equivalent. They take
-           the design's two button classes instead. -->
-      <v-btn
-        variant="flat"
-        class="screen-btn-primary"
-        :loading="working === 'accept'"
-        :disabled="Boolean(working) || !open"
-        @click="accept"
-      >
-        Accept
-      </v-btn>
-      <v-btn
-        variant="outlined"
-        class="screen-btn-ghost"
-        :loading="working === 'decline'"
-        :disabled="Boolean(working) || !open"
-        @click="decline"
-      >
-        Decline
-      </v-btn>
-      <v-spacer />
-      <!-- Was a raw `v-chip` on Vuetify's fixed `success` green, or no colour
-           at all for every other outcome. `StatusChip` maps the status WORD
-           through the shared `utils/status.ts` tones, so "complete" and
-           "declined" come out the same colours they do everywhere else. -->
-      <StatusChip
-        v-if="!open"
-        :status="invitation.status"
-        :label="invitation.statusLabel"
-      />
-    </div>
-
-    <!-- An accept or decline that failed: said on the card, not swallowed. -->
-    <div v-if="error" class="px-4 pb-4 text-error sp-invite-prompt__body" role="alert">
-      {{ error }}
-    </div>
-  </AppCard>
-
-  <AppCard v-else-if="error">
-    <div class="pa-4 sp-invite-prompt__body">{{ error }}</div>
-  </AppCard>
-</template>
-
-<script setup lang="ts">
-/**
- * The invitation as the service provider sees it — inside the app they already
- * use, from the session they already have.
- *
- * There is deliberately no sign-up and no one-time code anywhere on this
- * screen: a company that already exists on iService365 never creates a second
- * account. The email they receive only carries them here.
- *
- * An invitation that has not been approved by Seven365 is not readable at all —
- * the server answers "not found" — so this component cannot show one.
- */
-const props = defineProps({
-  invitationId: { type: String, required: true },
-});
-
-const emit = defineEmits<{ (e: "answered", status: string): void }>();
-
-const { getInvitation, declineInvitation, acceptInvitation } =
-  useServiceProviderInvitation();
-
-const invitation = ref<any>(null);
-const error = ref("");
-const working = ref("");
-
-const open = computed(() => invitation.value?.status === "pending");
-
-const expiryLine = computed(() => {
-  const expires = invitation.value?.expireAt;
-  if (!expires) return "";
-  const days = Math.max(
-    0,
-    Math.ceil((new Date(expires).getTime() - Date.now()) / 86400000),
-  );
-  if (!open.value) return "no longer waiting for an answer";
-  return days <= 1 ? "expires within a day" : `expires in ${days} days`;
-});
-
-async function load() {
-  try {
-    invitation.value = await getInvitation(props.invitationId);
-  } catch (err: any) {
-    error.value =
-      err?.data?.message || "This invitation is no longer available.";
-  }
-}
-
-async function accept() {
-  error.value = "";
-  working.value = "accept";
-  try {
-    await acceptInvitation(props.invitationId);
-    await load();
-    emit("answered", "complete");
-  } catch (err: any) {
-    error.value = err?.data?.message || "Could not accept this invitation.";
-  } finally {
-    working.value = "";
-  }
-}
-
-async function decline() {
-  error.value = "";
-  working.value = "decline";
-  try {
-    await declineInvitation(props.invitationId);
-    await load();
-    emit("answered", "declined");
-  } catch (err: any) {
-    error.value = err?.data?.message || "Could not decline this invitation.";
-  } finally {
-    working.value = "";
-  }
-}
-
-await load();
-</script>
-
-<style scoped>
-/* The title was a hand-set 1.05rem/600; `.screen-card-title` is the design's
-   15.5px/800, so only the wrap and the leading are left here. */
-.sp-invite-prompt :deep(.screen-card-title) {
-  display: block;
-  line-height: 1.35;
-}
-
-.sp-invite-prompt__sub,
-.sp-invite-prompt__body {
-  font-size: var(--fs-cell);
-}
-</style>

package/components/ServiceProviderInvitationsReceived.vue

@@ -1,113 +0,0 @@
-<template>
-  <!-- Nothing to answer and nothing linked: the section stays out of the way. -->
-  <section v-if="ids.length" class="sp-received mb-4" aria-labelledby="sp-received-title">
-    <div class="mb-2">
-      <div id="sp-received-title" class="screen-card-title">
-        Invitations from other organisations
-      </div>
-      <div class="screen-hint">
-        Another organisation has asked your company to provide services at one
-        of its sites. Accept to add the site to your Sites list, or decline.
-      </div>
-    </div>
-
-    <div class="d-flex flex-column ga-3">
-      <div
-        v-for="id in ids"
-        :key="id"
-        :class="{ 'sp-received__linked': id === linked }"
-      >
-        <Suspense>
-          <ServiceProviderInvitationPrompt
-            :invitation-id="id"
-            @answered="(status: string) => onAnswered(id, status)"
-          />
-        </Suspense>
-
-        <div v-if="answered[id] === 'complete'" class="sp-received__done mt-2">
-          {{ doneLine(id) }}
-          <NuxtLink v-if="sitesLink(id)" :to="sitesLink(id)">Open Sites</NuxtLink>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-/**
- * "Invitations from other organisations" — where a service provider answers an
- * invitation another organisation sent it (owner report 2026-09-24: the bell
- * said "Open the invitation to accept or decline" and there was nowhere to do
- * either).
- *
- * The list comes from the server keyed on the signed-in account, so it is the
- * same whichever organisation is on screen. The row the bell linked to
- * (`?invite=<id>`) is always shown — even once answered or expired, so the
- * person sees what happened to it — and is outlined.
- */
-import type { TReceivedServiceProviderInvitation } from "../composables/useServiceProviderInvitation";
-
-const route = useRoute();
-const { getReceivedInvitations } = useServiceProviderInvitation();
-
-const items = ref<TReceivedServiceProviderInvitation[]>([]);
-const answered = reactive<Record<string, string>>({});
-
-const linked = computed(() => {
-  const value = String(route.query?.invite ?? "").trim();
-  return /^[a-f0-9]{24}$/i.test(value) ? value : "";
-});
-
-const ids = computed(() => {
-  const listed = items.value.map((i) => String(i._id));
-  return linked.value && !listed.includes(linked.value)
-    ? [linked.value, ...listed]
-    : listed;
-});
-
-function itemFor(id: string) {
-  return items.value.find((i) => String(i._id) === id);
-}
-
-function doneLine(id: string) {
-  const item = itemFor(id);
-  const whose = item?.providerOrgName ? `${item.providerOrgName}'s` : "your";
-  return item?.siteName
-    ? `${item.siteName} is now on ${whose} Sites list.`
-    : `The site is now on ${whose} Sites list.`;
-}
-
-function sitesLink(id: string) {
-  const org = itemFor(id)?.providerOrgId || String(route.params?.organization ?? "");
-  return org ? `/org/${org}/sites` : "";
-}
-
-function onAnswered(id: string, status: string) {
-  answered[id] = status;
-}
-
-async function load() {
-  try {
-    const res = await getReceivedInvitations();
-    items.value = Array.isArray(res?.items) ? res.items : [];
-  } catch {
-    // The section is an addition to the Invitations page; if it cannot load,
-    // the rest of the page must still work. A linked row still renders and
-    // reports its own error.
-    items.value = [];
-  }
-}
-
-await load();
-</script>
-
-<style scoped>
-.sp-received__linked :deep(.app-card) {
-  outline: 2px solid rgb(var(--v-theme-primary));
-  outline-offset: 2px;
-}
-
-.sp-received__done {
-  font-size: var(--fs-cell);
-}
-</style>