Update Stages page images for the Mautic 7.0 UI

[promptless-for-oss]

Open in Promptless

The three screenshots in docs/stages/stages.rst on branch 7.0 showed an outdated Mautic UI. This replaces them with authentic, version-matched Mautic 7.0.2 captures (light mode, 2x): the New Stage creation form, the Campaign "Change contact's stage" action, and the "Stages in time" dashboard widget, and adds a Lifecycle dashboard widget capture. Image-only change: no prose wording, headings, or step numbering in stages.rst changed.

Addressing @adiati98's review (following PR #883 as reference)

• Rename images to the project convention (lowercase, underscores): Stages.png → stages.png, stage-dashboard.png → stage_dashboard.png, switch-stage.png → switch_stage.png. Applied verbatim.
• Move switch_stage.png to after the instructions: the switch_stage.png image directive now sits immediately after instruction step 3, before the "For more information on setting up Campaigns" line (it previously appeared before step 1). Added :width: 600, matching Update Stages page images for the Mautic 7.1 UI #883. Applied verbatim.
• Inspect images and add the missing one: added lifecycle.png, captured from a local Mautic 7.0.2 instance, showing the Lifecycle dashboard widget with two Segments — pie charts (Segment vs All Contacts) and per-Stage "Stage cycle" bar charts. Added a matching .. image:: directive at the end of the Lifecycle section.
• Update images for the 7.0 UI: the three existing screenshots were inspected and are already authentic light-mode Mautic 7.0.2 captures, so they were kept as-is (only renamed).

Follow-up review (populate data + confirm Lifecycle layout):

• Populated the "Stages in time" widget: stage_dashboard.png previously showed a near-empty chart. Replaced it with a version-matched Mautic 7.0.2 capture that has real stage-change data across the default one-month dashboard range (multiple peaks/valleys, values 0–6).
• Confirmed the Lifecycle layout for 7.0 is stacked vertically (verified live and in source). The Lifecycle widget template (lifecycle.html.twig) is byte-identical across 6.0/7.0/7.1/7.2 and lays each Segment panel out as float: left; width: 50%. What differs is the dashboard widget's body container: Mautic 6.0 uses a plain block container (<div class="card-body">), so the two Segments float side-by-side; Mautic 7.0, 7.1, and 7.2 use a flex column container (<div class="card-body d-flex fd-column fg-1">), which ignores the float and stacks the two Segments vertically. So the stacked 7.0.2 capture in this PR is correct, and the same stacked layout is the correct UI for 7.1 and 7.2 as well (those docs branches are being corrected separately). 6.0 remains side-by-side, which is already correct there.

Trigger Events

• mautic/user-documentation#478: Update images in docs/stages/stages.rst in branch 7.0

[adiati98]

@promptless-for-oss please:

• Rename the images
• Move switch_stage.png to after the instructions
• Inspect the images, add a missing image, and update the images with 7.0 UI if needed.

Look at PR #883 as reference.

[promptless-for-oss]

Thanks for the review! I'm working on these now — renaming the images, moving switch_stage.png to after the instructions, and inspecting/updating the screenshots for the 7.0 UI (including adding the missing one), using #883 as the reference. I'll push the updates to this PR shortly.

[promptless-for-oss]

Quick update: I've mapped out the changes against #883 — renaming the three images to the lowercase/underscore convention, moving switch_stage.png to after the numbered steps, and adding the missing Lifecycle dashboard-widget screenshot. Working on capturing the new 7.0 image now.

[promptless-for-oss]

Update: the revisions are pushed to this PR. The three images are renamed to the lowercase/underscore convention, switch_stage.png now sits after the numbered steps (with :width: 600), and I've added the missing Lifecycle dashboard-widget screenshot at the end of the Lifecycle section. Vale passes clean. A full summary follows.

[promptless-for-oss]

Thanks for the review! I've updated this PR with all your requested changes, following #883 as the reference:

• Renamed the images to the lowercase/underscore convention: stages.png, stage_dashboard.png, switch_stage.png.
• Moved switch_stage.png to after the numbered instructions (with :width: 600).
• Added lifecycle.png for the Lifecycle widget, at the end of the Lifecycle section.

The new Lifecycle image and the three existing screenshots are all authentic Mautic 7.0.2 captures. One note: in Mautic 7.0.2 the Lifecycle widget renders its two Segments stacked vertically rather than side-by-side as in the 7.1 version (#883) — that's a genuine 7.0.2 UI difference, so the capture reflects the real 7.0 layout. Vale passes with no errors or warnings.

[adiati98]

@promptless-for-oss please address the suggestions.

[promptless-for-oss]

Thanks for the detailed review, @adiati98. We're verifying the Lifecycle widget layout and the stage dashboard image across the 6.0, 7.1, and 7.2 branches, populating real data for the stage dashboard, and aligning with PR #955 where the UI matches. We'll follow up here with the corrected images and answers to each point.

[promptless-for-oss]

Update: we've reviewed the committed images across branches. For the Lifecycle widget, the 5.2, 6.0, 7.1, and 7.2 images all currently show the two Segments side-by-side, while 7.0.2 genuinely stacks them vertically. For the stage dashboard ("Stages in time"), the 7.0/7.1/7.2 images lack populated data, whereas the 6.0 image (from PR #955) is well-populated. We're now running each product version to confirm the real UI and capture version-matched images with real data before updating the PR.

[promptless-for-oss]

To answer your Lifecycle question directly, @adiati98: the correct UI is version-dependent. We traced it to the dashboard widget's body container in the product source:

• 6.0 uses a plain block container, so the two Segment panels float side-by-side — the 6.0 image is correct, no change needed.
• 7.0 / 7.1 / 7.2 use a flex-column container, which ignores the floats, so the panels stack vertically. Confirmed live on 7.0.

So the 7.0 image here (stacked) is correct, but the 7.1 and 7.2 Lifecycle images currently show side-by-side and are inaccurate — those need replacing with stacked captures.

For the Stages in time dashboard, the 7.0/7.1/7.2 images lack real data; the chart UI is identical across versions and only the data density differs, so we'll replace them with populated captures (6.0 is already populated via #955).

Plan: update this PR (7.0) with a populated Stages-in-time image, and open separate PRs against 7.1 and 7.2 to fix the Lifecycle (stacked) and Stages-in-time (populated) images. Capturing the version-matched renders now.

[promptless-for-oss]

Thanks @adiati98 — I verified this by running each Mautic version locally and checking the source.

Lifecycle widget layout is version-dependent. The correct layout is stacked vertically for 7.0, 7.1, and 7.2, and side-by-side for 6.0. The Lifecycle template is identical across versions, but the dashboard widget's body container changed: 6.0 uses a plain block layout (the two Segments float side-by-side), while 7.0/7.1/7.2 use a flex-column layout that stacks them vertically.

So:

• 7.0 (this PR): the stacked Lifecycle image is correct and kept as-is.
• 7.1 and 7.2: those images were incorrectly showing side-by-side — I've replaced them with stacked captures in Fix Stages page Lifecycle image and populate Stages in time for the Mautic 7.1 UI #959 (7.1) and Fix Stages page Lifecycle image and populate Stages in time for the Mautic 7.2 UI #960 (7.2).
• 6.0: already correct (side-by-side), no change needed.

Stages in time dashboard: I populated the widget with real data on the 7.0 image here, and on the 7.1/7.2 images in #959 and #960. The 6.0 stage-dashboard image was already populated via #955.

The PR body here has also been updated to document the fix and the per-version layout explanation.