[FEATURE] Add shareable Achievements card

[Suprita736]

Feature Summary

Add a Share Achievements option to the Achievements component so users can generate and share/download a visual card containing their earned badges.

Problem Statement

The Achievements section displays users' earned badges, but there is currently no way to share or save these accomplishments outside the application.

Dashboard.jsx already provides an established html2canvas-based sharing pattern for generating a visual AQI card. Reusing this approach would provide a consistent and low-risk way to make achievements shareable.

Proposed Solution

Add a Share Achievements button to src/components/Achievements.jsx.

The feature should:

• Generate a visual share card containing the user's earned badges.
• Add a hidden share-card template for rendering the achievement information.
• Use the existing html2canvas dependency and sharing/download pattern from Dashboard.jsx.
• Convert the generated card to an image using html2canvas(...).toBlob().
• Allow users to download the generated image.
• Use the browser Web Share API when available, following the existing Dashboard pattern.
• Keep the existing achievement calculation, badge unlocking, and storage behavior unchanged.
• Provide reasonable behavior when the user has no earned achievements.

Alternatives Considered

• Plain text sharing: Simple, but does not provide a visually appealing representation of the user's achievements.
• PDF export: Useful for documents, but unnecessarily heavy for a social/shareable achievement card.
• Screenshot instructions: Requires manual user action and does not provide a consistent result.

Reusing the existing html2canvas image-generation approach provides the most consistent implementation with minimal additional complexity.

Additional Context

Dashboard.jsx already contains a complete html2canvas-based sharing implementation, including a hidden share-card template and image download/share flow.

Achievements.jsx can follow this established pattern while using the user's earned badges as the card content.

Relevant files:

• src/components/Achievements.jsx — add the share button, hidden card, and sharing logic.
• src/components/Dashboard.jsx — existing html2canvas sharing pattern to follow.
• src/utils/achievementsStore.js — existing achievement/badge data source.

This is a shareability feature only.

No changes should be made to achievement calculation, badge unlocking, persistence, Dashboard behavior, or unrelated functionality.

[Suprita736]

/claim

[github-actions]

👋 Thank you @Suprita736 for opening this issue!

We appreciate you taking the time to report or suggest an improvement for Pollution Control Hub.

Our maintainers will review your issue as soon as possible.

Meanwhile, please ensure:

• 📌 The issue clearly describes the problem or feature request.
• 📝 Steps to reproduce (if it's a bug) are included.
• 📷 Screenshots or logs are attached when applicable.
• 🔍 The issue is not a duplicate of an existing one.

Thank you for contributing to the project! 🚀

[github-actions]

Hi @Suprita736, you have been successfully assigned to this issue! 🎉\n\n⏰ Deadline Notice: Please complete and submit your Pull Request within 34 hours.\n\nHappy coding & thank you for contributing to Pollution Control Hub!

[github-actions]

✅ This issue was resolved by PR #1160.

Thanks for reporting — the fix is now on main.