@7365admin1/layer-common 3.2.8-staging.210 → 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>