Add printable QR code feature for event check-in

2025-11-20 19:30:59 +00:00
parent 4baa2892b9
commit 2dcd1ce78d
5 changed files with 379 additions and 0 deletions
--- a/PRINTABLE_QR_CODE_FEATURE.md
+++ b/PRINTABLE_QR_CODE_FEATURE.md
@@ -0,0 +1,146 @@
+# 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