feat: admin view as a user

Author: polarhive

.env.example

@@ -2,25 +2,21 @@
 # with real values in your local `.env.local` or CI environment.
 
 # secrets (server-only)
-QR_SECRET=xxxx
+CSV_EXPORT_KEY=xxxx
 GOOGLE_CLIENT_SECRET=xxxx
-TURSO_AUTH_TOKEN=xxxx
 NEXTAUTH_SECRET=xxxx
+QR_SECRET=xxxx
+TURSO_AUTH_TOKEN=xxxx
 
 # deployment
 ADMIN_EMAIL=[email protected]
-TURSO_DATABASE_URL=libsql://<your-db-url>
 GOOGLE_CLIENT_ID=xxxx.apps.googleusercontent.com
 NEXTAUTH_URL=https://your-site.example
-
-# analytics (posthog)
-POSTHOG_UI_HOST=https://eu.posthog.com
-POSTHOG_KEY=phc_xxxx
-
-# CSV export key for unauthenticated CSV downloads via /api/events/[id]/export/key
-CSV_EXPORT_KEY=xxxx
+TURSO_DATABASE_URL=libsql://<your-db-url>
 
 # branding
-NEXT_PUBLIC_SIGNIN_TITLE="Eloop"
-NEXT_PUBLIC_SIGNIN_SUBTITLE="Sign up to your event"
+NEXT_PUBLIC_POSTHOG_KEY=phc_xxxx
+NEXT_PUBLIC_POSTHOG_UI_HOST=https://eu.posthog.com
 NEXT_PUBLIC_SIGNIN_IMAGE="/signin-hero.svg"
+NEXT_PUBLIC_SIGNIN_SUBTITLE="Sign up to your event"
+NEXT_PUBLIC_SIGNIN_TITLE="Eloop"

package-lock.json

@@ -0,0 +1,61 @@
+import { NextResponse } from 'next/server';
+import { auth } from '@/lib/auth';
+import { getUserById } from '@/lib/db/user';
+import { getUserRegistrations } from '@/lib/db/registration';
+import { getEventById } from '@/lib/db/event';
+
+export async function GET(request: Request) {
+  try {
+    const session = await auth();
+    if (!session?.user) {
+      return NextResponse.json({ error: 'Authentication required' }, { status: 401 });
+    }
+
+    if (session.user.role !== 'admin') {
+      return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
+    }
+
+    const url = new URL(request.url);
+    const userId = url.searchParams.get('userId');
+    if (!userId) {
+      return NextResponse.json({ error: 'userId is required' }, { status: 400 });
+    }
+
+    const user = await getUserById(userId);
+    if (!user) {
+      return NextResponse.json({ error: 'User not found' }, { status: 404 });
+    }
+
+    const registrations = await getUserRegistrations(userId);
+    const activeReg = registrations.find(r => r.status === 'approved' || r.status === 'checked-in')
+                      || registrations.find(r => r.status === 'pending');
+
+    if (!activeReg) {
+      return NextResponse.json({ hasRegistration: false, message: 'No active registration found', user });
+    }
+
+    const event = await getEventById(activeReg.eventId);
+
+    return NextResponse.json({
+      hasRegistration: true,
+      registration: {
+        id: activeReg.id,
+        eventId: activeReg.eventId,
+        eventName: event?.name || 'Unknown Event',
+        eventDate: event?.date || new Date(),
+        status: activeReg.status,
+        qrCode: activeReg.qrCode,
+        checkpointCheckIns: activeReg.checkpointCheckIns || [],
+        createdAt: activeReg.createdAt
+      },
+      user: {
+        id: user.id,
+        name: user.name,
+        email: user.email
+      }
+    });
+  } catch (error) {
+    console.error('Error in admin view-as:', error);
+    return NextResponse.json({ error: 'Failed to fetch view-as data' }, { status: 500 });
+  }
+}

src/app/api/admin/view-as/route.ts

@@ -0,0 +1,55 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import { useSession } from 'next-auth/react';
+import UserRegistrationsSection from '@/components/dashboard/UserRegistrationsSection';
+
+export default function AdminViewAsPage() {
+  const { data: session } = useSession();
+  const [users, setUsers] = useState<Array<{ id: string; name: string; email: string }>>([]);
+  const [selectedUser, setSelectedUser] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      try {
+        const res = await fetch('/api/users');
+        if (!res.ok) throw new Error('Failed to fetch users');
+        const data = await res.json();
+        setUsers(data.users || []);
+      } catch (err) {
+        console.error('Failed to load users for view-as:', err);
+      }
+    };
+
+    if (session?.user?.role === 'admin') fetchUsers();
+  }, [session]);
+
+  if (!session?.user || session.user.role !== 'admin') {
+    return <div className="p-6">Unauthorized</div>;
+  }
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">Admin: View As User</h1>
+
+      <div className="mb-4">
+        <label className="block text-sm font-medium text-gray-700 mb-2">Select user</label>
+        <select value={selectedUser ?? ''} onChange={e => setSelectedUser(e.target.value || null)} className="border rounded p-2">
+          <option value="">-- pick user --</option>
+          {users.map(u => (
+            <option key={u.id} value={u.id}>{u.name} — {u.email}</option>
+          ))}
+        </select>
+      </div>
+
+      {selectedUser ? (
+        <div>
+          <h2 className="text-lg font-semibold mb-3">Preview as selected user</h2>
+          <UserRegistrationsSection viewAsUserId={selectedUser} />
+        </div>
+      ) : (
+        <div className="text-gray-600">Choose a user to preview their participant view.</div>
+      )}
+    </div>
+  );
+}

src/app/dashboard/view-as/page.tsx

@@ -32,7 +32,7 @@ interface StatusData {
   };
 }
 
-export default function UserRegistrationsSection() {
+export default function UserRegistrationsSection({ viewAsUserId }: { viewAsUserId?: string }) {
   const { data: session } = useSession();
   const searchParams = useSearchParams();
   const [statusData, setStatusData] = useState<StatusData | null>(null);
@@ -42,7 +42,8 @@ export default function UserRegistrationsSection() {
   useEffect(() => {
     const fetchStatus = async () => {
       try {
-        const response = await fetch('/api/users/me/status');
+        const endpoint = viewAsUserId ? `/api/admin/view-as?userId=${encodeURIComponent(viewAsUserId)}` : '/api/users/me/status';
+        const response = await fetch(endpoint);
 
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));
@@ -61,10 +62,11 @@ export default function UserRegistrationsSection() {
       }
     };
 
-    if (session?.user) {
+    // If viewing as another user, allow admins to fetch; otherwise only fetch when session exists
+    if ((viewAsUserId && session?.user?.role === 'admin') || (!viewAsUserId && session?.user)) {
       fetchStatus();
     }
-  }, [session, searchParams]);
+  }, [session, searchParams, viewAsUserId]);
 
   // Auto-logout applicants who have been approved (so they can login as participant)
   useEffect(() => {
@@ -139,8 +141,8 @@ export default function UserRegistrationsSection() {
         </p>
       </div>
 
-      {/* QR Code Display - Only show for participants */}
-      {session.user.role === 'participant' && (
+      {/* QR Code Display - show for participants or when admin is viewing as a user */}
+      {(session.user.role === 'participant' || viewAsUserId) && (
         <div className="mb-6 flex justify-center">
           <div className="max-w-sm w-full">
             <GenericQRDisplay