Merge pull request #8 from hisptz/develop

Add screenshot for scorecard configuration module

Author: chingalo

docs/scorecard/configuration/higlight-indicators.md

@@ -14,13 +14,17 @@ To add new highlighted indicator, below are steps to follow:-
 2. Select the desired indicator from available data sources, which may include Aggregate Indicators,Data Elements,Data Sets as well as Program Indicators.
 3. Once selected, the indicator will appear as a highlighted metric within the scorecard, drawing attention to its performance if option to view highlighted has been enabled.
 
+ ![add higlighted indicator](/img/scorecard/add-higlighted-indicator.png)
+
 ## Managing Highlighted Indicators
 Over time, program priorities may change, and highlighted indicators may need to be updated, refined, or removed. The scorecard provides flexible options for managing highlighted indicators to ensure they remain accurate and aligned with evolving goals. This flexibility ensures that highlighted indicators remain relevant, actionable, and aligned with organisational priorities
 
 Options for managing highlighted indicators include:-
  - **Deleting** highlighted indicators that are no longer relevant or needed.
  - **Editing** configurations of highlighted indicator to customize how the it is displayed, including, **Display label** in case of a custom label instead of the system’s default name, Effective gap & weight, **Legend ranges** for adjust ranges to better reflect performance interpretation as well as **Display options** which customize presentation by setting whether **high values are good**, **enabling/disabling color**, or applying visual emphasis for clarity.
 
+ ![edit highlighted indicator](/img/scorecard/edit-highlighted-indicator.png)
+
 
 
 

docs/scorecard/configuration/manage-general-info.md

@@ -12,14 +12,29 @@ The scorecard’s primary information includes its title, subtitle, and descript
 
 Additionally, a custom header can be applied to create a visually distinctive presentation, visible both on view a specific scorecaed and in downloaded scorecard in pdf format. This support allows inclusion of branding, logos, or other contextual elements, ensuring the scorecard is professional and informative in all formats.
 
+![scorecard general info](/img/scorecard/scorecard-general-info.png)
+
 ## Sharing Settings
 Sharing settings define who can access and interact with the scorecard. By default, all users are granted view and edit access. However, administrators can tailor the access to specific scorecard based on organisational needs. **No access** prevents a group of users from seeing or modifying the scorecard, ensuring confidentiality where needed. **View only** allows users to consult the data without making changes, which is useful for reporting or audit purposes. **View and edit** access grants users full capabilities, including modifying data, adjusting visualizations, and configuring scorecard settings. Properly configuring sharing settings balances accessibility with data security, supporting collaborative and controlled workflows.
 
+![scorecard sharing setting](/img/scorecard/scorecard-sharing-setting.png)
+
+
+## Period Configuration
+Period settings control which time frames are displayed in the scorecard. Administrators can limit the scorecard to specific period types, such as monthly, quarterly, or yearly, preventing inappropriate comparisons across different time frames.
+
+![scorecard default period type config](/img/scorecard/scorecard-default-period-type-config.png)
+
+A default period can also be specified, so the scorecard automatically opens with the most relevant period, such as the current quarter or year. These settings simplify user interaction, ensuring that users are presented with meaningful, actionable insights without needing to manually adjust time periods each time the scorecard is opened.
+
+![scorecard default period config](/img/scorecard/scorecard-default-period-config.png)
+
 ## Default Organisation Unit
 The scorecard can be configured to display data for a predefined organisational context. Users may set a specific organisation unit, such as a facility, district, or region, so that the scorecard automatically focuses on that organisation unit(s) upon opening. Alternatively, a relative organisation unit can dynamically adjust based on the user’s assigned unit. Configuration can also target a level (e.g., all facilities within a region) or a group of organisation units, providing consolidated views across multiple units. This ensures users immediately see data relevant to their roles, reducing manual filtering and improving efficiency in analysis and informed decision making.
 
