[Feature]: Implement Overview Tabs on Dashboard Overview Page

Description

Develop the overview page tabs for Total Revenue, Subscriptions, Sales, and Active Now. This dashboard will provide users with key performance indicators (KPIs), metrics, and recent activity in a customisable and informative manner.

Purpose

To give users an overview of KPIs, metrics, and recent activity.

Requirements

Quick Action Buttons:

Add a "Download" button for exporting data.
Add a date range picker to filter data.

Customisable Widget Layout:

Allow users to drag and drop widgets to customise their dashboard layout.
Enable resizing of widgets.
Save user preferences for widget layout.

Key Performance Indicators (KPIs):

Display Total Revenue, Subscriptions, Sales, and Active Now.
Include each KPI's visual indicators (e.g., graphs, charts).
Show percentage change from the previous month.

Recent Activity Feed:

Implement a component to display recent sales activities.
Ensure the component updates in real-time or at regular intervals.
Include user avatars, names, email addresses, and sales amounts.

Responsive Design:

Ensure the design is responsive and works on all screen sizes.
Test the layout on various devices (e.g., desktops, tablets, mobile phones).

Default Dashboard View:

Add an option for users to set and save their preferred default dashboard view.
Ensure the saved view is loaded when the user returns to the dashboard.

Acceptance Criteria

Key Performance Indicators (KPIs)

Implement KPIs Display:

Total Revenue: Display total revenue with the currency sign and percentage change.
Subscriptions: Display the number of subscriptions and percentage change.
Sales: Display the total sales and percentage change.
Active Now: Display the number of active users and change from the previous hour.

Recent Activity Feed

Implement Recent Activity Feed Component:

Develop a component to display recent sales activities as shown in the Figma UI.
Ensure the component updates in real-time or at regular intervals.
The component should show user avatars, names, email addresses, and sales amounts.

Customisable Widget Layout

Implement Customisable Widget Layout:

Allow users to customise the layout of their dashboard widgets.
Enable drag-and-drop functionality for widget positioning.
Allow resizing of widgets to suit user preferences.
Save and retrieve user preferences for widget layout in the user's profile.

Responsive Design

Ensure Responsive Design for All Screen Sizes:

Test the dashboard layout on various devices (e.g., desktops, tablets, mobile phones).
Adjust the layout to ensure it looks good on all screen sizes.
Ensure all interactive elements are easily accessible on touch devices.

Default Dashboard View

Add Option to Set Default Dashboard View:

Provide users an option to set and save their preferred default dashboard view.
Ensure the saved view is loaded when the user returns to the dashboard.

Documentation

Document Overview Page Features and Customisation Options:

Create user documentation for the dashboard overview features.
Include instructions on customising the widget layout and setting the default view.
Document any limitations or known issues.

Expected Outcome:

[ ] An informative and customizable dashboard overview.
[ ] Key Performance Indicators (KPIs) for Total Revenue, Subscriptions, Sales, and Active Now.
[ ] A recent activity feed that updates in real-time or at regular intervals.
[ ] Quick action buttons for downloading data and selecting date ranges.
[ ] A customizable widget layout with drag-and-drop and resizing functionality.
[ ] Responsive design that works on all screen sizes.
[ ] Option for users to set and save their default dashboard view.

Links

Link to Figma Dashboard

Dashboard

hngprojects / hng_boilerplate_nextjs

[Feature]: Implement Overview Tabs on Dashboard Overview Page #164