E2562. Review grading dashboard

package.json

@@ -23,6 +23,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

@@ -41,6 +41,9 @@ import ErrorPage from "./router/ErrorPage";
 import NotFound from "./router/NotFound";
 import ProtectedRoute from "./router/ProtectedRoute";
 import { ROLE } from "./utils/interfaces";
+import StudentTasks from "./pages/StudentTasks/StudentTasks";
+import AssignReviewer from "./pages/Assignments/AssignReviewer";
+import ReviewReportPage from "./pages/Reviews/ReviewReportPage";
 function App() {
   const router = createBrowserRouter([
     {
@@ -125,6 +128,11 @@ function App() {
               element: <UserEditor mode="update" />,
               loader: loadUserDataRolesAndInstitutions,
             },
+            {
+              path: ":id",
+              element: <UserEditor mode="update" />,
+              loader: loadUserDataRolesAndInstitutions,
+            },
           ],
         },
 
@@ -216,6 +224,18 @@ function App() {
           path: "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
         {
           path: "courses",

src/custom.scss

@@ -85,5 +85,43 @@ $theme-colors: (
           margin-bottom: 10px; // Space between stacked buttons
         }
       }
+
+      body {
+  background: #f7f7f7;
+    }
+
+    .legend {
+      font-size: 14px;
+    }
+
+    .legend li {
+      margin-bottom: 4px;
+    }
+
+    .legend-red { color: red; }
+    .legend-blue { color: blue; }
+    .legend-green { color: green; }
+    .legend-purple { color: purple; }
+    .legend-brown { color: brown; }
+
+    .row-highlight {
+      background: #f5f2d8;
+    }
+
+    .metrics-chart {
+      width: 160px;
+      height: 140px;
+      background: #eee;
+    }
+
+    .reviewer-name {
+      color: #005bbb;
+    }
+
+    .grade-box {
+      display: flex;
+      gap: 5px;
+    }
+
 // import bootstrap styles at the bottom!
 @import 'bootstrap/scss/bootstrap.scss';

src/pages/Assignments/Assignment.tsx

@@ -81,9 +81,14 @@ const Assignments = () => {
     []
   );
 
+  const handleReview = useCallback(
+    (row: TRow<IAssignmentResponse>) => navigate(`/assignments/${row.original.id}/review`),
+    [navigate]
+  );
+
   const tableColumns = useMemo(
-    () => ASSIGNMENT_COLUMNS(onEditHandle, onDeleteHandle),
-    [onDeleteHandle, onEditHandle]
+    () => ASSIGNMENT_COLUMNS(onEditHandle, onDeleteHandle, handleReview),
+    [onDeleteHandle, onEditHandle, handleReview]
   );
 
   const tableData = useMemo(

src/pages/Assignments/AssignmentColumns.tsx

@@ -1,12 +1,12 @@
-import { BsPencilFill, BsPersonXFill } from "react-icons/bs";
-import { Row, createColumnHelper } from "@tanstack/react-table";
+import { BsPencilFill, BsPersonXFill,BsBookFill} from 'react-icons/bs';
+import { Row, createColumnHelper } from '@tanstack/react-table';
 
 import { Button } from "react-bootstrap";
 import { IAssignmentResponse as IAssignment } from "../../utils/interfaces";
 
 type Fn = (row: Row<IAssignment>) => void;
 const columnHelper = createColumnHelper<IAssignment>();
-export const assignmentColumns = (handleEdit: Fn, handleDelete: Fn) => [
+export const assignmentColumns = ( handleEdit: Fn, handleDelete: Fn, handleReview: Fn) => [
   columnHelper.accessor("name", {
     header: "Name",
   }),
@@ -29,6 +29,19 @@ export const assignmentColumns = (handleEdit: Fn, handleDelete: Fn) => [
         <Button variant="outline-warning" size="sm" onClick={() => handleEdit(row)} title="Edit">
           <BsPencilFill />
         </Button>
+
+        {/* 3. Add your new "Review" button here */}
+        <Button
+          variant="outline-info" // A nice info color
+          size="sm"
+          className="ms-sm-2" // Add margin
+          onClick={() => handleReview(row)} // Use the new handler
+          title="Review"
+        >
+          <BsBookFill />
+        </Button>
+        {/* End of new button */}
+
         <Button
           variant="outline-danger"
           size="sm"

src/pages/Courses/CourseAssignments.tsx

@@ -109,7 +109,7 @@ const CourseAssignments: React.FC<CourseAssignmentsProps> = ({ courseId, courseN
   }, [fetchAssignments]);
 
   const getAssignmentColumns = (actions: ActionHandler[]) => {
-    let baseColumns = getBaseAssignmentColumns(() => {}, () => {}).filter(col => 
+    let baseColumns = getBaseAssignmentColumns(() => {}, () => {}, () => {}).filter(col => 
       !['edit', 'delete', 'actions'].includes(String(col.id))
     );
     baseColumns = baseColumns.filter(col => col.header !== 'Course Name');