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.

src/app/dashboard/studies/[id]/layout.tsx

@@ -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;
 } 

src/app/dashboard/studies/[id]/page.tsx

@@ -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&apos;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>
   );
 } 

src/app/dashboard/studies/[id]/participants/page.tsx

@@ -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>

src/app/dashboard/studies/[id]/settings/page.tsx

@@ -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>