From c0f4ee60ea8fb6f3fc6fbb5acba74466c5471c40 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Fri, 15 Aug 2025 00:11:09 +0800
Subject: [PATCH 01/19] Added create group button and dialog

---
 src/components/DataStudio/createGroup.jsx     | 171 ++++++++++++++++++
 src/components/DataStudio/groupTypeToggle.jsx |  73 ++++++++
 src/pages/Catalogue.jsx                       |  44 +++--
 3 files changed, 271 insertions(+), 17 deletions(-)
 create mode 100644 src/components/DataStudio/createGroup.jsx
 create mode 100644 src/components/DataStudio/groupTypeToggle.jsx

diff --git a/src/components/DataStudio/createGroup.jsx b/src/components/DataStudio/createGroup.jsx
new file mode 100644
index 0000000..1da9aae
--- /dev/null
+++ b/src/components/DataStudio/createGroup.jsx
@@ -0,0 +1,171 @@
+import { useState } from "react";
+import {
+    Button,
+    CloseButton,
+    Dialog,
+    Portal,
+    Field,
+    Input,
+    Text,
+} from "@chakra-ui/react";
+import { HiPlus } from "react-icons/hi";
+import server, { JSONResponse } from "../../networking";
+import ToastWizard from "../toastWizard";
+import GroupTypeToggle from "./groupTypeToggle";
+
+function CreateGroup() {
+    const [groupType, setGroupType] = useState("book");
+    const [title, setTitle] = useState("");
+    const [subtitle, setSubtitle] = useState("");
+    const [isCreating, setIsCreating] = useState(false);
+
+    const validateForm = () => {
+        const errors = [];
+
+        if (!title.trim()) {
+            errors.push("Title is required");
+        } else if (title.trim().length > 25) {
+            errors.push("Title must be 25 characters or less");
+        }
+
+        if (subtitle.trim() && subtitle.trim().length > 100) {
+            errors.push("Subtitle must be 100 characters or less");
+        }
+
+        return errors;
+    };
+
+    const handleCreateGroup = async () => {
+        const validationErrors = validateForm();
+        if (validationErrors.length > 0) {
+            ToastWizard.standard(
+                "error",
+                "Validation Error",
+                validationErrors.join(". ")
+            );
+            return;
+        }
+
+        setIsCreating(true);
+        try {
+            const payload = {
+                title: title.trim(),
+                subtitle: subtitle.trim() || undefined,
+                type: groupType,
+            };
+
+            const response = await server.post("/group/create", payload);
+
+            if (
+                response.data instanceof JSONResponse &&
+                response.data.isErrorStatus()
+            ) {
+                throw { response };
+            }
+
+            ToastWizard.standard(
+                "success",
+                "Group created successfully",
+                response.data.message
+            );
+
+            // Reset form
+            setTitle("");
+            setSubtitle("");
+        } catch (err) {
+            const errorMsg =
+                err.response?.data?.message ||
+                "Failed to create group. Please try again.";
+
+            ToastWizard.standard("error", "Group creation failed", errorMsg);
+        } finally {
+            setIsCreating(false);
+        }
+    };
+
+    const isTitleValid = title.trim().length > 0 && title.trim().length <= 25;
+    const isSubtitleValid = !subtitle.trim() || subtitle.trim().length <= 100;
+    const isFormValid = isTitleValid && isSubtitleValid;
+
+    return (
+        <Dialog.Root placement="center">
+            <Dialog.Trigger asChild>
+                <Button variant="ArchPrimary" colorScheme="blue">
+                    <HiPlus /> Create Group
+                </Button>
+            </Dialog.Trigger>
+            <Portal>
+                <Dialog.Backdrop />
+                <Dialog.Positioner>
+                    <Dialog.Content>
+                        <Dialog.Header>
+                            <Dialog.Title>Create New Group</Dialog.Title>
+                            <Dialog.CloseTrigger asChild>
+                                <CloseButton size="sm" />
+                            </Dialog.CloseTrigger>
+                        </Dialog.Header>
+                        <Dialog.Body>
+                            <GroupTypeToggle
+                                value={groupType}
+                                onChange={setGroupType}
+                            />
+
+                            <Field.Root w="100%" mt={4}>
+                                <Field.Label>
+                                    {groupType === "book"
+                                        ? "Book Title"
+                                        : "Category Name"}
+                                </Field.Label>
+                                <Input
+                                    placeholder={`Enter ${groupType} title`}
+                                    value={title}
+                                    onChange={(e) => setTitle(e.target.value)}
+                                    maxLength={25}
+                                />
+                                <Text fontSize="xs" color="gray.500" mt={1}>
+                                    {title.length}/25 characters
+                                </Text>
+                            </Field.Root>
+
+                            <Field.Root mt={4} w="100%">
+                                <Field.Label>
+                                    {groupType === "book"
+                                        ? "Subtitle"
+                                        : "Description"}
+                                </Field.Label>
+                                <Input
+                                    placeholder={`Enter ${groupType} details`}
+                                    value={subtitle}
+                                    onChange={(e) =>
+                                        setSubtitle(e.target.value)
+                                    }
+                                    maxLength={100}
+                                />
+                                <Text fontSize="xs" color="gray.500" mt={1}>
+                                    {subtitle.length}/100 characters
+                                </Text>
+                            </Field.Root>
+                        </Dialog.Body>
+                        <Dialog.Footer>
+                            <Dialog.ActionTrigger asChild>
+                                <Button variant="outline">Cancel</Button>
+                            </Dialog.ActionTrigger>
+                            <Button
+                                variant="ArchPrimary"
+                                isDisabled={!isFormValid}
+                                onClick={handleCreateGroup}
+                                loading={isCreating}
+                                loadingText="Creating..."
+                            >
+                                Create{" "}
+                                {groupType === "book" ? "Book" : "Category"}
+                            </Button>
+                        </Dialog.Footer>
+                    </Dialog.Content>
+                </Dialog.Positioner>
+            </Portal>
+        </Dialog.Root>
+    );
+}
+
+export default CreateGroup;
diff --git a/src/components/DataStudio/groupTypeToggle.jsx b/src/components/DataStudio/groupTypeToggle.jsx
new file mode 100644
index 0000000..0df4fe1
--- /dev/null
+++ b/src/components/DataStudio/groupTypeToggle.jsx
@@ -0,0 +1,73 @@
+import { HStack, SegmentGroup, Text, useBreakpointValue } from "@chakra-ui/react";
+import { LuBook, LuTag } from "react-icons/lu";
+
+const GroupTypeToggle = ({ value, onChange, size = "md" }) => {
+    const isMobile = useBreakpointValue({ base: true, md: false });
+    
+    const items = [
+        {
+            value: "book",
+            label: (
+                <HStack spacing={2} justify="center" color={value === "book" ? "white" : "black"}>
+                    <LuBook color={value === "book" ? "white" : "black"} />
+                    <Text fontWeight={value === "book" ? "bold" : "normal"}>
+                        Book
+                    </Text>
+                </HStack>
+            ),
+        },
+        {
+            value: "category",
+            label: (
+                <HStack spacing={2} justify="center" color={value === "category" ? "white" : "black"}>
+                    <LuTag color={value === "category" ? "white" : "black"} />
+                    <Text fontWeight={value === "category" ? "bold" : "normal"}>
+                        {isMobile ? "Cat" : "Category"}
+                    </Text>
+                </HStack>
+            ),
+        },
+    ];
+
+    const segmentProps = {
+        sm: {
+            p: "1",
+            rounded: "lg",
+            width: "180px"
+        },
+        md: {
+            p: "1",
+            rounded: "lg", 
+            width: "210px"
+        },
+        lg: {
+            p: "1.5",
+            rounded: "lg",
+            width: "240px"
+        }
+    };
+
+    const currentProps = segmentProps[size] || segmentProps.md;
+
+    return (
+        <SegmentGroup.Root
+            value={value}
+            onValueChange={({ value }) => onChange(value)}
+            size={size}
+            bg="gray.50"
+            p={currentProps.p}
+            rounded={currentProps.rounded}
+            boxShadow="md"
+            gap="1"
+            mb={6}
+        >
+            <SegmentGroup.Indicator bg="primaryColour" />
+            <SegmentGroup.Items 
+                w={currentProps.width} 
+                items={items} 
+            />
+        </SegmentGroup.Root>
+    );
+};
+
+export default GroupTypeToggle;
\ No newline at end of file
diff --git a/src/pages/Catalogue.jsx b/src/pages/Catalogue.jsx
index b406cdf..9491873 100644
--- a/src/pages/Catalogue.jsx
+++ b/src/pages/Catalogue.jsx
@@ -5,8 +5,9 @@ import { AnimatePresence, motion } from "framer-motion";
 import MMSection from "../components/Catalogue/mmSection.jsx";
 import Section from "../components/Catalogue/section.jsx";
 import CentredSpinner from "../components/CentredSpinner.jsx";
-import server, { JSONResponse } from '../networking'
+import server, { JSONResponse } from "../networking";
 import ToastWizard from "../components/toastWizard.js";
