Revamped data processing, completed full workflow

src/components/DataImport/ArtefactUploadView.jsx

@@ -1,4 +1,4 @@
-import { Button, Flex, Box, Text } from "@chakra-ui/react";
+import { Button, Flex, Box, Text, Field, Input } from "@chakra-ui/react";
 import { useEffect, useRef, useState } from "react";
 import { HiUpload } from "react-icons/hi";
 import server from "../../networking";
@@ -8,12 +8,13 @@ import { IoArrowBackCircleSharp } from "react-icons/io5";
 import PendingBatchCard from "./PendingBatchCard";
 import hp1 from "../../assets/hp1.png";
 
-function ArtefactUploadView({ batch, setBatchID, onClose, fetchBatches, onBackToPending }) {
+function ArtefactUploadView({ batch, setBatchID, fetchBatches, onBackToPending }) {
     const batchID = batch?.id;
     const fileInputRef = useRef(null);
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [selectedFiles, setSelectedFiles] = useState([]);
     const [fileStatuses, setFileStatuses] = useState({});
+    const [name, setName] = useState(batch?.name || "");
 
     const handleButtonClick = () => {
         fileInputRef.current?.click();
@@ -58,6 +59,10 @@ function ArtefactUploadView({ batch, setBatchID, onClose, fetchBatches, onBackTo
             ToastWizard.standard("warning", "No Files Selected", "Please choose at least one file before uploading.");
             return;
         }
+        if (!batchID && !name.trim()) {
+            ToastWizard.standard("error", "Batch Name Required", "Please provide a name for the new batch.");
+            return;
+        }
 
         const formData = new FormData();
         selectedFiles.forEach((file) => {
@@ -67,6 +72,9 @@ function ArtefactUploadView({ batch, setBatchID, onClose, fetchBatches, onBackTo
         if (batchID) {
             formData.append("batchID", batchID);
         }
+        if (name) {
+            formData.append("name", name);
+        }
 
         setIsSubmitting(true);
 
@@ -204,6 +212,11 @@ function ArtefactUploadView({ batch, setBatchID, onClose, fetchBatches, onBackTo
                 )
             }
 
+            <Field.Root>
+                <Field.Label>Batch Name</Field.Label>
+                <Input placeholder="Enter name for batch" value={name} onChange={(e) => setName(e.target.value)} />
+            </Field.Root>
+
             <Flex direction="row" justify="flex-end" gap={3} mt={4}>
                 <Box pl={{ base: 0, md: 4 }} pr={{ base: 0, md: 4 }} display="flex" gap={2} flexWrap="wrap">
                     <Button