fix: update user fields to match schema

- Replace firstName/lastName with name field in users API route
- Update user formatting in UsersTab component
- Add email fallback when name is not available

src/app/dashboard/layout.tsx

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

src/app/dashboard/page.tsx

@@ -4,19 +4,18 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
 import { Button } from "~/components/ui/button";
-import { Users, BookOpen, Settings2 } from "lucide-react";
+import { BookOpen, Settings2 } from "lucide-react";
 import { useToast } from "~/hooks/use-toast";
+import { Breadcrumb } from "~/components/breadcrumb";
 
 interface DashboardStats {
   studyCount: number;
-  participantCount: number;
   activeInvitationCount: number;
 }
 
 export default function Dashboard() {
   const [stats, setStats] = useState<DashboardStats>({
     studyCount: 0,
-    participantCount: 0,
     activeInvitationCount: 0,
   });
   const [loading, setLoading] = useState(true);
@@ -34,8 +33,7 @@ export default function Dashboard() {
       
       // For now, just show study count
       setStats({
-        studyCount: studies.length,
-        participantCount: 0,
+        studyCount: studies.data.length,
         activeInvitationCount: 0,
       });
     } catch (error) {
@@ -59,35 +57,26 @@ export default function Dashboard() {
   }
 
   return (
-    <div className="container py-6 space-y-6">
+    <div className="space-y-6">
+      <Breadcrumb />
+      
       <div>
         <h1 className="text-2xl font-bold">Dashboard</h1>
         <p className="text-muted-foreground">Overview of your research studies</p>
       </div>
 
-      <div className="grid gap-4 md:grid-cols-3">
+      <div className="grid gap-4 md:grid-cols-2">
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <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 ? stats.studyCount : 0}</div>
+            <div className="text-2xl font-bold">{stats.studyCount}</div>
             <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">Total 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">Across all 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>
@@ -115,14 +104,6 @@ export default function Dashboard() {
               <BookOpen className="mr-2 h-4 w-4" />
               Manage Studies
             </Button>
-            <Button
-              variant="outline"
-              className="w-full justify-start"
-              onClick={() => router.push('/dashboard/participants')}
-            >
-              <Users className="mr-2 h-4 w-4" />
-              Manage Participants
-            </Button>
           </CardContent>
         </Card>
 
@@ -139,7 +120,7 @@ export default function Dashboard() {
               • Invite collaborators using study settings
             </p>
             <p className="text-sm text-muted-foreground">
-              • Add participants to begin collecting data
+              • Configure study parameters and forms
             </p>
           </CardContent>
         </Card>

src/app/dashboard/participants/page.tsx

@@ -0,0 +1,238 @@
+'use client';
+
+import { PlusIcon, Trash2Icon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "~/components/ui/button";
+import { 
+  Card, 
+  CardContent, 
+  CardHeader, 
+  CardTitle, 
+  CardDescription,
+  CardFooter 
+} from "~/components/ui/card";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "~/components/ui/select";
+import { usePermissions } from "~/hooks/usePermissions";
+
+interface Study {
+  id: number;
+  title: string;
+}
+
+interface Participant {
+  id: number;
+  name: string;
+  studyId: number;
+}
+
+export default function Participants() {
+  const [studies, setStudies] = useState<Study[]>([]);
+  const [participants, setParticipants] = useState<Participant[]>([]);
+  const [selectedStudyId, setSelectedStudyId] = useState<number | null>(null);
+  const [participantName, setParticipantName] = useState("");
+  const [loading, setLoading] = useState(true);
+  const { hasPermission } = usePermissions();
+
+  useEffect(() => {
+    fetchStudies();
+  }, []);
+
+  const fetchStudies = async () => {
+    try {
+      const response = await fetch('/api/studies');
+      const data = await response.json();
+      setStudies(data);
+    } catch (error) {
+      console.error('Error fetching studies:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchParticipants = async (studyId: number) => {
+    try {
+      console.log(`Fetching participants for studyId: ${studyId}`);
+      const response = await fetch(`/api/participants?studyId=${studyId}`);
+      
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      setParticipants(data);
+    } catch (error) {
+      console.error('Error fetching participants:', error);
+    }
+  };
+
+  const handleStudyChange = (studyId: string) => {
+    const id = parseInt(studyId); // Convert the string to a number
+    setSelectedStudyId(id);
+    fetchParticipants(id);
+  };
+
+  const addParticipant = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedStudyId) return;
+
+    try {
+      const response = await fetch(`/api/participants`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name: participantName,
+          studyId: selectedStudyId,
+        }),
+      });
+
+      if (response.ok) {
+        const newParticipant = await response.json();
+        setParticipants([...participants, newParticipant]);
+        setParticipantName("");
+      } else {
+        console.error('Error adding participant:', response.statusText);
+      }
+    } catch (error) {
+      console.error('Error adding participant:', error);
+    }
+  };
+
+  const deleteParticipant = async (id: number) => {
+    try {
+      const response = await fetch(`/api/participants/${id}`, {
+        method: 'DELETE',
+      });
+
+      if (response.ok) {
+        setParticipants(participants.filter(participant => participant.id !== id));
+      } else {
+        console.error('Error deleting participant:', response.statusText);
+      }
+    } catch (error) {
+      console.error('Error deleting participant:', error);
+    }
+  };
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <div className="flex justify-between items-center mb-8">
+        <h1 className="text-3xl font-bold">Participants</h1>
+      </div>
+
+      <Card className="mb-8">
+        <CardHeader>
+          <CardTitle>Study Selection</CardTitle>
+          <CardDescription>
+            Select a study to manage its participants
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-2">
+            <Label htmlFor="study">Select Study</Label>
+            <Select onValueChange={handleStudyChange}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select a study" />
+              </SelectTrigger>
+              <SelectContent>
+                {studies.map((study) => (
+                  <SelectItem key={study.id} value={study.id.toString()}>
+                    {study.title}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="mb-8">
+        <CardHeader>
+          <CardTitle>Add New Participant</CardTitle>
+          <CardDescription>
+            Add a new participant to the selected study
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={addParticipant} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">Participant Name</Label>
+              <Input
+                type="text"
+                id="name"
+                value={participantName}
+                onChange={(e) => setParticipantName(e.target.value)}
+                required
+              />
+            </div>
+            <Button type="submit" disabled={!selectedStudyId}>
+              <PlusIcon className="w-4 h-4 mr-2" />
+              Add Participant
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      <div className="grid gap-4">
+        {participants.map((participant) => (
+          <Card key={participant.id}>
+            <CardHeader>
+              <div className="flex justify-between items-start">
+                <div>
+                  <CardTitle>{participant.name}</CardTitle>
+                  <CardDescription className="mt-1.5">
+                    Participant ID: {participant.id}
+                  </CardDescription>
+                </div>
+                {hasPermission('DELETE_PARTICIPANT') && (
+                  <Button 
+                    variant="ghost" 
+                    size="icon"
+                    className="text-destructive"
+                    onClick={() => deleteParticipant(participant.id)}
+                  >
+                    <Trash2Icon className="w-4 h-4" />
+                  </Button>
+                )}
+              </div>
+            </CardHeader>
+            <CardFooter className="text-sm text-muted-foreground">
+              Study ID: {participant.studyId}
+            </CardFooter>
+          </Card>
+        ))}
+        {participants.length === 0 && selectedStudyId && (
+          <Card>
+            <CardContent className="py-8">
+              <p className="text-center text-muted-foreground">
+                No participants found for this study. Add one above to get started.
+              </p>
+            </CardContent>
+          </Card>
+        )}
+        {!selectedStudyId && (
+          <Card>
+            <CardContent className="py-8">
+              <p className="text-center text-muted-foreground">
+                Please select a study to view its participants.
+              </p>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,43 @@
+'use client';
+
+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({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { id } = useParams();
+  const { studies, activeStudy, setActiveStudy, isLoading } = useActiveStudy();
+
+  useEffect(() => {
+    if (studies.length > 0 && id) {
+      const study = studies.find(s => s.id === parseInt(id as string));
+      if (study && (!activeStudy || activeStudy.id !== study.id)) {
+        setActiveStudy(study);
+      }
+    }
+  }, [id, studies, activeStudy, setActiveStudy]);
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <div className="h-6">
+          <Skeleton className="h-4 w-[250px]" />
+        </div>
+        <Skeleton className="h-[400px]" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <Breadcrumb />
+      {children}
+    </div>
+  );
+} 

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

@@ -0,0 +1,172 @@
+'use client';
+
+import { 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 Link from "next/link";
+
+interface StudyStats {
+  participantCount: number;
+  completedTrialsCount: number;
+  pendingFormsCount: number;
+}
+
+export default function StudyDashboard() {
+  const [stats, setStats] = useState<StudyStats>({
+    participantCount: 0,
+    completedTrialsCount: 0,
+    pendingFormsCount: 0,
+  });
+  const [loading, setLoading] = useState(true);
+  const { id } = useParams();
+  const { toast } = useToast();
+
+  useEffect(() => {
+    fetchStudyStats();
+  }, [id]);
+
+  const fetchStudyStats = async () => {
+    try {
+      const response = await fetch(`/api/studies/${id}/stats`);
+      if (!response.ok) throw new Error("Failed to fetch study statistics");
+      const data = await response.json();
+      setStats(data.data);
+    } catch (error) {
+      console.error("Error fetching study stats:", error);
+      toast({
+        title: "Error",
+        description: "Failed to load study statistics",
+        variant: "destructive",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    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>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="grid gap-4 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>
+            <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>
+          </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>
+            <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>
+          </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/new/page.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { useToast } from "~/hooks/use-toast";
+import { ArrowLeft } 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";
+
+export default function NewParticipant() {
+  const [name, setName] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { id } = useParams();
+  const router = useRouter();
+  const { toast } = useToast();
+  const { activeStudy } = useActiveStudy();
+
+  useEffect(() => {
+    if (!activeStudy || !hasPermission(activeStudy.permissions, PERMISSIONS.CREATE_PARTICIPANT)) {
+      router.push(`/dashboard/studies/${id}`);
+    }
+  }, [activeStudy, id, router]);
+
+  if (!activeStudy || !hasPermission(activeStudy.permissions, PERMISSIONS.CREATE_PARTICIPANT)) {
+    return null;
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+
+    try {
+      const response = await fetch(`/api/studies/${id}/participants`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ name }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to create participant");
+      }
+
+      toast({
+        title: "Success",
+        description: "Participant created successfully",
+      });
+
+      router.push(`/dashboard/studies/${id}/participants`);
+    } catch (error) {
+      console.error("Error creating participant:", error);
+      toast({
+        title: "Error",
+        description: "Failed to create participant",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <Button
+          variant="ghost"
+          className="gap-2"
+          asChild
+        >
+          <Link href={`/dashboard/studies/${id}/participants`}>
+            <ArrowLeft className="h-4 w-4" />
+            Back to Participants
+          </Link>
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Add New Participant</CardTitle>
+          <CardDescription>
+            Create a new participant for {activeStudy?.title}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} 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" disabled={isSubmitting}>
+              {isSubmitting ? "Creating..." : "Create Participant"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+} 

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

@@ -0,0 +1,215 @@
+'use client';
+
+import { 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 { 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";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "~/components/ui/alert-dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table";
+
+interface Participant {
+  id: number;
+  name: string;
+  studyId: number;
+  createdAt: string;
+}
+
+export default function ParticipantsList() {
+  const [participants, setParticipants] = useState<Participant[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const { id } = useParams();
+  const { toast } = useToast();
+  const { activeStudy } = useActiveStudy();
+
+  const canCreateParticipant = activeStudy && hasPermission(activeStudy.permissions, PERMISSIONS.CREATE_PARTICIPANT);
+  const canDeleteParticipant = activeStudy && hasPermission(activeStudy.permissions, PERMISSIONS.DELETE_PARTICIPANT);
+  const canViewNames = activeStudy && hasPermission(activeStudy.permissions, PERMISSIONS.VIEW_PARTICIPANT_NAMES);
+
+  useEffect(() => {
+    fetchParticipants();
+  }, [id]);
+
+  const fetchParticipants = async () => {
+    try {
+      const response = await fetch(`/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 || []);
+    } catch (error) {
+      console.error("Error fetching participants:", error);
+      toast({
+        title: "Error",
+        description: "Failed to load participants",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDelete = async (participantId: number) => {
+    try {
+      const response = await fetch(`/api/studies/${id}/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",
+      });
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardContent className="py-8">
+          <p className="text-center text-muted-foreground">Loading participants...</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">Participants</h2>
+          <p className="text-muted-foreground">
+            Manage study participants and their data
+          </p>
+        </div>
+        {canCreateParticipant && (
+          <Button asChild>
+            <Link href={`/dashboard/studies/${id}/participants/new`}>
+              <Plus className="mr-2 h-4 w-4" />
+              Add Participant
+            </Link>
+          </Button>
+        )}
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Study Participants</CardTitle>
+          <CardDescription>
+            All participants enrolled in {activeStudy?.title}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {participants.length > 0 ? (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>ID</TableHead>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Added</TableHead>
+                  {canDeleteParticipant && <TableHead className="w-[100px]">Actions</TableHead>}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {participants.map((participant) => (
+                  <TableRow key={participant.id}>
+                    <TableCell>{participant.id}</TableCell>
+                    <TableCell>
+                      {canViewNames ? participant.name : `Participant ${participant.id}`}
+                    </TableCell>
+                    <TableCell>
+                      {new Date(participant.createdAt).toLocaleDateString()}
+                    </TableCell>
+                    {canDeleteParticipant && (
+                      <TableCell>
+                        <AlertDialog>
+                          <AlertDialogTrigger asChild>
+                            <Button variant="ghost" size="icon">
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                          </AlertDialogTrigger>
+                          <AlertDialogContent>
+                            <AlertDialogHeader>
+                              <AlertDialogTitle>Delete Participant</AlertDialogTitle>
+                              <AlertDialogDescription>
+                                Are you sure you want to delete this participant? This action cannot be undone.
+                              </AlertDialogDescription>
+                            </AlertDialogHeader>
+                            <AlertDialogFooter>
+                              <AlertDialogCancel>Cancel</AlertDialogCancel>
+                              <AlertDialogAction
+                                onClick={() => handleDelete(participant.id)}
+                                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                              >
+                                Delete
+                              </AlertDialogAction>
+                            </AlertDialogFooter>
+                          </AlertDialogContent>
+                        </AlertDialog>
+                      </TableCell>
+                    )}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          ) : (
+            <div className="py-8 text-center text-muted-foreground">
+              No participants added yet
+              {canCreateParticipant && (
+                <>
+                  .{" "}
+                  <Link
+                    href={`/dashboard/studies/${id}/participants/new`}
+                    className="font-medium text-primary hover:underline"
+                  >
+                    Add your first participant
+                  </Link>
+                </>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+} 

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

@@ -1,11 +1,15 @@
 'use client';
 
 import { useState } from "react";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
+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 { cn } from "~/lib/utils";
 
 interface Study {
   id: number;
@@ -18,17 +22,32 @@ 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 { id } = useParams();
   const router = useRouter();
-  const searchParams = useSearchParams();
-  const tab = searchParams.get('tab') || 'settings';
 
   useEffect(() => {
     const fetchStudy = async () => {
       try {
         const response = await fetch(`/api/studies/${id}`);
-        if (!response.ok) throw new Error("Failed to fetch study");
+        if (!response.ok) {
+          if (response.status === 403) {
+            router.push('/dashboard/studies');
+            return;
+          }
+          throw new Error("Failed to fetch study");
+        }
         const data = await response.json();
+        
+        // Check if user has any required permissions
+        const requiredPermissions = [PERMISSIONS.EDIT_STUDY, PERMISSIONS.MANAGE_ROLES];
+        const hasAccess = data.data.permissions.some(p => requiredPermissions.includes(p));
+
+        if (!hasAccess) {
+          router.push('/dashboard/studies');
+          return;
+        }
+
         setStudy(data.data);
       } catch (error) {
         console.error("Error fetching study:", error);
@@ -39,43 +58,65 @@ export default function StudySettings() {
     };
 
     fetchStudy();
-  }, [id]);
-
-  const handleTabChange = (value: string) => {
-    router.push(`/dashboard/studies/${id}/settings?tab=${value}`);
-  };
+  }, [id, router]);
 
   if (isLoading) {
-    return <div className="container py-6">Loading...</div>;
+    return <div>Loading...</div>;
   }
 
   if (error || !study) {
-    return <div className="container py-6 text-destructive">{error || "Study not found"}</div>;
+    return <div>Error: {error}</div>;
   }
 
   return (
-    <div className="container py-6 space-y-6">
-      <div className="flex flex-col gap-2">
+    <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 and participants
+          Manage study settings, participants, and team members
         </p>
       </div>
 
-      <Tabs value={tab} onValueChange={handleTabChange} className="space-y-6">
-        <TabsList>
-          <TabsTrigger value="settings">Settings</TabsTrigger>
-          <TabsTrigger value="participants">Participants</TabsTrigger>
-        </TabsList>
+      <div className="flex gap-6">
+        <div className="w-48 flex flex-col gap-2">
+          <Button
+            variant={activeTab === 'settings' ? 'secondary' : 'ghost'}
+            className="justify-start"
+            onClick={() => setActiveTab('settings')}
+          >
+            <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"
+            onClick={() => setActiveTab('users')}
+          >
+            <UsersIcon className="mr-2 h-4 w-4" />
+            Users
+          </Button>
+        </div>
 
-        <TabsContent value="settings" className="space-y-6">
-          <SettingsTab study={study} />
-        </TabsContent>
-
-        <TabsContent value="participants" className="space-y-6">
-          <ParticipantsTab studyId={study.id} permissions={study.permissions} />
-        </TabsContent>
-      </Tabs>
+        <div className="flex-1">
+          <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>
+        </div>
+      </div>
     </div>
   );
 } 

src/app/dashboard/studies/new/page.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Button } from "~/components/ui/button";
+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 { ArrowLeft } 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";
+
+export default function NewStudy() {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const router = useRouter();
+  const { toast } = useToast();
+  const { refreshStudies } = useActiveStudy();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+
+    try {
+      const response = await fetch('/api/studies', {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ title, description }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to create study");
+      }
+
+      const data = await response.json();
+      
+      toast({
+        title: "Success",
+        description: "Study created successfully",
+      });
+
+      // Refresh studies list and redirect to the new study
+      await refreshStudies();
+      router.push(`/dashboard/studies/${data.data.id}`);
+    } catch (error) {
+      console.error("Error creating study:", error);
+      toast({
+        title: "Error",
+        description: "Failed to create study",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <Button
+          variant="ghost"
+          className="gap-2"
+          asChild
+        >
+          <Link href="/dashboard/studies">
+            <ArrowLeft className="h-4 w-4" />
+            Back to Studies
+          </Link>
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Create New Study</CardTitle>
+          <CardDescription>
+            Set up a new research study
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} 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"
+                rows={4}
+              />
+            </div>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? "Creating..." : "Create Study"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+} 

src/app/dashboard/studies/page.tsx

@@ -250,7 +250,11 @@ export default function Studies() {
           <Card>
             <CardContent className="py-8">
               <p className="text-center text-muted-foreground">
-                No studies created yet. Create your first study above.
+                No studies created yet.{' '}
+                {hasPermission(studies[0]?.permissions || [], PERMISSIONS.CREATE_STUDY) 
+                  ? "Create your first study above."
+                  : "Ask your administrator to create your first study."
+                }
               </p>
             </CardContent>
           </Card>