mirror of
https://github.com/soconnor0919/hristudio.git
synced 2025-12-11 22:54:45 -05:00
chore(deps): Update dependencies and enhance API error handling
- Added '@vercel/analytics' to package.json for improved analytics tracking. - Updated 'next' version from 15.0.2 to 15.0.3 to incorporate the latest features and fixes. - Refactored API routes for invitations and studies to improve error handling and response structure. - Enhanced permission checks in the invitations and studies API to ensure proper access control. - Removed the participants dashboard page as part of a restructuring effort. - Updated the database schema to include environment settings for users and studies. - Improved the dashboard components to handle loading states and display statistics more effectively.
This commit is contained in:
@@ -23,7 +23,6 @@ import { Logo } from "~/components/logo"
|
||||
const navItems = [
|
||||
{ name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
|
||||
{ name: "Studies", href: "/dashboard/studies", icon: FolderIcon },
|
||||
{ name: "Participants", href: "/dashboard/participants", icon: UsersRoundIcon },
|
||||
{ name: "Trials", href: "/dashboard/trials", icon: LandPlotIcon },
|
||||
{ name: "Forms", href: "/dashboard/forms", icon: FileTextIcon },
|
||||
{ name: "Data Analysis", href: "/dashboard/analysis", icon: BarChartIcon },
|
||||
|
||||
233
src/components/studies/participants-tab.tsx
Normal file
233
src/components/studies/participants-tab.tsx
Normal file
@@ -0,0 +1,233 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { PlusIcon, Trash2Icon } 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 { useToast } from "~/hooks/use-toast";
|
||||
import { PERMISSIONS } from "~/lib/permissions-client";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
AlertDialogFooter
|
||||
} from "~/components/ui/alert-dialog";
|
||||
|
||||
interface Participant {
|
||||
id: number;
|
||||
name: string;
|
||||
studyId: number;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
interface ParticipantsTabProps {
|
||||
studyId: number;
|
||||
permissions: string[];
|
||||
}
|
||||
|
||||
export function ParticipantsTab({ studyId, permissions }: ParticipantsTabProps) {
|
||||
const [participants, setParticipants] = useState<Participant[]>([]);
|
||||
const [name, setName] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const { toast } = useToast();
|
||||
|
||||
useEffect(() => {
|
||||
fetchParticipants();
|
||||
}, [studyId]);
|
||||
|
||||
const fetchParticipants = async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/studies/${studyId}/participants`);
|
||||
if (!response.ok) throw new Error("Failed to fetch participants");
|
||||
const data = await response.json();
|
||||
setParticipants(data.data || []);
|
||||
} catch (error) {
|
||||
console.error("Error fetching participants:", error);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to load participants",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const createParticipant = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const response = await fetch(`/api/studies/${studyId}/participants`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ name }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to create participant");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setParticipants([...participants, data.data]);
|
||||
setName("");
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Participant created successfully",
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error creating participant:", error);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to create participant",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const deleteParticipant = async (participantId: number) => {
|
||||
try {
|
||||
const response = await fetch(`/api/studies/${studyId}/participants`, {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ participantId }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to delete participant");
|
||||
}
|
||||
|
||||
setParticipants(participants.filter(p => p.id !== participantId));
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Participant deleted successfully",
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error deleting participant:", error);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to delete participant",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const hasPermission = (permission: string) => permissions.includes(permission);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-8">
|
||||
<p className="text-center text-muted-foreground">Loading participants...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-8">
|
||||
<p className="text-center text-destructive">{error}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{hasPermission(PERMISSIONS.CREATE_PARTICIPANT) && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Add New Participant</CardTitle>
|
||||
<CardDescription>Add a new participant to this study</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={createParticipant} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Participant Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Enter participant name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit">
|
||||
<PlusIcon className="w-4 h-4 mr-2" />
|
||||
Add Participant
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="grid gap-4">
|
||||
{participants.length > 0 ? (
|
||||
participants.map((participant) => (
|
||||
<Card key={participant.id}>
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="font-semibold">
|
||||
{participant.name}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Added {new Date(participant.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
{hasPermission(PERMISSIONS.DELETE_PARTICIPANT) && (
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="outline" size="sm">
|
||||
<Trash2Icon className="w-4 h-4 mr-2" />
|
||||
Delete
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
This action cannot be undone. This will permanently delete the participant
|
||||
"{participant.name}" and all associated data.
|
||||
</div>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => deleteParticipant(participant.id)}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
Delete Participant
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="py-8">
|
||||
<p className="text-center text-muted-foreground">
|
||||
No participants added yet. Add your first participant above.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
94
src/components/studies/settings-tab.tsx
Normal file
94
src/components/studies/settings-tab.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
'use client';
|
||||
|
||||
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 { Button } from "~/components/ui/button";
|
||||
import { useToast } from "~/hooks/use-toast";
|
||||
import { useState } from "react";
|
||||
import { PERMISSIONS } from "~/lib/permissions-client";
|
||||
|
||||
interface SettingsTabProps {
|
||||
study: {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string | null;
|
||||
permissions: string[];
|
||||
};
|
||||
}
|
||||
|
||||
export function SettingsTab({ study }: SettingsTabProps) {
|
||||
const [title, setTitle] = useState(study.title);
|
||||
const [description, setDescription] = useState(study.description || "");
|
||||
const { toast } = useToast();
|
||||
|
||||
const hasPermission = (permission: string) => study.permissions.includes(permission);
|
||||
const canEditStudy = hasPermission(PERMISSIONS.EDIT_STUDY);
|
||||
|
||||
const updateStudy = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const response = await fetch(`/api/studies/${study.id}`, {
|
||||
method: "PATCH",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ title, description }),
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error("Failed to update study");
|
||||
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Study updated successfully",
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error updating study:", error);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to update study",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Study Settings</CardTitle>
|
||||
<CardDescription>Update your study details and configuration</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={updateStudy} 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
|
||||
disabled={!canEditStudy}
|
||||
/>
|
||||
</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"
|
||||
disabled={!canEditStudy}
|
||||
/>
|
||||
</div>
|
||||
{canEditStudy && (
|
||||
<Button type="submit">
|
||||
Save Changes
|
||||
</Button>
|
||||
)}
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user