@7365admin1/layer-common 3.2.2-staging.138 → 3.2.2-staging.140

package/assets/css/primitives.css

@@ -958,3 +958,29 @@ select.app-field__input {
     min-width: 720px;
   }
 }
+
+/* ------------------------------------------------------------------ */
+/* Field label (`components/InputLabel.vue`, 125 caller files).        */
+/*                                                                     */
+/* Every form label in the product rendered Vuetify's `text-subtitle-2`:*/
+/* 14px/500 at 0.0071em tracking, declaring `font-family: Roboto`.     */
+/* The handoff's own label - the Create Role modal - is 12.5px/700 with*/
+/* a 6px gap under it and the asterisk on `--err`.                     */
+/*                                                                     */
+/* `margin-bottom` is deliberately NOT `!important`, so the ~40 callers*/
+/* that already pass a Vuetify spacing utility (`mb-1`, `mb-2`) keep   */
+/* winning - those classes carry `!important` - and only the labels    */
+/* that state no spacing take the design's 6px.                        */
+/* ------------------------------------------------------------------ */
+.app-input-label {
+  font-family: var(--font-sans);
+  font-size: 12.5px;
+  font-weight: 700;
+  letter-spacing: 0;
+  color: var(--text);
+  margin-bottom: 6px;
+}
+
+.app-input-label__req {
+  color: var(--err);
+}

package/assets/css/screens.css

@@ -739,3 +739,38 @@
   height: 2px;
   background: var(--accent);
 }
+
+/* ------------------------------------------------------------------ */
+/* Toast (`components/Snackbar.vue`, 163 caller files).                */
+/*                                                                     */
+/* The handoff draws no toast at all - it is one of the gaps. So this  */
+/* is deliberately NOT an invented surface: it is the design's own     */
+/* button type scale, inner radius and menu shadow applied to          */
+/* Vuetify's snackbar. Vuetify's own default is a 4px radius, a        */
+/* Material elevation and Roboto at 14px, none of which are ours.      */
+/*                                                                     */
+/* The FILL is the `color` prop, defaulted in the component to         */
+/* `primary-button` - never `primary`, which is a foreground token.    */
+/* ------------------------------------------------------------------ */
+.app-toast .v-snackbar__wrapper {
+  border-radius: var(--r-inner);
+  box-shadow: var(--shadow-menu);
+  font-family: var(--font-sans);
+}
+
+.app-toast .v-snackbar__content {
+  font-size: var(--fs-btn);
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+/* Vuetify's text button is uppercase with wide tracking; the design has no
+   uppercase control anywhere. Named on `.v-btn` so it outweighs the default. */
+.v-btn.app-toast__close {
+  border-radius: var(--r-inner-sm);
+  font-family: var(--font-sans);
+  font-size: var(--fs-btn);
+  font-weight: var(--fw-btn);
+  letter-spacing: 0;
+  text-transform: none;
+}

package/components/InputLabel.vue

@@ -1,6 +1,6 @@
 <template>
-  <span :class="`text-subtitle-2 font-weight-medium ${props.class}`">
-    {{ title }} <span v-if="props.required" class="text-error">*</span>
+  <span :class="`app-input-label ${props.class}`">
+    {{ title }} <span v-if="props.required" class="app-input-label__req">*</span>
   </span>
 </template>
 

package/components/OvernightParkingManagement.vue

@@ -42,6 +42,19 @@
         {{ formatDateDDMMYYYYLocal(value) }}
       </template>
 
+      <!--
+        The column had no slot, so an OBJECT `invitedBy` printed its raw JSON
+        into the cell - `{ "_id": "u-1", "name": "Unit A-12-01" }`. Never seen,
+        because the table had never drawn a row. `types/overnight-parking.d.ts`
+        declares `{ _id, name }`; every OTHER collection in `core` stores
+        `invitedBy` as a plain id/name string, and the overnight parking model
+        has no such field at all - so both shapes are read rather than betting
+        on one, and an absent value says N/A instead of nothing.
+      -->
+      <template #item.invitedBy="{ value }">
+        {{ (typeof value === "object" ? value?.name : value) || "N/A" }}
+      </template>
+
       <!--
         The same four words, the same four meanings - approved/expired/
         rejected/pending map to ok/neutral/err/warn in `utils/status.ts`,
@@ -114,6 +127,15 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+
+    <!--
+      Approve/Reject had NO failure path at all: `confirmAction` was a
+      try/finally with no catch, so a 400/403/network failure left the dialog
+      open, the spinner off and not one word on screen - the guard cannot tell
+      a saved approval from a refused one. The shared `Snackbar` is what every
+      other screen in the layer uses to say so.
+    -->
+    <Snackbar v-model="messageSnackbar" :text="snackbarMessage" :color="messageColor" />
   </v-row>
 </template>
 
@@ -225,7 +247,10 @@ function formatStatus(status: TOvernightParkingRequest["status"]) {
   }
 }
 
