IBX-7076: Customizable dashboard described in User Documentation

docs/getting_started/dashboard/dashboard.md

@@ -0,0 +1,43 @@
+---
+description: Get to know about dashboard.
+---
+
+# Dashboard
+
+Dashboard is the first screen that you see after you log into [[= product_name =]].
+It provides users a quick overview about specific content to make better business decisions based on data and work more efficiently with a clear and easy access to important information.
+
+Dashboard in [[= product_name_content =]]contains the following blocks:
+
+- [Review queue](dashboard_block_reference.md#review-queue-block)
+- [My content](dashboard_block_reference.md#my-content-block)
+- [Common content](dashboard_block_reference.md#common-content-block)
+
+![Dashboard - Headless edition](dashboard_headless.png "Default dashboard in Headless edition")
+
+You can return to the **Dashboard** screen from any other page by clicking the [[= product_name_base =]] logo on the left of the top bar, or the home icon in the main menu.
+
+![Dashboard icon](dashboard_icon.png)
+
+## Customizable dashboard [[% include 'snippets/experience_badge.md' %]] [[% include 'snippets/commerce_badge.md' %]]
+
+You can customize the dashboard depending on your needs.
+A customized dashboard contains a set of widgets selected by the user.
+
+Customization allows you to quickly visit the areas that are used more often and exclude those less important:
+
+- Selected widgets boost productivity by highlighting vital data and helping in decision making
+- Predefined and custom layouts improve visibility for efficient task and deadline management
+
+By default, dashboard in [[= product_name_exp =]] and [[= product_name_com =]] contains the following blocks:
+
+- [Quick actions](dashboard_block_reference.md#quick-actions-block)
+- [Recent activity](dashboard_block_reference.md#recent-activity-block)
+- [Ibexa News](dashboard_block_reference.md#ibexa-news-block)
+- [Review queue](dashboard_block_reference.md#review-queue-block)
+- [My content](dashboard_block_reference.md#my-content-block)
+- [Common content](dashboard_block_reference.md#common-content-block)
+
+![Dashboard - Experience and Commerce edition](dashboard.png "Default dashboard in Experience and Commerce edition")
+
+For more information, see [Work with dashboard](work_with_dashboard.md).

docs/getting_started/dashboard/dashboard_block_reference.md

@@ -0,0 +1,167 @@
+---
+description: Pick from a list of dynamic blocks to create a customized dashboard.
+---
+
+# Dashboard block reference
+
+The following blocks are provided with a clean installation of [[= product_name =]]:
+
+|Block|Description|
+|-----|-----------|
+|[Common content](#common-content-block)|Displays a list of content items created by all members of the organization that the user belongs to.|
+|[Ibexa News](#ibexa-news-block)|Displays a list of recent blog posts or articles published at [ibexa.co blog](https://www.ibexa.co/blog) (product related).|
+|[My content](#my-content-block)|Displays a list of content items created by the user who is currently logged in.|
+|[Orders by status](#orders-by-status-block)|Displays a chart presenting orders and their status.|
+|[Products by category](#products-by-category-block)|Displays a chart presenting products by their category.|
+|[Products with lowest stock](#products-by-category-block)|Displays a table presenting products with the lowest stock.|
+|[Quick actions](#quick-actions-block)|Displays selected mostly used actions and shortcuts.|
+|[Recent activity](#recent-activity-block)|Displays a list of recent activity of all or selected users.|
+|[Recent orders](#recent-orders-block)|Displays a table presenting recent orders and their status.|
+|[Review queue](#review-queue-block)|Displays a list of content items which user or User group can review.|
+|[Top 10 clicked items](#top-10-clicked-items-block)|Displays a table presenting top 10 clicked items.|
+
+!!! note
+
+    Before you add a block that involves products, product types, or product categories, make
+    sure your that your [user Role](permissions_and_users.md) has
+    the `Product/View` and `Product type/View` permission.
+
+## Common content block
+
+Displays a list of content items created by all members of the organization that the user belongs to.
+It shows the following tabs: **Content**, **Scheduled**, **Media**.
+
+On the **Properties** tab, set values in the following fields:
+
+- **Name** - Enter a name for the block.
+
+On the **Design** tab, in the **View** field, select the layout to be used to present a list of content and submit your changes.
+
+## Ibexa News block [[% include 'snippets/experience_badge.md' %]] [[% include 'snippets/commerce_badge.md' %]]
+
+Presents a list of recent blog posts or articles published at `ibexa.co` blog (product related).
+It includes title, image, publication date, and link to article details.
+
+On the **Properties** tab, set values in the following fields:
+
+- **Name** - Enter a name for the block.
+- **News limit** - Set a maximum number of news to be displayed. Default = 7, minimum value = 1, and maximum = 10.
+
+On the **Design** tab, in the **View** field, select the layout to be used to present a list of news and submit your changes.
+
+## My content block
+
+Displays a list of content items created by the user who is currently logged in.
+It shows the following tabs: **Drafts**, **Scheduled**, **Content**, **Media**, **Drafts to review**.
+
+On the **Properties** tab, set values in the following fields:
+
+- **Name** - Enter a name for the block.
+
+On the **Design** tab, in the **View** field, select the layout to be used to present a list of content and submit your changes.
+
+## Orders by status block [[% include 'snippets/commerce_badge.md' %]]
+
+Displays a chart presenting orders split by status, with their number and percentage.
+
+On the **Properties** tab, set values in the following fields:
+
+- **Name** - Enter a name for the block.
+- **Statuses** - Set the statuses of orders that should be included in the list. Default value = All. The list of statuses depends on configured [order workflow](https://doc.ibexa.co/en/latest/commerce/order_management/configure_order_management/) and can be customized.
+- **Time period** - Set the time period: All time, Last day, Last week, Last month. Default value = Last month.
+
+On the **Design** tab, in the **View** field, select the layout to be used to present a list of orders and submit your changes.
+
+## Products by category block [[% include 'snippets/experience_badge.md' %]] [[% include 'snippets/commerce_badge.md' %]]
+
+Displays a chart presenting the products split by category, together with the percentage.
+
+On the **Properties** tab, set values in the following fields:
+
+- **Name** - Enter a name for the block.
+- **Number of categories** - Set a maximum number of categories to be displayed. Default value = 10.
+
+On the **Design** tab, in the **View** field, select the layout to be used to present a list of products and submit your changes.
+
+## Products with lowest stock block [[% include 'snippets/experience_badge.md' %]] [[% include 'snippets/commerce_badge.md' %]]
+
+Displays a table of products with the lowest stock.
+Products are sorted based on Stock value (sorted from lowest to highest stock).
+
+The table contains the following columns: Name, Image, Code, Category, Type, Variant, Stock.
+
+On the **Properties** tab, set values in the following fields:
+
+- **Name** - Enter a name for the block.
+- **Number of products to be displayed** - Set a number of products to be displayed. Default value = 10.
+- **Stock** - Set up the maximum stock value (only products with stock number greater than zero and less than the set maximum number will be displayed). Default value = 10.
+
+On the **Design** tab, in the **View** field, select the layout to be used to present a list of products and submit your changes.
+
+## Quick actions block [[% include 'snippets/experience_badge.md' %]] [[% include 'snippets/commerce_badge.md' %]]
+
+Displays selected mostly used actions and shortcuts, for example, **Create content**.
+
+On the **Properties** tab, set values in the following fields:
+
+- **Name** - Enter a name for the block.
+- **Actions** - Select actions to be displayed as shortucts: Create content, Create form, Create product, Create catalog, Create company. Default value = All.
+
+On the **Design** tab, in the **View** field, select the layout to be used to present a list of quick actions and submit your changes.
+
+## Recent activity block [[% include 'snippets/experience_badge.md' %]] [[% include 'snippets/commerce_badge.md' %]]
+
+Displays a list of recent activity of all or selected users.
+It also includes a link to view all activities available in Admin tab.
+
+Recent activity block contains the following data: action time, User reference (avatar, first and last name) with a link to the user profile (if available),
+Activity type with the context.
+
+On the **Properties** tab, set values in the following fields:
+
+- **Name** - Enter a name for the block.
+- **User** - Select users whose recent actions should be visible. By default, activities of all users are configured.
+- **Object class** - Choose an activity area to be displayed. Default value = All.
+- **Results limit** - Set a maximum number of activity logs to be displayed. Minimum value = 1, and maximum = 10.
+
+On the **Design** tab, in the **View** field, select the layout to be used to present a list of content items for review and submit your changes.
+
+## Recent orders block [[% include 'snippets/commerce_badge.md' %]]
+
+Displays a table presenting recent orders with the newest creation date/recently placed.
+
+Table contains following columns: Order ID, Company name, Customer name, Unique items, Total value, Status, Created.
+
+On the **Properties** tab, set values in the following fields:
+
+- **Name** - Enter a name for the block.
+- **Statuses** - Set the statuses of orders that should be included in the list: Pending, Processing, Cancelled, Completed. Default value = All.
+- **Limit** - Set a maximum number of orders to be displayed. Default value = 10.
+
+On the **Design** tab, in the **View** field, select the layout to be used to present a list of orders and submit your changes.
+
+## Review queue block
+
+Displays a list of content items which user or User group can review.
+
+On the **Properties** tab, set values in the following fields:
+
+- **Name** - Enter a name for the block.
+
+On the **Design** tab, in the **View** field, select the layout to be used to present a list of content items for review and submit your changes.
+
+## Top 10 clicked items block [[% include 'snippets/experience_badge.md' %]] [[% include 'snippets/commerce_badge.md' %]]
+
+Requires [Ibexa Personalization](personalization.md) enabled.
+
+Displays a table presenting top 10 clicked items.
+
+Table contains following columns: Item clicked (including item name), Item type, Recommended (presenting number of recommendations of selected item),
+Clicked (presenting total number of clicks on selected item).
+
+On the **Properties** tab, set values in the following fields:
+
+- **Name** - Enter a name for the block.
+- **Customer Id** - Select customer Id whose top 10 clicks are displayed.
+
+On the **Design** tab, in the **View** field, select the layout to be used to present a list of content items for review and submit your changes.

docs/getting_started/dashboard/work_with_dashboard.md

@@ -0,0 +1,173 @@
+---
+description: Work with dashboard.
+edition: experience
+---
+
+# Work with dashboard
+
+You can work with dashboard: edit and customize it depending on your needs.
+
+## Permissions
+
+To be able to customize a dashboard, you need the `dashboard/customize` policy.
+By default, all users belonging to the `Editors` User Group have the `Dashboard` role assigned, so that they can edit, create, or delete a dashboard.
+If, by any reason, you want to narrow this permission, you can set up specific limitations.
+
+For more information about setting up a permission system, see [Work with permissions](work_with_permissions.md).
+
+## Customize dashboard
+
+To customize the dashboard, on the main page, click **Customize dashboard**.
+
+![Customize dashboard](customize_dashboard.png "Customize dashboard")
+
+If the banner is closed, click the three dots icon, and use the **Customize dashboard** action.
+
+![Customize dashboard - three dots icon](customize_dashboard_icon.png "Customize dashboard - three dots icon")
+
+This action opens an online editor - Dashboard Builder.
+
+![Dashboard Builder](dashboard_builder.png "Dashboard Builder")
+
+### Dashboard Builder interface
+
+Dashboard Builder user interface consists of:
+
+A. Drop zone
+
+B. Elements / Structure view toolbar
+
+C. Buttons:
+
+|Name|Icon|Use|
+--------|-----------|----------
+|Fields|![Fields](dashboard_fields.png)|Edit dashboard name.|
+|Switch layout|![Switch layout](dashboard_switch_layout.png)|Switch layout for the dashboard.|
+|Undo|![Undo](dashboard_undo.png)|Undo latest change.|
+|Redo|![Redo](dashboard_redo.png)|Redo latest change.|
+|Structure view|![Structure view](dashboard_structure_view.png)|Access Structure view toolbar.|
+|Elements menu|![Elements menu](dashboard_elements.png)|Access Elements toolbar.|
+|View switch|![View switch](dashboard_switch_toolbar.png)|Move Elements / Structure toolbar to the other side of the screen.|
+
+Dashboard Builder has two main toolbars that you can use while creating a dashboard:
+
+- **Elements** - consists of all available blocks that you can use by dragging them and dropping on a drop zone.
+
+![Elements](dashboard_elements_toolbar.png)
+
+- **Structure view** - shows a structure of your dashboard, including its division into zones and the blocks that they contain.
+
+![Structure view](dashboard_structure_view_toolbar.png)
+
+### Choose layout
+
+For a new dashboard you can choose layout which defines the available zones and helps to organize the dashboard view.
+Applying a layout divides the dashboard into the defined zones.
+The zones are placeholders for blocks.
+
+To do it, click the **Switch layout** icon on the left side of the upper toolbar, then choose one from available layouts, and click **Submit**.
+
+![Switch layout](dashboard_switch_layout_window.png)
+
+### Add blocks
+
+In Dashboard Builder, you can access a menu of **Elements**, which includes a set of blocks of content that you can add to the zones of the dashboard.
+
+!!! Tip
+
+    For a list of available blocks and their detailed description, see [Dashboard block reference](dashboard_block_reference.md).
+
+Add a block by dragging it from the menu to an empty place on a zone.
+Do not worry about placing blocks in the proper place from the start.
+You can reorder them at any time by dragging and dropping them in the desired location.
+You can reorder blocks in a few ways:
+
+- drag and drop block in the desired location on a drop zone
+- use **Move up block** or **Move down block** option from the block toolbar
+- access Structure view and use 'Move up' and 'Move down' function in the settings of the block
+
+When you add a new block to the drop zone, drop it in the blue highlighted area.
+Before you drop it, a bold line appears  - it helps you see the position of the newly added block in relation to other, already added blocks.
+
+![Drop zone line](dashboard_blue_line.png)
+
+When you add a block by dragging it from Elements menu into the drop zone, the block settings panel open immediately where you can configure all block properties.
+
+![Block properties](dashboard_block_properties.png)
+
+This is a default behavior.
+You can globally turn off automatic opening of the block settings panel in the user settings.
+First, access your user settings on the right side of the top bar:
+
+![User settings](user_settings_builder.png "User settings")
+
+Then, go to **Preferences** tab, **Edit** section.
+Here, you can find **Automatically open block settings in builder** setting, which is enabled by default.
+To change this behavior, click on **Edit** icon, find the setting, and change its value to `disabled`.
+
+![Blocks settings](user_settings_blocks_builder.png "User settings - blocks settings")
+
+### Work with blocks
+
+Each block has its special properties.
+You can access them by placing the cursor on a block in the drop zone and clicking the **Block settings** icon.
+
+![Block settings - Dashboard Builder](block_settings_builder.png "Block settings - Dashboard Builder")
+
+Settings available for blocks are divided into two tabs: **Properties** and **Design**.
+The settings available on the **Properties** tab depend on to the block's content.
+For a description of these settings, see [Dashboard block reference](dashboard_block_reference.md).
+
+To save changes, click **Save and close**.
+
+You can also work with the block, for example, duplicate it, change its position, or delete it.
+
+Hover over the block and the toolbar appears.
+Click the three dots icon to see more options.
+
+The following actions are available:
+
+- Move up block - allows you to change position of the block by moving it up
+- Move down block - allows you to change position of the block by moving it down
+- Block settings - allows you to access properties window
+- Duplicate - duplicates existing block with its settings
+- Refresh - refreshes preview of the block
+- Delete - deletes existing block
+
+![Dashboard block settings](dashboard_block_actions.png "Dashboard block settings")
+
+## Edit dashboard
+
+At any time you can edit an active customized dashboard.
+To do it, click the three dots icon in the top right corner, and then click **Edit...**.
+
+![Edit dashboard](edit_active_dashboard.png "Edit dashboard")
+
+This action opens the Dashboard Builder that allows you to edit an active customized dashboard and publish its updated version.
+All the changes that you make are visible after you save them and go back to the dashboard.
+
+## Save dashboard
+
+There are several options for saving work in the Dashboard Builder:
+
+|Option|Description|
+|------|-----------|
+|Publish|[Publish](publish_content.md) the dashboard draft. |
+|Save draft|Save the dashboard draft.|
+|Delete draft|Delete the dashboard draft.|
+
+## Select active dashboard
+
+When you create a new customized dashboard, you can choose, which dashboard is set as an active.
+
+To do it, access your user settings on the right side of the top bar.
+Then, go to **Preferences** tab, **Dashboard** section, and click **Edit**.
+
+Select the dashboard to be set as active, and click **Save**.
+
+![Select active dashboard](select_active_dashboard.png "Select active dashboard")
+
+You can also select active dashboard and switch between default and customized dashboard in the main dashboard view.
+Click the three dots menu and use the **Switch to...** action.
+
+![Switch between dashboards](switch_dashboard.png "Switch between dashboards")