Module: Dashboard

Dashboard component for the AutoSuggestion Quiz application.

Source:

Methods

(inner) Dashboard(props) → {React.ReactElement}

A dashboard page that displays all available problems in a filterable, searchable grid. Also shows aggregate progress statistics at the top.

Search matches against both problem titles and tags (case-insensitive). Status filters and search can be applied simultaneously.

Parameters:
Name Type Description
props Object
Properties
Name Type Description
problems Array.<Problem>

Full list of problems to display and derive stats from.
onOpenProblem function

Callback invoked with the selected problem when the user clicks a problem card.
Source:
Returns:

The rendered dashboard page.

Type
React.ReactElement
Example
<Dashboard problems={allProblems} onOpenProblem={(p) => setActiveProblem(p)} />

Type Definitions

Problem

Type:
  • Object
Properties:
Name Type Attributes Description
id string

Unique identifier for the problem.
title string

Display title of the problem.
difficulty 'easy' | 'medium' | 'hard'

Difficulty level, used to look up a color from DIFFICULTY_COLORS.
status 'not-started' | 'in-progress' | 'completed'

Current completion status.
tags Array.<string>

List of topic tags (e.g. ['arrays', 'sorting']). Used in search matching.
grade number <optional>

Optional numeric grade (0–100) shown as a badge when present.
Source: