@7365admin1/layer-common 3.2.8-staging.203 → 3.2.8-staging.205

package/components/ClientDetailForm.vue

@@ -79,7 +79,17 @@
       a separate piece of work with a real endpoint behind it.
     -->
     <section class="section">
-      <h3>Subscription Information</h3>
+      <div class="section-head">
+        <h3>Subscription Information</h3>
+        <!--
+          The values stay read-only - they are what the client's record says.
+          Changing them is a real form with real rules behind it, so this opens
+          that rather than pretending a dropdown here would save anything.
+        -->
+        <button class="btn-manage-sub" @click="$emit('manage-subscription')">
+          {{ subscription.state === 'none' ? 'Set up subscription' : 'Edit subscription' }}
+        </button>
+      </div>
 
       <p v-if="subscription.state === 'none'" class="sub-none">
         No subscription set up for this client yet.
@@ -234,6 +244,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: 'cancel'): void
   (e: 'submit', payload: Record<string, any>): void
+  (e: 'manage-subscription'): void
 }>()
 
 /* ── CONSTANTS ── */
@@ -490,6 +501,29 @@ watch(
 .section {
   margin-bottom: 26px;
 }
+.section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.section-head h3 {
+  margin-bottom: 0;
+}
+.btn-manage-sub {
+  padding: 6px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  border: 1px solid var(--border);
+  border-radius: var(--r-pill);
+  background: var(--card);
+  color: var(--accent-text);
+  cursor: pointer;
+  white-space: nowrap;
+  margin-bottom: 14px;
+}
+.btn-manage-sub:hover { background: var(--hover); }
 .section h3 {
   font-size: 15px;
   font-weight: 700;

package/components/ClientMain.vue

@@ -56,6 +56,11 @@
       <div class="table-card">
 
         <!-- Toolbar row -->
+        <div v-if="savedNote" class="saved-note" role="status">
+          {{ savedNote }}
+          <button class="saved-note-close" @click="savedNote = ''">&times;</button>
+        </div>
+
         <div class="toolbar">
           <div class="toolbar-left">
             <button class="refresh-btn" :class="{ spinning: loading }" @click="handleRefresh">
@@ -96,23 +101,48 @@
             <thead>
               <tr>
                 <th>Organization Name</th>
-                <th>Email</th>
+                <th>Nature</th>
                 <th>Sites</th>
                 <th>Subscription</th>
                 <th>Billing Cycle</th>
                 <th>Start Date</th>
                 <th>End Date</th>
-                <th>Status</th>
+                <!--
+                  NO STATUS COLUMN. The table is fetched with the status the
+                  chosen tab asks for (`fetchOrgs(tab)` -> `status` -> the
+                  aggregation's `$match`), so on the Active tab every row said
+                  "active" and on Suspended every row said "suspended" - a
+                  column that repeated the tab the reader was standing on and
+                  could never say anything else. Its 138px is what pays for the
+                  Nature column, and the table now fits its viewport instead of
+                  scrolling sideways.
+                -->
                 <th>Actions</th>
               </tr>
             </thead>
             <tbody>
               <tr v-if="!loading && items.length === 0">
-                <td colspan="9" class="empty">No records found.</td>
+                <td colspan="8" class="empty">No records found.</td>
               </tr>
               <tr v-for="item in items" :key="item._id">
-                <td class="td-name">{{ item.name }}</td>
-                <td class="td-muted">{{ item.email }}</td>
+                <!--
+                  WHO THEY ARE, then WHAT KIND OF BUSINESS. The email used to
+                  hold a column of its own; it identifies the same client the
+                  name does, so it sits under the name and the column it was
+                  using goes to the nature - which nothing on this screen said
+                  before, and which is the one thing the admin app's
+                  Organizations list showed that this one did not.
+                -->
+                <td class="td-name">
+                  {{ item.name }}
+                  <span class="td-name-sub">{{ item.email }}</span>
+                </td>
+                <!-- A blank cell reads as a broken screen, so the one case
+                     with nothing to print says so. `--text2`, not `--muted`:
+                     this is text to be read, and `--muted` measures 3.24:1. -->
+                <td :class="{ 'td-nature-none': !item.nature }">
+                  {{ item.nature ? formatNature(item.nature) : 'Not recorded' }}
+                </td>
                 <td>
                   <span class="sites-badge">{{ item.sites }}</span>
                 </td>
@@ -123,6 +153,9 @@
                 -->
                 <td v-if="item.sub.state === 'none'" colspan="4" class="sub-none">
                   No subscription set up
+                  <button class="sub-setup-btn" @click="openSubscription(item)">
+                    Set up subscription
+                  </button>
                 </td>
 
                 <template v-else>
@@ -153,9 +186,6 @@
                     </span>
                   </td>
                 </template>
-                <td>
-                  <span :class="['status-chip', item.status]">{{ item.status }}</span>
-                </td>
                 <td>
                   <div class="action-wrap">
                     <button class="dots-btn" @click.stop="toggleMenu(item._id, $event)">
@@ -212,9 +242,24 @@
         :client="selectedClient"
         @cancel="cancelView"
         @submit="submitClient"
+        @manage-subscription="openSubscription(selectedClient)"
       />
     </div>
 
+    <!--
+      SET UP OR CHANGE A CLIENT'S SUBSCRIPTION. Opened from the row that has
+      none, from the row menu, or from the client's own drawer - all three land
+      here, so there is one form and one set of rules behind them.
+    -->
+    <ClientSubscriptionForm
+      v-if="subscriptionClient"
+      :org-id="subscriptionClient._id"
+      :client-name="subscriptionClient.name"
+      :site-count="subscriptionClient.sites"
+      @cancel="subscriptionClient = null"
+      @saved="onSubscriptionSaved"
+    />
+
     <div v-if="dialog" class="overlay" @click.self="dialog = false">
       <div class="dialog-box">
         <InvitationClientForm title="Invite Client" @success="handleSuccess" @cancel="dialog = false" />
@@ -247,6 +292,9 @@
         <button class="dd-item" @click="viewClient(activeMenuItem)">
           View Organization
         </button>
+        <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"
@@ -271,8 +319,10 @@ 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 useUtils from '../composables/useUtils'
 import InvitationClientForm from './InvitationClientForm.vue'
 import ClientDetailForm from './ClientDetailForm.vue'
+import ClientSubscriptionForm from './ClientSubscriptionForm.vue'
 import useCustomerSite from '../composables/useCustomerSite'
 import { describeClientSubscription } from '../utils/client-subscription'
 
@@ -285,6 +335,9 @@ const { getOrganizationsWithSubscription, updateStatus } = useOrg()
 const { getVerifications, cancelUserInvitation } = useVerification()
 const { getCustomerSites: getCustomerSitesByOrgId } = useCustomerSite()
 const { getRoleById } = useRole()
+// 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()
 
 /* ── CONSTANTS ── */
 const APP_LIST = [
@@ -321,6 +374,10 @@ const roleCache       = ref<Record<string, string>>({})
 const viewMode        = ref<'table' | 'detail'>('table')
 const selectedClient  = ref<any>(null)
 
+/* subscription set-up / edit */
+const subscriptionClient = ref<any>(null)
+const savedNote          = ref('')
+
 /* suspend confirmation */
 const confirmSuspendItem    = ref<any>(null)
 const confirmSuspendLoading = ref(false)
@@ -372,6 +429,30 @@ async function activateClient(item: any) {
   }
 }
 
+/* ── SUBSCRIPTION ── */
+function openSubscription(item: any) {
+  if (!item?._id) return
+  savedNote.value = ''
+  subscriptionClient.value = item
+  closeMenu()
+}
+
+async function onSubscriptionSaved(message: string) {
+  subscriptionClient.value = null
+  savedNote.value = 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()
+
+  // The drawer reads the same row, so if it is open it has to be handed the
+  // refreshed one - otherwise it would still be showing what was true before
+  // the save.
+  if (selectedClient.value?._id) {
+    selectedClient.value =
+      items.value.find(i => i._id === selectedClient.value._id) ?? selectedClient.value
+  }
+}
+
 /* ── SUSPEND CONFIRMATION ── */
 function askSuspend(item: any) {
   confirmSuspendItem.value = item
@@ -850,10 +931,59 @@ tbody td { vertical-align: middle; }
 
 /* A client nobody has set up yet: plainly stated, not shouted, not a dash. */
 .sub-none { color: var(--text2); font-size: 13px; }
+/* The way in, said next to the state it fixes. It sits in a cell that already
+   spans four columns, so it adds no width to the table. */
+.sub-setup-btn {
+  margin-left: 10px;
+  padding: 3px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--card);
+  color: var(--accent-text);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.sub-setup-btn:hover { background: var(--hover); }
+
+.saved-note {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin: 12px 16px 0;
+  padding: 9px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--ok-bg);
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
+}
+.saved-note-close {
+  border: none;
+  background: none;
+  color: var(--text2);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+}
 .sub-label { font-size: 13px; }
 /* Owner decision 8: an end date has passed and somebody has to look at it. */
 .needs-attention { color: var(--warn); font-weight: 500; }
 .td-name { font-weight: 500; color: var(--text); }
+/* The email, second line of the same cell. `--text2` is the design's reading
+   token for secondary text; `--muted`, which the email used while it had its
+   own column, is a decoration weight and measures below AA as body copy. */
+.td-nature-none { color: var(--text2); }
+.td-name-sub {
+  display: block;
+  margin-top: 2px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--text2);
+}
 .td-muted { color: var(--muted); font-size: 13px; }
 
 .sites-badge {