Added GroupView

src/components/Catalogue/cardComponent.jsx

@@ -14,13 +14,13 @@ const CardComponent = ({ imageSrc, itemTitle, itemDescription, expanded }) => {
                     alt={itemTitle}
                     loading={expanded ? "eager" : "lazy"}
                     onLoad={() => setIsImageLoaded(true)}
-                        height="180px"
+                    height="180px"
                     width="100%"
                 />
             </Skeleton>
             <Card.Body>
                 <Skeleton loading={isLoading}>
-                    <Card.Title>{itemTitle}</Card.Title>
+                    <Card.Title lineClamp={1}>{itemTitle}</Card.Title>
                 </Skeleton>
                 {expanded && (
                     <Skeleton loading={isLoading} mt={2}>

src/components/Catalogue/catalogueItemView.jsx

@@ -356,7 +356,7 @@ const CatalogueItemView = ({ isOpen, onClose, title, sectionId, items, setDialog
                                                                 gap={2}
                                                             >
                                                                 <Text
-                                                                    fontSize="xl"
+                                                                    fontSize="lg"
                                                                     fontWeight="bold"
                                                                 >
                                                                     {item.title}
@@ -491,8 +491,8 @@ const CatalogueItemView = ({ isOpen, onClose, title, sectionId, items, setDialog
                                                         >
                                                             <Text
                                                                 fontSize={{
-                                                                    md: "xl",
-                                                                    lg: "2xl",
+                                                                    md: "lg",
+                                                                    lg: "xl",
                                                                 }}
                                                                 fontWeight="bold"
                                                                 mr={4}

src/components/DataStudio/associationCard.jsx

@@ -0,0 +1,34 @@
+import { Card, Box, Text, Flex } from "@chakra-ui/react";
+import AssociationSwitch from "./associationSwitch";
+
+function AssociationCard({ associationData, isMember, onToggle }) {
+    if (!associationData) return null;
+
+    return (
+        <Card.Root direction="row" variant="outline" p={4}>
+            <Card.Body p={0}>
+                <Flex flexDirection="row" justifyContent="space-between" gap={4} alignItems="center">
+                    {/* Left: title & description */}
+                    <Box flex="1">
+                        <Text fontWeight="bold" fontSize="lg" mb={1}>
+                            {associationData.name || "Untitled"}
+                        </Text>
+                        <Text fontSize="sm" color="gray.600" lineClamp={1}>
+                            {associationData.description}
+                        </Text>
+                    </Box>
+
+                    {/* Right: membership switch */}
+                    <Box>
+                        <AssociationSwitch
+                            isMember={isMember}
+                            onToggle={onToggle}
+                        />
+                    </Box>
+                </Flex>
+            </Card.Body>
+        </Card.Root>
+    );
+}
+
+export default AssociationCard;

src/components/DataStudio/associationSwitch.jsx

@@ -0,0 +1,26 @@
+import { Switch } from "@chakra-ui/react";
+import { HiCheck, HiX } from "react-icons/hi";
+
+const AssociationSwitch = ({ isMember, onToggle }) => {
+    return (
+        <Switch.Root
+            size="lg"
+            checked={isMember}
+            onCheckedChange={(details) => onToggle(details.checked)}
+            colorPalette={'green'}
+        >
+            <Switch.HiddenInput />
+            <Switch.Control>
+                <Switch.Thumb>
+                    <Switch.ThumbIndicator
+                        fallback={<HiX color="black" />}
+                    >
+                        <HiCheck />
+                    </Switch.ThumbIndicator>
+                </Switch.Thumb>
+            </Switch.Control>
+        </Switch.Root>
+    );
+};
+
+export default AssociationSwitch;

src/components/DataStudio/editorCard.jsx

@@ -6,6 +6,7 @@ import MetadataToggle from "./metadataToggle";
 import ArtefactEditorActionBar from "./artefactEditorActionBar";
 import ToastWizard from "../toastWizard";
 import FigureDisplaySection from "./figureDisplay";
+import ManageAssociationsDialog from "./manageAssociationsDialog";
 
 // Helper function to render text with labeled entities highlighted
 function renderHighlightedText(text, labels, hoveredIndex, setHoveredIndex) {
@@ -91,6 +92,7 @@ function EditorCard({ metadata, artefactId, refreshArtefactData }) {
     const [isEditing, setIsEditing] = useState(false);
     const [hoveredIndex, setHoveredIndex] = useState(null);
     const hoverTimeoutRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
 
     // Change detection states
     const [originalArtefactData, setOriginalArtefactData] = useState({});
@@ -164,7 +166,7 @@ function EditorCard({ metadata, artefactId, refreshArtefactData }) {
                         <Card.Title>Artefact Details</Card.Title>
                     </Flex>
                     <Flex alignItems="center" flexDirection={isMobile? "column" : "row"} gap={4} w={isMobile ? "70%" : "auto"}>
-                        <Button size="sm" variant="ArchPrimaryAlt" w={isMobile ? "100%" : "auto"}>
+                        <Button onClick={() => setIsOpen(true)} size="sm" variant="ArchPrimaryAlt" w={isMobile ? "100%" : "auto"}>
                             Manage Associations
                         </Button>
                         <Button size="sm" variant="ArchPrimary" onClick={isEditing ? handleCancelClick : handleEditClick} w={isMobile ? "100%" : "auto"}>
@@ -364,6 +366,12 @@ function EditorCard({ metadata, artefactId, refreshArtefactData }) {
                 setIsEditing={setIsEditing}
                 isMMArtefact={isMMArtefact}
             />
+
+            <ManageAssociationsDialog
+                isOpen={isOpen}
+                onClose={() => setIsOpen(false)}
+                itemID={artefactId}
+            />
         </>
     );
 }

src/components/DataStudio/groupCardItem.jsx

@@ -1,7 +1,13 @@
 import { Box } from "@chakra-ui/react";
 import CardComponent from "../Catalogue/cardComponent";
+import { useNavigate } from "react-router-dom";
+import GroupItemMenu from "./groupItemMenu";
+import ManageAssociationsDialog from "./manageAssociationsDialog";
+import { useState } from "react";
 
-const GroupCardItem = ({ itemTitle, itemDescription, imageSrc }) => {
+const GroupCardItem = ({ item, colID, fetchCollection }) => {
+    const navigate = useNavigate();
+    const [isOpen, setIsOpen] = useState(false);
 
     return (
         <>
@@ -10,16 +16,42 @@ const GroupCardItem = ({ itemTitle, itemDescription, imageSrc }) => {
                 cursor="pointer"
                 w="300px"
                 borderRadius="md"
+                position="relative"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    navigate(`/studio/${colID}/${item.id}`);
+                }}
             >
                 <CardComponent
-                    imageSrc={imageSrc}
-                    itemTitle={itemTitle}
-                    itemDescription={itemDescription}
+                    imageSrc={`${import.meta.env.VITE_BACKEND_URL}/cdn/artefacts/${item.id}`}
+                    itemTitle={item.title}
+                    itemDescription={item.description}
                     expanded={true}
                 />
+
+                {/* 3 Dot Menu */}
+                <Box
+                    position="absolute"
+                    top={3}
+                    right={3}
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <GroupItemMenu
+                        onEdit={() => navigate(`/studio/${colID}/${item.id}`)}
+                        onManage={() => setIsOpen(true)}
+                    />
+                </Box>
             </Box>
+
+            {/* Centered Manage Associations Dialog */}
+            <ManageAssociationsDialog
+                isOpen={isOpen}
+                onClose={() => setIsOpen(false)}
+                itemID={item.id}
+                fetchCollection={fetchCollection}
+            />
         </>
     );
 };
 
-export default GroupCardItem;
+export default GroupCardItem;

src/components/DataStudio/groupItemMenu.jsx

@@ -0,0 +1,40 @@
+import { Box, Menu, Portal } from "@chakra-ui/react";
+import { CgMoreVerticalAlt } from "react-icons/cg";
+
+const GroupItemMenu = ({ onEdit, onManage }) => {
+    return (
+        <Menu.Root positioning={{ placement: "bottom" }}>
+            <Menu.Trigger asChild>
+                <Box
+                    cursor="pointer"
+                    borderRadius="full"
+                    bg="white"
+                    boxShadow="md"
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="center"
+                    p={0.5}
+                    _hover={{ transform: "scale(1.05)" }}
+                    transition="transform 0.1s ease"
+                >
+                    <CgMoreVerticalAlt size={22} />
+                </Box>
+            </Menu.Trigger>
+
+            <Portal>
+                <Menu.Positioner>
+                    <Menu.Content zIndex={1500}>
+                        <Menu.Item value="edit-artefacts" onClick={onEdit}>
+                            Edit Artefact
+                        </Menu.Item>
+                        <Menu.Item value="manage-associations" onClick={onManage}>
+                            Manage Associations
+                        </Menu.Item>
+                    </Menu.Content>
+                </Menu.Positioner>
+            </Portal>
+        </Menu.Root>
+    );
+};
+
+export default GroupItemMenu;