fixed a bit

app/(main)/team-selection/page.js

@@ -2,6 +2,7 @@
 import { useState, useEffect } from 'react';
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 import { joinTeam } from '../../actions/auth';
 
 export default function TeamSelection() {
@@ -56,6 +57,12 @@ export default function TeamSelection() {
 
     return (
         <div className="team-selection-container">
+            <div className="page-header">
+                <div className="back-button">←</div>
+                <div className="page-title">Team Selection</div>
+                <div className="placeholder"></div>
+            </div>
+
             <div className="team-selection-card">
                 <h1>Team Selection</h1>
                 <form onSubmit={handleJoinTeam}>
@@ -79,7 +86,22 @@ export default function TeamSelection() {
                 </form>
                 {error && <p className="error">{error}</p>}
                 <div className="team-options">
-                    <a href="/create-team" className="create-team-link">Create a new team</a>
+                    <Link href="/create-team" className="create-team-link">Create a new team</Link>
+                </div>
+            </div>
+
+            <div className="nav-bar">
+                <div className="nav-item">
+                    <div className="nav-icon">🏠</div>
+                </div>
+                <div className="nav-item">
+                    <div className="nav-icon">📊</div>
+                </div>
+                <div className="nav-item">
+                    <div className="nav-icon">🏆</div>
+                </div>
+                <div className="nav-item">
+                    <div className="nav-icon">👤</div>
                 </div>
             </div>
         </div>

app/(main)/team/[teamId]/page.js

@@ -0,0 +1,122 @@
+'use client'; // Mark as a Client Component
+import { useState, useEffect } from 'react';
+import { useSession } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+
+export default function TeamPage({ params }) {
+    const { data: session, status } = useSession();
+    const [team, setTeam] = useState(null);
+    const [teamMembers, setTeamMembers] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+    const router = useRouter();
+    const { teamId } = params;
+
+    // Fetch team data
+    useEffect(() => {
+        async function fetchTeamData() {
+            try {
+                // Fetch team details
+                const teamResponse = await fetch(`/api/teams/${teamId}`);
+                if (!teamResponse.ok) {
+                    throw new Error('Failed to fetch team data');
+                }
+                const teamData = await teamResponse.json();
+                setTeam(teamData);
+
+                // Fetch team members
+                const membersResponse = await fetch(`/api/teams/${teamId}/members`);
+                if (!membersResponse.ok) {
+                    throw new Error('Failed to fetch team members');
+                }
+                const membersData = await membersResponse.json();
+                setTeamMembers(membersData);
+            } catch (err) {
+                console.error(err);
+                setError(err.message);
+            } finally {
+                setLoading(false);
+            }
+        }
+
+        if (status === 'authenticated') {
+            fetchTeamData();
+        }
+    }, [teamId, status]);
+
+    // Handle authentication
+    useEffect(() => {
+        if (status === 'unauthenticated') {
+            router.push('/login');
+        }
+    }, [status, router]);
+
+    if (status === 'loading' || loading) {
+        return <div className="loading">Loading...</div>;
+    }
+
+    if (error) {
+        return <div className="error">Error: {error}</div>;
+    }
+
+    if (!team) {
+        return <div className="error">Team not found</div>;
+    }
+
+    return (
+        <div className="team-page-container">
+            <div className="page-header">
+                <Link href="/team-selection" className="back-button">←</Link>
+                <div className="page-title">Team Details</div>
+                <div className="placeholder"></div>
+            </div>
+
+            <div className="team-details-card">
+                <h1>{team.name}</h1>
+
+                <div className="team-code-container">
+                    <h2>Team Code</h2>
+                    <div className="team-code">{team.code}</div>
+                    <p>Share this code with others to join your team</p>
+                </div>
+
+                <div className="team-members-container">
+                    <h2>Team Members</h2>
+                    {teamMembers.length === 0 ? (
+                        <p>No members have joined yet</p>
+                    ) : (
+                        <ul className="team-members-list">
+                            {teamMembers.map(member => (
+                                <li key={member.id} className="team-member">
+                                    {member.username}
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </div>
+
+                <div className="team-actions">
+                    <Link href="/" className="team-button">
+                        Start Hunt
+                    </Link>
+                </div>
+            </div>
+
+            <div className="nav-bar">
+                <div className="nav-item">
+                    <div className="nav-icon">🏠</div>
+                </div>
+                <div className="nav-item">
+                    <div className="nav-icon">📊</div>
+                </div>
+                <div className="nav-item">
+                    <div className="nav-icon">🏆</div>
+                </div>
+                <div className="nav-item">
+                    <div className="nav-icon">👤</div>
+                </div>
+            </div>
+        </div>
+    );
+}

app/actions/auth.js

@@ -73,4 +73,66 @@ export async function validateCredentials(username, password) {
     }
 }
 
-// Other functions remain the same...
+// Join a team
+export async function joinTeam(userId, teamCode) {
+    try {
+        // Find the team with the given code
+        const team = await queryOne(
+            'SELECT * FROM teams WHERE code = ?',
+            [teamCode]
+        );
+
+        if (!team) {
+            return { success: false, error: 'Invalid team code' };
+        }
+
+        // Update the user's team_id
+        await run(
+            'UPDATE users SET team_id = ? WHERE id = ?',
+            [team.id, userId]
+        );
+
+        return {
+            success: true,
+            teamId: team.id
+        };
+    } catch (error) {
+        console.error('Join team error:', error);
+        return {
+            success: false,
+            error: 'Failed to join team: ' + error.message
+        };
+    }
+}
+
+// Start/Stop Hunt Timer
+export async function startHuntTimer(active) {
+    try {
+        // Update the hunt status
+        await run(
+            'UPDATE hunt_settings SET active = ?',
+            [active ? 1 : 0]
+        );
+
+        return { success: true };
+    } catch (error) {
+        console.error('Hunt timer error:', error);
+        return {
+            success: false,
+            error: 'Failed to update hunt timer: ' + error.message
+        };
+    }
+}
+
+// Get Hunt Status
+export async function getHuntStatus() {
+    try {
+        const settings = await queryOne('SELECT active FROM hunt_settings LIMIT 1');
+        return {
+            active: settings ? Boolean(settings.active) : false
+        };
+    } catch (error) {
+        console.error('Get hunt status error:', error);
+        throw error;
+    }
+}

app/api/teams/[teamId]/route.js

@@ -6,7 +6,7 @@ export async function GET(request, { params }) {
     const session = await getServerSession(authOptions);
 
     if (!session) {
-        return Response.json({ error: 'Unauthorized' }, { status: 401 });
+        return Response.json({ error: 'Unauthorised' }, { status: 401 });
     }
 
     try {