Re-implemented View Team Grades page.

package.json

@@ -18,13 +18,15 @@
     "@types/react-redux": "^7.1.25",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.4.0",
-    "bootstrap": "^5.2.3",
+    "bootstrap": "^5.3.3",
     "formik": "^2.2.9",
+    "jquery": "^3.7.1",
     "jwt-decode": "^3.1.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.4",
     "react-datepicker": "^4.11.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.0",
     "react-icons": "^4.9.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.11.1",
@@ -61,6 +63,8 @@
     ]
   },
   "devDependencies": {
+    "@types/jquery": "^3.5.29",
+    "@types/jqueryui": "^1.12.21",
     "@types/react-bootstrap": "^0.32.32",
     "@types/react-datepicker": "^4.10.0",
     "eslint": "^8.38.0",

src/App.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {createBrowserRouter,Navigate,RouterProvider} from "react-router-dom";
+import { createBrowserRouter, Navigate, RouterProvider } from "react-router-dom";
 import AdministratorLayout from "./layout/Administrator";
 import ManageUserTypes, { loader as loadUsers } from "./pages/Administrator/ManageUserTypes";
 import Login from "./pages/Authentication/Login";
@@ -30,6 +30,7 @@ import { loadCourseInstructorDataAndInstitutions } from "pages/Courses/CourseUti
 import TA from "pages/TA/TA";
 import TAEditor from "pages/TA/TAEditor";
 import { loadTAs } from "pages/TA/TAUtil";
+import ReviewTable from "./pages/ViewTeamGrades/ReviewTable";
 
 function App() {
   const router = createBrowserRouter([
@@ -41,7 +42,19 @@ function App() {
         { index: true, element: <ProtectedRoute element={<Home />} /> },
         { path: "login", element: <Login /> },
         { path: "logout", element: <ProtectedRoute element={<Logout />} /> },
-        { path: "edit-questionnaire", element: <ProtectedRoute element={<Questionnaire />} /> },
+        // Add the ViewTeamGrades route
+        {
+          path: "view-team-grades",
+          element: <ProtectedRoute element={
+            <>
+            <ReviewTable />
+            </>
+          } />,
+        },
+        {
+          path: "edit-questionnaire",
+          element: <ProtectedRoute element={<Questionnaire />} />,
+        },
         {
           path: "assignments",
           element: <ProtectedRoute element={<Assignment />} leastPrivilegeRole={ROLE.TA} />,
@@ -106,7 +119,6 @@ function App() {
             },
           ],
         },
-        // Fixed the missing comma and added an opening curly brace
         {
           path: "courses",
           element: <ProtectedRoute element={<Courses />} leastPrivilegeRole={ROLE.TA} />,
@@ -132,7 +144,7 @@ function App() {
                 },
               ]
             },
-          ], // Added the missing closing curly brace
+          ],
         },
         {
           path: "administrator",
@@ -183,27 +195,26 @@ function App() {
                   path: "new",
                   element: <Navigate to="/users/new" />,
                 },
+
                 {
                   path: "edit/:id",
                   element: <Navigate to="/users/edit/:id" />,
                 },
               ],
             },
-            // Add the "Questionnaire" route here
             {
               path: "questionnaire",
               element: <Questionnaire />,
             },
           ],
         },
         { path: "*", element: <NotFound /> },
-        // Add the "Questionnaire" route here if it's not under the administrator section
-        { path: "questionnaire", element: <Questionnaire /> },
+        { path: "questionnaire", element: <Questionnaire /> }, // Added the Questionnaire route
       ],
     },
   ]);
-  
+
   return <RouterProvider router={router} />;
 }
 
-export default App;
+export default App;

src/layout/Header.tsx

@@ -102,6 +102,9 @@ const Header: React.FC = () => {
                 <Nav.Link as={Link} to="/student_view">
                   Student View
                 </Nav.Link>
+                <Nav.Link as={Link} to="/view-team-grades">
+                  ViewGrades
+                </Nav.Link>
               </Nav>
               <Nav.Item className="text-light ps-md-3 pe-md-3">
                 User: {auth.user.full_name}

src/pages/ViewTeamGrades/App.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReviewTable from './ReviewTable'; // Importing the ReviewTable component
+
+// Interface defining the structure of ReviewData
+export interface ReviewData {
+  questionNumber: string;
+  questionText: string;
+  reviews: { score: number; comment?: string }[]; // Array of objects with score and optional comment
+  RowAvg: number; // Average score for the row
+  maxScore: number; // Maximum possible score
+}
+
+// Functional component App, which renders the ReviewTable
+const App: React.FC = () => {
+  return (
+    <div>
+      <ReviewTable /> {/* Rendering the ReviewTable component */}
+    </div>
+  );
+};
+
+export default App; // Exporting the App component as default