mirror of
https://github.com/soconnor0919/hristudio.git
synced 2025-12-11 14:44:44 -05:00
Sean O'Connor
433c1c4517
- Remove outdated root-level documentation files - Delete IMPLEMENTATION_STATUS.md, WORK_IN_PROGRESS.md, UI_IMPROVEMENTS_SUMMARY.md, CLAUDE.md - Reorganize documentation into docs/ folder - Move UNIFIED_EDITOR_EXPERIENCES.md → docs/unified-editor-experiences.md - Move DATATABLE_MIGRATION_PROGRESS.md → docs/datatable-migration-progress.md - Move SEED_SCRIPT_README.md → docs/seed-script-readme.md - Create comprehensive new documentation - Add docs/implementation-status.md with production readiness assessment - Add docs/work-in-progress.md with active development tracking - Add docs/development-achievements.md consolidating all major accomplishments - Update documentation hub - Enhance docs/README.md with complete 13-document structure - Organize into logical categories: Core, Status, Achievements - Provide clear navigation and purpose for each document Features: - 73% code reduction achievement through unified editor experiences - Complete DataTable migration with enterprise features - Comprehensive seed database with realistic research scenarios - Production-ready status with 100% backend, 95% frontend completion - Clean documentation architecture supporting future development Breaking Changes: None - documentation restructuring only Migration: Documentation moved to docs/ folder, no code changes required
574 lines
20 KiB
TypeScript
574 lines
20 KiB
TypeScript
import { format, formatDistanceToNow } from "date-fns";
|
|
import {
|
|
Activity,
|
|
AlertTriangle,
|
|
ArrowLeft,
|
|
BarChart3,
|
|
Bot,
|
|
CheckCircle,
|
|
Clock,
|
|
Download,
|
|
Eye,
|
|
Play,
|
|
Settings,
|
|
Share,
|
|
Target,
|
|
Timer,
|
|
User,
|
|
Users,
|
|
XCircle,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
import { notFound, redirect } from "next/navigation";
|
|
import { Alert, AlertDescription } from "~/components/ui/alert";
|
|
import { Badge } from "~/components/ui/badge";
|
|
import { Button } from "~/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
|
import { Progress } from "~/components/ui/progress";
|
|
import { Separator } from "~/components/ui/separator";
|
|
import { auth } from "~/server/auth";
|
|
import { api } from "~/trpc/server";
|
|
|
|
interface TrialDetailPageProps {
|
|
params: Promise<{
|
|
trialId: string;
|
|
}>;
|
|
searchParams: Promise<{
|
|
error?: string;
|
|
}>;
|
|
}
|
|
|
|
export default async function TrialDetailPage({
|
|
params,
|
|
searchParams,
|
|
}: TrialDetailPageProps) {
|
|
const session = await auth();
|
|
|
|
if (!session) {
|
|
redirect("/auth/signin");
|
|
}
|
|
|
|
const { trialId } = await params;
|
|
const { error } = await searchParams;
|
|
let trial;
|
|
try {
|
|
trial = await api.trials.get({ id: trialId });
|
|
} catch (_error) {
|
|
notFound();
|
|
}
|
|
|
|
const userRole = session.user.roles?.[0]?.role;
|
|
const canControl =
|
|
userRole && ["wizard", "researcher", "administrator"].includes(userRole);
|
|
|
|
const statusConfig = {
|
|
scheduled: {
|
|
label: "Scheduled",
|
|
className: "bg-blue-100 text-blue-800",
|
|
icon: Clock,
|
|
},
|
|
in_progress: {
|
|
label: "In Progress",
|
|
className: "bg-green-100 text-green-800",
|
|
icon: Activity,
|
|
},
|
|
completed: {
|
|
label: "Completed",
|
|
className: "bg-gray-100 text-gray-800",
|
|
icon: CheckCircle,
|
|
},
|
|
aborted: {
|
|
label: "Aborted",
|
|
className: "bg-red-100 text-red-800",
|
|
icon: XCircle,
|
|
},
|
|
failed: {
|
|
label: "Failed",
|
|
className: "bg-red-100 text-red-800",
|
|
icon: AlertTriangle,
|
|
},
|
|
};
|
|
|
|
const currentStatus = statusConfig[trial.status];
|
|
const StatusIcon = currentStatus.icon;
|
|
|
|
// Calculate trial duration
|
|
const duration =
|
|
trial.startedAt && trial.completedAt
|
|
? Math.floor(
|
|
(new Date(trial.completedAt).getTime() -
|
|
new Date(trial.startedAt).getTime()) /
|
|
1000 /
|
|
60,
|
|
)
|
|
: trial.startedAt
|
|
? Math.floor(
|
|
(Date.now() - new Date(trial.startedAt).getTime()) / 1000 / 60,
|
|
)
|
|
: null;
|
|
|
|
// Mock experiment steps - in real implementation, fetch from experiment API
|
|
const experimentSteps: any[] = [];
|
|
const stepTypes = experimentSteps.reduce(
|
|
(acc: Record<string, number>, step: any) => {
|
|
acc[step.type] = (acc[step.type] || 0) + 1;
|
|
return acc;
|
|
},
|
|
{},
|
|
);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-50">
|
|
{/* Header */}
|
|
<div className="border-b border-slate-200 bg-white px-6 py-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
<Button variant="ghost" size="sm" asChild>
|
|
<Link href="/trials">
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
Back to Trials
|
|
</Link>
|
|
</Button>
|
|
<Separator orientation="vertical" className="h-6" />
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-slate-900">
|
|
Trial Details
|
|
</h1>
|
|
<p className="mt-1 text-sm text-slate-600">
|
|
{trial.experiment.name} • Participant:{" "}
|
|
{trial.participant.participantCode}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-3">
|
|
<Badge className={currentStatus.className} variant="secondary">
|
|
<StatusIcon className="mr-1 h-3 w-3" />
|
|
{currentStatus.label}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Error Alert */}
|
|
{error && (
|
|
<div className="px-6 pt-4">
|
|
<Alert variant="destructive">
|
|
<AlertDescription>
|
|
{error === "trial_not_active" &&
|
|
"This trial is not currently active for wizard control."}
|
|
{error === "insufficient_permissions" &&
|
|
"You don't have permission to access the wizard interface."}
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-6 p-6">
|
|
{/* Quick Actions */}
|
|
<div className="flex items-center space-x-3">
|
|
{trial.status === "scheduled" && canControl && (
|
|
<Button asChild>
|
|
<Link href={`/trials/${trial.id}/wizard`}>
|
|
<Play className="mr-2 h-4 w-4" />
|
|
Start Trial
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
{trial.status === "in_progress" && (
|
|
<Button asChild>
|
|
<Link href={`/trials/${trial.id}/wizard`}>
|
|
<Eye className="mr-2 h-4 w-4" />
|
|
Wizard Interface
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
{trial.status === "completed" && (
|
|
<Button asChild>
|
|
<Link href={`/trials/${trial.id}/analysis`}>
|
|
<BarChart3 className="mr-2 h-4 w-4" />
|
|
View Analysis
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
<Button variant="outline" asChild>
|
|
<Link href={`/experiments/${trial.experiment.id}/designer`}>
|
|
<Settings className="mr-2 h-4 w-4" />
|
|
View Experiment
|
|
</Link>
|
|
</Button>
|
|
<Button variant="outline">
|
|
<Share className="mr-2 h-4 w-4" />
|
|
Share
|
|
</Button>
|
|
<Button variant="outline">
|
|
<Download className="mr-2 h-4 w-4" />
|
|
Export Data
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
|
{/* Main Content */}
|
|
<div className="space-y-6 lg:col-span-2">
|
|
{/* Trial Overview */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center space-x-2">
|
|
<Target className="h-5 w-5" />
|
|
<span>Trial Overview</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600">
|
|
Trial ID
|
|
</label>
|
|
<p className="font-mono text-sm">{trial.id}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600">
|
|
Status
|
|
</label>
|
|
<div className="mt-1 flex items-center space-x-2">
|
|
<Badge
|
|
className={currentStatus.className}
|
|
variant="secondary"
|
|
>
|
|
<StatusIcon className="mr-1 h-3 w-3" />
|
|
{currentStatus.label}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600">
|
|
Scheduled
|
|
</label>
|
|
<p className="text-sm">
|
|
{trial.startedAt
|
|
? format(trial.startedAt, "PPP 'at' p")
|
|
: "Not scheduled"}
|
|
</p>
|
|
</div>
|
|
{trial.startedAt && (
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600">
|
|
Started
|
|
</label>
|
|
<p className="text-sm">
|
|
{format(trial.startedAt, "PPP 'at' p")}
|
|
</p>
|
|
<p className="text-xs text-slate-500">
|
|
{formatDistanceToNow(trial.startedAt, {
|
|
addSuffix: true,
|
|
})}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{trial.completedAt && (
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600">
|
|
Completed
|
|
</label>
|
|
<p className="text-sm">
|
|
{format(trial.completedAt, "PPP 'at' p")}
|
|
</p>
|
|
<p className="text-xs text-slate-500">
|
|
{formatDistanceToNow(trial.completedAt, {
|
|
addSuffix: true,
|
|
})}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{duration !== null && (
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600">
|
|
Duration
|
|
</label>
|
|
<div className="flex items-center space-x-1">
|
|
<Timer className="h-3 w-3 text-slate-500" />
|
|
<span className="text-sm">{duration} minutes</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{trial.notes && (
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600">
|
|
Notes
|
|
</label>
|
|
<p className="mt-1 text-sm text-slate-700">{trial.notes}</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Experiment Details */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center space-x-2">
|
|
<Bot className="h-5 w-5" />
|
|
<span>Experiment Protocol</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h3 className="font-medium text-slate-900">
|
|
{trial.experiment.name}
|
|
</h3>
|
|
{trial.experiment.description && (
|
|
<p className="mt-1 text-sm text-slate-600">
|
|
{trial.experiment.description}
|
|
</p>
|
|
)}
|
|
<div className="mt-2 flex items-center space-x-4 text-sm text-slate-500">
|
|
<Link
|
|
href={`/studies/${trial.experiment.studyId}`}
|
|
className="text-blue-600 hover:text-blue-800"
|
|
>
|
|
Study Details
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<Button variant="outline" size="sm" asChild>
|
|
<Link href={`/experiments/${trial.experiment.id}/designer`}>
|
|
<Eye className="mr-1 h-3 w-3" />
|
|
View
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* Experiment Steps Summary */}
|
|
<div>
|
|
<h4 className="mb-3 font-medium text-slate-900">
|
|
Protocol Summary
|
|
</h4>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600">
|
|
Total Steps
|
|
</label>
|
|
<p className="text-lg font-semibold">
|
|
{experimentSteps.length}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600">
|
|
Estimated Duration
|
|
</label>
|
|
<p className="text-lg font-semibold">
|
|
{Math.round(
|
|
experimentSteps.reduce(
|
|
(sum: number, step: any) =>
|
|
sum + (step.duration || 0),
|
|
0,
|
|
) / 60,
|
|
)}{" "}
|
|
min
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{Object.keys(stepTypes).length > 0 && (
|
|
<div className="mt-4">
|
|
<label className="mb-2 block text-sm font-medium text-slate-600">
|
|
Step Types
|
|
</label>
|
|
<div className="flex flex-wrap gap-2">
|
|
{Object.entries(stepTypes).map(([type, count]) => (
|
|
<Badge
|
|
key={type}
|
|
variant="outline"
|
|
className="text-xs"
|
|
>
|
|
{type.replace(/_/g, " ")}: {String(count)}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Trial Progress */}
|
|
{trial.status === "in_progress" && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center space-x-2">
|
|
<Activity className="h-5 w-5" />
|
|
<span>Current Progress</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span>Trial Progress</span>
|
|
<span>Step 1 of {experimentSteps.length}</span>
|
|
</div>
|
|
<Progress
|
|
value={(1 / experimentSteps.length) * 100}
|
|
className="h-2"
|
|
/>
|
|
<div className="text-sm text-slate-600">
|
|
Currently executing the first step of the experiment
|
|
protocol.
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div className="space-y-6">
|
|
{/* Participant Info */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center space-x-2">
|
|
<User className="h-5 w-5" />
|
|
<span>Participant</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600">
|
|
Participant Code
|
|
</label>
|
|
<p className="font-mono text-sm">
|
|
{trial.participant.participantCode}
|
|
</p>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div className="flex items-center space-x-2 text-sm text-green-600">
|
|
<CheckCircle className="h-4 w-4" />
|
|
<span>Consent verified</span>
|
|
</div>
|
|
|
|
<Button variant="outline" size="sm" className="w-full">
|
|
<Eye className="mr-1 h-3 w-3" />
|
|
View Details
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Wizard Assignment */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center space-x-2">
|
|
<Users className="h-5 w-5" />
|
|
<span>Team</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="text-sm text-slate-500">No wizard assigned</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600">
|
|
Your Role
|
|
</label>
|
|
<Badge variant="outline" className="mt-1 text-xs">
|
|
{userRole || "Observer"}
|
|
</Badge>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Quick Stats */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center space-x-2">
|
|
<BarChart3 className="h-5 w-5" />
|
|
<span>Statistics</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="grid grid-cols-2 gap-3 text-center">
|
|
<div>
|
|
<div className="text-lg font-semibold text-blue-600">0</div>
|
|
<div className="text-xs text-slate-600">Events</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-lg font-semibold text-green-600">
|
|
0
|
|
</div>
|
|
<div className="text-xs text-slate-600">Media</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-lg font-semibold text-purple-600">
|
|
0
|
|
</div>
|
|
<div className="text-xs text-slate-600">Annotations</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-lg font-semibold text-orange-600">
|
|
0
|
|
</div>
|
|
<div className="text-xs text-slate-600">Interventions</div>
|
|
</div>
|
|
</div>
|
|
|
|
{trial.status === "completed" && (
|
|
<>
|
|
<Separator />
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full"
|
|
asChild
|
|
>
|
|
<Link href={`/trials/${trial.id}/analysis`}>
|
|
<BarChart3 className="mr-1 h-3 w-3" />
|
|
View Full Analysis
|
|
</Link>
|
|
</Button>
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Recent Activity */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center space-x-2">
|
|
<Clock className="h-5 w-5" />
|
|
<span>Recent Activity</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="py-4 text-center text-sm text-slate-500">
|
|
No recent activity
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Generate metadata for the page
|
|
export async function generateMetadata({ params }: TrialDetailPageProps) {
|
|
try {
|
|
const { trialId } = await params;
|
|
const trial = await api.trials.get({ id: trialId });
|
|
return {
|
|
title: `${trial.experiment.name} - Trial ${trial.participant.participantCode} | HRIStudio`,
|
|
description: `Trial details for ${trial.experiment.name} with participant ${trial.participant.participantCode}`,
|
|
};
|
|
} catch {
|
|
return {
|
|
title: "Trial Details | HRIStudio",
|
|
description: "View trial information and control wizard interface",
|
|
};
|
|
}
|
|
}
|