mirror of
https://github.com/soconnor0919/hristudio.git
synced 2026-02-04 23:46:32 -05:00
314 lines
11 KiB
TypeScript
Executable File
314 lines
11 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,
|
|
Bot,
|
|
Calendar,
|
|
CheckCircle2,
|
|
Clock,
|
|
LayoutDashboard,
|
|
MoreHorizontal,
|
|
Play,
|
|
PlayCircle,
|
|
Plus,
|
|
Settings,
|
|
Users,
|
|
} 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";
|
|
|
|
export default function DashboardPage() {
|
|
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: scheduledTrials } = api.trials.list.useQuery({
|
|
studyId: studyFilter ?? undefined,
|
|
status: "scheduled",
|
|
limit: 5,
|
|
});
|
|
|
|
const { data: recentActivity } = api.dashboard.getRecentActivity.useQuery({
|
|
limit: 10,
|
|
studyId: studyFilter ?? undefined,
|
|
});
|
|
|
|
const { data: studyProgress } = api.dashboard.getStudyProgress.useQuery({
|
|
limit: 5,
|
|
studyId: studyFilter ?? undefined,
|
|
});
|
|
|
|
return (
|
|
<div className="flex flex-col space-y-8 animate-in fade-in duration-500">
|
|
{/* Header Section */}
|
|
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight text-foreground">Dashboard</h1>
|
|
<p className="text-muted-foreground">
|
|
Overview of your research activities and upcoming tasks.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Select
|
|
value={studyFilter ?? "all"}
|
|
onValueChange={(value) =>
|
|
setStudyFilter(value === "all" ? null : value)
|
|
}
|
|
>
|
|
<SelectTrigger className="w-[200px] bg-background">
|
|
<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 asChild>
|
|
<Link href="/studies/new">
|
|
<Plus className="mr-2 h-4 w-4" /> New Study
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Cards */}
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
<StatsCard
|
|
title="Total Participants"
|
|
value={stats?.totalParticipants ?? 0}
|
|
icon={Users}
|
|
description="Across all studies"
|
|
trend="+2 this week"
|
|
/>
|
|
<StatsCard
|
|
title="Active Trials"
|
|
value={stats?.activeTrials ?? 0}
|
|
icon={Activity}
|
|
description="Currently in progress"
|
|
|
|
/>
|
|
<StatsCard
|
|
title="Completed Trials"
|
|
value={stats?.completedToday ?? 0}
|
|
icon={CheckCircle2}
|
|
description="Completed today"
|
|
/>
|
|
<StatsCard
|
|
title="Scheduled"
|
|
value={stats?.scheduledTrials ?? 0}
|
|
icon={Calendar}
|
|
description="Upcoming sessions"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
|
|
|
|
{/* Main Column: Scheduled Trials & Study Progress */}
|
|
<div className="col-span-4 space-y-4">
|
|
|
|
{/* Scheduled Trials */}
|
|
<Card className="col-span-4 border-muted/40 shadow-sm">
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle>Upcoming Sessions</CardTitle>
|
|
<CardDescription>
|
|
You have {scheduledTrials?.length ?? 0} scheduled trials coming up.
|
|
</CardDescription>
|
|
</div>
|
|
<Button variant="ghost" size="sm" asChild>
|
|
<Link href="/trials?status=scheduled">View All <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{!scheduledTrials?.length ? (
|
|
<div className="flex h-[150px] flex-col items-center justify-center rounded-md border border-dashed text-center animate-in fade-in-50">
|
|
<Calendar className="h-8 w-8 text-muted-foreground/50" />
|
|
<p className="mt-2 text-sm text-muted-foreground">No scheduled trials found.</p>
|
|
<Button variant="link" size="sm" asChild className="mt-1">
|
|
<Link href="/trials/new">Schedule a Trial</Link>
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{scheduledTrials.map((trial) => (
|
|
<div key={trial.id} className="flex items-center justify-between rounded-lg border p-3 hover:bg-muted/50 transition-colors">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400">
|
|
<Calendar className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-sm">
|
|
{trial.participant.participantCode}
|
|
<span className="ml-2 text-muted-foreground font-normal text-xs">• {trial.experiment.name}</span>
|
|
</p>
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
|
<Clock className="h-3 w-3" />
|
|
{trial.scheduledAt ? format(trial.scheduledAt, "MMM d, h:mm a") : "Unscheduled"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Button size="sm" className="gap-2" asChild>
|
|
<Link href={`/wizard/${trial.id}`}>
|
|
<Play className="h-3.5 w-3.5" /> Start
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Study Progress */}
|
|
<Card className="border-muted/40 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-sm text-muted-foreground text-center py-4">No active studies to track.</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
</div>
|
|
|
|
{/* Side Column: Recent Activity & Quick Actions */}
|
|
<div className="col-span-3 space-y-4">
|
|
{/* Quick Actions */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<Button variant="outline" className="h-24 flex-col gap-2 hover:border-primary/50 hover:bg-primary/5" asChild>
|
|
<Link href="/experiments/new">
|
|
<Bot className="h-6 w-6 mb-1" />
|
|
<span>New Experim.</span>
|
|
</Link>
|
|
</Button>
|
|
<Button variant="outline" className="h-24 flex-col gap-2 hover:border-primary/50 hover:bg-primary/5" asChild>
|
|
<Link href="/trials/new">
|
|
<PlayCircle className="h-6 w-6 mb-1" />
|
|
<span>Run Trial</span>
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Recent Activity */}
|
|
<Card className="border-muted/40 shadow-sm h-full">
|
|
<CardHeader>
|
|
<CardTitle>Recent Activity</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ScrollArea className="h-[400px] pr-4">
|
|
<div className="space-y-4">
|
|
{recentActivity?.map((activity) => (
|
|
<div key={activity.id} className="relative pl-4 pb-1 border-l last:border-0 border-muted-foreground/20">
|
|
<span className="absolute left-[-5px] top-1 h-2.5 w-2.5 rounded-full bg-primary/30 ring-4 ring-background" />
|
|
<div className="mb-1 text-sm font-medium leading-none">{activity.title}</div>
|
|
<div className="text-xs text-muted-foreground mb-1">{activity.description}</div>
|
|
<div className="text-[10px] text-muted-foreground/70 uppercase">
|
|
{formatDistanceToNow(activity.time, { addSuffix: true })}
|
|
</div>
|
|
</div>
|
|
))}
|
|
{!recentActivity?.length && (
|
|
<p className="text-sm text-muted-foreground text-center py-8">No recent activity.</p>
|
|
)}
|
|
</div>
|
|
</ScrollArea>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StatsCard({
|
|
title,
|
|
value,
|
|
icon: Icon,
|
|
description,
|
|
trend,
|
|
}: {
|
|
title: string;
|
|
value: string | number;
|
|
icon: React.ElementType;
|
|
description: string;
|
|
trend?: string;
|
|
}) {
|
|
return (
|
|
<Card className="border-muted/40 shadow-sm">
|
|
<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 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{value}</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
{description}
|
|
{trend && <span className="ml-1 text-green-600 dark:text-green-400 font-medium">{trend}</span>}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|