diff --git a/src/components/DataImport/ArtefactUploadView.jsx b/src/components/DataImport/ArtefactUploadView.jsx
index e41d223..5a06d0c 100644
--- a/src/components/DataImport/ArtefactUploadView.jsx
+++ b/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
diff --git a/src/components/DataImport/BatchCard.jsx b/src/components/DataImport/BatchCard.jsx
index 8ae512b..e9121a9 100644
--- a/src/components/DataImport/BatchCard.jsx
+++ b/src/components/DataImport/BatchCard.jsx
@@ -1,11 +1,31 @@
 import { HStack, VStack, Text, Image, Button, Card, Progress, useBreakpointValue, Flex, Box } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import server, { JSONResponse } from '../../networking';
+import ToastWizard from "../toastWizard";
+import { useNavigate } from "react-router-dom";
 
-function BatchCard({ batchName, displayMessage, timestamp, progress, isProcessing, isCancelled, isCompleted, thumbnail, onClick }) {
-    const status = isCancelled
-        ? { label: "Cancelled", color: "red.500" }
-        : isProcessing
-            ? { label: "Processing", color: "blue.500" }
-            : { label: "Done", color: "green.500" };
+function BatchCard({ batchData, formatTimestamp, fetchBatches }) {
+    const navigate = useNavigate();
+
+    const statusColours = {
+        "upload_pending": "yellow.500",
+        "processing": "blue.500",
+        "vetting": "orange.500",
+        "integration": "purple.500",
+        "completed": "green.500",
+        "cancelled": "red.500"
+    }
+
+    const [content, setContent] = useState({
+        "displayMessage": null,
+        "timestamp": formatTimestamp(batchData.created),
+        "progress": null,
+        "name": batchData.name || "No name",
+        "statusColour": null,
+        "statusText": null,
+        "buttonText": null,
+        "buttonLoadingText": ''
+    });
 
     const isMobile = useBreakpointValue({ base: true, md: false });
     const imageWidth = useBreakpointValue({ base: "80px", md: "120px" });
@@ -14,6 +34,157 @@ function BatchCard({ batchName, displayMessage, timestamp, progress, isProcessin
     const buttonMinWidth = useBreakpointValue({ base: "80px", md: "100px" });
     const infoMaxWidth = useBreakpointValue({ base: "180px", md: "400px" });
     const fontSize = useBreakpointValue({ base: "sm", md: "md" });
+    const [requestInProgress, setRequestInProgress] = useState(false);
+
+    const handleButtonClick = async () => {
+        if (content.buttonText === "Confirm Batch") {
+            setRequestInProgress(true);
+
+            try {
+                const response = await server.post('/dataImport/confirm', {
+                    batchID: batchData.id
+                })
+
+                if (response.data instanceof JSONResponse) {
+                    if (response.data.isErrorStatus()) {
+                        const errObject = {
+                            response: {
+                                data: response.data
+                            }
+                        };
+                        throw new Error(errObject);
+                    }
+
+                    // Success case
+                    if (fetchBatches) {
+                        fetchBatches();
+                    }
+                    ToastWizard.standard("success", `Processing for '${batchData.name || 'Unknown'}' started`, "Batch was confirmed successfully. No more artefacts can be added.");
+                } else {
+                    throw new Error("Unexpected response format");
+                }
+            } catch (err) {
+                if (err.response && err.response.data instanceof JSONResponse) {
+                    console.log("Error response in batch confirmation request:", err.response.data.fullMessage());
+                    if (err.response.data.userErrorType()) {
+                        ToastWizard.standard("error", "Batch confirmation failed.", err.response.data.message);
+                    } else {
+                        ToastWizard.standard("error", "Something went wrong", "Couldn't confirm batch. Please try again.")
+                    }
+                } else {
+                    console.log("Unexpected error in batch confirmation request:", err);
+                    ToastWizard.standard("error", "Something went wrong", "Couldn't confirm batch. Please try again.")
+                }
+            } finally {
+                setRequestInProgress(false);
+            }
+            return;
+        } else if (content.buttonText === "Continue Vetting") {
+            for (const artefactID in batchData.artefacts) {
+                if (batchData.artefacts[artefactID].stage !== "confirmed") {
+                    navigate(`/studio/${batchData.id}/${artefactID}`);
+                    return;
+                }
+            }
+
+            ToastWizard.standard("info", "Refresh page", "All artefacts in this batch have already been confirmed.");
+            return;
+        } else if (content.buttonText === "Start Integration") {
+            setRequestInProgress(true);
+
+            try {
+                const response = await server.post('/dataImport/integration/start', {
+                    batchID: batchData.id
+                })
+
+                if (response.data instanceof JSONResponse) {
+                    if (response.data.isErrorStatus()) {
+                        const errObject = {
+                            response: {
+                                data: response.data
+                            }
+                        };
+                        throw new Error(errObject);
+                    }
+
+                    // Success case
+                    if (fetchBatches) {
+                        fetchBatches();
+                    }
+                    ToastWizard.standard("success", `Integration for '${batchData.name || 'Unknown'}' started`, "Batch is now being integrated. This may take some time.");
+                } else {
+                    throw new Error("Unexpected response format");
+                }
+            } catch (err) {
+                if (err.response && err.response.data instanceof JSONResponse) {
+                    console.log("Error response in batch start integration request:", err.response.data.fullMessage());
+                    if (err.response.data.userErrorType()) {
+                        ToastWizard.standard("error", "Integration request failed.", err.response.data.message);
+                    } else {
+                        ToastWizard.standard("error", "Something went wrong", "Couldn't start integration. Please try again.")
+                    }
+                } else {
+                    console.log("Unexpected error in batch start integration request:", err);
+                    ToastWizard.standard("error", "Something went wrong", "Couldn't start integration. Please try again.");
+                }
+            } finally {
+                setRequestInProgress(false);
+            }
+        } else if (content.buttonText === "View Details") {
+            navigate(`/studio/${batchData.id}`);
+        } else {
+            ToastWizard.standard("info", "No action available", "This batch is in a state that does not require any further action at this time.");
+        }
+    }
+
+    console.log(batchData)
+
+    useEffect(() => {
+        if (batchData) {
+            var newContent = { ...content };
+            if (batchData.stage === "upload_pending") {
+                newContent.displayMessage = `${batchData.artefactSummary.total || 0} Uploaded (Upload more if you wish)`
+                // newContent.progress = Math.round((batchData.artefactSummary.unprocessed || 0) / (batchData.artefactSummary.total || 1) * 100);
+                newContent.progress = null;
+                newContent.statusColour = statusColours.upload_pending;
+                newContent.statusText = "Pending";
+                newContent.buttonText = "Confirm Batch";
+                newContent.buttonLoadingText = "Confirming...";
+            } else if (batchData.stage === "unprocessed") {
+                newContent.displayMessage = `${batchData.artefactSummary.processed || 0}/${batchData.artefactSummary.total || 0} Processed`
+                newContent.progress = Math.round((batchData.artefactSummary.processed || 0) / (batchData.artefactSummary.total || 1) * 100);
+                newContent.statusColour = statusColours.processing;
+                newContent.statusText = "Processing";
+                newContent.buttonText = null;
+                newContent.buttonLoadingText = '';
+            } else if (batchData.stage === "vetting") {
+                newContent.displayMessage = `${batchData.artefactSummary.confirmed || 0}/${batchData.artefactSummary.total || 0} Confirmed`
+                newContent.progress = Math.round((batchData.artefactSummary.confirmed || 0) / (batchData.artefactSummary.total || 1) * 100);
+                newContent.statusColour = statusColours.vetting;
+                newContent.statusText = "Vetting";
+                newContent.buttonText = batchData.artefactSummary.confirmed == batchData.artefactSummary.total ? 'Start Integration' : 'Continue Vetting';
+                newContent.buttonLoadingText = 'Starting...';
+            } else if (batchData.stage === "integration") {
+                newContent.displayMessage = `${batchData.artefactSummary.integrated || 0}/${batchData.artefactSummary.total || 0} Integrated`
+                newContent.progress = Math.round((batchData.artefactSummary.integrated || 0) / (batchData.artefactSummary.total || 1) * 100);
+                newContent.statusColour = statusColours.integration;
+                newContent.statusText = "Integrating";
+                newContent.buttonText = null;
+                newContent.buttonLoadingText = '';
+            } else if (batchData.stage === "completed") {
+                newContent.displayMessage = `${batchData.artefactSummary.integrated || 0}/${batchData.artefactSummary.total || 0} Completed`
+                newContent.progress = Math.round((batchData.artefactSummary.integrated || 0) / (batchData.artefactSummary.total || 1) * 100);
+                newContent.statusColour = statusColours.completed;
+                newContent.statusText = "Completed";
+                newContent.buttonText = "View Details";
+                newContent.buttonLoadingText = '';
+            }
+
+            setContent(newContent);
+        }
+    }, [batchData]);
+
+    console.log(content);
 
     return (
         <Card.Root w="full" bg="white" boxShadow="md" borderRadius="lg" _hover={{ boxShadow: "md", transform: "translateY(-1px)" }}>
@@ -22,56 +193,52 @@ function BatchCard({ batchName, displayMessage, timestamp, progress, isProcessin
                     <VStack align="stretch" spacing={3}>
                         <HStack justify="space-between" align="start">
                             <Image
-                                src={thumbnail}
+                                src={`${import.meta.env.VITE_BACKEND_URL}/cdn/batch/${batchData.id}/preview`}
                                 boxSize={imageHeight}
                                 objectFit="fill"
                                 borderRadius="md"
                             />
                             <VStack align="start" flexGrow={1} minWidth="0" spacing="0">
                                 <Text fontSize="md" fontWeight="semibold" noOfLines={1}>
-                                    {batchName}
+                                    {content.name}
                                 </Text>
                                 <Text fontSize="sm" color="gray.500" noOfLines={1}>
-                                    {displayMessage}
+                                    {content.displayMessage}
                                 </Text>
                                 <Text fontSize="xs" color="gray.500">
-                                    {timestamp}
+                                    {content.timestamp}
                                 </Text>
                             </VStack>
-                            <Text fontSize="sm" color={status.color} fontWeight="medium">
-                                {status.label}
+                            <Text fontSize="sm" color={content.statusColour} fontWeight="medium">
+                                {content.statusText}
                             </Text>
                         </HStack>
 
-                        <HStack align="center">
-                            <Progress.Root value={progress} size="sm" flexGrow={1}>
+                        <HStack align="center" visibility={content.progress !== null ? "visible" : "hidden"}>
+                            <Progress.Root value={content.progress} size="sm" flexGrow={1}>
                                 <Progress.Track bg="gray.200">
                                     <Progress.Range
-                                        bg={
-                                            isCancelled
-                                                ? "red.500"
-                                                : isProcessing
-                                                    ? "primaryColour"
-                                                    : "green.500"
-                                        }
+                                        bg={content.statusColour}
                                     />
                                 </Progress.Track>
                             </Progress.Root>
                             <Text fontSize="xs" whiteSpace="nowrap" w="28px" color="gray.600">
-                                {progress}%
+                                {content.progress}%
                             </Text>
                         </HStack>
 
-                        <Button variant="ArchPrimary" size="md" width="full" onClick={onClick}>
-                            {isCancelled ? "Details" : isCompleted ? "Continue" : "Details"}
-                        </Button>
+                        {content.buttonText &&
+                            <Button variant="ArchPrimary" size="md" width="full" onClick={handleButtonClick} loading={requestInProgress} loadingText={content.buttonLoadingText}>
+                                {content.buttonText}
+                            </Button>
+                        }
                     </VStack>
                 ) : (
                     <Flex align="center" w="full" gap={{ base: "4", md: "6", lg: "8" }} justify="space-between">
                         {/* 1. Thumbnail */}
                         <Box flexShrink={0}>
                             <Image
-                                src={thumbnail}
+                                src={`${import.meta.env.VITE_BACKEND_URL}/cdn/batch/${batchData.id}/preview`}
                                 width={imageWidth}
                                 height={imageHeight}
                                 objectFit="cover"
@@ -86,30 +253,24 @@ function BatchCard({ batchName, displayMessage, timestamp, progress, isProcessin
                                 fontWeight="semibold"
                                 noOfLines={1}
                             >
-                                {batchName}
+                                {content.name}
                             </Text>
                             <Text fontSize={fontSize} color="gray.500" noOfLines={1}>
-                                {displayMessage} | {timestamp}
+                                {content.displayMessage || "No message"} | {content.timestamp || "Unknown Timestamp"}
                             </Text>
                         </VStack>
 
                         {/* 3. Progress */}
-                        <Box flexShrink={0} width={progressWidth}>
-                            <Progress.Root value={progress}>
+                        <Box flexShrink={0} width={progressWidth} visibility={content.progress !== null ? "visible" : "hidden"}>
+                            <Progress.Root value={content.progress}>
                                 <HStack spacing="2" align="center">
                                     <Progress.Track flex="1" bg="gray.200">
                                         <Progress.Range
-                                            bg={
-                                                isCancelled
-                                                    ? "red.500"
-                                                    : isProcessing
-                                                        ? "primaryColour"
-                                                        : "green.500"
-                                            }
+                                            bg={content.statusColour}
                                         />
                                     </Progress.Track>
                                     <Text fontSize="sm" whiteSpace="nowrap" color="gray.700" marginLeft={2}>
-                                        {progress}%
+                                        {content.progress}%
                                     </Text>
                                 </HStack>
                             </Progress.Root>
@@ -118,23 +279,28 @@ function BatchCard({ batchName, displayMessage, timestamp, progress, isProcessin
                         {/* 4. Status */}
                         <Text
                             fontSize="md"
-                            color={status.color}
+                            color={content.statusColour}
                             fontWeight="medium"
                             flexShrink={0}
                             whiteSpace="nowrap"
                         >
-                            {status.label}
+                            {content.statusText || "Unknown"}
                         </Text>
 
                         {/* 5. Button */}
-                        <Button
-                            variant="ArchPrimary"
-                            size="md"
-                            minW={buttonMinWidth}
-                            flexShrink={0}
-                        >
-                            {isCancelled ? "Details" : isCompleted ? "Continue" : "Details"}
-                        </Button>
+                        {content.buttonText &&
+                            <Button
+                                variant="ArchPrimary"
+                                size="md"
+                                minW={buttonMinWidth}
+                                flexShrink={0}
+                                onClick={handleButtonClick}
+                                loading={requestInProgress}
+                                loadingText={content.buttonLoadingText}
+                            >
+                                {content.buttonText}
+                            </Button>
+                        }
                     </Flex>
                 )}
             </Card.Body>
diff --git a/src/components/DataImport/ImportMenuDialog.jsx b/src/components/DataImport/ImportMenuDialog.jsx
index 65be9a4..7419018 100644
--- a/src/components/DataImport/ImportMenuDialog.jsx
+++ b/src/components/DataImport/ImportMenuDialog.jsx
@@ -28,8 +28,7 @@ function ImportMenuDialog({ pendingBatches, fetchBatches }) {
             unmountOnExit
         >
             <Dialog.Trigger asChild>
-                <Button variant="ArchPrimary" size={{ base: 'md', md: 'lg' }}>
-                    Upload Artefacts</Button>
+                <Button variant="ArchPrimary" size={{ base: 'md', md: 'lg' }}>Upload Artefacts</Button>
             </Dialog.Trigger>
             <Portal>
                 <Dialog.Backdrop />
@@ -43,7 +42,6 @@ function ImportMenuDialog({ pendingBatches, fetchBatches }) {
                                 <ArtefactUploadView
                                     batch={pendingBatches.find(b => b.id === targetBatchID) || null}
                                     setBatchID={(id) => setTargetBatchID(id)}
-                                    onClose={handleClose}
                                     fetchBatches={fetchBatches}
                                     onBackToPending={() => setView("pendingList")} />}
 
@@ -57,18 +55,14 @@ function ImportMenuDialog({ pendingBatches, fetchBatches }) {
 
                                     <Box flex="1" maxHeight="300px" overflowY="auto" px={{ base: 10, md: 20 }}>
                                         <Text fontSize={{ base: "sm", md: "lg" }} mb={{ base: 2, md: 4 }} display="flex" justifyContent="center" alignItems="center">
-                                            Pending Batches
+                                            {pendingBatches.length === 0 ? "No pending batches": "Pending Batches"}
                                         </Text>
-                                        {pendingBatches.length === 0 ? (
-                                            <Text color="gray.500" fontSize={{ base: "sm", md: "lg" }}>
-                                                No pending batches.
-                                            </Text>
-                                        ) : (
+                                        {pendingBatches.length > 0 && (
                                             <VStack>
                                                 {pendingBatches.map((batch) => (
                                                     <PendingBatchCard
                                                         key={batch.id}
-                                                        batchName={`Batch Name`}
+                                                        batchName={batch.name || "No name"}
                                                         artefactCount={batch.artefactCount}
                                                         timestamp={batch.created}
                                                         thumbnail={hp1}
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index fc42c5f..a041d3a 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,14 +1,14 @@
 import { Badge, Box, Button, CloseButton, Drawer, Image, Portal, Span, Text, VStack } from '@chakra-ui/react'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { useSelector } from 'react-redux'
 import logoVisual from '../assets/logoVisual.svg';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { CiGrid32 } from 'react-icons/ci';
 import { GrCatalogOption } from 'react-icons/gr';
-import { MdAdminPanelSettings, MdOutlinePublic } from 'react-icons/md';
+import { MdAdminPanelSettings } from 'react-icons/md';
 import { FaPeopleGroup } from 'react-icons/fa6';
 import { CgProfile } from 'react-icons/cg';
 import { TbLogin2 } from 'react-icons/tb';
+import { FiUploadCloud } from 'react-icons/fi';
 
 function Sidebar({ isOpen, onOpenChange }) {
     const navigate = useNavigate();
@@ -45,13 +45,15 @@ function Sidebar({ isOpen, onOpenChange }) {
                                     <Button variant={isActive('/figures') ? 'solid' : 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/figures')} fontSize={'md'}>
                                         <FaPeopleGroup /> Key Figures
                                     </Button>
-                                </>}
 
-                                {username && (
+                                    <Button variant={isActive('/import') ? 'solid' : 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/import')} fontSize={'md'}>
+                                        <FiUploadCloud /> Data Import
+                                    </Button>
+
                                     <Button variant={isActive('/profile') ? 'solid' : 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/profile')} fontSize={'md'}>
                                         <CgProfile /> My Profile
                                     </Button>
-                                )}
+                                </>}
 
                                 {superuser === true && (
                                     <Button variant={isActive('/admin') ? 'solid' : 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/admin')} fontSize={'md'}>
diff --git a/src/pages/DataImport.jsx b/src/pages/DataImport.jsx
index 93b0c7f..dff2c0e 100644
--- a/src/pages/DataImport.jsx
+++ b/src/pages/DataImport.jsx
@@ -7,13 +7,12 @@ import ToastWizard from '../components/toastWizard'
 import server, { JSONResponse } from "../networking";
 import BatchCard from "../components/DataImport/BatchCard";
 import ImportMenuDialog from "../components/DataImport/ImportMenuDialog.jsx";
-import CentredSpinner from "../components/centredSpinner.jsx";
+import CentredSpinner from "../components/CentredSpinner.jsx";
 
 const stageCollection = createListCollection({
     items: [
         { label: "Pending", value: "upload_pending" },
-        { label: "Unprocessed", value: "unprocessed" },
-        { label: "Processed", value: "processed" },
+        { label: "Processing", value: "unprocessed" },
         { label: "Vetting", value: "vetting" },
         { label: "Integration", value: "integration" },
         { label: "Completed", value: "completed" },
@@ -65,12 +64,11 @@ function DataImport() {
 
     const { loaded } = useSelector(state => state.auth);
 
-    const stages = ["upload_pending", "unprocessed", "processed", "vetting", "integration", "completed"];
+    const stages = ["upload_pending", "unprocessed", "vetting", "integration", "completed"];
 
     const stageLabels = {
         upload_pending: "Pending",
-        unprocessed: "Unprocessed",
-        processed: "Processed",
+        unprocessed: "Processing",
         vetting: "Vetting",
         integration: "Integration",
         completed: "Completed",
@@ -107,12 +105,14 @@ function DataImport() {
                     const artefacts = Object.values(batch.artefacts || {});
                     const processed = artefacts.filter(a => a.stage === "processed").length;
                     const unprocessed = artefacts.filter(a => a.stage === "unprocessed").length;
-                    const total = processed + unprocessed
+                    const confirmed = artefacts.filter(a => a.stage === "confirmed").length;
+                    const integrated = artefacts.filter(a => a.stage === "integrated").length;
+                    const total = artefacts.length;
 
                     return {
                         id,
                         ...batch,
-                        artefactSummary: { processed, total },
+                        artefactSummary: { processed, total, confirmed, integrated, unprocessed },
                     };
                 });
 
@@ -133,7 +133,6 @@ function DataImport() {
                 setBatches(sorted);
                 setBatchNumberMap(batchNumberMap);
                 setPendingBatches(pendingBatches);
-
             } else {
                 throw new Error("Unexpected response format");
             }
@@ -272,18 +271,9 @@ function DataImport() {
                             filtered.map((batch, idx) => (
                                 <Box key={batch.id ?? `batch-${idx}`} w="full" mb={4}>
                                     <BatchCard
-                                        batchName={`Batch ${batchNumberMap[batch.id]}`}
-                                        displayMessage={`${batch.artefactSummary.processed}/${batch.artefactSummary.total} Artefacts Processed`}
-                                        timestamp={formatTimestamp(batch.created)}
-                                        progress={Math.round(
-                                            batch.artefactSummary.total
-                                                ? (batch.artefactSummary.processed / batch.artefactSummary.total) * 100
-                                                : 0
-                                        )}
-                                        isProcessing={stage === "unprocessed"}
-                                        isCancelled={batch.job?.status === "cancelled"}
-                                        thumbnail={hp1}
-                                        onClick={() => console.log("Clicked batch", batch.id)}
+                                        batchData={batch}
+                                        formatTimestamp={formatTimestamp}
+                                        fetchBatches={fetchBatches}
                                     />
                                 </Box>
                             ))