@7365admin1/layer-common 4.69.0 → 4.70.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @iservice365/layer-common
 
+## 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
+
+- 13bbaf1: Inventory roles: one permission per job (view stock, request items, record usage, approve requests, issue and receive stock, view reports, inventory admin) with plain names in the role editor, and one-click presets ("Staff: request & use", "Supervisor", "Storekeeper", "Inventory admin"). The Inventory screen shows only the tabs and buttons the role allows.
+
+## 4.69.1
+
+### Patch Changes
+
+- 3eaaf7e: Inventory supplier picker: one "Add ... as a new supplier" row (it showed twice when nothing matched).
+
 ## 4.69.0
 
 ### Minor Changes
@@ -1837,11 +1855,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/InventoryItemDetail.vue

@@ -18,9 +18,9 @@
           </div>
         </div>
 
-        <div class="d-flex flex-wrap ga-2 mb-4" v-if="store.access.canManage">
-          <v-btn class="text-none screen-btn-ghost" variant="outlined" prepend-icon="mdi-pencil-outline" @click="emit('edit', item)">Edit item</v-btn>
-          <v-btn class="text-none screen-btn-ghost" variant="outlined" prepend-icon="mdi-counter" @click="counting = !counting">Stock count</v-btn>
+        <div class="d-flex flex-wrap ga-2 mb-4" v-if="ctl.editItem || ctl.count">
+          <v-btn v-if="ctl.editItem" class="text-none screen-btn-ghost" variant="outlined" prepend-icon="mdi-pencil-outline" @click="emit('edit', item)">Edit item</v-btn>
+          <v-btn v-if="ctl.count" class="text-none screen-btn-ghost" variant="outlined" prepend-icon="mdi-counter" @click="counting = !counting">Stock count</v-btn>
         </div>
 
         <v-form v-if="counting" ref="countForm" class="mb-4">
@@ -78,12 +78,14 @@ import useInventory from "../composables/useInventory";
 import useFile from "../composables/useFile";
 import useUtils from "../composables/useUtils";
 import { inventoryItemMeta } from "../utils/inventory-store-label";
+import { inventoryControls } from "../utils/inventory-presets";
 
 const show = defineModel<boolean>({ default: false });
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },
   item: { type: Object as PropType<TInventoryItem | null>, default: null },
 });
+const ctl = computed(() => inventoryControls(props.store.access));
 const emit = defineEmits(["edit", "done"]);
 
 const { getTransactions, count, typeLabels } = useInventory();

package/components/InventoryMain.vue

@@ -93,22 +93,22 @@
         <v-window-item value="stock">
           <InventoryStockTab :store="store" :site-id="siteId" :sites="storeSites" @changed="refreshCounts" />
         </v-window-item>
-        <v-window-item v-if="store.access.canRequest && !store.access.canManage" value="mine">
+        <v-window-item v-if="ctl.tabs.mine" value="mine">
           <InventoryMyStockTab :store="store" :site-id="siteId" :sites="storeSites" @changed="refreshCounts" />
         </v-window-item>
-        <v-window-item value="requests">
+        <v-window-item v-if="ctl.tabs.requests" value="requests">
           <InventoryRequestsTab :store="store" :site-id="siteId" @changed="refreshCounts" />
         </v-window-item>
-        <v-window-item v-if="store.access.canApprove" value="technicians">
+        <v-window-item v-if="ctl.tabs.people" value="technicians">
           <InventoryTechniciansTab :store="store" @changed="refreshCounts" />
         </v-window-item>
-        <v-window-item v-if="isStaff" value="reports">
+        <v-window-item v-if="ctl.tabs.reports" value="reports">
           <InventoryReportsTab :store="store" :sites="storeSites" />
         </v-window-item>
-        <v-window-item v-if="isStaff" value="suppliers">
+        <v-window-item v-if="ctl.tabs.suppliers" value="suppliers">
           <InventorySuppliersTab :store="store" />
         </v-window-item>
-        <v-window-item v-if="store.access.canManage" value="settings">
+        <v-window-item v-if="ctl.tabs.settings" value="settings">
           <InventorySettingsTab :store="store" :org-sites="orgSites" @saved="loadStores" />
         </v-window-item>
       </v-window>
@@ -124,6 +124,7 @@ import useWorkerTerm from "../composables/useWorkerTerm";
 import useSite from "../composables/useSite";
 import useUtils from "../composables/useUtils";
 import { inventoryStoreLabel, inventorySuppliesText } from "../utils/inventory-store-label";
