add clear experiment data functionality and button component

src/app/actions/experiment.ts

@@ -2,6 +2,8 @@
 
 import db from '@/lib/db';
 import { experiment } from '@/lib/model/experiment';
+import { annotation } from '@/lib/model/annotation';
+import { participant } from '@/lib/model/participant';
 import { and, eq } from 'drizzle-orm';
 import { revalidatePath } from 'next/cache';
 import { auth, requireAdmin } from '@/lib/auth';
@@ -144,3 +146,24 @@ export async function getExperimentById(id: number) {
     throw new Error('Failed to fetch experiment');
   } 
 }
+
+export async function clearExperimentData(id: number) {
+  const result = await requireAdmin();
+  if (!result.authenticated || !result.admin) {
+    throw new Error('Unauthorized');
+  }
+
+  try {
+    // Delete all annotations for this experiment
+    await db.delete(annotation).where(eq(annotation.experimentId, id));
+
+    // Delete all participants for this experiment
+    await db.delete(participant).where(eq(participant.experimentId, id));
+
+    revalidatePath(`/admin/experiments/${id}`);
+    return { success: true };
+  } catch (error) {
+    console.error('Error clearing experiment data:', error);
+    throw new Error('Failed to clear experiment data');
+  }
+}

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

@@ -4,6 +4,7 @@ import { experiment } from '@/lib/model/experiment';
 import { eq } from 'drizzle-orm';
 import EditableExperimentHeader from '@/components/EditableExperimentHeader';
 import DeleteExperimentButton from '@/components/DeleteExperimentButton';
+import ClearExperimentDataButton from '@/components/ClearExperimentDataButton';
 import UploadCalibrationModal from '@/components/UploadCalibrationModal';
 import CalibrationListModal from '@/components/CalibrationListModal';
 import { requireAdmin } from '@/lib/auth';
@@ -68,6 +69,7 @@ export default async function ExperimentPage({ params }: ExperimentPageProps) {
 
         <div className="flex gap-3 mb-6">
           <DeleteExperimentButton experimentId={experimentId} experimentName={exp.name} />
+          <ClearExperimentDataButton experimentId={experimentId} experimentName={exp.name} />
           <UploadCalibrationModal experimentId={experimentId} />
           <CalibrationListModal experimentId={experimentId} />
         </div>

src/components/ClearExperimentDataButton.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { useState } from 'react';
+import { clearExperimentData } from '@/app/actions/experiment';
+
+interface ClearExperimentDataButtonProps {
+  experimentId: number;
+  experimentName: string;
+}
+
+export default function ClearExperimentDataButton({ experimentId, experimentName }: ClearExperimentDataButtonProps) {
+  const [isConfirming, setIsConfirming] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  async function handleConfirm() {
+    setLoading(true);
+    setError(null);
+    setSuccess(false);
+
+    try {
+      await clearExperimentData(experimentId);
+      setIsConfirming(false);
+      setSuccess(true);
+      // Clear success message after 3 seconds
+      setTimeout(() => setSuccess(false), 3000);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to clear experiment data';
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (isConfirming) {
+    return (
+      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div className="bg-white rounded-lg shadow-lg p-6 max-w-sm">
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+            Clear all data for "{experimentName}"?
+          </h3>
+          <p className="text-gray-600 mb-4">
+            This will permanently delete all annotations and participant data for this experiment. This action cannot be undone.
+          </p>
+
+          {error && (
+            <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
+              {error}
+            </div>
+          )}
+
+          <div className="flex gap-2 justify-end">
+            <button
+              onClick={() => setIsConfirming(false)}
+              disabled={loading}
+              className="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 disabled:bg-gray-200"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleConfirm}
+              disabled={loading}
+              className="px-4 py-2 bg-orange-500 text-white rounded-md hover:bg-orange-600 disabled:bg-gray-400"
+            >
+              {loading ? 'Clearing...' : 'Clear Data'}
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <button
+        onClick={() => setIsConfirming(true)}
+        className="px-4 py-2 bg-orange-500 text-white rounded-md hover:bg-orange-600"
+      >
+        Clear All Data
+      </button>
+      {success && (
+        <div className="fixed bottom-4 right-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded">
+          Data cleared successfully
+        </div>
+      )}
+    </>
+  );
+}