Full context for a single achievement
When you click an achievement card, the list is replaced by the Achievement detail view.
Layout and content
Back button – Returns you to the achievement list. The transition is handled in the page (e.g. opacity) so you don't lose context.
Achievement header – Icon, name, and optional badges (e.g. category, rarity).
Description – Full description of the achievement.
Record and target – Record value, target value, and progress (e.g. percentage or "X / Y").
Achieved at – When the achievement was achieved (formatted date and/or relative time).
Points breakdown – If the backend provides a points breakdown, it can be shown (e.g. per event or per period).
Rarity / category – Badges for rarity (e.g. common, rare, epic, legendary) and category.
Data for the detail view comes from:
Initial data – The achievement object passed from the list (so the detail can render immediately).
API – A single-achievement endpoint is used to load or refresh data (e.g. by achievement ID). If the API fails or the achievement is not found, an error state is shown ("Achievement not found") with a Go Back button.
Loading and errors: If there is no initial data, a loading skeleton is shown until the API responds. If there is an error and no initial data, the "Achievement not found" message and Back button are shown.
Benefit: Full context for a single achievement without leaving the page; easy return to the list.