peworkshop/app/(main)/progress/page.js

import { query } from '../../../lib/db';
import { useSession } from 'next-auth/react';

export default async function Progress() {
    const { data: session } = useSession();

    // Fetch progress from the database
    const progress = await query(
        'SELECT COUNT(*) as found FROM clues WHERE found = TRUE AND team_id = ?',
        [session.user.teamId]
    );
    const remaining = 20 - progress.found;

    return (
        <div>
            <h1>Progress</h1>
            <p>Clues Found: {progress.found}</p>
            <p>Clues Remaining: {remaining}</p>
        </div>
    );
}