docs: update user guide to include screenshots

docs/content/user-guide.mdx

@@ -21,6 +21,9 @@ node --version
 npm --version
 ```
 
+For further instructions on installing Node.js and npm, please refer to the official Node.js documentation:
+[https://nodejs.org/en/download/](https://nodejs.org/en/download/)
+
 **Optional** — if you intend to run the constraint-programming solver:
 
 | Requirement | Details |
@@ -67,9 +70,12 @@ Open `config.json` and set the cases directory:
 | Key | Description |
 |---|---|
 | `casesDirectory` | Path to the case data folder. Can be absolute (`C:\data\cases`) or relative to the project root (`/cases`). To share data with the StaffScheduling solver, point this to its `cases/` directory (e.g. `../StaffScheduling/cases`). |
-| `staffSchedulingProject.include` | Set to `true` to enable solver integration. |
+| `staffSchedulingProject.include` | Set to `true` to enable solver integration. If the solver cannot be reached, the programme will return an error message.  |
 | `staffSchedulingProject.path` | Absolute path to the StaffScheduling Python project on disk. |
-| `staffSchedulingProject.pythonExecutable` | The command used to invoke Python — `uv`, `python`, or `python3`. |
+| `staffSchedulingProject.pythonExecutable` | The command used to invoke Python — `uv`, `python`, or `python3` depending on the local installation. |
+
+> **Important:** If you use the solver API server it is not necessary to change the `staffSchedulingProject` configuration since the API server will be used instead of direct execution regardless of these settings.
+   In this case it is sufficient to change the `casesDirectory` to point to the shared case folder between the web app and the solver.
 
 4. **Start the development server**
 
@@ -163,7 +169,10 @@ within that case.
 
 > **Note:** Creating a new case via the "+" button will only trigger automatic data generation from TimeOffice if a solver connection is configured. Without a connected solver the case directory is created and you must populate the underlying JSON files manually (see [Underlying Data](./underlying_data)).
 
-> 📸 **[Screenshot: Case Selection]**
+
+<figure style={{ margin: "40px 0", marginLeft: "auto", marginRight: "auto", maxWidth: "400px" }}>
+    ![Case Selection](./images/case-selection.png)
+</figure>
 
 ### Phase 2 — Review Employee Data
 
@@ -187,7 +196,9 @@ This classification determines which minimum staffing thresholds apply to each e
 (configured on the Minimum Staff page). Employee data is read-only in the web interface —
 modifications must be made in TimeOffice and re-exported.
 
-> 📸 **[Screenshot: Employees page showing the employee table with columns for ID, name, and type]**
+<figure style={{ margin: "40px 0", marginLeft: "auto", marginRight: "auto" }}>
+    ![Case Selection](./images/employee-table.png)
+</figure>
 
 ### Phase 3 — Define Wishes & Blocked Periods
 
@@ -245,7 +256,9 @@ Tuesdays off".
 5. For shift-specific entries, also choose the shift type (**F** = Early, **S** = Late, **N** = Night).
 6. Click **"Speichern"** (Save). The system immediately generates all corresponding monthly entries.
 
-> 📸 **[Screenshot: Global Wishes page showing a weekly recurring pattern entry with weekday selector]**
+<figure style={{ margin: "40px 0", marginLeft: "auto", marginRight: "auto" }}>
+    ![Case Selection](./images/global-wishes.png)
+</figure>
 
 #### Saving Global Wishes as a Template
 
@@ -273,8 +286,9 @@ months without re-entering every entry manually.
 You can also edit or delete individual entries from the list at any time to override what was
 generated from the global scope — but be aware that re-saving global wishes will reset these.
 
-> 📸 **[Screenshot: Monthly Wishes page with the calendar interface open, showing selected dates
-> highlighted and the shift type selector]**
+<figure style={{ margin: "40px 0", marginLeft: "auto", marginRight: "auto" }}>
+    ![Case Selection](./images/monthly-wishes.png)
+</figure>
 
 ### Phase 4 — Configure Solver Parameters
 
@@ -286,22 +300,36 @@ Navigate to **"Gewichtung"** (Weights) to view and adjust penalty weights for so
 Higher weights cause the solver to prioritize avoiding specific violations (e.g. forward rotation,
 consecutive night shifts).
 
-> 📸 **[Screenshot: Weights configuration page showing sliders or input fields for constraint weights]**
+<figure style={{ margin: "40px 0", marginLeft: "auto", marginRight: "auto" }}>
+    ![Case Selection](./images/weights.png)
+</figure>
 
 #### Minimum Staff
 
 Navigate to **"Mindestbesetzung"** (Minimum Staff) to define the minimum number of employees required
 per shift type (F, S, N) for each day of the week.
 
-> 📸 **[Screenshot: Minimum Staff page showing the staffing matrix with shift types as columns
-> and weekdays as rows]**
+<figure style={{ margin: "40px 0", marginLeft: "auto", marginRight: "auto" }}>
+    ![Case Selection](./images/min-staffing.png)
+</figure>
 
 #### Templates
 
 Both weights and minimum staff configurations can be saved as **templates** for reuse across cases.
 Use the template dialogs to save, load, or import presets.
 
-> 📸 **[Screenshot: Template save/load dialog]**
+<figure style={{ margin: "40px 0", marginLeft: "auto", marginRight: "auto" }}>
+
+</figure>
+<div style={{ margin: "40px 0", display: "flex", justifyContent: "center", gap: "20px" }}>
+    <div style={{ width: "45%" }}>
+        ![Case Selection](./images/save-min-staffing.png)
+    </div>
+    <div style={{ width: "45%" }}>
+        ![Case Selection](./images/load-min-staffing.png)
+    </div>
+</div>
+
 
 > **Important — Weights and `solve-multiple`:** The weights configuration only affects the
 > **`solve`** command (single schedule generation). When using **`solve-multiple`**, the solver
@@ -342,14 +370,22 @@ Workflow mode is the intended end-to-end flow for connected TimeOffice installat
 While workflow mode is active, a banner appears at the top of every page indicating the active
 case and date range. Navigate to **"Workflow"** to run the solver pipeline.
 
-> 📸 **[Screenshot: Workflow page with the workflow banner and solver pipeline steps (Fetch / Solve / Insert)]**
+<figure style={{ margin: "40px 0", marginLeft: "auto", marginRight: "auto" }}>
+    ![Case Selection](./images/workflow.png)
+</figure>
 
 #### Option B — Solver Page (Manual / Developer Mode)
 
 The Solver page provides the same operations without requiring an active workflow session.
 It is primarily intended for development, testing, and manual scheduling scenarios.
 
-> 📸 **[Screenshot: Solver page showing fetch, solve, solve-multiple, insert, and delete buttons]**
+> **Important:** If you get an error message about the solver connection when entering this page, check your `config.json`
+> settings and ensure the path to the StaffScheduling project is correct and that Python is properly installed.
+> If you are using the API server, make sure it is running on the correct port e.g. `http://localhost:8000`.
+
+<figure style={{ margin: "40px 0", marginLeft: "auto", marginRight: "auto" }}>
+    ![Case Selection](./images/solver.png)
+</figure>
 
 #### Option C — Manual File Import
 
