feat: added admin participant detail page

src/app/actions/calibration-scoring.ts

@@ -5,41 +5,69 @@ import { experiment_calibration } from '@/lib/model/experiment_calibration';
 import { experiment } from '@/lib/model/experiment';
 import { participant } from '@/lib/model/participant';
 import { eq, and } from 'drizzle-orm';
-import { auth } from '@/lib/auth';
+import { auth, requireAdmin } from '@/lib/auth';
 import { headers } from 'next/headers';
 
 /**
- * Calculates dialect performance scores based on the participant's calibration answers.
+ * Calculates dialect performance scores based on calibration answers.
  * Score = (correctness × confidence) averaged per dialect
  * Range: -1 to 1, where:
  *   1 = perfect identification with full confidence
  *   0 = neutral (correct but unsure, or incorrect and unsure)
  *   -1 = completely wrong with full confidence (penalizes false confidence)
+ *
+ * @param experimentId - The experiment ID
+ * @param userId - Optional user ID. If provided, requires admin privileges. If not provided, uses current user.
  */
 export async function getDialectScoresFromCalibration(
-  experimentId: number
+  experimentId: number,
+  userId?: string
 ): Promise<Record<string, number>> {
   const session = await auth.api.getSession({ headers: await headers() });
   if (!session) throw new Error('Nicht angemeldet');
 
-  // Fetch calibration items and participant's answers
+  // Determine which user to fetch scores for
+  let targetUserId = userId;
+  if (targetUserId) {
+    // Admin access required for fetching other user's scores
+    const result = await requireAdmin();
+    if (!result.authenticated || !result.admin) {
+      throw new Error('Unauthorized');
+    }
+  } else {
+    // Use current user if no userId provided
+    targetUserId = session.user.id;
+  }
+
+  // Fetch calibration items
   const calibrationItems = await db
     .select()
     .from(experiment_calibration)
     .where(eq(experiment_calibration.experimentId, experimentId));
 
+  // Fetch participant record
   const participantRecord = await db
     .select()
     .from(participant)
     .where(
       and(
         eq(participant.experimentId, experimentId),
-        eq(participant.userId, session.user.id)
+        eq(participant.userId, targetUserId)
       )
     )
     .limit(1);
 
-  // Calculate dialect scores based on calibration performance
+  // Calculate dialect scores
+  return calculateDialectScores(calibrationItems, participantRecord);
+}
+
+/**
+ * Helper function to calculate dialect scores from calibration items and answers
+ */
+function calculateDialectScores(
+  calibrationItems: typeof experiment_calibration.$inferSelect[],
+  participantRecord: (typeof participant.$inferSelect)[]
+): Record<string, number> {
   const dialectScores: Record<string, number> = {};
 
   if (participantRecord.length > 0 && participantRecord[0].calibrationAnswers) {

src/app/actions/participants.ts

@@ -0,0 +1,231 @@
+'use server';
+
+import db from '@/lib/db';
+import { participant } from '@/lib/model/participant';
+import { annotation } from '@/lib/model/annotation';
+import { experiment } from '@/lib/model/experiment';
+import { dataset_entry } from '@/lib/model/dataset_entry';
+import { and, eq, count } from 'drizzle-orm';
+import { requireAdmin } from '@/lib/auth';
+import { isParticipantCalibrationDone, getDialectScoresFromCalibration } from './calibration-scoring';
+
+export interface ParticipantListItem {
+  id: number;
+  experimentId: number;
+  userId: string;
+  completedOnboarding: boolean;
+  completedCalibration: boolean;
+  annotationCount: number;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export interface ParticipantDetail extends ParticipantListItem {
+  onboardingAnswers: any;
+  calibrationAnswers: any;
+  annotations: Array<{
+    id: number;
+    datasetEntryId: number;
+    externalId: string;
+    fileName: string;
+    datasetId: number;
+    rating: number;
+    dialectLabel: string;
+    createdAt: Date;
+  }>;
+}
+
+/**
+ * Get all participants for an experiment as a list
+ */
+export async function getParticipantsList(experimentId: number): Promise<ParticipantListItem[]> {
+  const result = await requireAdmin();
+  if (!result.authenticated || !result.admin) {
+    throw new Error('Unauthorized');
+  }
+
+  try {
+    // Verify experiment exists
+    const exp = await db.select().from(experiment).where(eq(experiment.id, experimentId)).limit(1);
+    if (!exp || exp.length === 0) {
+      throw new Error('Experiment not found');
+    }
+
+    // Get all participants for this experiment
+    const participants = await db
+      .select()
+      .from(participant)
+      .where(eq(participant.experimentId, experimentId));
+
+    // Build list with annotation counts
+    const participantsList: ParticipantListItem[] = [];
+
+    for (const p of participants) {
+      // Count annotations for this participant
+      const annotationCounts = await db
+        .select({ count: count().as('count') })
+        .from(annotation)
+        .where(
+          and(
+            eq(annotation.experimentId, experimentId),
+            eq(annotation.userId, p.userId)
+          )
+        );
+
+      const annotationCount = annotationCounts[0]?.count || 0;
+
+      // Use the proper calibration validation function
+      const completedCalibration = await isParticipantCalibrationDone(experimentId, p);
+
+      participantsList.push({
+        id: p.id,
+        experimentId: p.experimentId!,
+        userId: p.userId,
+        completedOnboarding: p.onboardingAnswers !== null && p.onboardingAnswers !== undefined,
+        completedCalibration,
+        annotationCount,
+        createdAt: p.createdAt,
+        updatedAt: p.updatedAt,
+      });
+    }
+
+    // Sort by descending creation date
+    participantsList.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+
+    return participantsList;
+  } catch (error) {
+    console.error('Error fetching participants list:', error);
+    throw error;
+  }
+}
+
+/**
+ * Get detailed information about a specific participant
+ */
+export async function getParticipantDetail(
+  experimentId: number,
+  userId: string
+): Promise<ParticipantDetail> {
+  const result = await requireAdmin();
+  if (!result.authenticated || !result.admin) {
+    throw new Error('Unauthorized');
+  }
+
+  try {
+    // Verify experiment exists
+    const exp = await db.select().from(experiment).where(eq(experiment.id, experimentId)).limit(1);
+    if (!exp || exp.length === 0) {
+      throw new Error('Experiment not found');
+    }
+
+    // Get participant
+    const participants = await db
+      .select()
+      .from(participant)
+      .where(
+        and(
+          eq(participant.experimentId, experimentId),
+          eq(participant.userId, userId)
+        )
+      )
+      .limit(1);
+
+    if (!participants || participants.length === 0) {
+      throw new Error('Participant not found');
+    }
+
+    const p = participants[0];
+
+    // Get all annotations for this participant
+    const participantAnnotations = await db
+      .select({
+        id: annotation.id,
+        datasetEntryId: annotation.datasetEntryId,
+        externalId: dataset_entry.externalId,
+        fileName: dataset_entry.fileName,
+        datasetId: dataset_entry.datasetId,
+        rating: annotation.rating,
+        dialectLabel: annotation.dialectLabel,
+        createdAt: annotation.createdAt,
+      })
+      .from(annotation)
+      .leftJoin(dataset_entry, eq(annotation.datasetEntryId, dataset_entry.id))
+      .where(
+        and(
+          eq(annotation.experimentId, experimentId),
+          eq(annotation.userId, userId)
+        )
+      );
+
+    // Use the proper calibration validation function
+    const completedCalibration = await isParticipantCalibrationDone(experimentId, p);
+
+    return {
+      id: p.id,
+      experimentId: p.experimentId!,
+      userId: p.userId,
+      completedOnboarding: p.onboardingAnswers !== null && p.onboardingAnswers !== undefined,
+      completedCalibration,
+      onboardingAnswers: p.onboardingAnswers || {},
+      calibrationAnswers: p.calibrationAnswers || {},
+      annotationCount: participantAnnotations.length,
+      annotations: participantAnnotations.map(a => ({
+        id: a.id,
+        datasetEntryId: a.datasetEntryId,
+        externalId: a.externalId || 'Unknown',        fileName: a.fileName || 'Unknown',
+        datasetId: a.datasetId || 0,        rating: a.rating,
+        dialectLabel: a.dialectLabel,
+        createdAt: a.createdAt,
+      })),
+      createdAt: p.createdAt,
+      updatedAt: p.updatedAt,
+    };
+  } catch (error) {
+    console.error('Error fetching participant detail:', error);
+    throw error;
+  }
+}
+
+/**
+ * Get calibration scores for a participant
+ */
+export async function getParticipantCalibrationScores(
+  experimentId: number,
+  userId: string
+): Promise<Record<string, number>> {
+  const result = await requireAdmin();
+  if (!result.authenticated || !result.admin) {
+    throw new Error('Unauthorized');
+  }
+
+  try {
+    // Verify experiment exists
+    const exp = await db.select().from(experiment).where(eq(experiment.id, experimentId)).limit(1);
+    if (!exp || exp.length === 0) {
+      throw new Error('Experiment not found');
+    }
+
+    // Verify participant exists
+    const participants = await db
+      .select()
+      .from(participant)
+      .where(
+        and(
+          eq(participant.experimentId, experimentId),
+          eq(participant.userId, userId)
+        )
+      )
+      .limit(1);
+
+    if (!participants || participants.length === 0) {
+      throw new Error('Participant not found');
+    }
+
+    // Get calibration scores using the existing server action
+    const scores = await getDialectScoresFromCalibration(experimentId, userId);
+    return scores;
+  } catch (error) {
+    console.error('Error fetching participant calibration scores:', error);
+    throw error;
+  }
+}

src/app/admin/experiments/[id]/page.tsx

@@ -68,7 +68,13 @@ export default async function ExperimentPage({ params }: ExperimentPageProps) {
 
         <EditableExperimentHeader experiment={exp} />
 
-        <div className="flex gap-3 mb-6">
+        <div className="flex gap-3 mb-6 flex-wrap">
+          <Link
+            href={`/admin/experiments/${experimentId}/participants`}
+            className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-medium transition-colors"
+          >
+            View Participants
+          </Link>
           <DeleteExperimentButton experimentId={experimentId} experimentName={exp.name} />
           <ClearExperimentDataButton experimentId={experimentId} experimentName={exp.name} />
           <UploadCalibrationModal experimentId={experimentId} />

src/app/admin/experiments/[id]/participants/[userId]/page.tsx

@@ -0,0 +1,101 @@
+import Link from 'next/link';
+import { getParticipantDetail } from '@/app/actions/participants';
+import { requireAdmin } from '@/lib/auth';
+import { redirect } from 'next/navigation';
+import db from '@/lib/db';
+import { experiment } from '@/lib/model/experiment';
+import { eq } from 'drizzle-orm';
+import ParticipantDetailView from '@/components/ParticipantDetailView';
+
+interface ParticipantDetailPageProps {
+  params: {
+    id: string;
+    userId: string;
+  };
+}
+
+export default async function ParticipantPage({ params }: ParticipantDetailPageProps) {
+  const result = await requireAdmin();
+
+  if (!result.authenticated) {
+    redirect("/user/sign-in");
+  }
+
+  if (!result.admin) {
+    redirect("/");
+  }
+
+  const { id, userId } = await params;
+  const experimentId = parseInt(id, 10);
+
+  // Verify experiment exists
+  const experiments = await db
+    .select()
+    .from(experiment)
+    .where(eq(experiment.id, experimentId));
+
+  if (experiments.length === 0) {
+    return (
+      <div className="min-h-screen">
+        <div className="px-4 sm:px-6 lg:px-8 py-8">
+          <Link
+            href="/admin/experiments"
+            className="text-blue-500 hover:text-blue-600 mb-6 inline-block"
+          >
+            ← Back to Experiments
+          </Link>
+          <div className="bg-white rounded-lg shadow p-6">
+            <p className="text-gray-600">Experiment not found</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const exp = experiments[0];
+
+  // Get participant details
+  let participant;
+  try {
+    participant = await getParticipantDetail(experimentId, userId);
+  } catch (error) {
+    return (
+      <div className="min-h-screen">
+        <div className="px-4 sm:px-6 lg:px-8 py-8">
+          <Link
+            href={`/admin/experiments/${experimentId}/participants`}
+            className="text-blue-500 hover:text-blue-600 mb-6 inline-block"
+          >
+            ← Back to Participants
+          </Link>
+          <div className="bg-white rounded-lg shadow p-6">
+            <p className="text-gray-600">Participant not found</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen">
+      <div className="px-4 sm:px-6 lg:px-8 py-8">
+        <div className="mb-6">
+          <Link
+            href={`/admin/experiments/${experimentId}/participants`}
+            className="text-blue-500 hover:text-blue-600 mb-4 inline-block"
+          >
+            ← Back to Participants
+          </Link>
+          <div className="flex items-start justify-between">
+            <div>
+              <p className="text-sm text-gray-600 mb-1">{exp.name}</p>
+              <h1 className="text-3xl font-bold text-gray-900">Participant Data</h1>
+            </div>
+          </div>
+        </div>
+
+        <ParticipantDetailView participant={participant} experimentId={experimentId} />
+      </div>
+    </div>
+  );
+}

src/app/admin/experiments/[id]/participants/page.tsx

@@ -0,0 +1,83 @@
+import Link from 'next/link';
+import { getParticipantsList } from '@/app/actions/participants';
+import { requireAdmin } from '@/lib/auth';
+import { redirect } from 'next/navigation';
+import db from '@/lib/db';
+import { experiment } from '@/lib/model/experiment';
+import { eq } from 'drizzle-orm';
+import ParticipantsList from '@/components/ParticipantsList';
+
+interface ParticipantsPageProps {
+  params: {
+    id: string;
+  };
+}
+
+export default async function ParticipantsPage({ params }: ParticipantsPageProps) {
+  const result = await requireAdmin();
+
+  if (!result.authenticated) {
+    redirect("/user/sign-in");
+  }
+
+  if (!result.admin) {
+    redirect("/");
+  }
+
+  const { id } = await params;
+  const experimentId = parseInt(id, 10);
+
+  // Verify experiment exists
+  const experiments = await db
+    .select()
+    .from(experiment)
+    .where(eq(experiment.id, experimentId));
+
+  if (experiments.length === 0) {
+    return (
+      <div className="min-h-screen">
+        <div className="px-4 sm:px-6 lg:px-8 py-8">
+          <Link
+            href="/admin/experiments"
+            className="text-blue-500 hover:text-blue-600 mb-6 inline-block"
+          >
+            ← Back to Experiments
+          </Link>
+          <div className="bg-white rounded-lg shadow p-6">
+            <p className="text-gray-600">Experiment not found</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const exp = experiments[0];
+
+  // Get participants
+  const participants = await getParticipantsList(experimentId);
+
+  return (
+    <div className="min-h-screen">
+      <div className="px-4 sm:px-6 lg:px-8 py-8">
+        <div className="mb-6 flex items-center justify-between">
+          <div>
+            <Link
+              href={`/admin/experiments/${experimentId}`}
+              className="text-blue-500 hover:text-blue-600 mb-4 inline-block"
+            >
+              ← Back to Experiment
+            </Link>
+            <h1 className="text-3xl font-bold text-gray-900">Participants</h1>
+            <p className="text-gray-600 mt-1">{exp.name}</p>
+          </div>
+          <div className="text-right">
+            <div className="text-2xl font-bold text-blue-600">{participants.length}</div>
+            <div className="text-sm text-gray-600">Total Participants</div>
+          </div>
+        </div>
+
+        <ParticipantsList experimentId={experimentId} participants={participants} />
+      </div>
+    </div>
+  );
+}

src/components/ParticipantDetailView.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+import { ParticipantDetail, getParticipantCalibrationScores } from '@/app/actions/participants';
+import { useEffect, useState } from 'react';
+import CalibrationScoresDisplay from './CalibrationScoresDisplay';
+import AudioPlayer from './AudioPlayer';
+
+interface ParticipantDetailViewProps {
+  participant: ParticipantDetail;
+  experimentId: number;
+}
+
+interface CalibrationScores {
+  [dialectLabel: string]: number;
+}
+
+export default function ParticipantDetailView({ participant, experimentId }: ParticipantDetailViewProps) {
+  const [selectedAnnotation, setSelectedAnnotation] = useState<(typeof participant.annotations)[0] | null>(
+    participant.annotations.length > 0 ? participant.annotations[0] : null
+  );
+  const [calibrationScores, setCalibrationScores] = useState<CalibrationScores | null>(null);
+  const [scoresLoading, setScoresLoading] = useState(false);
+  const [scoresError, setScoresError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (participant.completedCalibration) {
+      const fetchScores = async () => {
+        setScoresLoading(true);
+        setScoresError(null);
+        try {
+          const scores = await getParticipantCalibrationScores(experimentId, participant.userId);
+          setCalibrationScores(scores);
+        } catch (err) {
+          setScoresError(err instanceof Error ? err.message : 'Failed to load calibration scores');
+        } finally {
+          setScoresLoading(false);
+        }
+      };
+      fetchScores();
+    }
+  }, [experimentId, participant.userId, participant.completedCalibration]);
+
+  return (
+    <div className="space-y-6">
+      {/* Header Card */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">{participant.userId}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <div className="bg-blue-50 rounded p-4">
+            <div className="text-sm text-gray-600 mb-1">Status</div>
+            <div className="text-lg font-semibold text-gray-900">Joined</div>
+            <div className="text-xs text-gray-600 mt-2">
+              {new Date(participant.createdAt).toLocaleDateString()}
+            </div>
+          </div>
+          <div className="bg-green-50 rounded p-4">
+            <div className="text-sm text-gray-600 mb-1">Onboarding</div>
+            <div className="text-lg font-semibold text-green-600">
+              {participant.completedOnboarding ? '✓ Completed' : '○ Pending'}
+            </div>
+          </div>
+          <div className="bg-blue-50 rounded p-4">
+            <div className="text-sm text-gray-600 mb-1">Calibration</div>
+            <div className="text-lg font-semibold text-blue-600">
+              {participant.completedCalibration ? '✓ Completed' : '○ Pending'}
+            </div>
+          </div>
+          <div className="bg-purple-50 rounded p-4">
+            <div className="text-sm text-gray-600 mb-1">Annotations</div>
+            <div className="text-3xl font-bold text-purple-600">{participant.annotationCount}</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Onboarding Data */}
+      {participant.completedOnboarding && (
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 className="text-xl font-bold text-gray-900 mb-4">Onboarding Data</h3>
+          <div className="bg-gray-50 rounded p-4 font-mono text-sm whitespace-pre-wrap break-words">
+            <code>{JSON.stringify(participant.onboardingAnswers, null, 2)}</code>
+          </div>
+        </div>
+      )}
+
+      {/* Calibration Data */}
+      {participant.completedCalibration && (
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 className="text-xl font-bold text-gray-900 mb-4">Calibration Data</h3>
+          <div className="bg-gray-50 rounded p-4 font-mono text-sm whitespace-pre-wrap break-words">
+            <code>{JSON.stringify(participant.calibrationAnswers, null, 2)}</code>
+          </div>
+        </div>
+      )}
+
+      {/* Calibration Scores */}
+      {participant.completedCalibration && (
+        <div className="bg-white rounded-lg shadow p-6">
+          <h3 className="text-xl font-bold text-gray-900 mb-4">Calibration Scores</h3>
+          {scoresLoading && <div className="text-gray-600">Loading scores...</div>}
+          {scoresError && <div className="text-red-600">Error: {scoresError}</div>}
+          {calibrationScores && Object.keys(calibrationScores).length > 0 ? (
+            <CalibrationScoresDisplay dialectScores={calibrationScores} />
+          ) : (
+            <div className="text-gray-600">No calibration scores available</div>
+          )}
+        </div>
+      )}
+
+      {/* Annotations */}
+      {participant.annotationCount > 0 && (
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Annotations List */}
+          <div className="lg:col-span-2 bg-white rounded-lg shadow p-6">
+            <h3 className="text-xl font-bold text-gray-900 mb-4">Annotations ({participant.annotationCount})</h3>
+            <div className="space-y-2 max-h-96 overflow-y-auto">
+              {participant.annotations.map((annotation) => (
+                <button
+                  key={annotation.id}
+                  onClick={() => setSelectedAnnotation(annotation)}
+                  className={`w-full text-left p-3 rounded border-2 transition-colors ${
+                    selectedAnnotation?.id === annotation.id
+                      ? 'border-blue-500 bg-blue-50'
+                      : 'border-gray-200 bg-gray-50 hover:border-gray-300'
+                  }`}
+                >
+                  <div className="font-medium text-gray-900">{annotation.externalId}</div>
+                  <div className="text-sm text-gray-600 mt-1">
+                    Rating: <span className="font-semibold">{annotation.rating}</span> | Dialect:{' '}
+                    <span className="font-semibold">{annotation.dialectLabel}</span>
+                  </div>
+                  <div className="text-xs text-gray-500 mt-1">
+                    {new Date(annotation.createdAt).toLocaleString()}
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Selected Annotation Details */}
+          {selectedAnnotation && (
+            <div className="bg-white rounded-lg shadow p-6">
+              <h4 className="text-lg font-bold text-gray-900 mb-4">Details</h4>
+              <div className="space-y-4">
+                <div>
+                  <div className="text-sm text-gray-600 mb-1">External ID</div>
+                  <div className="font-medium text-gray-900 break-all">{selectedAnnotation.externalId}</div>
+                </div>
+                <div>
+                  <div className="text-sm text-gray-600 mb-1">Rating</div>
+                  <div className="text-2xl font-bold text-gray-900">{selectedAnnotation.rating}</div>
+                </div>
+                <div>
+                  <div className="text-sm text-gray-600 mb-1">Dialect</div>
+                  <div className="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
+                    {selectedAnnotation.dialectLabel}
+                  </div>
+                </div>
+                <div>
+                  <div className="text-sm text-gray-600 mb-1">Timestamp</div>
+                  <div className="text-sm text-gray-900">{new Date(selectedAnnotation.createdAt).toLocaleString()}</div>
+                </div>
+                <div>
+                  <div className="text-sm text-gray-600 mb-1">Audio</div>
+                  <AudioPlayer
+                    fileName={selectedAnnotation.fileName}
+                    datasetId={selectedAnnotation.datasetId}
+                    externalId={selectedAnnotation.externalId}
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {participant.annotationCount === 0 && (
+        <div className="bg-white rounded-lg shadow p-6">
+          <p className="text-gray-600">No annotations yet</p>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/ParticipantsList.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import Link from 'next/link';
+import { ParticipantListItem } from '@/app/actions/participants';
+
+interface ParticipantsListProps {
+  experimentId: number;
+  participants: ParticipantListItem[];
+}
+
+export default function ParticipantsList({ experimentId, participants }: ParticipantsListProps) {
+  if (participants.length === 0) {
+    return (
+      <div className="bg-white rounded-lg shadow p-6">
+        <p className="text-gray-600">No participants yet</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow overflow-hidden">
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="bg-gray-50 border-b border-gray-200">
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">User ID</th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Onboarding</th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Calibration</th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Annotations</th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Joined</th>
+              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Action</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200">
+            {participants.map((participant) => (
+              <tr key={participant.id} className="hover:bg-gray-50 transition-colors">
+                <td className="px-6 py-4 text-sm text-gray-900 font-medium">{participant.userId}</td>
+                <td className="px-6 py-4 text-sm">
+                  <span
+                    className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${
+                      participant.completedOnboarding
+                        ? 'bg-green-100 text-green-800'
+                        : 'bg-gray-100 text-gray-800'
+                    }`}
+                  >
+                    {participant.completedOnboarding ? '✓ Done' : '○ Pending'}
+                  </span>
+                </td>
+                <td className="px-6 py-4 text-sm">
+                  <span
+                    className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${
+                      participant.completedCalibration
+                        ? 'bg-blue-100 text-blue-800'
+                        : 'bg-gray-100 text-gray-800'
+                    }`}
+                  >
+                    {participant.completedCalibration ? '✓ Done' : '○ Pending'}
+                  </span>
+                </td>
+                <td className="px-6 py-4 text-sm text-gray-900">
+                  <span className="inline-block px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-xs font-medium">
+                    {participant.annotationCount}
+                  </span>
+                </td>
+                <td className="px-6 py-4 text-sm text-gray-600">
+                  {new Date(participant.createdAt).toLocaleDateString()}
+                </td>
+                <td className="px-6 py-4 text-sm">
+                  <Link
+                    href={`/admin/experiments/${experimentId}/participants/${participant.userId}`}
+                    className="text-blue-600 hover:text-blue-800 font-medium"
+                  >
+                    View
+                  </Link>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}