-## Period Configuration
-Period settings control which time frames are displayed in the scorecard. Administrators can limit the scorecard to specific period types, such as monthly, quarterly, or yearly, preventing inappropriate comparisons across different time frames. A default period can also be specified, so the scorecard automatically opens with the most relevant period, such as the current quarter or year. These settings simplify user interaction, ensuring that users are presented with meaningful, actionable insights without needing to manually adjust time periods each time the scorecard is opened.
+![scorecard default org config](/img/scorecard/scorecard-default-org-config.png)
 
 ## Legend Definition
 The legend provides a visual guide to interpret data values quickly and accurately. By default, a traffic light color scheme is used, where <span style={{ color: "#FF0000" }}>**Red**</span> indicates critical or underperforming metrics, <span style={{ color: "#FFFF00" }}>**Yellow**</span> signals caution or moderate performance, and <span style={{ color: "#018000" }}>**Green**</span> denotes satisfactory performance or target achievement. The legend also addresses no data scenarios and values outside defined boundaries, using distinct colors to make these conditions easily recognizable. A clear legend ensures consistent interpretation across users and supports informed decision-making based on the scorecard’s visual cues.
+
+![scorecard legend definition management](/img/scorecard/scorecard-legend-definition-management.png)

docs/scorecard/configuration/scorecard-data-configuration.md

@@ -9,24 +9,33 @@ The Scorecard Data Configuration feature allows users to set up and manage data
 ## Data Source Groups
 Before configuring individual data items, first need to create data source groups. These groups act as containers that organize related indicators or data items within the scorecard.
 
+![data groups management](/img/scorecard/data-groups-management.png)
+
 >**Note:** In case of single data source group, the name will not displayed on open a specific scorecard.
 >
 ### Creating and managing groups:
 Below are step guides for adding/creating and manage the data source groups:-
 - To add a new group, click the **Add Group button**. The scorecard will display a preview with randomized data as a placeholder.
 - To rename a group, hover over the group’s name. An edit icon will appear click it, update the group name, and save changes.
+- To delete a group, click the **Delete button** associated with that group.
 - To add data sources to a group, click the **down arrow** beside the group name to expand the panel. Then:
 	1.	Click the **Add Item button**, to access forms for select data sources.
 	2.	Select a data source from the available options, including **Aggregate Indicators**, **Data Elements**, **Data Sets**, or **Program Indicators**.
 	3.	Click **Add** to include the selected item(s) in the selected group.
-- To delete a group, click the **Delete button** associated with that group.
+
+![add data items in scorecard](/img/scorecard/add-data-items-in-scorecard.png)
 
 ## Manage Data Source Items
 
 Once data sources are added to groups, users can manage their display and configuration for optimal use in the scorecard.
 
+![scorecard data item management](/img/scorecard/scorecard-data-item-management.png)
+
 ### Available operations
 - **Link/Unlink adjacent items**: Combine two adjacent data items into a single scorecard cell by using the **Link button**, or unlink them if needed.
+
+![scorecard linking data items](/img/scorecard/scorecard-linking-data-items.png)
+
 - **Delete items**: Remove a data source item by clicking the delete button next to it.
 - **Sort items**: Change the order of items by clicking and dragging them into the desired position.
 
@@ -37,7 +46,9 @@ For additional advanced configuration about data source items, to access click o
 - **Effective Gap**: Set the logic to show whether the current value has increased or decreased compared to a previous value, represented by arrows.
 - **Display Options**: Configure how the indicator is displayed including **Display arrows**,*High is Good* and **Show or hide colors**.
 - **Legend Ranges**: Define general ranges for interpreting indicator performance.
-- **Specific Targets**: Set custom targets for indicators to reflect organisational or programmatic benchmarks, which can be by periods, speficic organisation unit or organisation unit levels.
+- **Specific Targets**: Set custom targets for indicators to reflect organisational or programmatic benchmarks, which can be by periods, speficic organisation unit or organisation unit levels, by enabling **`Set Specific Targets`** option.
+
+![scorecard data item config](/img/scorecard/scorecard-data-item-config.png)
 
 ### Setting Specific Targets
 Instead of having overall lengend ranges, based on need sometimes legend ranges can be set by specif targets to meet specific organisation units.