mirror of
https://github.com/soconnor0919/hristudio.git
synced 2025-12-11 06:34:44 -05:00
feat: Enhance user management and UI components
- Updated user API routes to include imageUrl for better user representation. - Added @radix-ui/react-toast dependency for improved user notifications. - Refactored dashboard and studies components to incorporate new user fields and loading states. - Enhanced the layout and structure of the dashboard, studies, and participants pages for better user experience. - Implemented a dialog for adding participants, improving the participant management workflow. - Updated breadcrumb navigation to reflect the current study context more accurately. - Cleaned up unused imports and optimized component rendering for performance.
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --turbopack",
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint",
|
||||
@@ -26,6 +26,7 @@
|
||||
"@radix-ui/react-separator": "^1.1.0",
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"@radix-ui/react-tabs": "^1.1.1",
|
||||
"@radix-ui/react-toast": "^1.2.2",
|
||||
"@types/nodemailer": "^6.4.17",
|
||||
"@vercel/analytics": "^1.4.1",
|
||||
"@vercel/postgres": "^0.10.0",
|
||||
|
||||
36
pnpm-lock.yaml
generated
36
pnpm-lock.yaml
generated
@@ -38,6 +38,9 @@ importers:
|
||||
'@radix-ui/react-tabs':
|
||||
specifier: ^1.1.1
|
||||
version: 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-toast':
|
||||
specifier: ^1.2.2
|
||||
version: 1.2.2(@types/react-dom@18.3.1)(@types/react@18.3.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@types/nodemailer':
|
||||
specifier: ^6.4.17
|
||||
version: 6.4.17
|
||||
@@ -1148,6 +1151,19 @@ packages:
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-toast@1.2.2':
|
||||
resolution: {integrity: sha512-Z6pqSzmAP/bFJoqMAston4eSNa+ud44NSZTiZUmUen+IOZ5nBY8kzuU5WDBVyFXPtcW6yUalOHsxM/BP6Sv8ww==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-use-callback-ref@1.1.0':
|
||||
resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
|
||||
peerDependencies:
|
||||
@@ -3885,6 +3901,26 @@ snapshots:
|
||||
'@types/react': 18.3.13
|
||||
'@types/react-dom': 18.3.1
|
||||
|
||||
'@radix-ui/react-toast@1.2.2(@types/react-dom@18.3.1)(@types/react@18.3.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@radix-ui/primitive': 1.1.0
|
||||
'@radix-ui/react-collection': 1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.13)(react@18.3.1)
|
||||
'@radix-ui/react-context': 1.1.1(@types/react@18.3.13)(react@18.3.1)
|
||||
'@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-portal': 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-presence': 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.1)(@types/react@18.3.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.13)(react@18.3.1)
|
||||
'@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.13)(react@18.3.1)
|
||||
'@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.13)(react@18.3.1)
|
||||
'@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
optionalDependencies:
|
||||
'@types/react': 18.3.13
|
||||
'@types/react-dom': 18.3.1
|
||||
|
||||
'@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.13)(react@18.3.1)':
|
||||
dependencies:
|
||||
react: 18.3.1
|
||||
|
||||
@@ -31,6 +31,7 @@ export async function GET(
|
||||
id: usersTable.id,
|
||||
email: usersTable.email,
|
||||
name: usersTable.name,
|
||||
imageUrl: usersTable.imageUrl,
|
||||
roleId: rolesTable.id,
|
||||
roleName: rolesTable.name,
|
||||
})
|
||||
@@ -47,6 +48,7 @@ export async function GET(
|
||||
id: curr.id,
|
||||
email: curr.email,
|
||||
name: curr.name,
|
||||
imageUrl: curr.imageUrl,
|
||||
roles: [{
|
||||
id: curr.roleId,
|
||||
name: curr.roleName,
|
||||
@@ -63,6 +65,7 @@ export async function GET(
|
||||
id: string;
|
||||
email: string;
|
||||
name: string | null;
|
||||
imageUrl: string | null;
|
||||
roles: Array<{ id: number; name: string }>;
|
||||
}>);
|
||||
|
||||
|
||||
@@ -46,19 +46,27 @@ export async function POST(req: Request) {
|
||||
const eventType = evt.type;
|
||||
console.log(`Webhook received: ${eventType}`);
|
||||
|
||||
if (eventType === 'user.created') {
|
||||
const { id, email_addresses, first_name, last_name } = evt.data;
|
||||
if (eventType === 'user.created' || eventType === 'user.updated') {
|
||||
const { id, email_addresses, first_name, last_name, image_url } = evt.data;
|
||||
const primaryEmail = email_addresses?.[0]?.email_address;
|
||||
|
||||
// Create user in our database
|
||||
// Create or update user in our database
|
||||
await db.insert(usersTable).values({
|
||||
id,
|
||||
email: primaryEmail,
|
||||
firstName: first_name || null,
|
||||
lastName: last_name || null,
|
||||
}).onConflictDoNothing();
|
||||
name: [first_name, last_name].filter(Boolean).join(' ') || null,
|
||||
imageUrl: image_url,
|
||||
}).onConflictDoUpdate({
|
||||
target: usersTable.id,
|
||||
set: {
|
||||
email: primaryEmail,
|
||||
name: [first_name, last_name].filter(Boolean).join(' ') || null,
|
||||
imageUrl: image_url,
|
||||
updatedAt: new Date(),
|
||||
}
|
||||
});
|
||||
|
||||
console.log(`Created user in database: ${id}`);
|
||||
console.log(`${eventType === 'user.created' ? 'Created' : 'Updated'} user in database: ${id}`);
|
||||
}
|
||||
|
||||
return new Response('', { status: 200 });
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Sidebar } from "~/components/sidebar";
|
||||
import { cn } from "~/lib/utils";
|
||||
import { StudyProvider } from "~/context/StudyContext";
|
||||
import { Breadcrumb } from "~/components/breadcrumb";
|
||||
import { ActiveStudyProvider } from "~/context/active-study";
|
||||
import { StudyProvider } from "~/context/StudyContext";
|
||||
|
||||
export default function DashboardLayout({
|
||||
children,
|
||||
@@ -11,15 +11,14 @@ export default function DashboardLayout({
|
||||
return (
|
||||
<ActiveStudyProvider>
|
||||
<StudyProvider>
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
<div className="flex h-screen">
|
||||
<Sidebar />
|
||||
<main className={cn(
|
||||
"flex-1 overflow-y-auto",
|
||||
"lg:pt-8 p-8",
|
||||
"pt-[calc(3.5rem+2rem)]"
|
||||
)}>
|
||||
{children}
|
||||
</main>
|
||||
<div className="flex-1 flex flex-col min-h-0">
|
||||
<main className="flex-1 overflow-y-auto p-6">
|
||||
<Breadcrumb />
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</StudyProvider>
|
||||
</ActiveStudyProvider>
|
||||
|
||||
@@ -6,8 +6,9 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/com
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { BookOpen, Settings2 } from "lucide-react";
|
||||
import { useToast } from "~/hooks/use-toast";
|
||||
import { Breadcrumb } from "~/components/breadcrumb";
|
||||
import { getApiUrl } from "~/lib/fetch-utils";
|
||||
import { Skeleton } from "~/components/ui/skeleton";
|
||||
import { useActiveStudy } from "~/context/active-study";
|
||||
|
||||
interface DashboardStats {
|
||||
studyCount: number;
|
||||
@@ -19,114 +20,151 @@ export default function Dashboard() {
|
||||
studyCount: 0,
|
||||
activeInvitationCount: 0,
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const router = useRouter();
|
||||
const { toast } = useToast();
|
||||
const { studies, setActiveStudy } = useActiveStudy();
|
||||
|
||||
const fetchDashboardStats = useCallback(async () => {
|
||||
const fetchStats = useCallback(async () => {
|
||||
try {
|
||||
const studiesRes = await fetch(getApiUrl('/api/studies'));
|
||||
const studies = await studiesRes.json();
|
||||
|
||||
// For now, just show study count
|
||||
const response = await fetch(getApiUrl('/api/studies'));
|
||||
if (!response.ok) throw new Error("Failed to fetch studies");
|
||||
const { data } = await response.json();
|
||||
setStats({
|
||||
studyCount: studies.data.length,
|
||||
activeInvitationCount: 0,
|
||||
studyCount: data.length,
|
||||
activeInvitationCount: 0
|
||||
});
|
||||
|
||||
// If there's only one study and we're on the main dashboard, select it
|
||||
if (data.length === 1) {
|
||||
const study = {
|
||||
...data[0],
|
||||
createdAt: new Date(data[0].createdAt),
|
||||
updatedAt: data[0].updatedAt ? new Date(data[0].updatedAt) : null
|
||||
};
|
||||
setActiveStudy(study);
|
||||
router.push(`/dashboard/studies/${study.id}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching dashboard stats:', error);
|
||||
console.error("Error fetching stats:", error);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to load dashboard statistics",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [toast]);
|
||||
}, [toast, router, setActiveStudy]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchDashboardStats();
|
||||
}, [fetchDashboardStats]);
|
||||
fetchStats();
|
||||
}, [fetchStats]);
|
||||
|
||||
|
||||
if (loading) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Skeleton className="h-8 w-[200px] mb-2" />
|
||||
<Skeleton className="h-4 w-[300px]" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-[140px]" />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 grid-cols-1 md:grid-cols-3">
|
||||
{[1, 2].map((i) => (
|
||||
<Card key={i}>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<Skeleton className="h-4 w-[100px]" />
|
||||
<Skeleton className="h-4 w-4" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Skeleton className="h-7 w-[50px] mb-1" />
|
||||
<Skeleton className="h-3 w-[120px]" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-5 w-[120px] mb-2" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</CardHeader>
|
||||
<CardContent className="flex gap-4">
|
||||
<Skeleton className="h-10 w-[140px]" />
|
||||
<Skeleton className="h-10 w-[120px]" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Breadcrumb />
|
||||
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Dashboard</h1>
|
||||
<p className="text-muted-foreground">Overview of your research studies</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Dashboard</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Welcome back to your research dashboard
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={() => router.push('/dashboard/studies/new')}>
|
||||
Create New Study
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="grid gap-4 grid-cols-1 md:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Studies</CardTitle>
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Total Studies
|
||||
</CardTitle>
|
||||
<BookOpen className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{stats.studyCount}</div>
|
||||
<p className="text-xs text-muted-foreground">Active research studies</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Active research studies
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Pending Invitations</CardTitle>
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Pending Invitations
|
||||
</CardTitle>
|
||||
<Settings2 className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{stats.activeInvitationCount}</div>
|
||||
<p className="text-xs text-muted-foreground">Awaiting acceptance</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Quick Actions</CardTitle>
|
||||
<CardDescription>Common tasks and actions</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start"
|
||||
onClick={() => router.push('/dashboard/studies')}
|
||||
>
|
||||
<BookOpen className="mr-2 h-4 w-4" />
|
||||
Manage Studies
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Getting Started</CardTitle>
|
||||
<CardDescription>Tips for using HRIStudio</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
• Create a new study from the Studies page
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
• Invite collaborators using study settings
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
• Configure study parameters and forms
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Awaiting responses
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Quick Actions</CardTitle>
|
||||
<CardDescription>Common tasks and actions</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex gap-4">
|
||||
<Button onClick={() => router.push('/dashboard/studies/new')}>
|
||||
Create New Study
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => router.push('/dashboard/settings')}
|
||||
>
|
||||
<Settings2 className="w-4 h-4 mr-2" />
|
||||
Settings
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
import { useParams } from "next/navigation";
|
||||
import { useEffect } from "react";
|
||||
import { useActiveStudy } from "~/context/active-study";
|
||||
import { Breadcrumb } from "~/components/breadcrumb";
|
||||
import { Skeleton } from "~/components/ui/skeleton";
|
||||
|
||||
export default function StudyLayout({
|
||||
@@ -34,10 +33,5 @@ export default function StudyLayout({
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Breadcrumb />
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
return children;
|
||||
}
|
||||
@@ -4,170 +4,179 @@ import { useCallback, useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
Users,
|
||||
FileText,
|
||||
BarChart,
|
||||
PlayCircle,
|
||||
Plus,
|
||||
Settings2
|
||||
} from "lucide-react";
|
||||
import { useToast } from "~/hooks/use-toast";
|
||||
import { Plus, Users, FileText, BarChart, PlayCircle } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useActiveStudy } from "~/context/active-study";
|
||||
import { getApiUrl } from "~/lib/fetch-utils";
|
||||
import { Skeleton } from "~/components/ui/skeleton";
|
||||
|
||||
interface StudyStats {
|
||||
participantCount: number;
|
||||
completedTrialsCount: number;
|
||||
pendingFormsCount: number;
|
||||
formCount: number;
|
||||
trialCount: number;
|
||||
}
|
||||
|
||||
export default function StudyDashboard() {
|
||||
const [stats, setStats] = useState<StudyStats>({
|
||||
participantCount: 0,
|
||||
completedTrialsCount: 0,
|
||||
pendingFormsCount: 0,
|
||||
formCount: 0,
|
||||
trialCount: 0,
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const { id } = useParams();
|
||||
const { toast } = useToast();
|
||||
const { activeStudy } = useActiveStudy();
|
||||
|
||||
const fetchStudyStats = useCallback(async () => {
|
||||
const fetchStats = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetch(getApiUrl(`/api/studies/${id}/stats`));
|
||||
if (!response.ok) throw new Error("Failed to fetch study statistics");
|
||||
const data = await response.json();
|
||||
setStats(data.data);
|
||||
if (!response.ok) throw new Error("Failed to fetch stats");
|
||||
const { data } = await response.json();
|
||||
setStats({
|
||||
participantCount: data?.participantCount ?? 0,
|
||||
formCount: data?.formCount ?? 0,
|
||||
trialCount: data?.trialCount ?? 0
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error fetching study stats:", error);
|
||||
console.error("Error fetching stats:", error);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to load study statistics",
|
||||
variant: "destructive",
|
||||
});
|
||||
// Set default values on error
|
||||
setStats({
|
||||
participantCount: 0,
|
||||
formCount: 0,
|
||||
trialCount: 0
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [toast, id]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStudyStats();
|
||||
}, [fetchStudyStats]);
|
||||
fetchStats();
|
||||
}, [fetchStats]);
|
||||
|
||||
if (loading) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Skeleton className="h-8 w-[200px] mb-2" />
|
||||
<Skeleton className="h-4 w-[300px]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 grid-cols-1 md:grid-cols-3">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Card key={i}>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<Skeleton className="h-4 w-[100px]" />
|
||||
<Skeleton className="h-4 w-4" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Skeleton className="h-7 w-[50px] mb-1" />
|
||||
<Skeleton className="h-3 w-[120px]" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-5 w-[120px] mb-2" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</CardHeader>
|
||||
<CardContent className="flex gap-4">
|
||||
<Skeleton className="h-10 w-[140px]" />
|
||||
<Skeleton className="h-10 w-[120px]" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">{activeStudy?.title}</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Overview of your study's progress and statistics
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 grid-cols-1 md:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Participants</CardTitle>
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Participants
|
||||
</CardTitle>
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{stats.participantCount}</div>
|
||||
<p className="text-xs text-muted-foreground">Total participants enrolled</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Total enrolled participants
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Completed Trials</CardTitle>
|
||||
<PlayCircle className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{stats.completedTrialsCount}</div>
|
||||
<p className="text-xs text-muted-foreground">Successfully completed trials</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Pending Forms</CardTitle>
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Forms
|
||||
</CardTitle>
|
||||
<FileText className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{stats.pendingFormsCount}</div>
|
||||
<p className="text-xs text-muted-foreground">Forms awaiting completion</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Quick Actions</CardTitle>
|
||||
<CardDescription>Common tasks for this study</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start"
|
||||
asChild
|
||||
>
|
||||
<Link href={`/dashboard/studies/${id}/participants/new`}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add Participant
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start"
|
||||
asChild
|
||||
>
|
||||
<Link href={`/dashboard/studies/${id}/trials/new`}>
|
||||
<PlayCircle className="mr-2 h-4 w-4" />
|
||||
Start New Trial
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start"
|
||||
asChild
|
||||
>
|
||||
<Link href={`/dashboard/studies/${id}/forms/new`}>
|
||||
<FileText className="mr-2 h-4 w-4" />
|
||||
Create Form
|
||||
</Link>
|
||||
</Button>
|
||||
<div className="text-2xl font-bold">{stats.formCount}</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Active study forms
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Recent Activity</CardTitle>
|
||||
<CardDescription>Latest updates and changes</CardDescription>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Trials
|
||||
</CardTitle>
|
||||
<BarChart className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start"
|
||||
asChild
|
||||
>
|
||||
<Link href={`/dashboard/studies/${id}/analysis`}>
|
||||
<BarChart className="mr-2 h-4 w-4" />
|
||||
View Analytics
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start"
|
||||
asChild
|
||||
>
|
||||
<Link href={`/dashboard/studies/${id}/settings`}>
|
||||
<Settings2 className="mr-2 h-4 w-4" />
|
||||
Study Settings
|
||||
</Link>
|
||||
</Button>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{stats.trialCount}</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Completed trials
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Quick Actions</CardTitle>
|
||||
<CardDescription>Common tasks and actions for this study</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex gap-4">
|
||||
<Button asChild>
|
||||
<Link href={`/dashboard/studies/${id}/participants/new`}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add Participant
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="outline" asChild>
|
||||
<Link href={`/dashboard/studies/${id}/trials/new`}>
|
||||
<PlayCircle className="w-4 h-4 mr-2" />
|
||||
Start Trial
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,7 +6,6 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/com
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { useToast } from "~/hooks/use-toast";
|
||||
import { Plus, Trash2 } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useActiveStudy } from "~/context/active-study";
|
||||
import { hasPermission } from "~/lib/permissions-client";
|
||||
import { PERMISSIONS } from "~/lib/permissions";
|
||||
@@ -21,6 +20,15 @@ import {
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from "~/components/ui/alert-dialog";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "~/components/ui/dialog";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
@@ -30,6 +38,10 @@ import {
|
||||
TableRow,
|
||||
} from "~/components/ui/table";
|
||||
import { getApiUrl } from "~/lib/fetch-utils";
|
||||
import { Skeleton } from "~/components/ui/skeleton";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { Label } from "~/components/ui/label";
|
||||
|
||||
interface Participant {
|
||||
id: number;
|
||||
name: string;
|
||||
@@ -40,6 +52,8 @@ interface Participant {
|
||||
export default function ParticipantsList() {
|
||||
const [participants, setParticipants] = useState<Participant[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isAddingParticipant, setIsAddingParticipant] = useState(false);
|
||||
const [newParticipantName, setNewParticipantName] = useState("");
|
||||
const { id } = useParams();
|
||||
const { toast } = useToast();
|
||||
const { activeStudy } = useActiveStudy();
|
||||
@@ -50,13 +64,7 @@ export default function ParticipantsList() {
|
||||
|
||||
const fetchParticipants = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetch(getApiUrl(`/api/studies/${id}/participants`), {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
const response = await fetch(getApiUrl(`/api/studies/${id}/participants`));
|
||||
if (!response.ok) throw new Error("Failed to fetch participants");
|
||||
const data = await response.json();
|
||||
setParticipants(data.data || []);
|
||||
@@ -70,7 +78,7 @@ export default function ParticipantsList() {
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [toast, id]);
|
||||
}, [id, toast]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchParticipants();
|
||||
@@ -103,13 +111,82 @@ export default function ParticipantsList() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddParticipant = async () => {
|
||||
if (!newParticipantName.trim()) return;
|
||||
|
||||
setIsAddingParticipant(true);
|
||||
try {
|
||||
const response = await fetch(getApiUrl(`/api/studies/${id}/participants`), {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ name: newParticipantName }),
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error("Failed to add participant");
|
||||
|
||||
const data = await response.json();
|
||||
setParticipants([...participants, data.data]);
|
||||
setNewParticipantName("");
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Participant added successfully",
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error adding participant:", error);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to add participant",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsAddingParticipant(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-8">
|
||||
<p className="text-center text-muted-foreground">Loading participants...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Skeleton className="h-8 w-[200px] mb-2" />
|
||||
<Skeleton className="h-4 w-[300px]" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-[140px]" />
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-5 w-[150px] mb-2" />
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead><Skeleton className="h-4 w-[40px]" /></TableHead>
|
||||
<TableHead><Skeleton className="h-4 w-[120px]" /></TableHead>
|
||||
<TableHead><Skeleton className="h-4 w-[100px]" /></TableHead>
|
||||
<TableHead className="w-[100px]"><Skeleton className="h-4 w-[60px]" /></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{[1, 2, 3].map((i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell><Skeleton className="h-4 w-[30px]" /></TableCell>
|
||||
<TableCell><Skeleton className="h-4 w-[150px]" /></TableCell>
|
||||
<TableCell><Skeleton className="h-4 w-[100px]" /></TableCell>
|
||||
<TableCell><Skeleton className="h-8 w-8" /></TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -123,12 +200,41 @@ export default function ParticipantsList() {
|
||||
</p>
|
||||
</div>
|
||||
{canCreateParticipant && (
|
||||
<Button asChild>
|
||||
<Link href={`/dashboard/studies/${id}/participants/new`}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add Participant
|
||||
</Link>
|
||||
</Button>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add Participant
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Participant</DialogTitle>
|
||||
<DialogDescription>
|
||||
Add a new participant to {activeStudy?.title}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Participant Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
placeholder="Enter participant name"
|
||||
value={newParticipantName}
|
||||
onChange={(e) => setNewParticipantName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
onClick={handleAddParticipant}
|
||||
disabled={isAddingParticipant || !newParticipantName.trim()}
|
||||
>
|
||||
{isAddingParticipant ? "Adding..." : "Add Participant"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -198,12 +304,40 @@ export default function ParticipantsList() {
|
||||
{canCreateParticipant && (
|
||||
<>
|
||||
.{" "}
|
||||
<Link
|
||||
href={`/dashboard/studies/${id}/participants/new`}
|
||||
className="font-medium text-primary hover:underline"
|
||||
>
|
||||
Add your first participant
|
||||
</Link>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="link" className="px-2 py-0">
|
||||
Add your first participant
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Participant</DialogTitle>
|
||||
<DialogDescription>
|
||||
Add a new participant to {activeStudy?.title}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name-empty">Participant Name</Label>
|
||||
<Input
|
||||
id="name-empty"
|
||||
placeholder="Enter participant name"
|
||||
value={newParticipantName}
|
||||
onChange={(e) => setNewParticipantName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
onClick={handleAddParticipant}
|
||||
disabled={isAddingParticipant || !newParticipantName.trim()}
|
||||
>
|
||||
{isAddingParticipant ? "Adding..." : "Add Participant"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -3,14 +3,15 @@
|
||||
import { useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { SettingsTab } from "~/components/studies/settings-tab";
|
||||
import { ParticipantsTab } from "~/components/studies/participants-tab";
|
||||
import { UsersTab } from "~/components/studies/users-tab";
|
||||
import { useEffect } from "react";
|
||||
import { PERMISSIONS } from "~/lib/permissions-client";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Settings2Icon, UsersIcon, UserIcon } from "lucide-react";
|
||||
import { Settings2Icon, UsersIcon } from "lucide-react";
|
||||
import { cn } from "~/lib/utils";
|
||||
import { getApiUrl } from "~/lib/fetch-utils";
|
||||
import { Card, CardContent } from "~/components/ui/card";
|
||||
import { Skeleton } from "~/components/ui/skeleton";
|
||||
|
||||
interface Study {
|
||||
id: number;
|
||||
@@ -23,7 +24,7 @@ export default function StudySettings() {
|
||||
const [study, setStudy] = useState<Study | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [activeTab, setActiveTab] = useState<'settings' | 'participants' | 'users'>('settings');
|
||||
const [activeTab, setActiveTab] = useState<'settings' | 'users'>('settings');
|
||||
const { id } = useParams();
|
||||
const router = useRouter();
|
||||
|
||||
@@ -62,7 +63,36 @@ export default function StudySettings() {
|
||||
}, [id, router]);
|
||||
|
||||
if (isLoading) {
|
||||
return <div>Loading...</div>;
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Skeleton className="h-8 w-[150px] mb-2" />
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-6">
|
||||
<div className="w-48 flex flex-col gap-2">
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<Card>
|
||||
<CardContent className="py-6">
|
||||
<div className="space-y-4">
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<Skeleton className="h-10 w-2/3" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !study) {
|
||||
@@ -70,12 +100,14 @@ export default function StudySettings() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container py-6">
|
||||
<div className="flex flex-col gap-2 mb-6">
|
||||
<h1 className="text-3xl font-bold tracking-tight">{study.title}</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Manage study settings, participants, and team members
|
||||
</p>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Settings</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Manage study settings and team members
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-6">
|
||||
@@ -88,14 +120,6 @@ export default function StudySettings() {
|
||||
<Settings2Icon className="mr-2 h-4 w-4" />
|
||||
Settings
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeTab === 'participants' ? 'secondary' : 'ghost'}
|
||||
className="justify-start"
|
||||
onClick={() => setActiveTab('participants')}
|
||||
>
|
||||
<UserIcon className="mr-2 h-4 w-4" />
|
||||
Participants
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeTab === 'users' ? 'secondary' : 'ghost'}
|
||||
className="justify-start"
|
||||
@@ -110,9 +134,6 @@ export default function StudySettings() {
|
||||
<div className={cn(activeTab === 'settings' ? 'block' : 'hidden')}>
|
||||
<SettingsTab study={study} />
|
||||
</div>
|
||||
<div className={cn(activeTab === 'participants' ? 'block' : 'hidden')}>
|
||||
<ParticipantsTab studyId={study.id} permissions={study.permissions} />
|
||||
</div>
|
||||
<div className={cn(activeTab === 'users' ? 'block' : 'hidden')}>
|
||||
<UsersTab studyId={study.id} permissions={study.permissions} />
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from "react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { PlusIcon, Trash2Icon, Settings2 } from "lucide-react";
|
||||
import { PlusIcon, Trash2Icon, Settings2, ArrowRight } from "lucide-react";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { Label } from "~/components/ui/label";
|
||||
import { Textarea } from "~/components/ui/textarea";
|
||||
import { useToast } from "~/hooks/use-toast";
|
||||
import { PERMISSIONS, hasPermission } from "~/lib/permissions-client";
|
||||
import {
|
||||
@@ -20,21 +17,22 @@ import {
|
||||
AlertDialogTrigger,
|
||||
AlertDialogFooter
|
||||
} from "~/components/ui/alert-dialog";
|
||||
import { ROLES } from "~/lib/roles";
|
||||
import { getApiUrl } from "~/lib/fetch-utils";
|
||||
import { Skeleton } from "~/components/ui/skeleton";
|
||||
import { useActiveStudy } from "~/context/active-study";
|
||||
|
||||
interface Study {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string | null;
|
||||
userId: string;
|
||||
environment: string;
|
||||
createdAt: Date;
|
||||
updatedAt: Date | null;
|
||||
permissions: string[];
|
||||
roles: string[];
|
||||
}
|
||||
|
||||
// Helper function to format role name
|
||||
function formatRoleName(role: string): string {
|
||||
return role
|
||||
.split('_')
|
||||
@@ -44,17 +42,21 @@ function formatRoleName(role: string): string {
|
||||
|
||||
export default function Studies() {
|
||||
const [studies, setStudies] = useState<Study[]>([]);
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const router = useRouter();
|
||||
const { toast } = useToast();
|
||||
const { setActiveStudy } = useActiveStudy();
|
||||
|
||||
const fetchStudies = async () => {
|
||||
const fetchStudies = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetch(getApiUrl("/api/studies"));
|
||||
if (!response.ok) throw new Error("Failed to fetch studies");
|
||||
const data = await response.json();
|
||||
setStudies(data.data || []);
|
||||
const { data } = await response.json();
|
||||
setStudies(data.map((study: any) => ({
|
||||
...study,
|
||||
createdAt: new Date(study.createdAt),
|
||||
updatedAt: study.updatedAt ? new Date(study.updatedAt) : null
|
||||
})));
|
||||
} catch (error) {
|
||||
console.error("Error fetching studies:", error);
|
||||
toast({
|
||||
@@ -62,51 +64,22 @@ export default function Studies() {
|
||||
description: "Failed to load studies",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
}, [toast]);
|
||||
|
||||
const createStudy = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const response = await fetch(getApiUrl("/api/studies"), {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ title, description }),
|
||||
});
|
||||
useEffect(() => {
|
||||
fetchStudies();
|
||||
}, [fetchStudies]);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to create study");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setStudies([...studies, data.data]);
|
||||
setTitle("");
|
||||
setDescription("");
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Study created successfully",
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error creating study:", error);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to create study",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const deleteStudy = async (id: number) => {
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
const response = await fetch(getApiUrl(`/api/studies/${id}`), {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to delete study");
|
||||
}
|
||||
if (!response.ok) throw new Error("Failed to delete study");
|
||||
|
||||
setStudies(studies.filter(study => study.id !== id));
|
||||
toast({
|
||||
@@ -123,139 +96,137 @@ export default function Studies() {
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch studies on mount
|
||||
useState(() => {
|
||||
fetchStudies();
|
||||
});
|
||||
const handleEnterStudy = (study: Study) => {
|
||||
setActiveStudy(study);
|
||||
router.push(`/dashboard/studies/${study.id}`);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Skeleton className="h-8 w-[150px] mb-2" />
|
||||
<Skeleton className="h-4 w-[300px]" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-[140px]" />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Card key={i}>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-5 w-[200px] mb-1" />
|
||||
<Skeleton className="h-4 w-[300px] mb-1" />
|
||||
<Skeleton className="h-4 w-[150px]" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="h-9 w-[100px]" />
|
||||
<Skeleton className="h-9 w-9" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container py-6 space-y-6">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-3xl font-bold tracking-tight">Studies</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Manage your research studies and experiments
|
||||
</p>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold tracking-tight">Studies</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Manage your research studies and experiments
|
||||
</p>
|
||||
</div>
|
||||
{hasPermission(studies[0]?.permissions || [], PERMISSIONS.CREATE_STUDY) && (
|
||||
<Button onClick={() => router.push('/dashboard/studies/new')}>
|
||||
<PlusIcon className="w-4 h-4 mr-2" />
|
||||
Create New Study
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{hasPermission(studies[0]?.permissions || [], PERMISSIONS.CREATE_STUDY) && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Create New Study</CardTitle>
|
||||
<CardDescription>Add a new research study to your collection</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={createStudy} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="title">Study Title</Label>
|
||||
<Input
|
||||
id="title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Enter study title"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Enter study description"
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit">
|
||||
<PlusIcon className="w-4 h-4 mr-2" />
|
||||
Create Study
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="grid gap-4">
|
||||
{studies.length > 0 ? (
|
||||
studies.map((study) => (
|
||||
<Card key={study.id} className="overflow-hidden">
|
||||
<div className="p-6">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="space-y-1">
|
||||
<h3 className="font-semibold leading-none tracking-tight">
|
||||
{study.title}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{study.description || "No description provided."}
|
||||
</p>
|
||||
<p className="text-sm">
|
||||
<span className="text-muted-foreground">Your Roles: </span>
|
||||
<span className="text-foreground">
|
||||
{study.roles?.map(formatRoleName).join(", ")}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{(hasPermission(study.permissions, PERMISSIONS.EDIT_STUDY) ||
|
||||
hasPermission(study.permissions, PERMISSIONS.MANAGE_ROLES)) && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => router.push(`/dashboard/studies/${study.id}/settings`)}
|
||||
>
|
||||
<Settings2 className="w-4 h-4 mr-2" />
|
||||
Settings
|
||||
</Button>
|
||||
)}
|
||||
{hasPermission(study.permissions, PERMISSIONS.MANAGE_SYSTEM_SETTINGS) && (
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="outline" size="sm">
|
||||
<Trash2Icon className="w-4 h-4 mr-2" />
|
||||
<Card key={study.id}>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="space-y-1">
|
||||
<h3 className="font-semibold leading-none tracking-tight">
|
||||
{study.title}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{study.description || "No description provided."}
|
||||
</p>
|
||||
<p className="text-sm">
|
||||
<span className="text-muted-foreground">Your Roles: </span>
|
||||
<span className="text-foreground">
|
||||
{study.roles?.map(formatRoleName).join(", ")}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleEnterStudy(study)}
|
||||
>
|
||||
Enter Study
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
{(hasPermission(study.permissions, PERMISSIONS.EDIT_STUDY) ||
|
||||
hasPermission(study.permissions, PERMISSIONS.MANAGE_ROLES)) && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => router.push(`/dashboard/studies/${study.id}/settings`)}
|
||||
>
|
||||
<Settings2 className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
{hasPermission(study.permissions, PERMISSIONS.DELETE_STUDY) && (
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Trash2Icon className="h-4 w-4" />
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete Study</AlertDialogTitle>
|
||||
</AlertDialogHeader>
|
||||
<p>
|
||||
Are you sure you want to delete this study? This action cannot be undone.
|
||||
</p>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => handleDelete(study.id)}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
<p className="mb-2">
|
||||
This action cannot be undone. This will permanently delete the study
|
||||
"{study.title}" and all associated data including:
|
||||
</p>
|
||||
<ul className="list-disc list-inside">
|
||||
<li>All participant data</li>
|
||||
<li>All user roles and permissions</li>
|
||||
<li>All pending invitations</li>
|
||||
</ul>
|
||||
</div>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => deleteStudy(study.id)}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
Delete Study
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)}
|
||||
</div>
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="py-8">
|
||||
<p className="text-center text-muted-foreground">
|
||||
No studies created yet.{' '}
|
||||
{hasPermission(studies[0]?.permissions || [], PERMISSIONS.CREATE_STUDY)
|
||||
? "Create your first study above."
|
||||
: "Ask your administrator to create your first study."
|
||||
}
|
||||
No studies found{hasPermission(studies[0]?.permissions || [], PERMISSIONS.CREATE_STUDY) ? ". Create your first study above" : ""}.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -1,36 +1,23 @@
|
||||
import {
|
||||
ClerkProvider
|
||||
} from '@clerk/nextjs';
|
||||
import { Analytics } from "@vercel/analytics/react"
|
||||
import { ClerkProvider } from "@clerk/nextjs";
|
||||
import { Inter } from 'next/font/google';
|
||||
import './globals.css';
|
||||
import { Metadata } from 'next';
|
||||
import { Toaster } from "~/components/ui/toaster";
|
||||
import "~/app/globals.css";
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'HRIStudio',
|
||||
description: 'A platform for managing human-robot interaction studies',
|
||||
icons: {
|
||||
icon: [
|
||||
{ url: '/icon', type: 'image/svg+xml' },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<ClerkProvider>
|
||||
<Analytics />
|
||||
<html lang="en">
|
||||
<body className={inter.className}>
|
||||
{children}
|
||||
<Toaster />
|
||||
</body>
|
||||
</html>
|
||||
</ClerkProvider>
|
||||
)
|
||||
);
|
||||
}
|
||||
@@ -18,22 +18,25 @@ export function Breadcrumb() {
|
||||
const items: BreadcrumbItem[] = [{ label: 'Dashboard', href: '/dashboard' }];
|
||||
const path = pathname.split('/').filter(Boolean);
|
||||
|
||||
// Handle studies list page
|
||||
if (path[1] === 'studies' && !activeStudy) {
|
||||
items.push({ label: 'Studies', href: '/dashboard/studies' });
|
||||
if (path[2] === 'new') {
|
||||
items.push({ label: 'New Study' });
|
||||
}
|
||||
// Handle root dashboard
|
||||
if (path.length === 1 && path[0] === 'dashboard') {
|
||||
return items;
|
||||
}
|
||||
|
||||
// Handle active study pages
|
||||
if (activeStudy) {
|
||||
items.push({
|
||||
label: 'Studies',
|
||||
href: '/dashboard/studies'
|
||||
});
|
||||
// Handle studies list page
|
||||
if (path[1] === 'studies') {
|
||||
items.push({ label: 'Studies', href: '/dashboard/studies' });
|
||||
|
||||
if (path[2] === 'new') {
|
||||
items.push({ label: 'New Study' });
|
||||
return items;
|
||||
}
|
||||
|
||||
if (!activeStudy) {
|
||||
return items;
|
||||
}
|
||||
|
||||
// Handle active study pages
|
||||
items.push({
|
||||
label: activeStudy.title,
|
||||
href: `/dashboard/studies/${activeStudy.id}`
|
||||
@@ -56,6 +59,25 @@ export function Breadcrumb() {
|
||||
});
|
||||
}
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
// Handle participants page
|
||||
if (path[1] === 'participants') {
|
||||
items.push({ label: 'Participants', href: '/dashboard/participants' });
|
||||
return items;
|
||||
}
|
||||
|
||||
// Handle settings page
|
||||
if (path[1] === 'settings') {
|
||||
items.push({ label: 'Settings', href: '/dashboard/settings' });
|
||||
return items;
|
||||
}
|
||||
|
||||
// Handle profile page
|
||||
if (path[1] === 'profile') {
|
||||
items.push({ label: 'Profile', href: '/dashboard/profile' });
|
||||
return items;
|
||||
}
|
||||
|
||||
return items;
|
||||
@@ -63,7 +85,8 @@ export function Breadcrumb() {
|
||||
|
||||
const breadcrumbs = getBreadcrumbs();
|
||||
|
||||
if (breadcrumbs.length <= 1) return null;
|
||||
// Always show breadcrumbs on dashboard pages
|
||||
if (breadcrumbs.length <= 1 && !pathname.startsWith('/dashboard')) return null;
|
||||
|
||||
return (
|
||||
<div className="flex items-center space-x-2 text-sm text-muted-foreground mb-6">
|
||||
|
||||
22
src/components/page-header.tsx
Normal file
22
src/components/page-header.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
|
||||
interface PageHeaderProps {
|
||||
title: string;
|
||||
description: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function PageHeader({ title, description, children }: PageHeaderProps) {
|
||||
return (
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -38,6 +38,14 @@ const getNavItems = (studyId?: number) => [
|
||||
exact: true,
|
||||
requiresStudy: false
|
||||
},
|
||||
{
|
||||
name: "Studies",
|
||||
href: "/dashboard/studies",
|
||||
icon: FolderIcon,
|
||||
exact: true,
|
||||
requiresStudy: false,
|
||||
hideWithStudy: true
|
||||
},
|
||||
{
|
||||
name: "Participants",
|
||||
href: `/dashboard/studies/${studyId}/participants`,
|
||||
@@ -84,7 +92,7 @@ export function Sidebar() {
|
||||
|
||||
const navItems = getNavItems(activeStudy?.id)
|
||||
const visibleNavItems = activeStudy
|
||||
? navItems
|
||||
? navItems.filter(item => !item.hideWithStudy)
|
||||
: navItems.filter(item => !item.requiresStudy)
|
||||
|
||||
const isActiveRoute = (item: { href: string, exact?: boolean, baseRoute?: string }) => {
|
||||
|
||||
@@ -40,6 +40,7 @@ interface User {
|
||||
email: string;
|
||||
name: string | null;
|
||||
roles: Array<{ id: number; name: string }>;
|
||||
imageUrl: string;
|
||||
}
|
||||
|
||||
interface Invitation {
|
||||
@@ -211,17 +212,17 @@ export function UsersTab({ studyId, permissions }: UsersTabProps) {
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-2xl font-bold tracking-tight">Team Members</h2>
|
||||
{canManageRoles && <InviteUserDialog studyId={studyId} onInviteSent={fetchInvitations} />}
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Study Members</CardTitle>
|
||||
<CardDescription>
|
||||
Manage users and their roles in this study
|
||||
</CardDescription>
|
||||
<CardHeader className="flex flex-col justify-between">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<CardTitle>Study Members</CardTitle>
|
||||
<CardDescription>
|
||||
Manage users and their roles in this study
|
||||
</CardDescription>
|
||||
</div>
|
||||
{canManageRoles && <InviteUserDialog studyId={studyId} onInviteSent={fetchInvitations} />}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
@@ -240,6 +241,7 @@ export function UsersTab({ studyId, permissions }: UsersTabProps) {
|
||||
user={{
|
||||
name: formatName(user),
|
||||
email: user.email,
|
||||
imageUrl: user.imageUrl,
|
||||
}}
|
||||
/>
|
||||
<span>{formatName(user)}</span>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { Avatar, AvatarFallback } from "~/components/ui/avatar";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
|
||||
|
||||
interface UserAvatarProps {
|
||||
user: {
|
||||
name?: string | null;
|
||||
email: string;
|
||||
imageUrl?: string | null;
|
||||
};
|
||||
className?: string;
|
||||
}
|
||||
@@ -21,6 +22,7 @@ export function UserAvatar({ user, className }: UserAvatarProps) {
|
||||
|
||||
return (
|
||||
<Avatar className={className}>
|
||||
{user.imageUrl && <AvatarImage src={user.imageUrl} alt={user.name || user.email} />}
|
||||
<AvatarFallback>{initials}</AvatarFallback>
|
||||
</Avatar>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user