@7365admin1/layer-common 3.2.2-staging.154 → 3.2.2-staging.156

package/components/DashboardMain.vue

@@ -357,6 +357,29 @@
         </h2>
       </div>
 
+      <!--
+        THE TWO SERIES COLOURS STAY LITERAL, AND HERE IS WHY.
+
+        Everything else in this chart already follows the theme - the gridlines,
+        the axis labels and the ring around each dot are all Vuetify theme vars.
+        The two series are not, and they are the only chart colours in the file
+        that are still hexes.
+
+        They are left that way deliberately. The handoff names no chart palette
+        at all (searched: no "chart", no "legend", no "graph", and neither hex
+        appears anywhere in it), so the fallback rule is "use the token the
+        literal was already imitating". `#e53935` is plainly `--err`. `#ff9b9b`
+        is a second, softer red, and the palette has no second red - the only
+        other red token is `--err-bg`, a 10%-alpha FILL that would be invisible
+        as a 3px line. Re-pointing just one of them would collapse the pair in
+        dark mode, where `--err` is `rgb(229,115,115)` and would sit almost on
+        top of `#ff9b9b`'s `rgb(255,155,155)` - two lines the reader could no
+        longer tell apart. That is the same "do not merge two series into one
+        colour" trap as the Work Order Status bars below.
+
+        So: a two-series chart palette is missing from the design system, and
+        that is a designer question, not something to invent here.
+      -->
       <div v-if="hasChartData" class="mt-4" ref="chartContainerRef">
         <svg
           :viewBox="`0 0 ${chartWidth} 260`"
@@ -2473,6 +2496,29 @@ const todayAttentions = computed(() =>
   normalizeListItems(["todayAttentions", "attentions"])
 );
 
+/**
+ * THE WORK ORDER STATUS BARS.
+ *
+ * Was three hand-picked hexes - `#2fb84d` green, `#f12d2d` red, `#ff8900`
+ * orange - and blind to the theme: the SAME three bars in light and in dark,
+ * because a literal cannot follow a theme. Each is re-pointed at the token
+ * whose hue it was already imitating, which is the same treatment the KPI
+ * tiles got, and which keeps all three bars distinguishable.
+ *
+ * ONE OF THEM DOES NOT AGREE WITH `utils/status.ts`, ON PURPOSE.
+ * That file maps `completed -> ok` and `pending -> warn` (both honoured here),
+ * but it also maps `in progress -> warn` - the SAME tone as `pending`. Applying
+ * it literally would paint two of these three bars the same amber and make the
+ * chart unreadable, which is a regression, not a fix. So "In Progress" keeps
+ * the tone it is drawn in today (`--err`, the token `#f12d2d` was imitating)
+ * and this stays a colour change with no behaviour change.
+ *
+ * That leaves a real inconsistency to settle: on this very page the "In
+ * Progress" feedback CHIP is amber (`warn`) while this bar is red. Resolving it
+ * means either giving `in progress` its own tone in `utils/status.ts` - which
+ * is shared by every chip in the estate - or ruling that a chart series is not
+ * a status chip. Both are design decisions, so neither is taken here.
+ */
 const workOrderStatus = computed(() => {
   const summary = finalDashboardData.value?.workOrderStatusSummary;
   const metric = getMetric(["openWorkOrder", "workOrders", "workOrder"]);
@@ -2493,19 +2539,19 @@ const workOrderStatus = computed(() => {
       label: "Completed",
       value: completed,
       percent: (completed / max) * 100,
-      color: "#2fb84d",
+      color: "var(--ok)",
     },
     {
       label: "In Progress",
       value: inProgress,
       percent: (inProgress / max) * 100,
-      color: "#f12d2d",
+      color: "var(--err)",
     },
     {
       label: "Pending",
       value: pending,
       percent: (pending / max) * 100,
-      color: "#ff8900",
+      color: "var(--warn)",
     },
   ];
 });
@@ -3945,32 +3991,53 @@ function formatDashboardTime(value?: string) {
   text-transform: capitalize;
 }
 
