feat: add interactive Quick Analytics Overview widget under Friend Comparison

[ukiyosanvi]

📝 Description

🚀 Overview

This PR resolves a structural layout gap on the main dashboard by introducing a brand-new Quick Analytics Overview widget. The component features three clean, highly readable donut charts that visualize core development metrics at a glance, placed directly underneath the Friend Comparison panel and right above PR Analytics.

✨ Key Features & Enhancements

• Optimal Layout Integration: Dynamically populates the empty structural space on the left column to create a more balanced, cohesive grid layout across different monitor sizes.
• Interactive Hover/Click States: Built with responsive Recharts wrappers that smoothly scale and transition. Hovering over or clicking any segment dynamically shifts the center text to display the exact percentage criteria (e.g., separating Features from Fixes inside the Commit Types chart).
• Fit-for-Purpose Typography: Labels and data parameters have been optimized and shortened (e.g., using Fixes and Forks) to guarantee that zero text clipping or text overflow occurs within the inner circles on compact views.
• Consistent Design System: Tailored with Tailwind CSS using the project's native CSS design variables for seamless dark mode and theme matching.

---

📸 Visual Proof (Previews)

Default State View	Interactive State View (Hover/Click Percentage Criteria)
*[

]* | [

] |
| Shows the perfect alignment and crisp grid layout underneath Friend Comparison. | Demonstrates the center text transforming to reveal specific sub-category percentages on interaction. |

---

⚡ Note on Merge Conflicts

⚠️ Note to Reviewers: Due to my fork originating a few commits behind the upstream main branch, GitHub flags automated line overlaps. The changes in this branch are completely localized to adding the standalone src/components/QuickMetricsCharts.tsx file and updating the structural column array inside src/app/dashboard/page.tsx. It can be safely approved and combined cleanly!

---

📝 Contribution Summary

This enhancement introduces an isolated, client-side interactive widget that seamlessly fits into the current dashboard ecosystem. All native production route guards and NextAuth session security profiles have been left entirely untouched and secure. The UI is fully responsive, optimized against layout shifts, and introduces zero text-wrapping issues on smaller viewports.

---

💬 Request to Maintainers

Please review the code and let me know if any adjustments are needed. I would love to continue contributing to DevTrack—please assign me more tasks or suggest what features/improvements I can work on next to make the dashboard even better!
#GSSOC'26

[vercel]

Someone 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

[github-actions]

Thanks for your first PR on DevTrack! 🎉

A maintainer will review it within 48 hours. While you wait:

• Make sure CI is passing (type-check + lint)
• Double-check the PR description is filled out and the issue is linked
• Feel free to ask questions in Discussions if you need help

If you find DevTrack useful, a ⭐ star on the repo is always appreciated — it helps the project grow and attract more contributors!