> For the complete documentation index, see [llms.txt](https://intercode.gitbook.io/intercode-saas-kit/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://intercode.gitbook.io/intercode-saas-kit/pages/dashboard.md).

# Dashboard

Dashboard page is written with **Ant Design Row** and **Col** components which allow us to change sizes of widgets or adapt them to mobile layout easily.

Data for all widgets depends on the **Businesses Select** and **RangePicker** (which consists of two separate **DatePickers**). By default, the range is the last 30 calendar days, but it can be adjusted to any range from 1 day to several years. Regardless of whether the range is selected from left to right or right to left, the logic will pick the range between the dates. The **Businesses Select** is optimized with a debounce function, so data won't reload immediately. Additionally, the page maintains a state with previous select values, so if the user doesn't change the selections after clicking, the data will not be reloaded.

All charts used in widgets written with `react-chartjs-2` library (chart JS wrapper for react). 

{% hint style="success" %}
All widgets fetch data internally, have their own loading state, and can be reloaded separately. To properly support multiple languages, we need to pass a `key` prop with `i18.language` value to the chart components to trigger re-rendering when the language changes, ensuring the correct variant of labels is displayed.
{% endhint %}

Detailed chartJS docs:

{% embed url="<https://www.chartjs.org/docs>" %}