redo of entire app

app/(main)/scan/page.js

@@ -0,0 +1,33 @@
+'use client'; // Mark as a Client Component
+import { useState } from 'react';
+import QRScanner from '../../../components/QRScanner';
+import { useSession } from 'next-auth/react';
+
+export default function Scan() {
+    const { data: session } = useSession();
+    const [message, setMessage] = useState('');
+
+    const handleScan = async (clueId) => {
+        const response = await fetch('/api/mark-clue', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ clueId, teamId: session.user.teamId }),
+        });
+
+        if (response.ok) {
+            setMessage('Clue marked as found!');
+        } else {
+            setMessage('Error marking clue.');
+        }
+    };
+
+    return (
+        <div>
+            <h1>Scan QR Code</h1>
+            <QRScanner onScan={handleScan} />
+            {message && <p>{message}</p>}
+        </div>
+    );
+}