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.

package.json

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

pnpm-lock.yaml

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

src/app/api/studies/[id]/users/route.ts

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

src/app/api/webhooks/clerk/route.ts

@@ -46,19 +46,27 @@ export async function POST(req: Request) {
   const eventType = evt.type;
   console.log(`Webhook received: ${eventType}`);
 
-  if (eventType === 'user.created') {
+  if (eventType === 'user.created' || eventType === 'user.updated') {
-    const { id, email_addresses, first_name, last_name } = evt.data;
+    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,
+      name: [first_name, last_name].filter(Boolean).join(' ') || null,
-      lastName: last_name || null,
+      imageUrl: image_url,
-    }).onConflictDoNothing();
+    }).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 });

src/app/dashboard/layout.tsx

@@ -1,7 +1,7 @@
 import { Sidebar } from "~/components/sidebar";
-import { cn } from "~/lib/utils";
+import { Breadcrumb } from "~/components/breadcrumb";
-import { StudyProvider } from "~/context/StudyContext";
 import { ActiveStudyProvider } from "~/context/active-study";
+import { StudyProvider } from "~/context/StudyContext";
 
 export default function DashboardLayout({
   children,
@@ -11,16 +11,15 @@ export default function DashboardLayout({
   return (
     <ActiveStudyProvider>
       <StudyProvider>
-        <div className="flex h-screen overflow-hidden">
+        <div className="flex h-screen">
           <Sidebar />
-          <main className={cn(
+          <div className="flex-1 flex flex-col min-h-0">
-            "flex-1 overflow-y-auto",
+            <main className="flex-1 overflow-y-auto p-6">
-            "lg:pt-8 p-8",
+              <Breadcrumb />
-            "pt-[calc(3.5rem+2rem)]"
-          )}>
               {children}
             </main>
           </div>
+        </div>
       </StudyProvider>
     </ActiveStudyProvider>
   );

src/app/dashboard/page.tsx

@@ -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 response = await fetch(getApiUrl('/api/studies'));
-      const studies = await studiesRes.json();
+      if (!response.ok) throw new Error("Failed to fetch studies");
-
+      const { data } = await response.json();
-      // For now, just show study count
       setStats({
-        studyCount: studies.data.length,
+        studyCount: data.length,
-        activeInvitationCount: 0,
+        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();
+    fetchStats();
-  }, [fetchDashboardStats]);
+  }, [fetchStats]);
 
-
+  if (isLoading) {
-  if (loading) {
     return (
-      <div className="flex items-center justify-center min-h-[400px]">
+      <div className="space-y-6">
-        <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
+        <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 className="flex items-center justify-between">
-
         <div>
-        <h1 className="text-2xl font-bold">Dashboard</h1>
+          <h2 className="text-2xl font-bold tracking-tight">Dashboard</h2>
-        <p className="text-muted-foreground">Overview of your research studies</p>
+          <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>
+            <p className="text-xs text-muted-foreground">
+              Awaiting responses
+            </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">
+        <CardContent className="flex gap-4">
+          <Button onClick={() => router.push('/dashboard/studies/new')}>
+            Create New Study
+          </Button>
           <Button
             variant="outline"
-              className="w-full justify-start"
+            onClick={() => router.push('/dashboard/settings')}
-              onClick={() => router.push('/dashboard/studies')}
           >
-              <BookOpen className="mr-2 h-4 w-4" />
+            <Settings2 className="w-4 h-4 mr-2" />
-              Manage Studies
+            Settings
           </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>
-          </CardContent>
-        </Card>
-      </div>
     </div>
   );
 }

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 (
+  return children;
-    <div className="space-y-6">
-      <Breadcrumb />
-      {children}
-    </div>
-  );
 } 

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;
+  formCount: number;
-  pendingFormsCount: number;
+  trialCount: number;
 }
 
 export default function StudyDashboard() {
   const [stats, setStats] = useState<StudyStats>({
     participantCount: 0,
-    completedTrialsCount: 0,
+    formCount: 0,
-    pendingFormsCount: 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");
+      if (!response.ok) throw new Error("Failed to fetch stats");
-      const data = await response.json();
+      const { data } = await response.json();
-      setStats(data.data);
+      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();
+    fetchStats();
-  }, [fetchStudyStats]);
+  }, [fetchStats]);
 
