Project 3

package.json

@@ -27,6 +27,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.4",
     "react-chartjs-2": "^5.2.0",
+    "react-charts": "^3.0.0-beta.57",
     "react-datepicker": "^4.11.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.0",

src/App.tsx

@@ -10,6 +10,7 @@ import RoleEditor, { loadAvailableRole } from "./pages/Roles/RoleEditor";
 import Roles, { loadRoles } from "./pages/Roles/Roles";
 import Assignment from "./pages/Assignments/Assignment";
 import AssignmentEditor from "./pages/Assignments/AssignmentEditor";
+import AssignmentEditPage from "./pages/Assignments/AssignmentEditPage";
 import { loadAssignment } from "pages/Assignments/AssignmentUtil";
 import ErrorPage from "./router/ErrorPage";
 import ProtectedRoute from "./router/ProtectedRoute";
@@ -35,11 +36,13 @@ import EditProfile from "pages/Profile/Edit";
 import Reviews from "pages/Reviews/reviews";
 import Email_the_author from "./pages/Email_the_author/email_the_author";
 import CreateTeams from "pages/Assignments/CreateTeams";
+import StudentTasks from "pages/StudentTasks/StudentTasks";
 import AssignReviewer from "pages/Assignments/AssignReviewer";
 import ViewSubmissions from "pages/Assignments/ViewSubmissions";
 import ViewScores from "pages/Assignments/ViewScores";
 import ViewReports from "pages/Assignments/ViewReports";
 import ViewDelayedJobs from "pages/Assignments/ViewDelayedJobs";
+import ReviewReportPage from "pages/Reviews/ReviewReportPage";
 function App() {
   const router = createBrowserRouter([
     {
@@ -99,13 +102,12 @@ function App() {
               element: <AssignmentEditor mode="create" />,
               loader: loadAssignment,
             },
-            {
-              path: "edit/:id",
-              element: <AssignmentEditor mode="update" />,
-              loader: loadAssignment,
-            },
           ],
         },
+        {
+          path: "assignments/edit/:id",
+          element: <ProtectedRoute element={<AssignmentEditPage />} leastPrivilegeRole={ROLE.TA} />,
+        },
         {
           path: "users",
           element: <ProtectedRoute element={<Users />} leastPrivilegeRole={ROLE.TA} />,
@@ -120,6 +122,11 @@ function App() {
               element: <UserEditor mode="update" />,
               loader: loadUserDataRolesAndInstitutions,
             },
+            {
+              path: ":id",
+              element: <UserEditor mode="update" />,
+              loader: loadUserDataRolesAndInstitutions,
+            },
           ],
         },
         {
@@ -192,11 +199,23 @@ function App() {
         },
         {
           path: "reviews",
-          element: <Reviews/>,
+          element: <Reviews />,
         },
         {
           path: "email_the_author",
-          element: <Email_the_author/>,
+          element: <Email_the_author />,
+        },
+        {
+          path: "student_tasks",
+          element: <ProtectedRoute element={<StudentTasks />} />,
+        },
+        {
+          path: "student_tasks/:assignmentId",
+          element: <ProtectedRoute element={<StudentTasks />} />,
+        },
+        {
+          path: "assignments/:id/review",
+          element: <ReviewReportPage />,
         },
         // Fixed the missing comma and added an opening curly brace
         {

src/components/Table/Table.tsx

@@ -18,7 +18,6 @@ import {
   import GlobalFilter from "./GlobalFilter";
   import Pagination from "./Pagination";
   import RowSelectCheckBox from "./RowSelectCheckBox";
-  import { FaSearch } from "react-icons/fa";
 
   interface TableProps {
 	data: Record<string, any>[];
@@ -151,25 +150,28 @@ import {
 	  handleSelectionChange?.(selectedData);
 	}, [flatRows]);
 
-	const toggleGlobalFilter = () => {
-	  setIsGlobalFilterVisible(!isGlobalFilterVisible);
-	};
 
 	const firstRenderRef = useRef(true);
 
 	return (
 	  <>
+		<style>
+		  {`
+			.selected-topic-row {
+			  background-color: #ffeb3b !important;
+			}
+			.selected-topic-row:hover {
+			  background-color: #fdd835 !important;
+			}
+		  `}
+		</style>
 		<Container>
 		  <Row className="mb-md-2">
 			<Col md={{ span: 12 }}>
 			  {isGlobalFilterVisible && (
 				<GlobalFilter filterValue={globalFilter} setFilterValue={setGlobalFilter} />
 			  )}
 			</Col>
-			<span style={{ marginLeft: "5px" }} onClick={toggleGlobalFilter}>
-			  <FaSearch style={{ cursor: "pointer" }} />
-			  {isGlobalFilterVisible ? " Hide" : " Show"}
-			</span>
 		  </Row>
 		</Container>
 		<Container>
@@ -210,12 +212,18 @@ import {
 				<tbody>
 				  {table.getRowModel().rows.map((row) => (
 					<React.Fragment key={row.id}>
-					  <tr>
-						{row.getVisibleCells().map((cell) => (
-						  <td key={cell.id}>
-							{flexRender(cell.column.columnDef.cell, cell.getContext())}
-						  </td>
-						))}
+					  <tr
+						className={row.original.isSelected ? 'selected-topic-row' : ''}
+						style={row.original.isSelected ? { backgroundColor: '#fff3cd' } : undefined}
+					  >
+						{row.getVisibleCells().map((cell) => {
+						  const selected = !!row.original.isSelected;
+						  return (
+							<td key={cell.id} style={selected ? { backgroundColor: '#fff3cd' } : undefined}>
+							  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+							</td>
+						  );
+						})}
 					  </tr>
 					  {row.getIsExpanded() && renderSubComponent && (
 						<tr>