@7365admin1/layer-common 3.2.8-staging.211 → 3.2.8-staging.212

package/components/ClientDetailForm.vue

@@ -9,10 +9,15 @@
 
       <div class="actions">
         <button class="btn-cancel" @click="$emit('cancel')">Cancel</button>
-        <button class="btn-submit" @click="handleSubmit">Submit</button>
+        <button class="btn-submit" :disabled="saving" @click="handleSubmit">
+          {{ saving ? 'Saving...' : 'Submit' }}
+        </button>
       </div>
     </div>
 
+    <p v-if="loadError" class="form-error" role="alert">{{ loadError }}</p>
+    <p v-else-if="formError" class="form-error" role="alert">{{ formError }}</p>
+
     <!-- ===== CLIENT INFORMATION ===== -->
     <section class="section">
       <h3>Client Information</h3>
@@ -133,7 +138,12 @@
     <!-- ===== INCLUDED APPLICATION ===== -->
     <section class="section">
       <h3>Included Application</h3>
-      <ul class="app-list">
+      <!-- A plain organisation has no service application of its own, so the
+           list is legitimately empty. An empty <ul> reads as a broken box. -->
+      <p v-if="form.includedApps.length === 0" class="app-none">
+        No service application recorded for this client.
+      </p>
+      <ul v-else class="app-list">
         <li v-for="(app, idx) in form.includedApps" :key="idx">{{ app }}</li>
       </ul>
     </section>
