[Progress Logger] PR 4 — Log Modal with Template-Aware Fields

[Venkat-Kolasani]

✅ No dependencies. Can be started immediately.

---

Parent Issue: #87

Depends On: Can be built in parallel with PR 1, 2, 3

Overview

Build the LogModal.jsx component that opens when a user clicks "Log Today" on a track. The key requirement is that the fields shown change based on the track's template type. A LeetCode log shows different fields than a Dev log. The base fields are always the same — only the extra fields change.

Component Behavior

User clicks "Log Today" on a track
          ↓
Modal opens with track name in header
          ↓
Base fields shown always:
  - Date (pre-filled with today, editable)
  - Did you log today? (toggle — if No, only this field saves)
  - What did you do? (textarea, required if Yes)
  - What did you learn? (textarea, optional)
  - Mood (Easy / Moderate / Hard selector)
          ↓
Template-specific fields shown below base fields:
  - leetcode → Problem name, URL, Platform, Difficulty, Solved independently?, Approach
  - dev → Project name, Tech used, PR/commit link
  - system_design → Topic, Resources used, Key takeaways
  - mock → Platform, Interview type, What went well, Improve on
  - reading → Resource name, Sections covered, Key insights
  - custom → No extra fields
          ↓
On submit → POST /api/progress/logs
  Base fields go in top-level columns
  Template-specific fields go inside metadata: {}

Files to Create

• src/components/progress/LogModal.jsx
• src/components/progress/LogModal.css
• src/utils/progressTemplates.js — export the field config per template type so LogModal stays clean

progressTemplates.js Structure

export const TEMPLATE_FIELDS = {
  leetcode: [
    { key: 'problemName', label: 'Problem Name', type: 'text', required: true },
    { key: 'problemUrl', label: 'Problem URL', type: 'url', required: false },
    { key: 'platform', label: 'Platform', type: 'select', 
      options: ['LeetCode', 'Codeforces', 'HackerRank', 'GeeksForGeeks', 'Other'] },
    { key: 'difficulty', label: 'Difficulty', type: 'select', 
      options: ['Easy', 'Medium', 'Hard'] },
    { key: 'solvedIndependently', label: 'Solved independently?', type: 'select',
      options: ['Yes', 'Partially', 'Needed hints'] },
    { key: 'approach', label: 'Approach used', type: 'textarea', required: false },
  ],
  dev: [
    { key: 'projectName', label: 'Project Name', type: 'text', required: false },
    { key: 'techUsed', label: 'Tech / Tools Used', type: 'text', required: false },
    { key: 'prLink', label: 'PR or Commit Link', type: 'url', required: false },
  ],
  // ... other templates
};

Acceptance Criteria

• Base fields always shown regardless of template type
• Template-specific fields render correctly for all 6 template types
• If "Did you log today?" is No, only that field is submitted — no validation errors on empty detail fields
• Template-specific fields saved inside metadata JSON, not as separate columns
• Modal closes and shows success state after submission
• Works with hardcoded trackId prop for testing without full page integration

[Yuvraj-Sarathe]

Hi @Venkat-Kolasani, I've taken a look at this issue and find it quite interesting. I'd like to volunteer for this task, please consider assigning me to work on it. I'm ready to start contributing.