redo of entire app

components/QRScanner.js

@@ -0,0 +1,30 @@
+'use client'; // Mark as a Client Component
+import { useState } from 'react';
+import QrReader from 'react-qr-reader';
+
+export default function QRScanner({ onScan }) {
+    const [result, setResult] = useState('');
+
+    const handleScan = (data) => {
+        if (data) {
+            setResult(data);
+            onScan(parseInt(data, 10));
+        }
+    };
+
+    const handleError = (err) => {
+        console.error(err);
+    };
+
+    return (
+        <div>
+            <QrReader
+                delay={300}
+                onError={handleError}
+                onScan={handleScan}
+                style={{ width: '100%' }}
+            />
+            <p>{result}</p>
+        </div>
+    );
+}