[FSunstone] Configurable Dashboard

[tinova]

Description

Widget Customization for Dashboard

To enhance user experience and provide a more personalized touch, we aim to introduce widget-like functionality in our dashboard. This will allow users to customize the data they see, providing shortcuts to commonly used items/features and additional metrics...

Key Areas for Customization:

• Accounting
• Quotas
• Showback

Note: Grafana can be used as a source for the customizability function.

Implementation Plan

1. Develop a Dashboard Layout Component:

   • Purpose: To offer a canvas where users can add, remove, or rearrange widgets.
   • Features:
     • Grid-based layout to snap widgets in place.
     • Save and load user's custom layouts.
     • Responsive design to adapt to various screen sizes.

2. Develop a Base Widget Component:

   • Purpose: To encapsulate common widget functionalities.
   • Features:
     • Resizable corners to adjust widget dimensions.
     • Drag-and-drop functionality for repositioning.
     • Close button to remove widgets from the dashboard.
   • Suggestion: Use dnd kit for drag-and-drop functionality.

3. Create Widget Representations for Existing Tabs/Components:

   • Design new widget-like representations of current components that can be added to the dashboard.
   • Maintain a widget "library" or "store" where users can pick and choose which widgets to add.
   • Ensure that these widgets are tightly integrated with the base Widget component to inherit all common functionalities.

Additional Considerations:

• User Preferences: Allow users to save their dashboard layout and widget preferences to ensures that they have a consistent experience every time they log in.

Progress Status

1. Dashboard Customizability:

   • [ ] Successfully design and implement a customizable dashboard base layout.

2. Widget Functionality:

   • [ ] Develop a base Widget component with common functionality.

3. Widget Library Creation:

   • [ ] Design and implement widget-like representations for existing components.
   • [ ] Set up a widget "library" or "store" for users to select from.

• [ ] Testing - QA
• [ ] Documentation (Release notes - resolved issues, compatibility, known issues)