@7365admin1/layer-common 3.2.2-staging.148 → 3.2.2-staging.150

package/components/DashboardMain.vue

@@ -1683,27 +1683,52 @@ const finalDashboardData = computed<Record<string, any>>(() => {
 
 // ─── Card Value Configs ───────────────────────────────────────────────────────
 
+/**
+ * THE KPI TILE PALETTE.
+ *
+ * Was eleven hand-picked hexes restated in four places and blind to the theme:
+ * the SAME orange glyph on the SAME pink tint in light and in dark, because a
+ * literal cannot follow a theme. Its worst pairing measured 1.36:1 and the one
+ * that actually shipped measured 1.74:1 - the lowest readings in the package,
+ * on the first screen every account type opens.
+ *
+ * The handoff names no colour for a KPI tile. It DOES name four status tones
+ * and their soft fills, and the hexes that were here were already those four
+ * hues (`#1d5f99` blue, `#b73535` red, `#d28722` amber, `#23824f` green). So
+ * each pair is re-pointed at the token it was imitating rather than given a
+ * new colour. That also makes each tile the design's own chip pairing, which
+ * is the ruling this project already follows.
+ */
+const KPI_TONES = {
+  info: { color: "var(--info)", tint: "var(--info-bg)" },
+  err: { color: "var(--err)", tint: "var(--err-bg)" },
+  ok: { color: "var(--ok)", tint: "var(--ok-bg)" },
+  warn: { color: "var(--warn)", tint: "var(--warn-bg)" },
+} as const;
+
 const defaultCardValues: TDashboardCardValue[] = [
   {
     key: "openWorkOrder",
     periodKey: "period",
     title: "Open Work Order",
     icon: "mdi-briefcase",
-    color: "#0b2f47",
+    /** The same tile is `#1d5f99` blue in the other two branches - info. */
+    color: KPI_TONES.info.color,
   },
   {
     key: "taskCompleted",
     periodKey: "period",
     title: "Task Completed",
     icon: "mdi-clipboard-check-outline",
-    color: "#f4a340",
+    /** `utils/status.ts`: "completed" is `ok`. This was the 1.74:1 orange. */
+    color: KPI_TONES.ok.color,
   },
   {
     key: "supplyAlert",
     periodKey: "period",
     title: "Supply Alert",
     icon: "mdi-alert",
-    color: "#d32f2f",
+    color: KPI_TONES.err.color,
   },
 ];
 
@@ -1713,28 +1738,28 @@ const propertyCardValues: TDashboardCardValue[] = [
     periodKey: "period",
     title: "Open Work Order",
     icon: "mdi-briefcase",
-    color: "#1d5f99",
+    color: KPI_TONES.info.color,
   },
   {
     key: "incidents",
     periodKey: "period",
     title: "Open Incidents",
     icon: "mdi-alert",
-    color: "#b73535",
+    color: KPI_TONES.err.color,
   },
   {
     key: "visitors",
     periodKey: "period",
     title: "Visitors",
     icon: "mdi-account-multiple",
-    color: "#d28722",
+    color: KPI_TONES.warn.color,
   },
   {
     key: "facilityBookings",
     periodKey: "period",
     title: "Facility Booking",
     icon: "mdi-office-building",
-    color: "#23824f",
+    color: KPI_TONES.ok.color,
   },
 ];
 
@@ -1744,28 +1769,28 @@ const securityCardValues: TDashboardCardValue[] = [
     periodKey: "period",
     title: "Open Work Order",
     icon: "mdi-briefcase",
-    color: "#1d5f99",
+    color: KPI_TONES.info.color,
   },
   {
     key: "incidents",
     periodKey: "period",
     title: "Open Incidents",
     icon: "mdi-alert",
-    color: "#b73535",
+    color: KPI_TONES.err.color,
   },
   {
     key: "visitors",
     periodKey: "period",
     title: "Visitors",
     icon: "mdi-account-multiple",
-    color: "#d28722",
+    color: KPI_TONES.warn.color,
   },
   {
     key: "patrolCompliance",
     periodKey: "period",
     title: "Patrol Compliance",
     icon: "mdi-office-building",
-    color: "#23824f",
+    color: KPI_TONES.ok.color,
   },
 ];
 
