mirror of
https://github.com/soconnor0919/hristudio.git
synced 2026-03-23 19:27:51 -04:00
486 lines
17 KiB
TypeScript
Executable File
486 lines
17 KiB
TypeScript
Executable File
"use client";
|
|
|
|
import * as React from "react";
|
|
import Link from "next/link";
|
|
import { format } from "date-fns";
|
|
import { formatDistanceToNow } from "date-fns";
|
|
import {
|
|
Activity,
|
|
ArrowRight,
|
|
Calendar,
|
|
CheckCircle,
|
|
CheckCircle2,
|
|
Clock,
|
|
FlaskConical,
|
|
HelpCircle,
|
|
LayoutDashboard,
|
|
MoreHorizontal,
|
|
Play,
|
|
PlayCircle,
|
|
Plus,
|
|
Search,
|
|
Settings,
|
|
Users,
|
|
Radio,
|
|
Gamepad2,
|
|
AlertTriangle,
|
|
Bot,
|
|
User,
|
|
MessageSquare,
|
|
} from "lucide-react";
|
|
|
|
import { Button } from "~/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "~/components/ui/card";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "~/components/ui/dropdown-menu";
|
|
import { Progress } from "~/components/ui/progress";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "~/components/ui/select";
|
|
import { Badge } from "~/components/ui/badge";
|
|
import { ScrollArea } from "~/components/ui/scroll-area";
|
|
import { api } from "~/trpc/react";
|
|
import { useTour } from "~/components/onboarding/TourProvider";
|
|
import { useSession } from "next-auth/react";
|
|
|
|
export default function DashboardPage() {
|
|
const { startTour } = useTour();
|
|
const { data: session } = useSession();
|
|
const [studyFilter, setStudyFilter] = React.useState<string | null>(null);
|
|
|
|
// --- Data Fetching ---
|
|
const { data: userStudiesData } = api.studies.list.useQuery({
|
|
memberOnly: true,
|
|
limit: 100,
|
|
});
|
|
const userStudies = userStudiesData?.studies ?? [];
|
|
|
|
const { data: stats } = api.dashboard.getStats.useQuery({
|
|
studyId: studyFilter ?? undefined,
|
|
});
|
|
|
|
const { data: liveTrials } = api.dashboard.getLiveTrials.useQuery(
|
|
{ studyId: studyFilter ?? undefined },
|
|
{ refetchInterval: 5000 },
|
|
);
|
|
|
|
const { data: recentActivity } = api.dashboard.getRecentActivity.useQuery({
|
|
limit: 15,
|
|
studyId: studyFilter ?? undefined,
|
|
});
|
|
|
|
const { data: studyProgress } = api.dashboard.getStudyProgress.useQuery({
|
|
limit: 5,
|
|
studyId: studyFilter ?? undefined,
|
|
});
|
|
|
|
const userName = session?.user?.name ?? "Researcher";
|
|
|
|
const getWelcomeMessage = () => {
|
|
const hour = new Date().getHours();
|
|
let greeting = "Good evening";
|
|
if (hour < 12) greeting = "Good morning";
|
|
else if (hour < 18) greeting = "Good afternoon";
|
|
|
|
return `${greeting}, ${userName.split(" ")[0]}`;
|
|
};
|
|
|
|
return (
|
|
<div className="animate-in fade-in space-y-8 duration-500">
|
|
{/* Header Section */}
|
|
<div
|
|
id="dashboard-header"
|
|
className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between"
|
|
>
|
|
<div>
|
|
<h1 className="text-foreground text-3xl font-bold tracking-tight">
|
|
{getWelcomeMessage()}
|
|
</h1>
|
|
<p className="text-muted-foreground">
|
|
Here's what's happening with your research today.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => startTour("dashboard")}
|
|
title="Start Tour"
|
|
>
|
|
<HelpCircle className="h-5 w-5" />
|
|
</Button>
|
|
<Select
|
|
value={studyFilter ?? "all"}
|
|
onValueChange={(value) =>
|
|
setStudyFilter(value === "all" ? null : value)
|
|
}
|
|
>
|
|
<SelectTrigger className="bg-background w-[200px]">
|
|
<SelectValue placeholder="All Studies" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All Studies</SelectItem>
|
|
{userStudies.map((study) => (
|
|
<SelectItem key={study.id} value={study.id}>
|
|
{study.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Button id="tour-new-study" asChild>
|
|
<Link href="/studies/new">
|
|
<Plus className="mr-2 h-4 w-4" /> New Study
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Stats Grid */}
|
|
<div
|
|
id="tour-dashboard-stats"
|
|
className="grid gap-4 md:grid-cols-2 lg:grid-cols-4"
|
|
>
|
|
<StatsCard
|
|
title="Active Trials"
|
|
value={stats?.activeTrials ?? 0}
|
|
icon={Activity}
|
|
description="Currently running sessions"
|
|
iconColor="text-emerald-500"
|
|
/>
|
|
<StatsCard
|
|
title="Completed Today"
|
|
value={stats?.completedToday ?? 0}
|
|
icon={CheckCircle}
|
|
description="Successful completions"
|
|
iconColor="text-blue-500"
|
|
/>
|
|
<StatsCard
|
|
title="Scheduled"
|
|
value={stats?.scheduledTrials ?? 0}
|
|
icon={Calendar}
|
|
description="Upcoming sessions"
|
|
iconColor="text-violet-500"
|
|
/>
|
|
<StatsCard
|
|
title="Total Interventions"
|
|
value={stats?.totalInterventions ?? 0}
|
|
icon={Gamepad2}
|
|
description="Wizard manual overrides"
|
|
iconColor="text-orange-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Action Center & Recent Activity */}
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
|
|
{/* Quick Actions Card */}
|
|
<Card className="from-primary/5 to-background border-primary/20 col-span-3 h-fit bg-gradient-to-br">
|
|
<CardHeader>
|
|
<CardTitle>Quick Actions</CardTitle>
|
|
<CardDescription>Common tasks to get you started</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-4">
|
|
<Button
|
|
variant="outline"
|
|
className="border-primary/20 hover:border-primary/50 hover:bg-primary/5 group h-auto justify-start px-4 py-4"
|
|
asChild
|
|
>
|
|
<Link href="/studies/new">
|
|
<div className="bg-primary/10 group-hover:bg-primary/20 mr-4 rounded-full p-2 transition-colors">
|
|
<FlaskConical className="text-primary h-5 w-5" />
|
|
</div>
|
|
<div className="text-left">
|
|
<div className="font-semibold">Create New Study</div>
|
|
<div className="text-muted-foreground text-xs font-normal">
|
|
Design a new experiment protocol
|
|
</div>
|
|
</div>
|
|
<ArrowRight className="text-muted-foreground group-hover:text-primary ml-auto h-4 w-4 opacity-0 transition-all group-hover:opacity-100" />
|
|
</Link>
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outline"
|
|
className="group h-auto justify-start px-4 py-4"
|
|
asChild
|
|
>
|
|
<Link href="/studies">
|
|
<div className="bg-secondary mr-4 rounded-full p-2">
|
|
<Search className="text-foreground h-5 w-5" />
|
|
</div>
|
|
<div className="text-left">
|
|
<div className="font-semibold">Browse Studies</div>
|
|
<div className="text-muted-foreground text-xs font-normal">
|
|
Find and manage existing studies
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outline"
|
|
className="group h-auto justify-start px-4 py-4"
|
|
asChild
|
|
>
|
|
<Link href="/trials">
|
|
<div className="mr-4 rounded-full bg-emerald-500/10 p-2">
|
|
<Activity className="h-5 w-5 text-emerald-600" />
|
|
</div>
|
|
<div className="text-left">
|
|
<div className="font-semibold">Monitor Active Trials</div>
|
|
<div className="text-muted-foreground text-xs font-normal">
|
|
Jump into the Wizard Interface
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Recent Activity Card */}
|
|
<Card
|
|
id="tour-recent-activity"
|
|
className="border-muted/40 col-span-4 shadow-sm"
|
|
>
|
|
<CardHeader>
|
|
<CardTitle>Recent Activity</CardTitle>
|
|
<CardDescription>
|
|
Your latest interactions across the platform
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ScrollArea className="h-[400px] pr-4">
|
|
<div className="space-y-4">
|
|
{recentActivity?.map((activity) => {
|
|
let eventColor = "bg-primary/30 ring-background";
|
|
let Icon = Activity;
|
|
if (activity.type === "trial_started") {
|
|
eventColor = "bg-blue-500 ring-blue-100 dark:ring-blue-900";
|
|
Icon = PlayCircle;
|
|
} else if (activity.type === "trial_completed") {
|
|
eventColor =
|
|
"bg-green-500 ring-green-100 dark:ring-green-900";
|
|
Icon = CheckCircle;
|
|
} else if (activity.type === "error") {
|
|
eventColor = "bg-red-500 ring-red-100 dark:ring-red-900";
|
|
Icon = AlertTriangle;
|
|
} else if (activity.type === "intervention") {
|
|
eventColor =
|
|
"bg-orange-500 ring-orange-100 dark:ring-orange-900";
|
|
Icon = Gamepad2;
|
|
} else if (activity.type === "annotation") {
|
|
eventColor =
|
|
"bg-yellow-500 ring-yellow-100 dark:ring-yellow-900";
|
|
Icon = MessageSquare;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
key={activity.id}
|
|
className="border-muted-foreground/20 relative border-l pb-4 pl-6 last:border-0"
|
|
>
|
|
<span
|
|
className={`absolute top-0 left-[-9px] flex h-4 w-4 items-center justify-center rounded-full ring-4 ${eventColor}`}
|
|
>
|
|
<Icon className="h-2.5 w-2.5 text-white" />
|
|
</span>
|
|
<div className="mb-0.5 text-sm leading-none font-medium">
|
|
{activity.title}
|
|
</div>
|
|
<div className="text-muted-foreground mb-1 text-xs">
|
|
{activity.description}
|
|
</div>
|
|
<div className="text-muted-foreground/70 font-mono text-[10px] uppercase">
|
|
{formatDistanceToNow(new Date(activity.time), {
|
|
addSuffix: true,
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
{!recentActivity?.length && (
|
|
<div className="text-muted-foreground flex flex-col items-center justify-center py-8 text-center">
|
|
<Clock className="mb-3 h-10 w-10 opacity-20" />
|
|
<p>No recent activity recorded.</p>
|
|
<p className="mt-1 text-xs">
|
|
Start a trial to see experiment events stream here.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</ScrollArea>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
|
|
{/* Live Trials */}
|
|
<Card
|
|
id="tour-live-trials"
|
|
className={`${liveTrials && liveTrials.length > 0 ? "border-primary bg-primary/5 shadow-sm" : "border-muted/40"} col-span-4 transition-colors duration-500`}
|
|
>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="flex items-center gap-2">
|
|
Live Sessions
|
|
{liveTrials && liveTrials.length > 0 && (
|
|
<span className="relative flex h-3 w-3">
|
|
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75"></span>
|
|
<span className="relative inline-flex h-3 w-3 rounded-full bg-red-500"></span>
|
|
</span>
|
|
)}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Currently running trials in the Wizard interface
|
|
</CardDescription>
|
|
</div>
|
|
<Button variant="ghost" size="sm" asChild>
|
|
<Link href="/trials">
|
|
View All <ArrowRight className="ml-2 h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{!liveTrials?.length ? (
|
|
<div className="border-muted-foreground/30 animate-in fade-in-50 bg-background/50 flex h-[150px] flex-col items-center justify-center rounded-md border border-dashed text-center">
|
|
<Radio className="text-muted-foreground/50 mb-2 h-8 w-8" />
|
|
<p className="text-muted-foreground text-sm">
|
|
No trials are currently running.
|
|
</p>
|
|
<Button variant="link" size="sm" asChild className="mt-1">
|
|
<Link href="/trials">Start a Trial</Link>
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{liveTrials.map((trial) => (
|
|
<div
|
|
key={trial.id}
|
|
className="border-primary/20 bg-background flex items-center justify-between rounded-lg border p-3 shadow-sm transition-all duration-200 hover:shadow"
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-red-100 text-red-600 dark:bg-red-900/40 dark:text-red-400">
|
|
<Radio className="h-5 w-5 animate-pulse" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium">
|
|
{trial.participantCode}
|
|
<span className="text-muted-foreground ml-2 text-xs font-normal">
|
|
• {trial.experimentName}
|
|
</span>
|
|
</p>
|
|
<div className="text-muted-foreground flex items-center gap-2 text-xs">
|
|
<Clock className="h-3 w-3" />
|
|
Started{" "}
|
|
{trial.startedAt
|
|
? formatDistanceToNow(new Date(trial.startedAt), {
|
|
addSuffix: true,
|
|
})
|
|
: "just now"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
className="bg-primary hover:bg-primary/90 gap-2"
|
|
asChild
|
|
>
|
|
<Link href={`/wizard/${trial.id}`}>
|
|
<Play className="h-3.5 w-3.5" /> Spectate / Jump In
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Study Progress */}
|
|
<Card className="border-muted/40 col-span-3 shadow-sm">
|
|
<CardHeader>
|
|
<CardTitle>Study Progress</CardTitle>
|
|
<CardDescription>
|
|
Completion tracking for active studies
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{studyProgress?.map((study) => (
|
|
<div key={study.id} className="space-y-2">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<div className="font-medium">{study.name}</div>
|
|
<div className="text-muted-foreground">
|
|
{study.participants} / {study.totalParticipants}{" "}
|
|
Participants
|
|
</div>
|
|
</div>
|
|
<Progress value={study.progress} className="h-2" />
|
|
</div>
|
|
))}
|
|
{!studyProgress?.length && (
|
|
<p className="text-muted-foreground py-4 text-center text-sm">
|
|
No active studies to track.
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StatsCard({
|
|
title,
|
|
value,
|
|
icon: Icon,
|
|
description,
|
|
trend,
|
|
iconColor,
|
|
}: {
|
|
title: string;
|
|
value: string | number;
|
|
icon: React.ElementType;
|
|
description: string;
|
|
trend?: string;
|
|
iconColor?: string;
|
|
}) {
|
|
return (
|
|
<Card className="border-muted/40 hover:border-primary/20 shadow-sm transition-all duration-200 hover:shadow-md">
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">{title}</CardTitle>
|
|
<Icon className={`h-4 w-4 ${iconColor || "text-muted-foreground"}`} />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{value}</div>
|
|
<p className="text-muted-foreground text-xs">
|
|
{description}
|
|
{trend && (
|
|
<span className="ml-1 font-medium text-green-600 dark:text-green-400">
|
|
{trend}
|
|
</span>
|
|
)}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|