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.
One screen to see all achievements by time and type, filter by category, and jump into any achievement for full details.