Implement Dashboard Data Fetching Using Context (Stats + Categories)

[phertyameen]

Description

Implement the data layer for the Dashboard by consuming backend endpoints and exposing the data via a context or feature-based abstraction.

❗ Pages and UI components must not directly call APIs.

API Endpoints

• GET /dashboard/stats
• GET /categories

Scope of Work

1. Create Dashboard Context (or Feature Hook)

Create something like:

DashboardProvider
or useDashboard()
or dashboard.feature.ts

This layer should:

• Fetch dashboard stats
• Fetch categories
• Handle loading and error states
• Expose normalized data to the UI

Example shape:

{
  stats: {
    streak: number;
    points: number;
    dailyQuestProgress: {
      completed: number;
      total: number;
    };
  };
  categories: Category[];
  isLoading: boolean;
  error: string | null;

2. Data Fetching Responsibilities

Fetch user streak & points from /dashboard/stats
Fetch available categories and user levels from /categories

Handle:

• Loading states
• Error states
• No duplicated API calls across components

3. Integrate With Dashboard Page

• Wrap the dashboard page with the provider
• UI components should:
• Consume data via context
• Never import or call fetch / axios directly

Requirements

• Use Context API or a feature-based hook
• No API calls inside UI components
• Clean separation of concerns
• Types defined for API responses
• Loading state exposed for UI consumption

Acceptance Criteria

• Dashboard loads data from backend successfully
• Loading state is available to UI
• No page or component directly calls endpoints
• Data logic is centralized and reusable
• Easy to extend for future dashboard features