# Printable QR Code Feature

## Overview

Users can now print their personal check-in QR code for easy access at cleanup events. This feature provides a dedicated printable page with a larger QR code and clear instructions.

## Implementation

### New Page

**`src/pages/PrintableQRCodePage.tsx`**
- Dedicated page for printing QR codes
- Larger QR code (300x300px) for better scanning
- Print-optimized layout with CSS media queries
- User information and instructions included
- Print button triggers browser print dialog
- Back button for easy navigation

### Modified Files

**`src/components/user/UserQRCode.tsx`**
- Added "Print QR Code" button
- Button navigates to the printable page
- Maintains existing QR code display functionality

**`src/App.tsx`**
- Added route: `/qr-code/print`
- Protected route (requires authentication)
- Lazy loaded for performance

**`src/pages/index.ts`**
- Added export for `PrintableQRCodePage`

## Features

### Printable Page Layout

1. **Header Section**
   - Event check-in title
   - Litter Scouts branding

2. **QR Code Display**
   - Large 300x300px QR code
   - High error correction level (H)
   - Border for visual separation

3. **User Information**
   - User avatar (if available)
   - Full name or username
   - Username handle

4. **Instructions**
   - Step-by-step guide on how to use the QR code
   - Numbered list for clarity

5. **Footer**
   - Security reminder
   - Unique code notice

### Print Optimization

- CSS media queries hide navigation elements when printing
- Only the QR code content is visible in print
- Optimized layout for standard paper sizes
- Clean, professional appearance

### User Experience

1. User views their QR code on profile page
2. Clicks "Print QR Code" button
3. Navigates to printable page
4. Reviews QR code and information
5. Clicks "Print QR Code" button or uses browser print (Cmd/Ctrl+P)
6. Prints or saves as PDF
7. Can navigate back using "Back" button

## Benefits

- **Convenience**: Users can print QR codes in advance
- **Reliability**: No need for phone battery or internet at events
- **Accessibility**: Physical QR codes work for all users
- **Professional**: Clean, branded printout
- **Flexible**: Can save as PDF or print on paper

## Technical Details

### QR Code Data Format

```json
{
  "userId": "user_clerk_id",
  "type": "attendee-checkin",
  "timestamp": 1234567890
}
```

### Print Styles

```css
@media print {
  /* Hide everything except printable content */
  body * {
    visibility: hidden;
  }
  #printable-qr-code, #printable-qr-code * {
    visibility: visible;
  }
  /* Position printable content at top */
  #printable-qr-code {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  /* Hide action buttons */
  .no-print {
    display: none !important;
  }
}
```

## Usage

### For Users

1. Navigate to your profile page
2. Scroll to "Your Check-in QR Code" section
3. Click "Print QR Code" button
4. Review the printable page
5. Click "Print QR Code" or use Cmd/Ctrl+P
6. Print or save as PDF

### For Event Organizers

- Attendees can show printed QR codes
- Scan works the same as digital QR codes
- No special handling required
- Reduces check-in time at events

## Future Enhancements

- Add event-specific QR codes
- Include event details on printout
- Support for multiple QR codes per page
- Customizable branding options
- QR code expiration dates