@visns-studio/visns-components 6.0.4 → 6.1.0

package/src/components/generic/GenericIndex.jsx

@@ -923,15 +923,25 @@ function GenericIndex({
                             ) &&
                                 setting.page.tableInfo.heading.length > 0 &&
                                 setting.page.tableInfo.heading.map((h) => (
-                                    <span>
-                                        [<strong>{tableInfo[h.id]}</strong>{' '}
-                                        {h.label}]{' '}
+                                    <span key={h.id}>
+                                        <strong>{tableInfo[h.id]}</strong>{' '}
+                                        {h.label}
                                     </span>
                                 ))}
+                            {/* Square brackets round a count is a convention
+                                from a spreadsheet, not an interface — and it
+                                repeated the page title back at you. The count
+                                alone is what anyone actually reads. */}
                             {total > 0 && (
                                 <span>
-                                    [<strong>{total}</strong> Total{' '}
-                                    {parse(setting.page?.title || '')}]
+                                    {/* Grouped, matching the pager's own
+                                        "of 32,134" — the same figure was
+                                        printing two different ways on one
+                                        screen. */}
+                                    <strong>
+                                        {Number(total).toLocaleString()}
+                                    </strong>{' '}
+                                    total
                                 </span>
                             )}
                         </div>

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/DataGrid.module.scss

@@ -1,25 +1,8 @@
-.btn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.65rem 1rem;
-    cursor: pointer;
-    font-size: 1rem;
-    color: var(--tertiary-color);
-    text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-rgb), 1.1);
-    outline: none;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
+@use 'controls' as *;
 
-    &:hover {
-        color: var(--primary-color);
-        background: var(--secondary-color);
-        border: 1px solid rgba(var(--secondary-rgb), 1.05);
-    }
+.btn {
+    @include button-primary;
 }
-
 /* Clock button styles - Compact version */
 .clockButton {
     display: flex;
@@ -59,8 +42,41 @@
     overflow: hidden !important;
 }
 
-.InovuaReactDataGrid__header {
-    color: var(--primary-color) !important;
+:global {
+    /* The header is a label row, not a heading. It was navy body text at the same
+       size and weight as the data, so it read as another row of values. Smaller,
+       uppercase and recessive puts the emphasis back on the data, and it stays put
+       while the rows scroll under it. */
+    .InovuaReactDataGrid__header {
+        color: var(--muted-color) !important;
+        background: var(--alternate-color) !important;
+        border-bottom: 1px solid var(--border-color) !important;
+        font-size: var(--font-size-xs) !important;
+        font-weight: var(--font-weight-semibold) !important;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+    }
+
+    /* Digits only line up if they are the same width. Applied to the numeric and
+       date columns rather than globally, since tabular figures are wider and
+       would loosen ordinary text. */
+    .InovuaReactDataGrid__cell[data-column-id*='date'],
+    .InovuaReactDataGrid__cell[data-column-id*='Date'],
+    .InovuaReactDataGrid__cell[data-column-id*='count'],
+    .InovuaReactDataGrid__cell[data-column-id*='total'],
+    .InovuaReactDataGrid__cell[data-column-id*='no'],
+    .InovuaReactDataGrid__cell[data-column-id*='number'],
+    .InovuaReactDataGrid__cell[data-column-id*='amount'],
+    .InovuaReactDataGrid__cell[data-column-id*='qty'] {
+        font-variant-numeric: tabular-nums;
+    }
+
+    /* Banding, so the eye can track a row across a wide table. Kept very faint —
+       strong enough to follow, quiet enough not to compete with the hover state
+       or a status colour in the row. */
+    .InovuaReactDataGrid__row--odd .InovuaReactDataGrid__row-cell-wrap {
+        background: var(--alternate-color);
+    }
 }
 
 .InovuaReactDataGrid__row-hover-target:hover {

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

@@ -1,3 +1,8 @@
+@use 'controls' as *;
+
+.btn {
+    @include button-primary;
+}
 .label {
     display: block;
 }
@@ -209,34 +214,50 @@ input[type='file'] {
 
 .modal__header {
     width: 100%;
-    border-bottom: 1px solid rgba(var(--primary-rgb), 0.15);
+    border-bottom: 1px solid var(--border-color);
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0.75rem;
+    gap: var(--spacing-md);
+    padding: var(--spacing-md) var(--spacing-lg);
 
     h1 {
-        color: var(--secondary-color);
+        /* Was --secondary-color, the same red that means destructive
+           everywhere else in the console — so every edit dialog opened
+           looking like a warning. A dialog title is just a title. */
+        color: var(--heading-color);
         margin: 0;
         padding: 0;
-        font-size: 1.15em;
+        font-size: var(--font-size-lg);
+        font-weight: var(--font-weight-bold);
+        letter-spacing: -0.01em;
     }
 }
 
 .modal__close {
-    width: max-content;
-    background: rgba(var(--paragraph-rgb), 0.05);
+    /* A close control should recede until reached for. It was a permanently
+       tinted box with a navy glyph, which read as another action. */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    flex: none;
+    background: none;
     cursor: pointer;
-    padding: 0.25rem;
+    padding: 0;
     margin: 0;
-    outline: none;
     border: none;
-    border-radius: var(--br);
-    display: block;
+    border-radius: var(--radius-sm);
     line-height: 1;
+    transition: background-color var(--speed) var(--ease);
+
+    &:hover {
+        background: var(--hover-color);
+    }
 
     svg {
-        color: var(--primary-color);
+        color: var(--muted-color);
         display: block;
     }
 }
@@ -272,29 +293,7 @@ input[type='file'] {
     }
 }
 
-.btn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.65rem 1rem;
-    cursor: pointer;
-    font-size: 1rem;
-    color: var(--tertiary-color);
-    text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
-    border-radius: var(--br);
-    outline: none;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
-    font-size: 1.25em;
 
-    &:hover {
-        color: var(--primary-color);
-        background: var(--highlight-color);
-        border: 1px solid rgba(var(--highlight-rgb), 1.05);
-    }
-}
 
 .saveBtn {
     width: max-content;

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;
+    }
+}