Skip to content

Sync-up PR #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 24 commits into from
Aug 12, 2025
Merged

Sync-up PR #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
b33970d
created my branch
ZyuT0h Jun 16, 2025
11d73b2
Deleted Home.jsx
ZyuT0h Jul 4, 2025
f59bcf4
Merge pull request #4 from ArchAIve-Project/main
ZyuT0h Jul 4, 2025
837c73f
Added DataImport Page
ZyuT0h Jul 5, 2025
d0b9cc3
remove dataimport link to sync up
ZyuT0h Jul 11, 2025
6eb7dfd
Merge pull request #11 from ArchAIve-Project/main
ZyuT0h Jul 11, 2025
54c5c90
Made BatchCard Component for batch
ZyuT0h Jul 14, 2025
546ddcb
Fetch batches and used BatchCard component for each batch
ZyuT0h Jul 31, 2025
f904608
Modified DataImport to count len of MM/HF
ZyuT0h Jul 31, 2025
bc2c70e
Added Confirm api
ZyuT0h Jul 31, 2025
73a1101
Fixed UI and error handling
ZyuT0h Aug 1, 2025
c65b4a6
Fetch different stages of batch
ZyuT0h Aug 1, 2025
3a729d2
Fixed batch to show cancelled batch
ZyuT0h Aug 1, 2025
a37370b
changed automatic content-type setting for POST requests applicable o…
Prakhar896 Aug 4, 2025
cadcb17
Removed Bird's Eye View
ZyuT0h Aug 9, 2025
c9e0a4a
Merge branch 'zhengyu' of https://github.com/ArchAIve-Project/Fronten…
ZyuT0h Aug 9, 2025
35fb8f3
Added Batch stages filter multiselect bar
ZyuT0h Aug 9, 2025
9fb7920
Modified Reload button to reload fetchbatches
ZyuT0h Aug 9, 2025
199ba6c
Modified DataImport & BatchCard to be responsive
ZyuT0h Aug 11, 2025
adfc930
Moved new batch button to same row as data processing title
ZyuT0h Aug 11, 2025
3b3bca0
fixed PR issues
Prakhar896 Aug 11, 2025
b8c48dd
Merge branch 'main' into zhengyu
Prakhar896 Aug 11, 2025
7fea7f4
Merge pull request #23 from ArchAIve-Project/zhengyu
Prakhar896 Aug 11, 2025
0407d1a
Merge pull request #26 from ArchAIve-Project/prakhar
Prakhar896 Aug 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 145 additions & 0 deletions src/components/DataImport/BatchCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
import { HStack, VStack, Text, Image, Button, Card, Progress, useBreakpointValue, Flex, Box } from "@chakra-ui/react";

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" };

const isMobile = useBreakpointValue({ base: true, md: false });
const imageWidth = useBreakpointValue({ base: "80px", md: "120px" });
const imageHeight = '80px';
const progressWidth = useBreakpointValue({ base: "100px", md: "200px" });
const buttonMinWidth = useBreakpointValue({ base: "80px", md: "100px" });
const infoMaxWidth = useBreakpointValue({ base: "180px", md: "400px" });
const fontSize = useBreakpointValue({ base: "sm", md: "md" });

return (
<Card.Root w="full" bg="white" boxShadow="md" borderRadius="lg" _hover={{ boxShadow: "md", transform: "translateY(-1px)" }}>
<Card.Body p={{ base: "3", md: "4" }}>
{isMobile ? (
<VStack align="stretch" spacing={3}>
<HStack justify="space-between" align="start">
<Image
src={thumbnail}
boxSize={imageHeight}
objectFit="fill"
borderRadius="md"
/>
<VStack align="start" flexGrow={1} minWidth="0" spacing="0">
<Text fontSize="md" fontWeight="semibold" noOfLines={1}>
{batchName}
</Text>
<Text fontSize="sm" color="gray.500" noOfLines={1}>
{displayMessage}
</Text>
<Text fontSize="xs" color="gray.500">
{timestamp}
</Text>
</VStack>
<Text fontSize="sm" color={status.color} fontWeight="medium">
{status.label}
</Text>
</HStack>

<HStack align="center">
<Progress.Root value={progress} size="sm" flexGrow={1}>
<Progress.Track bg="gray.200">
<Progress.Range
bg={
isCancelled
? "red.500"
: isProcessing
? "primaryColour"
: "green.500"
}
/>
</Progress.Track>
</Progress.Root>
<Text fontSize="xs" whiteSpace="nowrap" w="28px" color="gray.600">
{progress}%
</Text>
</HStack>

<Button variant="ArchPrimary" size="md" width="full" onClick={onClick}>
{isCancelled ? "Details" : isCompleted ? "Continue" : "Details"}
</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}
width={imageWidth}
height={imageHeight}
objectFit="cover"
borderRadius="md"
/>
</Box>

{/* 2. Info */}
<VStack align="start" minWidth="0" flex="1" maxW={infoMaxWidth}>
<Text
fontSize={{ base: "md", md: "lg" }}
fontWeight="semibold"
noOfLines={1}
>
{batchName}
</Text>
<Text fontSize={fontSize} color="gray.500" noOfLines={1}>
{displayMessage} | {timestamp}
</Text>
</VStack>

{/* 3. Progress */}
<Box flexShrink={0} width={progressWidth}>
<Progress.Root value={progress}>
<HStack spacing="2" align="center">
<Progress.Track flex="1" bg="gray.200">
<Progress.Range
bg={
isCancelled
? "red.500"
: isProcessing
? "primaryColour"
: "green.500"
}
/>
</Progress.Track>
<Text fontSize="sm" whiteSpace="nowrap" color="gray.700" marginLeft={2}>
{progress}%
</Text>
</HStack>
</Progress.Root>
</Box>

{/* 4. Status */}
<Text
fontSize="md"
color={status.color}
fontWeight="medium"
flexShrink={0}
whiteSpace="nowrap"
>
{status.label}
</Text>

{/* 5. Button */}
<Button
variant="ArchPrimary"
size="md"
minW={buttonMinWidth}
flexShrink={0}
>
{isCancelled ? "Details" : isCompleted ? "Continue" : "Details"}
</Button>
</Flex>
)}
</Card.Body>
</Card.Root >
);
}

export default BatchCard;
Loading