@7365admin1/layer-common 3.2.8-staging.204 → 3.2.8-staging.206

package/components/ClientMain.vue

@@ -101,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>
@@ -161,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)">
@@ -297,6 +319,7 @@ 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'
@@ -312,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 = [
@@ -947,6 +973,17 @@ tbody td { vertical-align: middle; }
 /* 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 {