Consolidate global routes into study-scoped architecture

Removed global participants, trials, and analytics routes. All entity
management now flows through study-specific routes. Updated navigation,
breadcrumbs, and forms. Added helpful redirect pages for moved routes.
Eliminated duplicate table components and unified navigation patterns.
Fixed dashboard route structure and layout inheritance.

src/components/participants/ParticipantForm.tsx

@@ -126,19 +126,22 @@ export function ParticipantForm({
             ? [
                 {
                   label: participant.name ?? participant.participantCode,
-                  href: `/participants/${participant.id}`,
+                  href: `/studies/${contextStudyId}/participants/${participant.id}`,
                 },
                 { label: "Edit" },
               ]
             : [{ label: "New Participant" }]),
         ]
       : [
-          { label: "Participants", href: "/participants" },
+          {
+            label: "Participants",
+            href: `/studies/${contextStudyId}/participants`,
+          },
           ...(mode === "edit" && participant
             ? [
                 {
                   label: participant.name ?? participant.participantCode,
-                  href: `/participants/${participant.id}`,
+                  href: `/studies/${contextStudyId}/participants/${participant.id}`,
                 },
                 { label: "Edit" },
               ]
@@ -228,7 +231,7 @@ export function ParticipantForm({
 
     try {
       await deleteParticipantMutation.mutateAsync({ id: participantId });
-      router.push("/participants");
+      router.push(`/studies/${contextStudyId}/participants`);
     } catch (error) {
       setError(
         `Failed to delete participant: ${error instanceof Error ? error.message : "Unknown error"}`,
@@ -483,8 +486,8 @@ export function ParticipantForm({
       mode={mode}
       entityName="Participant"
       entityNamePlural="Participants"
-      backUrl="/participants"
-      listUrl="/participants"
+      backUrl={`/studies/${contextStudyId}/participants`}
+      listUrl={`/studies/${contextStudyId}/participants`}
       title={
         mode === "create"
           ? "Register New Participant"

src/components/participants/participants-columns.tsx

@@ -1,283 +0,0 @@
-"use client";
-
-import { type ColumnDef } from "@tanstack/react-table";
-import { formatDistanceToNow } from "date-fns";
-import {
-  Copy,
-  Edit,
-  Eye,
-  Mail,
-  MoreHorizontal,
-  TestTube,
-  Trash2,
-  User,
-} from "lucide-react";
-import Link from "next/link";
-
-import { toast } from "sonner";
-import { Badge } from "~/components/ui/badge";
-import { Button } from "~/components/ui/button";
-import { Checkbox } from "~/components/ui/checkbox";
-import { DataTableColumnHeader } from "~/components/ui/data-table-column-header";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu";
-
-export type Participant = {
-  id: string;
-  participantCode: string;
-  email: string | null;
-  name: string | null;
-  consentGiven: boolean;
-  consentDate: Date | null;
-  createdAt: Date;
-  trialCount: number;
-  userRole?: "owner" | "researcher" | "wizard" | "observer";
-  canEdit?: boolean;
-  canDelete?: boolean;
-};
-
-function ParticipantActionsCell({ participant }: { participant: Participant }) {
-  const handleDelete = async () => {
-    if (
-      window.confirm(
-        `Are you sure you want to delete participant "${participant.name ?? participant.participantCode}"?`,
-      )
-    ) {
-      try {
-        // TODO: Implement delete participant mutation
-        toast.success("Participant deleted successfully");
-      } catch {
-        toast.error("Failed to delete participant");
-      }
-    }
-  };
-
-  const handleCopyId = () => {
-    void navigator.clipboard.writeText(participant.id);
-    toast.success("Participant ID copied to clipboard");
-  };
-
-  const handleCopyCode = () => {
-    void navigator.clipboard.writeText(participant.participantCode);
-    toast.success("Participant code copied to clipboard");
-  };
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="h-8 w-8 p-0">
-          <span className="sr-only">Open menu</span>
-          <MoreHorizontal className="h-4 w-4" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuLabel>Actions</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-
-        <DropdownMenuItem asChild>
-          <Link href={`/participants/${participant.id}`}>
-            <Eye className="mr-2 h-4 w-4" />
-            View Details
-          </Link>
-        </DropdownMenuItem>
-
-        {participant.canEdit && (
-          <DropdownMenuItem asChild>
-            <Link href={`/participants/${participant.id}/edit`}>
-              <Edit className="mr-2 h-4 w-4" />
-              Edit Participant
-            </Link>
-          </DropdownMenuItem>
-        )}
-
-        <DropdownMenuSeparator />
-
-        <DropdownMenuItem onClick={handleCopyId}>
-          <Copy className="mr-2 h-4 w-4" />
-          Copy Participant ID
-        </DropdownMenuItem>
-
-        <DropdownMenuItem onClick={handleCopyCode}>
-          <Copy className="mr-2 h-4 w-4" />
-          Copy Participant Code
-        </DropdownMenuItem>
-
-        {!participant.consentGiven && (
-          <DropdownMenuItem>
-            <Mail className="mr-2 h-4 w-4" />
-            Send Consent Form
-          </DropdownMenuItem>
-        )}
-
-        {participant.canDelete && (
-          <>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              onClick={handleDelete}
-              className="text-red-600 focus:text-red-600"
-            >
-              <Trash2 className="mr-2 h-4 w-4" />
-              Delete Participant
-            </DropdownMenuItem>
-          </>
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-export const participantsColumns: ColumnDef<Participant>[] = [
-  {
-    id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
-        }
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={(value) => row.toggleSelected(!!value)}
-        aria-label="Select row"
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: "participantCode",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Code" />
-    ),
-    cell: ({ row }) => (
-      <div className="font-mono text-sm">
-        <Link
-          href={`/participants/${row.original.id}`}
-          className="hover:underline"
-        >
-          {row.getValue("participantCode")}
-        </Link>
-      </div>
-    ),
-  },
-  {
-    accessorKey: "name",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Name" />
-    ),
-    cell: ({ row }) => {
-      const name = row.original.name;
-      const email = row.original.email;
-      return (
-        <div className="max-w-[160px] space-y-1">
-          <div className="flex items-center space-x-2">
-            <User className="text-muted-foreground h-3 w-3 flex-shrink-0" />
-            <span
-              className="truncate font-medium"
-              title={name ?? "No name provided"}
-            >
-              {name ?? "No name provided"}
-            </span>
-          </div>
-          {email && (
-            <div className="text-muted-foreground flex items-center space-x-1 text-xs">
-              <Mail className="h-3 w-3 flex-shrink-0" />
-              <span className="truncate" title={email ?? ""}>
-                {email ?? ""}
-              </span>
-            </div>
-          )}
-        </div>
-      );
-    },
-  },
-  {
-    accessorKey: "consentGiven",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Consent" />
-    ),
-    cell: ({ row }) => {
-      const consentGiven = row.getValue("consentGiven");
-      const consentDate = row.original.consentDate;
-
-      if (consentGiven) {
-        return (
-          <Badge
-            variant="secondary"
-            className="bg-green-100 whitespace-nowrap text-green-800"
-            title={
-              consentDate
-                ? `Consented on ${consentDate.toLocaleDateString()}`
-                : "Consented"
-            }
-          >
-            Consented
-          </Badge>
-        );
-      }
-
-      return (
-        <Badge
-          variant="secondary"
-          className="bg-red-100 whitespace-nowrap text-red-800"
-        >
-          Pending
-        </Badge>
-      );
-    },
-    filterFn: (row, id, value) => {
-      const consentGiven = row.getValue(id);
-      if (value === "consented") return !!consentGiven;
-      if (value === "pending") return !consentGiven;
-      return true;
-    },
-  },
-  {
-    accessorKey: "trialCount",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Trials" />
-    ),
-    cell: ({ row }) => {
-      const trialCount = row.original.trialCount;
-
-      return (
-        <div className="flex items-center space-x-1 text-sm whitespace-nowrap">
-          <TestTube className="text-muted-foreground h-3 w-3" />
-          <span>{trialCount ?? 0}</span>
-        </div>
-      );
-    },
-  },
-  {
-    accessorKey: "createdAt",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Created" />
-    ),
-    cell: ({ row }) => {
-      const date = row.original.createdAt;
-      return (
-        <div className="text-sm whitespace-nowrap">
-          {formatDistanceToNow(date ?? new Date(), { addSuffix: true })}
-        </div>
-      );
-    },
-  },
-  {
-    id: "actions",
-    header: "Actions",
-    cell: ({ row }) => <ParticipantActionsCell participant={row.original} />,
-    enableSorting: false,
-    enableHiding: false,
-  },
-];

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

@@ -1,189 +0,0 @@
-"use client";
-
-import { Plus, Users } from "lucide-react";
-import React from "react";
-
-import { Button } from "~/components/ui/button";
-import { DataTable } from "~/components/ui/data-table";
-
-import { useBreadcrumbsEffect } from "~/components/ui/breadcrumb-provider";
-import { ActionButton, PageHeader } from "~/components/ui/page-header";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "~/components/ui/select";
-import { useStudyContext } from "~/lib/study-context";
-import { api } from "~/trpc/react";
-import { participantsColumns, type Participant } from "./participants-columns";
-
-export function ParticipantsDataTable() {
-  const [consentFilter, setConsentFilter] = React.useState("all");
-  const { selectedStudyId } = useStudyContext();
-
-  const {
-    data: participantsData,
-    isLoading,
-    error,
-    refetch,
-  } = api.participants.getUserParticipants.useQuery(
-    {
-      page: 1,
-      limit: 50,
-    },
-    {
-      refetchOnWindowFocus: false,
-    },
-  );
-
-  // Auto-refresh participants when component mounts to catch external changes
-  React.useEffect(() => {
-    const interval = setInterval(() => {
-      void refetch();
-    }, 30000); // Refresh every 30 seconds
-
-    return () => clearInterval(interval);
-  }, [refetch]);
-
-  // Get study data for breadcrumbs
-  const { data: studyData } = api.studies.get.useQuery(
-    { id: selectedStudyId! },
-    { enabled: !!selectedStudyId },
-  );
-
-  // Set breadcrumbs
-  useBreadcrumbsEffect([
-    { label: "Dashboard", href: "/dashboard" },
-    { label: "Studies", href: "/studies" },
-    ...(selectedStudyId && studyData
-      ? [
-          { label: studyData.name, href: `/studies/${selectedStudyId}` },
-          { label: "Participants" },
-        ]
-      : [{ label: "Participants" }]),
-  ]);
-
-  // Transform participants data to match the Participant type expected by columns
-  const participants: Participant[] = React.useMemo(() => {
-    if (!participantsData?.participants) return [];
-
-    return participantsData.participants.map((p) => ({
-      id: p.id,
-      participantCode: p.participantCode,
-      email: p.email,
-      name: p.name,
-      consentGiven:
-        (p as unknown as { hasConsent?: boolean }).hasConsent ?? false,
-      consentDate: (p as unknown as { latestConsent?: { signedAt: string } })
-        .latestConsent?.signedAt
-        ? new Date(
-            (
-              p as unknown as { latestConsent: { signedAt: string } }
-            ).latestConsent.signedAt,
-          )
-        : null,
-      createdAt: p.createdAt,
-      trialCount: (p as unknown as { trialCount?: number }).trialCount ?? 0,
-      userRole: undefined,
-      canEdit: true,
-      canDelete: true,
-    }));
-  }, [participantsData]);
-
-  // Consent filter options
-  const consentOptions = [
-    { label: "All Participants", value: "all" },
-    { label: "Consented", value: "consented" },
-    { label: "Pending Consent", value: "pending" },
-  ];
-
-  // Filter participants based on selected filters
-  const filteredParticipants = React.useMemo(() => {
-    return participants.filter((participant) => {
-      if (consentFilter === "all") return true;
-      if (consentFilter === "consented") return participant.consentGiven;
-      if (consentFilter === "pending") return !participant.consentGiven;
-      return true;
-    });
-  }, [participants, consentFilter]);
-
-  const filters = (
-    <div className="flex items-center space-x-2">
-      <Select value={consentFilter} onValueChange={setConsentFilter}>
-        <SelectTrigger className="h-8 w-[160px]">
-          <SelectValue placeholder="Consent Status" />
-        </SelectTrigger>
-        <SelectContent>
-          {consentOptions.map((option) => (
-            <SelectItem key={option.value} value={option.value}>
-              {option.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    </div>
-  );
-
-  // Show error state
-  if (error) {
-    return (
-      <div className="space-y-6">
-        <PageHeader
-          title="Participants"
-          description="Manage participant registration, consent, and trial assignments"
-          icon={Users}
-          actions={
-            <ActionButton href="/participants/new">
-              <Plus className="mr-2 h-4 w-4" />
-              Add Participant
-            </ActionButton>
-          }
-        />
-        <div className="rounded-lg border border-red-200 bg-red-50 p-6 text-center">
-          <div className="text-red-800">
-            <h3 className="mb-2 text-lg font-semibold">
-              Failed to Load Participants
-            </h3>
-            <p className="mb-4">
-              {error.message || "An error occurred while loading participants."}
-            </p>
-            <Button onClick={() => refetch()} variant="outline">
-              Try Again
-            </Button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      <PageHeader
-        title="Participants"
-        description="Manage participant registration, consent, and trial assignments"
-        icon={Users}
-        actions={
-          <ActionButton href="/participants/new">
-            <Plus className="mr-2 h-4 w-4" />
-            Add Participant
-          </ActionButton>
-        }
-      />
-
-      <div className="space-y-4">
-        {/* Data Table */}
-        <DataTable
-          columns={participantsColumns}
-          data={filteredParticipants}
-          searchKey="name"
-          searchPlaceholder="Search participants..."
-          isLoading={isLoading}
-          loadingRowCount={5}
-          filters={filters}
-        />
-      </div>
-    </div>
-  );
-}