Skip to content

feat: redesign badge system UI with new assets, progress logic & i18n support

Suma Pullaiahgari requested to merge ehrs-badges-bavitha into develop

feat: update volunteer badges - terminology, SVGs, and progress display

Overview

This MR updates the volunteer badge system with the following changes:

  • Removes "Elite Volunteer" badge and renames "Century" to "Active Volunteer"
  • Replaces 8 old badge SVGs with new redesigned versions
  • Updates progress display from locked-badge average to earned/total percentage (e.g., "0 / 9 Badges Earned, 0% Complete")
  • Adds proper i18n keys for English, Hindi, and Telugu

What does this MR do and why?

  • Terminology Clarity: "Active Volunteer" is more descriptive and encouraging than "Century"
  • Badge Cleanup: Removed "Elite Volunteer" badge as per requirements
  • Visual Update: New badge SVG designs for better visual consistency
  • Progress Display: Changed from locked-badge average to earned/total format for clarity
  • Localization: Full i18n support for badge-related text in all supported languages

Changes Made

Badge Terminology Updates

  • src/components/badges/BadgeIcon.tsx - Changed label from "Century" to "Active Volunteer"
  • Removed "Elite Volunteer" badge from badge display components

Badge SVG Updates

  • src/assets/badges/ - Removed old badge-N-name.svg files, added new redesigned SVGs
  • src/components/badges/BadgeIcon.tsx - Updated imports to new SVG filenames
  • src/components/badges/BadgeGrid.tsx - Updated to use new badge assets

Progress Display Refactor

  • src/components/badges/BadgeGrid.tsx - Updated progress calculation from locked-badge average to earned/total percentage
  • Format: "X / Y Badges Earned, Z% Complete"

Localization Updates

  • src/locales/en/translations.json - Added badge translation keys
  • src/locales/hi/translations.json - Added Hindi badge translations
  • src/locales/te/translations.json - Added Telugu badge translations

Test Updates

  • tests/unit/components/badges/BadgeGrid.test.tsx - Updated test assertions for new progress display text

Technical Details

  • Badge label updated in BadgeIcon.tsx component
  • Uses existing badge icon asset (active.svg)
  • Maintains backward compatibility with badge ID system
  • Progress calculation uses earnedBadges.length and totalBadges with percentage

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: Volunteer badge system update

Screenshots or Screen Recordings

before image after image

How to Set Up and Validate Locally

  1. Pull this branch / checkout MR
  2. Install dependencies: 
    bun install
  3. Run development server: 
    bun dev
  4. Navigate to profile page to verify:
    • Badge display shows "Active Volunteer" instead of "Century"
    • "Elite Volunteer" badge is no longer displayed
    • New badge SVGs are rendering correctly
    • Progress shows "X / Y Badges Earned, Z% Complete" format
  5. Test language switching to verify i18n keys work

Testing Done

  • Manual testing completed

Test Cases Covered:

Scenario Expected Result Status
Badge displays "Active Volunteer" Label shows "Active Volunteer" ✅
"Elite Volunteer" badge removed Badge not visible in UI ✅
New badge SVGs render All 9 new badge images display ✅
Progress display format Shows "X / Y Badges Earned, Z% Complete" ✅
English translations Badge text in English ✅
Hindi translations Badge text in Hindi ✅
Telugu translations Badge text in Telugu ✅
Unit tests pass All badge tests pass ✅

Code Quality Review

Code Readability

  • Code is readable and well-organized
  • Variable and function names are clear and descriptive
  • Components are properly structured and modular
  • No unnecessary comments or dead code
  • Proper indentation and formatting

Code Testability

  • Code is testable and well-tested
  • Unit tests cover the new functionality
  • Tests follow project conventions
  • No test files left broken
  • Run tests with bun test

Project Patterns

  • Follows project patterns and conventions
  • Uses existing shadcn/ui components
  • Follows Tailwind CSS utility-first approach
  • Implements proper TypeScript types
  • Uses i18n for all user-facing strings
  • No console.log() or debugger statements left in code
  • No unused imports, variables, or functions

ESLint & TypeScript

  • ESLint checks pass - bun run lint
  • TypeScript types are properly defined (no any unless justified)

Acceptance Review

Reviewer Role Status Date
Teammate ⬜ Pending
Product Owner ⬜ Pending

Notes:

Documentation

  • README.md updated
  • CHANGELOG.md updated

Known Limitations / Technical Debt

  • None

Additional Notes

  • Change is purely cosmetic (label rename, new SVGs, progress format)
  • No backend changes required
  • Badge icon asset uses active.svg for Active Volunteer
  • All user-facing text is localized via i18n system
Edited by Suma Pullaiahgari

Merge request reports