# Mobile Plan 4 — Progress Tab

**Goal:** Streak calendar + stats + weekly chart + achievement gallery, all themed for light/dark.

## File map

```
apps/mobile/
  app/
    (tabs)/progress.tsx      → MODIFY: real progress screen
  components/
    StreakCalendar.tsx       → month grid, days colored by completion %
    StatCard.tsx             → big-number card (streak | completion% | total XP)
    WeeklyXPChart.tsx        → bar chart of last 7 days, react-native-svg
    AchievementGrid.tsx      → 3-column badge grid
    AchievementBadge.tsx     → single badge, locked/unlocked styles
    AchievementSheet.tsx     → bottom-sheet detail when tapping a badge
  hooks/
    useProgressData.ts       → derives all stats from completions in storage
  lib/
    achievements.ts          → BADGE_CATALOG (mirrors 0005_badges.sql seed) + check logic
```

## Tasks

- [ ] `lib/achievements.ts` — 20 badge definitions (id, name DE+EN, emoji, rarity, xp, condition). Mirrors SQL seed exactly. Export `evaluateBadges(state)` returning newly-unlocked badge ids.
- [ ] `useProgressData()` — returns { currentStreak, longestStreak, completionPctThisWeek, completionPctThisMonth, totalXP, level, weeklyXP[7], dayCompletionMap (date → 0..1) }
- [ ] `StreakCalendar` — current month grid, today highlighted with orange border, colored intensity by completion %
- [ ] Tap day → bottom sheet with that day's habit history
- [ ] `StatCard` — three side-by-side cards above calendar
- [ ] `WeeklyXPChart` — animated bars (Reanimated), tap reveals daily total
- [ ] `AchievementGrid` — earned badges in color, locked in grayscale with `?` overlay
- [ ] Tap badge → `AchievementSheet` shows full description, rarity, condition, progress toward unlock if locked
- [ ] AppDataProvider check-in handler must call `evaluateBadges` and unlock new ones (with celebration overlay)
- [ ] Pull-to-refresh on progress screen (re-derives data; cheap)

## Verification

- After completing all habits today, streak counter increments
- Check-in unlocks `streak_3`/`streak_7` badges at right thresholds
- Weekly chart matches habit-completion log
- `npm run check` passes