-const { data: overnightParkingRequests, pending: isPendingOvernightParkingRequests, refresh: refreshOvernightParkingRequests } = await useLazyAsyncData<TOvernightParkingRequest[]>(() => getOvernightParkingRequests({ site: props.site, status: statusFilter.value }), { immediate: true })
+// `page` was read by the pager and never sent to the API, so page 2 re-fetched
+// page 1 - with the API's `limit` of 10, every request past the tenth was
+// unreachable. It is part of the query now.
+const { data: overnightParkingRequests, pending: isPendingOvernightParkingRequests, refresh: refreshOvernightParkingRequests } = await useLazyAsyncData<TOvernightParkingRequest[]>(() => getOvernightParkingRequests({ site: props.site, status: statusFilter.value, page: page.value }), { immediate: true })
 
 
 watch(overnightParkingRequests, (data: any) => {
@@ -257,6 +282,8 @@ function handleRowClick(data: { item?: TOvernightParkingRequest }) {
 }
 
 function handleUpdatePage(value: number) {
+  page.value = value;
+  refreshOvernightParkingRequests();
   emits("update:page", value);
 }
 
@@ -272,9 +299,21 @@ function closeActionDialog() {
   actionDialog.open = false
 }
 
+const snackbarMessage = ref("")
+const messageColor = ref("")
+const messageSnackbar = ref(false)
+
+function showMessage(msg: string, color: string) {
+  snackbarMessage.value = msg
+  messageColor.value = color
+  messageSnackbar.value = true
+}
+
 async function confirmAction() {
   if (!actionDialog.requestId || !remarks.value.trim()) return
 
+  const verb = actionDialog.action === 'approved' ? 'approve' : 'reject'
+
   try {
     actionLoading.value = true
     await updateOvernightParkingRequest(actionDialog.requestId, {
@@ -282,8 +321,14 @@ async function confirmAction() {
       remarks: remarks.value.trim(),
     })
     actionDialog.open = false
+    // One refresh. The second, unawaited call fired the same GET a second time
+    // and could land BEFORE the first, putting the pre-update rows back.
     await refreshOvernightParkingRequests()
-    refreshOvernightParkingRequests()
+    showMessage(`Request ${actionDialog.action}.`, "success")
+  } catch (error: any) {
+    // The dialog stays OPEN on failure, with the remarks still typed, so the
+    // action can be retried rather than silently lost.
+    showMessage(error?.data?.message || `Failed to ${verb} this request. Please try again.`, "error")
   } finally {
     actionLoading.value = false
   }
@@ -291,6 +336,9 @@ async function confirmAction() {
 
 watch([statusFilter], ([newStatus], [oldStatus]) => {
   if (newStatus === oldStatus) return
+  // A new filter is a new result set - staying on page 3 of the old one asks
+  // the API for a page that usually does not exist, and the table draws empty.
+  page.value = 1
   refreshOvernightParkingRequests()
 }, { immediate: false })
 </script>

package/components/Snackbar.vue

@@ -1,9 +1,16 @@
 <template>
-  <v-snackbar v-model="snackbar" :color="props.color" :z-index="100000000" >
+  <v-snackbar
+    v-model="snackbar"
+    class="app-toast"
+    :color="props.color || 'primary-button'"
+    :z-index="100000000"
+  >
     {{ props.text }}
 
     <template #actions>
-      <v-btn variant="text" @click="snackbar = false"> Close </v-btn>
+      <v-btn class="app-toast__close" variant="text" @click="snackbar = false">
+        Close
+      </v-btn>
     </template>
   </v-snackbar>
 </template>
@@ -15,9 +22,35 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  /**
+   * A Vuetify theme colour name. `success` / `warning` / `error` / `info` are
+   * mapped onto the design palette in `utils/theme.ts` and pass through here
+   * unchanged.
+   *
+   * An UNCOLOURED toast used to land on one of two wrong surfaces, and both are
+   * corrected by the `||` in the template rather than by 163 caller files:
+   *
+   *   - the prop omitted or bound to `undefined` fell to the old default
+   *     `"primary"`, and `theme.ts:228` maps Vuetify's `primary` to
+   *     `--accent-text` - a FOREGROUND (the link ink), never a fill. Measured:
+   *     `rgb(74,110,182)` light, `rgb(120,162,244)` dark - the dark one a pale
+   *     link-blue slab that matches no other accent surface in the product.
+   *   - `:color=""`, which is how most callers initialise their toast state
+   *     (`reactive({ show: false, message: "", color: "" })`), is not falsy to
+   *     Vue's default machinery, so it reached Vuetify as an empty colour and
+   *     fell through to `.v-snackbar--variant-elevated`, i.e. `surface-variant`
+   *     = the NAVIGATION RAIL colour with `--text2` ink.
+   *
+   * `primary-button` is the accent FILL, and its pair `on-primary-button`
+   * supplies the white label (4.57:1 in both themes). The same correction is
+   * already on `FileInput`, `FeedbackDetail` and `BuildingUnitFormEdit`.
+   *
+   * The handoff draws no toast at all, so "an uncoloured toast is the accent
+   * fill" is our reading of a gap in the design, not a value it states.
+   */
   color: {
     type: String,
-    default: "primary",
+    default: "",
   },
 });
 </script>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.138",
+  "version": "3.2.2-staging.140",
   "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.",