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

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 {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.8-staging.204",
+  "version": "3.2.8-staging.205",
   "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-nature.test.ts

@@ -0,0 +1,77 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+
+/**
+ * THE CLIENT LIST'S "NATURE" COLUMN.
+ *
+ * The column prints `formatNature(org.nature)`, the same helper the admin app's
+ * Organizations list uses - so the two screens say a nature the same way while
+ * both exist, and the console keeps saying it after that screen is retired.
+ *
+ * `nature` is a REQUIRED enum on the organisation model
+ * (`iservice365-core/src/models/organization.model.ts` `allowedNatures`), so
+ * what this asserts is that every legal value comes out as something a person
+ * reads - not a raw `security_agency`.
+ *
+ * `useUtils()` is a Nuxt composable: it opens with `useState("search", ...)`,
+ * which only exists inside a Nuxt app. One stub makes the factory constructible
+ * here; `formatNature` itself touches nothing but its argument.
+ */
+(globalThis as any).useState = (_key: string, init: () => any) => ({
+  value: init(),
+});
+
+const { formatNature } = (await import("../composables/useUtils.ts")).default();
+
+/** `allowedNatures`, copied from the core model, in the model's own order. */
+const ALLOWED_NATURES = [
+  "real_estate_developer",
+  "property_management_agency",
+  "security_agency",
+  "cleaning_services",
+  "mechanical_electrical_services",
+  "landscaping_services",
+  "pest_control_services",
+  "pool_maintenance_services",
+];
+
+test("every nature the organisation model allows prints as words", () => {
+  assert.deepEqual(
+    ALLOWED_NATURES.map((v) => formatNature(v)),
+    [
+      "Real Estate Developer",
+      "Property Management Agency",
+      "Security Agency",
+      "Cleaning Services",
+      "Mechanical Electrical Services",
+      "Landscaping Services",
+      "Pest Control Services",
+      "Pool Maintenance Services",
+    ],
+  );
+});
+
+test("no allowed nature is left as its stored value", () => {
+  for (const value of ALLOWED_NATURES) {
+    const label = formatNature(value);
+    assert.notEqual(label, value, `${value} was printed raw`);
+    assert.ok(!label.includes("_"), `${value} kept an underscore`);
+  }
+});
+
+test("an organisation with no nature yields nothing, so the column says so itself", () => {
+  // The cell renders `nature ? formatNature(nature) : 'Not recorded'`. This is
+  // the half that decides the fallback is needed: the helper answers "" rather
+  // than a label, and a blank cell reads as a broken screen.
+  assert.equal(formatNature(""), "");
+  assert.equal(formatNature(undefined as unknown as string), "");
+  assert.equal(formatNature(null as unknown as string), "");
+});
+
+test("a value the model does not list is still printed, not swallowed", () => {
+  // `customer.service.ts` creates property-owner orgs with `property_owner`,
+  // which is NOT in `allowedNatures`. Those rows appear in the Client List, and
+  // the column showing what they are is the point - so an unknown value is
+  // formatted like any other rather than blanked.
+  assert.equal(formatNature("property_owner"), "Property Owner");
+});