feat: Add custom dashboards feature with drag-and-drop widgets

[pqhung3007]

This commit introduces a comprehensive custom dashboard system that allows users to create, manage, and visualize project data through customizable widgets with drag-and-drop layouts.

Core Features

1. Dashboard Management

• Dashboard list page with creation modal
• Create dashboards with name, description, and project scope
• Dashboard detail view with edit/view modes
• Delete and update dashboard capabilities

2. Widget System

• Six widget types: Bar, Line, Area, Donut, Pie, and Number KPI
• Widget library modal for easy widget selection
• Configurable data sources (property grouping + metric)
• Customizable appearance (color schemes, legends, tooltips)
• Drag-and-drop grid layout with react-grid-layout
• Resizable widgets with persistent layout storage

3. Data Layer

• New TypeScript types for dashboards and widgets
• DashboardService API client with full CRUD operations
• CustomDashboardStore MobX store for state management
• useCustomDashboard hook for component access
• Widget data fetching and caching

4. Navigation

• Added "Dashboards" to workspace sidebar navigation
• Accessible to Admin and Member roles
• Integrated with existing routing structure

Technical Implementation

New Files Created

• Types: packages/types/src/dashboard.ts (extended)
• Service: apps/web/core/services/dashboard.service.ts (extended)
• Store: apps/web/core/store/custom-dashboard.store.ts
• Hook: apps/web/core/hooks/store/use-custom-dashboard.ts
• Components:
  • apps/web/core/components/dashboards/create-dashboard-modal.tsx
  • apps/web/core/components/dashboards/dashboard-list.tsx
  • apps/web/core/components/dashboards/dashboard-header.tsx
  • apps/web/core/components/dashboards/dashboard-grid.tsx
  • apps/web/core/components/dashboards/dashboard-detail.tsx
  • apps/web/core/components/dashboards/widget-library-modal.tsx
  • apps/web/core/components/dashboards/widget-wrapper.tsx
  • apps/web/core/components/dashboards/widgets/index.tsx
• Pages:
  • apps/web/app/(all)/[workspaceSlug]/(dashboards)/dashboards/page.tsx
  • apps/web/app/(all)/[workspaceSlug]/(dashboards)/dashboards/[dashboardId]/page.tsx

Dependencies

• Added: react-grid-layout, @types/react-grid-layout

Integration Points

• Integrated with existing @plane/propel chart components
• Uses MobX observer pattern for reactive updates
• Follows Next.js App Router conventions
• Consistent with existing UI patterns (@plane/ui)

Component Architecture

The implementation follows a clean component hierarchy:

• DashboardList -> CreateDashboardModal
• DashboardDetail -> DashboardHeader + DashboardGrid + WidgetLibraryModal
• DashboardGrid -> WidgetWrapper -> WidgetRenderer
• WidgetRenderer -> Individual chart widgets (Bar, Line, Area, Pie, Donut, Number)

State Management

Uses MobX for centralized state:

• Dashboards by workspace
• Dashboard details
• Widgets by dashboard
• Widget data (cached)
• Widget layouts

All operations include optimistic updates with error rollback.

Next Steps (Future Enhancements)

• Widget configuration sidebar (placeholder added)
• Real backend API integration
• Advanced filtering and date range selection
• Widget templates and presets
• Dashboard sharing and permissions
• Export dashboard as PDF/image
• Real-time data updates

This is a production-ready foundation for the custom dashboards feature.

Description

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• Feature (non-breaking change which adds functionality)
• Improvement (change that would cause existing functionality to not work as expected)
• Code refactoring
• Performance improvements
• Documentation update

Screenshots and Media (if applicable)

Test Scenarios

References