@7365admin1/layer-common 4.35.1-staging.385 → 4.36.0

package/components/InvitationClientForm.vue

@@ -388,27 +388,9 @@ watch(
 const roles = ref<any[]>([])
 const { getRoles } = useRole()
 
-/*
- * `type` is the ROLE type, not the service the client subscribes to, and the
- * only caller (`ClientMain.vue` "Invite Client") passes no `app` prop -- so
- * this sent `type: ""` and the endpoint applied no type filter at all. The
- * dropdown therefore listed every org-less role of every type, which includes
- * the platform's OWN staff roles (`type: "admin"` -- the two rows the console's
- * `/super-admin/role-permissions` screen edits). Offering a Seven365 console
- * staff role on a CLIENT invitation is the defect.
- *
- * A client admin's role is `type: "organization"`, which is what the client
- * roles screen (`org/[organization]/roles-permissions.vue`) already lists. This
- * narrows to exactly that. It is a narrowing of this one picker only: no role
- * changes, no permission changes, and the org-less `organization` roles that
- * were already being picked are all still offered.
- *
- * Keying off the selected service instead would empty the dropdown -- no
- * org-less role carries a service type -- so `props.app` is not the filter.
- */
 const { data: roleData, refresh: refreshRoles } = await useLazyAsyncData(
   "roles",
-  () => getRoles({ org: org.value?._id, type: "organization", limit: 50 }),
+  () => getRoles({ org: org.value?._id, type: props.app, limit: 50 }),
   { watch: [() => props.app] }
 )
 

package/components/Layout/NavigationDrawer.vue

@@ -129,9 +129,6 @@ 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"]);
@@ -199,7 +196,7 @@ const navigationItems = computed(() => {
   return withoutDeniedRoutes(items, userAppModulesDenied.value);
 });
 
-const sectionedItems = computed(() => withSections(navigationItems.value, props.sectionLabels as Record<string, string>));
+const sectionedItems = computed(() => withSections(navigationItems.value));
 
 /**
  * The design's brand tile carries the product's own mark. One icon for eleven

package/components/NotificationBell.vue

@@ -70,10 +70,7 @@
               :key="item._id"
               type="button"
               class="notif-card"
-              :class="{
-                'notif-card--unread': !item.hasRead,
-                'notif-card--plain': !targetFor(item),
-              }"
+              :class="{ 'notif-card--unread': !item.hasRead }"
               @click="openNotification(item)"
             >
               <div class="notif-card__top">
@@ -137,7 +134,7 @@ import {
   timeAgo,
   type TInboxItem,
 } from "../utils/notification-inbox";
-import { chooseNavigation, notificationTarget } from "../utils/notification-target";
+import { notificationTarget } from "../utils/notification-target";
 
 /**
  * The top-bar notification feed for the web, in every signed-in app.
@@ -171,7 +168,6 @@ 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);
@@ -307,59 +303,16 @@ function markRead(item: Record<string, any>) {
  * layer: the ten apps that have no order queue simply do not match it, and the
  * click there stays what it always was.
  */
-function targetFor(item: Record<string, any>) {
-  return notificationTarget(item as any, {
-    // The org app nests under `organization`; the service apps under `org`.
-    // Staff pages and the org app have neither, so the person's own default
-    // organisation builds a service-app link from there.
-    organization: String(
-      route.params?.organization ?? route.params?.org ?? currentUser.value?.defaultOrg ?? "",
-    ),
-    site: String(route.params?.site ?? ""),
-  });
-}
-
-/** A path this app really has a page for (every app has a 404 fallback, so check the match). */
-function hasLocalPage(path: string) {
-  try {
-    const resolved = router.resolve(path);
-    return resolved.matched.length > 0 && !resolved.matched.some((m) => m.path.includes("pathMatch"));
-  } catch {
-    return false;
-  }
-}
-
-/** Every web app's URL, keyed like `TAppKey`, from the layer's runtime config. */
-function appUrls() {
-  const p = appConfig?.public ?? {};
-  return {
-    org: String(p.APP_ORG ?? ""),
-    security: String(p.APP_SECURITY ?? ""),
-    "property-management": String(p.APP_PROPERTY_MANAGEMENT ?? ""),
-    hygiene: String(p.APP_HYGIENE ?? ""),
-    "mechanical-electrical": String(p.APP_MECHANICAL_ELECTRICAL ?? ""),
-    "pest-control": String(p.APP_PEST_CONTROL ?? ""),
-    landscaping: String(p.APP_LANDSCAPING ?? ""),
-    "pool-maintenance": String(p.APP_POOL_MAINTENANCE ?? ""),
-  };
-}
-
-/** The decision is `chooseNavigation` (unit-tested); this only carries it out. */
 async function goToSubject(item: Record<string, any>) {
-  const nav = chooseNavigation(targetFor(item), {
-    hasRoute: (name) => typeof router.hasRoute === "function" && router.hasRoute(name),
-    hasPage: hasLocalPage,
-    appUrls: appUrls(),
+  const target = notificationTarget(item as any, {
+    organization: String(route.params?.organization ?? ""),
   });
-  if (!nav) return;
+  if (!target) return;
+  if (typeof router.hasRoute !== "function" || !router.hasRoute(target.name)) return;
 
   open.value = false;
-  if (nav.type === "href") {
-    window.location.assign(nav.href);
-    return;
-  }
   try {
-    await router.push(nav.to as any);
+    await router.push(target);
   } catch {
     // A cancelled or duplicate navigation is not worth an error in the top bar.
   }
@@ -498,11 +451,6 @@ onBeforeUnmount(() => {
   background: var(--hover);
 }
 
-/* Nothing to open: still marks read on click, but does not look like a link. */
-.notif-card--plain {
-  cursor: default;
-}
-
 .notif-card__top {
   display: flex;
   align-items: baseline;

package/components/Robot/BuildingMap.vue

@@ -18,7 +18,7 @@
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" /></svg>
       Full screen
     </v-btn>
-    <v-btn v-if="canEditMap && !fleet" :variant="editing ? 'outlined' : 'flat'" :color="editing ? undefined : 'primary'" @click="editing = !editing">
+    <v-btn v-if="canEditMap" :variant="editing ? 'outlined' : 'flat'" :color="editing ? undefined : 'primary'" @click="editing = !editing">
       {{ editing ? "Exit edit mode" : "Edit map" }}
     </v-btn>
   </div>
@@ -26,10 +26,8 @@
   <div v-if="error" class="hero-notice" role="alert">{{ error }}</div>
   <div v-else-if="!loading && emptyNote" class="hero-notice">{{ emptyNote }}</div>
 
-  <div v-if="fleet" class="hero-notice" role="status">Live building from HERO Fleet Core - doors and lifts update every few seconds. It is managed by the fleet, so it cannot be edited here.</div>
-
   <RobotMapEditor
-    v-if="editing && canEditMap && !fleet"
+    v-if="editing && canEditMap"
     ref="editor"
     :map="map"
     :floors="floors"
@@ -107,11 +105,9 @@
             class="hero-bmap__floor"
             :style="{ transform: `translateZ(${i * FLOOR_GAP_PX}px)`, opacity: f.dim, '--hero-fill': look.fill }"
           >
-            <template v-if="!fleet">
-              <span class="hero-bmap__room" style="left: 8%; top: 10%; width: 34%; height: 30%" aria-hidden="true" />
-              <span class="hero-bmap__room" style="left: 58%; top: 10%; width: 34%; height: 44%" aria-hidden="true" />
-              <span class="hero-bmap__room" style="left: 8%; top: 62%; width: 60%; height: 28%" aria-hidden="true" />
-            </template>
+            <span class="hero-bmap__room" style="left: 8%; top: 10%; width: 34%; height: 30%" aria-hidden="true" />
+            <span class="hero-bmap__room" style="left: 58%; top: 10%; width: 34%; height: 44%" aria-hidden="true" />
+            <span class="hero-bmap__room" style="left: 8%; top: 62%; width: 60%; height: 28%" aria-hidden="true" />
             <template v-if="!map">
               <span class="hero-bmap__door" style="left: 42%; top: 22%" aria-hidden="true" />
               <span class="hero-bmap__door" style="left: 58%; top: 30%" aria-hidden="true" />
@@ -120,7 +116,7 @@
               <template v-for="s in f.shapes" :key="s.id">
                 <polygon v-if="s.kind === 'zone'" class="hero-bmap__zone" :points="svgPoints(s)" vector-effect="non-scaling-stroke" />
                 <line v-else-if="s.kind === 'wall'" class="hero-bmap__wall" :x1="s.points[0]!.x" :y1="s.points[0]!.y" :x2="s.points[1]!.x" :y2="s.points[1]!.y" vector-effect="non-scaling-stroke" />
-                <line v-else-if="s.kind === 'door'" class="hero-bmap__doorline" :class="{ 'hero-bmap__doorline--open': openDoors.has(String(s.meta?.name)) }" :x1="s.points[0]!.x" :y1="s.points[0]!.y" :x2="s.points[1]!.x" :y2="s.points[1]!.y" vector-effect="non-scaling-stroke" />
+                <line v-else-if="s.kind === 'door'" class="hero-bmap__doorline" :x1="s.points[0]!.x" :y1="s.points[0]!.y" :x2="s.points[1]!.x" :y2="s.points[1]!.y" vector-effect="non-scaling-stroke" />
               </template>
             </svg>
 
@@ -169,7 +165,6 @@
 
       <div class="hero-bmap__legend">
         <span><i class="hero-bmap__key hero-bmap__key--door" />Door</span>
-        <span v-if="fleet"><i class="hero-bmap__key hero-bmap__key--dooropen" />Door open</span>
         <span><i class="hero-bmap__key hero-bmap__key--shaft" />Lift shaft</span>
         <span><i class="hero-bmap__key hero-bmap__key--bot" />Robot (live)</span>
         <span v-if="type === 'security'"><i class="hero-bmap__key hero-bmap__key--route" />Patrol route · numbered checkpoints</span>
@@ -202,7 +197,6 @@ import RobotMapEditor from "./MapEditor.vue";
 import RobotReconnecting from "./Reconnecting.vue";
 import useRobotBuilding from "../../composables/useRobotBuilding";
 import useRobotLive, { siteStatesFeed } from "../../composables/useRobotLive";
-import { openDoorNames } from "../../utils/robot-fleet-core";
 import {
   brandName,
   floorName,
@@ -264,12 +258,11 @@ const emit = defineEmits<{
   status: [status: { connected: boolean; faults: number; siteName: string; clientName: string }];
 }>();
 
-const { rows, map, fleet, names, loading, error, reload } = useRobotBuilding(
+const { rows, map, names, loading, error, reload } = useRobotBuilding(
   toRef(props, "organization"),
   toRef(props, "site"),
   toRef(props, "type"),
 );
-const openDoors = computed(() => openDoorNames(map.value));
 const siteLabel = computed(() => props.siteName || names.value.siteName || "This site");
 
 /* ---- live states + patrol routes of the robots on screen ---- */
@@ -388,8 +381,8 @@ function fullscreen(el?: HTMLElement | null) {
   else el?.requestFullscreen?.();
 }
 const editing = ref(false);
-watch([() => props.canEditMap, fleet], ([can, isFleet]) => {
-  if (!can || isFleet) editing.value = false;
+watch(() => props.canEditMap, (can) => {
+  if (!can) editing.value = false;
 });
 /** The robot a first save is attached to (maps are stored per robot): one of this site's. */
 const ownerRobotId = computed(() => String(map.value?.robotId ?? rows.value[0]?._id ?? ""));

package/components/Robot/LiftQueue.vue

@@ -16,7 +16,6 @@
   </div>
 
   <div v-if="error" class="hero-notice" role="alert">{{ error }}</div>
-  <div v-else-if="fleet" class="hero-notice" role="status">Live lifts from HERO Fleet Core - the fleet calls and releases lifts itself.</div>
   <div v-else-if="!connected" class="hero-notice" role="status">Reconnecting… the lift queue shows its last reading.</div>
 
   <div v-if="loading && !cards.length" class="hero-lifts" role="status" aria-label="Loading the lift queue">
@@ -76,7 +75,7 @@
             <span class="hero-lift-row__wait">{{ q.wait }}</span>
             <span class="hero-chip" :class="`hero-tone--${liftState(q.state).tone}`">{{ liftState(q.state).label }}</span>
             <button
-              v-if="canCommand && !fleet"
+              v-if="canCommand"
               type="button"
               class="hero-lift-row__release"
               :style="{ visibility: q.state === 'riding' || q.state === 'requested' ? 'visible' : 'hidden' }"
@@ -89,7 +88,7 @@
           </div>
         </div>
 
-        <form v-if="canCommand && demoRobots.length && !fleet" class="hero-lift__ask" @submit.prevent="ask(l)">
+        <form v-if="canCommand && demoRobots.length" class="hero-lift__ask" @submit.prevent="ask(l)">
           <select v-model="askRobot[l.name]" class="hero-input hero-select hero-select--sm" aria-label="Robot">
             <option value="" disabled>Robot</option>
             <option v-for="r in demoRobots" :key="String(r._id)" :value="String(r._id)">{{ r.name }}</option>
@@ -116,7 +115,6 @@ import RobotToast from "./Toast.vue";
 import useRobotBuilding from "../../composables/useRobotBuilding";
 import { floorName, liftState, robotErrorMessage } from "../../utils/robot-display";
 import { liftCard, type TLiftRowView } from "../../utils/robot-building";
-import { fleetLiftItems } from "../../utils/robot-fleet-core";
 
 const props = withDefaults(
   defineProps<{
@@ -139,7 +137,7 @@ const emit = defineEmits<{
   status: [status: { connected: boolean; faults: number; siteName: string; clientName: string }];
 }>();
 
-const { rows, all, map, fleet, names, loading: mapLoading, error: mapError } = useRobotBuilding(
+const { rows, map, names, loading: mapLoading, error: mapError } = useRobotBuilding(
   toRef(props, "organization"),
   toRef(props, "site"),
   toRef(props, "type"),
@@ -156,8 +154,6 @@ const loading = computed(() => mapLoading.value || queueLoading.value);
 const error = computed(() => mapError.value);
 
 async function poll() {
-  // The fleet building has no lift sessions of ours: its lifts come live with the building (5 s refresh).
-  if (fleet.value) return void (items.value = fleetLiftItems(map.value, all.value), (queueLoading.value = false));
   const id = map.value?._id;
   if (!id) return void (items.value = []);
   if (typeof document !== "undefined" && document.visibilityState === "hidden") return;
@@ -173,10 +169,9 @@ async function poll() {
 }
 let timer: ReturnType<typeof setInterval> | undefined;
 watch(
-  () => (fleet.value ? map.value : map.value?._id),
+  () => map.value?._id,
   (id) => {
     clearInterval(timer);
-    if (fleet.value) return void poll();
     items.value = [];
     if (!id) return;
     queueLoading.value = true;

package/components/Robot/MapEditor.vue

@@ -38,6 +38,10 @@
         @input="dispatch({ type: 'rename', name: zoneName })"
       />
       <span class="hero-editor__hint">{{ TOOL_HINTS[tool] }}</span>
+      <v-btn variant="outlined" class="hero-editor__fs" @click="fullscreen">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" /></svg>
+        Full screen
+      </v-btn>
     </div>
 
     <div v-if="state.notice" class="hero-editor__notice" :class="{ 'hero-editor__notice--ok': state.notice.ok }" role="status" aria-live="polite">{{ state.notice.text }}</div>
@@ -478,6 +482,9 @@ const isFs = ref(false);
 const onFs = () => (isFs.value = document.fullscreenElement === root.value);
 onMounted(() => document.addEventListener("fullscreenchange", onFs));
 onBeforeUnmount(() => document.removeEventListener("fullscreenchange", onFs));
-// Full screen is the page header's one button (BuildingMap), which full-screens `root` while editing.
+function fullscreen() {
+  if (document.fullscreenElement) document.exitFullscreen?.();
+  else root.value?.requestFullscreen?.();
+}
 defineExpose({ root });
 </script>

package/components/RolePermissionFormCreate.vue

@@ -139,7 +139,7 @@
                   </template>
                   <v-list-item-title>
                     <span class="text-capitalize role-create__row-title">
-                      {{ formatResourceLabel(String(resourceKey), props.type) }}
+                      {{ formatResourceLabel(String(resourceKey)) }}
                     </span>
                   </v-list-item-title>
                   <template #append>
@@ -279,7 +279,6 @@ const props = defineProps({
   },
 });
 
-
 const emit = defineEmits(["cancel", "success", "success:create-more"]);
 
 const validForm = ref(false);
@@ -538,14 +537,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, props.type);
+  const all = sortResourcesByLabel(safePermissions.value);
   if (!query) return all;
 
   const matches: Record<string, any> = {};
   for (const [resource, actions] of Object.entries(all)) {
     const haystack = [
       resource,
-      formatResourceLabel(resource, props.type),
+      formatResourceLabel(resource),
       ...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), props.type) }}
+                    {{ formatResourceLabel(String(resourceKey)) }}
                   </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), props.type) }}
+                      {{ formatResourceLabel(String(resourceKey)) }}
                     </v-list-item-title>
                     <v-list-item-subtitle class="role-perm__row-sub">
                       {{
@@ -311,15 +311,8 @@ 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("*"));
 
@@ -493,14 +486,14 @@ const moduleSearch = ref<string | null>("");
 
 const visiblePermissions = computed(() => {
   const query = (moduleSearch.value ?? "").trim().toLowerCase();
-  const all = sortResourcesByLabel(safePermissions.value, props.type);
+  const all = sortResourcesByLabel(safePermissions.value);
   if (!query) return all;
 
   const matches: Record<string, any> = {};
   for (const [resource, actions] of Object.entries(all)) {
     const haystack = [
       resource,
-      formatResourceLabel(resource, props.type),
+      formatResourceLabel(resource),
       ...Object.keys((actions as Record<string, unknown>) ?? {}).flatMap(
         (action) => [action, formatActionLabel(action)]
       ),
@@ -516,7 +509,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>, props.type)
+  sortResourcesByLabel(props.notOfferedPermissions as Record<string, any>)
 );
 
 /*

package/components/RolePermissionMain.vue

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

package/components/ServiceProviderInvitationPrompt.vue

@@ -0,0 +1,155 @@
+<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>