-  if (loading) {
+  if (isLoading) {
     return (
-      <div className="flex items-center justify-center min-h-[400px]">
+      <div className="space-y-6">
-        <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
+        <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>
+            <CardTitle className="text-sm font-medium">
-            <PlayCircle className="h-4 w-4 text-muted-foreground" />
+              Forms
-          </CardHeader>
+            </CardTitle>
-          <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>
             <FileText className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{stats.pendingFormsCount}</div>
+            <div className="text-2xl font-bold">{stats.formCount}</div>
-            <p className="text-xs text-muted-foreground">Forms awaiting completion</p>
+            <p className="text-xs text-muted-foreground">
+              Active study forms
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <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>
+            <div className="text-2xl font-bold">{stats.trialCount}</div>
+            <p className="text-xs text-muted-foreground">
+              Completed trials
+            </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>
+          <CardDescription>Common tasks and actions for this study</CardDescription>
         </CardHeader>
-          <CardContent className="space-y-2">
+        <CardContent className="flex gap-4">
-            <Button
+          <Button asChild>
-              variant="outline"
-              className="w-full justify-start"
-              asChild
-            >
             <Link href={`/dashboard/studies/${id}/participants/new`}>
-                <Plus className="mr-2 h-4 w-4" />
+              <Plus className="w-4 h-4 mr-2" />
               Add Participant
             </Link>
           </Button>
-            <Button
+          <Button variant="outline" asChild>
-              variant="outline"
-              className="w-full justify-start"
-              asChild
-            >
             <Link href={`/dashboard/studies/${id}/trials/new`}>
-                <PlayCircle className="mr-2 h-4 w-4" />
+              <PlayCircle className="w-4 h-4 mr-2" />
-                Start New Trial
+              Start 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>
         </CardContent>
       </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Recent Activity</CardTitle>
-            <CardDescription>Latest updates and changes</CardDescription>
-          </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>
-        </Card>
-      </div>
     </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`), {
+      const response = await fetch(getApiUrl(`/api/studies/${id}/participants`));
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-
       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 (
+      <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>
-        <CardContent className="py-8">
+          <CardHeader>
-          <p className="text-center text-muted-foreground">Loading participants...</p>
+            <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>
+          <Dialog>
-            <Link href={`/dashboard/studies/${id}/participants/new`}>
+            <DialogTrigger asChild>
+              <Button>
                 <Plus className="mr-2 h-4 w-4" />
                 Add Participant
-            </Link>
               </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
+                  <Dialog>
-                    href={`/dashboard/studies/${id}/participants/new`}
+                    <DialogTrigger asChild>
-                    className="font-medium text-primary hover:underline"
+                      <Button variant="link" className="px-2 py-0">
-                  >
                         Add your first participant
-                  </Link>
+                      </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,13 +100,15 @@ export default function StudySettings() {
   }
 
   return (
-    <div className="container py-6">
+    <div className="space-y-6">
-      <div className="flex flex-col gap-2 mb-6">
+      <div className="flex items-center justify-between">
-        <h1 className="text-3xl font-bold tracking-tight">{study.title}</h1>
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
           <p className="text-muted-foreground">
-          Manage study settings, participants, and team members
+            Manage study settings and team members
           </p>
         </div>
+      </div>
 
       <div className="flex gap-6">
         <div className="w-48 flex flex-col gap-2">
@@ -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>

src/app/dashboard/studies/page.tsx

@@ -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 [isLoading, setIsLoading] = useState(true);
-  const [description, setDescription] = useState("");
   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();
+      const { data } = await response.json();
-      setStudies(data.data || []);
+      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) => {
+  useEffect(() => {
-    e.preventDefault();
+    fetchStudies();
-    try {
+  }, [fetchStudies]);
-      const response = await fetch(getApiUrl("/api/studies"), {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ title, description }),
-      });
 
-      if (!response.ok) {
+  const handleDelete = async (id: number) => {
-        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) => {
     try {
       const response = await fetch(getApiUrl(`/api/studies/${id}`), {
         method: "DELETE",
       });
 
-      if (!response.ok) {
+      if (!response.ok) throw new Error("Failed to delete study");
-        throw new Error("Failed to delete study");
-      }
 
       setStudies(studies.filter(study => study.id !== id));
       toast({
@@ -123,62 +96,67 @@ export default function Studies() {
     }
   };
 
-  // Fetch studies on mount
+  const handleEnterStudy = (study: Study) => {
-  useState(() => {
+    setActiveStudy(study);
-    fetchStudies();
+    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="space-y-6">
-      <div className="flex flex-col gap-2">
+      <div className="flex items-center justify-between">
-        <h1 className="text-3xl font-bold tracking-tight">Studies</h1>
+        <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) && (
-        <Card>
+          <Button onClick={() => router.push('/dashboard/studies/new')}>
-          <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
+            Create New Study
           </Button>
-            </form>
-          </CardContent>
-        </Card>
         )}
+      </div>
 
       <div className="grid gap-4">
         {studies.length > 0 ? (
           studies.map((study) => (
-            <Card key={study.id} className="overflow-hidden">
+            <Card key={study.id}>
-              <div className="p-6">
+              <CardContent 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">
@@ -195,47 +173,45 @@ export default function Studies() {
                     </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={() => 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="w-4 h-4 mr-2" />
+                        <Settings2 className="h-4 w-4" />
-                          Settings
                       </Button>
                     )}
-                      {hasPermission(study.permissions, PERMISSIONS.MANAGE_SYSTEM_SETTINGS) && (
+                    {hasPermission(study.permissions, PERMISSIONS.DELETE_STUDY) && (
                       <AlertDialog>
                         <AlertDialogTrigger asChild>
-                            <Button variant="outline" size="sm">
+                          <Button variant="ghost" size="sm">
-                              <Trash2Icon className="w-4 h-4 mr-2" />
+                            <Trash2Icon className="h-4 w-4" />
-                              Delete
                           </Button>
                         </AlertDialogTrigger>
                         <AlertDialogContent>
                           <AlertDialogHeader>
-                              <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                            <AlertDialogTitle>Delete Study</AlertDialogTitle>
-                              <div className="text-sm text-muted-foreground">
-                                <p className="mb-2">
-                                  This action cannot be undone. This will permanently delete the study
-                                  &quot;{study.title}&quot; 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>
+                          <p>
+                            Are you sure you want to delete this study? This action cannot be undone.
+                          </p>
                           <AlertDialogFooter>
                             <AlertDialogCancel>Cancel</AlertDialogCancel>
                             <AlertDialogAction
-                                onClick={() => deleteStudy(study.id)}
+                              onClick={() => handleDelete(study.id)}
                               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                             >
-                                Delete Study
+                              Delete
                             </AlertDialogAction>
                           </AlertDialogFooter>
                         </AlertDialogContent>
@@ -243,19 +219,14 @@ export default function Studies() {
                     )}
                   </div>
                 </div>
-                </div>
+              </CardContent>
-              </div>
             </Card>
           ))
         ) : (
           <Card>
             <CardContent className="py-8">
               <p className="text-center text-muted-foreground">
-                No studies created yet.{' '}
+                No studies found{hasPermission(studies[0]?.permissions || [], PERMISSIONS.CREATE_STUDY) ? ". Create your first study above" : ""}.
-                {hasPermission(studies[0]?.permissions || [], PERMISSIONS.CREATE_STUDY) 
-                  ? "Create your first study above."
-                  : "Ask your administrator to create your first study."
-                }
               </p>
             </CardContent>
           </Card>

src/app/layout.tsx

@@ -1,36 +1,23 @@
-import {
+import { ClerkProvider } from "@clerk/nextjs";
-  ClerkProvider
-} from '@clerk/nextjs';
-import { Analytics } from "@vercel/analytics/react"
 import { Inter } from 'next/font/google';
-import './globals.css';
+import { Toaster } from "~/components/ui/toaster";
-import { Metadata } from 'next';
+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>
-  )
+  );
 }

src/components/breadcrumb.tsx

@@ -18,22 +18,25 @@ export function Breadcrumb() {
     const items: BreadcrumbItem[] = [{ label: 'Dashboard', href: '/dashboard' }];
     const path = pathname.split('/').filter(Boolean);
 
+    // Handle root dashboard
+    if (path.length === 1 && path[0] === 'dashboard') {
+      return items;
+    }
+
     // Handle studies list page
-    if (path[1] === 'studies' && !activeStudy) {
+    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
-    if (activeStudy) {
-      items.push({ 
-        label: 'Studies', 
-        href: '/dashboard/studies' 
-      });
-      
       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">

src/components/page-header.tsx

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

src/components/sidebar.tsx

@@ -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 }) => {

src/components/studies/users-tab.tsx

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

src/components/user-avatar.tsx

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