@visns-studio/visns-components 6.0.4 → 6.1.0

package/src/components/generic/GenericFormBuilder.jsx

@@ -1,6 +1,6 @@
 import '../styles/global.css';
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import StandardModal from './StandardModal';
 import { arrayMove } from '@dnd-kit/sortable';
@@ -38,6 +38,8 @@ import {
     Search,
     ChevronDown,
     ChevronRight,
+    Copy,
+    List,
 } from 'lucide-react';
 import { confirmDialog } from '../utils/ConfirmDialog';
 
@@ -48,6 +50,16 @@ import Breadcrumb from '../Breadcrumb';
 import CustomFetch from '../Fetch';
 import SketchConfig from '../sketch/json/config.json';
 import ConditionalDisplayEditor from './ConditionalDisplayEditor';
+import {
+    OutstandingOptionToggle,
+    OutstandingRuleHint,
+    applyOutstandingRule,
+    deriveOutstandingSelection,
+    isOutstandingConfigurable,
+    remapOutstandingWhen,
+    staleOutstandingIds,
+    summariseOutstandingRule,
+} from './OutstandingRuleEditor';
 
 import styles from '../styles/GenericFormBuilder.module.scss'; // Import the CSS module
 
@@ -55,8 +67,19 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
     const editorRef = useRef(null);
     const routeParams = useParams();
 
-    const { dynamicDropdowns, fetchUrl, fields, parentUrl, formTitle } =
-        setting;
+    const {
+        dynamicDropdowns,
+        fetchUrl,
+        fields,
+        parentUrl,
+        formTitle,
+        /**
+         * Opt-in, per-question "outstanding item" rules. Absent for every app
+         * that does not model outstanding items, in which case none of the
+         * `outstanding_when` handling below does anything at all.
+         */
+        outstandingItems,
+    } = setting;
 
     const { dataId } = useParams();
     const [data, setData] = useState({});
@@ -113,6 +136,17 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
         key: '',
     });
     const [modalFormShow, setModalFormShow] = useState(false);
+    /**
+     * The open field modal's outstanding-item switch. `touched` is false until
+     * the author actually flips one, and until then the displayed state is
+     * derived from the field on every render — so a brand-new question picks up
+     * the standard rule as soon as its answers exist, rather than being frozen
+     * at whatever was true when the modal opened.
+     */
+    const [outstandingRule, setOutstandingRule] = useState({
+        touched: false,
+        id: null,
+    });
     const [roles, setRoles] = useState([]);
     const [hoveredField, setHoveredField] = useState(null);
     const [activeId, setActiveId] = useState(null);
@@ -124,10 +158,59 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
     });
     const [moveToPosition, setMoveToPosition] = useState('');
     const [collapsedSections, setCollapsedSections] = useState(new Set());
+
+    /**
+     * Compact mode renders each field as a one-line summary instead of a live
+     * control. Site Start Inspection has 87 fields; previewing them all means
+     * two dozen full-height textareas and file pickers, so arranging the form
+     * turns into a scroll expedition through mostly empty boxes. Preview is
+     * still a click away when you want to see the real thing.
+     */
+    const [compactMode, setCompactMode] = useState(true);
+    const [showOutline, setShowOutline] = useState(true);
     const sortTriggeredRef = useRef(false);
 
     const canvasTypes = SketchConfig.canvasTypes;
 
+    /**
+     * Templates whose fields are composed per form rather than authored here
+     * (outstanding items build theirs from the linked inspection). Offering
+     * "add a field" on one of these would be offering something that has no
+     * effect.
+     */
+    const dynamicFields = data.field_source === 'dynamic';
+
+    /** Does the open field carry an editable outstanding-item rule at all? */
+    const outstandingEnabled = isOutstandingConfigurable(
+        outstandingItems,
+        dataField.type
+    );
+
+    /**
+     * Which answer currently has its "Outstanding" switch on. Always sanitised
+     * against the answers the field offers right now, so renaming or deleting
+     * an answer can never leave a dangling id to be saved.
+     */
+    const outstandingSelection = useMemo(() => {
+        if (!outstandingEnabled) return null;
+
+        const candidate = outstandingRule.touched
+            ? outstandingRule.id
+            : deriveOutstandingSelection(dataField);
+
+        return (dataField.options || []).some(
+            (option) => option && option.id === candidate
+        )
+            ? candidate
+            : null;
+    }, [outstandingEnabled, outstandingRule, dataField]);
+
+    /** Stored ids the field no longer offers — drives the amber warning. */
+    const outstandingStaleIds = useMemo(
+        () => (outstandingEnabled ? staleOutstandingIds(dataField) : []),
+        [outstandingEnabled, dataField]
+    );
+
     // Generate compact field info for display in the center top
     const getFieldInfo = (field) => {
         const fieldTypeLabel =
@@ -162,6 +245,14 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
             info.push('Conditional');
         }
 
+        // Only surfaced for apps that opted into outstanding-item rules.
+        if (outstandingItems?.enabled) {
+            const outstandingSummary = summariseOutstandingRule(field);
+            if (outstandingSummary) {
+                info.push(outstandingSummary);
+            }
+        }
+
         return info.join(' • ');
     };
 
@@ -209,6 +300,13 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
             tooltip += `Show when "${field.conditional_field}" = "${field.conditional_value}"\n`;
         }
 
+        if (outstandingItems?.enabled) {
+            const outstandingSummary = summariseOutstandingRule(field);
+            if (outstandingSummary) {
+                tooltip += `\nOutstanding rule: ${outstandingSummary}\n`;
+            }
+        }
+
         // Add other conditional properties if they exist
         if (field.conditionalOperator) {
             tooltip += `Operator: ${field.conditionalOperator}\n`;
@@ -236,6 +334,181 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
         return collapsed;
     };
 
+    /**
+     * Sections are implicit: `type: 'section'` acts as a divider in a flat
+     * array, and everything after it belongs to it until the next one. This
+     * turns that into groups for the outline and the section headers.
+     */
+    const sectionGroups = useMemo(() => {
+        const groups = [];
+        let current = null;
+
+        (data.detail || []).forEach((field, index) => {
+            if (field.type === 'section') {
+                current = {
+                    id: field.id,
+                    label: field.label || 'Untitled section',
+                    index,
+                    fields: [],
+                };
+                groups.push(current);
+                return;
+            }
+
+            // Fields before the first section still need somewhere to live.
+            if (!current) {
+                current = {
+                    id: '__ungrouped',
+                    label: 'Before first section',
+                    index: -1,
+                    fields: [],
+                };
+                groups.push(current);
+            }
+
+            current.fields.push({ field, index });
+        });
+
+        return groups;
+    }, [data.detail]);
+
+    /**
+     * A duplicate needs its own id or React keys collide and the sortable
+     * list starts swapping the wrong rows. Ids are "<slug>::<uuid>", so the
+     * slug is kept for readability and the uuid regenerated.
+     */
+    const freshFieldId = (existingId) => {
+        const slug = String(existingId || 'field').split('::')[0];
+        return `${slug}::${uuidv4()}`;
+    };
+
+    const handleDuplicateField = (id) => {
+        const index = (data.detail || []).findIndex((item) => item.id === id);
+        if (index < 0) return;
+
+        const original = data.detail[index];
+        const copy = {
+            ...original,
+            id: freshFieldId(original.id),
+            label: `${original.label} (copy)`,
+        };
+
+        const newDetail = [...data.detail];
+        newDetail.splice(index + 1, 0, copy);
+        setData((items) => ({ ...items, detail: newDetail }));
+        toast.success(`Duplicated "${original.label}".`);
+    };
+
+    /**
+     * Duplicating a section takes its fields with it — the whole point is the
+     * repeated checkbox / photo / comments block, which is tedious to rebuild
+     * one field at a time.
+     */
+    const handleDuplicateSection = (sectionId) => {
+        const group = sectionGroups.find((entry) => entry.id === sectionId);
+        if (!group || group.index < 0) return;
+
+        const section = data.detail[group.index];
+        const block = [section, ...group.fields.map((entry) => entry.field)];
+        const copies = block.map((field, offset) => ({
+            ...field,
+            id: freshFieldId(field.id),
+            label: offset === 0 ? `${field.label} (copy)` : field.label,
+            // A copied field must not keep pointing at the original's
+            // conditional source, or editing one would silently drive both.
+            conditional_field: '',
+            conditional_value: '',
+        }));
+
+        const insertAt = group.index + block.length;
+        const newDetail = [...data.detail];
+        newDetail.splice(insertAt, 0, ...copies);
+        setData((items) => ({ ...items, detail: newDetail }));
+        toast.success(
+            `Duplicated "${section.label}" and ${group.fields.length} field${
+                group.fields.length === 1 ? '' : 's'
+            }.`
+        );
+    };
+
+
+    /**
+     * Which section is currently on screen, so the outline reflects where you
+     * are rather than just listing what exists. Without it the rail is a
+     * static menu and you still lose your place in 87 fields.
+     */
+    const [activeSection, setActiveSection] = useState(null);
+
+    useEffect(() => {
+        if (!showOutline || sectionGroups.length === 0) return undefined;
+
+        const onScroll = () => {
+            let current = null;
+            for (const group of sectionGroups) {
+                if (group.index < 0) continue;
+                const node = document.getElementById(`fb-field-${group.id}`);
+                if (!node) continue;
+                // A section counts as current once its header passes the
+                // upper third of the viewport.
+                if (node.getBoundingClientRect().top <= window.innerHeight / 3) {
+                    current = group.id;
+                }
+            }
+            setActiveSection(current);
+        };
+
+        onScroll();
+        window.addEventListener('scroll', onScroll, { passive: true });
+
+        return () => window.removeEventListener('scroll', onScroll);
+    }, [showOutline, sectionGroups]);
+
+
+    /**
+     * The app header is `position: fixed` with a content-driven height, so a
+     * hard-coded sticky offset puts the builder toolbar underneath it.
+     * Measure it and expose it as a custom property instead.
+     */
+    useEffect(() => {
+        const measure = () => {
+            // The <header> TAG, not a class: GenericMain renders it with a
+            // CSS-module class, so the DOM name is hashed and a `.header`
+            // selector never matches.
+            const header = document.querySelector('header');
+
+            // Only a fixed or sticky header overlaps the page; a static one
+            // scrolls away and must not add an offset.
+            let height = 0;
+            if (header) {
+                const pos = window.getComputedStyle(header).position;
+                if (pos === 'fixed' || pos === 'sticky') {
+                    height = Math.round(header.getBoundingClientRect().height);
+                }
+            }
+
+            document.documentElement.style.setProperty(
+                '--fb-sticky-top',
+                `${height}px`
+            );
+        };
+
+        measure();
+        window.addEventListener('resize', measure);
+        // Fonts and logo images can land after first paint and change the
+        // header height, so re-measure once things settle.
+        const settle = setTimeout(measure, 400);
+
+        return () => {
+            window.removeEventListener('resize', measure);
+            clearTimeout(settle);
+        };
+    }, []);
+
+    const scrollToField = (fieldId) => {
+        const node = document.getElementById(`fb-field-${fieldId}`);
+        if (node) node.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    };
+
     const toggleSectionCollapse = (sectionId) => {
         setCollapsedSections((prev) => {
             const newSet = new Set(prev);
@@ -273,6 +546,155 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
     const collapsedFieldIds = getCollapsedFieldIds();
 
     // Create sortable field item using @dnd-kit
+
+    /**
+     * Compact edit row.
+     *
+     * Deliberately shares NO markup or styles with SortableFieldItem. That
+     * component renders a tall preview card — absolutely positioned control
+     * bar, fixed heights, a two-column grid — and every attempt to override
+     * those from the outside produced a different broken layout. Two modes,
+     * two renderers, no shared stylesheet.
+     *
+     * The behaviour is identical: same sortable id, same handlers, same
+     * DndContext. Only the presentation differs.
+     */
+
+    /**
+     * Preview row — the form as it will actually appear.
+     *
+     * No drag handle, index badge, action icons or hover chrome: editing all
+     * happens in the compact list, so carrying the authoring furniture in
+     * here only obscures what the preview is for. Not sortable either, which
+     * is why it needs no DndContext.
+     */
+    const PreviewFieldItem = ({ field }) => (
+        <div
+            className={`${renderClassName(field)} ${styles.pvItem}`}
+            data-field-size={field.size}
+        >
+            {renderField(field)}
+        </div>
+    );
+
+    const CompactFieldRow = ({ field, index: counter }) => {
+        const {
+            attributes,
+            listeners,
+            setNodeRef,
+            transform,
+            transition,
+            isDragging,
+        } = useSortable({
+            id: field.id,
+            data: { type: 'field', size: field.size, index: counter },
+        });
+
+        const isSection = field.type === 'section';
+        const group = isSection
+            ? sectionGroups.find((entry) => entry.id === field.id)
+            : null;
+        const isSectionCollapsed = isSection && collapsedSections.has(field.id);
+
+        const isDimmed =
+            searchQuery &&
+            !(
+                field.label?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                field.type?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                field.id?.toLowerCase().includes(searchQuery.toLowerCase())
+            );
+
+        return (
+            <div
+                ref={setNodeRef}
+                id={`fb-field-${field.id}`}
+                className={`${styles.cRow} ${isSection ? styles.cRowSection : ''} ${
+                    isDragging ? styles.cRowDragging : ''
+                }`}
+                style={{
+                    transform: CSS.Transform.toString(transform),
+                    transition: isDragging ? 'none' : transition,
+                    opacity: isDimmed ? 0.3 : 1,
+                }}
+            >
+                <span
+                    {...attributes}
+                    {...listeners}
+                    className={styles.cGrip}
+                    title="Drag to reorder"
+                >
+                    <ChevronVertical size={15} strokeWidth={2.5} />
+                </span>
+
+                {isSection ? (
+                    <button
+                        className={styles.cCollapse}
+                        onClick={() => toggleSectionCollapse(field.id)}
+                        title={isSectionCollapsed ? 'Expand' : 'Collapse'}
+                    >
+                        {isSectionCollapsed ? (
+                            <ChevronRight size={15} />
+                        ) : (
+                            <ChevronDown size={15} />
+                        )}
+                    </button>
+                ) : (
+                    <span className={styles.cNum}>{counter + 1}</span>
+                )}
+
+                <span className={styles.cLabel} title={field.label}>
+                    {field.label || <em>Untitled</em>}
+                </span>
+
+                <span className={styles.cMeta}>
+                    {isSection
+                        ? `${group ? group.fields.length : 0} fields`
+                        : getFieldInfo(field)}
+                </span>
+
+                <span className={styles.cActions}>
+                    <button
+                        title={
+                            isSection
+                                ? 'Duplicate section and its fields'
+                                : 'Duplicate field'
+                        }
+                        onClick={() =>
+                            isSection
+                                ? handleDuplicateSection(field.id)
+                                : handleDuplicateField(field.id)
+                        }
+                    >
+                        <Copy size={15} />
+                    </button>
+                    <button
+                        title="Move to position"
+                        onClick={() => {
+                            setMoveToDialog({
+                                show: true,
+                                fieldId: field.id,
+                                currentPos: counter + 1,
+                            });
+                            setMoveToPosition(String(counter + 1));
+                        }}
+                    >
+                        <ArrowUpDown size={15} />
+                    </button>
+                    <button title="Edit" onClick={() => handleEdit(counter)}>
+                        <Pencil size={15} />
+                    </button>
+                    <button
+                        className={styles.cDelete}
+                        title="Delete"
+                        onClick={() => handleDeleteField(field.id, field.label)}
+                    >
+                        <TrashCan size={15} />
+                    </button>
+                </span>
+            </div>
+        );
+    };
+
     const SortableFieldItem = ({ field, index: counter }) => {
         const {
             attributes,
@@ -413,6 +835,27 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                 )}
                             </button>
                         )}
+                        <button
+                            className={styles.duplicateBtn}
+                            data-tooltip-id="action-tooltip"
+                            data-tooltip-content={
+                                isSection
+                                    ? 'Duplicate section and its fields'
+                                    : 'Duplicate field'
+                            }
+                            data-tooltip-place="top"
+                            onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                if (isSection) {
+                                    handleDuplicateSection(field.id);
+                                } else {
+                                    handleDuplicateField(field.id);
+                                }
+                            }}
+                        >
+                            <Copy strokeWidth={2.5} size={17} />
+                        </button>
                         <ArrowUpDown
                             className={styles.moveIcon}
                             strokeWidth={3}
