@visns-studio/visns-components 6.0.5 → 6.1.1

package/src/components/generic/OutstandingRuleEditor.jsx

@@ -0,0 +1,313 @@
+import React from 'react';
+import styles from '../styles/GenericFormBuilder.module.scss';
+
+/**
+ * Per-question "outstanding item" rules.
+ *
+ * OPT-IN for consuming apps that model outstanding/defect follow-up items.
+ * Everything here is inert unless the app's builder config carries
+ * `outstandingItems: { enabled: true, ... }`, so no other project is affected.
+ *
+ * The stored schema is one optional per-field key, `outstanding_when`:
+ *
+ *   key absent    the app's own legacy convention applies (see legacyTriggerId)
+ *   []            this question can never raise an outstanding item
+ *   ['no-']       outstanding when the answer is this OPTION ID
+ *
+ * Option ids are stored, never labels, because editing an option label
+ * regenerates its id — exactly as `conditional_value` does.
+ *
+ * The UI is a single "Outstanding" switch on each row of the field's existing
+ * options editor, with radio semantics: at most one answer may be marked.
+ */
+
+/** Field types the editor offers when the config does not name any. */
+export const DEFAULT_OUTSTANDING_TYPES = ['checkbox'];
+
+/** Types the legacy (unconfigured) convention applies to. */
+export const LEGACY_OUTSTANDING_TYPES = ['checkbox'];
+
+/**
+ * The one label whose sense is inverted under the legacy convention: a "Yes"
+ * here means there IS something else affecting the build.
+ *
+ * Mirrors App\Support\OutstandingRule::SPECIAL_LABEL / ::SPECIAL_SIMILARITY.
+ */
+export const SPECIAL_LABEL =
+    'Other features affecting the build (provide details and photos)';
+export const SPECIAL_SIMILARITY = 85;
+
+// --------------------------------------------------------------- similar_text
+
+/**
+ * Longest common substring, PHP's php_similar_str() — first-found wins on ties,
+ * scanning the first string outermost.
+ */
+const similarStr = (s1, s2) => {
+    let max = 0;
+    let count = 0;
+    let pos1 = 0;
+    let pos2 = 0;
+
+    for (let p = 0; p < s1.length; p++) {
+        for (let q = 0; q < s2.length; q++) {
+            let l = 0;
+            while (
+                p + l < s1.length &&
+                q + l < s2.length &&
+                s1[p + l] === s2[q + l]
+            ) {
+                l++;
+            }
+            if (l > max) {
+                max = l;
+                count++;
+                pos1 = p;
+                pos2 = q;
+            }
+        }
+    }
+
+    return { pos1, pos2, max, count };
+};
+
+/** PHP's php_similar_char(): the common substring, then recurse either side. */
+const similarChar = (s1, s2) => {
+    const { pos1, pos2, max, count } = similarStr(s1, s2);
+    let sum = max;
+
+    if (sum) {
+        if (pos1 && pos2 && count > 1) {
+            sum += similarChar(s1.slice(0, pos1), s2.slice(0, pos2));
+        }
+        if (pos1 + max < s1.length && pos2 + max < s2.length) {
+            sum += similarChar(s1.slice(pos1 + max), s2.slice(pos2 + max));
+        }
+    }
+
+    return sum;
+};
+
+/**
+ * PHP's similar_text($first, $second, $percent) percentage.
+ *
+ * Verified byte-for-byte against PHP 8.5 over the real label corpus plus 400
+ * random strings. The argument order is load-bearing — the function is not
+ * symmetric — and must match the backend's call exactly.
+ *
+ * (PHP compares bytes; this compares UTF-16 code units. Identical for the
+ * ASCII labels in use, and only ever used against an ASCII constant.)
+ */
+export const similarTextPercent = (first, second) => {
+    const s1 = typeof first === 'string' ? first : '';
+    const s2 = typeof second === 'string' ? second : '';
+    const total = s1.length + s2.length;
+
+    if (total === 0) return 0;
+
+    return (similarChar(s1, s2) * 2 * 100) / total;
+};
+
+// ---------------------------------------------------------------- the config
+
+export const outstandingTypesOf = (config) => {
+    const types = config?.types;
+    return Array.isArray(types) ? types : DEFAULT_OUTSTANDING_TYPES;
+};
+
+/** The single gate: config must enable it AND the type must store one option id. */
+export const isOutstandingConfigurable = (config, fieldType) =>
+    !!(config && config.enabled) &&
+    outstandingTypesOf(config).includes(fieldType);
+
+// ------------------------------------------------------------- the rule state
+
+const optionsOf = (field) =>
+    (Array.isArray(field?.options) ? field.options : []).filter(Boolean);
+
+const storedIds = (field) =>
+    Array.isArray(field?.outstanding_when) ? field.outstanding_when : null;
+
+/**
+ * The legacy trigger for a field: 'yes-' for the special "Other features
+ * affecting the build" question, 'no-' for any other checkbox, and null for
+ * every other type (the legacy convention never reached them).
+ *
+ * Mirrors App\Support\OutstandingRule::legacyTrigger().
+ */
+export const legacyTriggerId = (field) => {
+    if (!LEGACY_OUTSTANDING_TYPES.includes(field?.type)) return null;
+
+    return similarTextPercent(field?.label, SPECIAL_LABEL) >=
+        SPECIAL_SIMILARITY
+        ? 'yes-'
+        : 'no-';
+};
+
+/**
+ * What the legacy convention would show as toggled, which is only meaningful
+ * when the field actually offers that answer. A checkbox with no 'no-' option
+ * (or no options yet) has no legacy toggle, and the backend agrees: its trigger
+ * can never match a stored value.
+ */
+export const legacyDefaultOptionId = (field) => {
+    const trigger = legacyTriggerId(field);
+    if (!trigger) return null;
+
+    return optionsOf(field).some((option) => option.id === trigger)
+        ? trigger
+        : null;
+};
+
+/**
+ * Which option should show toggled when the modal opens.
+ *
+ * Configured → the first stored id the field still offers. (No template today
+ * carries more than one; a multi-entry array shows its first and is normalised
+ * to a single id on save.) An explicit `[]` shows nothing toggled.
+ * Unconfigured → whatever the legacy convention would flag.
+ */
+export const deriveOutstandingSelection = (field) => {
+    const stored = storedIds(field);
+
+    if (stored) {
+        const options = optionsOf(field);
+        return (
+            stored.find((id) => options.some((option) => option.id === id)) ??
+            null
+        );
+    }
+
+    return legacyDefaultOptionId(field);
+};
+
+/** Stored ids the field no longer offers — the rename/delete hazard. */
+export const staleOutstandingIds = (field) => {
+    const stored = storedIds(field);
+    if (!stored) return [];
+
+    const options = optionsOf(field);
+    return stored.filter((id) => !options.some((option) => option.id === id));
+};
+
+/**
+ * Fold the toggle state back into the field.
+ *
+ * The key is written only when the outcome differs from what the legacy
+ * convention would produce, so a field nobody configured never gains it just
+ * because its modal was opened and saved:
+ *
+ *   selection === legacy default  → key deleted (including both being null)
+ *   an answer toggled             → ['<id>']
+ *   nothing toggled, legacy would → []  (an explicit "never")
+ *
+ * A stale stored id is not toggleable, so saving normalises it to [] (checkbox)
+ * or an absent key (dropdown) — both meaning "never flags", which is precisely
+ * what an id no answer can produce already meant.
+ */
+export const applyOutstandingRule = (field, selectedId, config) => {
+    if (!isOutstandingConfigurable(config, field?.type)) return field;
+
+    const selection = selectedId || null;
+    const next = { ...field };
+
+    if (selection === legacyDefaultOptionId(field)) {
+        delete next.outstanding_when;
+    } else {
+        next.outstanding_when = selection ? [selection] : [];
+    }
+
+    return next;
+};
+
+/**
+ * One-line summary for field-list chips and tooltips. Returns null when the
+ * field carries no rule, so callers can skip falsy results.
+ */
+export const summariseOutstandingRule = (field) => {
+    const stored = storedIds(field);
+    if (!stored) return null;
+    if (stored.length === 0) return 'Never outstanding';
+
+    const options = optionsOf(field);
+    const labels = stored.map((id) => {
+        const match = options.find((option) => option.id === id);
+        return match ? match.label || match.id : `${id} (missing)`;
+    });
+
+    return `Outstanding: ${labels.join(', ')}`;
+};
+
+/**
+ * Remap a stored id after an option's id was regenerated from an edited label.
+ * Returns the field untouched (same reference) when there is nothing to remap.
+ */
+export const remapOutstandingWhen = (field, previousId, nextId) => {
+    const stored = storedIds(field);
+
+    if (!stored || previousId === nextId) return field;
+    if (!stored.includes(previousId)) return field;
+
+    return {
+        ...field,
+        outstanding_when: stored.map((id) => (id === previousId ? nextId : id)),
+    };
+};
+
+// ------------------------------------------------------------------------ UI
+
+/**
+ * The per-row switch. Radio semantics live in the caller: `onToggle` receives
+ * the id to select, or null when the row was switched off.
+ */
+export function OutstandingOptionToggle({ optionId, label, checked, onToggle }) {
+    return (
+        <label
+            className={`${styles.outstandingFlag} ${
+                checked ? styles.outstandingFlagOn : ''
+            }`}
+            title={
+                checked
+                    ? `An answer of "${label}" raises an outstanding item`
+                    : `Mark "${label}" as the answer that raises an outstanding item`
+            }
+        >
+            <input
+                type="checkbox"
+                checked={checked}
+                onChange={() => onToggle(checked ? null : optionId)}
+            />
+            <span>Outstanding</span>
+        </label>
+    );
+}
+
+/**
+ * The hint shown once above the option rows, plus the amber stale-reference
+ * warning. Renders nothing when there is nothing to say.
+ */
+export function OutstandingRuleHint({ config, staleIds = [] }) {
+    const help = config?.help;
+
+    if (!help && staleIds.length === 0) return null;
+
+    return (
+        <>
+            {help ? (
+                <div className={styles.outstandingHint}>{help}</div>
+            ) : null}
+
+            {staleIds.length > 0 ? (
+                <div className={styles.outstandingStale}>
+                    {staleIds.length === 1
+                        ? 'The answer this question’s outstanding rule refers to no longer exists'
+                        : 'Answers this question’s outstanding rule refers to no longer exist'}{' '}
+                    ({staleIds.join(', ')}) — editing an answer’s label gives it
+                    a new id. Set the switch on the right answer, or leave every
+                    switch off to mean “never outstanding”. Saving tidies this
+                    up.
+                </div>
+            ) : null}
+        </>
+    );
+}

