# Badge System Implementation

## Overview
Implemented a badge achievement system that rewards users based on their impact score. Users earn badges as they contribute to the platform through reports and event participation.

## Badge Levels

| Badge | Min Score | Max Score | Image | Description |
|-------|-----------|-----------|-------|-------------|
| Beginner | 0 | 49 | `/Beginner.png` | Starting your environmental journey |
| Intermediate | 50 | 99 | `/Intermediate.png` | Making a real difference |
| Advanced | 100 | 149 | `/Advanced.png` | Dedicated environmental champion |
| Expert | 150 | 199 | `/Expert.png` | Leading the cleanup movement |
| Master | 200+ | ∞ | `/Master.png` | Elite environmental guardian |

## Impact Score Calculation

The impact score is calculated based on user activities:
- **Reports submitted**: 10 points each
- **Events attended**: 20 points each
- **Events organized (completed)**: 50 points each

Formula: `(reports × 10) + (events attended × 20) + (events organized × 50)`

## Implementation Details

### Files Created

1. **`src/utils/badges.ts`**
   - Badge type definitions and constants
   - `getBadgeForScore()` - Returns badge for a given score
   - `getNextBadgeProgress()` - Calculates progress to next badge level

2. **`src/components/auth/BadgeDisplay.tsx`**
   - Reusable badge display component
   - Shows current badge with image and description
   - Optional progress bar to next badge level
   - Three size variants: small, medium, large

### Files Modified

1. **`src/pages/UserProfilePage.tsx`**
   - Added badge display in statistics section (small size)
   - Added dedicated badge progress section (large size with progress bar)
   - Shows current badge, description, and progress to next level

2. **`src/components/auth/index.ts`**
   - Exported `BadgeDisplay` component

## Features

### Badge Display Component
```typescript
<BadgeDisplay 
  impactScore={score} 
  showProgress={true} 
  size="large" 
/>
```

**Props:**
- `impactScore` (number, required) - User's current impact score
- `showProgress` (boolean, optional) - Show progress bar to next badge
- `size` ('small' | 'medium' | 'large', optional) - Badge image size

### Progress Tracking
- Visual progress bar showing advancement to next badge
- Points remaining to next level
- Congratulatory message for Master level achievers

### Visual Design
- Color-coded badges with gradient backgrounds
- Responsive layout that works on all screen sizes
- Smooth animations for progress bars
- Badge images from `/public` folder

## User Profile Integration

The badge system is integrated into the user profile page in two locations:

1. **Statistics Grid** - Small badge display alongside key metrics
2. **Achievement Section** - Large badge with full progress details

## Badge Images

Badge images are stored in the `/public` folder:
- `Beginner.png`
- `Intermediate.png`
- `Advanced.png`
- `Expert.png`
- `Master.png`

These images are already present in the project and are referenced by the badge system.

## Future Enhancements

Potential improvements for the badge system:
- Badge unlock notifications
- Badge showcase on user profile
- Special badges for milestones (e.g., "First Report", "Event Organizer")
- Leaderboard showing top badge holders
- Social sharing of badge achievements
- Badge history timeline

## Testing

To test the badge system:
1. Navigate to user profile page
2. View current badge based on impact score
3. Check progress bar showing advancement to next level
4. Verify badge images load correctly
5. Test responsive design on different screen sizes

## Notes

- Badge levels are automatically calculated based on impact score
- Progress is shown as a percentage and points remaining
- Master badge holders see a special "Maximum Level Achieved" message
- The system is fully type-safe with TypeScript