feat: implement developer activity timeline with filters, custom date...

[HarmiBhikadiya]

Summary

This PR implements the new Developer Activity Timeline feature on the analytics dashboard. It visualizes a user's GitHub activity in reverse chronological order, allowing developers to filter activity categories, select standard or custom date ranges, and toggle between daily, weekly, or monthly grouping views.

Closes #2592

---

Type of Change

• 🐛 Bug fix (non-breaking change that fixes an issue)
• ✨ New feature (non-breaking change that adds functionality)
• 💥 Breaking change (fix or feature that changes existing behavior)
• 📝 Documentation update
• ♻️ Refactor / code cleanup (no functional change)
• ⚡ Performance improvement
• 🔒 Security fix
• 🧪 Tests only

---

What Changed

Timeline Data Processing

• Added timeline activity normalization utilities.

• Implemented conversion of GitHub activity data into a unified timeline format.

• Added filtering support for:

  • Commits
  • Pull Requests
  • Issues
  • Reviews
  • All Activities

• Added grouping logic for Daily, Weekly, and Monthly timeline views.

UI Components

• Created reusable timeline container component.

• Added activity cards displaying:

  • Activity type
  • Repository name
  • Timestamp
  • Activity description
  • Direct GitHub links

• Added category filter controls.

• Added date range selectors (7, 30, 90 days and custom range).

• Added view controls for Daily, Weekly, and Monthly grouping.

• Added loading, empty, and error states.

Navigation & Routing

• Added a dedicated Activity Timeline page within the dashboard.
• Added navigation entry for quick access from the dashboard.
• Integrated timeline navigation into the application navbar.

Internationalization

• Added translation keys for timeline-related labels and controls.
• Updated localization files where required.

Testing

• Added unit tests covering:

  • Data normalization
  • Activity filtering
  • Date range handling
  • Timeline grouping logic
  • Component rendering behavior

---

How to Test

1. Install dependencies and start the development server:

npm install
npm run dev

2. Open the dashboard and navigate to Activity Timeline.

3. Verify:

   • Timeline activities appear in reverse chronological order.
   • Activity filters work correctly.
   • Daily, Weekly, and Monthly grouping views update properly.
   • Date range filters update displayed activities.
   • Loading, empty, and error states display correctly.
   • Timeline links redirect to the correct GitHub resources.

4. Run tests:

npm run test

Expected Result:

• Timeline renders correctly.
• Filtering and grouping behave as expected.
• All tests pass successfully.

---

Checklist

• Linked the related issue above
• Self-reviewed my own diff
• No unnecessary console logs or debug code
• Lint checks pass locally
• No TypeScript errors
• Added/updated tests where applicable
• Updated documentation where necessary

---

Accessibility

• Keyboard navigation supported
• Accessible interactive controls
• Proper ARIA labels added where required
• Responsive across desktop, tablet, and mobile devices
• Color contrast follows accessibility guidelines

---

Additional Context

This feature provides developers with a centralized chronological view of their GitHub contributions, making it easier to analyze activity patterns, track productivity, and review contribution history across repositories. The implementation is designed to be scalable, reusable, and consistent with the existing DevTrack dashboard architecture.

[HarmiBhikadiya]

Hello @maintainers,

I have implemented the Developer Activity Timeline feature as discussed in the issue. The implementation includes activity filtering, date-range selection, timeline grouping views, responsive UI components, localization support, and unit tests.

Kindly review the PR and consider adding the appropriate GSSoC'26 labels (level and points) if it meets the project requirements.

Thank you!

[github-actions]

GSSoC Label Checklist 🏷️

@Umbrella-io — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

[HarmiBhikadiya]

Hi maintainers,

I investigated the CI results and all build, lint, and type-check validations are passing successfully. The only failing checks are two Playwright E2E tests related to dashboard console errors and notification drawer behavior.

As these appear unrelated to the Developer Activity Timeline implementation, could you please advise whether these are existing/flaky test failures or if any additional changes are required from my side?

Thank you.