fix: improve QR code check-in with manual fallback and better error handling

- Add manual check-in buttons for each attendee in the list
- Add manual QR code data input as fallback for camera issues
- Include clerkId in EventAttendee user object for proper check-in
- Improve camera error messages with helpful tips
- Fix TypeScript warnings
- Better UX for organizers with multiple check-in options

src/components/event/QRCodeScanner.tsx

@@ -9,6 +9,8 @@ interface QRCodeScannerProps {
 export function QRCodeScanner({ onScan, onError }: QRCodeScannerProps) {
   const [isScanning, setIsScanning] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [showManualInput, setShowManualInput] = useState(false);
+  const [manualInput, setManualInput] = useState('');
   const scannerRef = useRef<Html5Qrcode | null>(null);
   const scannerIdRef = useRef('qr-reader');
 
@@ -49,17 +51,31 @@ export function QRCodeScanner({ onScan, onError }: QRCodeScannerProps) {
             onError?.(errorMsg);
           }
         },
-        (errorMessage) => {
+        () => {
           // Ignore scanning errors (happens continuously while scanning)
         }
       );
 
       setIsScanning(true);
     } catch (err: any) {
-      const errorMsg = err.message || 'Failed to start camera';
+      let errorMsg = 'Failed to start camera';
+      
+      if (err.message?.includes('Permission')) {
+        errorMsg = 'Camera permission denied. Please allow camera access in your browser settings.';
+      } else if (err.message?.includes('NotFoundError')) {
+        errorMsg = 'No camera found on this device.';
+      } else if (err.message?.includes('NotAllowedError')) {
+        errorMsg = 'Camera access was denied. Please grant permission and try again.';
+      } else if (err.message?.includes('NotReadableError')) {
+        errorMsg = 'Camera is already in use by another application.';
+      } else if (err.message?.includes('secure')) {
+        errorMsg = 'Camera access requires HTTPS. Use manual input instead.';
+      }
+      
       setError(errorMsg);
       onError?.(errorMsg);
       setIsScanning(false);
+      setShowManualInput(true); // Show manual input as fallback
     }
   };
 
@@ -75,6 +91,24 @@ export function QRCodeScanner({ onScan, onError }: QRCodeScannerProps) {
     }
   };
 
