feat: generate participation urls section

on participants view. replaced button with modal

app/(dashboard)/dashboard/_components/ParticipantsTable/ParticipantsTable.tsx

@@ -10,7 +10,7 @@ import { DeleteAllParticipantsButton } from '~/app/(dashboard)/dashboard/partici
 import AddParticipantButton from '~/app/(dashboard)/dashboard/participants/_components/AddParticipantButton';
 import { useState } from 'react';
 import { DeleteParticipantsDialog } from '~/app/(dashboard)/dashboard/participants/_components/DeleteParticipantsDialog';
-
+import { ExportParticipantUrlSection } from '~/app/(dashboard)/dashboard/participants/_components/ExportParticipantUrlSection';
 export const ParticipantsTable = ({
   initialData,
 }: {
@@ -43,6 +43,7 @@ export const ParticipantsTable = ({
         <ImportCSVModal />
         <DeleteAllParticipantsButton />
       </div>
+      <ExportParticipantUrlSection />
       {isLoading && <div>Loading...</div>}
       <DeleteParticipantsDialog
         open={showDeleteModal}

app/(dashboard)/dashboard/participants/_components/ExportParticipantUrlSection.tsx

@@ -0,0 +1,80 @@
+'use client';
+import type { Participant, Protocol } from '@prisma/client';
+import { useState, useEffect } from 'react';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '~/components/ui/select';
+
+import { api } from '~/trpc/client';
+import ExportCSVParticipants from '~/app/(dashboard)/dashboard/participants/_components/ExportCSVParticipants';
+
+export const ExportParticipantUrlSection = () => {
+  const { data: protocolData, isLoading: isLoadingProtocols } =
+    api.protocol.get.all.useQuery();
+  const [protocols, setProtocols] = useState<Protocol[]>([]);
+  const [participants, setParticipants] = useState<Participant[]>([]);
+
+  const [selectedProtocol, setSelectedProtocol] = useState<Protocol>();
+
+  const { data: participantData, isLoading: isLoadingParticipants } =
+    api.participant.get.all.useQuery();
+
+  useEffect(() => {
+    if (protocolData) {
+      setProtocols(protocolData);
+    }
+  }, [protocolData]);
+
+  useEffect(() => {
+    if (participantData) {
+      setParticipants(participantData);
+    }
+  }, [participantData]);
+
+  return (
+    <div className="mt-6 flex w-1/3 flex-col gap-4 rounded-lg border border-solid p-6">
+      <h1 className="text-xl">Generate Participation URLs</h1>
+      <p className="text-sm text-muted-foreground">
+        Generate a CSV of participation URLs for all participants by protocol.
+        These URLs can be shared with participants to allow them to participate
+        in your study.
+      </p>
+      <div className="flex flex-col gap-4">
+        {/* Protocol selection */}
+        <Select
+          onValueChange={(value) => {
+            const protocol = protocols.find(
+              (protocol) => protocol.id === value,
+            );
+
+            setSelectedProtocol(protocol);
+          }}
+          value={selectedProtocol?.id}
+          disabled={isLoadingProtocols}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select a Protocol..." />
+          </SelectTrigger>
+          <SelectContent>
+            {protocols?.map((protocol) => (
+              <SelectItem key={protocol.id} value={protocol.id}>
+                {protocol.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <ExportCSVParticipants
+          protocolId={selectedProtocol?.id}
+          participants={participants}
+          disabled={isLoadingParticipants || !selectedProtocol}
+        />
+      </div>
+    </div>
+  );
+};