@visns-studio/visns-components 6.1.8 → 6.2.1

package/README.md

@@ -3300,13 +3300,173 @@ A powerful and enhanced report building component that provides an intuitive wiz
         columnUrl: '/ajax/reportBuilder/getTableColumns',
         reportsUrl: '/ajax/reportBuilder/reports',
         executeUrl: '/ajax/reportBuilder/execute',
-        suggestedJoinsUrl: '/ajax/reportBuilder/getSuggestedJoins',
+        detectedJoinsUrl: '/ajax/reportBuilder/getSuggestedJoins',
+        exportUrl: '/ajax/reportBuilder/export',
+        semanticModelUrl: '/ajax/reportBuilder/semanticModel',
     }}
     userProfile={userProfile}
     businessTemplates={businessTemplates} // Optional pre-built templates
 />
 ```
 
+**Semantic Mode (report definition v2)**
+
+On mount the component POSTs to `setting.semanticModelUrl` (default
+`/ajax/reportBuilder/semanticModel`). If it responds with
+`{success: true, data: {entities: {...}}}` the wizard switches to **semantic
+mode**, where the user picks business entities, labelled fields and labelled
+relations — no table or column names are ever shown. If the endpoint 404s or
+errors, the wizard silently falls back to **legacy mode** (the existing
+table/column/join behaviour), so this is fully backwards compatible.
+
+Semantic model response shape:
+
+```json
+{
+    "success": true,
+    "data": {
+        "entities": {
+            "clients": {
+                "label": "Clients",
+                "plural": "Clients",
+                "description": "People the practice advises",
+                "fields": {
+                    "firstname": { "label": "First name", "type": "text" },
+                    "fee_amount": {
+                        "label": "Fee amount",
+                        "type": "money",
+                        "summable": true
+                    },
+                    "fds_due_date": { "label": "FDS due date", "type": "date" },
+                    "status": {
+                        "label": "Status",
+                        "type": "enum",
+                        "values": { "1": "Active", "0": "Inactive" }
+                    }
+                },
+                "relations": {
+                    "adviser": {
+                        "label": "Their adviser",
+                        "entity": "users",
+                        "cardinality": "one"
+                    },
+                    "notes": {
+                        "label": "Their notes",
+                        "entity": "client_notes",
+                        "cardinality": "many"
+                    }
+                }
+            }
+        }
+    }
+}
+```
+
+Field types are `text | number | money | percent | date | datetime | boolean | enum`.
+Field ids are opaque handles — the server maps them to storage, so the client
+never needs to know the underlying table or column.
+
+The wizard builds a **report definition v2** document, saves it in `detail`, and
+POSTs it when running or exporting the report:
+
+```json
+{
+    "schema_version": 2,
+    "entity": "clients",
+    "fields": [
+        { "field": "firstname" },
+        { "field": "adviser.name" },
+        { "agg": "sum", "field": "fee_amount", "label": "Total fees" }
+    ],
+    "filters": {
+        "op": "and",
+        "items": [
+            { "field": "status", "operator": "equals", "value": "1" },
+            {
+                "op": "or",
+                "items": [
+                    { "field": "home_email", "operator": "not_empty" },
+                    { "field": "work_email", "operator": "not_empty" }
+                ]
+            },
+            {
+                "field": "fds_due_date",
+                "operator": "between",
+                "param": "due_range"
+            }
+        ]
+    },
+    "parameters": [
+        {
+            "id": "due_range",
+            "label": "Due date range",
+            "type": "date_range",
+            "required": true
+        }
+    ],
+    "groupBy": ["adviser.name"],
+    "sort": [{ "field": "surname", "dir": "asc" }]
+}
+```
+
+-   **Relation dot-paths**: a `relation.field` path (e.g. `adviser.name`) reaches
+    a field through a declared relation. Only relations declared in the semantic
+    model can be traversed.
+-   **Aggregates**: `sum | count | avg | min | max`. `sum` and `avg` are offered
+    only on fields marked `summable: true` or typed `number`, `money` or
+    `percent`; `count` is available on anything.
+-   **Runtime parameters**: a filter carrying `param` instead of `value` is a
+    runtime parameter — the run screen prompts for it using the matching entry
+    in `parameters` before executing.
+
+**Operators by field type:**
+
+| Field type              | Operators                                                                   |
+| ----------------------- | --------------------------------------------------------------------------- |
+| `text`                  | `equals`, `not_equals`, `contains`, `not_contains`, `is_empty`, `not_empty`  |
+| `number`/`money`/`percent` | `equals`, `not_equals`, `gt`, `gte`, `lt`, `lte`, `between`, `is_empty`, `not_empty` |
+| `date`/`datetime`       | `equals`, `before`, `after`, `between`, `is_empty`, `not_empty`              |
+| `boolean`               | `is_true`, `is_false`                                                        |
+| `enum`                  | `equals`, `not_equals`, `in`, `not_in`                                       |
+
+**Execute contract:**
+
+-   `POST executeUrl` with `{definition, parameters, limit, offset}` →
+    `{success, data: [rows], total}`. Each row is keyed by the field path or the
+    aggregate label exactly as given in `fields` — e.g. `"firstname"`,
+    `"adviser.name"`, `"Total fees"`.
+-   `POST exportUrl` with `{definition, parameters, format}` → a file blob.
+
+Save/load endpoints are unchanged; `detail` simply holds the v2 document. A
+legacy v1 document (one that has `mainTable`) keeps the current legacy
+behaviour.
+
+The pure helpers behind all of this live in
+`src/components/generic/reportSemantics.js` (model lookup, operator menus,
+definition serialisation) with the endpoint probe in
+`src/components/generic/useSemanticModel.js`. They are covered by:
+
+```bash
+node --test tests/reportSemantics.test.mjs
+```
+
+**Embeddable grouped report viewers**
+
+`GroupedReportRenderer` and `SectionGroupedReport` are exported so consuming apps
+can embed a read-only grouped report view without the wizard. Columns accept an
+explicit `key` (the exact row key returned by the execute contract) and a
+`header` label:
+
+```jsx
+import { GroupedReportRenderer } from '@visns-studio/visns-components';
+
+<GroupedReportRenderer
+    data={{ grouped: true, groups, totalGroups, totalRecords }}
+    config={{ type: 'sections', groupDisplayName: 'Adviser' }}
+    columns={[{ key: 'adviser.name', header: 'Adviser' }]}
+/>;
+```
+
 **Major Enhancements:**
 
 -   **6-Step Wizard Interface**: Guided workflow with visual progress indicators

package/package.json

@@ -91,7 +91,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.1.8",
+    "version": "6.2.1",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/Fetch.jsx

@@ -124,6 +124,41 @@ const invalidateRelatedCaches = (url, method) => {
     }
 };
 
+/**
+ * Turn an API error bag into displayable HTML, whatever shape it arrived in.
+ *
+ * Laravel validation sends `{field: ["msg", ...]}`; the report-semantics
+ * endpoints send `[{path, message}, ...]` (see report-semantics.md §6). A bare
+ * list of strings is accepted too. Anything unreadable yields '' so the caller
+ * can fall back to `data.message` — never a thrown TypeError, which used to
+ * leave the request promise permanently unsettled.
+ */
+const flattenErrorBag = (errors) => {
+    const lines = [];
+
+    const collect = (entry) => {
+        if (entry === null || entry === undefined) return;
+        if (Array.isArray(entry)) {
+            entry.forEach(collect);
+            return;
+        }
+        if (typeof entry === 'object') {
+            // `{path, message}` from the semantic compiler.
+            if (typeof entry.message === 'string') {
+                lines.push(entry.message);
+                return;
+            }
+            Object.values(entry).forEach(collect);
+            return;
+        }
+        lines.push(String(entry));
+    };
+
+    collect(errors);
+
+    return lines.filter(Boolean).map((line) => `${line}<br />`).join('');
+};
+
 // Original CustomFetch logic extracted for reuse
 const originalCustomFetch = (
     url,
@@ -275,13 +310,12 @@ const originalCustomFetch = (
                     const { data } = error.response;
 
                     if (data.errors) {
-                        const { errors } = data;
-
-                        Object.values(errors).forEach((errorArray) => {
-                            errorArray.forEach((errorMsg) => {
-                                errorMessage += `${errorMsg}<br />`;
-                            });
-                        });
+                        errorMessage = flattenErrorBag(data.errors);
+                        // A bag we could not read (or an empty one) must still
+                        // surface something the user can act on.
+                        if (!errorMessage && data.message) {
+                            errorMessage = data.message;
+                        }
                     } else if (data.message) {
                         if (data.message === 'CSRF token mismatch.') {
                             window.location.replace('/login');
@@ -345,12 +379,10 @@ const CustomFetch = (
                     if (error.response && error.response.data) {
                         const { data } = error.response;
                         if (data.errors) {
-                            const { errors } = data;
-                            Object.values(errors).forEach((errorArray) => {
-                                errorArray.forEach((errorMsg) => {
-                                    errorMessage += `${errorMsg}<br />`;
-                                });
-                            });
+                            errorMessage =
+                                flattenErrorBag(data.errors) ||
+                                data.message ||
+                                '';
                         } else if (data.message) {
                             errorMessage = data.message;
                         }
@@ -364,12 +396,10 @@ const CustomFetch = (
                     if (error.response && error.response.data) {
                         const { data } = error.response;
                         if (data.errors) {
-                            const { errors } = data;
-                            Object.values(errors).forEach((errorArray) => {
-                                errorArray.forEach((errorMsg) => {
-                                    errorMessage += `${errorMsg}<br />`;
-                                });
-                            });
+                            errorMessage =
+                                flattenErrorBag(data.errors) ||
+                                data.message ||
+                                '';
                         } else if (data.message) {
                             if (data.message === 'CSRF token mismatch.') {
                                 window.location.replace('/login');

package/src/components/generic/GenericFormBuilder.jsx

@@ -40,7 +40,9 @@ import {
     ChevronRight,
     Copy,
     List,
+    HelpCircle,
 } from 'lucide-react';
+import Swal from 'sweetalert2';
 import { confirmDialog } from '../utils/ConfirmDialog';
 
 import 'react-toggle/style.css';
@@ -1990,6 +1992,254 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
         fetchRoles();
     }, []);
 
+    /* ---------------------------------------------------------------- */
+    /* Guided help                                                       */
+    /* ---------------------------------------------------------------- */
+
+    /**
+     * Inline SVG for the guide's section headings. SweetAlert2 takes an HTML
+     * string, so the lucide components used elsewhere in this file cannot be
+     * rendered here — these mirror the same icons at the same weight.
+     */
+    const helpIcon = (name, color) => {
+        const open = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: middle; display: inline-block;">`;
+        const paths = {
+            rocket: '<path d="M12 2c5 3 8 5 8 9a6 6 0 1 1-12 0c0-4 3-6 8-9Z"/><path d="m16 6-4 14-4-14"/><circle cx="12" cy="12" r="2"/>',
+            list: '<line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/>',
+            layers: '<path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 12.5-9.17 4.16a2 2 0 0 1-1.66 0L2 12.5"/>',
+            type: '<polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/>',
+            settings:
+                '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
+            table: '<path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/>',
+            branch: '<line x1="6" x2="6" y1="3" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>',
+            flag: '<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" x2="4" y1="22" y2="15"/>',
+            save: '<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/>',
+            help: '<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>',
+        };
+        return `${open}${paths[name] || paths.help}</svg>`;
+    };
+
+    /** One heading style for every section of the guide. */
+    const helpHeading = (icon, color, title) =>
+        `<h3 style="color: #1f2937; margin: 0 0 12px 0; font-size: 16px; border-bottom: 2px solid ${color}; padding-bottom: 6px; display: flex; align-items: center; gap: 8px;">${helpIcon(
+            icon,
+            color
+        )}${title}</h3>`;
+
+    /** A tinted panel with a bulleted body, optionally titled. */
+    const helpPanel = ({ bg, border, text, title, items }) => `
+        <div style="background: ${bg}; border: 1px solid ${border}; border-radius: 8px; padding: 12px; margin-bottom: 12px;">
+            ${
+                title
+                    ? `<h4 style="color: ${border}; margin: 0 0 8px 0; font-size: 14px;">${title}</h4>`
+                    : ''
+            }
+            <ul style="margin: 0; padding-left: 16px; color: ${text};">${items
+                .map((item) => `<li>${item}</li>`)
+                .join('')}</ul>
+        </div>`;
+
+    /**
+     * The end-user guide to building a template. Sections that describe an
+     * opt-in feature are only included when this app actually switched that
+     * feature on, so nobody is told about a control they will never see.
+     */
+    const showGuidedHelp = () => {
+        const sections = [
+            helpHeading('rocket', '#3b82f6', 'What this screen is') +
+                helpPanel({
+                    bg: '#f0f9ff',
+                    border: '#3b82f6',
+                    text: '#1e3a8a',
+                    items: [
+                        'This is the list of questions people will answer — for example a client review checklist',
+                        '<strong>Edit</strong> shows one compact row per question, with a summary of how it is set up',
+                        '<strong>Preview</strong> shows the form the way the person filling it in will see it',
+                        '<strong>Sections</strong> shows a strip of shortcuts, one per section; click one to jump to it',
+                        'Once there are more than five questions, a search box appears — matching questions stay bright and the rest dim',
+                    ],
+                }),
+
+            helpHeading('list', '#10b981', 'Adding and arranging questions') +
+                helpPanel({
+                    bg: '#ecfdf5',
+                    border: '#10b981',
+                    text: '#065f46',
+                    items: dynamicFields
+                        ? [
+                              'This template builds its own questions automatically, so there is no "Add Field" button',
+                              'Use the pencil to adjust a question, and the grip handle on the left to drag it into a new position',
+                          ]
+                        : [
+                              '<strong>Add Field</strong> (bottom right) opens the question window',
+                              'The pencil edits a question, the copy icon duplicates it, the bin deletes it',
+                              'Duplicating a Section copies the section and every question inside it',
+                              'Drag the grip handle on the left to move a question; the up/down arrows let you type an exact position instead',
+                              'Deleting a question also clears any "show only when" rule that pointed at it, and tells you how many were cleared',
+                          ],
+                }),
+
+            helpHeading('layers', '#7c3aed', 'Sections and headings') +
+                helpPanel({
+                    bg: '#f5f3ff',
+                    border: '#7c3aed',
+                    text: '#5b21b6',
+                    items: [
+                        'Add a question of type <strong>Section</strong> to start a new part of the form',
+                        'Everything after a Section belongs to it, until the next Section starts',
+                        'Questions before the first Section are listed under "Before first section"',
+                        'Click the arrow on a Section row to collapse or expand it while you work',
+                        '<strong>Heading</strong> is simpler — just a title on the page, with no grouping',
+                        '<strong>Plain Text</strong> is a block of formatted wording, for instructions or a declaration',
+                    ],
+                }),
+
+            helpHeading('type', '#0891b2', 'The kinds of question you can add') +
+                helpPanel({
+                    bg: '#ecfeff',
+                    border: '#0891b2',
+                    text: '#155e75',
+                    items: [
+                        '<strong>Typed in:</strong> Text (one line), Textarea (several lines), Number',
+                        '<strong>Chosen from a list:</strong> Dropdown, Checkbox, Toggle (a yes/no switch)',
+                        '<strong>Dates and times:</strong> Date, Date &amp; Time, Time',
+                        '<strong>Attached or drawn:</strong> File, Image, Video Upload, Signature, Canvas',
+                        '<strong>Grids:</strong> Table (Radio) and Table (Custom) — see below',
+                        '<strong>Layout only:</strong> Section, Heading, Plain Text',
+                        `<strong>Filled from your system:</strong> Dynamic Data pulls in a detail the system already holds${
+                            dynamicDropdowns && dynamicDropdowns.length > 0
+                                ? ', and Dynamic Dropdown offers a list your system maintains'
+                                : ''
+                        }`,
+                    ],
+                }),
+
+            helpHeading('settings', '#f59e0b', 'Settings on each question') +
+                helpPanel({
+                    bg: '#fffbeb',
+                    border: '#f59e0b',
+                    text: '#92400e',
+                    items: [
+                        '<strong>Label</strong> is the wording people read — write it as the question you want answered',
+                        '<strong>Required?</strong> set to Yes means the form cannot be submitted without an answer; required questions show an asterisk',
+                        '<strong>Size</strong> is how wide the question sits on the page: Full for its own row, Half or Quarter to share a row',
+                        '<strong>Height Size</strong> on a Textarea chooses a small, normal or large writing box',
+                        '<strong>Single or Bulk Image?</strong> decides whether one photo or several can be attached',
+                        '<strong>Associated Role?</strong> on a Signature says whose signature it is',
+                        'There is no help text, placeholder or preset answer — put any wording people need into the label, or a Plain Text block above',
+                    ],
+                }),
+
+            helpHeading('list', '#059669', 'Answers for Dropdown and Checkbox') +
+                helpPanel({
+                    bg: '#f0fdf4',
+                    border: '#059669',
+                    text: '#166534',
+                    items: [
+                        'Type the answer in the box at the bottom of the Options list and press Enter, or click <strong>+ Add</strong>',
+                        'Click straight into an existing answer to reword it; the bin removes it',
+                        'Two answers cannot share the same wording',
+                        'Rewording an answer can unhook rules that were pointing at it — check any "show only when" rule that used it',
+                    ],
+                }),
+
+            helpHeading('table', '#be185d', 'Grid questions') +
+                helpPanel({
+                    bg: '#fdf2f8',
+                    border: '#be185d',
+                    text: '#9d174d',
+                    items: [
+                        '<strong>Table (Radio)</strong> needs both Columns and Rows — the rows are the things being checked and the columns are the possible answers',
+                        '<strong>Table (Custom)</strong> needs Columns only, and gives one row of boxes to fill in',
+                        'Add a column or row by typing it in and pressing Enter, or clicking Add',
+                        'The rows are fixed when you build the template — the person filling in the form cannot add more',
+                    ],
+                }),
+
+            helpHeading(
+                'branch',
+                '#4f46e5',
+                'Showing a question only when it applies'
+            ) +
+                helpPanel({
+                    bg: '#eef2ff',
+                    border: '#4f46e5',
+                    text: '#3730a3',
+                    items: [
+                        'Every question window ends with <strong>Conditional Field Display Criteria</strong>',
+                        'Pick the earlier question it depends on, then either <strong>is</strong> with a value, or <strong>is filled in</strong>',
+                        'Only questions that come <em>before</em> this one can be used, and only ones that collect an answer',
+                        'A line at the bottom spells the rule out, e.g. "This field will only show when Advice type is Insurance"',
+                        'Leave it blank to always show the question, or use <strong>Clear rule</strong> to remove one',
+                        'Questions with a rule are marked "Conditional" in the list',
+                    ],
+                }),
+        ];
+
+        if (outstandingItems?.enabled) {
+            sections.push(
+                helpHeading('flag', '#d97706', 'Answers that raise a follow-up') +
+                    helpPanel({
+                        bg: '#fef3c7',
+                        border: '#d97706',
+                        text: '#92400e',
+                        items: [
+                            'On questions that offer answers, each answer has an <strong>Outstanding</strong> switch',
+                            'Turn it on for the answer that means "this needs following up", and the system raises an outstanding item when someone gives that answer',
+                            'Only one answer per question can be marked',
+                            'Leave every switch off to say this question never raises a follow-up',
+                            'If an amber warning appears, the answer the old rule pointed at no longer exists — set the switch again on the right answer',
+                        ],
+                    })
+            );
+        }
+
+        sections.push(
+            helpHeading('save', '#dc2626', 'Saving your work') +
+                helpPanel({
+                    bg: '#fef2f2',
+                    border: '#dc2626',
+                    text: '#991b1b',
+                    items: [
+                        '<strong>Save</strong> inside a question window only adds it to the list on screen — nothing is stored yet',
+                        'To store the template, click <strong>Edit Form</strong> (bottom right) and then <strong>Save</strong>',
+                        'Moving a question saves the whole template straight away, so the order is never lost',
+                        'If someone else changed this template while you had it open, you are told nothing was saved — reload the page before saving again, or your changes would undo theirs',
+                    ],
+                })
+        );
+
+        Swal.fire({
+            title: `<div style="display: flex; align-items: center; justify-content: center; gap: 8px;">${helpIcon(
+                'help',
+                '#3b82f6'
+            )}Form Builder Guide</div>`,
+            html: `<div style="text-align: left; font-size: 13px; line-height: 1.5; color: #374151; max-height: 70vh; overflow-y: auto;">${sections.join(
+                '<div style="height: 12px;"></div>'
+            )}</div>`,
+            width: 800,
+            confirmButtonText: 'Close',
+            confirmButtonColor: '#6b7280',
+            customClass: {
+                popup: 'comprehensive-help-modal',
+                htmlContainer: 'help-content-scrollable',
+            },
+        });
+    };
+
+    // Show the guide once, the first time someone opens the builder.
+    useEffect(() => {
+        if (localStorage.getItem('formBuilder_hasSeenHelp')) return;
+
+        const timer = setTimeout(() => {
+            showGuidedHelp();
+            localStorage.setItem('formBuilder_hasSeenHelp', 'true');
+        }, 500);
+
+        return () => clearTimeout(timer);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     return (
         <div className={modalShow || modalFormShow ? styles.modalOpen : ''}>
             <div className={styles.grid}>
@@ -2081,6 +2331,15 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                         ).length}{' '}
                                         sections
                                     </span>
+                                    <button
+                                        type="button"
+                                        className={styles.toolBtn}
+                                        onClick={showGuidedHelp}
+                                        data-tooltip-id="action-tooltip"
+                                        data-tooltip-content="How to build this form"
+                                    >
+                                        <HelpCircle size={15} /> Help
+                                    </button>
                                     <button
                                         className={`${styles.toolBtn} ${
                                             showOutline ? styles.toolBtnOn : ''