@@ -2094,8 +2119,8 @@ function getPropertyKpiCards() {
       key: "workOrders",
       title: "Open Work Order",
       icon: "mdi-briefcase",
-      color: "#1d5f99",
-      tint: "#d7ecff",
+      color: KPI_TONES.info.color,
+      tint: KPI_TONES.info.tint,
       value: formatNumber(toNumber(workOrderMetric?.count)),
       percentage: toNumber(workOrderMetric?.percentage),
       meta: getMetricMeta(workOrderMetric),
@@ -2106,8 +2131,8 @@ function getPropertyKpiCards() {
       key: "incidents",
       title: "Open Incidents",
       icon: "mdi-alert",
-      color: "#b73535",
-      tint: "#ffdede",
+      color: KPI_TONES.err.color,
+      tint: KPI_TONES.err.tint,
       value: formatNumber(toNumber(incidentMetric?.count)),
       percentage: toNumber(incidentMetric?.percentage),
       meta: getMetricMeta(incidentMetric),
@@ -2118,8 +2143,8 @@ function getPropertyKpiCards() {
       key: "visitors",
       title: "Visitors",
       icon: "mdi-account-multiple",
-      color: "#d28722",
-      tint: "#ffe4bd",
+      color: KPI_TONES.warn.color,
+      tint: KPI_TONES.warn.tint,
       value: formatNumber(toNumber(visitorMetric?.count)),
       percentage: toNumber(visitorMetric?.percentage),
       meta: getMetricMeta(visitorMetric),
@@ -2137,8 +2162,8 @@ function getPropertyKpiCards() {
       key: "facilityBookings",
       title: "Facility Booking",
       icon: "mdi-office-building",
-      color: "#23824f",
-      tint: "#c8f3da",
+      color: KPI_TONES.ok.color,
+      tint: KPI_TONES.ok.tint,
       value: formatNumber(toNumber(facilityMetric?.count)),
       percentage: toNumber(facilityMetric?.percentage),
       meta: getMetricMeta(facilityMetric),
@@ -2172,8 +2197,8 @@ function getSecurityKpiCards() {
       key: "workOrders",
       title: "Open Work Order",
       icon: "mdi-briefcase",
-      color: "#1d5f99",
-      tint: "#d7ecff",
+      color: KPI_TONES.info.color,
+      tint: KPI_TONES.info.tint,
       value: formatNumber(toNumber(workOrderMetric?.count)),
       percentage: toNumber(workOrderMetric?.percentage),
       meta: getMetricMeta(workOrderMetric),
@@ -2184,8 +2209,8 @@ function getSecurityKpiCards() {
       key: "incidents",
       title: "Open Incidents",
       icon: "mdi-alert",
-      color: "#b73535",
-      tint: "#ffdede",
+      color: KPI_TONES.err.color,
+      tint: KPI_TONES.err.tint,
       value: formatNumber(toNumber(incidentMetric?.count)),
       percentage: toNumber(incidentMetric?.percentage),
       meta: getMetricMeta(incidentMetric),
@@ -2196,8 +2221,8 @@ function getSecurityKpiCards() {
       key: "visitors",
       title: "Visitors",
       icon: "mdi-account-multiple",
-      color: "#d28722",
-      tint: "#ffe4bd",
+      color: KPI_TONES.warn.color,
+      tint: KPI_TONES.warn.tint,
       value: formatNumber(toNumber(visitorMetric?.count)),
       percentage: toNumber(visitorMetric?.percentage),
       meta: getMetricMeta(visitorMetric),
@@ -2215,8 +2240,8 @@ function getSecurityKpiCards() {
       key: "patrolCompliance",
       title: "Patrol Compliance",
       icon: "mdi-office-building",
-      color: "#23824f",
-      tint: "#c8f3da",
+      color: KPI_TONES.ok.color,
+      tint: KPI_TONES.ok.tint,
       value: `${toNumber(patrolMetric?.count)}%`,
       percentage: toNumber(patrolMetric?.percentage),
       meta: getMetricMeta(patrolMetric),
@@ -3607,18 +3632,33 @@ async function exportDashboard(format: "PDF" | "Word") {
 
 // ─── Card Color Helpers ───────────────────────────────────────────────────────
 
+/** The rotation an unstyled `cardValues` entry falls into - same four tones. */
+const KPI_ROTATION = [
+  KPI_TONES.info,
+  KPI_TONES.err,
+  KPI_TONES.ok,
+  KPI_TONES.warn,
+] as const;
+
 function getCardColor(index: number) {
-  return ["#155178", "#9f2f29", "#1f8a56", "#b96d17"][index % 4];
+  return KPI_ROTATION[index % KPI_ROTATION.length].color;
 }
 
+/**
+ * A tint for whatever colour the caller gave. `props.cardValues` comes from
+ * eleven applications and still arrives as a raw hex in places, so the hex
+ * matching stays - the token names are matched alongside it, not instead.
+ */
 function getCardTint(color: string, index: number) {
-  const tints = ["#dbeeff", "#f8c6c3", "#d8f5e5", "#ffe7c2"];
-  if (!color) return tints[index % tints.length];
+  if (!color) return KPI_ROTATION[index % KPI_ROTATION.length].tint;
   const n = color.toLowerCase();
-  if (n.includes("f44336") || n.includes("d32f2f")) return "#f8c6c3";
-  if (n.includes("4caf50") || n.includes("43a047")) return "#d8f5e5";
-  if (n.includes("ff9800") || n.includes("ffa726")) return "#ffe7c2";
-  return "#dbeeff";
+  if (n.includes("--err") || n.includes("f44336") || n.includes("d32f2f"))
+    return KPI_TONES.err.tint;
+  if (n.includes("--ok") || n.includes("4caf50") || n.includes("43a047"))
+    return KPI_TONES.ok.tint;
+  if (n.includes("--warn") || n.includes("ff9800") || n.includes("ffa726"))
+    return KPI_TONES.warn.tint;
+  return KPI_TONES.info.tint;
 }
 
 // ─── Generic Helpers ─────────────────────────────────────────────────────────

package/components/HidCameraCaptureDialog.vue

@@ -5,21 +5,23 @@
     persistent
     @update:model-value="emit('update:modelValue', $event)"
   >
-    <v-card class="camera-dialog" rounded="lg">
-      <v-card-title class="d-flex align-center justify-space-between pa-4">
-        <span class="text-subtitle-1 font-weight-bold">Take Facial Photo</span>
+    <!-- `rounded="lg"` is dropped, not replaced. Measured on the glass, the card
+         read 16px BEFORE and after: the `.rounded-lg` utility it compiled to was
+         already being overridden, so the prop stated a radius the card never
+         had. `.screen-modal` states the same 16px as `--r-modal`, on purpose. -->
+    <v-card class="camera-dialog screen-modal">
+      <v-card-title class="d-flex align-center justify-space-between">
+        <span>Take Facial Photo</span>
         <v-btn
           icon="mdi-close"
           variant="text"
-          size="small"
+          class="screen-modal__close"
           aria-label="Close camera"
           @click="close"
         />
       </v-card-title>
 
-      <v-divider />
-
-      <v-card-text class="pa-4">
+      <v-card-text class="screen-modal__body">
         <div class="camera-viewport">
           <video
             ref="videoElement"
@@ -42,18 +44,20 @@
 
         <canvas ref="canvasElement" class="d-none" />
 
-        <div class="text-caption text-medium-emphasis mt-3 text-center">
+        <div class="camera-dialog__hint text-center">
           Keep your face centered and make sure the area is well lit.
         </div>
       </v-card-text>
 
-      <v-divider />
-
-      <v-card-actions class="pa-4">
-        <v-btn variant="text" @click="close">Cancel</v-btn>
-        <v-spacer />
+      <!-- `color="primary"` on a `v-btn` is the design's FOREGROUND token - the
+           link ink - not a fill, so the capture button was accent-on-accent.
+           `.screen-btn-primary` states the fill the design does draw. -->
+      <div class="screen-modal__footer">
+        <v-btn class="text-none screen-btn-ghost" variant="flat" @click="close">
+          Cancel
+        </v-btn>
         <v-btn
-          color="primary"
+          class="text-none screen-btn-primary"
           variant="flat"
           prepend-icon="mdi-camera"
           :disabled="starting || !!cameraError || !stream"
@@ -61,7 +65,7 @@
         >
           Take Photo
         </v-btn>
-      </v-card-actions>
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -175,10 +179,23 @@ onBeforeUnmount(stopCamera);
   width: 100%;
   overflow: hidden;
   aspect-ratio: 3 / 4;
-  border-radius: 8px;
+  border-radius: var(--r-inner);
+  /* Deliberately NOT a theme surface: this is the stage a video sits on, and it
+     stays dark in both themes so the preview does not flash white on light.
+     Its own `#ffffff` text below is paired with it, not with the theme. */
   background: #111722;
 }
 
+/* The design's small helper line, not Vuetify's `text-caption` /
+   `text-medium-emphasis` pair. */
+.camera-dialog__hint {
+  margin-top: 12px;
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--muted);
+}
+
 .camera-preview {
   width: 100%;
   height: 100%;

package/package.json

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