Add reusable Contribution Heatmap to member page for design consistency

[mrkeshav-05]

Feature Request: Make the Contribution Heatmap Component Reusable Across the Platform

Is your feature request related to a problem?
On the /board/2025/candidates page, the ContributionHeatmap component is used to display GitHub contributions and community engagement.
However, on nest.owasp.org/members/[memberId], a different component (<Heatmap />, defined inline in the file) is used instead.

This results in visual inconsistency across the website, as both components are showing similar data but with different UI and UX, breaking the overall design language.

---

Describe the solution you'd like
Refactor the code so that the ContributionHeatmap component used on /board/2025/candidates becomes reusable and is used on /members/[memberId] as well.

• Replace the inline <Heatmap /> component in the members page with the shared ContributionHeatmap component.
• Ensure the API/data props and UI states align correctly for both pages.
• Maintain design consistency across the platform.

---

Describe alternatives you've considered

• Keeping both components separate — rejected because it leads to duplicated logic and inconsistent UI.
• Updating the existing <Heatmap /> on the members page to match the Candidate heatmap design — less optimal because the ContributionHeatmap is already well-structured and reusable.

---

Screenshots / Comparisons
ContributionHeatmap component

Inline <Heatmap /> component

---

Are you going to work on implementing this?

• Yes
• No

[mrkeshav-05]

Hi @arkid15r , is this relevant issue?
Can you assign this.

[kasya]

I thought we already have an issue for this, but I can not find it. 🤷🏻‍♀️

@mrkeshav-05 Yes, since we introduced this new component last month or so - we do want to migrate to it instead of using current Heat map on members page.
But since you are already working on another issue - let's first finish that one.