-/* Was five pairs of literal pastels - the same pale green on the dark page,
-   and none of them the tones the rest of the product uses. */
+/* THESE FIVE ARE LITERAL ON PURPOSE - THE PRINT VIEW IS PAPER.
+ *
+ * `.print-dashboard-view` above pins its surface to `#ffffff` and its ink to
+ * `#1e293b` in BOTH themes, because a printed page is white however the app is
+ * themed. Putting the status tokens on these badges therefore did the opposite
+ * of what tokenising usually does: it let the SCREEN theme reach a surface that
+ * does not follow it. Measured on the print branch at 1440:
+ *
+ *   light  In Progress  rgb(59,111,212)  on rgb(235,241,251)  4.20:1
+ *   light  Completed    rgb(15,138,98)   on rgb(231,243,239)  3.82:1
+ *   dark   In Progress  rgb(125,166,236) on rgb(239,244,253)  2.23:1
+ *   dark   Completed    rgb(65,199,149)  on rgb(232,248,242)  1.93:1
+ *
+ * The dark rows are the defect: the dark-theme INK composited over the white
+ * paper the print view forces, so anyone who exports the dashboard while the
+ * app is in dark mode gets washed-out badges - 1.93:1, the lowest reading taken
+ * on this component. So these go back to fixed pastels, and specifically to the
+ * SAME five pairs the Word export writes into its own stylesheet further up, so
+ * the on-page print view and the exported document finally match.
+ *
+ * Same rule as the signature pad: a surface that does not follow the theme must
+ * not be painted with tokens that do.
+ */
 .badge-success {
-  background-color: var(--ok-bg);
-  color: var(--ok);
+  background-color: #d1fae5;
+  color: #065f46;
 }
 
 .badge-info {
-  background-color: var(--info-bg);
-  color: var(--info);
+  background-color: #e0f2fe;
+  color: #075985;
 }
 
 .badge-danger,
 .badge-error {
-  background-color: var(--err-bg);
-  color: var(--err);
+  background-color: #fee2e2;
+  color: #991b1b;
 }
 
 .badge-warning {
-  background-color: var(--warn-bg);
-  color: var(--warn);
+  background-color: #fef3c7;
+  color: #92400e;
 }
 
 .badge-neutral {
-  background-color: var(--hover);
-  color: var(--text2);
+  background-color: #f1f5f9;
+  color: #475569;
 }
 
 /* ------------------------------------------------------------------ */

package/components/Facility/BookingSetup.vue

@@ -79,7 +79,7 @@
           <p class="flex-grow-1">Booking Fee</p>
           <v-switch
             v-model="facility.isBookingFeeEnabled"
-            color="success"
+            color="accent"
             hide-details
             @update:modelValue="onChangeIsBookingFeeEnabled"
           ></v-switch>
@@ -139,7 +139,7 @@
             />
           </v-col>
           <v-col cols="12" class="mt-4">
-            <v-card class="mx-auto border-sm pa-2" color="grey-lighten-4" tile>
+            <v-card class="mx-auto border-sm pa-2 fee-summary" tile>
               <v-row no-gutters align="center">
                 <v-col cols="" class="text-caption"> Total Booking Fee </v-col>
                 <v-col cols="" class="text-right text-caption">
@@ -169,7 +169,7 @@
             </v-card>
           </v-col>
           <v-col cols="12" class="mt-4">
-            <v-card class="mx-auto border-sm pa-2" color="grey-lighten-4" tile>
+            <v-card class="mx-auto border-sm pa-2 fee-summary" tile>
               <v-row no-gutters align="center">
                 <v-col class="text-caption"> Peak Total Booking Fee </v-col>
                 <v-col class="text-right text-caption">
@@ -210,7 +210,7 @@
           <p class="flex-grow-1">Guest</p>
           <v-switch
             v-model="facility.isGuestEnabled"
-            color="success"
+            color="accent"
             hide-details
             :disabled="!facility.isBookingFeeEnabled"
           />
@@ -256,7 +256,7 @@
             />
           </v-col>
           <v-col cols="12" class="mt-4">
-            <v-card class="mx-auto border-sm pa-2" color="grey-lighten-4" tile>
+            <v-card class="mx-auto border-sm pa-2 fee-summary" tile>
               <v-row no-gutters align="center">
                 <v-col class="text-caption">
                   Total Booking Fee for Guest
@@ -288,7 +288,7 @@
             </v-card>
           </v-col>
           <v-col cols="12" class="mt-4">
