@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/utils/status.ts

@@ -0,0 +1,135 @@
+/**
+ * THE SEMANTIC STATUS MAPPING, IN ONE PLACE.
+ *
+ * The design assigns a colour to a status WORD rather than to a module, so the
+ * same word has to look the same wherever it appears - "Open" on a Daily
+ * Occurrence Book and "Open" on a work order are the same green. Keeping the
+ * list here rather than in each screen is what makes that true, and is what
+ * Phases 3 and 4 read when they restyle the chips.
+ *
+ * Straight from the handoff:
+ *   Completed / Paid / Available / Open -> ok
+ *   Pending                             -> warn
+ *   In Use / Closed / Checkout          -> err
+ *   Role and info tags                  -> info
+ *
+ * Anything not listed is `neutral` on purpose. A status this product has and
+ * the design did not name must NOT be guessed into a colour - a wrong green on
+ * a failed job is worse than a grey one - so it comes out neutral and visible,
+ * which is how it gets noticed and added.
+ */
+export type TStatusTone = "ok" | "warn" | "err" | "info" | "neutral";
+
+const TONES: Record<string, TStatusTone> = {
+  completed: "ok",
+  paid: "ok",
+  available: "ok",
+  open: "ok",
+
+  pending: "warn",
+
+  "in use": "err",
+  closed: "err",
+  checkout: "err",
+
+  role: "info",
+  info: "info",
+
+  /**
+   * PHASE 4 - THE WORDS THIS PRODUCT ACTUALLY USES.
+   *
+   * The handoff names ten words; the module screens show more than that, and
+   * each of them is ALREADY painted a colour today by a per-screen
+   * `getStatusColor`. So these are not new opinions - each one is the tone the
+   * screens already give that word, moved into the one list so that "Ongoing"
+   * is the same blue on a cleaning schedule and on a scheduled area. Where the
+   * old per-screen colour and the design disagree the design wins, and there
+   * is exactly one of those: `Open` was grey and the handoff names it `ok`.
+   *
+   * Anything still unlisted stays neutral, deliberately - see above.
+   */
+  ongoing: "info", // was `primary`
+  "in progress": "warn", // was #FB8C00, orange
+  "for review": "info", // was `primary`
+  "to do": "warn", // was `orange`
+
+  accepted: "ok", // was `success`
+  approved: "ok",
+  resolved: "ok", // was #4CAF50, green
+  active: "ok", // was `success`
+
+  // An online-form submission sent back to the resident to correct and send
+  // again. Unlisted it would come out neutral, which would make "needs your
+  // attention" look the same as "nothing is happening".
+  resubmission: "warn",
+
+  assigned: "info", // was `primary`, on the access-card details dialog
+  replaced: "warn", // was `orange`, same screen
+  returned: "warn", // was `orange`, same screen - the card came back
+
+  rejected: "err", // was `error`
+  deleted: "err", // was `error`
+  suspended: "err", // was `error`
+
+  complete: "ok",
+
+  inactive: "neutral", // was `grey`
+  "in active": "neutral", // the same word, printed "In-Active"
+  declined: "neutral", // was Vuetify's `default`
+  expired: "neutral", // was `grey`
+
+  "awaiting approval": "warn", // a waiting state, like Pending
+
+  /**
+   * HID enrolment: is this reader identity tied to a real person record yet?
+   * Same rule as the Phase 4 block above - not a new opinion, but the tone
+   * `HidUserEnrollment` already painted these two words, moved into the one
+   * list. Left unlisted they would BOTH come out neutral, which would erase
+   * the only distinction the column exists to draw.
+   */
+  mapped: "ok", // was `status-success`, #1b7f3a on #dff7e7
+  unmapped: "warn", // was `status-warning`, #9a6700 on #fff0cc
+
+  /**
+   * HID intercom SIP state, from `HidIntercomManagement`'s own
+   * `getStatusClass`. Same rule again: the tone the screen already gave the
+   * word, moved into the one list. "Disabled" and "Not connected" are NOT
+   * failures - the operator turned SIP off, or never set it up - so they stay
+   * neutral, which is what `status-muted` painted them.
+   */
+  /**
+   * HID access authorization. These arrive with `b0667a7` on `staging`
+   * ("Call the Authorized status API from Amico via Access Logs"), which
+   * replaces the Access Logs' Mapped/Unmapped column with these three words.
+   * Listed here AHEAD of that merge so the shared chip already knows them -
+   * unlisted they would all come out neutral, silently erasing the difference
+   * between a granted and a denied door. Tones are that commit's own:
+   * `mapped-chip` green, `unmapped-chip` red, `unknown-chip` amber.
+   */
+  authorized: "ok",
+  "not authorized": "err",
+  unknown: "warn",
+
+  connected: "ok", // was `status-success`
+  connecting: "warn", // was `status-warning`, the fall-through case
+  "not connected": "neutral", // was `status-muted`
+  disabled: "neutral", // was `status-muted`
+  failed: "err", // was `status-error`
+};
+
+/**
+ * The tone for a status word. Case- and space-insensitive, because the same
+ * status arrives as "In Use", "in_use" and "IN USE" from different endpoints.
+ */
+export function statusTone(status: string | null | undefined): TStatusTone {
+  if (!status) return "neutral";
+
+  const key = String(status).trim().toLowerCase().replace(/[_-]+/g, " ");
+
+  return TONES[key] ?? "neutral";
+}
+
+/** The class `assets/css/tokens.css` paints that tone with. */
+export function statusToneClass(status: string | null | undefined): string {
+  return `tone-${statusTone(status)}`;
+}