+import { inventoryControls } from "../utils/inventory-presets";
 
 const props = defineProps({
   orgId: { type: String, required: true },
@@ -156,11 +157,6 @@ function notify(text: string, color = "success") {
 }
 provide("inventoryNotify", notify);
 
-const isStaff = computed(() => {
-  const a = store.value?.access;
-  return !!a && (a.canManage || a.canApprove || (a.canView && !a.canRequest));
-});
-
 const storeSites = computed(() =>
   (store.value?.sites ?? []).map((id) => ({
     _id: id,
@@ -183,17 +179,20 @@ const subtitle = computed(() => {
 // Who holds this store's stock: the property manager's store lends to service providers' workers.
 const worker = useWorkerTerm({ providers: true });
 
+const ctl = computed(() => inventoryControls(store.value?.access));
+
 const tabs = computed(() => {
   const a = store.value?.access;
   if (!a) return [];
   return [
     { value: "stock", label: "Stock" },
-    ...(a.canRequest && !a.canManage ? [{ value: "mine", label: "My Stock" }] : []),
-    { value: "requests", label: a.canApprove ? "Requests" : "My Requests", badge: a.canApprove ? pendingCount.value : 0 },
-    ...(a.canApprove ? [{ value: "technicians", label: worker.many }] : []),
-    ...(isStaff.value ? [{ value: "reports", label: "Reports" }] : []),
-    ...(isStaff.value ? [{ value: "suppliers", label: "Suppliers" }] : []),
-    ...(a.canManage ? [{ value: "settings", label: "Settings" }] : []),
+    // Hide, never grey: each tab only for the job that uses it (API-core decides `access`).
+    ...(ctl.value.tabs.mine ? [{ value: "mine", label: "My Stock" }] : []),
+    ...(ctl.value.tabs.requests ? [{ value: "requests", label: a.canApprove ? "Requests" : "My Requests", badge: a.canApprove ? pendingCount.value : 0 }] : []),
+    ...(ctl.value.tabs.people ? [{ value: "technicians", label: worker.many }] : []),
+    ...(ctl.value.tabs.reports ? [{ value: "reports", label: a.canReports ? "Reports" : "Usage check" }] : []),
+    ...(ctl.value.tabs.suppliers ? [{ value: "suppliers", label: "Suppliers" }] : []),
+    ...(ctl.value.tabs.settings ? [{ value: "settings", label: "Settings" }] : []),
   ];
 });
 

package/components/InventoryMyStockTab.vue

@@ -3,13 +3,13 @@
     <div class="d-flex flex-wrap ga-2 align-center mb-3">
       <div class="text-body-2 text-medium-emphasis">Stock you have taken from the store: how many are left, and how many you used this month.</div>
       <v-spacer />
-      <v-btn class="text-none screen-btn-primary" variant="flat" prepend-icon="mdi-cart-arrow-down" @click="showRequest = true">Request Stock</v-btn>
+      <v-btn v-if="ctl.request" class="text-none screen-btn-primary" variant="flat" prepend-icon="mdi-cart-arrow-down" @click="showRequest = true">Request Stock</v-btn>
     </div>
 
     <v-progress-linear v-if="loading" indeterminate color="primary" />
     <AppCard v-else-if="!holdings.length" class="pa-6 text-center">
       <div class="text-body-1 mb-1">You are not holding any stock.</div>
-      <div class="text-body-2 text-medium-emphasis">Request stock from the store. Once approved, it shows here and you can record where you used it.</div>
+      <div class="text-body-2 text-medium-emphasis">{{ ctl.request ? "Request stock from the store. Once approved, it shows here" : "Stock the storekeeper hands you shows here" }}{{ ctl.recordUsage ? " and you can record where you used it." : "." }}</div>
     </AppCard>
 
     <v-row v-else dense>
@@ -23,7 +23,7 @@
             <div class="font-weight-medium">{{ h.itemName }}</div>
             <div class="text-body-2">{{ h.qty }} {{ h.unit }} left · {{ h.usedThisMonth ?? 0 }} used this month</div>
           </div>
-          <v-btn v-if="h.qty > 0" class="text-none screen-btn-primary" variant="flat" size="small" @click="use(h)">Record usage</v-btn>
+          <v-btn v-if="h.qty > 0 && ctl.recordUsage" class="text-none screen-btn-primary" variant="flat" size="small" @click="use(h)">Record usage</v-btn>
         </AppCard>
       </v-col>
     </v-row>
@@ -67,12 +67,14 @@ import useInventory from "../composables/useInventory";
 import useFile from "../composables/useFile";
 import useUtils from "../composables/useUtils";
 import useLocalAuth from "../composables/useLocalAuth";
+import { inventoryControls } from "../utils/inventory-presets";
 
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },
   siteId: { type: String, required: true },
   sites: { type: Array as PropType<{ _id: string; name: string }[]>, default: () => [] },
 });
+const ctl = computed(() => inventoryControls(props.store.access));
 const emit = defineEmits(["changed"]);
 
 const api = useInventory();

package/components/InventoryReportsTab.vue

@@ -2,10 +2,10 @@
   <div>
     <div class="d-flex flex-wrap ga-3 align-center mb-3">
       <v-btn-toggle v-model="report" mandatory density="comfortable" variant="outlined" divided>
-        <v-btn value="movement" class="text-none">Stock Movement</v-btn>
+        <v-btn v-if="ctl.fullReports" value="movement" class="text-none">Stock Movement</v-btn>
         <v-btn value="usage" class="text-none">Usage</v-btn>
-        <v-btn value="technicians" class="text-none">{{ worker.many }}</v-btn>
-        <v-btn value="purchases" class="text-none">Purchases</v-btn>
+        <v-btn v-if="ctl.fullReports" value="technicians" class="text-none">{{ worker.many }}</v-btn>
+        <v-btn v-if="ctl.fullReports" value="purchases" class="text-none">Purchases</v-btn>
       </v-btn-toggle>
       <v-select
         v-if="report === 'purchases'"
@@ -43,7 +43,7 @@
       />
       <v-checkbox v-if="report === 'usage'" v-model="uncheckedOnly" label="Not checked yet" density="compact" hide-details class="flex-grow-0" />
       <v-spacer />
-      <v-btn class="text-none screen-btn-ghost" variant="outlined" prepend-icon="mdi-file-excel-outline" :loading="exporting" @click="exportExcel">
+      <v-btn v-if="ctl.fullReports" class="text-none screen-btn-ghost" variant="outlined" prepend-icon="mdi-file-excel-outline" :loading="exporting" @click="exportExcel">
         Export Excel
       </v-btn>
     </div>
@@ -143,11 +143,13 @@ import useInventory, { saveBlob } from "../composables/useInventory";
 import useWorkerTerm, { workerAppKey } from "../composables/useWorkerTerm";
 import useUtils from "../composables/useUtils";
 import useFile from "../composables/useFile";
+import { inventoryControls } from "../utils/inventory-presets";
 
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },
   sites: { type: Array as PropType<{ _id: string; name: string }[]>, default: () => [] },
 });
+const ctl = computed(() => inventoryControls(props.store.access));
 
 const api = useInventory();
 const { standardFormatDate } = useUtils();
@@ -163,7 +165,8 @@ const appSlug = workerAppKey();
 
 const now = new Date();
 const month = ref(`${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`);
-const report = ref<"movement" | "usage" | "technicians" | "purchases">("movement");
+// An approver without `view-reports` gets only the usage check screen.
+const report = ref<"movement" | "usage" | "technicians" | "purchases">(ctl.value.fullReports ? "movement" : "usage");
 const span = ref<"month" | "year">("year");
 const site = ref("");
 const locationType = ref("");
@@ -176,7 +179,7 @@ const loading = ref(false);
 const exporting = ref(false);
 const checking = ref<"" | "on" | "off">("");
 
-const canCheck = computed(() => props.store.access.canApprove || props.store.access.canManage);
+const canCheck = computed(() => ctl.value.checkUsage);
 const money = (v: number) => (v === undefined || v === null ? "—" : `$${Number(v).toFixed(2)}`);
 const barWidth = (v: number) => {
   const max = Math.max(...purchases.byMonth.map((m) => m.totalCost), 0);

package/components/InventoryRequestsTab.vue

@@ -8,7 +8,7 @@
         <v-btn value="" class="text-none">All</v-btn>
       </v-btn-toggle>
       <v-spacer />
-      <v-btn v-if="store.access.canRequest && !store.access.canManage" class="text-none screen-btn-primary" variant="flat" prepend-icon="mdi-cart-arrow-down" @click="showRequest = true">
+      <v-btn v-if="ctl.request" class="text-none screen-btn-primary" variant="flat" prepend-icon="mdi-cart-arrow-down" @click="showRequest = true">
         Request Stock
       </v-btn>
     </div>
@@ -27,7 +27,7 @@
         <v-chip v-if="store.sites.length > 1 && r.siteName" size="small" variant="outlined" prepend-icon="mdi-office-building-outline">For {{ r.siteName }}</v-chip>
         <v-spacer />
         <template v-if="r.status === 'pending'">
-          <v-btn v-if="store.access.canApprove" class="text-none screen-btn-primary" variant="flat" @click="openDecision(r)">Review</v-btn>
+          <v-btn v-if="ctl.review" class="text-none screen-btn-primary" variant="flat" @click="openDecision(r)">Review</v-btn>
           <v-btn v-else-if="isMine(r)" class="text-none screen-btn-ghost" variant="outlined" :loading="busyId === r._id" @click="cancel(r)">Cancel</v-btn>
         </template>
       </div>
@@ -90,11 +90,13 @@ import useInventory from "../composables/useInventory";
 import useUtils from "../composables/useUtils";
 import { REQUEST_STATUS, requestLineText, requestOutcomeText } from "../utils/inventory-request-text";
 import useLocalAuth from "../composables/useLocalAuth";
+import { inventoryControls } from "../utils/inventory-presets";
 
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },
   siteId: { type: String, required: true },
 });