@@ -464,7 +907,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                         />
                     </div>
                 </div>
-                <div className={styles.fieldContent}>
+                <div className={styles.fieldContent} id={`fb-field-${field.id}`}>
                     {renderField(field)}
                 </div>
             </div>
@@ -662,7 +1105,11 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
             textareaHeight: 'normal',
             conditional_field: '',
             conditional_value: '',
+            // `outstanding_when` is deliberately NOT seeded here: absent must
+            // stay absent so a field that was never configured never gains the
+            // key just by being opened.
         }));
+        setOutstandingRule({ touched: false, id: null });
         setModalType(() => ({
             type: 'create',
             key: '',
@@ -682,10 +1129,28 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
             const { name, value } = e.target;
             const updatedValue = name === 'id' ? slugify(value) : value;
 
-            setDataField((items) => ({
-                ...items,
-                [name]: updatedValue,
-            }));
+            setDataField((items) => {
+                const next = { ...items, [name]: updatedValue };
+
+                // Switching to a type that cannot carry an outstanding rule
+                // would strand the key with no UI left to edit it.
+                if (
+                    name === 'type' &&
+                    'outstanding_when' in next &&
+                    !isOutstandingConfigurable(outstandingItems, updatedValue)
+                ) {
+                    delete next.outstanding_when;
+                }
+
+                return next;
+            });
+
+            if (
+                name === 'type' &&
+                !isOutstandingConfigurable(outstandingItems, updatedValue)
+            ) {
+                setOutstandingRule({ touched: false, id: null });
+            }
 
             if (name === 'label') {
                 setDataField((items) => ({
@@ -715,6 +1180,10 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                 ...detail[key],
             }));
 
+            // Untouched: the switch shows whatever the stored rule — or the
+            // standard rule — implies, recomputed as the author edits.
+            setOutstandingRule({ touched: false, id: null });
+
             setModalType(() => ({
                 type: 'update',
                 key: key,
@@ -793,6 +1262,11 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
 
         field.id = formatFieldId(field.id);
 
+        // No-op unless the consuming app enabled outstanding-item rules. Writes
+        // `outstanding_when` only when the switch differs from the standard
+        // rule, so opening and saving an untouched field changes nothing.
+        field = applyOutstandingRule(field, outstandingSelection, outstandingItems);
+
         let errorMessage = validateField(field);
 
         if (errorMessage === '') {
@@ -1348,16 +1822,23 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
             <div className={styles.grid}>
                 <div className={styles.grid__row}>
                     <div className={styles.grid__fullwidth}>
-                        <div className={styles.formSplit}>
-                            <div className={styles.gridtxt__header}>
+                        <div
+                            className={styles.formSplit}
+                        >
+                            <div className={styles.stickyHead}>
+                            <div
+                                className={`${styles.gridtxt__header} ${styles.builderBar}`}
+                            >
                                 <span>
                                     {formTitle
                                         ? formTitle
                                         : 'Form Template Preview'}
                                 </span>
-                            </div>
+                                <div className={styles.builderTools}>
                             {data.detail && data.detail.length > 5 && (
-                                <div className={styles.searchBar}>
+                                <div
+                                    className={`${styles.searchBar} ${styles.searchBarTop}`}
+                                >
                                     <Search
                                         size={16}
                                         className={styles.searchIcon}
@@ -1406,6 +1887,108 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                     )}
                                 </div>
                             )}
+                                    <span className={styles.fieldCount}>
+                                        {(data.detail || []).length} fields ·{' '}
+                                        {sectionGroups.filter(
+                                            (group) => group.index >= 0
+                                        ).length}{' '}
+                                        sections
+                                    </span>
+                                    <button
+                                        className={`${styles.toolBtn} ${
+                                            showOutline ? styles.toolBtnOn : ''
+                                        }`}
+                                        onClick={() =>
+                                            setShowOutline((open) => !open)
+                                        }
+                                        data-tooltip-id="action-tooltip"
+                                        data-tooltip-content="Toggle the section outline"
+                                    >
+                                        <List size={15} /> Sections
+                                    </button>
+                                    <div className={styles.modeSwitch}>
+                                        <button
+                                            className={
+                                                compactMode
+                                                    ? styles.modeOn
+                                                    : undefined
+                                            }
+                                            onClick={() => setCompactMode(true)}
+                                        >
+                                            Edit
+                                        </button>
+                                        <button
+                                            className={
+                                                compactMode
+                                                    ? undefined
+                                                    : styles.modeOn
+                                            }
+                                            onClick={() =>
+                                                setCompactMode(false)
+                                            }
+                                        >
+                                            Preview
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                            {showOutline && sectionGroups.length > 0 && (
+                                <nav className={styles.sectionNav}>
+                                    {sectionGroups.map((group) => {
+                                        const collapsed = collapsedSections.has(
+                                            group.id
+                                        );
+
+                                        return (
+                                            <button
+                                                key={group.id}
+                                                className={`${styles.sectionChip} ${
+                                                    activeSection === group.id
+                                                        ? styles.sectionChipActive
+                                                        : ''
+                                                } ${
+                                                    collapsed
+                                                        ? styles.sectionChipCollapsed
+                                                        : ''
+                                                }`}
+                                                title={
+                                                    collapsed
+                                                        ? `${group.label} (collapsed)`
+                                                        : group.label
+                                                }
+                                                onClick={() => {
+                                                    // Jumping into a collapsed
+                                                    // section opens it first,
+                                                    // otherwise the scroll
+                                                    // lands on nothing.
+                                                    if (collapsed) {
+                                                        toggleSectionCollapse(
+                                                            group.id
+                                                        );
+                                                    }
+                                                    scrollToField(group.id);
+                                                }}
+                                            >
+                                                <span
+                                                    className={
+                                                        styles.sectionChip__label
+                                                    }
+                                                >
+                                                    {group.label}
+                                                </span>
+                                                <span
+                                                    className={
+                                                        styles.sectionChip__count
+                                                    }
+                                                >
+                                                    {group.fields.length}
+                                                </span>
+                                            </button>
+                                        );
+                                    })}
+                                </nav>
+                            )}
+                            </div>
                             {data.detail && data.detail.length > 0 ? (
                                 <div className={styles.modal__content}>
                                     <div className={styles.formcontainer}>
@@ -1431,16 +2014,30 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                                 strategy={rectSortingStrategy}
                                             >
                                                 <div
-                                                    className={styles.modalForm}
+                                                    className={`${
+                                                        compactMode
+                                                            ? styles.cList
+                                                            : styles.modalForm
+                                                    } ${
+                                                        compactMode
+                                                            ? ''
+                                                            : styles.pvForm
+                                                    }`}
                                                 >
                                                     {data.detail.map(
-                                                        (field, index) => (
-                                                            <SortableFieldItem
-                                                                key={field.id}
-                                                                field={field}
-                                                                index={index}
-                                                            />
-                                                        )
+                                                        (field, index) =>
+                                                            compactMode ? (
+                                                                <CompactFieldRow
+                                                                    key={field.id}
+                                                                    field={field}
+                                                                    index={index}
+                                                                />
+                                                            ) : (
+                                                                <PreviewFieldItem
+                                                                    key={field.id}
+                                                                    field={field}
+                                                                />
+                                                            )
                                                     )}
                                                 </div>
                                             </SortableContext>
@@ -1481,21 +2078,58 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                     </div>
                                 </div>
                             ) : (
-                                <div className={styles.emptyState}>
-                                    <p>
-                                        No fields added yet. Click "Add Field"
-                                        to get started.
-                                    </p>
+                                <div
+                                    className={`${styles.emptyState} ${
+                                        dynamicFields
+                                            ? styles.emptyStateDynamic
+                                            : ''
+                                    }`}
+                                >
+                                    <span className={styles.emptyState__icon}>
+                                        <List size={26} strokeWidth={1.75} />
+                                    </span>
+                                    {dynamicFields ? (
+                                        <>
+                                            <h3>Fields are added automatically</h3>
+                                            <p>
+                                                This form builds its own fields
+                                                each time it is created, from
+                                                the outstanding items on the
+                                                linked inspection. Anything
+                                                added here would not appear on
+                                                the form.
+                                            </p>
+                                        </>
+                                    ) : (
+                                        <>
+                                            <h3>This form has no fields yet</h3>
+                                            <p>
+                                                Add a section to group related
+                                                questions, then add the fields
+                                                that go inside it.
+                                            </p>
+                                            <button
+                                                className={styles.btn}
+                                                onClick={handleOpenModal}
+                                            >
+                                                Add the first field
+                                            </button>
+                                        </>
+                                    )}
                                 </div>
                             )}
                         </div>
                         <div className={styles.polActions}>
-                            <button
-                                className={styles.btn}
-                                onClick={handleOpenModal}
-                            >
-                                Add Field
-                            </button>
+                            {/* Nothing to author on a dynamic template, but
+                                Edit Form stays so it can still be renamed. */}
+                            {!dynamicFields && (
+                                <button
+                                    className={styles.btn}
+                                    onClick={handleOpenModal}
+                                >
+                                    Add Field
+                                </button>
+                            )}
                             <button
                                 className={styles.btn}
                                 onClick={handleOpenModalForm}
@@ -1853,6 +2487,14 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                                     </span>
                                                 )}
                                             </div>
+                                            {outstandingEnabled ? (
+                                                <OutstandingRuleHint
+                                                    config={outstandingItems}
+                                                    staleIds={
+                                                        outstandingStaleIds
+                                                    }
+                                                />
+                                            ) : null}
                                             {dataField.options.length >
                                             0 ? (
                                                 <div
@@ -1890,6 +2532,15 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                                                     onChange={(
                                                                         e
                                                                     ) => {
+                                                                        // Captured before the id is regenerated so any
+                                                                        // outstanding rule pointing at it can follow.
+                                                                        const previousOptionId =
+                                                                            dataField
+                                                                                .options[
+                                                                                optionKey
+                                                                            ]
+                                                                                ?.id;
+                                                                        const nextOptionId = `${slugify(e.target.value)}-`;
                                                                         const newOptions =
                                                                             [
                                                                                 ...dataField.options,
@@ -1901,18 +2552,65 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                                                         newOptions[
                                                                             optionKey
                                                                         ].id =
-                                                                            `${slugify(e.target.value)}-`;
+                                                                            nextOptionId;
                                                                         setDataField(
                                                                             (
                                                                                 items
-                                                                            ) => ({
-                                                                                ...items,
-                                                                                options:
-                                                                                    newOptions,
-                                                                            })
+                                                                            ) =>
+                                                                                remapOutstandingWhen(
+                                                                                    {
+                                                                                        ...items,
+                                                                                        options:
+                                                                                            newOptions,
+                                                                                    },
+                                                                                    previousOptionId,
+                                                                                    nextOptionId
+                                                                                )
+                                                                        );
+
+                                                                        // An unsaved switch has to follow the
+                                                                        // rename too, or it would be sanitised
+                                                                        // away as a dangling id.
+                                                                        setOutstandingRule(
+                                                                            (
+                                                                                rule
+                                                                            ) =>
+                                                                                rule.touched &&
+                                                                                rule.id ===
+                                                                                    previousOptionId
+                                                                                    ? {
+                                                                                          ...rule,
+                                                                                          id: nextOptionId,
+                                                                                      }
+                                                                                    : rule
                                                                         );
                                                                     }}
                                                                 />
+                                                                {outstandingEnabled ? (
+                                                                    <OutstandingOptionToggle
+                                                                        optionId={
+                                                                            option.id
+                                                                        }
+                                                                        label={
+                                                                            option.label ||
+                                                                            option.id
+                                                                        }
+                                                                        checked={
+                                                                            outstandingSelection ===
+                                                                            option.id
+                                                                        }
+                                                                        onToggle={(
+                                                                            id
+                                                                        ) =>
+                                                                            setOutstandingRule(
+                                                                                {
+                                                                                    touched: true,
+                                                                                    id,
+                                                                                }
+                                                                            )
+                                                                        }
+                                                                    />
+                                                                ) : null}
                                                                 <button
                                                                     className={
                                                                         styles.optionDelete