feat(badges): update badge logic and badges awarding logic

Overview

This MR updates the volunteer badges system by removing the "Elite Volunteer" badge and renaming the "Century Volunteer" badge to "Active Volunteer". These changes align the badge system with the updated volunteer milestone requirements.

What does this MR do and why?

• Removed "Elite Volunteer" badge: The Elite Volunteer badge has been decommissioned to simplify the reward structure.
• Renamed "Century Volunteer" to "Active Volunteer": The milestone previously known as "Century Volunteer" (achieved after 10 visits) is now called "Active Volunteer" to better reflect the consistent engagement of our volunteers.Updated badge awarding logic to trigger after attendance is recorded instead of after logout, ensuring badges are granted immediately upon visit completion.

These changes were requested to ensure the badge names are more intuitive and represent the actual volunteer contributions accurately.

Changes Made

• Modified src/components/badges/BadgeGrid.tsx:
  • Updated the thresholdOrder array to remove the "Elite Volunteer" entry.
  • Renamed the badge name from "Century Volunteer" to "Active Volunteer" at the 10-visit threshold.
• Modified src/components/badges/BadgeIcon.tsx:
  • Updated the badgeMap to replace the "Century Volunteer" key with "Active Volunteer".
  • Maintained the mapping to badge-5-century-contributor.svg for the newly named "Active Volunteer" badge.

Technical Details

The badges are managed through a configuration-driven approach in the frontend:

• Badge Logic: The thresholdOrder in BadgeGrid.tsx defines the name, threshold, and type (consecutive or total visits) for each badge. The removal of "Elite Volunteer" was done by surgically removing its object from this array.
• Badge Rendering: BadgeIcon.tsx uses a mapping object to link badge names to their corresponding SVG assets. The mapping was updated to point the new "Active Volunteer" name to the existing activeVolunteer (imported from badge-5-century-contributor.svg) asset.
• Updated badge awarding logic to trigger after attendance is recorded instead of after logout, ensuring badges are granted immediately upon visit completion.

Type of Change

• 🐛 Bug fix (non-breaking change that fixes an issue)
• [✨] New feature (non-breaking change that adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to change)
• 📝 Documentation update
• 🎨 UI/UX improvement
• ♻️ Refactor (no functional changes)
• ⚡ Performance improvement
• 🧪 Test update
• 🔧 Configuration change
• 🚨 Security fix

Related Issues / References

• Related to badge system simplification.

Screenshots or Screen Recordings

before

after

How to Set Up and Validate Locally

1. Pull this branch.
2. Run the development server:

   npm run dev

3. Navigate to the Volunteer Profile page.
4. Verify the badges section:
   • Ensure "Elite Volunteer" is no longer visible in the locked or earned sections.
   • Ensure "Active Volunteer" is displayed (with the 10-visit threshold) instead of "Century Volunteer".
   • Confirm the badge icon (Century Contributor SVG) is correctly rendered for "Active Volunteer".

Testing Done

• Manual testing completed: Verified the badge grid display and icon mapping.
• Unit tests added/updated

Test Cases Covered:

Scenario	Expected Result	Status
View Badge Grid	"Elite Volunteer" is missing, "Active Volunteer" is present	✅
Check Badge Threshold	"Active Volunteer" shows 10 visits required	✅
Verify Icon Mapping	"Active Volunteer" uses the correct SVG asset	✅

Code Quality Checklist

Code Standards

• Code follows project conventions (naming, structure, formatting)
• No console.log() or debugger statements left in code
• No unused imports, variables, or functions
• i18n check passed (badge names are currently hardcoded in config as per existing pattern)
• TypeScript types are properly defined
• ESLint and Prettier checks pass

React Best Practices

• Components are properly split and single-responsibility
• Hooks follow rules
• State management is appropriate

Component Patterns

• Tailwind classes follow utility-first approach
• Responsive design considered
• Icons from lucide-react used consistently

Documentation

• README.md updated
• CHANGELOG.md updated

Known Limitations / Technical Debt

• Badge names are currently defined as string literals in the configuration array rather than using i18n keys. This follows the existing project pattern for badges but should be considered for future localization refactoring.

Additional Notes

The asset file badge-5-century-contributor.svg was kept as-is to avoid breaking history, but it is now logically mapped to the "Active Volunteer" badge name.