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
- Dashboard Page
+
{demoInfo}
diff --git a/src/components/evidence_upload.tsx b/src/components/evidence_upload.tsx
new file mode 100644
index 0000000..bc7a0a3
--- /dev/null
+++ b/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([]);
+ //stores date, the name of the file, the original file name, and the file itself
+ const handleFileUpload = (event: React.ChangeEvent) => {
+ 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 (
+
+
+
+
+
+
+
+
+
+ {evidence.map((item) => (
+
+ handleRename(item.id, e.target.value)}
+ className="w-full mr-4"
+ />
+ {/* displays the item file type so the user cannot mess with it */}
+
+ {item.file_type}
+
+
+
+
+ ))}
+
+
+
+ );
+}
\ No newline at end of file
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
+>(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+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..14ed30d
--- /dev/null
+++ b/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([]);
+ //stores date, the name of the file, the original file name, and the file itself
+ const handleFileUpload = (event: React.ChangeEvent) => {
+ 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 (
+