-            <v-card class="mx-auto border-sm pa-2" color="grey-lighten-4" tile>
+            <v-card class="mx-auto border-sm pa-2 fee-summary" tile>
               <v-row no-gutters align="center">
                 <v-col class="text-caption">
                   Peak Total Booking Fee for Guest
@@ -332,7 +332,7 @@
           <p class="flex-grow-1">Deposit</p>
           <v-switch
             v-model="facility.isDepositEnabled"
-            color="success"
+            color="accent"
             hide-details
             @update:modelValue="onChangeIsDepositFeeEnabled"
           ></v-switch>
@@ -366,7 +366,7 @@
           <p class="flex-grow-1">Booking Policy</p>
           <v-switch
             v-model="facility.isBookingPolicyEnabled"
-            color="success"
+            color="accent"
             hide-details
           />
         </div>
@@ -419,16 +419,14 @@
             ></v-number-input>
           </v-col>
           <v-col cols="12" md="2" class="pa-1">
-            <v-btn
+            <AppButton
               :disabled="!sampleData.description && !sampleData.count"
               type="submit"
-              color="primary"
+              class="w-100"
               @click="upsertChecklist()"
-              block
-              size="large"
             >
               {{ !isEditing ? "Add" : "Edit" }}
-            </v-btn>
+            </AppButton>
           </v-col>
         </v-row>
       </section>
@@ -445,7 +443,7 @@
               <v-icon
                 icon="mdi-drag"
                 class="drag-handle cursor-move mr-2"
-                color="grey-lighten-1"
+                color="muted"
               />
             </template>
 
@@ -465,7 +463,7 @@
                       ? 'mdi-message'
                       : 'mdi-message-outline'
                   "
-                  :color="item.permanentRemarks ? 'primary' : 'grey-darken-1'"
+                  :color="item.permanentRemarks ? 'primary' : 'muted'"
                   variant="text"
                   density="comfortable"
                   @click="remarksDialog(true, item?.permanentRemarks, index)"
@@ -503,7 +501,7 @@
             <v-switch
               v-model="isBookingUnitLimitEnabled"
               class="d-flex align-center"
-              color="primary"
+              color="accent"
               hide-details
               @update:model-value="onToggleBookingUnitLimit"
             />
@@ -541,7 +539,7 @@
             <v-switch
               v-model="isMaxNumberGuestLimitEnabled"
               class="d-flex align-center"
-              color="primary"
+              color="accent"
               hide-details
               @update:model-value="onToggleMaxNumberGuestLimit"
             />
@@ -578,7 +576,7 @@
             <v-switch
               v-model="isCancelAllowedLimitEnabled"
               class="d-flex align-center"
-              color="primary"
+              color="accent"
               hide-details
               @update:model-value="onToggleCancelAllowedLimit"
             />
@@ -607,17 +605,14 @@
       width="300"
       persistent
     >
-      <v-card class="rounded-lg">
-        <v-toolbar class="border-b">
-          <span class="pl-6 font-weight-bold">Permanent Remarks</span>
-          <v-spacer />
-          <v-icon
-            icon="mdi-close"
-            size="30"
-            class="pr-6"
-            @click="remarksDialog(false)"
-          />
-        </v-toolbar>
+      <!-- Was a `v-card` with a bare `v-toolbar` heading, which Vuetify paints
+           from its own `surface` - a slab visibly lighter than the card on the
+           dark theme. The design's modal heading is the card's own title row. -->
+      <v-card class="screen-modal">
+        <v-card-title class="d-flex align-center">
+          <span class="flex-grow-1">Permanent Remarks</span>
+          <v-icon icon="mdi-close" size="30" @click="remarksDialog(false)" />
+        </v-card-title>
 
         <v-row no-gutters class="pa-4">
           <!-- remarks -->
@@ -635,13 +630,9 @@
           <!-- clear/confirm buttons-->
           <v-col cols="12" class="mt-4">
             <v-row no-gutters>
-              <v-btn
-                block
-                text="confirm"
-                color="primary"
-                flat
-                @click="confirmRemarks()"
-              />
+              <AppButton class="w-100" @click="confirmRemarks()">
+                Confirm
+              </AppButton>
             </v-row>
           </v-col>
         </v-row>
@@ -650,18 +641,18 @@
 
     <!-- delete -->
     <v-dialog v-model="isDeleteItem" width="500" persistent class="text-center">
