feat: Implement trial event logging, archiving, experiment soft deletion, and new analytics/event data tables.

src/components/participants/ConsentUploadForm.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import { useState } from "react";
+import { Upload, X, FileText, CheckCircle, AlertCircle, Loader2 } from "lucide-react";
+import { Button } from "~/components/ui/button";
+import { Progress } from "~/components/ui/progress";
+import { api } from "~/trpc/react";
+import { toast } from "~/components/ui/use-toast";
+import { cn } from "~/lib/utils";
+import axios from "axios";
+
+interface ConsentUploadFormProps {
+    studyId: string;
+    participantId: string;
+    consentFormId: string;
+    onSuccess: () => void;
+    onCancel: () => void;
+}
+
+export function ConsentUploadForm({
+    studyId,
+    participantId,
+    consentFormId,
+    onSuccess,
+    onCancel,
+}: ConsentUploadFormProps) {
+    const [file, setFile] = useState<File | null>(null);
+    const [isUploading, setIsUploading] = useState(false);
+    const [uploadProgress, setUploadProgress] = useState(0);
+
+    // Mutations
+    const getUploadUrlMutation = api.participants.getConsentUploadUrl.useMutation();
+    const recordConsentMutation = api.participants.recordConsent.useMutation();
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files && e.target.files[0]) {
+            const selectedFile = e.target.files[0];
+            // Validate size (10MB)
+            if (selectedFile.size > 10 * 1024 * 1024) {
+                toast({
+                    title: "File too large",
+                    description: "Maximum file size is 10MB",
+                    variant: "destructive",
+                });
+                return;
+            }
+            // Validate type
+            const allowedTypes = ["application/pdf", "image/png", "image/jpeg", "image/jpg"];
+            if (!allowedTypes.includes(selectedFile.type)) {
+                toast({
+                    title: "Invalid file type",
+                    description: "Please upload a PDF, PNG, or JPG file",
+                    variant: "destructive",
+                });
+                return;
+            }
+            setFile(selectedFile);
+        }
+    };
+
+    const handleUpload = async () => {
+        if (!file) return;
+
+        try {
+            setIsUploading(true);
+            setUploadProgress(0);
+
+            // 1. Get Presigned URL
+            const { url, key } = await getUploadUrlMutation.mutateAsync({
+                studyId,
+                participantId,
+                filename: file.name,
+                contentType: file.type,
+                size: file.size,
+            });
+
+            // 2. Upload to MinIO
+            await axios.put(url, file, {
+                headers: {
+                    "Content-Type": file.type,
+                },
+                onUploadProgress: (progressEvent) => {
+                    if (progressEvent.total) {
+                        const percentCompleted = Math.round(
+                            (progressEvent.loaded * 100) / progressEvent.total
+                        );
+                        setUploadProgress(percentCompleted);
+                    }
+                },
+            });
+
+            // 3. Record Consent in DB
+            await recordConsentMutation.mutateAsync({
+                participantId,
+                consentFormId,
+                storagePath: key,
+            });
+
+            toast({
+                title: "Consent Recorded",
+                description: "The consent form has been uploaded and recorded successfully.",
+            });
+
+            onSuccess();
+        } catch (error) {
+            console.error("Upload failed:", error);
+            toast({
+                title: "Upload Failed",
+                description: error instanceof Error ? error.message : "An unexpected error occurred",
+                variant: "destructive",
+            });
+            setIsUploading(false);
+        }
+    };
+
+    return (
+        <div className="space-y-4">
+            {!file ? (
+                <div className="flex flex-col items-center justify-center border-2 border-dashed rounded-lg p-6 bg-muted/5 hover:bg-muted/10 transition-colors">
+                    <Upload className="h-8 w-8 text-muted-foreground mb-4" />
+                    <h3 className="font-semibold text-sm mb-1">Upload Signed Consent</h3>
+                    <p className="text-xs text-muted-foreground mb-4 text-center">
+                        Drag and drop or click to select<br />
+                        PDF, PNG, JPG up to 10MB
+                    </p>
+                    <input
+                        type="file"
+                        id="consent-file-upload"
+                        className="hidden"
+                        accept=".pdf,.png,.jpg,.jpeg"
+                        onChange={handleFileChange}
+                    />
+                    <Button variant="secondary" size="sm" onClick={() => document.getElementById("consent-file-upload")?.click()}>
+                        Select File
+                    </Button>
+                </div>
+            ) : (
+                <div className="border rounded-lg p-4 bg-muted/5">
+                    <div className="flex items-start justify-between mb-4">
+                        <div className="flex items-center gap-3">
+                            <div className="h-10 w-10 bg-primary/10 rounded flex items-center justify-center">
+                                <FileText className="h-5 w-5 text-primary" />
+                            </div>
+                            <div>
+                                <p className="text-sm font-medium line-clamp-1 break-all">{file.name}</p>
+                                <p className="text-xs text-muted-foreground">
+                                    {(file.size / 1024 / 1024).toFixed(2)} MB
+                                </p>
+                            </div>
+                        </div>
+                        {!isUploading && (
+                            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setFile(null)}>
+                                <X className="h-4 w-4" />
+                            </Button>
+                        )}
+                    </div>
+
+                    {isUploading && (
+                        <div className="space-y-2 mb-4">
+                            <div className="flex justify-between text-xs text-muted-foreground">
+                                <span>Uploading...</span>
+                                <span>{uploadProgress}%</span>
+                            </div>
+                            <Progress value={uploadProgress} className="h-2" />
+                        </div>
+                    )}
+
+                    <div className="flex gap-2 justify-end">
+                        <Button variant="outline" size="sm" onClick={onCancel} disabled={isUploading}>
+                            Cancel
+                        </Button>
+                        <Button size="sm" onClick={handleUpload} disabled={isUploading}>
+                            {isUploading ? (
+                                <>
+                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                    Uploading
+                                </>
+                            ) : (
+                                <>
+                                    <Upload className="mr-2 h-4 w-4" />
+                                    Upload & Record
+                                </>
+                            )}
+                        </Button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}