[UI/UX] Implement Savings Group "Progress Ring" Animation for Dashboard

[Queenode]

🟡 Priority: High
Difficulty: Medium
Estimated Effort: 2-3 days
Relevant Files: src/components/dashboard/ProgressRing.tsx
Labels: enhancement, priority:high, ui, animations

Requirements

1. SVG Circle Progress

   • Based on standard FinTech Figma designs, implement an interactive SVG progress ring that fills up based on the user's total savings vs. target savings.
   • The ring must use stroke-dasharray and stroke-dashoffset for smooth CSS transitions.
   • Use the brand's Emerald Green (#10B981) for the filled portion and a muted gray/transparent for the track.

2. Responsive Scaling

   • Ensure the SVG scales perfectly within its container without losing stroke width proportions.

---