-      <v-card class="rounded-xl">
-        <!-- HEADER -->
-        <v-toolbar class="border-b pb-2 pr-4">
-          <v-spacer />
+      <v-card class="screen-modal">
+        <!-- HEADER - the close cross sat in a `v-toolbar`, a second grey slab
+             above the card on the dark theme. It is the title row's own end. -->
+        <v-card-title class="d-flex justify-end">
           <v-icon
             icon="mdi-close"
             size="x-large"
             @click="isDeleteItem = false"
           />
-        </v-toolbar>
+        </v-card-title>
 
-        <v-card-text class="d-flex flex-column align-center">
+        <v-card-text class="screen-modal__body d-flex flex-column align-center">
           <img
             src="/icons/delete-dialog-icon.svg"
             alt="delete-dialog-icon"
@@ -671,15 +662,8 @@
           />
           Are you sure you want to delete this?
         </v-card-text>
-        <v-col>
-          <v-btn
-            text="yes"
-            type="submit"
-            color="primary"
-            @click="confirmDelete()"
-            width="50%"
-            elevation="0"
-          />
+        <v-col class="d-flex justify-center pb-4">
+          <AppButton type="submit" @click="confirmDelete()">Yes</AppButton>
         </v-col>
       </v-card>
     </v-dialog>
@@ -1080,10 +1064,17 @@ function onToggleCancelAllowedLimit(val: any) {
 }
 
 .list-feature-toggle {
-  border: 1px solid #bbbaba;
+  border: 1px solid var(--border);
   height: 50px;
 }
 
+/* The four fee-summary panels asked Vuetify for `grey-lighten-4` - #f5f5f5 in
+   BOTH themes, so a white slab inside a dark card. `--bg` is the design's
+   recessed surface and follows the theme. */
+.fee-summary {
+  background: var(--bg);
+}
+
 .drag-area {
   cursor: grab;
 }

package/components/QrTemplate/PrintDialog.vue

@@ -5,7 +5,11 @@
     fullscreen
   >
     <v-card>
-      <v-toolbar style="background-color: white">
+      <!-- The inline `background-color: white` painted this bar white in BOTH
+           themes - a white slab across the top of the dialog on the dark one.
+           Removed, so Vuetify paints it from the theme's `surface` as every
+           other converted bar in the estate does. -->
+      <v-toolbar>
         <v-btn icon="mdi-arrow-left" @click="closeDialog"></v-btn>
 
         <v-toolbar-title>Pass & Keys</v-toolbar-title>
@@ -14,7 +18,7 @@
       </v-toolbar>
       <v-row no-gutters class="pa-15">
         <v-col cols="12">
-          <v-card class="pa-6">
+          <AppCard class="pa-6">
             <v-row no-gutters>
               <v-col
                 cols="12"
@@ -67,7 +71,9 @@
                 >
                   <template v-slot:label>
                     Select template
-                    <span class="text-red font-weight-bold">*</span>
+                    <!-- `text-red` is Vuetify's own palette red, a literal that
+                         ignores the theme. `text-error` is the design's. -->
+                    <span class="text-error font-weight-bold">*</span>
                   </template>
                   <!-- <template v-slot:append-item>
                     <div v-intersect="endIntersectTemplateList" />
@@ -112,7 +118,7 @@
                       @click="selectedChoicePaperSizeOrientation = 'A4'"
                       :color="
                         selectedChoicePaperSizeOrientation === 'A4'
-                          ? 'green'
+                          ? 'success'
                           : ''
                       "
                     >
@@ -156,7 +162,7 @@
                       @click="selectedChoicePaperSizeOrientation = 'CCP'"
                       :color="
                         selectedChoicePaperSizeOrientation === 'CCP'
-                          ? 'green'
+                          ? 'success'
                           : ''
                       "
                     >
@@ -199,7 +205,7 @@
                       @click="selectedChoicePaperSizeOrientation = 'CCL'"
                       :color="
                         selectedChoicePaperSizeOrientation === 'CCL'
-                          ? 'green'
+                          ? 'success'
                           : ''
                       "
                     >
@@ -310,7 +316,7 @@
                   <template v-slot:loader="{ isActive }">
                     <v-progress-linear
                       :active="isActive"
-                      color="deep-purple"
+                      color="primary-button"
                       height="4"
                       indeterminate
                     ></v-progress-linear>
