Form implementation, api routes

src/components/forms/FormCard.tsx

@@ -0,0 +1,48 @@
+import { Card, CardContent, CardFooter } from "~/components/ui/card";
+import { Badge } from "~/components/ui/badge";
+import { Button } from "~/components/ui/button";
+import { Trash2 } from "lucide-react";
+
+interface FormCardProps {
+  form: {
+    id: number;
+    title: string;
+    location: string;
+    studyId: number;
+    studyTitle: string;
+    participantId: number;
+    participantName: string;
+    previewLocation: string; // Added this property
+  };
+  onDelete: (formId: number) => void;
+}
+
+export function FormCard({ form, onDelete }: FormCardProps) {
+  return (
+    <Card className="overflow-hidden">
+      <CardContent className="p-0">
+        <img
+          src={form.previewLocation}
+          alt={form.title}
+          className="w-full h-40 object-cover"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-col items-start p-4">
+        <h3 className="font-semibold mb-2">{form.title}</h3>
+        <div className="flex flex-wrap gap-2 mb-2">
+          <Badge variant="secondary">{form.studyTitle}</Badge>
+          <Badge variant="outline">{form.participantName}</Badge>
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="text-destructive"
+          onClick={() => onDelete(form.id)}
+        >
+          <Trash2 className="h-4 w-4 mr-2" />
+          Delete
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

src/components/forms/FormsGrid.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { FormCard } from "~/components/forms/FormCard";
+import { useToast } from "~/hooks/use-toast";
+
+interface Form {
+  id: number;
+  title: string;
+  location: string;
+  studyId: number;
+  studyTitle: string;
+  participantId: number;
+  participantName: string;
+  previewLocation: string;
+}
+
+export function FormsGrid() {
+  const [forms, setForms] = useState<Form[]>([]);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    fetchForms();
+  }, []);
+
+  const fetchForms = async () => {
+    try {
+      const response = await fetch("/api/forms");
+      if (!response.ok) {
+        throw new Error("Failed to fetch forms");
+      }
+      const data = await response.json();
+      setForms(data);
+    } catch (error) {
+      console.error("Error fetching forms:", error);
+      toast({
+        title: "Error",
+        description: "Failed to load forms. Please try again.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleDelete = async (formId: number) => {
+    try {
+      const response = await fetch(`/api/forms/${formId}`, {
+        method: "DELETE",
+      });
+      if (!response.ok) {
+        throw new Error("Failed to delete form");
+      }
+      setForms(forms.filter((form) => form.id !== formId));
+      toast({
+        title: "Success",
+        description: "Form deleted successfully",
+      });
+    } catch (error) {
+      console.error("Error deleting form:", error);
+      toast({
+        title: "Error",
+        description: "Failed to delete form. Please try again.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
+      {forms.map((form) => (
+        <FormCard key={form.id} form={form} onDelete={handleDelete} />
+      ))}
+    </div>
+  );
+}

src/components/forms/UploadFormButton.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { useToast } from "~/hooks/use-toast";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "~/components/ui/dialog";
+import { useStudyContext } from "~/context/StudyContext";
+
+export function UploadFormButton() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [file, setFile] = useState<File | null>(null);
+  const [title, setTitle] = useState("");
+  const [participantId, setParticipantId] = useState("");
+  const { toast } = useToast();
+  const { selectedStudy } = useStudyContext();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!file || !title || !participantId || !selectedStudy) {
+      toast({
+        title: "Error",
+        description: "Please fill in all fields and select a file.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("title", title);
+    formData.append("studyId", selectedStudy.id.toString());
+    formData.append("participantId", participantId);
+
+    try {
+      const response = await fetch("/api/forms", {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to upload form");
+      }
+
+      toast({
+        title: "Success",
+        description: "Form uploaded successfully",
+      });
+      setIsOpen(false);
+      setFile(null);
+      setTitle("");
+      setParticipantId("");
+    } catch (error) {
+      console.error("Error uploading form:", error);
+      toast({
+        title: "Error",
+        description: "Failed to upload form. Please try again.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button>Upload Form</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Upload New Form</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <Label htmlFor="title">Title</Label>
+            <Input
+              id="title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              required
+            />
+          </div>
+          <div>
+            <Label htmlFor="participantId">Participant ID</Label>
+            <Input
+              id="participantId"
+              value={participantId}
+              onChange={(e) => setParticipantId(e.target.value)}
+              required
+            />
+          </div>
+          <div>
+            <Label htmlFor="file">File</Label>
+            <Input
+              id="file"
+              type="file"
+              accept=".pdf"
+              onChange={(e) => setFile(e.target.files?.[0] || null)}
+              required
+            />
+          </div>
+          <Button type="submit">Upload</Button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/participant/ParticipantCard.tsx

@@ -0,0 +1,30 @@
+import { Card, CardContent, CardFooter } from "~/components/ui/card";
+import { Button } from "~/components/ui/button";
+import { Trash2 } from "lucide-react";
+import { Participant } from "../../types/Participant";
+
+interface ParticipantCardProps {
+  participant: Participant;
+  onDelete: (participantId: number) => void;
+}
+
+export function ParticipantCard({ participant, onDelete }: ParticipantCardProps) {
+  return (
+    <Card className="overflow-hidden">
+      <CardContent className="p-4">
+        <h3 className="font-semibold mb-2">{participant.name}</h3>
+      </CardContent>
+      <CardFooter className="flex justify-end p-4">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="text-destructive"
+          onClick={() => onDelete(participant.id)}
+        >
+          <Trash2 className="h-4 w-4 mr-2" />
+          Delete
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

src/components/participant/Participants.tsx

@@ -6,9 +6,8 @@ import { Button } from "~/components/ui/button";
 import { useStudyContext } from '../../context/StudyContext';
 import { Participant } from '../../types/Participant';
 import { CreateParticipantDialog } from './CreateParticipantDialog';
-import { Trash2 } from 'lucide-react';
 import { useToast } from '~/hooks/use-toast';
-import { UploadConsentForm } from './UploadConsentForm';
+import { ParticipantCard } from './ParticipantCard';
 
 export function Participants() {
   const [participants, setParticipants] = useState<Participant[]>([]);
@@ -89,24 +88,11 @@ export function Participants() {
       </CardHeader>
       <CardContent>
         {participants.length > 0 ? (
-          <ul className="space-y-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
             {participants.map(participant => (
-              <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>
+              <ParticipantCard key={participant.id} participant={participant} onDelete={deleteParticipant} />
             ))}
-          </ul>
+          </div>
         ) : (
           <p>No participants added yet.</p>
         )}

src/components/participant/UploadConsentForm.tsx

@@ -1,89 +0,0 @@
-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>
-  );
-}

src/components/sidebar.tsx

@@ -6,6 +6,7 @@ import {
   BeakerIcon,
   BotIcon,
   FolderIcon,
+  FileTextIcon,
   LayoutDashboard,
   Menu,
   Settings
@@ -22,6 +23,7 @@ const navItems = [
   { name: "Dashboard", href: "/dash", icon: LayoutDashboard },
   { name: "Studies", href: "/studies", icon: FolderIcon },
   { name: "Participants", href: "/participants", icon: BeakerIcon },
+  { name: "Forms", href: "/forms", icon: FileTextIcon },
   { name: "Data Analysis", href: "/analysis", icon: BarChartIcon },
   { name: "Settings", href: "/settings", icon: Settings },
 ];

src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "~/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }