Dev

src/components/Cards/SubmissionCard.tsx

@@ -1,4 +1,4 @@
-import { FileSpreadsheet, StepForward } from "lucide-react";
+import { FileSpreadsheet, LibraryBig, StepForward } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { SubmissionPopulateSubmissionTestcaseAndProblemSecureModel } from "../../types/models/Submission.model";
 import { readableDateFormat } from "../../utilities/ReadableDateFormat";
@@ -16,7 +16,7 @@ const SubmissionCard = ({
 
     const handleNavigateProblem = () => {
         if (submission.topic) {
-            navigate(`/courses/${submission.topic}/problems/${submission.problem.problem_id}`)
+            navigate(`/courses/${submission.topic.topic_id}/problems/${submission.problem.problem_id}`)
         }
         else {
             navigate(`/problems/${submission.problem.problem_id}`)
@@ -30,6 +30,20 @@ const SubmissionCard = ({
 				{submission.problem.title}
 			</p>
 
+			{
+				submission.topic ? (
+					<div className="flex items-center text-sm font-medium my-2">
+						<LibraryBig size={20} className="mr-1 text-purple-400"/>
+						{submission.topic.name}
+					</div>
+				) : (
+					<div className="flex items-center text-sm font-medium my-2 invisible">
+						<LibraryBig size={20} className="mr-1 text-purple-400"/>
+
+					</div>
+				)
+			}	
+
 			<div className="text-sm font-medium my-3">
 				<p>Submitted Date</p>
                 <p className="text-gray-400">{readableDateFormat(submission.date)}</p>

src/components/Dropdowns/MyProblemDropdown.tsx

@@ -1,4 +1,4 @@
-import { CopyPlus, PencilIcon, Trash } from "lucide-react";
+import { BarChart3, CopyPlus, PencilIcon, Trash } from "lucide-react";
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { ProblemService } from "../../services/Problem.service";
@@ -83,13 +83,14 @@ const MyProblemDropdown = ({
 						navigate(`/my/problems/${problem.problem_id}`)
 					}
 				>
-					<PencilIcon className="mr-2" size={16} />
-					View Problem
+					<BarChart3 className="mr-2" size={16} />
+					View Statistic
 				</DropdownMenuItem>
 				<DropdownMenuItem
 					onClick={() =>
-						navigate(`/my/problems/${problem.problem_id}/edit`)
+						window.open(`/my/problems/${problem.problem_id}/edit`, "_blank")
 					}
+
 				>
 					<PencilIcon className="mr-2" size={16} />
 					Edit Problem

src/components/Forms/CreateCollectionForm/index.tsx

@@ -59,7 +59,7 @@ const CreateCollectionForm = ({
 						onClick={() => navigate(-1)}
 					/>
 					{createRequest.title === ""
-						? "Create Problem"
+						? "Create Collection"
 						: createRequest.title}
 				</h1>
 				<div>

src/components/NavigationBar/ProfileDropdown.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 
 import {
 	DropdownMenu,
@@ -7,45 +7,42 @@ import {
 	DropdownMenuItem,
 	DropdownMenuLabel,
 	DropdownMenuSeparator,
-	DropdownMenuTrigger
+	DropdownMenuTrigger,
 } from "../shadcn/DropdownMenu";
 
 import {
 	FileSpreadsheet,
 	Folder,
 	LibraryBig,
 	LogOut,
-	Users
+	Users,
 } from "lucide-react";
-import { useNavigate } from 'react-router-dom';
-import { AuthService } from '../../services/Auth.service';
+import { useNavigate } from "react-router-dom";
+import { AuthService } from "../../services/Auth.service";
 
 const ProfileDropdown = ({ children }: { children: ReactNode }) => {
+	const navigate = useNavigate();
 
-    const navigate = useNavigate()
+	const username = localStorage.getItem("username");
+	const account_id = String(localStorage.getItem("account_id"));
+	const token = localStorage.getItem("token");
 
-    const username = localStorage.getItem('username')
-    const account_id = String(localStorage.getItem('account_id'))
-    const token = localStorage.getItem('token')
+	const handleLogout = async () => {
+		if (!token) {
+			return;
+		}
 
-    const handleLogout = async () => {
+		const { status } = await AuthService.logout({ account_id, token });
 
-        if (!token) {
-            return
-        }
+		if (status === 200) {
+			localStorage.removeItem("account_id");
+			localStorage.removeItem("username");
+			localStorage.removeItem("token");
+			window.location.reload();
+		}
+	};
 
-        const {status} = await AuthService.logout({account_id,token})
-
-        if (status === 200) {
-            localStorage.removeItem('account_id')
-            localStorage.removeItem('username')
-            localStorage.removeItem('token')
-            window.location.reload()
-        }
-
-    }
-
-  return (
+	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
 			<DropdownMenuContent className="w-56">
@@ -55,14 +52,16 @@ const ProfileDropdown = ({ children }: { children: ReactNode }) => {
 					{/* <DropdownMenuItem dis>
 						<User className="mr-2 h-4 w-4" />
 						<span>Profile</span> */}
-						{/* <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut> */}
+					{/* <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut> */}
 					{/* </DropdownMenuItem> */}
 					<DropdownMenuItem onClick={() => navigate("/my/problems")}>
 						<FileSpreadsheet className="mr-2 h-4 w-4" />
 						<span>My Problems</span>
 						{/* <DropdownMenuShortcut>⌘B</DropdownMenuShortcut> */}
 					</DropdownMenuItem>
-					<DropdownMenuItem onClick={() => navigate("/my/collections")}>
+					<DropdownMenuItem
+						onClick={() => navigate("/my/collections")}
+					>
 						<Folder className="mr-2 h-4 w-4" />
 						<span>My Collections</span>
 						{/* <DropdownMenuShortcut>⌘S</DropdownMenuShortcut> */}
@@ -78,6 +77,14 @@ const ProfileDropdown = ({ children }: { children: ReactNode }) => {
 						{/* <DropdownMenuShortcut>⌘K</DropdownMenuShortcut> */}
 					</DropdownMenuItem>
 				</DropdownMenuGroup>
+				<DropdownMenuSeparator />
+				<DropdownMenuGroup>
+					<DropdownMenuItem onClick={() => navigate("/my/submissions")}>
+						<FileSpreadsheet className="mr-2 h-4 w-4" />
+						<span>My Previous Submissions</span>
+						{/* <DropdownMenuShortcut>⌘B</DropdownMenuShortcut> */}
+					</DropdownMenuItem>
+				</DropdownMenuGroup>
 				{/* <DropdownMenuSeparator />
 				<DropdownMenuGroup>
 					<DropdownMenuItem>
@@ -134,7 +141,6 @@ const ProfileDropdown = ({ children }: { children: ReactNode }) => {
 				</DropdownMenuItem>
 			</DropdownMenuContent>
 		</DropdownMenu>
-
-  )
-}
-export default ProfileDropdown
+	);
+};
+export default ProfileDropdown;

src/components/Tables/MyCollectionsTable.tsx

@@ -3,14 +3,14 @@ import { FileSpreadsheet, Folder } from 'lucide-react'
 import { Link } from 'react-router-dom'
 import { CollectionPopulateCollectionProblemPopulateProblemModel } from '../../types/models/Collection.model'
 import { readableDateFormat } from '../../utilities/ReadableDateFormat'
-import { DataTable } from '../DataTable'
+import { DataTable } from './Prototype/DataTable'
 
 const columns: ColumnDef<CollectionPopulateCollectionProblemPopulateProblemModel>[] = [
     {
         accessorKey: "name",
         header: "Title",
         cell: ({ row }) => (
-            <div className="flex items-center font-medium py-2">
+            <div className="flex items-center font-medium py-2 hover:underline hover:text-green-500">
                 <Folder className="mr-2 text-yellow-400" size={20} />
                 <Link to={`/my/collections/${row.original.collection_id}/edit`}>
                     {row.original.name}

src/components/Tables/MyPreviousSubmissionsTable.tsx

@@ -0,0 +1,118 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { LibraryBig } from "lucide-react";
+import { Link } from "react-router-dom";
+import { ProgrammingLanguageOptions } from "../../constants/ProgrammingLanguage";
+import { SubmissionPopulateSubmissionTestcaseAndProblemSecureModel } from "../../types/models/Submission.model";
+import { readableDateFormat } from "../../utilities/ReadableDateFormat";
+import TestcasesGradingIndicator from "../TestcasesGradingIndicator";
+import { DataTable } from "./Prototype/DataTable";
+
+const MyPreviousSubmissionsTable = ({
+	submissions = [],
+}: {
+	submissions?: SubmissionPopulateSubmissionTestcaseAndProblemSecureModel[];
+}) => {
+	const columns: ColumnDef<SubmissionPopulateSubmissionTestcaseAndProblemSecureModel>[] =
+		[
+			{
+				accessorKey: "problem",
+				header: "Problem",
+				cell: ({ row }) => (
+					<div className="font-medium py-2 hover:underline hover:text-green-500">
+						<Link
+							to={
+								row.original.topic
+									? `/courses/${row.original.topic.topic_id}/problems/${row.original.problem.problem_id}`
+									: `/problems/${row.original.problem.problem_id}`
+							}
+						>
+							{row.original.problem.title}
+						</Link>
+					</div>
+				),
+			},
+			{
+				accessorKey: "course",
+				header: "Course",
+				cell: ({ row }) => (
+					<div className="">
+						{row.original.topic ? (
+							<div className="font-medium hover:underline hover:text-green-500 flex items-center">
+								<LibraryBig size={20} className="text-purple-400 mr-1"/>
+								<Link
+									to={`/courses/${row.original.topic.topic_id}`}
+								>
+									{row.original.topic.name}
+								</Link>
+							</div>
+						) : (
+							<div className="italic text-gray-400">
+								Public Submitted
+							</div>
+						)}
+					</div>
+				),
+			},
+			{
+				accessorKey: "language",
+				header: () => <div className="text-center">Language</div>,
+				cell: ({ row }) => (
+					<div className="font-medium py-2 flex justify-center">
+						{
+							ProgrammingLanguageOptions.find(
+								(language) =>
+									language.value === row.original.language
+							)?.badge
+						}
+					</div>
+				),
+			},
+			{
+				accessorKey: "runtime_result",
+				header: "Runtime Result",
+				cell: ({ row }) => (
+					<div className="font-medium">
+						<TestcasesGradingIndicator
+							sizeX={1.5}
+							sizeY={3}
+							submissionTestcases={row.original.runtime_output}
+						/>
+					</div>
+				),
+			},
+			{
+				accessorKey: "date",
+				header: "Submitted Date",
+				cell: ({ row }) => (
+					<div className="font-mono">
+						{readableDateFormat(row.original.date)}
+					</div>
+				),
+			},
+			// {
+			// 	accessorKey: "action",
+			// 	header: "",
+			// 	cell: ({ row }) => (
+			// 		<div>
+			// 			<ProblemSubmissionSourceCodeAndRuntimeResultDialog
+			//                 submission={row.original}
+			//                 problem={problem}
+			//             >
+			// 				<Button>
+			// 					<Maximize2 size={15} className="mr-2" />
+			// 					View More
+			// 				</Button>
+			// 			</ProblemSubmissionSourceCodeAndRuntimeResultDialog>
+			// 		</div>
+			// 	),
+			// },
+		];
+
+	return (
+		<div>
+			<DataTable columns={columns} data={submissions} />
+		</div>
+	);
+};
+
+export default MyPreviousSubmissionsTable;

src/components/Tables/MyProblemSubmissionsTable.tsx

@@ -1,13 +1,14 @@
 import { ColumnDef } from "@tanstack/react-table";
-import { Maximize2 } from "lucide-react";
+import { LibraryBig, Maximize2 } from "lucide-react";
 import { ProgrammingLanguageOptions } from "../../constants/ProgrammingLanguage";
 import { ProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel } from "../../types/models/Problem.model";
 import { SubmissionPopulateSubmissionTestcaseAndAccountModel } from "../../types/models/Submission.model";
 import { readableDateFormat } from "../../utilities/ReadableDateFormat";
-import { DataTable } from "../DataTable";
+import { DataTable } from "./Prototype/DataTable";
 import ProblemSubmissionSourceCodeAndRuntimeResultDialog from "../Dialogs/ProblemSubmissionSourceCodeAndRuntimeResultDialog";
 import TestcasesGradingIndicator from "../TestcasesGradingIndicator";
 import { Button } from "../shadcn/Button";
+import { Link } from "react-router-dom";
 
 
 
@@ -25,16 +26,38 @@ const MyProblemSubmissionsTable = ({
 			accessorKey: "username",
 			header: "Username",
 			cell: ({ row }) => (
-				<div className="font-medium py-2">
+				<div className="font-medium">
 					{row.original.account.username}
 				</div>
 			),
 		},
+		{
+			accessorKey: "course",
+			header: "Course",
+			cell: ({ row }) => (
+				<div className="">
+						{row.original.topic ? (
+							<div className="font-medium hover:underline hover:text-green-500 flex items-center">
+								<LibraryBig size={20} className="text-purple-400 mr-1"/>
+								<Link
+									to={`/courses/${row.original.topic.topic_id}`}
+								>
+									{row.original.topic.name}
+								</Link>
+							</div>
+						) : (
+							<div className="italic text-gray-400">
+								Public Submitted
+							</div>
+						)}
+					</div>
+			),
+		},
 		{
 			accessorKey: "language",
-			header: "Language",
+			header: () => <div className="text-center">Language</div>,
 			cell: ({ row }) => (
-				<div className="font-medium py-2">
+				<div className="font-medium flex justify-center">
 					{
 						ProgrammingLanguageOptions.find(
 							(language) =>
@@ -61,7 +84,7 @@ const MyProblemSubmissionsTable = ({
 			accessorKey: "date",
 			header: "Submitted Date",
 			cell: ({ row }) => (
-				<div className="">{readableDateFormat(row.original.date)}</div>
+				<div className="font-mono">{readableDateFormat(row.original.date)}</div>
 			),
 		},
 		{