@@ -436,7 +442,7 @@
                                       cols="12"
                                       sm="7"
                                       md="1"
-                                      :class="`text-capitalize text-body-2 white--text text ${
+                                      :class="`text-capitalize text-body-2 ${
                                         $vuetify.display.xs && 'mb-1'
                                       }`"
                                     >
@@ -483,7 +489,7 @@
                                       cols="12"
                                       sm="7"
                                       md="3"
-                                      :class="`text-capitalize text-body-2 white--text text ${
+                                      :class="`text-capitalize text-body-2 ${
                                         $vuetify.display.xs && 'mb-1'
                                       }`"
                                     >
@@ -524,7 +530,7 @@
                                       cols="12"
                                       sm="7"
                                       md="1"
-                                      :class="`text-capitalize text-body-2 white--text text ${
+                                      :class="`text-capitalize text-body-2 ${
                                         $vuetify.display.xs && 'mb-1'
                                       }`"
                                     >
@@ -569,7 +575,7 @@
                                       cols="12"
                                       sm="7"
                                       md="4"
-                                      :class="`text-capitalize text-body-2 white--text text ${
+                                      :class="`text-capitalize text-body-2 ${
                                         $vuetify.display.xs && 'mb-1'
                                       }`"
                                     >
@@ -610,7 +616,7 @@
                                       cols="12"
                                       sm="7"
                                       md="2"
-                                      :class="`text-capitalize text-body-2 white--text text ${
+                                      :class="`text-capitalize text-body-2 ${
                                         $vuetify.display.xs && 'mb-1'
                                       }`"
                                     >
@@ -728,16 +734,15 @@
 
             <v-row no-gutters class="pt-2">
               <v-col cols="12" class="d-flex justify-end">
-                <v-btn
-                  color="primary"
-                  @click="printContent"
-                  :disabled="isPrintDisabled"
-                >
+                <!-- `color="primary"` on a v-btn asked Vuetify to FILL with the
+                     foreground token. The design's filled action is AppButton,
+                     which paints from `primary-button`. -->
+                <AppButton @click="printContent" :disabled="isPrintDisabled">
                   Print
-                </v-btn>
+                </AppButton>
               </v-col>
             </v-row>
-          </v-card>
+          </AppCard>
         </v-col>
       </v-row>
     </v-card>
@@ -746,7 +751,8 @@
   <!-- start range dialog -->
   <v-snackbar
     v-model="snackbarStartRange"
-    color="red"
+    class="app-toast"
+    color="error"
     :timeout="5000"
     multi-line
   >
@@ -761,8 +767,11 @@
       generate
     </v-btn>
     <template v-slot:actions>
+      <!-- Was `color="white"`. The dark theme's `error` fill is a LIGHT colour
+           carrying dark ink (`on-error`), so a hardcoded white cross measured
+           ~2:1 on it. Dropping the colour lets the button inherit `on-error`
+           and read correctly in both themes. -->
       <v-btn
-        color="white"
         variant="text"
         @click="snackbarStartRange = false"
         icon="mdi-close"
@@ -1226,23 +1235,20 @@ async function nextPage() {
 </script>
 
 <style scoped>
-.custom-placeholer-color input::placeholder {
-  color: red !important;
-  opacity: 1;
-}
-
-.custom-label-color .v-label {
-  color: red;
-  opacity: 1;
-}
-
-.custom-placeholer-color input,
-.custom-label-color input {
-  color: red !important;
-}
-
+/*
+  `.custom-placeholer-color` and `.custom-label-color` were declared here and
+  applied to NOTHING - neither class appears anywhere in the template. Deleted
+  rather than left as three blocks of red-text styling waiting to be pasted
+  onto a field by mistake.
+
+  `.placeHolderDarken` IS applied (the three paper-size fields). Its
+  `color: primary` was not a colour - `primary` is a Vuetify theme NAME, not a
+  CSS keyword, so the browser dropped that one declaration as invalid and the
+  placeholder has never been darkened. The `opacity: 1` beside it did apply.
+  Now points at the design's muted ink, which is what "darken" meant.
+*/
 .placeHolderDarken ::placeholder {
-  color: primary !important;
+  color: var(--muted) !important;
   opacity: 1;
 }
 </style>

package/package.json

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