feat: dashboard widgets

[NarayanBavisetti]

Dashboard widgets

This PR introduces an enhanced version of the dashboard, providing users with a personalised home dashboard experience using multiple widgets.

Screen.Recording.2024-01-17.at.5.45.58.AM.mov

---

There are 8 widgets in total, including-

1. Statistics overview:

• Gives an overview to the user, such as- Total number of issues assigned to them, overdue, created by them, and completed by them.
• Clicking on each stat redirects the user to the desired page with the list of all the issues.

Widget	Loading state

2. Assigned issues:

• Displays the top 5 issues assigned to the user, sorted by priority.
• Categories include Upcoming, Overdue, and Completed issues.
• Date based filters can be applied, such as- today, this week, this month and this year.

Widget	Empty state	Loading state

3. Created issues:

• Lists the top 5 issues created by the user, ordered by priority.
• Categories include Upcoming, Overdue, and Completed issues.
• Date based filters can be applied.

Widget	Empty state	Loading state

Each issue of the above two widgets can be opened in the peek overview.

4. Issues by state groups:

• Graphical representation of user-assigned issues grouped by state groups.
• Date based filters can be applied.
• Clicking on the ring of the graph redirects the user to the assigned issues page with the selected state group applied as the filter.

Widget	Empty state	Loading state

5. Issues by priority:

• Graphical representation of user-assigned issues grouped by priority.
• Date based filters can be applied.
• Clicking on a bar of the graph redirects the user to the assigned issues page with the selected priority applied as the filter.

Widget	Empty state	Loading state

6. My activity:

• Lists the latest activity of the user across the workspace.

Widget	Empty state	Loading state

7. My projects:

• Lists the projects the user is part of, ordered by last activity.
• Allows users to create a project directly from the widget (if they have the access).

Widget	Loading state

8. Collaborators

• Lists members of all projects the user is part of across the workspace.
• Clicking on each member redirects the user to their profile page.

Widget	Empty state	Loading state

Implementation:

1. Created a new MobX store (dashboard.store) to store the widget details and statistics, and other necessary actions and computed functions, including-

// observables
homeDashboardId: observable.ref,
widgetDetails: observable,
widgetStats: observable,

// computed
homeDashboardWidgets: computed,

// computed actions
getWidgetDetails: action,

// fetch actions
fetchHomeDashboardWidgets: action,
fetchWidgetStats: action,

// update actions
updateDashboardWidget: action,
updateDashboardWidgetFilters: action,

Other updates:

1. Updated the @plane/ui Button component to use classNames using clsx and tailwind-merge.
2. Updated the @plane/ui PriorityIcon component logic and refactored the component.
3. Project empty state in the dashboard

[rahulramesha]

Please make the necessary changes and address the comments

[rahulramesha]

All the empty states look very similar to each other. could you please create a common component and re use that in all the empty states

[aaryan610]

The empty states vary in terms of content and structure, I don't think it'll make much sense as we are going to have more widgets in the future with different empty states structure.

[rahulramesha]

please avoid conditionals inside tsx, It will make it look more readable

[sriramveeraghanta]

As there are too many conditions inside tsx, we better break this down into smaller components.

[aaryan610]

This same logic is being used wherever we are rendering activity, I think it'll be better to have a separate PR just to refactor the activity logic.