3 evidence upload

src/app/(pages)/dashboard/page.tsx

@@ -1,13 +1,13 @@
 'use client'
 import { useState } from "react"
-
+import EvidenceUpload from "@/components/evidence_upload"
 export default function Login() {
   const [demoInfo, setDemoInfo] = useState("loading demo info")
   setTimeout(()=>{setDemoInfo("demo info loaded")}, 2000)
 
     return <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
     <div className="w-full max-w-sm">
-      Dashboard Page
+      <EvidenceUpload/>
       <div>{demoInfo}</div>
     </div>
   </div>

src/components/evidence_upload.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {Button} from "@/components/ui/button";
+import { Upload } from "lucide-react";
+
+interface EvidenceItem {
+  id: number;
+  name: string;
+  file_type: string;
+  file: File;
+}
+
+export default function EvidenceUpload() {
+  //evidence state uses an array of Evidence Items as defined above
+  const [evidence, setEvidence] = useState<EvidenceItem[]>([]);
+  //stores date, the name of the file, the original file name, and the file itself
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const filesArray = Array.from(event.target.files).map((file, index) => ({
+        id: Date.now() + index,
+        //splices the string so that it only takes characters before the last period delimiter
+        name: file.name.lastIndexOf(".")!==-1?file.name.substring(0,file.name.lastIndexOf(".")): file.name,
+        //takes the file extension
+        file_type: file.name.includes(".")?file.name.split(".").at(-1)?? "":"",
+        file: file
+      }));
+      setEvidence((prev)=> [...prev, ...filesArray]);
+    }
+  };
+
+  //delete function for uploaded files
+  const handleDelete = (id: number) =>{
+    setEvidence((prev)=> prev.filter((item)=>item.id!==id));
+  }
+
+  const handleRename = (id: number, newName: string) => {
+    setEvidence((prev) =>
+      prev.map((item) =>
+        //changes the name of the pdf according to user input, unless the field is empty
+        item.id === id
+          ? { ...item, name: newName.trim() === "" ? item.name : newName }
+          : item
+      )
+    );
+  };
+
+  return (
+    <div className="space-y-6">
+      <Card className="p-4">
+        <Label className="text-lg font-semibold">Evidence Upload</Label>
+        <label className="border-2 border-dashed border-gray-300 p-6 rounded-lg flex flex-col items-center justify-center cursor-pointer">
+          <Upload size={24} className="text-gray-500 mb-2" />
+          <span className="text-gray-500">
+            Drag and drop files here or click to upload
+          </span>
+          <Input
+            type="file"
+            multiple
+            onChange={handleFileUpload}
+            className="hidden"
+          />
+        </label>
+      </Card>
+
+      <Card className="p-4">
+        <Label className="text-lg font-semibold">Recent Evidence</Label>
+        <ul className="mt-4 space-y-3">
+          {evidence.map((item) => (
+            <li key={item.id} className="flex items-center justify-between">
+              <Input
+                value={item.name} 
+                onChange={(e) => handleRename(item.id, e.target.value)}
+                className="w-full mr-4"
+              />
+              {/* displays the item file type so the user cannot mess with it */}
+              <span className="px-2 py-1 bg-gray-200 text-gray-700 rounded-md">
+                  {item.file_type}
+              </span>
+              <Button
+                onClick ={()=>handleDelete(item.id)}
+                 className="ml-2 bg-red-500 text-white"
+              >
+                      X
+              </Button>
+
+            </li>
+          ))}
+        </ul>
+      </Card>
+    </div>
+  );
+}

src/components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/evidence_upload.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Upload } from "lucide-react";
+
+interface EvidenceItem {
+  id: number;
+  name: string;
+  originalName: string;
+  file: File;
+}
+
+export default function EvidenceUpload() {
+  //evidence state uses an array of Evidence Items as defined above
+  const [evidence, setEvidence] = useState<EvidenceItem[]>([]);
+  //stores date, the name of the file, the original file name, and the file itself
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const filesArray = Array.from(event.target.files).map((file, index) => ({
+        id: Date.now() + index,
+        name: file.name,
+        originalName: file.name,
+        file: file,
+      }));
+      setEvidence((prev) => [...prev, ...filesArray]);
+    }
+  };
+
+  const handleRename = (id: number, newName: string) => {
+    setEvidence((prev) =>
+      prev.map((item) =>
+        //changes the name of the pdf according to user input, unless the field is empty
+        item.id === id
+          ? { ...item, name: newName.trim() === "" ? item.originalName : newName }
+          : item
+      )
+    );
+  };
+
+  return (
+    <div className="space-y-6">
+      <Card className="p-4">
+        <Label className="text-lg font-semibold">Evidence Upload</Label>
+        <label className="border-2 border-dashed border-gray-300 p-6 rounded-lg flex flex-col items-center justify-center cursor-pointer">
+          <Upload size={24} className="text-gray-500 mb-2" />
+          <span className="text-gray-500">
+            Drag and drop files here or click to upload
+          </span>
+          <Input
+            type="file"
+            multiple
+            onChange={handleFileUpload}
+            className="hidden"
+          />
+        </label>
+      </Card>
+
+      <Card className="p-4">
+        <Label className="text-lg font-semibold">Recent Evidence</Label>
+        <ul className="mt-4 space-y-3">
+          {evidence.map((item) => (
+            <li key={item.id} className="flex items-center justify-between">
+              <Input
+                value={item.name || ""} //make sure the pdf has a name
+                onChange={(e) => handleRename(item.id, e.target.value)}
+                className="w-full mr-4"
+              />
+
+            </li>
+          ))}
+        </ul>
+      </Card>
+    </div>
+  );
+}