+  const handleManualSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!manualInput.trim()) return;
+
+    try {
+      const data = JSON.parse(manualInput);
+      if (data.type === 'attendee-checkin' && data.userId) {
+        onScan(data.userId);
+        setManualInput('');
+        setShowManualInput(false);
+      } else {
+        setError('Invalid QR code data format');
+      }
+    } catch (err) {
+      setError('Invalid JSON format. Please scan the QR code or paste valid data.');
+    }
+  };
+
   return (
     <div className="space-y-4">
       <div
@@ -85,18 +119,36 @@ export function QRCodeScanner({ onScan, onError }: QRCodeScannerProps) {
 
       {error && (
         <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
-          {error}
+          <p className="font-medium">{error}</p>
+          {error.includes('HTTPS') && (
+            <p className="text-sm mt-2">
+              💡 Tip: Camera access requires a secure connection (HTTPS) in most browsers. Use manual input below as an alternative.
+            </p>
+          )}
+          {error.includes('permission') && (
+            <p className="text-sm mt-2">
+              💡 Tip: Check your browser's address bar for camera permission settings, or use manual input below.
+            </p>
+          )}
         </div>
       )}
 
       <div className="flex gap-3">
         {!isScanning ? (
-          <button
-            onClick={startScanning}
-            className="flex-1 bg-blue-600 text-white px-4 py-3 rounded-lg hover:bg-blue-700 transition-colors font-medium"
-          >
-            Start Scanning
-          </button>
+          <>
+            <button
+              onClick={startScanning}
+              className="flex-1 bg-blue-600 text-white px-4 py-3 rounded-lg hover:bg-blue-700 transition-colors font-medium"
+            >
+              Start Camera Scan
+            </button>
+            <button
+              onClick={() => setShowManualInput(!showManualInput)}
+              className="flex-1 bg-gray-600 text-white px-4 py-3 rounded-lg hover:bg-gray-700 transition-colors font-medium"
+            >
+              {showManualInput ? 'Hide' : 'Manual Input'}
+            </button>
+          </>
         ) : (
           <button
             onClick={stopScanning}
@@ -112,6 +164,33 @@ export function QRCodeScanner({ onScan, onError }: QRCodeScannerProps) {
           Position the QR code within the frame to scan
         </p>
       )}
+
+      {/* Manual Input Form */}
+      {showManualInput && !isScanning && (
+        <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
+          <h3 className="text-sm font-semibold text-gray-900 mb-2">
+            Manual Check-In
+          </h3>
+          <p className="text-xs text-gray-600 mb-3">
+            Paste the QR code data or enter the user's Clerk ID directly
+          </p>
+          <form onSubmit={handleManualSubmit} className="space-y-3">
+            <textarea
+              value={manualInput}
+              onChange={(e) => setManualInput(e.target.value)}
+              placeholder='{"userId":"user_xxx","type":"attendee-checkin"}'
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono"
+              rows={3}
+            />
+            <button
+              type="submit"
+              className="w-full bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors font-medium"
+            >
+              Check In User
+            </button>
+          </form>
+        </div>
+      )}
     </div>
   );
 }

src/pages/EventCheckInPage.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { useParams, useNavigate, Link } from 'react-router-dom';
+import { useParams, Link } from 'react-router-dom';
 import { useUser } from '@clerk/clerk-react';
 import { QRCodeScanner } from '@/components/event/QRCodeScanner';
 import { apiClient } from '@/services/api';
@@ -8,13 +8,11 @@ import { CleanupEvent, EventAttendee } from '@/types';
 export function EventCheckInPage() {
   const { eventId } = useParams<{ eventId: string }>();
   const { user } = useUser();
-  const navigate = useNavigate();
   const [event, setEvent] = useState<CleanupEvent | null>(null);
   const [attendees, setAttendees] = useState<EventAttendee[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
-  const [checkedInUsers, setCheckedInUsers] = useState<Set<string>>(new Set());
 
   useEffect(() => {
     loadEventData();
@@ -43,11 +41,7 @@ export function EventCheckInPage() {
       );
       setAttendees(attendeesResponse);
 
-      // Track already checked-in users
-      const checkedIn = new Set(
-        attendeesResponse.filter((a) => a.attended).map((a) => a.userId)
-      );
-      setCheckedInUsers(checkedIn);
+
     } catch (err: any) {
       console.error('Error loading event data:', err);
       setError(err.message || 'Failed to load event data');
@@ -60,22 +54,17 @@ export function EventCheckInPage() {
     if (!eventId) return;
 
     try {
-      // Find the attendee by Clerk ID
-      const attendee = attendees.find((a) => {
-        // We need to match by Clerk ID, but we have user.id (database ID)
-        // We'll need to check the user object
-        return false; // This needs backend support
-      });
-
-      // For now, we'll use a different approach - send the Clerk ID to backend
-      // and let it handle the lookup
-      const response = await apiClient.post(
+      // Send the Clerk ID to backend and let it handle the lookup
+      const response = await apiClient.post<{ success: boolean; username?: string; firstName?: string; lastName?: string }>(
         `/events/${eventId}/checkin`,
         { clerkUserId }
       );
 
-      setSuccessMessage(`Successfully checked in ${response.username || 'user'}`);
-      setCheckedInUsers((prev) => new Set([...prev, clerkUserId]));
+      const displayName = response.firstName && response.lastName 
+        ? `${response.firstName} ${response.lastName}`
+        : response.username || 'user';
+      
+      setSuccessMessage(`Successfully checked in ${displayName}`);
 
       // Reload attendees to get updated status
       setTimeout(() => {
@@ -247,7 +236,7 @@ export function EventCheckInPage() {
                       </p>
                     </div>
                   </div>
-                  {attendee.attended && (
+                  {attendee.attended ? (
                     <div className="flex items-center text-green-600">
                       <svg
                         className="w-6 h-6"
@@ -262,6 +251,36 @@ export function EventCheckInPage() {
                       </svg>
                       <span className="ml-1 text-sm font-medium">Checked In</span>
                     </div>
+                  ) : (
+                    <button
+                      onClick={async () => {
+                        try {
+                          const response = await apiClient.post<{ success: boolean; username?: string; firstName?: string; lastName?: string }>(
+                            `/events/${eventId}/checkin`,
+                            { clerkUserId: attendee.user.clerkId }
+                          );
+
+                          const displayName = response.firstName && response.lastName 
+                            ? `${response.firstName} ${response.lastName}`
+                            : response.username || attendee.user.username;
+                          
+                          setSuccessMessage(`Successfully checked in ${displayName}`);
+                          
+                          // Reload attendees to get updated status
+                          setTimeout(() => {
+                            loadEventData();
+                            setSuccessMessage(null);
+                          }, 2000);
+                        } catch (err: any) {
+                          console.error('Error checking in user:', err);
+                          setError(err.message || 'Failed to check in user');
+                          setTimeout(() => setError(null), 3000);
+                        }
+                      }}
+                      className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium"
+                    >
+                      Check In
+                    </button>
                   )}
                 </div>
               ))}
@@ -272,3 +291,5 @@ export function EventCheckInPage() {
     </div>
   );
 }
+
+export default EventCheckInPage;

src/types/index.ts

@@ -78,6 +78,7 @@ export interface EventAttendee {
   contributionNote?: string;
   user: {
     id: string;
+    clerkId: string;
     username: string;
     firstName?: string;
     lastName?: string;