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

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/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.149",
   "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.",