Dashboard Display Decks (2/2)

[cwon33]

Frontend: Dashboard Horizontal Deck Sections (consume profileService)

This is a one week ticket

Task

Implement the three horizontally scrollable deck sections on the Dashboard, stacked vertically, replacing the old labels per Figma:

1. Recent
2. Up Next (was “Related Topics” in Figma)
3. Completed (replaces “Same Level”)

Implementation Requirements

• In Dashboard.tsx, render three vertical sections with headers: Recent, Up Next, Completed.
• Each section uses a horizontal FlatList (or ScrollView) of DeckCover.tsx cards.
• Do not reimplement categorization. Call the backend service:
  • getCategorizedDecks(activeProfileId, allDecks) → returns { recent, upNext, completed }.
• Load deck metadata from act_safety_decks.json; pass proper props (title, difficulty, category) to DeckCover.tsx.
• When the active profile changes (via SwitchUserModal), re-query getCategorizedDecks(...) and refresh all three lists.
• Styling via NativeWind only; match Figma spacing, paddings, and card sizing.
• Smooth horizontal scroll left→right; section headers are bold and aligned per Figma.

Data/Behavior (consumption only)

• Recent: use the recent array returned by the service (already sorted by lastOpenedAt desc).
• Up Next: use the upNext array (unopened decks).
• Completed: use the completed array (finished decks).
• Handle empty states gracefully (if any array is empty, show nothing for that section—no warnings).

Set up

• Create a lightweight hook useDashboardDecks(profileId) that:
  • Calls getCategorizedDecks(profileId, allDecks).
  • Exposes { recent, upNext, completed, refresh }.
  • Re-runs when profileId changes.
• Wire Dashboard.tsx to the hook; trigger refresh on profile switch events.

Testing

• Verify three sections render with correct headers.
• Confirm horizontal scrolling works on iOS/Android.
• Switch profiles and confirm lists update.
• Validate “Recent” order matches the backend (most recent leftmost).
• Confirm “Up Next” has only unopened decks; “Completed” only finished decks.
• Check layout/spacing vs. Figma.

Acceptance Criteria

• The Dashboard displays three distinct vertical sections: Recent, Up Next, and Completed.
• Each section horizontally scrolls through deck covers.
• Data is pulled dynamically from profileService.getCategorizedDecks() and reflects current user progress.
• Switching profiles immediately refreshes deck lists and reflects correct user data.
• “Recent” decks are sorted with most recent on the left.
• “Up Next” only includes unopened decks (no viewedCount or viewedCount == 0).
• “Completed” only includes fully finished decks (viewedCount == totalCount).
• Layout, typography, and spacing visually match the Figma reference.
• All styles use NativeWind.
• Works consistently on both iOS and Android devices without scroll clipping or layout shifts.

Resources

• Figma: Dashboard reference
• NativeWind Docs
• React Native FlatList Docs