@7365admin1/layer-common 4.70.0 → 4.71.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 4.71.0
+
+### Minor Changes
+
+- fe27542: Members list and Members → Service Providers: a "Last active" column (last sign-in: "Today, 9:05 AM", "Yesterday, …", or the date; "—" until the person next signs in).
+
+## 4.70.1
+
+### Patch Changes
+
+- ba6869d: Create Role / Edit Role: a refused or failed save now shows "Couldn't save: <reason>" above the buttons (it was printed below the whole module list, out of sight). Catalogue snapshot test ties the dialog catalogues to core's full-catalogue create test.
+
 ## 4.70.0
 
 ### Minor Changes
@@ -1849,11 +1861,11 @@
   `utils/console-tier.ts` + `composables/useConsoleTier.ts` mirror the server's
   own rule from two endpoints the console already calls, unprojected:
 
-                                                                                                                                                                                                                                                                                                                GET /api/members/user/:user/app/admin    the Seven365 staff membership
-                                                                                                                                                                                                                                                                                                                GET /api/roles/id/:role                  that membership's role document
+                                                                                                                                                                                                                                                                                                                    GET /api/members/user/:user/app/admin    the Seven365 staff membership
+                                                                                                                                                                                                                                                                                                                    GET /api/roles/id/:role                  that membership's role document
 
-                                                                                                                                                                                                                                                                                                                owner  = member.type === "admin" && role.type === "admin" && role.default === true
-                                                                                                                                                                                                                                                                                                                staff  = member.type === "admin" && role.type === "admin"
+                                                                                                                                                                                                                                                                                                                    owner  = member.type === "admin" && role.type === "admin" && role.default === true
+                                                                                                                                                                                                                                                                                                                    staff  = member.type === "admin" && role.type === "admin"
 
   `role.default` is the marker because it is the only property of a platform
   staff role no API caller can set - `role.controller.ts` validates create and

package/components/MemberMain.vue

@@ -113,6 +113,9 @@
           <template #item.dateInvited="{ item }">
             {{ formatDateInvited(item.dateInvited) }}
           </template>
+          <template #item.lastLoginAt="{ item }">
+            <span data-test="member-last-active">{{ formatLastActive(item.lastLoginAt) }}</span>
+          </template>
           <template #item.action-table="{ item }">
             <!--
               `props.assignRole` belongs in this test. The menu's only item that
@@ -331,6 +334,7 @@ import {
   safeReturnTo,
   withCurrentRole,
 } from "../utils/role";