+const ctl = computed(() => inventoryControls(props.store.access));
 const emit = defineEmits(["changed"]);
 
 const api = useInventory();

package/components/InventoryStockTab.vue

@@ -10,7 +10,7 @@
     </v-row>
 
     <div class="d-flex flex-wrap ga-2 align-center mb-3">
-      <v-menu v-if="store.access.canManage && !storeEmpty">
+      <v-menu v-if="ctl.receive && !storeEmpty">
         <template #activator="{ props: menu }">
           <v-btn v-bind="menu" class="text-none screen-btn-primary" variant="flat" prepend-icon="mdi-truck-delivery-outline" append-icon="mdi-chevron-down">Receive Stock</v-btn>
         </template>
@@ -19,13 +19,13 @@
           <v-list-item prepend-icon="mdi-file-excel-outline" title="Import deliveries from Excel" @click="showReceiveImport = true" />
         </v-list>
       </v-menu>
-      <v-btn v-if="store.access.canApprove && !storeEmpty" class="text-none screen-btn-primary" variant="flat" prepend-icon="mdi-hand-extended-outline" @click="open('issue')">
+      <v-btn v-if="ctl.issue && !storeEmpty" class="text-none screen-btn-primary" variant="flat" prepend-icon="mdi-hand-extended-outline" @click="open('issue')">
         Issue Stock
       </v-btn>
