Feat: replace horizontal language breakdown bar with Recharts donut chart

[diksha78dev]

Summary

Replaces the legacy horizontal LanguageBreakdown widget with a new client-side LanguagesCard widget rendering a Recharts-based donut chart on the dashboard.

Closes #938

---

Type of Change

• Bug fix
• New feature
• Documentation update
• Refactor / code cleanup

---

Changes Made

• Created LanguagesCard.tsx implementing a Recharts PieChart donut layout with custom tooltips (formatting byte size into KB/MB and percentages) and exact GitHub programming language color mappings.
• Replaced the horizontal LanguageBreakdown with the new donut chart on the dashboard page.
• Removed the retired LanguageBreakdown.tsx component.
• Updated mocked /api/metrics/languages data payloads in e2e/dashboard-widgets.spec.js to prevent visual test discrepancies.
• Documented LanguagesCard.tsx inside DEVELOPMENT.md.

---

How to Test

Steps for the reviewer to verify this works:

1. Launch local development server using npm run dev.
2. Visit http://localhost:3000/dashboard and log in.
3. Verify that the Languages widget renders as a donut chart with live data, a center tag showing the top language, and correct language color legends.
4. Run E2E testing using npx playwright test and TypeScript check using npm run type-check to confirm all validation checks pass.

---

Screenshots (if UI change)

---

Checklist

• Linked issue in summary
• npm run lint passes locally
• No TypeScript errors (npm run type-check)
• Self-reviewed the diff
• Added/updated tests if applicable

---

Accessibility Checklist

• Proper keyboard navigation tested
• Responsive UI verified
• Accessibility labels added where needed

---

Additional Notes

The widget degrades gracefully to a fallback text display if no repository data is returned from the GitHub API.

[vercel]

@diksha78dev is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — 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

[Priyanshu-byte-coder]

PR modifies src/app/dashboard/page.tsx which conflicts with recent main changes (3 merge conflicts). Please rebase on main — the dashboard page was restructured in a recent commit. The LanguageBreakdown.tsx recharts refactor itself looks good; only the dashboard/page.tsx conflict needs resolving.

[diksha78dev]

@Priyanshu-byte-coder I have updated the PR Kindly review and let me know anything changes required....I'd be happy to resolve them.
Thanks.