Enhance development standards and UI components

- Updated .rules to enforce stricter UI/UX standards, including exclusive use of Lucide icons and consistent patterns for entity view pages.
- Added new UI components for entity views, including headers, sections, and quick actions to improve layout and reusability.
- Refactored existing pages (experiments, participants, studies, trials) to utilize the new entity view components, enhancing consistency across the dashboard.
- Improved accessibility and user experience by implementing loading states and error boundaries in async operations.
- Updated package dependencies to ensure compatibility and performance improvements.

Features:
- Comprehensive guidelines for component reusability and visual consistency.
- Enhanced user interface with new entity view components for better organization and navigation.

Breaking Changes: None - existing functionality remains intact.

src/components/trials/trials-columns.tsx

@@ -70,6 +70,7 @@ export type Trial = {
     logs: number;
   };
   userRole?: "owner" | "researcher" | "wizard" | "observer";
+  canAccess?: boolean;
   canEdit?: boolean;
   canDelete?: boolean;
   canExecute?: boolean;
@@ -162,12 +163,19 @@ function TrialActionsCell({ trial }: { trial: Trial }) {
         <DropdownMenuLabel>Actions</DropdownMenuLabel>
         <DropdownMenuSeparator />
 
-        <DropdownMenuItem asChild>
-          <Link href={`/trials/${trial.id}`}>
+        {trial.canAccess ? (
+          <DropdownMenuItem asChild>
+            <Link href={`/trials/${trial.id}`}>
+              <Eye className="mr-2 h-4 w-4" />
+              View Details
+            </Link>
+          </DropdownMenuItem>
+        ) : (
+          <DropdownMenuItem disabled>
             <Eye className="mr-2 h-4 w-4" />
-            View Details
-          </Link>
-        </DropdownMenuItem>
+            View Details (Restricted)
+          </DropdownMenuItem>
+        )}
 
         {trial.canEdit && (
           <DropdownMenuItem asChild>
@@ -272,13 +280,33 @@ export const trialsColumns: ColumnDef<Trial>[] = [
       const trial = row.original;
       return (
         <div className="max-w-[140px] min-w-0">
-          <Link
-            href={`/trials/${trial.id}`}
-            className="block truncate font-medium hover:underline"
-            title={trial.name}
-          >
-            {trial.name}
-          </Link>
+          <div className="flex items-center gap-2">
+            {trial.canAccess ? (
+              <Link
+                href={`/trials/${trial.id}`}
+                className="block truncate font-medium hover:underline"
+                title={trial.name}
+              >
+                {trial.name}
+              </Link>
+            ) : (
+              <div
+                className="text-muted-foreground block cursor-not-allowed truncate font-medium"
+                title={`${trial.name} (View access restricted)`}
+              >
+                {trial.name}
+              </div>
+            )}
+            {!trial.canAccess && (
+              <Badge
+                variant="outline"
+                className="ml-auto shrink-0 border-amber-200 bg-amber-50 text-amber-700"
+                title={`Access restricted - You are an ${trial.userRole || "observer"} on this study`}
+              >
+                {trial.userRole === "observer" ? "View Only" : "Restricted"}
+              </Badge>
+            )}
+          </div>
         </div>
       );
     },
@@ -290,16 +318,28 @@ export const trialsColumns: ColumnDef<Trial>[] = [
     ),
     cell: ({ row }) => {
       const status = row.getValue("status") as Trial["status"];
+      const trial = row.original;
       const config = statusConfig[status];
 
       return (
-        <Badge
-          variant="secondary"
-          className={`${config.className} whitespace-nowrap`}
-          title={config.description}
-        >
-          {config.label}
-        </Badge>
+        <div className="flex flex-col gap-1">
+          <Badge
+            variant="secondary"
+            className={`${config.className} whitespace-nowrap`}
+            title={config.description}
+          >
+            {config.label}
+          </Badge>
+          {trial.userRole && (
+            <Badge
+              variant="outline"
+              className="text-xs"
+              title={`Your role in this study: ${trial.userRole}`}
+            >
+              {trial.userRole}
+            </Badge>
+          )}
+        </div>
       );
     },
     filterFn: (row, id, value: string[]) => {

src/components/trials/trials-data-table.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { Plus, TestTube } from "lucide-react";
+import { Plus, TestTube, Eye } from "lucide-react";
 
 import { Button } from "~/components/ui/button";
 import { DataTable } from "~/components/ui/data-table";
@@ -111,14 +111,19 @@ export function TrialsDataTable() {
         actions: trial._count?.events ?? 0,
         logs: trial._count?.mediaCaptures ?? 0,
       },
-      userRole: undefined,
-      canEdit: trial.status === "scheduled" || trial.status === "aborted",
+      userRole: trial.userRole,
+      canAccess: trial.canAccess ?? false,
+      canEdit:
+        trial.canAccess &&
+        (trial.status === "scheduled" || trial.status === "aborted"),
       canDelete:
-        trial.status === "scheduled" ||
-        trial.status === "aborted" ||
-        trial.status === "failed",
+        trial.canAccess &&
+        (trial.status === "scheduled" ||
+          trial.status === "aborted" ||
+          trial.status === "failed"),
       canExecute:
-        trial.status === "scheduled" || trial.status === "in_progress",
+        trial.canAccess &&
+        (trial.status === "scheduled" || trial.status === "in_progress"),
     }));
   }, [trialsData]);
 
@@ -204,6 +209,29 @@ export function TrialsDataTable() {
       />
 
       <div className="space-y-4">
+        {filteredTrials.some((trial) => !trial.canAccess) && (
+          <div className="rounded-lg border border-amber-200 bg-amber-50 p-4">
+            <div className="flex items-start gap-3">
+              <div className="mt-0.5 flex-shrink-0">
+                <div className="rounded-full bg-amber-100 p-1">
+                  <Eye className="h-4 w-4 text-amber-600" />
+                </div>
+              </div>
+              <div>
+                <h3 className="text-sm font-medium text-amber-800">
+                  Limited Trial Access
+                </h3>
+                <p className="mt-1 text-sm text-amber-700">
+                  Some trials are marked as "View Only" or "Restricted" because
+                  you have observer-level access to their studies. Only
+                  researchers, wizards, and study owners can view detailed trial
+                  information.
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
         <DataTable
           columns={trialsColumns}
           data={filteredTrials}