One screen for all achievements by time and type
On the Achievements page you have:
Header
Title: "Growth Achievements".
Subtitle: "Track your progress and celebrate milestones".
Stats (when data is available)
Total – Total number of achievements.
Milestones – Count of milestones (e.g. achievements reached multiple times or meeting a milestone threshold).
Records – Number of completed/record achievements.
Latest achievement highlight
If there is a latest achievement (most recently achieved), a highlight card appears at the top with the achievement name, a "Recently" (or similar) badge, and the display value (e.g. points). This gives quick visibility of your most recent win.
Tabs
Latest 7d – Achievements with recent activity in the last 7 days (e.g. top by progress).
Latest 30d – Same idea for the last 30 days.
Milestones – Achievements that have reached a milestone (e.g. high progress or repeated completions).
Records – All-time or period records (achieved goals).
Changing the tab updates the list of achievement cards below. Tabs are implemented as TabsList with TabsTrigger values: latest, monthly, milestones, records.
Category filter
When the current tab has achievements with categories, a Filter row appears: All plus one button per category (e.g. Content Master, Community Builder, Sales Champion, Record Breaker). Click All to clear the filter; click a category to show only achievements in that category.
Achievement cards (list)
Each achievement is shown as a card with:
Icon – Category-based or achievement icon (e.g. edit, users, shopping-cart, trophy).
Name and description (or target/record info).
Progress bar – Current record vs. target (percentage); color may change by progress (e.g. accent when 100%, primary when high).
Target value and current record (or display value).
Category – Visual style (border/background) can vary by category (content_master, community_builder, sales_champion, record_breaker).
Achieved state – When achieved, the card may use a different style (e.g. accent border/background).
Clicking a card opens the Achievement detail view for that achievement.
Empty state: If a tab has no achievements (or none match the category filter), an empty state is shown with a short message (e.g. "No achievements in the last 7 days. Keep growing!") and optional icons.
Loading: While data is loading, skeleton placeholders are shown for the header and cards.
Benefit: One screen to see all achievements by time and type, filter by category, and jump into any achievement for full details.