# User Profile Page Implementation

## Overview

The User Profile Page displays comprehensive user statistics, contributions, and activity history. It provides both public profile viewing and personal profile editing capabilities.

## Features Implemented

### 1. User Statistics Display
- **Reports Submitted**: Total count of litter reports submitted by the user
- **Events Attended**: Total count of cleanup events the user has participated in
- **Impact Score**: Calculated score based on user contributions (reports × 10 + events × 20)

### 2. Profile Information
- User avatar, name, username, and email
- Editable profile fields (first name, last name, username) for own profile
- Edit/Save/Cancel functionality for profile updates

### 3. Personal Contribution Map
- Interactive Leaflet map showing all report locations submitted by the user
- Markers for each report with popup details (litter type, date)
- Automatically centers on user's first report location

### 4. Activity Timeline
- Chronological list of all user activities
- Activity types:
  - Report submissions
  - Event creation
  - Event attendance
  - Event completion
- Each activity shows title, description, location, and timestamp
- Visual icons for different activity types

### 5. Tabbed Interface
Four tabs for organizing profile content:
- **Overview**: Statistics, contribution map, and recent activity
- **Reports**: Grid view of all submitted reports with photos
- **Events**: List of all events (created and attended) with details
- **Activity**: Full activity timeline

## Routes

- `/profile/:userId` - View user profile (protected route)

## Components

### UserProfilePage (`src/pages/UserProfilePage.tsx`)
Main profile page component with:
- Profile header with avatar and statistics
- Tabbed navigation
- Contribution map
- Reports grid
- Events list
- Activity timeline
- Profile editing functionality

### UserProfile (`src/components/auth/UserProfile.tsx`)
Updated header component that now links to the user's profile page when clicked.

## Services

### userService (`src/services/userService.ts`)
API service for user-related operations:
- `getProfile(userId)` - Fetch user profile with statistics
- `updateProfile(userId, data)` - Update user profile information
- `getUserReports(userId)` - Get all reports by user
- `getUserEvents(userId)` - Get all events (created and attended)
- `getUserActivity(userId)` - Get activity timeline

## Types

### UserProfile
```typescript
interface UserProfile extends User {
  reportCount: number;
  eventCount: number;
}
```

### UserActivity
```typescript
interface UserActivity {
  id: string;
  type: 'report' | 'event_created' | 'event_attended' | 'event_completed';
  timestamp: Date;
  title: string;
  description?: string;
  location?: {
    latitude: number;
    longitude: number;
    locationName?: string;
  };
}
```

### UpdateProfileDTO
```typescript
interface UpdateProfileDTO {
  firstName?: string;
  lastName?: string;
  username?: string;
  notificationEmail?: boolean;
  notificationInApp?: boolean;
}
```

## Backend Requirements

The following API endpoints need to be implemented on the backend:

1. `GET /api/users/:id` - Get user profile with statistics
2. `PATCH /api/users/:id` - Update user profile
3. `GET /api/users/:id/reports` - Get user's reports
4. `GET /api/users/:id/events` - Get user's events
5. `GET /api/users/:id/activity` - Get user's activity timeline

## Impact Score Calculation

The impact score is calculated as:
```
Impact Score = (Number of Reports × 10) + (Number of Events × 20)
```

This gives more weight to event participation, encouraging community engagement.

## Permissions

- Any authenticated user can view any profile
- Only the profile owner can edit their own profile
- Edit button only appears when viewing own profile

## Mobile Responsiveness

- Responsive grid layouts for statistics and reports
- Collapsible navigation for mobile devices
- Touch-friendly map controls
- Optimized for screens from 320px to desktop

## Future Enhancements

- Achievement badges based on milestones
- Leaderboard integration
- Social features (follow users, share profiles)
- Export personal data
- Profile privacy settings
- Custom profile themes