Dashboard Layout Component

Dashboard Layout Component

Component File: src/features/dashboard/components/DraggableComponent.tsx Usage: Enable dashboard layout customization Access Level: All authenticated users Last Updated: February 3, 2026

Overview

The Dashboard Layout system allows users to customize their dashboard by reordering widgets using up/down arrow controls (not drag-and-drop). Users can add optional components, remove them, and reorder the vertical stack. Layout preferences are saved per user in user_preferences.

> Note: Despite the component name DraggableComponent, the current implementation uses arrow-button reordering, not drag-and-drop. The react-dnd library is mounted in App.tsx but not actively used for dashboard layout.

UI Features

Core Components (Always Present)

• Revenue Chart (line/bar/area)
• Recent Donations Table
• To-Do List

Optional Components (Addable)

• Top Donors Widget
• Fund Summary
• Quick Actions

Edit Mode Features

• "Change Layout" button - Enter edit mode
• Up/Down arrows - Reorder components
• Remove button (trash icon) - Remove optional components
• "Add Component" dropdown - Add optional components
• "Done" button - Exit edit mode and save
• "Reset" button - Restore default layout

State Management

Global State (Zustand UISlice)

• dashboardLayout - Array of component IDs in display order
• setDashboardLayout(layout) - Save new layout
• addDashboardComponent(componentId) - Add optional component
• removeDashboardComponent(componentId) - Remove optional component

Layout Configuration

type DashboardComponent = 
  | 'donations-chart' 
  | 'recent-donations' 
  | 'to-do-list'
  | 'top-donors'
  | 'fund-summary'
  | 'quick-actions';

// Default layout
const DEFAULT_LAYOUT: DashboardComponent[] = [
  'donations-chart',
  'recent-donations', 
  'to-do-list'
];

Data Persistence

Storage

Layout stored in user_preferences.ui_preferences.dashboardLayout via Supabase.

Functions (src/lib/db.ts)

• fetchUIPreferences() - Load layout on app init
• saveUIPreferences() - Save layout changes

Dependencies

Internal

• useAppStore - Zustand store for layout state
• src/features/dashboard/components/* - Dashboard widget components

External Libraries

• lucide-react - Arrow and action icons

Related Documentation

• ../dashboard/01-MAIN-DASHBOARD.md
• 24-METRICS-CARD.md

Synced from IFMmvp-Frontend documentation: pages/components/09-DRAGGABLE-COMPONENT.md