@@ -266,6 +276,10 @@ const errors = reactive({
 const phonePrefix = ref('+65')
 const phoneNumber = ref('')
 
+const saving     = ref(false)
+const loadError  = ref('')
+const formError  = ref('')
+
 /* ── FORM STATE ── */
 const form = reactive({
   name: '',
@@ -348,6 +362,9 @@ async function handleSubmit() {
 
   form.phone = `${phonePrefix.value} ${phoneNumber.value}`
 
+  saving.value = true
+  formError.value = ''
+
   try {
     if (userId.value) {
       await userApi.updateUserFieldById(userId.value, 'name', form.name)
@@ -359,8 +376,16 @@ async function handleSubmit() {
     })
 
     emit('submit', { ...form })
-  } catch (error) {
-    console.error(error)
+  } catch (error: any) {
+    // A failed save used to reach `console.error` and nothing else, so Submit
+    // looked exactly like a button that did nothing - the screen stayed put
+    // with the typed values still in it, which reads as "not saved yet".
+    formError.value =
+      error?.response?._data?.message ??
+      error?.data?.message ??
+      'Could not save this client. Nothing was changed.'
+  } finally {
+    saving.value = false
   }
 }
 const userId = ref('')
@@ -419,7 +444,19 @@ watch(
   async client => {
     if (!client?._id) return
 
-    await Promise.all([loadOrganization(), loadSites()])
+    loadError.value = ''
+
+    try {
+      await Promise.all([loadOrganization(), loadSites()])
+    } catch (error: any) {
+      // Neither loader caught anything, so a failed request rejected inside
+      // this watcher and the drawer drew every field blank and an empty site
+      // table - an error shown as "this client has nothing in it".
+      loadError.value =
+        error?.response?._data?.message ??
+        error?.data?.message ??
+        'Could not load this client. Nothing here has been saved or changed.'
+    }
   },
   {
     immediate: true
@@ -654,6 +691,29 @@ watch(
   color: var(--err);
 }
 
+/* A failed load or a failed save, said once at the top of the form where the
+   reader already is. `--err-bg` fill + `--err` ink, the design's error pair. */
+.form-error {
+  margin: 0 28px 18px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--err-bg);
+  color: var(--err);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.45;
+}
+.btn-submit:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+/* `--text2` is the reading token for secondary copy; `--muted` measures below
+   AA at this size. */
+.app-none {
+  font-size: 13.5px;
+  color: var(--text2);
+}
+
 /*
  * MEASURED at 360: the form overflowed the viewport by 147px in both themes.
  * Its two-column grid, its 28px side padding and its header row are all fixed,

package/components/ClientMain.vue

@@ -56,7 +56,15 @@
       <div class="table-card">
 
         <!-- Toolbar row -->
-        <div v-if="savedNote" class="saved-note" role="status">
+        <!-- Confirmations AND failures. A suspend that the server refused used
+             to reach `console.error` and nothing else, so the control read as
+             one that quietly did nothing. -->
+        <div
+          v-if="savedNote"
+          class="saved-note"
+          :class="{ 'saved-note-error': noteIsError }"
+          :role="noteIsError ? 'alert' : 'status'"
+        >
           {{ savedNote }}
           <button class="saved-note-close" @click="savedNote = ''">&times;</button>
         </div>
@@ -266,27 +274,74 @@
       </div>
     </div>
 
-    <!-- ===== SUSPEND CONFIRMATION DIALOG ===== -->
-    <div v-if="confirmSuspendItem" class="overlay" @click.self="cancelSuspend">
+    <!--
+      SUSPEND / REACTIVATE CONFIRMATION.
+
+      One dialog for both directions, because one endpoint serves both. The
+      suspend wording says what actually happens in the owner's own terms
+      (owner decision 4) rather than "are you sure": the people who lose access
+      are not only the client's office staff, and the two things a person most
+      needs to know before pressing it are that nothing is deleted and that it
+      can be undone. Reactivating needs no warning, but it still confirms - it
+      is a real change to who can sign in.
+    -->
+    <div v-if="confirmItem" class="overlay" @click.self="cancelConfirm">
       <div class="confirm-box">
-        <h3 class="confirm-title">Suspend account</h3>
-        <p class="confirm-text">
-          Are you sure you want to suspend <strong>{{ confirmSuspendItem?.name }}</strong>'s account?
-        </p>
+        <template v-if="confirmAction === 'suspended'">
+          <h3 class="confirm-title">Suspend {{ confirmItem?.name }}?</h3>
+          <p class="confirm-text">
+            Everyone who belongs to this client will be blocked from signing in
+            &mdash; their staff, their residents and their guards.
+          </p>
+          <p class="confirm-text">
+            Nothing is deleted. All of their data is kept.
+          </p>
+          <p class="confirm-text">
+            You can reactivate them at any time and they get straight back in.
+          </p>
+        </template>
+
+        <template v-else>
+          <h3 class="confirm-title">Reactivate {{ confirmItem?.name }}?</h3>
+          <p class="confirm-text">
+            Their staff, residents and guards will be able to sign in again.
+          </p>
+        </template>
+
+        <p v-if="confirmError" class="confirm-error" role="alert">{{ confirmError }}</p>
+
         <div class="confirm-actions">
-          <button class="btn-cancel" @click="cancelSuspend">Cancel</button>
-          <button class="btn-confirm-danger" :disabled="confirmSuspendLoading" @click="confirmSuspend">
-            <span v-if="confirmSuspendLoading" class="spinner spinner-light" />
-            <span v-else>Suspend</span>
+          <button class="btn-cancel" :disabled="confirmLoading" @click="cancelConfirm">Cancel</button>
+          <button
+            :class="confirmAction === 'suspended' ? 'btn-confirm-danger' : 'btn-confirm'"
+            :disabled="confirmLoading"
+            @click="runConfirm"
+          >
+            <span v-if="confirmLoading" class="spinner spinner-light" />
+            <span v-else>{{ confirmAction === 'suspended' ? 'Suspend' : 'Reactivate' }}</span>
           </button>
         </div>
       </div>
     </div>
 
+    <!--
+      THE ROW MENU CARRIES ITS OWN THEME CLASS.
+
+      It teleports to `<body>`, which is OUTSIDE the `v-application` element
+      Vuetify puts `v-theme--light` / `v-theme--dark` on - and every design
+      token in `tokens.css` is declared under `[class*="v-theme--"]`. So
+      `background: var(--card)` resolved to NOTHING and the menu drew with a
+      fully transparent background: measured `rgba(0, 0, 0, 0)` in both themes,
+      with the table's own text showing straight through the menu items. Its
+      border, ink and hover were dead for the same reason. Naming the theme on
+      the element itself brings all of them back without moving the teleport,
+      which is what keeps the menu clear of the table's `overflow`.
+    -->
     <Teleport to="body">
       <div
         v-if="openMenuId"
         class="dropdown"
+        :class="`v-theme--${currentTheme}`"
         :style="{ top: menuPos.top + 'px', left: menuPos.left + 'px' }"
       >
         <button class="dd-item" @click="viewClient(activeMenuItem)">
@@ -295,20 +350,29 @@
         <button class="dd-item" @click="openSubscription(activeMenuItem)">
           {{ activeMenuItem?.sub?.state === 'none' ? 'Set up subscription' : 'Edit subscription' }}
         </button>
-        <button
-          v-if="activeMenuItem?.status === 'suspended'"
-          class="dd-item"
-          @click="activateClient(activeMenuItem)"
-        >
-          Activate
-        </button>
-        <button
-          v-else
-          class="dd-item danger"
-          @click="askSuspend(activeMenuItem)"
-        >
-          Suspend
-        </button>
+        <!--
+          OWNER ONLY (owner decision 9). Ordinary Seven365 staff may view
+          clients and set up subscriptions; only the owner may stop a client's
+          people signing in. The server decides this again on every call -
+          `requirePlatformOwner` reads the session, not anything the browser
+          sends - so this hides a control it does not guard.
+        -->
+        <template v-if="isOwner">
+          <button
+            v-if="activeMenuItem?.status === 'suspended'"
+            class="dd-item"
+            @click="askConfirm(activeMenuItem, 'active')"
+          >
+            Reactivate
+          </button>
+          <button
+            v-else
+            class="dd-item danger"
+            @click="askConfirm(activeMenuItem, 'suspended')"
+          >
+            Suspend
+          </button>
+        </template>
       </div>
     </Teleport>
   </div>
@@ -319,6 +383,8 @@ import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import useOrg from '../composables/useOrg'
 import useVerification from '../composables/useVerification'
 import useRole from '../composables/useRole'
+import useConsoleTier from '../composables/useConsoleTier'
+import useThemePreference from '../composables/useThemePreference'
 import useUtils from '../composables/useUtils'
 import InvitationClientForm from './InvitationClientForm.vue'
 import ClientDetailForm from './ClientDetailForm.vue'
@@ -335,6 +401,10 @@ const { getOrganizationsWithSubscription, updateStatus } = useOrg()
 const { getVerifications, cancelUserInvitation } = useVerification()
 const { getCustomerSites: getCustomerSitesByOrgId } = useCustomerSite()
 const { getRoleById } = useRole()
+// Owner decision 9. Only decides what is DRAWN - see `utils/console-tier.ts`.
+const { isOwner, load: loadConsoleTier } = useConsoleTier()
+// Only for the teleported menu - see the comment above the Teleport.
+const { current: currentTheme } = useThemePreference()
 // The same helper the admin app's Organizations list uses to print a nature,
 // so both screens say the value the same way while both exist.
 const { formatNature } = useUtils()
@@ -378,9 +448,12 @@ const selectedClient  = ref<any>(null)
 const subscriptionClient = ref<any>(null)
 const savedNote          = ref('')
 
-/* suspend confirmation */
-const confirmSuspendItem    = ref<any>(null)
-const confirmSuspendLoading = ref(false)
+/* suspend / reactivate confirmation */
+const confirmItem    = ref<any>(null)
+const confirmAction  = ref<'active' | 'suspended'>('suspended')
+const confirmLoading = ref(false)
+const confirmError   = ref('')
+const noteIsError    = ref(false)
 
 /* ── COMPUTED ── */
 const pageRange = computed(() => {
@@ -409,37 +482,35 @@ function parseTotalItems(pageRangeStr: string, fallback: number): number {
   return match ? Number(match[1]) : fallback
 }
 
-async function suspendClient(item: any) {
-  try {
-    await updateStatus(item._id, "suspended")
-    closeMenu()
-    await fetchData()
-  } catch (err) {
-    console.error(err)
-  }
+/**
+ * Say what went wrong, in the words the API used where it gave any.
+ *
+ * `updateStatus` is owner-gated on the server, so the refusal an ordinary
+ * staff member gets here is a real, expected answer - not a crash. It used to
+ * land in `console.error`, which meant pressing Suspend looked exactly like
+ * pressing nothing.
+ */
+function apiMessage(err: any, fallback: string) {
+  return err?.response?._data?.message ?? err?.data?.message ?? fallback
 }
 
-async function activateClient(item: any) {
-  try {
-    await updateStatus(item._id, "active")
-    closeMenu()
-    await fetchData()
-  } catch (err) {
-    console.error(err)
-  }
+function showNote(text: string, isError = false) {
+  savedNote.value  = text
+  noteIsError.value = isError
 }
 
 /* ── SUBSCRIPTION ── */
 function openSubscription(item: any) {
   if (!item?._id) return
   savedNote.value = ''
+  noteIsError.value = false
   subscriptionClient.value = item
   closeMenu()
 }
 
 async function onSubscriptionSaved(message: string) {
   subscriptionClient.value = null
-  savedNote.value = message
+  showNote(message)
   // The list derives every subscription state from the record itself, so
   // re-reading it is all that is needed for the row to tell the truth again.
   await fetchData()
@@ -453,25 +524,57 @@ async function onSubscriptionSaved(message: string) {
   }
 }
 
-/* ── SUSPEND CONFIRMATION ── */
-function askSuspend(item: any) {
-  confirmSuspendItem.value = item
+/* ── SUSPEND / REACTIVATE CONFIRMATION ── */
+function askConfirm(item: any, action: 'active' | 'suspended') {
+  if (!item?._id) return
+  confirmItem.value   = item
+  confirmAction.value = action
+  confirmError.value  = ''
   closeMenu()
 }
 
-function cancelSuspend() {
-  if (confirmSuspendLoading.value) return
-  confirmSuspendItem.value = null
+function cancelConfirm() {
+  if (confirmLoading.value) return
+  confirmItem.value  = null
+  confirmError.value = ''
 }
 
-async function confirmSuspend() {
-  if (!confirmSuspendItem.value) return
-  confirmSuspendLoading.value = true
+async function runConfirm() {
+  const item   = confirmItem.value
+  const action = confirmAction.value
+  if (!item?._id) return
+
+  confirmLoading.value = true
+  confirmError.value   = ''
+
   try {
-    await suspendClient(confirmSuspendItem.value)
-    confirmSuspendItem.value = null
+    await updateStatus(item._id, action)
+    confirmItem.value = null
+
+    // The row's state is derived from the record, never held here, so
+    // re-reading the list is the whole update - `describeClientSubscription`
+    // then reports "Suspended" from the subscription status the endpoint
+    // writes alongside the organisation's. The client also moves to the tab
+    // that matches its new status, which is why it leaves this one.
+    await fetchData()
+
+    showNote(
+      action === 'suspended'
+        ? `${item.name} is suspended. Their staff, residents and guards can no longer sign in, and all their data is kept.`
+        : `${item.name} is active again. Their staff, residents and guards can sign in.`,
+    )
+  } catch (err: any) {
+    // Stays on the dialog. Closing it and dropping a banner would read as
+    // "done, with a note"; the action did not happen and the person is still
+    // standing in front of the decision.
+    confirmError.value = apiMessage(
+      err,
+      action === 'suspended'
+        ? 'Could not suspend this client. Only the Seven365 owner may suspend a client.'
+        : 'Could not reactivate this client. Only the Seven365 owner may reactivate a client.',
+    )
   } finally {
-    confirmSuspendLoading.value = false
+    confirmLoading.value = false
   }
 }
 
@@ -574,8 +677,8 @@ function cancelView() {
 }
 
 async function submitClient() {
-  // await update API
-
+  // `ClientDetailForm` has already saved by the time it emits - this closes the
+  // drawer and re-reads the row so the list shows what was saved.
   viewMode.value = 'table'
   fetchData()
 }
@@ -672,6 +775,9 @@ async function cancelInvite(item: any) {
 }
 
 onMounted(() => {
+  // Not awaited: the list is the screen, and the tier only adds or removes two
+  // menu items on a menu nobody has opened yet.
+  loadConsoleTier()
   fetchData()
   document.addEventListener('click', handleOutsideClick)
   document.addEventListener('scroll', closeMenu, true)
@@ -1170,4 +1276,40 @@ tbody td { vertical-align: middle; }
 }
 .btn-confirm-danger:hover:not(:disabled) { background: var(--err); }
 .btn-confirm-danger:disabled { opacity: 0.7; cursor: not-allowed; }
+/* Reactivating is an ordinary action, so it is not dressed as a destructive
+   one. Same box as the danger button so the dialog does not jump between the
+   two directions. */
+.btn-confirm {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 78px;
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  border-radius: 8px;
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
+  cursor: pointer;
+}
+.btn-confirm:disabled { opacity: 0.7; cursor: not-allowed; }
+.btn-cancel:disabled { opacity: 0.7; cursor: not-allowed; }
+/* The refusal, on the dialog it belongs to. `--err` on `--err-bg`, not a bare
+   red on the card. */
+.confirm-error {
+  margin-bottom: 16px;
+  padding: 9px 12px;
+  border-radius: 8px;
+  background: var(--err-bg);
+  color: var(--err);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.45;
+}
+.saved-note-error {
+  background: var(--err-bg);
+  color: var(--err);
+}
 </style>

package/components/MemberMain.vue

@@ -491,7 +491,13 @@ async function updateMemberRole() {
     await setMember({ mode: "assign-role" });
     await getAll();
   } catch (error: any) {
-    message.value = error?.response?._data?.message || "Failed to update role";
+    // `message.value` alone sets the snackbar's TEXT and never opens it, so a
+    // refused role change said nothing at all - the dialog just closed and the
+    // row kept its old role. `showMessage` is the one that shows it.
+    showMessage(
+      error?.response?._data?.message || "Failed to update role.",
+      "error",
+    );
   }
 }
 
@@ -543,7 +549,11 @@ async function handleUpdateMemberStatus() {
     showMessage(res.message, "success");
     getAll();
   } catch (error: any) {
-    const errorMessage = error?.response?._data?.message;
+    // An error with no `message` on it drew an EMPTY red snackbar - a failure
+    // reported as a blank bar.
+    const errorMessage =
+      error?.response?._data?.message ||
+      `Could not ${updateActionText.value.toLowerCase()} this member.`;
     showMessage(errorMessage, "error");
   } finally {
     updateLoading.value = false;

package/composables/useConsoleTier.ts

@@ -0,0 +1,73 @@
+import { computed } from "vue";
+import { useCookie, useRuntimeConfig, useState } from "#app";
+
+import useMember from "./useMember";
+import useRole from "./useRole";
+import { consoleTier, type TConsoleTier } from "../utils/console-tier";
+
+/**
+ * WHICH SEVEN365 TIER THE SIGNED-IN PERSON IS - fetched once, shared, and
+ * used ONLY to decide what to draw.
+ *
+ * The rule lives in `utils/console-tier.ts` and mirrors the server's
+ * `isPlatformOwner`. Read that file for why `role.default` is the marker, and
+ * for the honest limit: the server re-decides this on every write from the
+ * session, so a browser that flips this boolean gets a visible button and a
+ * 401. Nothing here is a permission check.
+ *
+ * Both requests hit endpoints the console already uses, so no new API surface
+ * and no proxy rule was needed:
+ *
+ *   GET /api/members/user/:user/app/admin   the Seven365 staff membership
+ *   GET /api/roles/id/:role                 that membership's role document
+ *
+ * `admin` is the membership type deliberately, not the org app's own `APP`.
+ * A Seven365 person can also hold an ordinary organisation membership - and on
+ * staging that one carries a role merely NAMED "Super Admin" - so asking for
+ * the org membership would read the wrong row and answer the wrong tier.
+ */
+export default function useConsoleTier() {
+  const { cookieConfig } = useRuntimeConfig().public;
+
+  const tier = useState<TConsoleTier>("consoleTier", () => "none");
+  // Separate from `tier` because "not looked yet" and "looked, not staff" are
+  // both `none` on the glass but only one of them should be re-tried.
+  const resolved = useState<boolean>("consoleTierResolved", () => false);
+
+  const { getByUserIdType } = useMember();
+  const { getRoleById } = useRole();
+
+  async function load(force = false): Promise<TConsoleTier> {
+    if (resolved.value && !force) return tier.value;
+
+    const user = useCookie("user", cookieConfig).value as string | null;
+
+    try {
+      if (!user) {
+        tier.value = "none";
+        return tier.value;
+      }
+
+      const member = await getByUserIdType(user, "admin");
+      const role = member?.role ? await getRoleById(member.role as string) : null;
+
+      tier.value = consoleTier(member, role);
+    } catch {
+      // Fails closed. A 404 here is the ordinary answer for somebody who is
+      // not Seven365 staff at all, so it is not worth a console error.
+      tier.value = "none";
+    } finally {
+      resolved.value = true;
+    }
+
+    return tier.value;
+  }
+
+  return {
+    tier,
+    resolved,
+    isOwner: computed(() => tier.value === "owner"),
+    isStaff: computed(() => tier.value === "owner" || tier.value === "staff"),
+    load,
+  };
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.8-staging.211",
+  "version": "3.2.8-staging.212",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/utils/client-subscription.test.ts

@@ -143,3 +143,98 @@ test("a billing cycle the screen does not know is shown, not swallowed", () => {
     "Yearly",
   );
 });
+
+/* ── SUSPEND / REACTIVATE, THE STATE THE LIST HAS TO SHOW AFTERWARDS ──────
+ *
+ * `PATCH /api/organizations/:id/status` (core `organization.controller.ts`
+ * `updateStatus`) writes BOTH `organizations.status` and the organisation's
+ * subscription status - the second one so the hourly sync job agrees rather
+ * than undoing the decision an hour later. So after the list is re-read, a
+ * suspended client arrives with both set, and this is what the row then says.
+ * Nothing in the screen holds a second copy of that state.
+ */
+
+/** Exactly what `updateStatus` leaves behind, applied to a list row. */
+function afterStatusChange(org: Record<string, any>, status: "active" | "suspended") {
+  return {
+    ...org,
+    status,
+    subscription: org.subscription?._id
+      ? { ...org.subscription, status }
+      : org.subscription,
+  };
+}
+
+test("suspending a client makes the row say Suspended", () => {
+  const before = orgWithSub({});
+  assert.equal(describeClientSubscription(before, NOW).state, "active");
+
+  const after = afterStatusChange(before, "suspended");
+  const v = describeClientSubscription(after, NOW);
+
+  assert.equal(v.state, "suspended");
+  assert.equal(v.label, "Suspended");
+  // Suspension is a decision somebody took, not a thing needing attention.
+  assert.equal(v.needsAttention, false);
+  // The dates are untouched - "data is kept" is visible, not just claimed.
+  assert.equal(v.billingCycle, describeClientSubscription(before, NOW).billingCycle);
+  assert.equal(v.start, describeClientSubscription(before, NOW).start);
+  assert.equal(v.end, describeClientSubscription(before, NOW).end);
+});
+
+test("reactivating puts the row back exactly where it was", () => {
+  const before = orgWithSub({});
+  const round = afterStatusChange(afterStatusChange(before, "suspended"), "active");
+
+  assert.deepEqual(
+    describeClientSubscription(round, NOW),
+    describeClientSubscription(before, NOW),
+  );
+});
+
+test("a complimentary client suspends and reactivates the same way", () => {
+  // All 11 production clients are complimentary, so this is the case that
+  // actually happens - and `billingMode` must survive the round trip.
+  const before = orgWithSub({ billingMode: "complimentary" });
+  assert.equal(describeClientSubscription(before, NOW).state, "complimentary");
+
+  assert.equal(
+    describeClientSubscription(afterStatusChange(before, "suspended"), NOW).state,
+    "suspended",
+  );
+  assert.equal(
+    describeClientSubscription(afterStatusChange(before, "active"), NOW).state,
+    "complimentary",
+  );
+});
+
+test("a client with NO subscription document still suspends", () => {
+  // `updateStatus` writes the organisation's status either way and only
+  // touches a subscription if one exists. This row has none, so the
+  // subscription column keeps saying so - the ORGANISATION's status is what
+  // moved it to the Suspended tab, and that is the honest reading of the
+  // record. The list is fetched per tab, so the row is on the tab that matches.
+  const before = { _id: "o-1", name: "A Client", status: "active", subscription: {} };
+  const after = afterStatusChange(before, "suspended");
+
+  assert.equal(after.status, "suspended");
+  assert.equal(describeClientSubscription(after, NOW).state, "none");
+  assert.equal(describeClientSubscription(after, NOW).label, "No subscription set up");
+});
+
+test("suspending does not clear an end date that had already passed", () => {
+  // Owner decision 8's flag and a suspension are different things, and the
+  // flag is derived at read time - suspending must not hide the fact that the
+  // subscription had run out, because reactivating brings it straight back.
+  const overdue = orgWithSub({ nextBillingDate: "2026-01-01T00:00:00.000Z" });
+  assert.equal(describeClientSubscription(overdue, NOW).needsAttention, true);
+
+  assert.equal(
+    describeClientSubscription(afterStatusChange(overdue, "suspended"), NOW).state,
+    "suspended",
+  );
+  assert.equal(
+    describeClientSubscription(afterStatusChange(overdue, "active"), NOW).needsAttention,
+    true,
+  );
+});

package/utils/console-tier.test.ts

@@ -0,0 +1,87 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+
+import { consoleTier } from "./console-tier.ts";
+
+/** The seeded platform-staff role - `user.service.ts createDefaultUser()`. */
+const OWNER_ROLE = {
+  _id: "r-owner",
+  name: "Super Admin",
+  type: "admin",
+  default: true,
+  permissions: [],
+};
+
+/** A role made through the admin app. `default` is not in its Joi schema. */
+const STAFF_ROLE = {
+  _id: "r-staff",
+  name: "Operations",
+  type: "admin",
+  permissions: ["organization:read"],
+};
+
+const ADMIN_MEMBER = { _id: "m-1", user: "u-1", type: "admin", role: "r-owner" };
+
+test("the owner is an admin member on an admin role marked default", () => {
+  assert.equal(consoleTier(ADMIN_MEMBER, OWNER_ROLE), "owner");
+});
+
+test("ordinary Seven365 staff are admin, but their role is not the default one", () => {
+  assert.equal(consoleTier(ADMIN_MEMBER, STAFF_ROLE), "staff");
+  // The absence of the field, not just `false`, is the ordinary case: the admin
+  // app's create-role form cannot send it at all.
+  assert.equal(consoleTier(ADMIN_MEMBER, { ...STAFF_ROLE, default: false }), "staff");
+});
+
+test("BOTH halves are required - a role name proves nothing", () => {
+  // Staging carries an ordinary ORGANISATION role merely NAMED "Super Admin",
+  // and `web-app-org/pages/index.vue` gated the whole console on that name.
+  // That row must not reach owner, or staff, on the strength of its name.
+  const impostor = { _id: "r-x", name: "Super Admin", type: "organization", default: true };
+  assert.equal(consoleTier(ADMIN_MEMBER, impostor), "none");
+
+  // ...and an admin-typed role held through a non-admin membership is not
+  // staff either. `isSuperAdmin` requires `members.type === "admin"` too.
+  assert.equal(consoleTier({ ...ADMIN_MEMBER, type: "organization" }, OWNER_ROLE), "none");
+});
+
+test("`default` is only honoured when it is exactly true", () => {
+  // A truthy-but-not-true value is not what `createDefaultUser` writes, and the
+  // server compares with `===`. Drawing an owner control off `"true"` or `1`
+  // would show a button the server then refuses.
+  for (const value of ["true", 1, {}, "yes"]) {
+    assert.equal(
+      consoleTier(ADMIN_MEMBER, { ...STAFF_ROLE, default: value }),
+      "staff",
+      JSON.stringify(value),
+    );
+  }
+});
+
+test("anything unproven is `none` - this fails closed", () => {
+  const unproven: Array<[any, any]> = [
+    [null, OWNER_ROLE],
+    [undefined, OWNER_ROLE],
+    [{}, OWNER_ROLE],
+    [ADMIN_MEMBER, null], // the role request failed
+    [ADMIN_MEMBER, undefined],
+    [ADMIN_MEMBER, {}],
+    [null, null],
+    // An error body answered instead of a record. `member.controller.ts`
+    // answers `NotFoundError` as JSON, so this is a real wire shape.
+    [{ status: "error", message: "Member not found." }, OWNER_ROLE],
+  ];
+
+  for (const [member, role] of unproven) {
+    assert.equal(consoleTier(member, role), "none", JSON.stringify([member, role]));
+  }
+});
+
+test("a deleted staff membership is not staff", () => {
+  // `isSuperAdmin` excludes it server-side; the endpoint the browser reads does
+  // not, so it is excluded here to keep the two answers the same.
+  assert.equal(
+    consoleTier({ ...ADMIN_MEMBER, status: "deleted" }, OWNER_ROLE),
+    "none",
+  );
+});

package/utils/console-tier.ts

@@ -0,0 +1,67 @@
+/**
+ * WHICH SEVEN365 TIER THE SIGNED-IN PERSON IS, MIRRORED FROM THE SERVER'S RULE.
+ *
+ * Owner decision 9 splits Seven365 staff powers in two. Ordinary staff may view
+ * clients, set up subscriptions and manage promo codes. **Only the owner may
+ * suspend a client** - an action that stops that client's staff, residents and
+ * guards signing in.
+ *
+ * ## The server is the authority. This file only decides what to DRAW.
+ *
+ * `iservice365-core` `src/utils/super-admin.util.ts` answers the same question
+ * on the server, from the session id alone:
+ *
+ *   isSuperAdmin(userId)    -> a `members` row `{ type: "admin" }` whose role
+ *                              document is also `type: "admin"`
+ *   isPlatformOwner(userId) -> the same, AND that role has `default === true`
+ *
+ * `requirePlatformOwner` (`console-authz.util.ts`) runs `isPlatformOwner`
+ * inside `PATCH /api/organizations/:id/status` before it writes anything, and
+ * it reads the session - never the request body, never a header the browser
+ * chose. So a browser that lies to itself about its tier gets a button it can
+ * press and a 401 when it does. Hiding the control is a courtesy, not a lock.
+ *
+ * ## Why `role.default`, and why nothing here invents a new marker
+ *
+ * `default` is the only property of a platform-staff role that no API caller
+ * can set: `role.controller.ts` validates create/update with Joi object schemas
+ * that do not list it (Joi rejects unknown keys), `role.repo.ts` never writes
+ * it, and `MRole` defaults it to `false`. Exactly one server path sets it on an
+ * `admin`-typed role - `user.service.ts createDefaultUser()` at API boot. Every
+ * additional staff account is invited onto a role made through the admin app,
+ * which cannot carry it.
+ *
+ * ## Fail closed
+ *
+ * Anything this function cannot positively prove is `"none"`. A missing member
+ * row, a role that failed to load, a request that threw - all of them draw the
+ * ordinary-staff console with no suspend control, which is the recoverable
+ * mistake. The other direction is not.
+ *
+ * Both fields come back from endpoints the app already calls, unprojected:
+ * `GET /api/members/user/:id/app/admin` and `GET /api/roles/id/:id`. Nothing
+ * new had to be added to the API for this.
+ */
+
+export type TConsoleTier = "owner" | "staff" | "none";
+
+/**
+ * One divergence from the server, stated rather than hidden: `isSuperAdmin`
+ * matches `status: { $ne: "deleted" }` on the member row, and the endpoint the
+ * browser uses (`member.repo.ts getByUserIdType`) matches only `{ user, type }`.
+ * So a deleted staff membership can still be handed to this function. It is
+ * excluded here too, which keeps the drawn console and the server's answer the
+ * same for that case.
+ */
+export function consoleTier(
+  member: Record<string, any> | null | undefined,
+  role: Record<string, any> | null | undefined,
+): TConsoleTier {
+  if (member?.type !== "admin") return "none";
+  if (member?.status === "deleted") return "none";
+  if (role?.type !== "admin") return "none";
+
+  // `=== true` exactly as the server writes it. A role document that omits
+  // `default` (every role the admin app can create) is staff, not owner.
+  return role?.default === true ? "owner" : "staff";
+}