Wire Dashboard to Real Backend Data — Enrolled Courses, Stats Cards, and Nav Notification Counter

[portableDD]

Labels

Frontend

Description

ByteChain Academy's dashboard displays learning statistics — XP, streak, completed lessons, progress percentages — but every single number is either hardcoded or computed from local mock data. After Issues 8, 9, and 10 wire the core learning actions to the backend, the dashboard needs to be updated to display real aggregated stats from GET /api/v1/users/me/stats and GET /api/v1/courses/enrolled. This issue transforms the dashboard from a static mockup into a live reflection of a user's actual learning journey.

Background & Context

• frontend/app/dashboard/page.tsx calculates stats from useLearning() context — which was mock data before Issues 9 and 10
• frontend/contexts/user-context.tsx exposes fetchUserStats() which calls the backend but the response is not fully used in the dashboard
• The dashboard shows: total lessons, completed lessons, average progress, enrolled courses, available courses — all of these should come from the backend
• Stats like XP, streak, and badges count should come from GET /api/v1/users/me/stats and GET /api/v1/rewards/my
• The NavCounters component renders notification and reward badges but is wired to nothing — it should call GET /api/v1/notifications/unread-count

Requirements

• Refactor frontend/app/dashboard/page.tsx to fetch and display real data:
  • Enrolled courses list from GET /api/v1/courses/enrolled (with real progress %)
  • User stats from GET /api/v1/users/me/stats (XP, streak, certificate count, course count)
  • Available courses from GET /api/v1/courses filtered to non-enrolled
• Wire NavCounters component to GET /api/v1/notifications/unread-count — poll every 60 seconds or refetch on window focus
• Add a "Continue Learning" section showing the last in-progress course with a resume button pointing to the next incomplete lesson
• Show a streak indicator on the dashboard hero — if streak > 0, show flame icon and count; if streak is 0, show a gentle nudge to start learning
• All stats sections must show loading skeletons while data is fetching
• Use TanStack Query for all dashboard data fetching

Suggested Execution

Branch: git checkout -b feat/dashboard-real-time-progress

Files to touch:

• frontend/app/dashboard/page.tsx
• frontend/components/nav-counters.tsx
• frontend/components/dashboard/stats-cards.tsx ← create this
• frontend/components/dashboard/continue-learning.tsx ← create this
• frontend/hooks/use-dashboard.ts ← create this

Implement:

• useDashboard hook — useQuery for enrolled courses, user stats, and available courses
• useNotificationCount hook — useQuery with refetchInterval: 60000 and refetchOnWindowFocus: true for unread count
• StatsCards — four stat cards: XP, streak, certificates, lessons completed — all from real API data
• ContinueLearning — find the enrolled course with the lowest completion % that is not 100%, find its first incomplete lesson, render a card with course title, progress bar, and "Resume" button
• Update NavCounters to display real unread notification count from the backend
• Remove all hardcoded stat values and computed stats from mock learning data

Test & Validate:

• Dashboard loads and shows real enrolled courses with accurate progress percentages
• Stats cards show real XP, streak, and certificate count from the backend
• "Continue Learning" card shows the correct in-progress course and lesson
• NavCounters shows a badge when there are unread notifications
• All skeletons are visible during the initial loading state
• Refreshing the page retains all data (TanStack Query cache + rehydration)

Acceptance Criteria

• Dashboard enrolled courses fetched from GET /api/v1/courses/enrolled
• Stats cards display real data from GET /api/v1/users/me/stats
• "Continue Learning" section identifies and links to the next incomplete lesson
• NavCounters displays real unread notification count, polls every 60 seconds
• Loading skeletons shown during initial data fetch
• No hardcoded stats remain in the dashboard
• TanStack Query used for all data fetching

Example Commit Message

feat: wire dashboard stats, enrolled courses, and nav counters to real backend data

Guidelines

• Assignment required before starting
• PR description must include Closes #[issue_id]
• Join our Telegram: https://t.me/ByteChainAcademy
• Complexity: High (200 pts)