feat: added piecharts in detailed contributions

What does this MR do and why?

This MR introduces pie chart visualizations in the Detailed Contributions section.

Previously, contribution data was displayed only in textual or tabular format, making it harder to quickly understand distribution. With this change:

• Users can visually interpret contribution proportions
• Improves data readability and user experience
• Helps in quick analysis of contribution categories

---

Screenshots or screen recordings

Before	After
Contributions shown as plain text/table	Contributions displayed with interactive pie charts

---

How to set up and validate locally

1. Pull the latest changes from the branch:

   git checkout <your-branch-name>
   git pull origin <your-branch-name>

2. Install dependencies:

   npm install

3. Run the frontend:

   npm run dev

4. Navigate to the Detailed Contributions page

5. Verify:

   • Pie chart is displayed correctly
   • Data matches backend values
   • Chart updates dynamically based on data
   • UI is responsive across screen sizes

---

MR acceptance checklist

• Feature works as expected
• No breaking changes introduced
• UI is responsive and visually consistent
• Code follows project standards
• Tested locally

---