Begin file upload, add theme change

src/components/participant/Participants.tsx

@@ -8,6 +8,7 @@ import { Participant } from '../../types/Participant';
 import { CreateParticipantDialog } from './CreateParticipantDialog';
 import { Trash2 } from 'lucide-react';
 import { useToast } from '~/hooks/use-toast';
+import { UploadConsentForm } from './UploadConsentForm';
 
 export function Participants() {
   const [participants, setParticipants] = useState<Participant[]>([]);
@@ -88,18 +89,21 @@ export function Participants() {
       </CardHeader>
       <CardContent>
         {participants.length > 0 ? (
-          <ul className="space-y-2">
+          <ul className="space-y-4">
             {participants.map(participant => (
-              <li key={participant.id} className="bg-gray-100 p-2 rounded flex justify-between items-center">
-                <span>{participant.name}</span>
-                <Button 
-                  variant="ghost" 
-                  size="sm" 
-                  onClick={() => deleteParticipant(participant.id)}
-                  className="text-red-500 hover:text-red-700"
-                >
-                  <Trash2 className="h-4 w-4" />
-                </Button>
+              <li key={participant.id} className="bg-gray-100 p-4 rounded">
+                <div className="flex justify-between items-center mb-2">
+                  <span className="font-semibold">{participant.name}</span>
+                  <Button 
+                    variant="ghost" 
+                    size="sm" 
+                    onClick={() => deleteParticipant(participant.id)}
+                    className="text-red-500 hover:text-red-700"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+                <UploadConsentForm studyId={selectedStudy.id} participantId={participant.id} />
               </li>
             ))}
           </ul>

src/components/participant/UploadConsentForm.tsx

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { useToast } from "~/hooks/use-toast";
+
+interface UploadConsentFormProps {
+  studyId: number;
+  participantId: number;
+}
+
+export function UploadConsentForm({ studyId, participantId }: UploadConsentFormProps) {
+  const [file, setFile] = useState<File | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    toast({
+      title: "Test Toast",
+      description: "This is a test toast message",
+    });
+  }, []);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      setFile(e.target.files[0]);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!file) {
+      toast({
+        title: "Error",
+        description: "Please select a file to upload",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsUploading(true);
+
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('studyId', studyId.toString());
+    formData.append('participantId', participantId.toString());
+
+    try {
+      const response = await fetch('/api/informed-consent', {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to upload form');
+      }
+
+      toast({
+        title: "Success",
+        description: "Informed consent form uploaded successfully",
+      });
+      setFile(null);
+    } catch (error) {
+      console.error('Error uploading form:', error);
+      toast({
+        title: "Error",
+        description: "Failed to upload informed consent form",
+        variant: "destructive",
+      });
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <Input
+          type="file"
+          accept=".pdf"
+          onChange={handleFileChange}
+          disabled={isUploading}
+        />
+      </div>
+      <Button type="submit" disabled={!file || isUploading}>
+        {isUploading ? 'Uploading...' : 'Upload Consent Form'}
+      </Button>
+    </form>
+  );
+}