diff --git a/src/app/(dashboard)/studies/[id]/trials/[trialId]/analysis/page.tsx b/src/app/(dashboard)/studies/[id]/trials/[trialId]/analysis/page.tsx
index 4ed1da9..fb112f9 100644
--- a/src/app/(dashboard)/studies/[id]/trials/[trialId]/analysis/page.tsx
+++ b/src/app/(dashboard)/studies/[id]/trials/[trialId]/analysis/page.tsx
@@ -95,25 +95,10 @@ function AnalysisPageContent() {
};
return (
-
-
-
-
-
+
);
}
diff --git a/src/components/analytics/study-analytics-data-table.tsx b/src/components/analytics/study-analytics-data-table.tsx
new file mode 100644
index 0000000..7fb95d3
--- /dev/null
+++ b/src/components/analytics/study-analytics-data-table.tsx
@@ -0,0 +1,319 @@
+"use client";
+
+import {
+ type ColumnDef,
+ type ColumnFiltersState,
+ type SortingState,
+ type VisibilityState,
+ flexRender,
+ getCoreRowModel,
+ getFilteredRowModel,
+ getPaginationRowModel,
+ getSortedRowModel,
+ useReactTable,
+} from "@tanstack/react-table";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "~/components/ui/table";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { useState } from "react";
+import {
+ ArrowUpDown,
+ MoreHorizontal,
+ Calendar,
+ Clock,
+ Activity,
+ Eye,
+ Video
+} from "lucide-react";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { Badge } from "~/components/ui/badge";
+import Link from "next/link";
+import { formatDistanceToNow } from "date-fns";
+
+export type AnalyticsTrial = {
+ id: string;
+ sessionNumber: number;
+ status: string;
+ createdAt: Date;
+ startedAt: Date | null;
+ completedAt: Date | null;
+ duration: number | null;
+ eventCount: number;
+ mediaCount: number;
+ experimentId: string;
+ participant: {
+ participantCode: string;
+ };
+ experiment: {
+ name: string;
+ studyId: string;
+ };
+};
+
+export const columns: ColumnDef
[] = [
+ {
+ accessorKey: "sessionNumber",
+ header: ({ column }) => {
+ return (
+ column.toggleSorting(column.getIsSorted() === "asc")}
+ >
+ Session
+
+ );
+ },
+ cell: ({ row }) => #{row.getValue("sessionNumber")}
,
+ },
+ {
+ accessorKey: "participant.participantCode",
+ header: "Participant",
+ cell: ({ row }) => (
+ {row.original.participant?.participantCode ?? "Unknown"}
+ ),
+ },
+ {
+ accessorKey: "status",
+ header: "Status",
+ cell: ({ row }) => {
+ const status = row.getValue("status") as string;
+ return (
+
+ {status.replace("_", " ")}
+
+ );
+ },
+ },
+ {
+ accessorKey: "createdAt",
+ header: ({ column }) => {
+ return (
+ column.toggleSorting(column.getIsSorted() === "asc")}
+ >
+ Date
+
+ );
+ },
+ cell: ({ row }) => {
+ const date = new Date(row.getValue("createdAt"));
+ return (
+
+ {date.toLocaleDateString()}
+ {formatDistanceToNow(date, { addSuffix: true })}
+
+ )
+ },
+ },
+ {
+ accessorKey: "duration",
+ header: "Duration",
+ cell: ({ row }) => {
+ const duration = row.getValue("duration") as number | null;
+ if (!duration) return - ;
+ const m = Math.floor(duration / 60);
+ const s = Math.floor(duration % 60);
+ return {`${m}m ${s}s`}
;
+ },
+ },
+ {
+ accessorKey: "eventCount",
+ header: "Events",
+ cell: ({ row }) => {
+ return (
+
+
+
{row.getValue("eventCount")}
+
- ;
+ return (
+
+ {count}
+
+ )
+ },
+ },
+ {
+ id: "actions",
+ cell: ({ row }) => {
+ const trial = row.original;
+ return (
+
+
+
+ Open menu
+
+
+
+ Actions
+
+
+
+
+
+
+ );
+ },
+ },
+];
+
+interface StudyAnalyticsDataTableProps {
+ data: AnalyticsTrial[];
+}
+
+export function StudyAnalyticsDataTable({ data }: StudyAnalyticsDataTableProps) {
+ const [sorting, setSorting] = useState([]);
+ const [columnFilters, setColumnFilters] = useState([]);
+ const [columnVisibility, setColumnVisibility] = useState({});
+ const [rowSelection, setRowSelection] = useState({});
+
+ const table = useReactTable({
+ data,
+ columns,
+ onSortingChange: setSorting,
+ onColumnFiltersChange: setColumnFilters,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ getFilteredRowModel: getFilteredRowModel(),
+ onColumnVisibilityChange: setColumnVisibility,
+ onRowSelectionChange: setRowSelection,
+ state: {
+ sorting,
+ columnFilters,
+ columnVisibility,
+ rowSelection,
+ },
+ });
+
+ return (
+
+
+
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => {
+ return (
+
+ {header.isPlaceholder
+ ? null
+ : flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+
+ );
+ })}
+
+ ))}
+
+
+ {table.getRowModel().rows?.length ? (
+ table.getRowModel().rows.map((row) => (
+
+ {row.getVisibleCells().map((cell) => (
+
+ {flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext()
+ )}
+
+ ))}
+
+ ))
+ ) : (
+
+
+ No results.
+
+
+ )}
+
+
+
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "}
+ {table.getFilteredRowModel().rows.length} row(s) selected.
+
+
+ table.previousPage()}
+ disabled={!table.getCanPreviousPage()}
+ >
+ Previous
+
+ table.nextPage()}
+ disabled={!table.getCanNextPage()}
+ >
+ Next
+
+
+
+
[] = [
{
id: "actions",
enableHiding: false,
- cell: ({ row }) => {
- const experiment = row.original;
-
- return (
-
-
-
- Open menu
-
-
-
- Actions
- navigator.clipboard.writeText(experiment.id)}
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- },
+ cell: ({ row }) =>
+
+
+ Open menu
+
+
+
+ Actions
+
+
+
+
+ {
+ if (confirm("Are you sure you want to delete this experiment?")) {
+ deleteMutation.mutate({ id: experiment.id });
+ }
+ }}
+ >
+
+
+
+ );
+}
+
export function ExperimentsTable() {
const { selectedStudyId } = useStudyContext();
diff --git a/src/components/experiments/experiments-columns.tsx b/src/components/experiments/experiments-columns.tsx
index 89d858f..b895e8b 100755
--- a/src/components/experiments/experiments-columns.tsx
+++ b/src/components/experiments/experiments-columns.tsx
@@ -27,6 +27,7 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";
+import { api } from "~/trpc/react";
export type Experiment = {
id: string;
@@ -78,29 +79,25 @@ const statusConfig = {
};
function ExperimentActionsCell({ experiment }: { experiment: Experiment }) {
- const handleDelete = async () => {
+ const utils = api.useUtils();
+ const deleteMutation = api.experiments.delete.useMutation({
+ onSuccess: () => {
+ toast.success("Experiment deleted successfully");
+ utils.experiments.list.invalidate();
+ },
+ onError: (error) => {
+ toast.error(`Failed to delete experiment: ${error.message}`);
+ },
+ });
+
+ const handleDelete = () => {
if (
window.confirm(`Are you sure you want to delete "${experiment.name}"?`)
) {
- try {
- // TODO: Implement delete experiment mutation
- toast.success("Experiment deleted successfully");
- } catch {
- toast.error("Failed to delete experiment");
- }
+ deleteMutation.mutate({ id: experiment.id });
}
};
- const handleCopyId = () => {
- void navigator.clipboard.writeText(experiment.id);
- toast.success("Experiment ID copied to clipboard");
- };
-
- const handleStartTrial = () => {
- // Navigate to new trial creation with this experiment pre-selected
- window.location.href = `/studies/${experiment.studyId}/trials/new?experimentId=${experiment.id}`;
- };
-
return (
@@ -111,45 +108,20 @@ function ExperimentActionsCell({ experiment }: { experiment: Experiment }) {
Actions
-
-
- {experiment.canEdit && (
-
-
- )}
-
-
-
- )}
-
-
-
-
{experiment.canDelete && (
<>
[] = [
},
enableSorting: false,
},
- {
- accessorKey: "createdAt",
- header: ({ column }) => (
-
- {formatDistanceToNow(date as Date, { addSuffix: true })}
-
- );
- },
- },
+
{
accessorKey: "updatedAt",
header: ({ column }) => (
diff --git a/src/components/participants/ConsentUploadForm.tsx b/src/components/participants/ConsentUploadForm.tsx
new file mode 100644
index 0000000..9c4c8cc
--- /dev/null
+++ b/src/components/participants/ConsentUploadForm.tsx
@@ -0,0 +1,190 @@
+"use client";
+
+import { useState } from "react";
+import { Upload, X, FileText, CheckCircle, AlertCircle, Loader2 } from "lucide-react";
+import { Button } from "~/components/ui/button";
+import { Progress } from "~/components/ui/progress";
+import { api } from "~/trpc/react";
+import { toast } from "~/components/ui/use-toast";
+import { cn } from "~/lib/utils";
+import axios from "axios";
+
+interface ConsentUploadFormProps {
+ studyId: string;
+ participantId: string;
+ consentFormId: string;
+ onSuccess: () => void;
+ onCancel: () => void;
+}
+
+export function ConsentUploadForm({
+ studyId,
+ participantId,
+ consentFormId,
+ onSuccess,
+ onCancel,
+}: ConsentUploadFormProps) {
+ const [file, setFile] = useState(null);
+ const [isUploading, setIsUploading] = useState(false);
+ const [uploadProgress, setUploadProgress] = useState(0);
+
+ // Mutations
+ const getUploadUrlMutation = api.participants.getConsentUploadUrl.useMutation();
+ const recordConsentMutation = api.participants.recordConsent.useMutation();
+
+ const handleFileChange = (e: React.ChangeEvent) => {
+ if (e.target.files && e.target.files[0]) {
+ const selectedFile = e.target.files[0];
+ // Validate size (10MB)
+ if (selectedFile.size > 10 * 1024 * 1024) {
+ toast({
+ title: "File too large",
+ description: "Maximum file size is 10MB",
+ variant: "destructive",
+ });
+ return;
+ }
+ // Validate type
+ const allowedTypes = ["application/pdf", "image/png", "image/jpeg", "image/jpg"];
+ if (!allowedTypes.includes(selectedFile.type)) {
+ toast({
+ title: "Invalid file type",
+ description: "Please upload a PDF, PNG, or JPG file",
+ variant: "destructive",
+ });
+ return;
+ }
+ setFile(selectedFile);
+ }
+ };
+
+ const handleUpload = async () => {
+ if (!file) return;
+
+ try {
+ setIsUploading(true);
+ setUploadProgress(0);
+
+ // 1. Get Presigned URL
+ const { url, key } = await getUploadUrlMutation.mutateAsync({
+ studyId,
+ participantId,
+ filename: file.name,
+ contentType: file.type,
+ size: file.size,
+ });
+
+ // 2. Upload to MinIO
+ await axios.put(url, file, {
+ headers: {
+ "Content-Type": file.type,
+ },
+ onUploadProgress: (progressEvent) => {
+ if (progressEvent.total) {
+ const percentCompleted = Math.round(
+ (progressEvent.loaded * 100) / progressEvent.total
+ );
+ setUploadProgress(percentCompleted);
+ }
+ },
+ });
+
+ // 3. Record Consent in DB
+ await recordConsentMutation.mutateAsync({
+ participantId,
+ consentFormId,
+ storagePath: key,
+ });
+
+ toast({
+ title: "Consent Recorded",
+ description: "The consent form has been uploaded and recorded successfully.",
+ });
+
+ onSuccess();
+ } catch (error) {
+ console.error("Upload failed:", error);
+ toast({
+ title: "Upload Failed",
+ description: error instanceof Error ? error.message : "An unexpected error occurred",
+ variant: "destructive",
+ });
+ setIsUploading(false);
+ }
+ };
+
+ return (
+
+ {!file ? (
+
+
+
Upload Signed Consent
+
+ Drag and drop or click to select
+
+
document.getElementById("consent-file-upload")?.click()}>
+ Select File
+
+
+ ) : (
+
+
+
+
+
+
+
{file.name}
+
+ {(file.size / 1024 / 1024).toFixed(2)} MB
+
+
+
+ {!isUploading && (
+
setFile(null)}>
+
+ )}
+
+
+ {isUploading && (
+
+
+ Uploading...
+ {uploadProgress}%
+
+
+
+ )}
+
+
+
+ Cancel
+
+
+ {isUploading ? (
+ <>
+
+
+
+ )}
+
+
+
+
+
+
+ Manage participant consent and forms.
+
+
+
+ {consentGiven ? "Consent Given" : "Not Recorded"}
+
+
+
+
+
+ {consentGiven ? (
+ <>
+
+
+ {existingConsent && (
+
+ Form: {existingConsent.consentForm.title} (v{existingConsent.consentForm.version})
+
+ )}
+
+ ) : (
+
+
+ No consent recorded for this participant.
+
+ )}
+
+
+ {consentGiven && existingConsent?.storagePath && (
+
+
+ )}
+
+
+
+
+
+
+
+
+ Upload Signed Consent Form
+
+ Upload the signed PDF or image of the consent form for this participant.
+ {activeForm && (
+
+ Active Form: {activeForm.title} (v{activeForm.version})
+
+ )}
+
+
+ {activeForm ? (
+ setIsOpen(false)}
+ />
+ ) : (
+
+ No active consent form found for this study. Please create one first.
+
+ )}
+
+
+
+
+
+
[] = [
);
},
},
- {
- accessorKey: "createdAt",
- header: ({ column }) => {
- return (
- column.toggleSorting(column.getIsSorted() === "asc")}
- >
- Created
-
- );
- },
- cell: ({ row }) => {
- const date = row.getValue("createdAt");
- return (
-
- {formatDistanceToNow(new Date(date as string | number | Date), {
- addSuffix: true,
- })}
-
- );
- },
- },
+
{
id: "actions",
enableHiding: false,
@@ -195,23 +172,12 @@ export const columns: ColumnDef[] = [
Actions
- navigator.clipboard.writeText(participant.id)}
- >
-
-
-
-
[] = [
);
},
},
- {
- accessorKey: "createdAt",
- header: ({ column }) => {
- return (
- column.toggleSorting(column.getIsSorted() === "asc")}
- >
- Created
-
- );
- },
- cell: ({ row }) => {
- const date = row.getValue("createdAt");
- if (!date)
- return Unknown ;
- return (
-
- {formatDistanceToNow(new Date(date as string | number | Date), {
- addSuffix: true,
- })}
-
- );
- },
- },
{
id: "actions",
enableHiding: false,
@@ -393,19 +367,6 @@ function ActionsCell({ row }: { row: { original: Trial } }) {
Actions
- navigator.clipboard.writeText(trial.id)}
- >
-
-
-
{trial.status === "scheduled" && (
)}
duplicateMutation.mutate({ id: trial.id })}>
-
-
[] => [
+ {
+ id: "timestamp",
+ header: "Time",
+ accessorKey: "timestamp",
+ cell: ({ row }) => {
+ const date = new Date(row.original.timestamp);
+ return (
+
+
+ {formatRelativeTime(row.original.timestamp, startTime)}
+
+
+ {date.toLocaleTimeString()}
+
+
+ );
+ },
+ },
+ {
+ accessorKey: "eventType",
+ header: "Event Type",
+ cell: ({ row }) => {
+ const type = row.getValue("eventType") as string;
+ const isError = type.includes("error");
+ const isIntervention = type.includes("intervention");
+ const isRobot = type.includes("robot");
+ const isStep = type.includes("step");
+
+ let Icon = Activity;
+ if (isError) Icon = AlertTriangle;
+ else if (isIntervention) Icon = User; // Wizard/Intervention often User
+ else if (isRobot) Icon = Bot;
+ else if (isStep) Icon = Flag;
+ else if (type.includes("note")) Icon = MessageSquare;
+ else if (type.includes("completed")) Icon = CheckCircle;
+
+ return (
+
+
+ );
+ },
+ filterFn: (row, id, value) => {
+ return value.includes(row.getValue(id));
+ },
+ },
+ {
+ accessorKey: "data",
+ header: "Details",
+ cell: ({ row }) => {
+ const data = row.original.data;
+ if (!data || Object.keys(data).length === 0) return - ;
+
+ // Simplistic view for now: JSON stringify but truncated?
+ // Or meaningful extraction based on event type.
+ return (
+
+ {JSON.stringify(data).replace(/[{""}]/g, " ").trim()}
+
+ );
+ },
+ },
+];
diff --git a/src/components/trials/analysis/events-data-table.tsx b/src/components/trials/analysis/events-data-table.tsx
new file mode 100644
index 0000000..8790612
--- /dev/null
+++ b/src/components/trials/analysis/events-data-table.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import * as React from "react";
+import { DataTable } from "~/components/ui/data-table";
+import { type TrialEvent, eventsColumns } from "./events-columns";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
+import { Input } from "~/components/ui/input";
+
+interface EventsDataTableProps {
+ data: TrialEvent[];
+ startTime?: Date;
+}
+
+export function EventsDataTable({ data, startTime }: EventsDataTableProps) {
+ const [eventTypeFilter, setEventTypeFilter] = React.useState("all");
+ const [globalFilter, setGlobalFilter] = React.useState("");
+
+ const columns = React.useMemo(() => eventsColumns(startTime), [startTime]);
+
+ // Enhanced filtering logic
+ const filteredData = React.useMemo(() => {
+ return data.filter(event => {
+ // Type filter
+ if (eventTypeFilter !== "all" && !event.eventType.includes(eventTypeFilter)) {
+ return false;
+ }
+
+ // Global text search (checks type and data)
+ if (globalFilter) {
+ const searchLower = globalFilter.toLowerCase();
+ const typeMatch = event.eventType.toLowerCase().includes(searchLower);
+ // Safe JSON stringify check
+ const dataString = event.data ? JSON.stringify(event.data).toLowerCase() : "";
+ const dataMatch = dataString.includes(searchLower);
+
+ return typeMatch || dataMatch;
+ }
+
+ return true;
+ });
+ }, [data, eventTypeFilter, globalFilter]);
+
+ // Custom Filters UI
+ const filters = (
+
+
+
+
+
+ All Events
+ Interventions
+ Robot Actions
+ Step Changes
+ Errors
+
+
+
+ );
+
+ return (
+
+ {/* We instruct DataTable to use our filtered data, but DataTable also has internal filtering.
+ Since we implemented custom external filtering for "type" dropdown and "global" search,
+ we pass the filtered data directly.
+
+ However, the shared DataTable component has a `searchKey` prop that drives an internal Input.
+ If we want to use OUR custom search input (to search JSON data), we should probably NOT use
+ DataTable's internal search or pass a custom filter.
+
+ The shared DataTable's `searchKey` only filters a specific column string value.
+ Since "data" is an object, we can't easily use the built-in single-column search.
+ So we'll implement our own search input and pass `filters={filters}` which creates
+ additional dropdowns, but we might want to REPLACE the standard search input.
+
+ Looking at `DataTable` implementation:
+ It renders `
` if `searchKey` is provided. If we don't provide `searchKey`,
+ no input is rendered, and we can put ours in `filters`.
+ */}
+
+
+
+
+
+
+
+
-
+
{/* Header Context */}
-
+
+
+
-
+
{trial.experiment.name}
-
- {trial.participant.participantCode} • Session {trial.id.slice(0, 4)}...
-
-
-
-
-
-
-
{trial.startedAt?.toLocaleDateString()} {trial.startedAt?.toLocaleTimeString()}
+
+ {trial.participant.participantCode}
+ •
+ Session {trial.id.slice(0, 4)}
- {trial.duration && (
-
- {Math.floor(trial.duration / 60)}m {trial.duration % 60}s
-
- )}
+
+
+
+
+
+ {trial.startedAt?.toLocaleDateString()} {trial.startedAt?.toLocaleTimeString()}
+
- {/* Main Resizable Workspace */}
-
-
+ {/* Metrics Header */}
+
+
+
+ Duration
+
+
+
+ {trial.duration ? (
+ {Math.floor(trial.duration / 60)}m {trial.duration % 60}s
+ ) : (
+ "--:--"
+ )}
+
+ Total session time
+
+
- {/* LEFT: Video & Timeline */}
-
-
- {/* Top: Video Player */}
-
- {videoUrl ? (
-
- ) : (
-
-
-
No recording available.
-
+
+
+ Robot Actions
+
+
+ {robotActionCount}
+ Executed autonomous behaviors
+
+
-
+
+ Interventions
+
+
+ {interventionCount}
+ Manual wizard overrides
+
+
- {/* Bottom: Timeline Track */}
-
-
-
-
Timeline Track
+
+
+ Completeness
+
+
+
+ {trial.status === 'completed' ? '100%' : 'Incomplete'}
+
+
+
+
+
+
+
+
+ {/* TOP: Video & Timeline */}
+
+
+ {videoUrl ? (
+
-
-
-
+ ) : (
+
+
+
+
No playback media available
+
+ There is no video recording associated with this trial session.
+
-
-
+ )}
+
+
+ {/* Timeline Control */}
+
+
-
+
- {/* RIGHT: Logs & Metrics */}
-
- {/* Metrics Strip */}
-
-
-
- Interventions
-
- {events.filter(e => e.eventType.includes("intervention")).length}
-
-
-
-
-
- Status
-
- {trial.status === 'completed' ? 'PASS' : 'INC'}
-
-
-
-
-
-
- {events.length} Events
-
-
- {/* Scrollable Event List */}
-
-
-
- {events.map((event, i) => (
-
-
- {formatTime(new Date(event.timestamp).getTime() - (trial.startedAt?.getTime() ?? 0))}
-
-
-
-
- {event.eventType.replace(/_/g, " ")}
-
-
- {!!event.data && (
-
- {JSON.stringify(event.data as object, null, 1).replace(/"/g, '').replace(/[{}]/g, '').trim()}
-
- )}
-
-
- ))}
- {events.length === 0 && (
-
- No events found in log.
-
- )}
-
+ {/* BOTTOM: Events Table */}
+
+
+
+
Event Log
+
+
{events.length} Events
+
+ ({ ...e, timestamp: new Date(e.timestamp) }))}
+ startTime={trial.startedAt ?? undefined}
+ />
+
+