package/src/components/styles/GenericDashboard.module.scss

@@ -814,3 +814,158 @@
     color: #888;
     padding: 20px;
 }
+
+/* ---------------------------------------------------------------------------
+   Loading skeletons
+   Neutral greys only (no brand colours) so every tenant gets a safe default.
+   Keyframes are uniquely prefixed to avoid colliding with host app globals.
+--------------------------------------------------------------------------- */
+@keyframes visns-dash-skeleton-sweep {
+    0% {
+        background-position: 150% 0;
+    }
+    100% {
+        background-position: -150% 0;
+    }
+}
+
+.skeleton {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.skeletonBlock {
+    display: block;
+    box-sizing: border-box;
+    border-radius: var(--br, 5px);
+    background-color: rgba(0, 0, 0, 0.06);
+    background-image: linear-gradient(
+        90deg,
+        rgba(0, 0, 0, 0) 0%,
+        rgba(0, 0, 0, 0.05) 50%,
+        rgba(0, 0, 0, 0) 100%
+    );
+    background-repeat: no-repeat;
+    background-size: 150% 100%;
+    animation: visns-dash-skeleton-sweep 1.4s ease-in-out infinite;
+}
+
+/* Counter: matches .widgetNo (2rem bottom padding, 3em value) */
+.skeletonCounter {
+    width: 100%;
+    padding: 0 0 2rem 0;
+    box-sizing: border-box;
+}
+
+.skeletonCounterValue {
+    width: 55%;
+    max-width: 220px;
+    height: 3.6rem;
+    margin: 0 auto;
+}
+
+/* Counter button: matches .widgetLink .btn */
+.skeletonButtonRow {
+    width: 100%;
+    display: block;
+}
+
+.skeletonButton {
+    width: 180px;
+    max-width: 100%;
+    height: 34px;
+    margin: 0 auto;
+}
+
+/* Charts: the wrapper takes widget.height (or the 600px chart default) inline */
+.skeletonChart {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 20px 0;
+}
+
+.skeletonChartStrips {
+    align-items: flex-start;
+    gap: 14px;
+}
+
+.skeletonStrip {
+    height: 16px;
+    min-height: 16px;
+}
+
+.skeletonCircle {
+    width: 60%;
+    max-width: 260px;
+    aspect-ratio: 1 / 1;
+    border-radius: 50%;
+}
+
+/* Table: header 44px / rows 38px, matching .table-container th and td */
+.skeletonTable {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    box-sizing: border-box;
+    border: 1px solid #dadce0;
+    border-radius: var(--br, 5px);
+    overflow: hidden;
+}
+
+.skeletonTableHeader {
+    width: 100%;
+    height: 44px;
+    border-radius: 0;
+}
+
+.skeletonTableRow {
+    width: 100%;
+    height: 38px;
+    border-radius: 0;
+}
+
+/* List: rows sized like .dashList li button */
+.skeletonList {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    font-size: 0.875rem;
+}
+
+.skeletonListRow {
+    width: 100%;
+    height: 30px;
+    border-radius: 0;
+
+    &:first-child {
+        border-top-left-radius: var(--br, 5px);
+        border-top-right-radius: var(--br, 5px);
+    }
+
+    &:last-child {
+        border-bottom-left-radius: var(--br, 5px);
+        border-bottom-right-radius: var(--br, 5px);
+    }
+}
+
+.skeletonTimeline {
+    width: 100%;
+}
+
+.skeletonGeneric {
+    width: 100%;
+    height: 120px;
+}
+
+/* Keep the shape, drop the motion */
+@media (prefers-reduced-motion: reduce) {
+    .skeletonBlock {
+        animation: none;
+    }
+}

package/src/components/styles/GenericFormBuilder.module.scss

@@ -2275,6 +2275,66 @@ select:not(:placeholder-shown) + .fi__span {
     }
 }
 