+import { formatLastActive } from "../utils/last-active";
 
 const props = defineProps({
   /** The design's page title. Every app that mounts this screen calls it
@@ -415,6 +419,10 @@ const props = defineProps({
 
         value: "dateInvited",
       },
+      {
+        title: "Last active",
+        value: "lastLoginAt",
+      },
       {
         title: "Action",
         value: "action-table",

package/components/MemberServiceProviders.vue

@@ -111,6 +111,9 @@
           <template #item.addedAt="{ item }">
             {{ spDay(item.addedAt) || "-" }}
           </template>
+          <template #item.lastLoginAt="{ item }">
+            <span data-test="sp-last-active">{{ formatLastActive(item.lastLoginAt) }}</span>
+          </template>
           <template #item.status="{ item }">
             <StatusChip
               :tone="item.status === 'active' ? 'ok' : 'neutral'"
@@ -155,6 +158,7 @@ import {
   serviceTypeOptions,
 } from "../utils/site-provider-members";
 import { spDay } from "../utils/sp-inviter-row";
+import { formatLastActive } from "../utils/last-active";
 import { saveBlob } from "../composables/useInventory";
 
 const props = defineProps({
@@ -195,6 +199,7 @@ const headers = [
   { title: "Service", key: "typeLabel", sortable: true },
   { title: "Role at this site", key: "role", sortable: true },
   { title: "Added", key: "addedAt", sortable: true },
+  { title: "Last active", key: "lastLoginAt", sortable: true },
   { title: "Status", key: "status", sortable: true },
   { title: "", key: "actions", sortable: false, align: "end" as const },
 ];

package/components/RolePermissionFormCreate.vue

@@ -216,17 +216,21 @@
             </div>
           </v-col>
 
-          <v-col cols="12" class="my-2">
-            <v-row no-gutters>
-              <v-col cols="12" class="text-center">
-                <span class="role-create__error">{{ message }}</span>
-              </v-col>
-            </v-row>
-          </v-col>
         </v-row>
       </v-form>
     </div>
 
+    <!--
+      WHY A SAVE FAILED, where it can be seen (owner, 2026-09-29: Wing Tai pressed
+      Submit on a 35-module role and "nothing happened"). The server's answer
+      used to be printed at the END of the scrolling list, below every module,
+      so a refused save looked like an ignored click. It now sits above the
+      buttons, outside the scroll, and is read out by screen readers.
+    -->
+    <div v-if="message" class="role-create__save-error" role="alert">
+      Couldn't save: {{ message }}
+    </div>
+
     <div class="role-create__footer">
       <AppButton
         v-if="disabledModuleCount > 0 || !showDisabledModules"
@@ -257,6 +261,11 @@ import {
 import useRole from "../composables/useRole";
 import useUtils from "../composables/useUtils";
 import useSite from "../composables/useSite";
+import { readApiError } from "../utils/subscription-form";
+
+/** Shown after "Couldn't save:" when the server gave no reason (network, timeout). */
+const SAVE_FALLBACK =
+  "the server could not be reached. Please check your connection and try again.";
 
 const props = defineProps({
   permissions: {
@@ -487,6 +496,7 @@ watch(
 
 async function submit() {
   disable.value = true;
+  message.value = "";
   try {
     await createRole({
       name: name.value,
@@ -500,9 +510,7 @@ async function submit() {
     // Same unguarded chain as the preview dialog had: on a network or timeout
     // failure `error.response` is undefined and the catch threw inside itself,
     // leaving the user with no message at all.
-    message.value =
-      error?.response?._data?.message ??
-      "Could not create this role. Please check your connection and try again.";
+    message.value = readApiError(error, SAVE_FALLBACK);
   } finally {
     disable.value = false;
   }
@@ -703,10 +711,15 @@ const isAllSelected = computed(() => {
   color: var(--text2);
 }
 
-.role-create__error {
+.role-create__save-error {
+  margin: 0 16px;
+  padding: 8px 12px;
+  border-radius: 6px;
   font-size: var(--fs-cell);
   font-weight: 600;
   color: var(--err);
+  background: var(--err-bg);
+  border: 1px solid var(--err-border, transparent);
 }
 
 /* The design's dialog footer. Deliberately not the shared

package/components/RolePermissionFormPreviewUpdate.vue

@@ -216,22 +216,23 @@
             </div>
           </v-col>
 
-          <!--
-            One message, once. This block used to appear twice -- inside
-            `v-if="edit"` and again unconditionally -- so a refused save printed
-            the server's sentence back to back.
-          -->
-          <v-col v-if="message" cols="12" class="my-2">
-            <v-row no-gutters>
-              <v-col cols="12" class="text-center">
-                <span class="role-perm__error">{{ message }}</span>
-              </v-col>
-            </v-row>
-          </v-col>
         </v-row>
       </v-form>
     </div>
 
+    <!--
+      WHY A SAVE FAILED - or why Submit is switched off - where it can be seen:
+      above the buttons, outside the scrolling list (owner, 2026-09-29: a refused
+      save printed below 35 modules looked like an ignored click). One message,
+      once; read out by screen readers.
+    -->
+    <div v-if="message" class="role-perm__save-error" role="alert">
+      Couldn't save: {{ message }}
+    </div>
+    <div v-else-if="edit && errorMessages" class="role-perm__save-error" role="alert">
+      {{ errorMessages }}
+    </div>
+
     <div class="role-perm__footer">
       <AppButton
         v-if="disabledModuleCount > 0 || showDisabledModules"
@@ -266,6 +267,7 @@ import {
 } from "../utils/permission-labels";
 import useRole from "../composables/useRole";
 import useUtils from "../composables/useUtils";
+import { readApiError } from "../utils/subscription-form";
 import {
   holdsPermission,
   withoutPermission,
@@ -692,8 +694,13 @@ const errorMessages = computed(() => {
 
 const { updatePermissionById } = useRole();
 
+/** Shown after "Couldn't save:" when the server gave no reason (network, timeout). */
+const SAVE_FALLBACK =
+  "the server could not be reached. Please check your connection and try again.";
+
 async function submit() {
   disable.value = true;
+  message.value = "";
   try {
     await updatePermissionById(props.id, definedModel.value);
     emit("success");
@@ -701,9 +708,7 @@ async function submit() {
     // `error.response` is undefined on a network or timeout failure, so the old
     // unguarded chain threw inside its own catch: nothing was shown, the button
     // came back enabled, and the save looked like it had simply been ignored.
-    message.value =
-      error?.response?._data?.message ??
-      "Could not save this role. Please check your connection and try again.";
+    message.value = readApiError(error, SAVE_FALLBACK);
   } finally {
     disable.value = false;
   }
@@ -779,6 +784,17 @@ async function submit() {
   color: var(--err);
 }
 
+.role-perm__save-error {
+  margin: 0 16px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: var(--fs-cell);
+  font-weight: 600;
+  color: var(--err);
+  background: var(--err-bg);
+  border: 1px solid var(--err-border, transparent);
+}
+
 /* The design's dialog footer. Deliberately not the shared
    `.screen-modal__footer` - that class is on the batch-D branch (#1150), not
    on this base, and a second copy in `screens.css` would collide with it. */

package/composables/useServiceProvider.ts

@@ -11,6 +11,8 @@ export type TSiteProviderMember = {
   role: string;
   status: string;
   addedAt?: string | null;
+  /** Last sign-in ("Last active"); absent until the next sign-in. */
+  lastLoginAt?: string | null;
   /** a subcontractor: the provider that brought its company onto the site */
   invitedVia?: string;
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.70.0",
+  "version": "4.71.0",
   "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/last-active.ts

@@ -0,0 +1,16 @@
+/**
+ * "Last active" on the Members lists: the last time the person signed in
+ * (server field `lastLoginAt`). Never signed in since the field existed -> "—".
+ */
+export function formatLastActive(value?: string | Date | null, now: Date = new Date()): string {
+  if (!value) return "—";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "—";
+
+  const time = date.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true });
+  const dayStart = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+  const days = Math.round((dayStart(now) - dayStart(date)) / 86400000);
+  if (days === 0) return `Today, ${time}`;
+  if (days === 1) return `Yesterday, ${time}`;
+  return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+}