refactor: restructure study and participant forms into logical sections with separators and enhance EntityForm's layout flexibility for sidebar presence.

2026-03-23 19:27:51 -04:00 · 2026-02-10 16:31:43 -05:00
parent a8c868ad3f
commit 85b951f742
4 changed files with 313 additions and 261 deletions
--- a/src/components/participants/ParticipantForm.tsx
+++ b/src/components/participants/ParticipantForm.tsx
@@ -256,14 +256,15 @@ export function ParticipantForm({
    <>
      <FormSection
        title="Participant Information"
-        description="Basic information about the research participant."
+        description="Basic identity and study association."
      >
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <FormField>
            <Label htmlFor="participantCode">Participant Code *</Label>
            <Input
              id="participantCode"
              {...form.register("participantCode")}
-            placeholder="e.g., P001, SUBJ_01, etc."
+              placeholder="e.g., P001"
              className={
                form.formState.errors.participantCode ? "border-red-500" : ""
              }
@@ -273,9 +274,6 @@ export function ParticipantForm({
                {form.formState.errors.participantCode.message}
              </p>
            )}
-          <p className="text-muted-foreground text-xs">
-            Unique identifier for this participant within the study
-          </p>
          </FormField>

          <FormField>
@@ -283,7 +281,7 @@ export function ParticipantForm({
            <Input
              id="name"
              {...form.register("name")}
-            placeholder="Optional: Participant's full name"
+              placeholder="Optional name"
              className={form.formState.errors.name ? "border-red-500" : ""}
            />
            {form.formState.errors.name && (
@@ -291,9 +289,6 @@ export function ParticipantForm({
                {form.formState.errors.name.message}
              </p>
            )}
-          <p className="text-muted-foreground text-xs">
-            Optional: Real name for contact purposes
-          </p>
          </FormField>

          <FormField>
@@ -310,11 +305,17 @@ export function ParticipantForm({
                {form.formState.errors.email.message}
              </p>
            )}
-          <p className="text-muted-foreground text-xs">
-            Optional: For scheduling and communication
-          </p>
          </FormField>
+        </div>
+      </FormSection>

+      <div className="my-6" />
+
+      <FormSection
+        title="Demographics & Study"
+        description="study association and demographic details."
+      >
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <FormField>
            <Label htmlFor="studyId">Study *</Label>
            <Select
@@ -323,11 +324,13 @@ export function ParticipantForm({
              disabled={studiesLoading || mode === "edit"}
            >
              <SelectTrigger
-              className={form.formState.errors.studyId ? "border-red-500" : ""}
+                className={
+                  form.formState.errors.studyId ? "border-red-500" : ""
+                }
              >
                <SelectValue
                  placeholder={
-                  studiesLoading ? "Loading studies..." : "Select a study"
+                    studiesLoading ? "Loading..." : "Select study"
                  }
                />
              </SelectTrigger>
@@ -344,18 +347,8 @@ export function ParticipantForm({
                {form.formState.errors.studyId.message}
              </p>
            )}
-          {mode === "edit" && (
-            <p className="text-muted-foreground text-xs">
-              Study cannot be changed after registration
-            </p>
-          )}
          </FormField>
-      </FormSection>

-      <FormSection
-        title="Demographics"
-        description="Optional demographic information for research purposes."
-      >
          <FormField>
            <Label htmlFor="age">Age</Label>
            <Input
@@ -372,9 +365,6 @@ export function ParticipantForm({
                {form.formState.errors.age.message}
              </p>
            )}
-          <p className="text-muted-foreground text-xs">
-            Optional: Age in years (minimum 18)
-          </p>
          </FormField>

          <FormField>
@@ -394,7 +384,7 @@ export function ParticipantForm({
              }
            >
              <SelectTrigger>
-              <SelectValue placeholder="Select gender (optional)" />
+                <SelectValue placeholder="Select gender" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="male">Male</SelectItem>
@@ -406,10 +396,8 @@ export function ParticipantForm({
                <SelectItem value="other">Other</SelectItem>
              </SelectContent>
            </Select>
-          <p className="text-muted-foreground text-xs">
-            Optional: Gender identity for demographic analysis
-          </p>
          </FormField>
+        </div>
      </FormSection>

      {mode === "create" && (
@@ -505,8 +493,7 @@ export function ParticipantForm({
      error={error}
      onDelete={mode === "edit" ? onDelete : undefined}
      isDeleting={isDeleting}
-
-      // sidebar={sidebar} // Removed for cleaner UI per user request
+      sidebar={mode === "create" ? sidebar : undefined}
      submitText={mode === "create" ? "Register Participant" : "Save Changes"}
    >
      {formFields}
--- a/src/components/participants/ParticipantsTable.tsx
+++ b/src/components/participants/ParticipantsTable.tsx
@@ -24,6 +24,12 @@ import {
 } from "~/components/ui/dropdown-menu";
 import { useStudyContext } from "~/lib/study-context";
 import { api } from "~/trpc/react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "~/components/ui/tooltip";

 export type Participant = {
  id: string;
@@ -101,16 +107,32 @@ export const columns: ColumnDef<Participant>[] = [
      const name = row.getValue("name");
      const email = row.original.email;
      return (
+        <TooltipProvider>
          <div>
-          <div className="truncate font-medium">
-            {String(name) || "No name provided"}
+            <div className="truncate font-medium max-w-[200px]">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span>{String(name) || "No name provided"}</span>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{String(name) || "No name provided"}</p>
+                </TooltipContent>
+              </Tooltip>
            </div>
            {email && (
-            <div className="text-muted-foreground truncate text-sm">
-              {email}
+              <div className="text-muted-foreground truncate text-sm max-w-[200px]">
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span>{email}</span>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{email}</p>
+                  </TooltipContent>
+                </Tooltip>
              </div>
            )}
          </div>
+        </TooltipProvider>
      );
    },
  },
@@ -120,11 +142,30 @@ export const columns: ColumnDef<Participant>[] = [
    cell: ({ row }) => {
      const consentGiven = row.getValue("consentGiven");

-      if (consentGiven) {
-        return <Badge className="bg-green-100 text-green-800">Consented</Badge>;
-      }
-
-      return <Badge className="bg-red-100 text-red-800">Pending</Badge>;
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger>
+              {consentGiven ? (
+                <Badge className="bg-green-100 text-green-800 hover:bg-green-200">
+                  Consented
+                </Badge>
+              ) : (
+                <Badge className="bg-red-100 text-red-800 hover:bg-red-200">
+                  Pending
+                </Badge>
+              )}
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>
+                {consentGiven
+                  ? "Participant has signed the consent form."
+                  : "Consent form has not been recorded."}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
    },
  },
  {
--- a/src/components/studies/StudyForm.tsx
+++ b/src/components/studies/StudyForm.tsx
@@ -14,6 +14,7 @@ import {
  SelectTrigger,
  SelectValue,
 } from "~/components/ui/select";
+import { Separator } from "~/components/ui/separator";
 import { Textarea } from "~/components/ui/textarea";
 import {
  EntityForm,
@@ -165,10 +166,12 @@ export function StudyForm({ mode, studyId }: StudyFormProps) {

  // Form fields
  const formFields = (
+    <div className="space-y-6">
      <FormSection
        title="Study Details"
-      description="Basic information about your research study."
+        description="Basic information and status of your research study."
      >
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <FormField>
            <Label htmlFor="tour-study-name">Study Name *</Label>
            <Input
@@ -184,6 +187,36 @@ export function StudyForm({ mode, studyId }: StudyFormProps) {
            )}
          </FormField>

+          <FormField>
+            <Label htmlFor="status">Status</Label>
+            <Select
+              value={form.watch("status")}
+              onValueChange={(value) =>
+                form.setValue(
+                  "status",
+                  value as "draft" | "active" | "completed" | "archived",
+                )
+              }
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="draft">Draft - Study in preparation</SelectItem>
+                <SelectItem value="active">
+                  Active - Currently recruiting/running
+                </SelectItem>
+                <SelectItem value="completed">
+                  Completed - Data collection finished
+                </SelectItem>
+                <SelectItem value="archived">
+                  Archived - Study concluded
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </FormField>
+
+          <div className="md:col-span-2">
            <FormField>
              <Label htmlFor="tour-study-description">Description *</Label>
              <Textarea
@@ -191,7 +224,9 @@ export function StudyForm({ mode, studyId }: StudyFormProps) {
                {...form.register("description")}
                placeholder="Describe the research objectives, methodology, and expected outcomes..."
                rows={4}
-          className={form.formState.errors.description ? "border-red-500" : ""}
+                className={
+                  form.formState.errors.description ? "border-red-500" : ""
+                }
              />
              {form.formState.errors.description && (
                <p className="text-sm text-red-600">
@@ -199,14 +234,26 @@ export function StudyForm({ mode, studyId }: StudyFormProps) {
                </p>
              )}
            </FormField>
+          </div>
+        </div>
+      </FormSection>

+      <Separator />
+
+      <FormSection
+        title="Configuration"
+        description="Institutional details and ethics approval."
+      >
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <FormField>
            <Label htmlFor="institution">Institution *</Label>
            <Input
              id="institution"
              {...form.register("institution")}
              placeholder="e.g., University of Technology"
-          className={form.formState.errors.institution ? "border-red-500" : ""}
+              className={
+                form.formState.errors.institution ? "border-red-500" : ""
+              }
            />
            {form.formState.errors.institution && (
              <p className="text-sm text-red-600">
@@ -234,34 +281,9 @@ export function StudyForm({ mode, studyId }: StudyFormProps) {
              Optional: Institutional Review Board protocol number if applicable
            </p>
          </FormField>
-
-      <FormField>
-        <Label htmlFor="status">Status</Label>
-        <Select
-          value={form.watch("status")}
-          onValueChange={(value) =>
-            form.setValue(
-              "status",
-              value as "draft" | "active" | "completed" | "archived",
-            )
-          }
-        >
-          <SelectTrigger>
-            <SelectValue placeholder="Select status" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="draft">Draft - Study in preparation</SelectItem>
-            <SelectItem value="active">
-              Active - Currently recruiting/running
-            </SelectItem>
-            <SelectItem value="completed">
-              Completed - Data collection finished
-            </SelectItem>
-            <SelectItem value="archived">Archived - Study concluded</SelectItem>
-          </SelectContent>
-        </Select>
-      </FormField>
+        </div>
      </FormSection>
+    </div>
  );

  // Sidebar content
@@ -324,7 +346,7 @@ export function StudyForm({ mode, studyId }: StudyFormProps) {
      error={error}
      onDelete={mode === "edit" ? onDelete : undefined}
      isDeleting={isDeleting}
-      sidebar={sidebar}
+      sidebar={mode === "create" ? sidebar : undefined}
      submitButtonId="tour-study-submit"
      extraActions={
        <Button variant="ghost" size="sm" onClick={() => startTour("study_creation")}>
--- a/src/components/ui/entity-form.tsx
+++ b/src/components/ui/entity-form.tsx
@@ -127,12 +127,14 @@ export function EntityForm<T extends FieldValues = FieldValues>({
      <div
        className={cn(
          "grid gap-8 w-full",
-          layout === "default" && "grid-cols-1 lg:grid-cols-3", // Keep the column split but remove max-width
-          layout === "full-width" && "grid-cols-1",
+          // If sidebar exists, use 2-column layout. If not, use full width (max-w-7xl centered).
+          sidebar && layout === "default"
+            ? "grid-cols-1 lg:grid-cols-3"
+            : "grid-cols-1 max-w-7xl mx-auto",
        )}
      >
        {/* Main Form */}
-        <div className={layout === "default" ? "lg:col-span-2" : "col-span-1"}>
+        <div className={sidebar && layout === "default" ? "lg:col-span-2" : "col-span-1"}>
          <Card>
            <CardHeader>
              <CardTitle>