Add badge system based on user impact scores

- Created badge utility with 5 levels (Beginner, Intermediate, Advanced, Expert, Master)
- Badge thresholds: 0, 50, 100, 150, 200 points
- Implemented BadgeDisplay component with progress tracking
- Enhanced user profile statistics boxes with centered layout, gradients, and icons
- Added badge progress section showing advancement to next level
- Badge images reference existing assets in /public folder

BADGE_SYSTEM_IMPLEMENTATION.md

@@ -0,0 +1,119 @@
+# 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