Dashboard Customization

Status: ✅ Complete
Last Updated: 2026-01-14

Overview

Complete dashboard customization system with card reordering, drag and drop, and single card view.

✅ Database schema (DashboardCardPreference model)
✅ Backend service (DashboardCardPreferencesService with getPreferences, setCardOrder, updateCardOrder, updateCardVisibility, resetToDefault)
✅ API routes (GET /api/dashboard-card-preferences, POST /api/dashboard-card-preferences/order, PATCH /api/dashboard-card-preferences/order, PATCH /api/dashboard-card-preferences/visibility, POST /api/dashboard-card-preferences/reset)
✅ Backend tests (13 service tests, all passing)
✅ Frontend hook (useDashboardCardPreferences with loadPreferences, getOrderedCardIds, moveCardUp, moveCardDown)
✅ Frontend integration (integrated hook into TodayPage, DashboardCard component created)
✅ Reordering UI (up/down buttons implemented, "Customize Layout" toggle added to header, reorder controls on all cards)
✅ Frontend tests (DashboardCard component tests - 8 tests covering rendering, controls, interactions)
✅ Expanded reordering to all cards on TodayPage (all cards now wrapped with DashboardCard)
✅ Drag and drop reordering (implemented HTML5 drag and drop API, replaced up/down buttons with drag and drop when "Customize Layout" is enabled, added visual feedback for dragging and drag over states)
✅ Reorder list/modal (CardReorderModal component created with drag and drop and up/down buttons, integrated into TodayPage with "Reorder Cards" button, comprehensive tests - 12 tests passing)

✅ SingleCardViewModal component created with large button styling
✅ DashboardCard updated with single view button (Maximize2 icon)
✅ Integrated into TodayPage for hydration, caffeine, alcohol, supplements, medications, and recreational-substances cards
✅ Comprehensive tests (6 SingleCardViewModal tests, 3 DashboardCard single view tests, all passing)