package/utils/table-card.test.ts

@@ -0,0 +1,84 @@
+/**
+ * REGRESSION GUARDS FOR THE TABLE CARD'S BUSY SIGNAL.
+ *
+ * Both faults here are a CSS declaration and a template binding, not a pure
+ * function, and this repo has no component test runner (adding one is a
+ * dependency change). So these assert the SOURCE CONTRACT: the exact
+ * declarations whose absence caused the defect. They fail the moment someone
+ * deletes the anchor or the disabled binding again.
+ *
+ * The behavioural proof is the driven browser measurement recorded on the PR -
+ * bar 1440x2 at `top: 0` of the WINDOW before, 1406x2 at the card's own top
+ * edge after; refresh button `false -> false -> false` before,
+ * `false -> true -> false` after.
+ */
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+
+const read = (rel: string) =>
+    readFileSync(fileURLToPath(new URL(`../${rel}`, import.meta.url)), "utf8");
+
+/** The declaration block for a selector, comments stripped. */
+const ruleFor = (css: string, selector: string) => {
+    const at = css.indexOf(`\n${selector} {`);
+    assert.notEqual(at, -1, `no rule for "${selector}"`);
+    const open = css.indexOf("{", at);
+    const close = css.indexOf("}", open);
+    return css
+        .slice(open + 1, close)
+        .replace(/\/\*[\s\S]*?\*\//g, "")
+        .trim();
+};
+
+describe("the loading bar's containing block", () => {
+    const screens = read("assets/css/screens.css");
+
+    it("anchors .table-card__loading to its card, not the viewport", () => {
+        // The bar is absolute. Without this the nearest positioned ancestor is
+        // the initial containing block, i.e. the browser window: the bar was
+        // measured 1440x2 at top:0 while its card sat 61.5px lower.
+        assert.match(ruleFor(screens, ".table-card"), /position:\s*relative/);
+    });
+
+    it("still positions the bar out of flow, so a load causes no 2px jump", () => {
+        assert.match(ruleFor(screens, ".table-card__loading"), /position:\s*absolute/);
+    });
+});
+
+describe("TableMain's refresh button", () => {
+    const sfc = read("components/TableMain.vue");
+    // The one `v-btn` carrying the refresh emit.
+    const refreshBtn = (() => {
+        const at = sfc.indexOf(`@click="emits('refresh')"`);
+        assert.notEqual(at, -1, "no refresh button in TableMain");
+        const open = sfc.lastIndexOf("<v-btn", at);
+        return sfc.slice(open, at);
+    })();
+
+    it("is disabled while the caller's request is in flight", () => {
+        // Without this, clicking refresh on a list that comes back identical
+        // changed zero pixels - the Work Orders / Duty Officer Book report.
+        assert.match(refreshBtn, /:disabled="loading"/);
+    });
+
+    it("reads the same `loading` prop the bar reads, so the two cannot diverge", () => {
+        assert.match(sfc, /v-if="loading"[\s\S]{0,200}table-card__loading/);
+        assert.match(sfc, /loading:\s*\{\s*type:\s*Boolean,\s*default:\s*false,?\s*\}/);
+    });
+});
+
+describe(".app-switch's thumb", () => {
+    const primitives = read("assets/css/primitives.css");
+
+    it("beats Vuetify's 3- and 4-class slide on the input", () => {
+        // `.v-locale--is-ltr .v-switch .v-selection-control__input` and its
+        // `--dirty` twin outrank a 2-class rule, so the plain reset never
+        // applied and every thumb sat 10px out of its track.
+        assert.match(
+            ruleFor(primitives, ".app-switch .v-selection-control__input"),
+            /transform:\s*none\s*!important/,
+        );
+    });
+});

package/utils/theme-aa-ledger.ts

@@ -0,0 +1,148 @@
+/**
+ * THE LIGHT THEME'S KNOWN AA FAILURES, MEASURED.
+ *
+ * The owner's 2026-08-14 decision is 100% design fidelity over WCAG AA, so the
+ * six light values that had been darkened are back on the handoff and the light
+ * theme no longer clears 4.5:1 everywhere. This file is the ledger of exactly
+ * what that costs: every pair, its measured ratio, and what it needs.
+ *
+ * It is data, not prose - `theme.test.ts` asserts each entry still measures what
+ * it says, so a later change that drifts a colour (in either direction) fails
+ * the build and has to come back here and say so.
+ *
+ * `run` prints the table: `node --experimental-strip-types utils/theme-aa-ledger.ts`
+ */
+import { PALETTE, LIGHT_THEME, DARK_THEME } from "./theme.ts";
+
+const luminance = (hex: string): number => {
+  const c = [0, 2, 4]
+    .map((i) => parseInt(hex.slice(1 + i, 3 + i), 16) / 255)
+    .map((v) => (v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4)));
+  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+};
+
+export const contrast = (a: string, b: string): number => {
+  const [x, y] = [luminance(a), luminance(b)];
+  return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
+};
+
+export const over = (fg: string, bg: string, alpha: number): string =>
+  "#" +
+  [0, 2, 4]
+    .map((i) =>
+      Math.round(
+        parseInt(fg.slice(1 + i, 3 + i), 16) * alpha +
+          parseInt(bg.slice(1 + i, 3 + i), 16) * (1 - alpha),
+      )
+        .toString(16)
+        .padStart(2, "0"),
+    )
+    .join("");
+
+const L = PALETTE.light;
+
+/** `--thead` is a 2% ink wash over the card, not a colour of its own. */
+export const thead = over("#14161a", L.card, 0.02);
+
+/**
+ * `--hover` is a 5% ink wash. On the page background it is the fill a DISABLED
+ * control sits on (the HID reader identification methods, greyed until Online
+ * Mode is on), so `--muted` label on `--hover` is a pair a person actually reads.
+ */
+export const hoverOnBg = over("#14161a", L.bg, 0.05);
+
+
+/** The soft chip backgrounds, exactly as the design states them. */
+export const chip = {
+  ok: over("#0f8a62", L.card, 0.1),
+  warn: over("#be8c19", L.card, 0.13),
+  err: over("#cf4b4b", L.card, 0.1),
+  info: over("#3b6fd4", L.card, 0.1),
+};
+
+/** `--accent-soft` is transparent, so it takes the colour of what is behind it. */
+export const accentSoft = {
+  sidebar: over(L.accent, L.sidebar, 0.12),
+  card: over(L.accent, L.card, 0.12),
+};
+
+/**
+ * Every LIGHT pair a person actually reads. `need` is 4.5 for body text and 3
+ * for large text (>=18.66px, or >=14px at 700+) and for non-text edges.
+ */
+export const LIGHT_PAIRS: Array<{
+  what: string;
+  fg: string;
+  bg: string;
+  need: number;
+}> = [
+  { what: "muted on a card (KPI sub-lines, field labels)", fg: L.muted, bg: L.card, need: 4.5 },
+  { what: "muted on the page background", fg: L.muted, bg: L.bg, need: 4.5 },
+  /*
+   * `muted on a table header band` used to sit here at 3.10:1. `.table-card
+   * thead th` now takes `--text2` (9.22:1 light / 9.57:1 dark), and nothing
+   * else paints `--muted` on a `--thead` band - `.table-card__group`'s label
+   * is Vuetify's `text-medium-emphasis`. The pair no longer occurs, so it is
+   * no longer carried as accepted debt.
+   */
+  { what: "muted on the sidebar", fg: L.muted, bg: L.sidebar, need: 4.5 },
+  { what: "muted on a disabled control's hover fill", fg: L.muted, bg: hoverOnBg, need: 4.5 },
+  { what: "ok label on its own chip", fg: L.ok, bg: chip.ok, need: 4.5 },
+  { what: "warn label on its own chip", fg: L.warn, bg: chip.warn, need: 4.5 },
+  { what: "err label on its own chip", fg: L.err, bg: chip.err, need: 4.5 },
+  { what: "info label on its own chip", fg: L.info, bg: chip.info, need: 4.5 },
+  { what: "ok as plain text on a card", fg: L.ok, bg: L.card, need: 4.5 },
+  { what: "warn as plain text on a card", fg: L.warn, bg: L.card, need: 4.5 },
+  { what: "err as plain text on a card (the Logout row)", fg: L.err, bg: L.card, need: 4.5 },
+  { what: "info as plain text on a card", fg: L.info, bg: L.card, need: 4.5 },
+  { what: "accent-text as a link on a card", fg: L.accentText, bg: L.card, need: 4.5 },
+  { what: "accent-text on accent-soft over the sidebar (active nav item)", fg: L.accentText, bg: accentSoft.sidebar, need: 4.5 },
+  { what: "accent-text on accent-soft over a card (active tab, avatar initials)", fg: L.accentText, bg: accentSoft.card, need: 4.5 },
+  { what: "white on the filled success colour", fg: "#ffffff", bg: L.ok, need: 4.5 },
+  { what: "white on the filled warning colour", fg: "#ffffff", bg: L.warn, need: 4.5 },
+  { what: "white on the filled error colour", fg: "#ffffff", bg: L.err, need: 4.5 },
+  { what: "white on the filled info colour", fg: "#ffffff", bg: L.info, need: 4.5 },
+  { what: "white on primary-button (accent-strong) - NOT reverted", fg: "#ffffff", bg: L.accentStrong, need: 4.5 },
+  { what: "text on a card", fg: L.text, bg: L.card, need: 4.5 },
+  { what: "text2 on a card", fg: L.text2, bg: L.card, need: 4.5 },
+];
+
+export const measure = () =>
+  LIGHT_PAIRS.map((p) => ({
+    ...p,
+    ratio: Math.round(contrast(p.fg, p.bg) * 100) / 100,
+    passes: contrast(p.fg, p.bg) >= p.need,
+  }));
+
+/** The dark theme was exact as handed over and clears AA - this proves it still does. */
+export const DARK_PAIRS = () => {
+  const D = PALETTE.dark;
+  const dthead = over("#ffffff", D.card, 0.02);
+  return [
+    { what: "muted on a card", fg: D.muted, bg: D.card, need: 4.5 },
+    { what: "muted on the page background", fg: D.muted, bg: D.bg, need: 4.5 },
+    { what: "muted on a --thead band (the tint itself, no longer the header text)", fg: D.muted, bg: dthead, need: 4.5 },
+    { what: "muted on the sidebar", fg: D.muted, bg: D.sidebar, need: 4.5 },
+    { what: "text on a card", fg: D.text, bg: D.card, need: 4.5 },
+    { what: "text2 on a card", fg: D.text2, bg: D.card, need: 4.5 },
+    { what: "ok on its chip", fg: D.ok, bg: over("#41c795", D.card, 0.12), need: 4.5 },
+    { what: "warn on its chip", fg: D.warn, bg: over("#dcaf4e", D.card, 0.13), need: 4.5 },
+    { what: "err on its chip", fg: D.err, bg: over("#e57373", D.card, 0.12), need: 4.5 },
+    { what: "info on its chip", fg: D.info, bg: over("#7da6ec", D.card, 0.12), need: 4.5 },
+    { what: "accent-text on accent-soft over the sidebar", fg: D.accentText, bg: over(D.accent, D.sidebar, 0.12), need: 4.5 },
+    { what: "accent-text on accent-soft over a card", fg: D.accentText, bg: over(D.accent, D.card, 0.12), need: 4.5 },
+  ].map((p) => ({ ...p, ratio: Math.round(contrast(p.fg, p.bg) * 100) / 100, passes: contrast(p.fg, p.bg) >= p.need }));
+};
+
+if (process.argv[1]?.endsWith("theme-aa-ledger.ts")) {
+  const row = (r: { what: string; fg: string; bg: string; ratio: number; need: number; passes: boolean }) =>
+    `${r.passes ? "PASS" : "FAIL"}  ${String(r.ratio).padStart(5)}:1 / ${r.need}  ${r.fg} on ${r.bg}  ${r.what}`;
+  console.log("LIGHT");
+  for (const r of measure()) console.log("  " + row(r));
+  console.log("\nDARK");
+  for (const r of DARK_PAIRS()) console.log("  " + row(r));
+  const f = measure().filter((r) => !r.passes).length;
+  console.log(`\n${f} of ${LIGHT_PAIRS.length} light pairs below AA; ${DARK_PAIRS().filter((r) => !r.passes).length} dark.`);
+  void LIGHT_THEME;
+  void DARK_THEME;
+}