From 5f8db15b21a51ae21dc15bacffb8db974918906d Mon Sep 17 00:00:00 2001
From: SarathyS101 <se.sarathy17@gmail.com>
Date: Mon, 24 Feb 2025 16:44:30 -0500
Subject: [PATCH 1/5] Evidence Upload Wireframe & shadcn card component
 installed

---
 src/components/ui/card.tsx            | 76 +++++++++++++++++++++++++++
 src/components/ui/evidence_upload.tsx | 74 ++++++++++++++++++++++++++
 2 files changed, 150 insertions(+)
 create mode 100644 src/components/ui/card.tsx
 create mode 100644 src/components/ui/evidence_upload.tsx

diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..cabfbfc
--- /dev/null
+++ b/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 }
diff --git a/src/components/ui/evidence_upload.tsx b/src/components/ui/evidence_upload.tsx
new file mode 100644
index 0000000..c61c0ed
--- /dev/null
+++ b/src/components/ui/evidence_upload.tsx
@@ -0,0 +1,74 @@
+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() {
+  const [evidence, setEvidence] = useState<EvidenceItem[]>([]);
+
+  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) =>
+        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>
+  );
+}
\ No newline at end of file

From ddb32b86e01e63c3d40d0d3909ef2d2f28087e64 Mon Sep 17 00:00:00 2001
From: SarathyS101 <se.sarathy17@gmail.com>
Date: Mon, 24 Feb 2025 17:13:20 -0500
Subject: [PATCH 2/5] File Input is now hidden

---
 src/components/ui/evidence_upload.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/evidence_upload.tsx b/src/components/ui/evidence_upload.tsx
index c61c0ed..14ed30d 100644
--- a/src/components/ui/evidence_upload.tsx
+++ b/src/components/ui/evidence_upload.tsx
@@ -12,8 +12,9 @@ interface EvidenceItem {
 }
 
 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) => ({
@@ -29,6 +30,7 @@ export default function EvidenceUpload() {
   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

From 331dd11bdc4f041e186d9f89dcc0a9294d4eeb13 Mon Sep 17 00:00:00 2001
From: SarathyS101 <se.sarathy17@gmail.com>
Date: Mon, 24 Feb 2025 20:08:58 -0500
Subject: [PATCH 3/5] Evidence Upload in base components

---
 src/components/evidence_upload.tsx | 76 ++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 src/components/evidence_upload.tsx

diff --git a/src/components/evidence_upload.tsx b/src/components/evidence_upload.tsx
new file mode 100644
index 0000000..14ed30d
--- /dev/null
+++ b/src/components/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>
+  );
+}
\ No newline at end of file

From 04fc6bf1a5bc80e5247864481f3cfcb1eddc827a Mon Sep 17 00:00:00 2001
From: SarathyS101 <se.sarathy17@gmail.com>
Date: Mon, 24 Feb 2025 20:39:24 -0500
Subject: [PATCH 4/5] dashboard test

---
 src/app/(pages)/dashboard/page.tsx | 4 ++--
 src/components/evidence_upload.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/(pages)/dashboard/page.tsx b/src/app/(pages)/dashboard/page.tsx
index 3199db0..685d309 100644
--- a/src/app/(pages)/dashboard/page.tsx
+++ b/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>
diff --git a/src/components/evidence_upload.tsx b/src/components/evidence_upload.tsx
index 14ed30d..5d0e698 100644
--- a/src/components/evidence_upload.tsx
+++ b/src/components/evidence_upload.tsx
@@ -62,7 +62,7 @@ export default function EvidenceUpload() {
           {evidence.map((item) => (
             <li key={item.id} className="flex items-center justify-between">
               <Input
-                value={item.name || ""} //make sure the pdf has a name
+                value={item.name} 
                 onChange={(e) => handleRename(item.id, e.target.value)}
                 className="w-full mr-4"
               />

From 971480482d94dd3ff9375b36a1bb86380a8e3ce9 Mon Sep 17 00:00:00 2001
From: SarathyS101 <se.sarathy17@gmail.com>
Date: Fri, 28 Feb 2025 10:25:20 -0500
Subject: [PATCH 5/5] changed rename function to make type unchangable and
 added delete functionality

---
 src/components/evidence_upload.tsx | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/evidence_upload.tsx b/src/components/evidence_upload.tsx
index 5d0e698..bc7a0a3 100644
--- a/src/components/evidence_upload.tsx
+++ b/src/components/evidence_upload.tsx
@@ -2,12 +2,13 @@ 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;
-  originalName: string;
+  file_type: string;
   file: File;
 }
 
@@ -19,20 +20,27 @@ export default function EvidenceUpload() {
     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,
+        //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]);
+      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.originalName : newName }
+          ? { ...item, name: newName.trim() === "" ? item.name : newName }
           : item
       )
     );
@@ -66,6 +74,16 @@ export default function EvidenceUpload() {
                 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>
           ))}