feat: Implement trial event logging, archiving, experiment soft deletion, and new analytics/event data tables.

src/app/(dashboard)/studies/[id]/analytics/page.tsx

@@ -1,190 +1,15 @@
 "use client";
 
 import { useParams } from "next/navigation";
-import { Suspense, useEffect, useState } from "react";
-import {
-  BarChart3,
-  Search,
-  Filter,
-  PlayCircle,
-  Calendar,
-  Clock,
-  ChevronRight,
-  User,
-  LayoutGrid
-} from "lucide-react";
+import { Suspense, useEffect } from "react";
+import { BarChart3 } from "lucide-react";
 
 import { PageHeader } from "~/components/ui/page-header";
 import { useBreadcrumbsEffect } from "~/components/ui/breadcrumb-provider";
 import { useStudyContext } from "~/lib/study-context";
 import { useSelectedStudyDetails } from "~/hooks/useSelectedStudyDetails";
 import { api } from "~/trpc/react";
-import { TrialAnalysisView } from "~/components/trials/views/TrialAnalysisView";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "~/components/ui/select";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
-import { Button } from "~/components/ui/button";
-import { ScrollArea } from "~/components/ui/scroll-area";
-import { formatDistanceToNow } from "date-fns";
-
-// -- Sub-Components --
-
-function AnalyticsContent({
-  selectedTrialId,
-  setSelectedTrialId,
-  trialsList,
-  isLoadingList
-}: {
-  selectedTrialId: string | null;
-  setSelectedTrialId: (id: string | null) => void;
-  trialsList: any[];
-  isLoadingList: boolean;
-}) {
-
-  // Fetch full details of selected trial
-  const {
-    data: selectedTrial,
-    isLoading: isLoadingTrial,
-    error: trialError
-  } = api.trials.get.useQuery(
-    { id: selectedTrialId! },
-    { enabled: !!selectedTrialId }
-  );
-
-  // Transform trial data
-  const trialData = selectedTrial ? {
-    ...selectedTrial,
-    startedAt: selectedTrial.startedAt ? new Date(selectedTrial.startedAt) : null,
-    completedAt: selectedTrial.completedAt ? new Date(selectedTrial.completedAt) : null,
-    eventCount: (selectedTrial as any).eventCount,
-    mediaCount: (selectedTrial as any).mediaCount,
-  } : null;
-
-  return (
-    <div className="h-[calc(100vh-140px)] flex flex-col">
-      {selectedTrialId ? (
-        isLoadingTrial ? (
-          <div className="flex-1 flex items-center justify-center bg-background/50 rounded-lg border border-dashed">
-            <div className="flex flex-col items-center gap-2 animate-pulse">
-              <div className="h-8 w-8 rounded-full border-2 border-primary border-t-transparent animate-spin" />
-              <span className="text-muted-foreground text-sm">Loading trial data...</span>
-            </div>
-          </div>
-        ) : trialError ? (
-          <div className="flex-1 flex items-center justify-center p-8 bg-background/50 rounded-lg border border-dashed text-destructive">
-            <div className="max-w-md text-center">
-              <h3 className="font-semibold mb-2">Error Loading Trial</h3>
-              <p className="text-sm opacity-80">{trialError.message}</p>
-              <Button variant="outline" className="mt-4" onClick={() => setSelectedTrialId(null)}>
-                Return to Overview
-              </Button>
-            </div>
-          </div>
-        ) : trialData ? (
-          <TrialAnalysisView trial={trialData} />
-        ) : null
-      ) : (
-        <div className="flex-1 bg-background/50 rounded-lg border shadow-sm overflow-hidden">
-          <StudyOverviewPlaceholder
-            trials={trialsList ?? []}
-            onSelect={(id) => setSelectedTrialId(id)}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
-
-function StudyOverviewPlaceholder({ trials, onSelect }: { trials: any[], onSelect: (id: string) => void }) {
-  const recentTrials = [...trials].sort((a, b) =>
-    new Date(b.startedAt || b.createdAt).getTime() - new Date(a.startedAt || a.createdAt).getTime()
-  ).slice(0, 5);
-
-  return (
-    <div className="h-full p-8 grid place-items-center bg-muted/5">
-      <div className="max-w-3xl w-full grid gap-8 md:grid-cols-2">
-        {/* Left: Illustration / Prompt */}
-        <div className="flex flex-col justify-center space-y-4">
-          <div className="bg-primary/10 w-16 h-16 rounded-2xl flex items-center justify-center mb-2">
-            <BarChart3 className="h-8 w-8 text-primary" />
-          </div>
-          <div>
-            <h2 className="text-2xl font-semibold tracking-tight">Analytics & Playback</h2>
-            <CardDescription className="text-base mt-2">
-              Select a session from the top right to review video recordings, event logs, and metrics.
-            </CardDescription>
-          </div>
-          <div className="flex gap-4 pt-4">
-            <div className="flex items-center gap-2 text-sm text-muted-foreground">
-              <PlayCircle className="h-4 w-4" />
-              Feature-rich playback
-            </div>
-            <div className="flex items-center gap-2 text-sm text-muted-foreground">
-              <Clock className="h-4 w-4" />
-              Synchronized timeline
-            </div>
-          </div>
-        </div>
-
-        {/* Right: Recent Sessions */}
-        <Card>
-          <CardHeader className="pb-3">
-            <CardTitle className="text-base">Recent Sessions</CardTitle>
-          </CardHeader>
-          <CardContent className="p-0">
-            <ScrollArea className="h-[240px]">
-              <div className="px-4 pb-4 space-y-1">
-                {recentTrials.map(trial => (
-                  <button
-                    key={trial.id}
-                    onClick={() => onSelect(trial.id)}
-                    className="w-full flex items-center gap-3 p-3 rounded-md hover:bg-accent transition-colors text-left group"
-                  >
-                    <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-xs font-mono font-medium text-primary">
-                      {trial.sessionNumber}
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2">
-                        <span className="font-medium text-sm truncate">
-                          {trial.participant?.participantCode ?? "Unknown"}
-                        </span>
-                        <span className={`text-[10px] px-1.5 py-0.5 rounded-full border capitalize ${trial.status === 'completed' ? 'bg-green-500/10 text-green-500 border-green-500/20' :
-                          trial.status === 'in_progress' ? 'bg-blue-500/10 text-blue-500 border-blue-500/20' :
-                            'bg-slate-500/10 text-slate-500 border-slate-500/20'
-                          }`}>
-                          {trial.status.replace('_', ' ')}
-                        </span>
-                      </div>
-                      <div className="text-xs text-muted-foreground flex items-center gap-2 mt-0.5">
-                        <Calendar className="h-3 w-3" />
-                        {new Date(trial.createdAt).toLocaleDateString()}
-                        <span className="text-muted-foreground top-[1px] relative text-[10px]">•</span>
-                        {formatDistanceToNow(new Date(trial.createdAt), { addSuffix: true })}
-                      </div>
-                    </div>
-                    <ChevronRight className="h-4 w-4 text-muted-foreground/30 group-hover:text-primary transition-colors" />
-                  </button>
-                ))}
-                {recentTrials.length === 0 && (
-                  <div className="py-8 text-center text-sm text-muted-foreground">
-                    No sessions found.
-                  </div>
-                )}
-              </div>
-            </ScrollArea>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-}
-
-// -- Main Page --
+import { StudyAnalyticsDataTable } from "~/components/analytics/study-analytics-data-table";
 
 export default function StudyAnalyticsPage() {
   const params = useParams();
@@ -192,11 +17,8 @@ export default function StudyAnalyticsPage() {
   const { setSelectedStudyId, selectedStudyId } = useStudyContext();
   const { study } = useSelectedStudyDetails();
 
-  // State lifted up
-  const [selectedTrialId, setSelectedTrialId] = useState<string | null>(null);
-
-  // Fetch list of trials for the selector
-  const { data: trialsList, isLoading: isLoadingList } = api.trials.list.useQuery(
+  // Fetch list of trials
+  const { data: trialsList, isLoading } = api.trials.list.useQuery(
     { studyId, limit: 100 },
     { enabled: !!studyId }
   );
@@ -217,50 +39,30 @@ export default function StudyAnalyticsPage() {
   }, [studyId, selectedStudyId, setSelectedStudyId]);
 
   return (
-    <div className="h-[calc(100vh-64px)] flex flex-col p-6 gap-6">
-      <div className="flex-none">
-        <PageHeader
-          title="Analytics"
-          description="Analyze trial data and replay sessions"
-          icon={BarChart3}
-          actions={
-            <div className="flex items-center gap-2">
-              {/* Session Selector in Header */}
-              <div className="w-[300px]">
-                <Select
-                  value={selectedTrialId ?? "overview"}
-                  onValueChange={(val) => setSelectedTrialId(val === "overview" ? null : val)}
-                >
-                  <SelectTrigger className="w-full h-9 text-xs">
-                    <LayoutGrid className="h-3.5 w-3.5 mr-2 text-muted-foreground" />
-                    <SelectValue placeholder="Select Session" />
-                  </SelectTrigger>
-                  <SelectContent className="max-h-[400px]" align="end">
-                    <SelectItem value="overview" className="border-b mb-1 pb-1 font-medium text-xs">
-                      Show Study Overview
-                    </SelectItem>
-                    {trialsList?.map((trial) => (
-                      <SelectItem key={trial.id} value={trial.id} className="text-xs">
-                        <span className="font-mono mr-2 text-muted-foreground">#{trial.sessionNumber}</span>
-                        {trial.participant?.participantCode ?? "Unknown"} <span className="text-muted-foreground ml-1">({new Date(trial.createdAt).toLocaleDateString()})</span>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+    <div className="space-y-6">
+      <PageHeader
+        title="Analysis"
+        description="View and analyze session data across all trials"
+        icon={BarChart3}
+      />
+
+      <div className="bg-transparent">
+        <Suspense fallback={<div>Loading analytics...</div>}>
+          {isLoading ? (
+            <div className="flex items-center justify-center h-64">
+              <div className="flex flex-col items-center gap-2 animate-pulse">
+                <div className="h-8 w-8 rounded-full border-2 border-primary border-t-transparent animate-spin" />
+                <span className="text-muted-foreground text-sm">Loading session data...</span>
               </div>
             </div>
-          }
-        />
-      </div>
-
-      <div className="flex-1 min-h-0 bg-transparent">
-        <Suspense fallback={<div>Loading analytics...</div>}>
-          <AnalyticsContent
-            selectedTrialId={selectedTrialId}
-            setSelectedTrialId={setSelectedTrialId}
-            trialsList={trialsList ?? []}
-            isLoadingList={isLoadingList}
-          />
+          ) : (
+            <StudyAnalyticsDataTable data={(trialsList ?? []).map(t => ({
+              ...t,
+              startedAt: t.startedAt ? new Date(t.startedAt) : null,
+              completedAt: t.completedAt ? new Date(t.completedAt) : null,
+              createdAt: new Date(t.createdAt),
+            }))} />
+          )}
         </Suspense>
       </div>
     </div>

src/app/(dashboard)/studies/[id]/participants/[participantId]/page.tsx

@@ -13,6 +13,8 @@ import { Button } from "~/components/ui/button";
 import { Edit } from "lucide-react";
 import Link from "next/link";
 
+import { ParticipantConsentManager } from "~/components/participants/ParticipantConsentManager";
+
 interface ParticipantDetailPageProps {
     params: Promise<{ id: string; participantId: string }>;
 }
@@ -61,6 +63,13 @@ export default async function ParticipantDetailPage({
 
                 <TabsContent value="overview">
                     <div className="grid gap-6 grid-cols-1">
+                        <ParticipantConsentManager
+                            studyId={studyId}
+                            participantId={participantId}
+                            consentGiven={participant.consentGiven}
+                            consentDate={participant.consentDate}
+                            existingConsent={participant.consents[0] ?? null}
+                        />
                         <EntityViewSection title="Participant Information" icon="Info">
                             <div className="grid grid-cols-2 gap-4 text-sm md:grid-cols-4">
                                 <div>

src/app/(dashboard)/studies/[id]/trials/[trialId]/analysis/page.tsx

@@ -95,25 +95,10 @@ function AnalysisPageContent() {
     };
 
     return (
-        <div className="flex h-full flex-col">
-            <PageHeader
-                title="Trial Analysis"
-                description={`Analysis for Session ${trial.sessionNumber} • Participant ${trial.participant.participantCode}`}
-                icon={LineChart}
-                actions={
-                    <Button asChild variant="outline">
-                        <Link href={`/studies/${studyId}/trials/${trialId}`}>
-                            <ArrowLeft className="mr-2 h-4 w-4" />
-                            Back to Trial Details
-                        </Link>
-                    </Button>
-                }
-            />
-
-            <div className="min-h-0 flex-1">
-                <TrialAnalysisView trial={trialData} />
-            </div>
-        </div>
+        <TrialAnalysisView
+            trial={trialData}
+            backHref={`/studies/${studyId}/trials/${trialId}`}
+        />
     );
 }