+import CreateGroup from "../components/DataStudio/createGroup.jsx";
 
 function Catalogue() {
     const [selectedMMTitle, setSelectedMMTitle] = useState(null);
@@ -14,7 +15,7 @@ function Catalogue() {
     const [books, setBooks] = useState([]);
     const [categories, setCategories] = useState({});
     const [loading, setLoading] = useState(true);
-    const { loaded } = useSelector(state => state.auth);
+    const { loaded } = useSelector((state) => state.auth);
 
     async function fetchCatalogue() {
         try {
@@ -24,19 +25,22 @@ function Catalogue() {
                 if (response.data.isErrorStatus()) {
                     const errObject = {
                         response: {
-                            data: response.data
-                        }
+                            data: response.data,
+                        },
                     };
                     throw errObject;
                 }
 
                 // Success case
-                const { categories = {}, books = [] } = response.data.raw.data || {};
+                const { categories = {}, books = [] } =
+                    response.data.raw.data || {};
                 setCategories(categories);
-                setBooks(books.map(book => ({
-                    ...book,
-                    artefacts: book.mmArtefacts || [],
-                })));
+                setBooks(
+                    books.map((book) => ({
+                        ...book,
+                        artefacts: book.mmArtefacts || [],
+                    }))
+                );
             } else {
                 throw new Error("Unexpected response format");
             }
@@ -44,21 +48,22 @@ function Catalogue() {
             if (err.response && err.response.data instanceof JSONResponse) {
                 if (err.response.data.userErrorType()) {
                     ToastWizard.standard(
-                        "error", 
-                        "Could not load catalogue", 
-                        err.response.data.message || "There was a problem loading the catalogue. Please try again later."
+                        "error",
+                        "Could not load catalogue",
+                        err.response.data.message ||
+                            "There was a problem loading the catalogue. Please try again later."
                     );
                 } else {
                     ToastWizard.standard(
-                        "error", 
-                        "Something went wrong", 
+                        "error",
+                        "Something went wrong",
                         "We are having trouble loading the catalogue. Please try again in a moment."
                     );
                 }
             } else {
                 ToastWizard.standard(
-                    "error", 
-                    "Connection issue", 
+                    "error",
+                    "Connection issue",
                     "We could not connect to the server. Please check your internet connection or try again later."
                 );
             }
@@ -107,14 +112,19 @@ function Catalogue() {
         <>
             {/* Fixed Headers */}
             <Box
-                flexShrink={0}                
+                flexShrink={0}
                 bg="white"
                 zIndex={1}
                 px={"3.5rem"}
+                display={"flex"}
+                alignItems={"center"}
+                justifyContent={"space-between"}
             >
                 <Text fontSize="2xl" fontWeight="bold">
                     Catalogue Browser
                 </Text>
+
+                <CreateGroup />
             </Box>
 
             {hasBooks && (

From 40474cc0ee988a976a48fc20f25ceb5b0132c645 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Fri, 15 Aug 2025 00:26:11 +0800
Subject: [PATCH 02/19] Refined group creation to call fetchCatalogue after
 creation

---
 src/components/DataStudio/createGroup.jsx | 42 ++++++++++++-----------
 src/pages/Catalogue.jsx                   |  2 +-
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/components/DataStudio/createGroup.jsx b/src/components/DataStudio/createGroup.jsx
index 1da9aae..2732d20 100644
--- a/src/components/DataStudio/createGroup.jsx
+++ b/src/components/DataStudio/createGroup.jsx
@@ -1,23 +1,16 @@
 import { useState } from "react";
-import {
-    Button,
-    CloseButton,
-    Dialog,
-    Portal,
-    Field,
-    Input,
-    Text,
-} from "@chakra-ui/react";
+import { Button, CloseButton, Dialog, Portal, Field, Input, Text } from "@chakra-ui/react";
 import { HiPlus } from "react-icons/hi";
 import server, { JSONResponse } from "../../networking";
 import ToastWizard from "../toastWizard";
 import GroupTypeToggle from "./groupTypeToggle";
 
-function CreateGroup() {
+function CreateGroup({ fetchCatalogue }) {
     const [groupType, setGroupType] = useState("book");
     const [title, setTitle] = useState("");
     const [subtitle, setSubtitle] = useState("");
     const [isCreating, setIsCreating] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
 
     const validateForm = () => {
         const errors = [];
@@ -28,7 +21,9 @@ function CreateGroup() {
             errors.push("Title must be 25 characters or less");
         }
 
-        if (subtitle.trim() && subtitle.trim().length > 100) {
+        if (!subtitle.trim()) {
+            errors.push("Subtitle is required");
+        } else if (subtitle.trim().length > 100) {
             errors.push("Subtitle must be 100 characters or less");
         }
 
@@ -40,7 +35,7 @@ function CreateGroup() {
         if (validationErrors.length > 0) {
             ToastWizard.standard(
                 "error",
-                "Validation Error",
+                "All fields must be filled!",
                 validationErrors.join(". ")
             );
             return;
@@ -50,7 +45,7 @@ function CreateGroup() {
         try {
             const payload = {
                 title: title.trim(),
-                subtitle: subtitle.trim() || undefined,
+                subtitle: subtitle.trim(),
                 type: groupType,
             };
 
@@ -69,9 +64,12 @@ function CreateGroup() {
                 response.data.message
             );
 
-            // Reset form
+            // Reset form and close dialog
             setTitle("");
             setSubtitle("");
+            setGroupType("book");
+            setIsOpen(false);
+            fetchCatalogue()
         } catch (err) {
             const errorMsg =
                 err.response?.data?.message ||
@@ -84,11 +82,15 @@ function CreateGroup() {
     };
 
     const isTitleValid = title.trim().length > 0 && title.trim().length <= 25;
-    const isSubtitleValid = !subtitle.trim() || subtitle.trim().length <= 100;
+    const isSubtitleValid = subtitle.trim().length > 0 && subtitle.trim().length <= 100;
     const isFormValid = isTitleValid && isSubtitleValid;
 
     return (
-        <Dialog.Root placement="center">
+        <Dialog.Root 
+            placement="center"
+            open={isOpen}
+            onOpenChange={({ open }) => setIsOpen(open)}
+        >
             <Dialog.Trigger asChild>
                 <Button variant="ArchPrimary" colorScheme="blue">
                     <HiPlus /> Create Group
@@ -110,7 +112,7 @@ function CreateGroup() {
                                 onChange={setGroupType}
                             />
 
-                            <Field.Root w="100%" mt={4}>
+                            <Field.Root w="100%">
                                 <Field.Label>
                                     {groupType === "book"
                                         ? "Book Title"
@@ -127,7 +129,7 @@ function CreateGroup() {
                                 </Text>
                             </Field.Root>
 
-                            <Field.Root mt={4} w="100%">
+                            <Field.Root mt={6} w="100%">
                                 <Field.Label>
                                     {groupType === "book"
                                         ? "Subtitle"
@@ -152,7 +154,7 @@ function CreateGroup() {
                             </Dialog.ActionTrigger>
                             <Button
                                 variant="ArchPrimary"
-                                isDisabled={!isFormValid}
+                                disabled={!isFormValid}
                                 onClick={handleCreateGroup}
                                 loading={isCreating}
                                 loadingText="Creating..."
@@ -168,4 +170,4 @@ function CreateGroup() {
     );
 }
 
-export default CreateGroup;
+export default CreateGroup;
\ No newline at end of file
diff --git a/src/pages/Catalogue.jsx b/src/pages/Catalogue.jsx
index 9491873..54e9b58 100644
--- a/src/pages/Catalogue.jsx
+++ b/src/pages/Catalogue.jsx
@@ -124,7 +124,7 @@ function Catalogue() {
                     Catalogue Browser
                 </Text>
 
-                <CreateGroup />
+                <CreateGroup fetchCatalogue={fetchCatalogue}/>
             </Box>
 
             {hasBooks && (

From b32aa2f67166ce81786dbe19965de2671a765fbb Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Fri, 15 Aug 2025 00:29:03 +0800
Subject: [PATCH 03/19] Enhanced frontend data processing

---
 src/components/DataStudio/createGroup.jsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/DataStudio/createGroup.jsx b/src/components/DataStudio/createGroup.jsx
index 2732d20..7962845 100644
--- a/src/components/DataStudio/createGroup.jsx
+++ b/src/components/DataStudio/createGroup.jsx
@@ -71,12 +71,17 @@ function CreateGroup({ fetchCatalogue }) {
             setIsOpen(false);
             fetchCatalogue()
         } catch (err) {
-            const errorMsg =
-                err.response?.data?.message ||
-                "Failed to create group. Please try again.";
-
-            ToastWizard.standard("error", "Group creation failed", errorMsg);
-        } finally {
+            if (err.response && err.response.data instanceof JSONResponse) {
+                console.log("Error response in login request:", err.response.data.fullMessage());
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard("error", "Group creation failed", err.response.data.message);
+                } else {
+                    ToastWizard.standard("error", "Group creation failed", "Something went wrong while creating your group. Please try again later.", 3000, true, handleCreateGroup, 'Retry');
+                }
+            } else {
+                console.log("Unexpected error in login request:", err);
+                ToastWizard.standard("error", "Group creation failed", "Something went wrong while creating your group. Please try again later.", 3000, true, handleCreateGroup, 'Retry');
+            }
             setIsCreating(false);
         }
     };

From b6175162ec452be8a01cb5523f92cf738e4b20b1 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Fri, 15 Aug 2025 00:35:46 +0800
Subject: [PATCH 04/19] Shifted name and desc for collection to group view
 details component

---
 src/components/DataStudio/groupViewDetails.jsx | 16 ++++++++++++++++
 src/pages/GroupView.jsx                        | 10 ++--------
 2 files changed, 18 insertions(+), 8 deletions(-)
 create mode 100644 src/components/DataStudio/groupViewDetails.jsx

diff --git a/src/components/DataStudio/groupViewDetails.jsx b/src/components/DataStudio/groupViewDetails.jsx
new file mode 100644
index 0000000..97bedea
--- /dev/null
+++ b/src/components/DataStudio/groupViewDetails.jsx
@@ -0,0 +1,16 @@
+import { Box, Text } from "@chakra-ui/react";
+
+const GroupViewDetails = ({ collection }) => (
+    <Box mb={8}>
+        <Text fontSize="xl" fontWeight="bold">
+            {collection.name}
+        </Text>
+        {collection.description && (
+            <Text fontSize="md" color="gray.600" mt={2}>
+                {collection.description}
+            </Text>
+        )}
+    </Box>
+);
+
+export default GroupViewDetails;
diff --git a/src/pages/GroupView.jsx b/src/pages/GroupView.jsx
index 9eea4f1..55fdb63 100644
--- a/src/pages/GroupView.jsx
+++ b/src/pages/GroupView.jsx
@@ -6,6 +6,7 @@ import CentredSpinner from '../components/CentredSpinner';
 import server, { JSONResponse } from '../networking'
 import ToastWizard from '../components/toastWizard';
 import GroupCardItem from '../components/DataStudio/groupCardItem';
+import GroupViewDetails from '../components/DataStudio/groupViewDetails';
 
 function GroupView() {
     const { colID } = useParams();
@@ -131,14 +132,7 @@ function GroupView() {
                 </Box>
             </Flex>
 
-            <Box mb={8}>
-                <Text fontSize="xl" fontWeight="bold">{collection.name}</Text>
-                {collection.description && (
-                    <Text fontSize="md" color="gray.600" mt={2}>
-                        {collection.description}
-                    </Text>
-                )}
-            </Box>
+            <GroupViewDetails collection={collection} />
 
             {/* Items grid */}
             <Grid 

From 4b9fd8b3640c3148fccdd78b484695d8876c69ec Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Fri, 15 Aug 2025 00:45:16 +0800
Subject: [PATCH 05/19] Passed in colID for groupviewdetails

---
 src/components/DataStudio/groupViewDetails.jsx | 2 +-
 src/pages/GroupView.jsx                        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DataStudio/groupViewDetails.jsx b/src/components/DataStudio/groupViewDetails.jsx
index 97bedea..b76fdcc 100644
--- a/src/components/DataStudio/groupViewDetails.jsx
+++ b/src/components/DataStudio/groupViewDetails.jsx
@@ -1,6 +1,6 @@
 import { Box, Text } from "@chakra-ui/react";
 
-const GroupViewDetails = ({ collection }) => (
+const GroupViewDetails = ({ collection, colID }) => (
     <Box mb={8}>
         <Text fontSize="xl" fontWeight="bold">
             {collection.name}
diff --git a/src/pages/GroupView.jsx b/src/pages/GroupView.jsx
index 55fdb63..e57ab3c 100644
--- a/src/pages/GroupView.jsx
+++ b/src/pages/GroupView.jsx
@@ -132,7 +132,7 @@ function GroupView() {
                 </Box>
             </Flex>
 
-            <GroupViewDetails collection={collection} />
+            <GroupViewDetails collection={collection} colID={colID} />
 
             {/* Items grid */}
             <Grid 

From 8864e66b9cf329cb000b66858bd3ecc9de7be393 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Fri, 15 Aug 2025 00:47:56 +0800
Subject: [PATCH 06/19] Shifted create group and group type toggle to catalogue
 folder

---
 src/components/{DataStudio => Catalogue}/createGroup.jsx     | 0
 src/components/{DataStudio => Catalogue}/groupTypeToggle.jsx | 0
 src/pages/Catalogue.jsx                                      | 2 +-
 3 files changed, 1 insertion(+), 1 deletion(-)
 rename src/components/{DataStudio => Catalogue}/createGroup.jsx (100%)
 rename src/components/{DataStudio => Catalogue}/groupTypeToggle.jsx (100%)

diff --git a/src/components/DataStudio/createGroup.jsx b/src/components/Catalogue/createGroup.jsx
similarity index 100%
rename from src/components/DataStudio/createGroup.jsx
rename to src/components/Catalogue/createGroup.jsx
diff --git a/src/components/DataStudio/groupTypeToggle.jsx b/src/components/Catalogue/groupTypeToggle.jsx
similarity index 100%
rename from src/components/DataStudio/groupTypeToggle.jsx
rename to src/components/Catalogue/groupTypeToggle.jsx
diff --git a/src/pages/Catalogue.jsx b/src/pages/Catalogue.jsx
index 54e9b58..454e3fc 100644
--- a/src/pages/Catalogue.jsx
+++ b/src/pages/Catalogue.jsx
@@ -7,7 +7,7 @@ import Section from "../components/Catalogue/section.jsx";
 import CentredSpinner from "../components/CentredSpinner.jsx";
 import server, { JSONResponse } from "../networking";
 import ToastWizard from "../components/toastWizard.js";
-import CreateGroup from "../components/DataStudio/createGroup.jsx";
+import CreateGroup from "../components/Catalogue/createGroup.jsx";
 
 function Catalogue() {
     const [selectedMMTitle, setSelectedMMTitle] = useState(null);

From 41aae5ca3b5ad34981464b6dcd9233919b880d80 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Fri, 15 Aug 2025 00:54:43 +0800
Subject: [PATCH 07/19] Added tooltip for create group dialog

---
 src/components/Catalogue/createGroup.jsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/Catalogue/createGroup.jsx b/src/components/Catalogue/createGroup.jsx
index 7962845..ab47f42 100644
--- a/src/components/Catalogue/createGroup.jsx
+++ b/src/components/Catalogue/createGroup.jsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Button, CloseButton, Dialog, Portal, Field, Input, Text } from "@chakra-ui/react";
-import { HiPlus } from "react-icons/hi";
+import { Tooltip } from "../../components/ui/tooltip"
+import { HiInformationCircle, HiPlus } from "react-icons/hi2";
 import server, { JSONResponse } from "../../networking";
 import ToastWizard from "../toastWizard";
 import GroupTypeToggle from "./groupTypeToggle";
@@ -106,7 +107,19 @@ function CreateGroup({ fetchCatalogue }) {
                 <Dialog.Positioner>
                     <Dialog.Content>
                         <Dialog.Header>
-                            <Dialog.Title>Create New Group</Dialog.Title>
+                            <Dialog.Title display={"flex"} flexDir={"row"} alignItems={"center"}>
+                                <Text mr={2}>Create New Group</Text>
+                                <Tooltip
+                                    showArrow 
+                                    content='Books contain Meeting Minutes, Category contain artefacts with Human Figures'
+                                    positioning={{ placement: "right" }} 
+                                    closeDelay={150} 
+                                    openDelay={150}
+                                    contentProps={{ css: { "--tooltip-bg": "#12144C" } }}
+                                >
+                                    <HiInformationCircle size={20} />
+                                </Tooltip>
+                            </Dialog.Title>
                             <Dialog.CloseTrigger asChild>
                                 <CloseButton size="sm" />
                             </Dialog.CloseTrigger>

From f48d2492e4f0f573de3051880a049bba0eda0fcc Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Fri, 15 Aug 2025 02:00:29 +0800
Subject: [PATCH 08/19] Added action bar and saving logic for group view
 details

---
 .../DataStudio/groupViewActionBar.jsx         | 171 ++++++++++++++++++
 .../DataStudio/groupViewDetails.jsx           | 134 ++++++++++++--
 src/pages/GroupView.jsx                       |   2 +-
 3 files changed, 290 insertions(+), 17 deletions(-)
 create mode 100644 src/components/DataStudio/groupViewActionBar.jsx

diff --git a/src/components/DataStudio/groupViewActionBar.jsx b/src/components/DataStudio/groupViewActionBar.jsx
new file mode 100644
index 0000000..4cd7314
--- /dev/null
+++ b/src/components/DataStudio/groupViewActionBar.jsx
@@ -0,0 +1,171 @@
+import { ActionBar, Button, Dialog, Portal } from '@chakra-ui/react';
+import { isEqual } from 'lodash';
+import { useEffect, useState } from 'react';
+import ToastWizard from '../toastWizard';
+import server, { JSONResponse } from '../../networking';
+
+function GroupViewActionBar({ itemData, originalData, setItemData, refreshData, itemId, isEditing, setIsEditing }) {
+    const [changesMade, setChangesMade] = useState(false);
+    const [isConfirmSaveOpen, setIsConfirmSaveOpen] = useState(false);
+    const [saveLoading, setSaveLoading] = useState(false);
+
+    useEffect(() => {
+        setChangesMade(!isEqual(itemData, originalData) && isEditing);
+    }, [itemData, originalData, isEditing]);
+
+    // Validation functions
+    const validateField = (fieldName, value) => {
+        if (value === null || value === undefined) return true;
+        
+        switch (fieldName) {
+            case 'name':
+                return typeof value === 'string' && value.trim().length >= 1 && value.trim().length <= 25;
+            case 'description':
+                return typeof value === 'string' && value.trim().length <= 200;
+            default:
+                return true;
+        }
+    };
+
+    const validateUpdateDict = (updateDict) => {
+        const errors = [];
+        
+        if (!validateField('name', updateDict.name)) {
+            errors.push('Name must be between 1-25 characters');
+        }
+
+        if (updateDict.description && !validateField('description', updateDict.description)) {
+            errors.push('Description must be 200 characters or less');
+        }
+
+        return errors;
+    };
+
+    const handleCancelChanges = () => {
+        setItemData(originalData);
+        ToastWizard.standard("warning", "Changes Reset", "All changes reverted.", 3000);
+    };
+
+    const handleSaveChanges = async () => {
+        setSaveLoading(true);
+
+        const updateDict = {
+            collectionID: itemId,
+            name: itemData.name || '',
+            description: itemData.description || ''
+        };
+
+        // Validate the update dictionary
+        const validationErrors = validateUpdateDict(updateDict);
+        if (validationErrors.length > 0) {
+            setSaveLoading(false);
+            ToastWizard.standard(
+                "error", 
+                "Validation Error", 
+                validationErrors.join('. '), 
+                5000
+            );
+            return;
+        }
+
+        try {
+            const response = await server.post('/group/updateDetails', updateDict);
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw new Error(errObject);
+                }
+
+                // Success case
+                refreshData();
+                setIsConfirmSaveOpen(false);
+                setIsEditing(false);
+
+                ToastWizard.standard("success", "Collection updated", response.data.message);
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            if (err.response && err.response.data instanceof JSONResponse) {
+                console.log("Error response in update collection data request:", err.response.data.fullMessage());
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard("error", "Collection update failed.", err.response.data.message);
+                } else {
+                    ToastWizard.standard(
+                        "error", 
+                        "Collection update failed.", 
+                        err.response.data.message, 
+                        3000,
+                        true,
+                        handleSaveChanges,
+                        "Retry"
+                    );
+                }
+            } else {
+                console.log("Unexpected error in collection update request:", err);
+                ToastWizard.standard(
+                    "error", 
+                    "Collection update failed.", 
+                    "Failed to update your collection information. Please try again.", 
+                    3000,
+                    true,
+                    handleSaveChanges,
+                    "Retry"
+                );
+            }
+        }
+        setSaveLoading(false);
+    };
+
+    return (
+        <ActionBar.Root open={changesMade}>
+            <Portal>
+                <ActionBar.Positioner>
+                    <ActionBar.Content>
+                        <Button variant={'outline'} colorPalette={'red'} onClick={handleCancelChanges}>
+                            Reset
+                        </Button>
+
+                        <Dialog.Root placement="center" open={isConfirmSaveOpen} onOpenChange={(e) => setIsConfirmSaveOpen(e.open)}>
+                            <Dialog.Trigger asChild>
+                                <Button variant={"outline"} colorPalette={'green'} size="sm">
+                                    Save Changes
+                                </Button>
+                            </Dialog.Trigger>
+                            <Portal>
+                                <Dialog.Backdrop />
+                                <Dialog.Positioner>
+                                    <Dialog.Content>
+                                        <Dialog.Header>
+                                            <Dialog.Title>Update Collection</Dialog.Title>
+                                        </Dialog.Header>
+                                        <Dialog.Body>
+                                            <Dialog.Description>
+                                                Are you sure you'd like to save these changes? This action cannot be undone.
+                                            </Dialog.Description>
+                                        </Dialog.Body>
+                                        <Dialog.Footer>
+                                            <Button variant={'solid'} colorPalette={'red'} onClick={() => setIsConfirmSaveOpen(false)}>
+                                                Cancel
+                                            </Button>
+                                            <Button bgColor={'primaryColour'} color={'white'} onClick={handleSaveChanges} loading={saveLoading} loadingText={'Saving...'}>
+                                                Save Changes
+                                            </Button>
+                                        </Dialog.Footer>
+                                    </Dialog.Content>
+                                </Dialog.Positioner>
+                            </Portal>
+                        </Dialog.Root>
+                    </ActionBar.Content>
+                </ActionBar.Positioner>
+            </Portal>
+        </ActionBar.Root>
+    );
+}
+
+export default GroupViewActionBar;
\ No newline at end of file
diff --git a/src/components/DataStudio/groupViewDetails.jsx b/src/components/DataStudio/groupViewDetails.jsx
index b76fdcc..d18c51f 100644
--- a/src/components/DataStudio/groupViewDetails.jsx
+++ b/src/components/DataStudio/groupViewDetails.jsx
@@ -1,16 +1,118 @@
-import { Box, Text } from "@chakra-ui/react";
-
-const GroupViewDetails = ({ collection, colID }) => (
-    <Box mb={8}>
-        <Text fontSize="xl" fontWeight="bold">
-            {collection.name}
-        </Text>
-        {collection.description && (
-            <Text fontSize="md" color="gray.600" mt={2}>
-                {collection.description}
-            </Text>
-        )}
-    </Box>
-);
-
-export default GroupViewDetails;
+import { Box, Text, Input, Textarea, Flex, Button, useBreakpointValue } from "@chakra-ui/react";
+import { useState, useEffect } from "react";
+import { MdOutlineEdit, MdOutlineCancel } from "react-icons/md";
+import ToastWizard from "../toastWizard";
+import GroupViewActionBar from "./GroupViewActionBar";
+
+const GroupViewDetails = ({ collection, colID, refreshCollectionData }) => {
+    const [isEditing, setIsEditing] = useState(false);
+    const [originalCollectionData, setOriginalCollectionData] = useState({});
+    const [collectionData, setCollectionData] = useState({});
+    const isMobile = useBreakpointValue({ base: true, md: false });
+
+    // Initialize data when collection prop changes
+    useEffect(() => {
+        if (collection) {
+            const processedData = {
+                name: collection.name || '',
+                description: collection.description || ''
+            };
+            setOriginalCollectionData(processedData);
+            setCollectionData(processedData);
+        }
+    }, [collection]);
+
+    const handleEditClick = () => {
+        setIsEditing(true);
+        ToastWizard.standard("info", "Editor Mode Enabled", "You are currently in editor mode. Remember to save your changes!", 3000);
+    };
+
+    const handleCancelClick = () => {
+        setCollectionData(originalCollectionData);
+        setIsEditing(false);
+        ToastWizard.standard("warning", "Editor Mode Disabled", "All changes reverted.", 3000);
+    };
+
+    const handleNameChange = (e) => {
+        setCollectionData({
+            ...collectionData,
+            name: e.target.value
+        });
+    };
+
+    const handleDescriptionChange = (e) => {
+        setCollectionData({
+            ...collectionData,
+            description: e.target.value
+        });
+    };
+
+    return (
+        <>
+            <Box mb={8}>
+                <Flex justify="space-between" alignItem="center" mb={2}>
+                    {isEditing ? (
+                        <Input 
+                            placeholder="Collection title" 
+                            type="text" 
+                            value={collectionData.name || ''} 
+                            onChange={handleNameChange}
+                            fontSize="xl"
+                            fontWeight="bold"
+                            flex="1"
+                            mr={4}
+                        />
+                    ) : (
+                        <Text fontSize="xl" fontWeight="bold">
+                            {collectionData.name}
+                        </Text>
+                    )}
+                    
+                    <Button 
+                        size="sm" 
+                        variant="ArchPrimary" 
+                        onClick={isEditing ? handleCancelClick : handleEditClick}
+                        w={isMobile ? "100px" : "auto"}
+                        mb={4}
+                    >
+                        {isEditing ? <MdOutlineCancel /> : <MdOutlineEdit />}
+                        <Text ml={2}>{isEditing ? 'Cancel' : 'Edit'}</Text>
+                    </Button>
+                </Flex>
+
+                {isEditing ? (
+                    <Textarea
+                        placeholder="Collection description"
+                        value={collectionData.description || ''}
+                        onChange={handleDescriptionChange}
+                        fontSize="md"
+                        color="gray.600"
+                        mt={2}
+                        minH={120}
+                        resize={"none"}
+                    />
+                ) : (
+                    collectionData.description && (
+                        <Text fontSize="md" color="gray.600" mt={2}>
+                            {collectionData.description}
+                        </Text>
+                    )
+                )}
+            </Box>
+
+            {isEditing && (
+                <GroupViewActionBar 
+                    itemData={collectionData}
+                    originalData={originalCollectionData}
+                    setItemData={setCollectionData}
+                    refreshData={refreshCollectionData}
+                    itemId={colID}
+                    isEditing={isEditing}
+                    setIsEditing={setIsEditing}
+                />
+            )}
+        </>
+    );
+};
+
+export default GroupViewDetails;
\ No newline at end of file
diff --git a/src/pages/GroupView.jsx b/src/pages/GroupView.jsx
index e57ab3c..7913d5b 100644
--- a/src/pages/GroupView.jsx
+++ b/src/pages/GroupView.jsx
@@ -132,7 +132,7 @@ function GroupView() {
                 </Box>
             </Flex>
 
-            <GroupViewDetails collection={collection} colID={colID} />
+            <GroupViewDetails collection={collection} colID={colID} refreshCollectionData={fetchCollection} />
 
             {/* Items grid */}
             <Grid 

From 08889a6ec4381616c9f5438591265c3ad327d9a6 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Fri, 15 Aug 2025 11:05:02 +0800
Subject: [PATCH 09/19] Added figure label for catalogue item view

---
 src/components/Catalogue/metadataDisplay.jsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/Catalogue/metadataDisplay.jsx b/src/components/Catalogue/metadataDisplay.jsx
index 0c33bc3..7ee12e3 100644
--- a/src/components/Catalogue/metadataDisplay.jsx
+++ b/src/components/Catalogue/metadataDisplay.jsx
@@ -112,8 +112,11 @@ function MetadataDisplay({ currentItem, isOpen }) {
                     throw errObject;
                 }
 
-                // Success case
-                setMetadata(response.data.raw.data.metadata);
+                setMetadata({
+                    ...response.data.raw.data.metadata,
+                    figureInfo: response.data.raw.figureInfo || {}
+                });
+
             } else {
                 throw new Error("Unexpected response format");
             }
@@ -279,6 +282,14 @@ function MetadataDisplay({ currentItem, isOpen }) {
                                         }
                                         loading="eager"
                                     />
+                                    <Text
+                                        mt={2}
+                                        fontSize={10}
+                                        lineClamp={1}
+                                        title={metadata.figureInfo[id] || id}
+                                    >
+                                        {metadata.figureInfo[id] || "No Label"}
+                                    </Text>
                                 </Box>
                             ))}
                         </Flex>

From 42da642c384c272dbf08fee3b1e3ab45d171162b Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Fri, 15 Aug 2025 11:52:32 +0800
Subject: [PATCH 10/19] Added labels for headshots

---
 src/components/Catalogue/metadataDisplay.jsx |   2 +-
 src/components/DataStudio/editorCard.jsx     |   6 +-
 src/components/DataStudio/figureDisplay.jsx  | 231 ++++++++++++-------
 src/pages/ArtefactEditor.jsx                 |   5 +-
 4 files changed, 157 insertions(+), 87 deletions(-)

diff --git a/src/components/Catalogue/metadataDisplay.jsx b/src/components/Catalogue/metadataDisplay.jsx
index 7ee12e3..3d77a96 100644
--- a/src/components/Catalogue/metadataDisplay.jsx
+++ b/src/components/Catalogue/metadataDisplay.jsx
@@ -286,7 +286,7 @@ function MetadataDisplay({ currentItem, isOpen }) {
                                         mt={2}
                                         fontSize={10}
                                         lineClamp={1}
-                                        title={metadata.figureInfo[id] || id}
+                                        title={metadata.figureInfo[id]}
                                     >
                                         {metadata.figureInfo[id] || "No Label"}
                                     </Text>
diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
index 013277d..c845cd8 100644
--- a/src/components/DataStudio/editorCard.jsx
+++ b/src/components/DataStudio/editorCard.jsx
@@ -87,7 +87,7 @@ function renderHighlightedText(text, labels, hoveredIndex, setHoveredIndex) {
     return <Box as="div" whiteSpace="pre-wrap">{chunks}</Box>;
 }
 
-function EditorCard({ metadata, artefactId, refreshArtefactData }) {
+function EditorCard({ metadata = { metadata: {} }, artefactId, refreshArtefactData }) {
     const [selectedTranscription, setSelectedTranscription] = useState("tradCN");
     const [isEditing, setIsEditing] = useState(false);
     const [hoveredIndex, setHoveredIndex] = useState(null);
@@ -155,7 +155,7 @@ function EditorCard({ metadata, artefactId, refreshArtefactData }) {
         });
     }
 
-    const isMMArtefact = (metadata.metadata.english || metadata.metadata.tradCN || metadata.metadata.simplifiedCN || metadata.metadata.summary) ? true : false;
+    const isMMArtefact = (metadata?.metadata?.english || metadata?.metadata?.tradCN || metadata?.metadata?.simplifiedCN || metadata?.metadata?.summary) ? true : false;
 
     return (
         <>
@@ -346,7 +346,7 @@ function EditorCard({ metadata, artefactId, refreshArtefactData }) {
 
                                 <FigureDisplaySection 
                                     artefactId={artefactId}
-                                    figureIds={metadata.metadata.figureIDs} 
+                                    figureInfo={metadata.figureInfo} 
                                     getArtefactData={refreshArtefactData}
                                     isEditing={isEditing}
                                 />
diff --git a/src/components/DataStudio/figureDisplay.jsx b/src/components/DataStudio/figureDisplay.jsx
index d47d465..0958a15 100644
--- a/src/components/DataStudio/figureDisplay.jsx
+++ b/src/components/DataStudio/figureDisplay.jsx
@@ -1,24 +1,28 @@
-import { Box, Flex, Text, Image, SkeletonCircle, Portal, Dialog, Button } from '@chakra-ui/react';
-import { MdOutlineDeleteForever } from 'react-icons/md';
-import { useState } from 'react';
-import server, { JSONResponse } from '../../networking';
-import ToastWizard from '../toastWizard';
+import { Box, Flex, Text, Image, SkeletonCircle, Portal, Dialog, Button } from "@chakra-ui/react";
+import { MdOutlineDeleteForever } from "react-icons/md";
+import { useState } from "react";
+import server, { JSONResponse } from "../../networking";
+import ToastWizard from "../toastWizard";
 
-function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditing }) {
+function FigureDisplaySection({ artefactId, figureInfo, getArtefactData, isEditing }) {
     const [deletingFigure, setDeletingFigure] = useState(null);
     const [removing, setRemoving] = useState(false);
     const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
     const [selectedFigureId, setSelectedFigureId] = useState(null);
+    const figureIds = Object.keys(figureInfo || {});
 
     const handleRemoveFigure = async (figureID) => {
         setDeletingFigure(figureID);
         setRemoving(true);
-        
+
         try {
-            const response = await server.post('/studio/artefact/removeFigure', {
-                artefactID: artefactId,
-                figureID: figureID
-            });
+            const response = await server.post(
+                "/studio/artefact/removeFigure",
+                {
+                    artefactID: artefactId,
+                    figureID: figureID,
+                }
+            );
 
             if (response.data instanceof JSONResponse) {
                 if (response.data.isErrorStatus()) {
@@ -32,7 +36,7 @@ function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditin
             }
         } catch (err) {
             console.error("Error removing figure:", err);
-            
+
             let errorMessage = "Failed to remove figure. Please try again.";
             if (err.response && err.response.data instanceof JSONResponse) {
                 errorMessage = err.response.data.message;
@@ -41,13 +45,13 @@ function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditin
             }
 
             ToastWizard.standard(
-                "error", 
-                "Remove failed", 
-                errorMessage, 
+                "error",
+                "Remove failed",
+                errorMessage,
                 3000,
                 true,
                 handleRemoveFigure,
-                'Retry'
+                "Retry"
             );
         } finally {
             setDeletingFigure(null);
@@ -63,77 +67,125 @@ function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditin
             <Box p={2} h="auto">
                 {figureIds.length > 0 ? (
                     <Flex wrap="wrap" gap={4}>
-                        {figureIds.map(id => (
-                            <Box
+                        {figureIds.map((id) => (
+                            <Flex
                                 key={id}
-                                textAlign="center"
-                                position="relative"
-                                width={100}
-                                height={100}
-                                cursor="pointer"
-                                borderRadius="full"
-                                overflow="hidden"
-                                _hover={isEditing ? {
-                                    '& .delete-overlay': {
-                                        opacity: 1
-                                    }
-                                } : {}}
+                                flexDirection="column"
+                                alignItems="center"
+                                width="100px"
                             >
-                                <Image
-                                    src={`${import.meta.env.VITE_BACKEND_URL}/cdn/people/${id}`}
-                                    alt={`Headshot of ${id}`}
-                                    width="100%"
-                                    height="100%"
-                                    objectFit="cover"
-                                    border="1px solid"
-                                    borderColor="gray.200"
-                                    fallback={<SkeletonCircle size="100px"/>}
-                                    loading="eager"
-                                />
-                                
-                                {/* Delete Overlay - only show when editing */}
-                                {isEditing && (
-                                    <Box
-                                        className="delete-overlay"
-                                        position="absolute"
-                                        top={0}
-                                        left={0}
-                                        right={0}
-                                        bottom={0}
-                                        bg="blackAlpha.600"
-                                        opacity={0}
-                                        transition="opacity 0.2s ease-in-out"
-                                        display="flex"
-                                        alignItems="center"
-                                        justifyContent="center"
-                                        borderRadius="full"
-                                        onClick={() => {
-                                            setSelectedFigureId(id);
-                                            setIsConfirmDeleteOpen(true);
-                                        }}
-                                        cursor={deletingFigure === id ? "not-allowed" : "pointer"}
-                                        pointerEvents={deletingFigure === id ? "none" : "auto"}
-                                    >
-                                        <MdOutlineDeleteForever
-                                            size={32}
-                                            color={deletingFigure === id ? "#999" : "#e53e3e"}
-                                            style={{
-                                                opacity: deletingFigure === id ? 0.5 : 1,
-                                                transform: deletingFigure === id ? "scale(0.8)" : "scale(1)",
-                                                transition: "all 0.2s ease-in-out"
+                                <Box
+                                    position="relative"
+                                    width={100}
+                                    height={100}
+                                    cursor="pointer"
+                                    borderRadius="full"
+                                    overflow="hidden"
+                                    _hover={
+                                        isEditing
+                                            ? {
+                                                  "& .delete-overlay": {
+                                                      opacity: 1,
+                                                  },
+                                              }
+                                            : {}
+                                    }
+                                >
+                                    <Image
+                                        src={`${import.meta.env.VITE_BACKEND_URL}/cdn/people/${id}`}
+                                        alt={
+                                            figureInfo[id] ||
+                                            `Headshot of ${id}`
+                                        }
+                                        width="100%"
+                                        height="100%"
+                                        objectFit="cover"
+                                        border="1px solid"
+                                        borderColor="gray.200"
+                                        fallback={
+                                            <SkeletonCircle size="100px" />
+                                        }
+                                        loading="eager"
+                                    />
+
+                                    {/* Delete Overlay */}
+                                    {isEditing && (
+                                        <Box
+                                            className="delete-overlay"
+                                            position="absolute"
+                                            top={0}
+                                            left={0}
+                                            right={0}
+                                            bottom={0}
+                                            bg="blackAlpha.600"
+                                            opacity={0}
+                                            transition="opacity 0.2s ease-in-out"
+                                            display="flex"
+                                            alignItems="center"
+                                            justifyContent="center"
+                                            borderRadius="full"
+                                            onClick={() => {
+                                                setSelectedFigureId(id);
+                                                setIsConfirmDeleteOpen(true);
                                             }}
-                                        />
-                                    </Box>
-                                )}
-                            </Box>
+                                            cursor={
+                                                deletingFigure === id
+                                                    ? "not-allowed"
+                                                    : "pointer"
+                                            }
+                                            pointerEvents={
+                                                deletingFigure === id
+                                                    ? "none"
+                                                    : "auto"
+                                            }
+                                        >
+                                            <MdOutlineDeleteForever
+                                                size={32}
+                                                color={
+                                                    deletingFigure === id
+                                                        ? "#999"
+                                                        : "#e53e3e"
+                                                }
+                                                style={{
+                                                    opacity:
+                                                        deletingFigure === id
+                                                            ? 0.5
+                                                            : 1,
+                                                    transform:
+                                                        deletingFigure === id
+                                                            ? "scale(0.8)"
+                                                            : "scale(1)",
+                                                    transition:
+                                                        "all 0.2s ease-in-out",
+                                                }}
+                                            />
+                                        </Box>
+                                    )}
+                                </Box>
+
+                                {/* Label under image */}
+                                <Text
+                                    mt={2}
+                                    fontSize={10}
+                                    lineClamp={1}
+                                >
+                                    {figureInfo[id] || "No Label"}
+                                </Text>
+                            </Flex>
                         ))}
                     </Flex>
                 ) : (
-                    <Text fontWeight={"light"} fontSize={16}>No associated figures</Text>
+                    <Text fontWeight={"light"} fontSize={16}>
+                        No associated figures
+                    </Text>
                 )}
             </Box>
 
-            <Dialog.Root placement="center" open={isConfirmDeleteOpen} onOpenChange={(e) => setIsConfirmDeleteOpen(e.open)}>
+            <Dialog.Root
+                placement="center"
+                open={isConfirmDeleteOpen}
+                onOpenChange={(e) => setIsConfirmDeleteOpen(e.open)}
+            >
                 <Portal>
                     <Dialog.Backdrop />
                     <Dialog.Positioner>
@@ -143,14 +195,29 @@ function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditin
                             </Dialog.Header>
                             <Dialog.Body>
                                 <Dialog.Description>
-                                    Are you sure you'd like to remove this figure? This action cannot be undone.
+                                    Are you sure you'd like to remove this
+                                    figure? This action cannot be undone.
                                 </Dialog.Description>
                             </Dialog.Body>
                             <Dialog.Footer>
-                                <Button variant={'solid'} colorPalette={'red'} onClick={() => setIsConfirmDeleteOpen(false)}>
+                                <Button
+                                    variant={"solid"}
+                                    colorPalette={"red"}
+                                    onClick={() =>
+                                        setIsConfirmDeleteOpen(false)
+                                    }
+                                >
                                     Cancel
                                 </Button>
-                                <Button bgColor={'primaryColour'} color={'white'} onClick={() => handleRemoveFigure(selectedFigureId)} loading={removing} loadingText={'Removing...'}>
+                                <Button
+                                    bgColor={"primaryColour"}
+                                    color={"white"}
+                                    onClick={() =>
+                                        handleRemoveFigure(selectedFigureId)
+                                    }
+                                    loading={removing}
+                                    loadingText={"Removing..."}
+                                >
                                     Remove
                                 </Button>
                             </Dialog.Footer>
@@ -162,4 +229,4 @@ function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditin
     );
 }
 
-export default FigureDisplaySection;
\ No newline at end of file
+export default FigureDisplaySection;
diff --git a/src/pages/ArtefactEditor.jsx b/src/pages/ArtefactEditor.jsx
index c101e17..bf222cf 100644
--- a/src/pages/ArtefactEditor.jsx
+++ b/src/pages/ArtefactEditor.jsx
@@ -133,7 +133,10 @@ function ArtefactEditor() {
                 }
 
                 // Success case
-                setMetadata(response.data.raw.data);
+                setMetadata({
+                    ...response.data.raw.data,
+                    figureInfo: response.data.raw.figureInfo || {}
+                });
             } else {
                 throw new Error("Unexpected response format");
             }

From 469f6b1dbb70e54762fd4accd5231d1622c56121 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Fri, 15 Aug 2025 11:56:00 +0800
Subject: [PATCH 11/19] Centered group type toggle

---
 src/components/Catalogue/createGroup.jsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/Catalogue/createGroup.jsx b/src/components/Catalogue/createGroup.jsx
index ab47f42..d8d3126 100644
--- a/src/components/Catalogue/createGroup.jsx
+++ b/src/components/Catalogue/createGroup.jsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Button, CloseButton, Dialog, Portal, Field, Input, Text } from "@chakra-ui/react";
+import { Button, CloseButton, Dialog, Portal, Field, Input, Text, Box } from "@chakra-ui/react";
 import { Tooltip } from "../../components/ui/tooltip"
 import { HiInformationCircle, HiPlus } from "react-icons/hi2";
 import server, { JSONResponse } from "../../networking";
@@ -125,10 +125,12 @@ function CreateGroup({ fetchCatalogue }) {
                             </Dialog.CloseTrigger>
                         </Dialog.Header>
                         <Dialog.Body>
-                            <GroupTypeToggle
-                                value={groupType}
-                                onChange={setGroupType}
-                            />
+                            <Box display={"flex"} flexDirection={"column"} alignItems={"center"}>
+                                <GroupTypeToggle
+                                    value={groupType}
+                                    onChange={setGroupType}
+                                />
+                            </Box>
 
                             <Field.Root w="100%">
                                 <Field.Label>

From b477974017378ed2025679e1b20d95f9b3888f52 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Fri, 15 Aug 2025 14:01:01 +0800
Subject: [PATCH 12/19] Added delete group functionality

---
 src/components/DataStudio/deleteGroup.jsx     | 102 ++++++++++++++++++
 .../DataStudio/groupViewDetails.jsx           |   8 +-
 src/pages/GroupView.jsx                       |  32 +++---
 3 files changed, 124 insertions(+), 18 deletions(-)
 create mode 100644 src/components/DataStudio/deleteGroup.jsx

diff --git a/src/components/DataStudio/deleteGroup.jsx b/src/components/DataStudio/deleteGroup.jsx
new file mode 100644
index 0000000..c640ec9
--- /dev/null
+++ b/src/components/DataStudio/deleteGroup.jsx
@@ -0,0 +1,102 @@
+import { Button, CloseButton, Dialog, Field, Input, Portal, Text } from '@chakra-ui/react';
+import ToastWizard from '../toastWizard';
+import { useState } from 'react';
+import { MdDeleteForever } from 'react-icons/md';
+import { useNavigate } from 'react-router-dom';
+import server, { JSONResponse } from '../../networking';
+
+function DeleteGroup({ isMobile, colID, colName }) {
+    const navigate = useNavigate()
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [deletingGroup, setDeletingGroup] = useState(false);
+    const [confirmGroupName, setConfirmGroupName] = useState('');
+
+    const handleDelete = async () => {
+        try {
+            const response = await server.post('/group/delete', {groupID: colID})
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw new Error(errObject);
+                }
+
+                // Success case
+                navigate(-1)
+                ToastWizard.standard("success", "Group Deleted", "Group deleted successfully.");
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            if (err.response && err.response.data instanceof JSONResponse) {
+                console.log("Error response in delete group request:", err.response.data.fullMessage());
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard("error", "Failed to delte group", err.response.data.message);
+                } else {
+                    ToastWizard.standard("error", "Failed to delete group", "Unable to delete group. Please try again later.", 3000, true, handleDelete, 'Retry')
+                }
+            } else {
+                console.log("Unexpected error in deleting group:", err);
+                ToastWizard.standard("error", "Failed to delete group", "Unable to delete group. Please try again later.", 3000, true, handleDelete, 'Retry')
+            }
+        }
+    }
+
+    return (
+        <Dialog.Root size={'sm'} open={dialogOpen} onOpenChange={(e) => setDialogOpen(e.open)} placement={'center'}>
+            <Dialog.Trigger asChild>
+                <Button variant={"ArchPrimary"}>
+                    <MdDeleteForever />
+                    {!isMobile ? "Delete" : ""}
+                </Button>
+            </Dialog.Trigger>
+            <Portal>
+                <Dialog.Backdrop />
+                <Dialog.Positioner>
+                    <Dialog.Content>
+                        <Dialog.Header>
+                            <Dialog.Title>Delete group?</Dialog.Title>
+                        </Dialog.Header>
+                        <Dialog.Body fontSize={'md'}>
+                            <Text><strong>This is a destructive action that cannot be undone.</strong></Text>
+                            <Text mt={'20px'}>The group and all associated data will be permanently deleted.</Text>
+                            <Text mt={'20px'}>Please re-enter the group's name to proceed with deletion:</Text>
+                            <Field.Root mt={'20px'} required>
+                                <Field.Label>Group Name</Field.Label>
+                                <Input 
+                                    placeholder={colName} 
+                                    value={confirmGroupName} 
+                                    onChange={(e) => setConfirmGroupName(e.target.value)} 
+                                />
+                                <Field.HelperText>Type in: {colName}</Field.HelperText>
+                            </Field.Root>
+                        </Dialog.Body>
+                        <Dialog.Footer>
+                            <Dialog.ActionTrigger asChild>
+                                <Button variant="outline" disabled={deletingGroup}>Cancel</Button>
+                            </Dialog.ActionTrigger>
+                            <Button 
+                                variant={'ArchPrimary'} 
+                                disabled={confirmGroupName !== colName || deletingGroup} 
+                                onClick={handleDelete} 
+                                loading={deletingGroup} 
+                                loadingText={'Deleting...'}
+                            >
+                                Confirm
+                            </Button>
+                        </Dialog.Footer>
+                        <Dialog.CloseTrigger asChild>
+                            <CloseButton size={'sm'} disabled={deletingGroup} />
+                        </Dialog.CloseTrigger>
+                    </Dialog.Content>
+                </Dialog.Positioner>
+            </Portal>
+        </Dialog.Root>
+    )
+}
+
+export default DeleteGroup
\ No newline at end of file
diff --git a/src/components/DataStudio/groupViewDetails.jsx b/src/components/DataStudio/groupViewDetails.jsx
index d18c51f..34257d8 100644
--- a/src/components/DataStudio/groupViewDetails.jsx
+++ b/src/components/DataStudio/groupViewDetails.jsx
@@ -1,14 +1,13 @@
-import { Box, Text, Input, Textarea, Flex, Button, useBreakpointValue } from "@chakra-ui/react";
+import { Box, Text, Input, Textarea, Flex, Button } from "@chakra-ui/react";
 import { useState, useEffect } from "react";
 import { MdOutlineEdit, MdOutlineCancel } from "react-icons/md";
 import ToastWizard from "../toastWizard";
 import GroupViewActionBar from "./GroupViewActionBar";
 
-const GroupViewDetails = ({ collection, colID, refreshCollectionData }) => {
+const GroupViewDetails = ({ isMobile, collection, colID, refreshCollectionData }) => {
     const [isEditing, setIsEditing] = useState(false);
     const [originalCollectionData, setOriginalCollectionData] = useState({});
     const [collectionData, setCollectionData] = useState({});
-    const isMobile = useBreakpointValue({ base: true, md: false });
 
     // Initialize data when collection prop changes
     useEffect(() => {
@@ -72,11 +71,10 @@ const GroupViewDetails = ({ collection, colID, refreshCollectionData }) => {
                         size="sm" 
                         variant="ArchPrimary" 
                         onClick={isEditing ? handleCancelClick : handleEditClick}
-                        w={isMobile ? "100px" : "auto"}
                         mb={4}
                     >
                         {isEditing ? <MdOutlineCancel /> : <MdOutlineEdit />}
-                        <Text ml={2}>{isEditing ? 'Cancel' : 'Edit'}</Text>
+                        {!isMobile ? <Text ml={2}>{isEditing ? 'Cancel' : 'Edit'}</Text> : ""}
                     </Button>
                 </Flex>
 
diff --git a/src/pages/GroupView.jsx b/src/pages/GroupView.jsx
index 7913d5b..340f391 100644
--- a/src/pages/GroupView.jsx
+++ b/src/pages/GroupView.jsx
@@ -1,4 +1,4 @@
-import { Flex, Box, Text, Grid } from '@chakra-ui/react';
+import { Flex, Box, Text, Grid, useBreakpointValue } from '@chakra-ui/react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { FaCircleArrowLeft } from 'react-icons/fa6';
 import { useEffect, useState } from 'react';
@@ -7,12 +7,14 @@ import server, { JSONResponse } from '../networking'
 import ToastWizard from '../components/toastWizard';
 import GroupCardItem from '../components/DataStudio/groupCardItem';
 import GroupViewDetails from '../components/DataStudio/groupViewDetails';
+import DeleteGroup from '../components/DataStudio/deleteGroup';
 
 function GroupView() {
     const { colID } = useParams();
     const navigate = useNavigate();
     const [collection, setCollection] = useState(null);
     const [loading, setLoading] = useState(true);
+    const isMobile = useBreakpointValue({ base: true, md: false });
 
     const fetchCollection = async () => {
         try {
@@ -119,20 +121,24 @@ function GroupView() {
 
     return (
         <Box p={6}>
-            {/* Header with back button */}
-            <Flex mb={8} align="center">
-                <FaCircleArrowLeft 
-                    cursor="pointer" 
-                    onClick={() => navigate(-1)} 
-                    size={40} 
-                    color="darkBlue" 
-                />
-                <Box ml={6}>
-                    <Text fontSize="2xl" fontWeight="bold">Group View</Text>
-                </Box>
+            <Flex flexDir={"row"} justifyContent={"space-between"}>
+                {/* Header with back button */}
+                <Flex mb={8} align="center">
+                    <FaCircleArrowLeft 
+                        cursor="pointer" 
+                        onClick={() => navigate(-1)} 
+                        size={40} 
+                        color="darkBlue" 
+                    />
+                    <Box ml={6}>
+                        <Text fontSize="2xl" fontWeight="bold">Group View</Text>
+                    </Box>
+                </Flex>
+
+                <DeleteGroup isMobile={isMobile} colID={colID} colName={collection.name} />
             </Flex>
 
-            <GroupViewDetails collection={collection} colID={colID} refreshCollectionData={fetchCollection} />
+            <GroupViewDetails isMobile={isMobile} collection={collection} colID={colID} refreshCollectionData={fetchCollection} />
 
             {/* Items grid */}
             <Grid 

From 4b99a68c568fa001f26d84c30cf4f1418e0d5f2f Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Fri, 15 Aug 2025 14:43:33 +0800
Subject: [PATCH 13/19] Enhanced figureDisplay removeFigure processing

---
 src/components/DataStudio/figureDisplay.jsx | 41 +++++++++++++--------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/components/DataStudio/figureDisplay.jsx b/src/components/DataStudio/figureDisplay.jsx
index 0958a15..df6a7d7 100644
--- a/src/components/DataStudio/figureDisplay.jsx
+++ b/src/components/DataStudio/figureDisplay.jsx
@@ -35,24 +35,33 @@ function FigureDisplaySection({ artefactId, figureInfo, getArtefactData, isEditi
                 throw new Error("Unexpected response format");
             }
         } catch (err) {
-            console.error("Error removing figure:", err);
-
-            let errorMessage = "Failed to remove figure. Please try again.";
             if (err.response && err.response.data instanceof JSONResponse) {
-                errorMessage = err.response.data.message;
-            } else if (err.message) {
-                errorMessage = err.message;
+                console.log("Error response in login request:", err.response.data.fullMessage());
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard("error", "Failed to remove figure.", err.response.data.message);
+                } else {
+                    ToastWizard.standard(
+                        "error",
+                        "Failed to remove figure. Please try again later.",
+                        errorMessage,
+                        3000,
+                        true,
+                        handleRemoveFigure,
+                        "Retry"
+                    );
+                }
+            } else {
+                console.log("Unexpected error in removing figure:", err);
+                ToastWizard.standard(
+                    "error",
+                    "Failed to remove figure. Please try again later.",
+                    errorMessage,
+                    3000,
+                    true,
+                    handleRemoveFigure,
+                    "Retry"
+                );
             }
-
-            ToastWizard.standard(
-                "error",
-                "Remove failed",
-                errorMessage,
-                3000,
-                true,
-                handleRemoveFigure,
-                "Retry"
-            );
         } finally {
             setDeletingFigure(null);
             setRemoving(false);

From f6227526ccd00af9e9ec17f61e89404ea95923cd Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Fri, 15 Aug 2025 14:48:14 +0800
Subject: [PATCH 14/19] Changed /group to /studio/group

---
 src/components/Catalogue/createGroup.jsx         | 2 +-
 src/components/DataStudio/deleteGroup.jsx        | 2 +-
 src/components/DataStudio/groupViewActionBar.jsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Catalogue/createGroup.jsx b/src/components/Catalogue/createGroup.jsx
index d8d3126..27ff452 100644
--- a/src/components/Catalogue/createGroup.jsx
+++ b/src/components/Catalogue/createGroup.jsx
@@ -50,7 +50,7 @@ function CreateGroup({ fetchCatalogue }) {
                 type: groupType,
             };
 
-            const response = await server.post("/group/create", payload);
+            const response = await server.post("/studio/group/create", payload);
 
             if (
                 response.data instanceof JSONResponse &&
diff --git a/src/components/DataStudio/deleteGroup.jsx b/src/components/DataStudio/deleteGroup.jsx
index c640ec9..03c6149 100644
--- a/src/components/DataStudio/deleteGroup.jsx
+++ b/src/components/DataStudio/deleteGroup.jsx
@@ -13,7 +13,7 @@ function DeleteGroup({ isMobile, colID, colName }) {
 
     const handleDelete = async () => {
         try {
-            const response = await server.post('/group/delete', {groupID: colID})
+            const response = await server.post('/studio/group/delete', {groupID: colID})
 
             if (response.data instanceof JSONResponse) {
                 if (response.data.isErrorStatus()) {
diff --git a/src/components/DataStudio/groupViewActionBar.jsx b/src/components/DataStudio/groupViewActionBar.jsx
index 4cd7314..c984284 100644
--- a/src/components/DataStudio/groupViewActionBar.jsx
+++ b/src/components/DataStudio/groupViewActionBar.jsx
@@ -69,7 +69,7 @@ function GroupViewActionBar({ itemData, originalData, setItemData, refreshData,
         }
 
         try {
-            const response = await server.post('/group/updateDetails', updateDict);
+            const response = await server.post('/studio/group/updateDetails', updateDict);
 
             if (response.data instanceof JSONResponse) {
                 if (response.data.isErrorStatus()) {

From 5dcf580685bc62a03f1ff03b1f31eb8384671188 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Fri, 15 Aug 2025 15:09:04 +0800
Subject: [PATCH 15/19] Added isMobile for createGroup button

---
 src/components/Catalogue/createGroup.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Catalogue/createGroup.jsx b/src/components/Catalogue/createGroup.jsx
index 27ff452..fcbb8b7 100644
--- a/src/components/Catalogue/createGroup.jsx
+++ b/src/components/Catalogue/createGroup.jsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Button, CloseButton, Dialog, Portal, Field, Input, Text, Box } from "@chakra-ui/react";
+import { Button, CloseButton, Dialog, Portal, Field, Input, Text, Box, useBreakpointValue } from "@chakra-ui/react";
 import { Tooltip } from "../../components/ui/tooltip"
 import { HiInformationCircle, HiPlus } from "react-icons/hi2";
 import server, { JSONResponse } from "../../networking";
@@ -12,6 +12,7 @@ function CreateGroup({ fetchCatalogue }) {
     const [subtitle, setSubtitle] = useState("");
     const [isCreating, setIsCreating] = useState(false);
     const [isOpen, setIsOpen] = useState(false);
+    const isMobile = useBreakpointValue({ base: true, md: false });
 
     const validateForm = () => {
         const errors = [];
@@ -99,7 +100,7 @@ function CreateGroup({ fetchCatalogue }) {
         >
             <Dialog.Trigger asChild>
                 <Button variant="ArchPrimary" colorScheme="blue">
-                    <HiPlus /> Create Group
+                    <HiPlus /> {!isMobile ? "Create Group" : ""}
                 </Button>
             </Dialog.Trigger>
             <Portal>

From 0fd81640434492c3c0a79cc0c87a7e11de114acd Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Fri, 15 Aug 2025 15:23:56 +0800
Subject: [PATCH 16/19] Added loading for delete group

---
 src/components/DataStudio/deleteGroup.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/DataStudio/deleteGroup.jsx b/src/components/DataStudio/deleteGroup.jsx
index 03c6149..e6662fb 100644
--- a/src/components/DataStudio/deleteGroup.jsx
+++ b/src/components/DataStudio/deleteGroup.jsx
@@ -12,6 +12,7 @@ function DeleteGroup({ isMobile, colID, colName }) {
     const [confirmGroupName, setConfirmGroupName] = useState('');
 
     const handleDelete = async () => {
+        setDeletingGroup(true)
         try {
             const response = await server.post('/studio/group/delete', {groupID: colID})
 
@@ -44,6 +45,7 @@ function DeleteGroup({ isMobile, colID, colName }) {
                 ToastWizard.standard("error", "Failed to delete group", "Unable to delete group. Please try again later.", 3000, true, handleDelete, 'Retry')
             }
         }
+        setDeletingGroup(false)
     }
 
     return (

From 3e653607853c9606f2ffcfdbe2ae952de386e925 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Fri, 15 Aug 2025 15:48:06 +0800
Subject: [PATCH 17/19] Fixed minor things for PR

---
 src/components/Catalogue/createGroup.jsx     | 47 +++++++++++---------
 src/components/Catalogue/groupTypeToggle.jsx |  2 +-
 2 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/components/Catalogue/createGroup.jsx b/src/components/Catalogue/createGroup.jsx
index fcbb8b7..194f5b9 100644
--- a/src/components/Catalogue/createGroup.jsx
+++ b/src/components/Catalogue/createGroup.jsx
@@ -53,25 +53,30 @@ function CreateGroup({ fetchCatalogue }) {
 
             const response = await server.post("/studio/group/create", payload);
 
-            if (
-                response.data instanceof JSONResponse &&
-                response.data.isErrorStatus()
-            ) {
-                throw { response };
-            }
-
-            ToastWizard.standard(
-                "success",
-                "Group created successfully",
-                response.data.message
-            );
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw new Error(errObject);
+                }
 
-            // Reset form and close dialog
-            setTitle("");
-            setSubtitle("");
-            setGroupType("book");
-            setIsOpen(false);
-            fetchCatalogue()
+                // Success case
+                ToastWizard.standard(
+                    "success",
+                    "Group created successfully"
+                );
+
+                setTitle("");
+                setSubtitle("");
+                setGroupType("book");
+                setIsOpen(false);
+                fetchCatalogue()
+            } else {
+                throw new Error("Unexpected response format");
+            }
         } catch (err) {
             if (err.response && err.response.data instanceof JSONResponse) {
                 console.log("Error response in login request:", err.response.data.fullMessage());
@@ -96,7 +101,7 @@ function CreateGroup({ fetchCatalogue }) {
         <Dialog.Root 
             placement="center"
             open={isOpen}
-            onOpenChange={({ open }) => setIsOpen(open)}
+            onOpenChange={(e) => setIsOpen(e.open)}
         >
             <Dialog.Trigger asChild>
                 <Button variant="ArchPrimary" colorScheme="blue">
@@ -180,8 +185,8 @@ function CreateGroup({ fetchCatalogue }) {
                                 loading={isCreating}
                                 loadingText="Creating..."
                             >
-                                Create{" "}
-                                {groupType === "book" ? "Book" : "Category"}
+                                Create
+                                {groupType === "book" ? " Book" : " Category"}
                             </Button>
                         </Dialog.Footer>
                     </Dialog.Content>
diff --git a/src/components/Catalogue/groupTypeToggle.jsx b/src/components/Catalogue/groupTypeToggle.jsx
index 0df4fe1..d5d8206 100644
--- a/src/components/Catalogue/groupTypeToggle.jsx
+++ b/src/components/Catalogue/groupTypeToggle.jsx
@@ -22,7 +22,7 @@ const GroupTypeToggle = ({ value, onChange, size = "md" }) => {
                 <HStack spacing={2} justify="center" color={value === "category" ? "white" : "black"}>
                     <LuTag color={value === "category" ? "white" : "black"} />
                     <Text fontWeight={value === "category" ? "bold" : "normal"}>
-                        {isMobile ? "Cat" : "Category"}
+                        Category
                     </Text>
                 </HStack>
             ),

From 91792802e6beddd7bf6170f85557ef529cb8a7d0 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Fri, 15 Aug 2025 15:51:57 +0800
Subject: [PATCH 18/19] Conditionally rendered delete group button if it is
 book or cat only

---
 src/pages/GroupView.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/GroupView.jsx b/src/pages/GroupView.jsx
index 340f391..bfac40c 100644
--- a/src/pages/GroupView.jsx
+++ b/src/pages/GroupView.jsx
@@ -135,7 +135,7 @@ function GroupView() {
                     </Box>
                 </Flex>
 
-                <DeleteGroup isMobile={isMobile} colID={colID} colName={collection.name} />
+                {collection.type !== "batch" && <DeleteGroup isMobile={isMobile} colID={colID} colName={collection.name}/>}
             </Flex>
 
             <GroupViewDetails isMobile={isMobile} collection={collection} colID={colID} refreshCollectionData={fetchCollection} />

From 92b7646e13827a9e6a062d4981b095584e02c716 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Fri, 15 Aug 2025 16:05:01 +0800
Subject: [PATCH 19/19] Minor fixes for validation and conditional rendering

---
 src/components/DataStudio/groupViewActionBar.jsx | 2 +-
 src/components/DataStudio/groupViewDetails.jsx   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/DataStudio/groupViewActionBar.jsx b/src/components/DataStudio/groupViewActionBar.jsx
index c984284..1816383 100644
--- a/src/components/DataStudio/groupViewActionBar.jsx
+++ b/src/components/DataStudio/groupViewActionBar.jsx
@@ -34,7 +34,7 @@ function GroupViewActionBar({ itemData, originalData, setItemData, refreshData,
             errors.push('Name must be between 1-25 characters');
         }
 
-        if (updateDict.description && !validateField('description', updateDict.description)) {
+        if (!validateField('description', updateDict.description)) {
             errors.push('Description must be 200 characters or less');
         }
 
diff --git a/src/components/DataStudio/groupViewDetails.jsx b/src/components/DataStudio/groupViewDetails.jsx
index 34257d8..bac0590 100644
--- a/src/components/DataStudio/groupViewDetails.jsx
+++ b/src/components/DataStudio/groupViewDetails.jsx
@@ -63,7 +63,7 @@ const GroupViewDetails = ({ isMobile, collection, colID, refreshCollectionData }
                         />
                     ) : (
                         <Text fontSize="xl" fontWeight="bold">
-                            {collectionData.name}
+                            {collectionData.name || "No Name"}
                         </Text>
                     )}
                     
@@ -92,7 +92,7 @@ const GroupViewDetails = ({ isMobile, collection, colID, refreshCollectionData }
                 ) : (
                     collectionData.description && (
                         <Text fontSize="md" color="gray.600" mt={2}>
-                            {collectionData.description}
+                            {collectionData.description || "No Description"}
                         </Text>
                     )
                 )}