chore(deps): Update dependencies and enhance API error handling

- Added '@vercel/analytics' to package.json for improved analytics tracking.
- Updated 'next' version from 15.0.2 to 15.0.3 to incorporate the latest features and fixes.
- Refactored API routes for invitations and studies to improve error handling and response structure.
- Enhanced permission checks in the invitations and studies API to ensure proper access control.
- Removed the participants dashboard page as part of a restructuring effort.
- Updated the database schema to include environment settings for users and studies.
- Improved the dashboard components to handle loading states and display statistics more effectively.

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

@@ -1,201 +1,79 @@
 'use client';
 
-import { useEffect, useState } from "react";
-import { useParams } from "next/navigation";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { useState } from "react";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
-import { InviteUserDialog } from "~/components/invite-user-dialog";
-import { Button } from "~/components/ui/button";
-import { Loader2 } from "lucide-react";
-import { useToast } from "~/hooks/use-toast";
+import { SettingsTab } from "~/components/studies/settings-tab";
+import { ParticipantsTab } from "~/components/studies/participants-tab";
+import { useEffect } from "react";
 
 interface Study {
   id: number;
   title: string;
-  description: string;
+  description: string | null;
+  permissions: string[];
 }
 
-interface Invitation {
-  id: string;
-  email: string;
-  roleName: string;
-  accepted: boolean;
-  expiresAt: string;
-}
-
-export default function StudySettingsPage() {
-  const params = useParams();
+export default function StudySettings() {
   const [study, setStudy] = useState<Study | null>(null);
-  const [invitations, setInvitations] = useState<Invitation[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const { toast } = useToast();
-
-  const fetchStudyData = async () => {
-    try {
-      const response = await fetch(`/api/studies/${params.id}`);
-      if (!response.ok) throw new Error("Failed to fetch study");
-      const data = await response.json();
-      setStudy(data);
-    } catch (error) {
-      setError("Failed to load study details");
-      console.error("Error fetching study:", error);
-      toast({
-        title: "Error",
-        description: "Failed to load study details",
-        variant: "destructive",
-      });
-    }
-  };
-
-  const fetchInvitations = async () => {
-    try {
-      const response = await fetch(`/api/invitations?studyId=${params.id}`);
-      if (!response.ok) throw new Error("Failed to fetch invitations");
-      const data = await response.json();
-      setInvitations(data);
-    } catch (error) {
-      setError("Failed to load invitations");
-      console.error("Error fetching invitations:", error);
-      toast({
-        title: "Error",
-        description: "Failed to load invitations",
-        variant: "destructive",
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  };
+  const { id } = useParams();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const tab = searchParams.get('tab') || 'settings';
 
   useEffect(() => {
-    const loadData = async () => {
-      await Promise.all([fetchStudyData(), fetchInvitations()]);
-    };
-    loadData();
-  }, [params.id]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const handleDeleteInvitation = async (invitationId: string) => {
-    try {
-      const response = await fetch(`/api/invitations/${invitationId}`, {
-        method: "DELETE",
-      });
-
-      if (!response.ok) {
-        throw new Error("Failed to delete invitation");
+    const fetchStudy = async () => {
+      try {
+        const response = await fetch(`/api/studies/${id}`);
+        if (!response.ok) throw new Error("Failed to fetch study");
+        const data = await response.json();
+        setStudy(data.data);
+      } catch (error) {
+        console.error("Error fetching study:", error);
+        setError(error instanceof Error ? error.message : "Failed to load study");
+      } finally {
+        setIsLoading(false);
       }
+    };
 
-      // Update local state
-      setInvitations(invitations.filter(inv => inv.id !== invitationId));
-      
-      toast({
-        title: "Success",
-        description: "Invitation deleted successfully",
-      });
-    } catch (error) {
-      console.error("Error deleting invitation:", error);
-      toast({
-        title: "Error",
-        description: "Failed to delete invitation",
-        variant: "destructive",
-      });
-    }
+    fetchStudy();
+  }, [id]);
+
+  const handleTabChange = (value: string) => {
+    router.push(`/dashboard/studies/${id}/settings?tab=${value}`);
   };
 
   if (isLoading) {
-    return (
-      <div className="flex items-center justify-center min-h-[400px]">
-        <Loader2 className="h-8 w-8 animate-spin" />
-      </div>
-    );
+    return <div className="container py-6">Loading...</div>;
   }
 
-  if (error) {
-    return (
-      <div className="flex items-center justify-center min-h-[400px]">
-        <p className="text-red-500">{error}</p>
-      </div>
-    );
-  }
-
-  if (!study) {
-    return (
-      <div className="flex items-center justify-center min-h-[400px]">
-        <p className="text-gray-500">Study not found</p>
-      </div>
-    );
+  if (error || !study) {
+    return <div className="container py-6 text-destructive">{error || "Study not found"}</div>;
   }
 
   return (
     <div className="container py-6 space-y-6">
-      <div>
-        <h1 className="text-2xl font-bold">{study.title}</h1>
-        <p className="text-muted-foreground">{study.description}</p>
+      <div className="flex flex-col gap-2">
+        <h1 className="text-3xl font-bold tracking-tight">{study.title}</h1>
+        <p className="text-muted-foreground">
+          Manage study settings and participants
+        </p>
       </div>
 
-      <Tabs defaultValue="invites" className="space-y-4">
+      <Tabs value={tab} onValueChange={handleTabChange} className="space-y-6">
         <TabsList>
-          <TabsTrigger value="invites">Invites</TabsTrigger>
           <TabsTrigger value="settings">Settings</TabsTrigger>
+          <TabsTrigger value="participants">Participants</TabsTrigger>
         </TabsList>
-        
-        <TabsContent value="invites">
-          <Card>
-            <CardHeader>
-              <CardTitle>Manage Invitations</CardTitle>
-              <CardDescription>
-                Invite researchers and participants to collaborate on &ldquo;{study.title}&rdquo;
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6">
-              <div>
-                <InviteUserDialog studyId={study.id} onInviteSent={fetchInvitations} />
-              </div>
 
-              {invitations.length > 0 ? (
-                <div className="space-y-4">
-                  {invitations.map((invitation) => (
-                    <div
-                      key={invitation.id}
-                      className="flex items-center justify-between p-4 border rounded-lg bg-card"
-                    >
-                      <div>
-                        <p className="font-medium">{invitation.email}</p>
-                        <p className="text-sm text-muted-foreground">
-                          Role: {invitation.roleName}
-                          {invitation.accepted ? " • Accepted" : " • Pending"}
-                        </p>
-                      </div>
-                      {!invitation.accepted && (
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => handleDeleteInvitation(invitation.id)}
-                        >
-                          Cancel
-                        </Button>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <p className="text-muted-foreground">No invitations sent yet.</p>
-              )}
-            </CardContent>
-          </Card>
+        <TabsContent value="settings" className="space-y-6">
+          <SettingsTab study={study} />
         </TabsContent>
-        
-        <TabsContent value="settings">
-          <Card>
-            <CardHeader>
-              <CardTitle>Study Settings</CardTitle>
-              <CardDescription>
-                Configure study settings and permissions
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <p className="text-muted-foreground">Settings coming soon...</p>
-            </CardContent>
-          </Card>
+
+        <TabsContent value="participants" className="space-y-6">
+          <ParticipantsTab studyId={study.id} permissions={study.permissions} />
         </TabsContent>
       </Tabs>
     </div>