+// Outstanding item rule — a per-answer switch inside the options editor, plus
+// its hint and stale-reference warning. All of it renders only when the
+// consuming app enables `outstandingItems` in its builder config.
+.outstandingHint {
+    font-size: 0.78rem;
+    line-height: 1.45;
+    color: rgba(var(--paragraph-color-rgb), 0.65);
+    padding: 0 0 6px;
+}
+
+.outstandingStale {
+    background: #fff8e1;
+    border: 1px solid #f4c544;
+    border-radius: 6px;
+    padding: 8px 12px;
+    margin-bottom: 6px;
+    color: #7a5c00;
+    font-size: 0.8rem;
+    line-height: 1.45;
+}
+
+.outstandingFlag {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 9px;
+    border: 1px solid rgba(var(--primary-rgb), 0.15);
+    border-radius: 6px;
+    background: white;
+    font-size: 0.72rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: rgba(var(--paragraph-color-rgb), 0.45);
+    cursor: pointer;
+    user-select: none;
+    transition: all 0.2s ease;
+
+    &:hover {
+        border-color: var(--primary-color);
+        color: var(--paragraph-color);
+    }
+
+    // The modal forces a 44px min-height on every input; a tick box must opt out.
+    input[type='checkbox'] {
+        margin: 0;
+        width: auto !important;
+        height: auto !important;
+        min-height: 0 !important;
+        cursor: pointer;
+    }
+}
+
+.outstandingFlagOn {
+    border-color: #e0a800;
+    background: #fff8e1;
+    color: #7a5c00;
+}
+
 .btnCancel {
     background: rgba(var(--paragraph-color-rgb), 0.08) !important;
     color: var(--paragraph-color) !important;

package/src/components/styles/Login.module.scss

@@ -52,6 +52,17 @@
     // A scrim anchored to the bottom-left, where the copy sits — not a flat
     // wash over the whole image, which would dull the dusk light that makes
     // the photograph worth using.
+    //
+    // The foot is a near-solid plate rather than a fade. The brand line has to
+    // hold against whatever the photograph is doing behind it, and this one is
+    // bright exactly where the type sits, which left "Prime Builders" washing
+    // into the render. Held high — 0.88 still at 18%, which is where the ink
+    // block ends — so the whole block reads on one ground, then released
+    // quickly to 0.06 at the top, so the sky above is still a photograph and
+    // not a tint.
+    //
+    // Shared verbatim with the supervisor PWA
+    // (prime-web-nextjs/app/login/Login.module.scss). If one moves, move both.
     &::after {
         content: '';
         position: absolute;
@@ -59,9 +70,11 @@
         background:
             linear-gradient(
                 to top,
-                rgba(16, 25, 42, 0.92) 0%,
-                rgba(16, 25, 42, 0.55) 32%,
-                rgba(16, 25, 42, 0.08) 62%
+                rgba(16, 25, 42, 0.94) 0%,
+                rgba(16, 25, 42, 0.88) 18%,
+                rgba(16, 25, 42, 0.62) 42%,
+                rgba(16, 25, 42, 0.22) 70%,
+                rgba(16, 25, 42, 0.06) 100%
             ),
             linear-gradient(
                 to right,
@@ -90,6 +103,11 @@
     font-size: 0.72rem;
     font-weight: 700;
     letter-spacing: 0.22em;
+    // Stated, not left to the cascade: global.css sets
+    // `p { line-height: var(--para-height) }`, which is 1.6 here. That put the
+    // kicker on a taller line than the same kicker in the PWA, so the red dash
+    // sat at a different height and the gap beneath it read as wider.
+    line-height: 1.4;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.75);
     // The single use of the logo's red in the whole screen.
@@ -114,6 +132,10 @@
     line-height: 1;
     // Tight tracking at display size — Barlow opens up as it scales.
     letter-spacing: -0.02em;
+    // Stated rather than inherited from .brandInk: this is the one line on the
+    // screen that has to be white, and finding that out should not mean
+    // reading the parent.
+    color: #fff;
     text-wrap: balance;
 }
 
@@ -123,6 +145,10 @@
     font-size: 1rem;
     font-weight: 300;
     line-height: 1.5;
+    // No-op against this app's globals, but the PWA's own `p` rule tracks body
+    // copy at 0.015rem, so the value is pinned in both files rather than left
+    // to whichever global layer the screen happens to be rendered under.
+    letter-spacing: 0;
     color: rgba(255, 255, 255, 0.82);
 }