@@ -370,7 +406,9 @@ schedules, you can upload them manually:
 2. Click **"Upload"** and select a `processed_solution_*.json` file from the solver's
    `processed_solutions/` output directory.
 
-> 📸 **[Screenshot: Schedule page with the upload button and file picker dialog]**
+<figure style={{ margin: "40px 0", marginLeft: "auto", marginRight: "auto" }}>
+    ![Case Selection](./images/upload-solution.png)
+</figure>
 
 #### Viewing a Schedule
 
@@ -395,7 +433,9 @@ spot conflicts at a glance:
 | Red-highlighted day | Blocked day (employee must not work) |
 | Small triangle indicator | Wish day (employee prefers to be off) |
 
-> 📸 **[Screenshot: Schedule detail view with the shift matrix and wish/blocked symbols visible in cells]**
+<figure style={{ margin: "40px 0", marginLeft: "auto", marginRight: "auto" }}>
+    ![Case Selection](./images/solution.png)
+</figure>
 
 #### Comparing Schedules
 
@@ -416,7 +456,9 @@ spot conflicts at a glance:
 3. In the same dialog you can **add or edit a description** for each schedule to help distinguish
    them (e.g. "Variant with fewer night violations"), and **delete** schedules you no longer need.
 
-> 📸 **[Screenshot: All Schedules dialog showing metrics table, description column, and delete buttons]**
+<figure style={{ margin: "40px 0", marginLeft: "auto", marginRight: "auto" }}>
+    ![Case Selection](./images/schedules-dialog.png)
+</figure>
 
 #### Compact / Comparison Views
 
@@ -425,17 +467,19 @@ spot conflicts at a glance:
   vertically across all loaded schedules, making it easy to spot per-employee differences between
   variants.
 
-> 📸 **[Screenshot: Compare view showing two schedules side by side with per-employee shift rows]**
+<figure style={{ margin: "40px 0", marginLeft: "auto", marginRight: "auto" }}>
+    ![Case Selection](./images/compare-compact.png)
+</figure>
 
 #### Selecting the Optimal Schedule
 
 After reviewing the metrics and visual matrix:
 
 1. Choose the schedule that best balances low violations and high wish fulfillment.
 2. Click **"Auswählen"** (Select) to mark it as the active schedule for this case.
-3. The selected plan is persisted and will be used for the **Insert** operation (Phase 5).
+3. The selected plan is persisted and will be used for the **Insert** operation (Phase 7).
 
-> 📸 **[Screenshot: Schedule page with the selection banner indicating the currently active schedule]**
+> The selection is done in the same dialog as the comparison metrics, so you can make an informed decision based on the data and visualizations without needing to switch contexts.
 
 ### Phase 7 — Deploy the Schedule
 
@@ -446,7 +490,9 @@ After selecting the optimal schedule:
 3. Use the StaffScheduling insert tool to write the schedule back to TimeOffice.
 4. Perform a final manual review in TimeOffice before publishing to staff.
 
-> 📸 **[Screenshot: Schedule page with a banner indicating the currently selected/active schedule]**
+<figure style={{ margin: "40px 0", marginLeft: "auto", marginRight: "auto" }}>
+    ![Case Selection](./images/insert-solution.png)
+</figure>
 
 ---