-      <v-btn v-if="store.access.canRequest && !store.access.canManage" class="text-none screen-btn-primary" variant="flat" prepend-icon="mdi-cart-arrow-down" @click="open('request')">
+      <v-btn v-if="ctl.request" class="text-none screen-btn-primary" variant="flat" prepend-icon="mdi-cart-arrow-down" @click="open('request')">
         Request Stock
       </v-btn>
-      <v-menu v-if="store.access.canManage">
+      <v-menu v-if="ctl.addItems">
         <template #activator="{ props: menu }">
           <v-btn v-bind="menu" class="text-none" :class="storeEmpty ? 'screen-btn-primary' : 'screen-btn-ghost'" :variant="storeEmpty ? 'flat' : 'outlined'" append-icon="mdi-chevron-down">Add Items</v-btn>
         </template>
@@ -103,12 +103,14 @@ import useInventory from "../composables/useInventory";
 import useFile from "../composables/useFile";
 import useUtils from "../composables/useUtils";
 import { inventoryItemMeta } from "../utils/inventory-store-label";
+import { inventoryControls } from "../utils/inventory-presets";
 
 const props = defineProps({
   store: { type: Object as PropType<TInventoryStore>, required: true },
   siteId: { type: String, required: true },
   sites: { type: Array as PropType<{ _id: string; name: string }[]>, default: () => [] },
 });
+const ctl = computed(() => inventoryControls(props.store.access));
 const emit = defineEmits(["changed"]);
 
 const { getItems } = useInventory();
@@ -132,7 +134,7 @@ const headers = computed(() => [
   { title: "Item", value: "name" },
   { title: "In store", value: "onHand" },
   { title: "Low stock alert at", value: "reorderLevel" },
-  ...(props.store.access.canManage || props.store.access.canApprove ? [{ title: "Unit price", value: "unitCost" }] : []),
+  ...(ctl.value.unitPrice ? [{ title: "Unit price", value: "unitCost" }] : []),
 ]);
 
 const money = (v: number) => `$${Number(v).toFixed(2)}`;

package/components/InventorySupplierField.vue

@@ -15,16 +15,14 @@
       aria-label="Supplier — pick from your list or type a new one"
       @blur="snap"
     >
+      <!-- The Add row lives in #append-item only: it also renders when nothing matches, so a second copy here showed twice. -->
       <template #no-data>
