Merge pull request #78 from Aar-if/slow

Issue #2322 feat: Workspace UI improvements and Fixes

src/components/CollectionEditor.tsx

@@ -4,7 +4,7 @@ import { v4 as uuidv4 } from "uuid";
 
 const CollectionEditor: React.FC = () => {
   const router = useRouter();
-  const { identifier } = router.query;
+  const { identifier, mode } = router.query;
 
   const [fullName, setFullName] = useState("Anonymous");
   const [userId, setUserId] = useState("ef99949b-7f3a-4a5f-806a-e67e683e38f3");
@@ -84,7 +84,7 @@ const CollectionEditor: React.FC = () => {
       cloudStorageUrls: ["https://knowlg-public.s3-ap-south-1.amazonaws.com/"],
     },
     config: {
-      mode: "edit", // edit / review / read / sourcingReview
+      mode: mode || "edit", // edit / review / read / sourcingReview
       maxDepth: 4,
       objectType: "Collection",
       primaryCategory: "Course", // Professional Development Course, Curriculum Course

src/components/ContentCard.tsx

@@ -45,9 +45,7 @@ const ContentCard: React.FC<ContentCardProps> = ({
           <CardContent>
             <Box display={"flex"} gap="1rem">
               {icon}
-              <Typography variant="h5" component="div">
-                {title}
-              </Typography>
+              <Typography component="div">{title}</Typography>
             </Box>
           </CardContent>
           {/* <CardActions>

src/components/SideBar.tsx

@@ -13,16 +13,30 @@ import {
   useMediaQuery,
 } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
-import DatabaseIcon from "@mui/icons-material/Storage";
-import CloseIcon from "@mui/icons-material/Close";
+import StorageIcon from "@mui/icons-material/Storage";
+import CreateIcon from "@mui/icons-material/Create";
+import DraftsIcon from "@mui/icons-material/Drafts";
+import PublishIcon from "@mui/icons-material/Publish";
+import FolderIcon from "@mui/icons-material/Folder";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import CloseIcon from "@mui/icons-material/Close";
+import AddOutlinedIcon from "@mui/icons-material/AddOutlined";
+import CreateOutlinedIcon from "@mui/icons-material/CreateOutlined";
+import PreviewOutlinedIcon from "@mui/icons-material/PreviewOutlined";
+import OutlinedFlagOutlinedIcon from "@mui/icons-material/OutlinedFlagOutlined";
+import AppsOutlinedIcon from "@mui/icons-material/AppsOutlined";
 
+// Updated menu items with icons
 const menuItems = [
-  { text: "Create Content", key: "create" },
-  { text: "All My Contents", key: "allContents" },
-  { text: "Draft", key: "draft" },
-  { text: "Submitted for Review", key: "submitted" },
-  { text: "Publish", key: "publish" },
+  { text: "Create", key: "create", icon: <AddOutlinedIcon /> },
+  { text: "Draft", key: "draft", icon: <CreateOutlinedIcon /> },
+  {
+    text: "Submitted for Review",
+    key: "submitted",
+    icon: <PreviewOutlinedIcon />,
+  },
+  { text: "Publish", key: "publish", icon: <OutlinedFlagOutlinedIcon /> },
+  { text: "All My Contents", key: "allContents", icon: <AppsOutlinedIcon /> },
 ];
 
 interface SidebarProps {
@@ -69,10 +83,10 @@ const Sidebar: React.FC<SidebarProps> = ({ selectedKey, onSelect }) => {
           </ListItemIcon>
           <Typography
             variant="h2"
-            fontSize={"16px"}
+            fontSize={"14px"}
             sx={{ color: theme.palette.warning["100"] }}
           >
-            Workspace
+            Back to Main Page
           </Typography>
         </Box>
         {isMobile && (
@@ -109,6 +123,16 @@ const Sidebar: React.FC<SidebarProps> = ({ selectedKey, onSelect }) => {
             key={item.key}
             onClick={() => handleNavigation(item.key)}
           >
+            <ListItemIcon
+              sx={{
+                color:
+                  selectedKey === item.key
+                    ? "#2E1500"
+                    : theme.palette.warning.A200,
+              }}
+            >
+              {item.icon}
+            </ListItemIcon>
             <ListItemText primary={item.text} />
           </ListItemButton>
         ))}

src/pages/workspace/content/create/index.tsx

@@ -1,15 +1,18 @@
 import React, { useEffect, useState } from "react";
 import Layout from "../../../../components/Layout";
-import { Typography, Box, useTheme } from "@mui/material";
+import { Typography, Box, useTheme, Paper } from "@mui/material";
 import ContentCard from "../../../../components/ContentCard";
 import DescriptionIcon from "@mui/icons-material/Description";
 import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
 import UploadIcon from "@mui/icons-material/Upload";
 import { useRouter } from "next/router";
 import { createCourse, createQuestionSet } from "@/services/ContentService";
+import QuizOutlinedIcon from "@mui/icons-material/QuizOutlined";
+import SchoolOutlinedIcon from "@mui/icons-material/SchoolOutlined";
+import VideoLibraryOutlinedIcon from "@mui/icons-material/VideoLibraryOutlined";
 
 const CreatePage = () => {
-  const theme = useTheme<any>();
+  const theme = useTheme();
   const [selectedKey, setSelectedKey] = useState("create");
   const router = useRouter();
 
@@ -56,7 +59,7 @@ const CreatePage = () => {
         query: { identifier },
       });
     } catch (error) {
-      console.error("Error creating question set:", error);
+      console.error("Error creating course:", error);
     }
   };
 
@@ -66,62 +69,112 @@ const CreatePage = () => {
 
   const cardData = [
     {
-      title: "Upload Content",
-      description: "You can upload content here.",
-      icon: <UploadIcon fontSize="large" />,
+      title: "New Question Set",
+      description: "Create assessments, question banks, quizzes, etc.",
+      icon: <QuizOutlinedIcon fontSize="large" />,
+      onClick: openEditor,
+    },
+    {
+      title: "New Course",
+      description:
+        "Description about what this is and what the user can create.",
+      icon: <SchoolOutlinedIcon fontSize="large" />,
+      onClick: openCollectionEditor,
+    },
+    {
+      title: "New Content",
+      description: "Create new documents, PDF, video, QML, HTML, etc.",
+      icon: <VideoLibraryOutlinedIcon fontSize="large" />,
       onClick: () => router.push("/upload-editor"),
     },
     {
-      title: "Upload Large Videos(>50 MB)",
-      description: "You can upload content here.",
-      icon: <UploadIcon fontSize="large" />,
+      title: "New Large Content",
+      description: "Videos and documents larger than 150 MB",
+      icon: <VideoLibraryOutlinedIcon fontSize="large" />,
       onClick: () =>
         router.push({
           pathname: "/upload-editor",
           query: { editorforlargecontent: "true" },
         }),
     },
-    {
-      title: "Question Set",
-      description: "Create Questionsets",
-      icon: <DescriptionIcon fontSize="large" />,
-      onClick: openEditor,
-    },
-    {
-      title: "Course",
-      description: "Design courses using collections and resources.",
-      icon: <DescriptionOutlinedIcon fontSize="large" />,
-      onClick: openCollectionEditor,
-    },
   ];
 
   return (
     <Layout selectedKey={selectedKey} onSelect={setSelectedKey}>
-      <Box p={3}>
+      <Box p={3} display={"flex"} flexDirection={"row"}>
+        <Typography
+          variant="h1"
+          sx={{
+            color: theme.palette.text.primary,
+            marginRight: "10px",
+          }}
+        >
+          Workspace
+        </Typography>
+
         <Typography
-          variant="h2"
-          fontSize={"16px"}
-          sx={{ color: theme.palette.warning["100"] }}
+          variant="body1"
+          color="textSecondary"
+          width={500}
+          fontSize={15}
         >
+
+          Create, organize, and manage all types of content in one place.
+          Whether it's courses, assessments, or any other type of content.
+
           Here you can create new content....
+
         </Typography>
       </Box>
 
+      {/* Outer box for "Create new content" heading and cards */}
       <Box
-        display={"flex"}
-        gap={"1rem"}
-        padding={"1rem"}
-        justifyContent={"flex-start"}
+        sx={{
+          backgroundColor: "#F7F2FA",
+          padding: "1.5rem",
+          borderRadius: "12px",
+          boxShadow: theme.shadows[3],
+        }}
+        m={3} // Margin around the box for spacing
       >
-        {cardData.map((card, index) => (
-          <ContentCard
-            key={index}
-            title={card.title}
-            description={card.description}
-            icon={card.icon}
-            onClick={card.onClick}
-          />
-        ))}
+        <Typography variant="h4" sx={{ mb: 2 }}>
+          Create new content
+        </Typography>
+
+        <Box
+          display="flex"
+          gap="1.5rem"
+          justifyContent="flex-start"
+          flexWrap="wrap"
+        >
+          {cardData.map((card, index) => (
+            <Paper
+              key={index}
+              elevation={3}
+              onClick={card.onClick}
+              sx={{
+                padding: "1rem",
+                borderRadius: "8px",
+                textAlign: "left",
+                cursor: "pointer",
+                flex: "1 1 180px",
+                maxWidth: "220px",
+                "&:hover": {
+                  boxShadow: theme.shadows[5],
+                  backgroundColor: theme.palette.action.hover,
+                },
+              }}
+            >
+              {card.icon}
+              <Typography variant="h5" sx={{ mt: 1, fontWeight: "bold" }}>
+                {card.title}
+              </Typography>
+              <Typography variant="body2" color="textSecondary">
+                {card.description}
+              </Typography>
+            </Paper>
+          ))}
+        </Box>
       </Box>
     </Layout>
   );