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>
   );
 }