-        <v-list-item v-if="typed" prepend-icon="mdi-plus" @click="model = typed">
-          <v-list-item-title>Add "{{ typed }}" as a new supplier</v-list-item-title>
-        </v-list-item>
-        <v-list-item v-else>
+        <v-list-item v-if="!typed">
           <v-list-item-title class="text-medium-emphasis">No suppliers yet — type a name to add one</v-list-item-title>
         </v-list-item>
       </template>
       <template v-if="typed && !listedSupplierName(typed, names)" #append-item>
-        <v-divider />
+        <v-divider v-if="names.length" />
         <v-list-item prepend-icon="mdi-plus" @click="model = typed">
           <v-list-item-title>Add "{{ typed }}" as a new supplier</v-list-item-title>
         </v-list-item>

package/components/InventoryTechniciansTab.vue

@@ -13,7 +13,7 @@
       <div class="d-flex align-center mb-2">
         <div class="font-weight-medium">{{ g.holderName || "Unnamed" }}</div>
         <v-spacer />
-        <v-btn class="text-none screen-btn-ghost" variant="outlined" size="small" prepend-icon="mdi-keyboard-return" @click="openReturn(g)">Receive return</v-btn>
+        <v-btn v-if="ctl.takeReturn" class="text-none screen-btn-ghost" variant="outlined" size="small" prepend-icon="mdi-keyboard-return" @click="openReturn(g)">Receive return</v-btn>
       </div>
       <div class="d-flex flex-wrap ga-2">
         <v-chip v-for="h in g.items" :key="h._id" variant="tonal">{{ h.itemName }}: {{ h.qty }} {{ h.unit }} left · {{ h.usedThisMonth ?? 0 }} used this month</v-chip>
@@ -34,8 +34,10 @@
 
 <script setup lang="ts">
 import useInventory from "../composables/useInventory";
+import { inventoryControls } from "../utils/inventory-presets";
 
 const props = defineProps({ store: { type: Object as PropType<TInventoryStore>, required: true } });
+const ctl = computed(() => inventoryControls(props.store.access));
 const emit = defineEmits(["changed"]);
 
 const { getHoldings } = useInventory();

package/components/RolePermissionFormCreate.vue

@@ -171,6 +171,12 @@
 
                 <!-- Expanded checkboxes for the one open module -->
                 <template v-if="isCategoryOpen(String(resourceKey))">
+                  <RolePermissionPresets
+                    :resource="String(resourceKey)"
+                    :selected="permState.selected"
+                    :offered="Object.keys(safePermissions[String(resourceKey)] ?? {})"
+                    @apply="applyPreset"
+                  />
                   <template
                     v-for="[actionKey, action] in Object.entries(actions || {})"
                     :key="actionKey"
@@ -198,7 +204,7 @@
                       <v-list-item-title
                         class="text-capitalize role-create__row-title"
                       >
-                        {{ formatActionLabel(String(actionKey)) }}
+                        {{ action.label || formatActionLabel(String(actionKey)) }}
                       </v-list-item-title>
                       <v-list-item-subtitle class="role-create__row-sub">
                         {{ action.description }}
@@ -210,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"
@@ -251,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: {
@@ -391,6 +406,11 @@ function toggleCategory(resource: string, value: boolean | null) {
   }
 }
 
