fix(i18n): resolve volunteer module translation issues

Overview

This MR fixes localization (i18n) issues in the Volunteer module where UI labels were not properly translated in Telugu and Hindi. It ensures consistent multilingual behavior across the application.

---

What does this MR do and why?

Previously, the Volunteer dashboard had:

• Mixed language UI (English + Telugu/Hindi)
• Missing or empty labels due to incomplete translation keys
• Inconsistent behavior compared to Admin and Coordinator modules
• A runtime crash caused by invalid translation value types (object instead of string)

This change ensures:

• All translation keys are properly defined and mapped
• UI renders consistently across all supported languages
• Application stability by enforcing correct translation value types

---

Changes Made

• Added missing translation keys in te.json and hi.json

• Corrected translation values (ensured all values are strings)

• Standardized key naming across Volunteer module

• Updated test cases affected by UI text changes

• Fixed ESLint warnings:

  • Added missing dependency (isLoading) in useEffect
  • Refactored badge.tsx to move non-component exports to badge.utils.ts

---

Technical Details

• Root Cause:

  • Missing and inconsistent i18n keys
  • Some translation values were objects instead of strings, causing React crash

• Fix:

  • Ensured all translation values are plain strings
  • Added missing keys for Telugu and Hindi
  • Refactored component structure to comply with React Fast Refresh rules

---

Type of Change

• 🐛 Bug fix (non-breaking change that fixes an issue)
• 🎨 UI/UX improvement
• 🧪 Test update
• ♻️ Refactor (no functional changes)

---

Related Issues / References

• Fixes Volunteer module i18n issues (local testing)

---

Screenshots or Screen Recordings

Before	After
Mixed/empty labels in Telugu/Hindi	Fully translated UI
Inconsistent Volunteer UI	Consistent multilingual UI

---

How to Set Up and Validate Locally

1. Checkout this branch:

   git checkout fix/volunteer-i18n-bug

2. Install dependencies:

   bun install

3. Run the app:

   bun dev

4. Navigate to:

   • http://localhost:5173/?role=volunteer

5. Switch languages:

   • English
   • Telugu
   • Hindi

6. Verify:

   • All labels are translated correctly
   • No empty UI elements
   • No console errors

---

Testing Done

• Manual testing completed
• Unit tests updated

Test Cases Covered:

Scenario	Expected Result	Status
Volunteer UI in English	All labels visible	✅
Volunteer UI in Telugu	Fully translated	✅
Volunteer UI in Hindi	Fully translated	✅
Translation value type	No crash	✅
Unit tests	All passing	✅

---

Code Quality Checklist

Code Standards

• Code follows project conventions
• No unused imports or variables
• No duplicate code
• i18n check passed
• TypeScript types properly used
• ESLint and Prettier checks pass

React Best Practices

• Proper hook dependencies
• No unnecessary re-renders
• Clean component structure

Component Patterns

• Separation of UI and logic (badge.tsx / badge.utils.ts)
• Tailwind usage consistent
• Accessibility preserved

---

Documentation

• CHANGELOG.md updated

---

Known Limitations / Technical Debt

• None identified

---

Additional Notes

This fix improves multilingual support and ensures consistency across modules. It also aligns the codebase with ESLint and React Fast Refresh best practices.

---