@7365admin1/layer-common 4.37.0 → 4.39.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @iservice365/layer-common
 
+## 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
+
+- 59ce7ed: Passes & Keys permissions and the membership the app is working in (DV-0409).
+
+  - Passes And Keys Management: new `add-passes-and-keys`, `update-passes-and-keys` and `delete-passes-and-keys` permissions in both the Security and the Property Management role catalogues (`useSecurityPermission`, `usePropertyPermission`). API-core now enforces them on `/api/keys` and `/api/qr-code-templates`; "See All Passes And Keys" is what shows the Templates and Passes & Keys pages.
+  - `plugins/API.ts` sends `X-App` (this app's member type, from `runtimeConfig.public.APP`) and `X-Org` (the organisation in the address) with every request, so core checks the role of the membership the screen is using when a person holds several memberships at one site. Only chooses among the user's own memberships; grants nothing. A server that does not read them is unaffected.
+
+- 27c17b7: Service-provider invitations can be answered in the app: the notification bell opens "<Company> has invited you to <site>" on the organisation app's Invitations page (other apps send the click there by URL), the new `ServiceProviderInvitationsReceived` section lists invitations from other organisations with Accept / Decline, `useServiceProviderInvitation` gains `acceptInvitation` and `getReceivedInvitations`, and the invitation card shows a failed accept or decline instead of swallowing it.
+
 ## 4.37.0
 
 ### Minor Changes
@@ -1430,11 +1447,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/NotificationBell.vue

@@ -134,7 +134,7 @@ import {
   timeAgo,
   type TInboxItem,
 } from "../utils/notification-inbox";
-import { notificationTarget } from "../utils/notification-target";
+import { externalTargetUrl, notificationTarget } from "../utils/notification-target";
 
 /**
  * The top-bar notification feed for the web, in every signed-in app.
@@ -168,6 +168,7 @@ const { getAll, getUnreadCount, markAsRead, markAllAsRead } = useNotification();
 const { currentUser } = useLocalAuth();
 const route = useRoute();
 const router = useRouter();
+const appConfig = useRuntimeConfig();
 
 const open = ref(false);
 const loading = ref(false);
@@ -305,14 +306,24 @@ function markRead(item: Record<string, any>) {
  */
 async function goToSubject(item: Record<string, any>) {
   const target = notificationTarget(item as any, {
-    organization: String(route.params?.organization ?? ""),
+    // The org app nests under `organization`; the service apps under `org`.
+    organization: String(route.params?.organization ?? route.params?.org ?? ""),
   });
   if (!target) return;
-  if (typeof router.hasRoute !== "function" || !router.hasRoute(target.name)) return;
+
+  if (typeof router.hasRoute !== "function" || !router.hasRoute(target.name)) {
+    // The page lives in another web app (the invitation is answered in the
+    // organisation app): go there by URL, or stay put if it is not configured.
+    const href = externalTargetUrl(target, { org: String(appConfig?.public?.APP_ORG ?? "") });
+    if (!href) return;
+    open.value = false;
+    window.location.assign(href);
+    return;
+  }
 
   open.value = false;
   try {
-    await router.push(target);
+    await router.push({ name: target.name, params: target.params, query: target.query });
   } catch {
     // A cancelled or duplicate navigation is not worth an error in the top bar.
   }

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/composables/usePropertyPermission.ts

@@ -579,6 +579,23 @@ export default function usePropertyPermission() {
         description:
           "Allows the user to view the list of all passes and keys on mobile. Checked by the iMA365 mobile app.",
       },
+      // DV-0396: the same three writes Security offers, enforced by API-core on
+      // /api/keys and /api/qr-code-templates for every app that calls them.
+      "add-passes-and-keys": {
+        check: true,
+        description:
+          "Allows the user to add pass templates and to create or generate passes and keys.",
+      },
+      "update-passes-and-keys": {
+        check: true,
+        description:
+          "Allows the user to edit pass templates, passes and keys, restore them, and change a pass or key back to Available.",
+      },
+      "delete-passes-and-keys": {
+        check: true,
+        description:
+          "Allows the user to delete pass templates, passes and keys.",
+      },
     },
     "online-forms": {
       "see-all-online-forms": {

package/composables/useSecurityPermission.ts

@@ -669,12 +669,31 @@ export default function useSecurityPermission() {
     },
     // Property's descriptions minus its "Checked by the iMA365 mobile app."
     // sentence, which is not true of this application.
+    // Add / update / delete (DV-0396), also offered by Property Management and
+    // enforced by API-core on /api/keys and /api/qr-code-templates. The security web app's
+    // Templates and Passes & Keys pages and the guard app's pass & key screen
+    // read them. See All is also what shows those two web pages.
     "passes-and-keys-mgmt": {
       "see-all-passes-and-keys": {
         check: true,
         description:
           "Allows the user to view the list of all passes and keys on mobile.",
       },
+      "add-passes-and-keys": {
+        check: true,
+        description:
+          "Allows the user to add pass templates and to create or generate passes and keys.",
+      },
+      "update-passes-and-keys": {
+        check: true,
+        description:
+          "Allows the user to edit pass templates, passes and keys, restore them, and change a pass or key back to Available.",
+      },
+      "delete-passes-and-keys": {
+        check: true,
+        description:
+          "Allows the user to delete pass templates, passes and keys.",
+      },
     },
     "resident-transactions": {
       "see-all-resident-transactions": {

package/composables/useServiceProviderInvitation.ts

@@ -26,6 +26,30 @@ export type TServiceProviderInvitation = {
   }>;
 };
 
+/** 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;
+  /** 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
  *  status the server invents must never render as a raw stored value. */
 export const SERVICE_PROVIDER_INVITE_LABELS: Record<string, string> = {
@@ -120,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) {
@@ -130,6 +160,34 @@ export default function useServiceProviderInvitation() {
     });
   }
 
+  /**
+   * 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 } : {},
+    });
+  }
+
+  /**
+   * "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({
+    org,
+    status = "pending",
+  }: { org?: string; status?: string } = {}): Promise<{
+    items: TReceivedServiceProviderInvitation[];
+    counts?: Record<string, number>;
+  }> {
+    return useNuxtApp().$api(`${base}/received`, {
+      method: "GET",
+      query: { status, ...(org ? { org } : {}) },
+    });
+  }
+
   return {
     getInvitations,
     cancelInvitation,
@@ -141,5 +199,7 @@ export default function useServiceProviderInvitation() {
     rejectInvitation,
     getInvitation,
     declineInvitation,
+    acceptInvitation,
+    getReceivedInvitations,
   };
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.37.0",
+  "version": "4.39.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/plugins/API.ts

@@ -11,6 +11,17 @@ export default defineNuxtPlugin((nuxtApp) => {
     onRequest({ options }) {
       const sid = useCookie("sid", cookieConfig).value ?? "";
       options.headers.set("Authorization", sid);
+      // Which of the user's memberships this screen is working in (DV-0396):
+      // this app's member type and the organisation in the address. With
+      // several memberships pinned to one site, the server then checks the
+      // same role the screen was drawn from (core `requireSiteReach`). Only
+      // chooses among the user's own memberships; it grants nothing.
+      const app = useRuntimeConfig().public.APP;
+      if (app) options.headers.set("X-App", String(app));
+      const org = (nuxtApp as any).$router?.currentRoute?.value?.params?.org;
+      if (typeof org === "string" && /^[0-9a-f]{24}$/i.test(org)) {
+        options.headers.set("X-Org", org);
+      }
     },
     // "You do not have permission to ..." - the role changed since the page
     // read it. Re-read it in the background (plugins/secure-member.client.ts)

package/utils/notification-target.ts

@@ -31,7 +31,8 @@
 /** Only the fields a destination is decided from. */
 export type TTargetRow = {
   module?: string;
-  params?: { id?: string } | null;
+  screen?: string;
+  params?: { id?: string; org?: string } | null;
 };
 
 /** What the surrounding app knows that the stored row does not. */
@@ -43,6 +44,13 @@ export type TTargetContext = {
 export type TNotificationTarget = {
   name: string;
   params: Record<string, string>;
+  query?: Record<string, string>;
+  /**
+   * Set when the page lives in another web app. The bell opens
+   * `<that app's URL><path>` when its own router has no route by `name`.
+   */
+  app?: "org";
+  path?: string;
 };
 
 /** Nuxt's generated names for `pages/org/[organization]/marketplace/orders/`. */
@@ -52,12 +60,42 @@ export const ORDER_DETAIL_ROUTE = "org-organization-marketplace-orders-id";
 /** The stored `module` tag on a row sent to a vendor's staff. */
 export const VENDOR_ORDER_MODULE = "marketplace-vendor-order";
 
+/**
+ * "<Company> has invited you to <site>" — core `serviceProviderInvited` stores
+ * `module: "other"` (the apps route on it; it never changes) with this
+ * `screen`, the invitation id in `params.id`, and, since 2026-09-24, the
+ * invited company's own organisation in `params.org`.
+ *
+ * It opens the organisation app's Invitations page, where "Invitations from
+ * other organisations" lists it with Accept / Decline. Only the organisation
+ * 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-client-invitations";
+
 export function notificationTarget(
   item: TTargetRow | null | undefined,
   context: TTargetContext = {},
 ): TNotificationTarget | null {
   const organization = String(context.organization ?? "").trim();
 
+  if (String(item?.screen ?? "") === SP_INVITATION_SCREEN) {
+    // The invited company's organisation when the row names it (the invitation
+    // belongs there), otherwise the one on screen. The list on that page is
+    // keyed on the signed-in account, so either shows the invitation.
+    const org = String(item?.params?.org ?? "").trim() || organization;
+    if (!org) return null;
+    const id = String(item?.params?.id ?? "").trim();
+    const query: Record<string, string> = id ? { invite: id } : {};
+    return {
+      name: INVITATIONS_ROUTE,
+      params: { organization: org },
+      query,
+      app: "org",
+      path: `/org/${encodeURIComponent(org)}/client-invitations`,
+    };
+  }
+
   if (String(item?.module ?? "") !== VENDOR_ORDER_MODULE) return null;
 
   // Every order route is nested under the organization. Without one there is no
@@ -73,3 +111,18 @@ export function notificationTarget(
 
   return { name: ORDER_DETAIL_ROUTE, params: { organization, id } };
 }
+
+/**
+ * The full URL for a target whose page lives in another web app, or "" when
+ * there is none to build (no path, or that app's URL is not configured).
+ */
+export function externalTargetUrl(
+  target: TNotificationTarget | null | undefined,
+  appUrls: { org?: string } = {},
+): string {
+  if (!target?.app || !target.path) return "";
+  const base = String(appUrls[target.app] ?? "").trim().replace(/\/+$/, "");
+  if (!base) return "";
+  const qs = new URLSearchParams(target.query ?? {}).toString();
+  return `${base}${target.path}${qs ? `?${qs}` : ""}`;
+}

package/components/ServiceProviderInvitationPrompt.vue

@@ -1,155 +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>
-  </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 } = useServiceProviderInvitation();
-const { addViaInvite } = useCustomerSite();
-
-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() {
-  working.value = "accept";
-  try {
-    await addViaInvite(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() {
-  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>