+/** A module preset replaced that module's ticks (see RolePermissionPresets). */
+function applyPreset(selected: string[]) {
+  permState.value = { selected, enabled: permState.value.enabled };
+}
+
 function toggleAction(resource: string, action: string, value: boolean | null) {
   if (value !== true && value !== false) return;
   const key = `${resource}:${action}`;
@@ -476,6 +496,7 @@ watch(
 
 async function submit() {
   disable.value = true;
+  message.value = "";
   try {
     await createRole({
       name: name.value,
@@ -489,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;
   }
@@ -692,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

@@ -132,6 +132,13 @@
                   </template>
                 </v-list-item>
                 <template v-if="isCategoryOpen(String(resourceKey))">
+                  <RolePermissionPresets
+                    :resource="String(resourceKey)"
+                    :selected="definedModel"
+                    :offered="Object.keys(safePermissions[String(resourceKey)] ?? {})"
+                    :disabled="!edit"
+                    @apply="definedModel = $event"
+                  />
                   <template
                     v-for="[actionKey, action] in Object.entries(actions || {})"
                     :key="actionKey"
@@ -159,7 +166,7 @@
                         />
                       </template>
                       <v-list-item-title class="text-capitalize role-perm__row-title">
-                        {{ formatActionLabel(String(actionKey)) }}
+                        {{ action.label || formatActionLabel(String(actionKey)) }}
                       </v-list-item-title>
                       <v-list-item-subtitle class="role-perm__row-sub">
                         {{ action.description }}
@@ -209,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"
@@ -259,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,
@@ -685,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");
@@ -694,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;
   }
@@ -772,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/components/RolePermissionPresets.vue

@@ -0,0 +1,62 @@
+<template>
+  <!--
+    One-click presets for a module (inventory today): "Staff: request & use",
+    "Supervisor", "Storekeeper", "Inventory admin". A preset REPLACES this
+    module's ticks and leaves every other module alone; the ticks below stay
+    editable afterwards.
+  -->
+  <div v-if="presets.length" class="role-presets px-4 pt-2 pb-1">
+    <div class="role-presets__label mb-1">Quick set</div>
+    <div class="d-flex flex-wrap ga-2">
+      <v-tooltip v-for="p in presets" :key="p.key" :text="p.description" location="top">
+        <template #activator="{ props: tip }">
+          <v-chip
+            v-bind="tip"
+            :color="current?.key === p.key ? 'primary' : undefined"
+            :variant="current?.key === p.key ? 'flat' : 'outlined'"
+            :disabled="disabled"
+            size="small"
+            class="text-none"
+            @click="emit('apply', applyPermissionPreset(selected, resource, p, offered))"
+          >
+            <v-icon v-if="current?.key === p.key" start icon="mdi-check" />
+            {{ p.label }}
+          </v-chip>
+        </template>
+      </v-tooltip>
+    </div>
+    <div class="role-presets__hint mt-1">
+      {{ current ? current.description : "Pick a set to start from, then adjust the ticks below if needed." }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { applyPermissionPreset, matchingPermissionPreset, PERMISSION_PRESETS } from "../utils/inventory-presets";
+
+const props = defineProps<{
+  resource: string;
+  /** Every permission the role holds or is being given (all modules). */
+  selected: string[];
+  /** The actions this editor offers for `resource`. */
+  offered: string[];
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{ apply: [permissions: string[]] }>();
+
+const presets = computed(() => PERMISSION_PRESETS[props.resource] ?? []);
+const current = computed(() => matchingPermissionPreset(props.selected, props.resource, props.offered));
+</script>
+
+<style scoped>
+.role-presets__label {
+  font-size: 12px;
+  font-weight: 600;
+  color: rgb(var(--v-theme-on-surface));
+}
+.role-presets__hint {
+  font-size: 12px;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+}
+</style>

package/composables/useCommonPermission.ts

@@ -315,19 +315,38 @@ export function useCommonPermissions() {
   const inventoryPermissions: Record<string, TPermission> = {
     "view-inventory": {
       check: true,
-      description: "Allows the user to see the store's stock and reports.",
+      label: "view stock",
+      description: "See the store's items and how many are in stock.",
     },
     "request-stock": {
       check: true,
-      description: "Allows the user to request stock from the store and record where they used it.",
+      label: "request items",
+      description: "Ask the store for items and cancel their own requests. Shows My Requests and My Stock.",
+    },
+    "record-usage": {
+      check: true,
+      label: "record usage",
+      description: "Record where they used the items they hold (before and after photos required). Unused items go back to the storekeeper.",
     },
     "approve-requests": {
       check: true,
-      description: "Allows the user to approve or reject stock requests, issue stock and take returns.",
+      label: "approve requests",
+      description: "Approve or reject stock requests (approving hands the items over) and mark usage records as checked.",
+    },
+    "issue-receive-stock": {
+      check: true,
+      label: "issue and receive stock (storekeeper)",
+      description: "Receive deliveries, hand items over at the counter, take back returns and count stock.",
+    },
+    "view-reports": {
+      check: true,
+      label: "view reports and export",
+      description: "See the stock movement, usage, purchases and per-person reports, and export them to Excel.",
     },
     "manage-inventory": {
       check: true,
-      description: "Allows the user to set up the store, add items, receive deliveries, count stock and change store settings.",
+      label: "inventory admin (full access)",
+      description: "Everything above, plus set up the store, add and edit items and suppliers, imports and settings.",
     },
   };
 

package/composables/useInventory.ts

@@ -1,4 +1,5 @@
 import type { TImportResult } from "../utils/import-result";
+import { inventoryCaps } from "../utils/inventory-presets";
 
 /**
  * Inventory API (`/api/inventory`). What a person may do in a store comes back
@@ -21,7 +22,8 @@ export default function useInventory() {
   return {
     typeLabels,
 
-    getStores: (site: string) => api<TInventoryStore[]>("/stores", { query: { site } }),
+    getStores: async (site: string) =>
+      ((await api<TInventoryStore[]>("/stores", { query: { site } })) ?? []).map((s) => ({ ...s, access: inventoryCaps(s.access) })),
     createStore: (body: { org: string; sites: string[]; name: string }) =>
       api<TInventoryStore>("/stores", { method: "POST", body }),
     updateStore: (id: string, body: Partial<Pick<TInventoryStore, "name" | "sites" | "showInResidentApp" | "showCostInResidentApp">>) =>

package/composables/useInventoryPermission.ts

@@ -4,7 +4,7 @@ import usePermission from "./usePermission";
 import { permissionsDenied } from "../utils/module-routes";
 
 /**
- * Whether to show the Inventory menu. Any one of the four inventory
+ * Whether to show the Inventory menu. Any one of the inventory
  * permissions is enough (an empty list or `*` grants all, the estate rule);
  * which buttons appear inside the screen is decided by the API per store.
  */
@@ -19,10 +19,14 @@ export default function useInventoryPermission() {
     if (!role) return false;
     if (permissionsDenied(["inventory"], userAppModulesDenied?.value)) return false;
     if (role.permissions.includes("*")) return true;
+    // Literal strings, one per call: the gate tests read them from this source.
     return (
       hasPermission(role, permissions, "inventory", "view-inventory") ||
       hasPermission(role, permissions, "inventory", "request-stock") ||
+      hasPermission(role, permissions, "inventory", "record-usage") ||
       hasPermission(role, permissions, "inventory", "approve-requests") ||
+      hasPermission(role, permissions, "inventory", "issue-receive-stock") ||
+      hasPermission(role, permissions, "inventory", "view-reports") ||
       hasPermission(role, permissions, "inventory", "manage-inventory")
     );
   });

package/constants/permissions.ts

@@ -169,7 +169,15 @@ export const PERMISSIONS = {
     "import-units",
     "delete-unit",
   ],
-  inventory: ["view-inventory", "request-stock", "approve-requests", "manage-inventory"],
+  inventory: [
+    "view-inventory",
+    "request-stock",
+    "record-usage",
+    "approve-requests",
+    "issue-receive-stock",
+    "view-reports",
+    "manage-inventory",
+  ],
   "supply-mgmt": [
     "see-all-supplies",
     "add-supply",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.69.0",
+  "version": "4.70.1",
   "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/types/inventory.d.ts

@@ -3,6 +3,12 @@ declare type TInventoryAccess = {
   canManage: boolean;
   canApprove: boolean;
   canRequest: boolean;
+  /** Record usage of stock the person holds. */
+  canUse: boolean;
+  /** Storekeeper: receive deliveries, hand stock over, take returns, count. */
+  canHandle: boolean;
+  /** Reports and Excel export. */
+  canReports: boolean;
 };
 
 declare type TInventoryStore = {

package/types/permission.d.ts

@@ -5,6 +5,8 @@ declare type TPermissionCheck =
 declare type TPermission = {
   check: TPermissionCheck;
   description: string;
+  /** The tick-box name in the role editor, when the key alone reads badly. */
+  label?: string;
 };
 
 declare type TPermissions = {

package/utils/inventory-presets.ts

@@ -0,0 +1,145 @@
+/**
+ * Inventory roles in plain words: one permission per job, and the four ready-made
+ * sets the role editor offers as one-click presets. Browser-safe, no Node globals.
+ *
+ * The server (API-core `utils/inventory-access.ts`) decides what each string
+ * allows; `manage-inventory` is the full set there, so "Inventory admin" ticks
+ * everything and a role holding the old four strings keeps full access.
+ */
+
+/** The inventory actions, in the order a person reads them. */
+export const INVENTORY_ACTIONS = [
+  "view-inventory",
+  "request-stock",
+  "record-usage",
+  "approve-requests",
+  "issue-receive-stock",
+  "view-reports",
+  "manage-inventory",
+] as const;
+
+export type TPermissionPreset = {
+  key: string;
+  label: string;
+  description: string;
+  actions: string[];
+  /** Holding this action alone already means the whole preset (the server's rule). */
+  impliedBy?: string;
+};
+
+export const INVENTORY_PRESETS: TPermissionPreset[] = [
+  {
+    key: "staff",
+    label: "Staff: request & use",
+    description: "See stock, request items, see My Requests and My Stock, and record where items were used.",
+    actions: ["view-inventory", "request-stock", "record-usage"],
+  },
+  {
+    key: "supervisor",
+    label: "Supervisor",
+    description: "See stock, approve or reject requests, check usage records, and see reports.",
+    actions: ["view-inventory", "approve-requests", "view-reports"],
+  },
+  {
+    key: "storekeeper",
+    label: "Storekeeper",
+    description: "See stock, approve requests, receive deliveries, hand items over, take back returns and count stock.",
+    actions: ["view-inventory", "approve-requests", "issue-receive-stock"],
+  },
+  {
+    key: "admin",
+    label: "Inventory admin",
+    description: "Everything, including store set-up, items, suppliers, imports, settings and reports.",
+    actions: [...INVENTORY_ACTIONS],
+    // A role with inventory admin has full access whatever else is ticked (e.g. the four older boxes).
+    impliedBy: "manage-inventory",
+  },
+];
+
+/** Presets per module key; only inventory has them today. */
+export const PERMISSION_PRESETS: Record<string, TPermissionPreset[]> = { inventory: INVENTORY_PRESETS };
+
+/**
+ * The permission list with `resource`'s grants replaced by `preset`'s actions --
+ * only the actions this editor offers (`offered`). Every other module is kept.
+ */
+export function applyPermissionPreset(
+  held: readonly string[],
+  resource: string,
+  preset: TPermissionPreset,
+  offered: readonly string[],
+): string[] {
+  const kept = held.filter((p) => !p.startsWith(`${resource}:`));
+  return [...kept, ...preset.actions.filter((a) => offered.includes(a)).map((a) => `${resource}:${a}`)];
+}
+
+/** The preset whose actions are exactly what the list holds for `resource`, if any. */
+export function matchingPermissionPreset(
+  held: readonly string[],
+  resource: string,
+  offered: readonly string[],
+): TPermissionPreset | undefined {
+  const mine = new Set(held.filter((p) => p.startsWith(`${resource}:`)).map((p) => p.slice(resource.length + 1)));
+  const presets = PERMISSION_PRESETS[resource] ?? [];
+  const implied = presets.find((preset) => preset.impliedBy && mine.has(preset.impliedBy));
+  if (implied) return implied;
+  return presets.find((preset) => {
+    const want = preset.actions.filter((a) => offered.includes(a));
+    return want.length === mine.size && want.every((a) => mine.has(a));
+  });
+}
+
+/**
+ * The store's `access` from the API, with every capability present. An API
+ * from before the split (no `canUse`) is read the way it behaved then, so a
+ * screen deployed first never hides what the server still allows.
+ */
+export function inventoryCaps(a?: Partial<TInventoryAccess> | null): TInventoryAccess {
+  const v = (x?: boolean) => Boolean(x);
+  if (!a) {
+    return { canView: false, canManage: false, canApprove: false, canRequest: false, canUse: false, canHandle: false, canReports: false };
+  }
+  const before = a.canUse === undefined;
+  return {
+    canView: v(a.canView),
+    canManage: v(a.canManage),
+    canApprove: v(a.canApprove),
+    canRequest: v(a.canRequest),
+    canUse: before ? v(a.canRequest) : v(a.canUse),
+    canHandle: before ? v(a.canManage || a.canApprove) : v(a.canHandle),
+    canReports: before ? v(a.canManage || a.canApprove || (a.canView && !a.canRequest)) : v(a.canReports),
+  };
+}
+
+/**
+ * What the Inventory screen shows for a store, from its `access`. Hide, never
+ * grey: a control a person cannot use is not drawn. Web (layer-common) and the
+ * mobile apps apply the same rules; the API refuses anything else with a 403.
+ */
+export function inventoryControls(a?: Partial<TInventoryAccess> | null) {
+  const c = inventoryCaps(a);
+  return {
+    tabs: {
+      stock: c.canView,
+      mine: (c.canRequest || c.canUse) && !c.canManage,
+      requests: c.canRequest || c.canApprove,
+      people: c.canApprove || c.canHandle,
+      reports: c.canReports || c.canApprove,
+      suppliers: c.canManage || c.canHandle,
+      settings: c.canManage,
+    },
+    request: c.canRequest && !c.canManage,
+    recordUsage: c.canUse,
+    review: c.canApprove,
+    checkUsage: c.canApprove,
+    receive: c.canHandle,
+    issue: c.canHandle,
+    takeReturn: c.canHandle,
+    count: c.canHandle,
+    addItems: c.canManage,
+    editItem: c.canManage,
+    fullReports: c.canReports,
+    exportExcel: c.canReports,
+    unitPrice: c.canManage || c.canApprove || c.canHandle || c.canReports,
+  };
+}