147 lines
3.3 KiB
Markdown
147 lines
3.3 KiB
Markdown
# 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
|