[Progress Logger] PR 5 — Full Page Integration (ProgressPage, TrackCard, LogHistory, CreateTrackModal)

[Venkat-Kolasani]

⚠️ Requires PRs 1, 2, 3, and 4 to all be merged before starting. Do not open a PR for this until all four are in main.

---

Parent Issue: #87

Depends On: PRs 1, 2, 3, and 4 must all be merged before starting this

Overview

Wire everything together into the complete Progress Logger page. This is the final integration PR — it connects the API, the heatmap, the log modal, and the track management UI into a single cohesive page. Do not start this until all previous PRs are merged into main.

Page Layout

ProgressPage
├── Header ("Progress Logger" + "Add Track" button)
├── HeatmapGrid (full width, fetches from /api/progress/heatmap)
├── Stats Row (total logs, current streak, longest streak)
└── Track Grid
    ├── TrackCard (one per active track)
    │   ├── Track name + template type badge
    │   ├── Last logged date
    │   ├── Current streak (consecutive days logged)
    │   └── "Log Today" button → opens LogModal
    └── "Add Track" card (always last in grid)

Components to Build

ProgressPage.jsx — top-level page, fetches tracks and heatmap data, manages modal open/close state

TrackCard.jsx — displays one track's summary, receives track object as prop, no direct API calls

LogHistory.jsx — appears when user clicks on a TrackCard (not "Log Today"), shows all past logs for that track in reverse chronological order, reads like a journal not a table

CreateTrackModal.jsx — lets user choose from template list or enter custom name, calls POST /api/progress/tracks

Streak Calculation Logic

Calculate streak in a utility function src/utils/progressHelpers.js:

export const calculateStreak = (logs) => {
  // logs is array of { log_date, did_log }
  // sorted by date DESC
  // streak = consecutive days from today backwards where did_log = true
  // if today not logged yet, streak starts from yesterday
};

Add Route to App

Add /progress route to your React Router config and add a "Progress" link to the sidebar navigation.

Acceptance Criteria

• ProgressPage loads and shows all active tracks
• HeatmapGrid on the page fetches real data from /api/progress/heatmap
• "Log Today" opens LogModal with correct track context
• After logging, TrackCard updates streak and last logged date without full page reload
• CreateTrackModal lets user pick template type and saves successfully
• LogHistory shows past entries in readable journal format
• Clicking a heatmap cell shows that day's logs in a side panel or modal
• /progress route accessible from sidebar navigation
• Page does not crash if user has zero tracks (show empty state with "Create your first track" CTA)

[Yuvraj-Sarathe]

@Venkat-Kolasani, I was drawn to this issue and have read the description in full. I believe I can contribute to the project and would be honored to be assigned to work on this feature.