E2568. Finish tabbed view for Assignments, including Topics and Calibration tabs

src/App.tsx

@@ -1,46 +1,46 @@
+import React from "react";
 import { createBrowserRouter, Navigate, RouterProvider } from "react-router-dom";
 import AdministratorLayout from "./layout/Administrator";
-import RootLayout from "./layout/Root";
 import ManageUserTypes, { loader as loadUsers } from "./pages/Administrator/ManageUserTypes";
-import Assignment from "./pages/Assignments/Assignment";
-import AssignmentEditor from "./pages/Assignments/AssignmentEditor";
-import { loadAssignment } from "./pages/Assignments/AssignmentUtil";
-import ResponseMappings from "./pages/ResponseMappings/ResponseMappings";
-import CreateTeams from "./pages/Assignments/CreateTeams";
-import ViewDelayedJobs from "./pages/Assignments/ViewDelayedJobs";
-import ViewReports from "./pages/Assignments/ViewReports";
-import ViewScores from "./pages/Assignments/ViewScores";
-import ViewSubmissions from "./pages/Assignments/ViewSubmissions";
 import Login from "./pages/Authentication/Login";
 import Logout from "./pages/Authentication/Logout";
-import Courses from "./pages/Courses/Course";
-import CourseEditor from "./pages/Courses/CourseEditor";
-import { loadCourseInstructorDataAndInstitutions } from "./pages/Courses/CourseUtil";
-import Questionnaire from "./pages/EditQuestionnaire/Questionnaire";
-import Email_the_author from "./pages/Email_the_author/email_the_author";
-import Home from "./pages/Home";
 import InstitutionEditor, { loadInstitution } from "./pages/Institutions/InstitutionEditor";
 import Institutions, { loadInstitutions } from "./pages/Institutions/Institutions";
+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 { loadAssignment } from "./pages/Assignments/AssignmentUtil";
+import ErrorPage from "./router/ErrorPage";
+import ProtectedRoute from "./router/ProtectedRoute";
+import { ROLE } from "./utils/interfaces";
+import NotFound from "./router/NotFound";
 import Participants from "./pages/Participants/Participant";
 import ParticipantEditor from "./pages/Participants/ParticipantEditor";
-import ParticipantsAPI from "./pages/Participants/ParticipantsAPI";
-import ParticipantsDemo from "./pages/Participants/ParticipantsDemo";
 import { loadParticipantDataRolesAndInstitutions } from "./pages/Participants/participantUtil";
-import EditProfile from "./pages/Profile/Edit";
-import Reviews from "./pages/Reviews/reviews";
-import RoleEditor, { loadAvailableRole } from "./pages/Roles/RoleEditor";
-import Roles, { loadRoles } from "./pages/Roles/Roles";
+import RootLayout from "./layout/Root";
+import UserEditor from "./pages/Users/UserEditor";
+import Users from "./pages/Users/User";
+import { loadUserDataRolesAndInstitutions } from "./pages/Users/userUtil";
+import Home from "./pages/Home";
+import Questionnaire from "./pages/EditQuestionnaire/Questionnaire";
+import Courses from "./pages/Courses/Course";
+import CourseEditor from "./pages/Courses/CourseEditor";
+import { loadCourseInstructorDataAndInstitutions } from "./pages/Courses/CourseUtil";
 import TA from "./pages/TA/TA";
 import TAEditor from "./pages/TA/TAEditor";
 import { loadTAs } from "./pages/TA/TAUtil";
-import Users from "./pages/Users/User";
-import UserEditor from "./pages/Users/UserEditor";
-import { loadUserDataRolesAndInstitutions } from "./pages/Users/userUtil";
 import ReviewTable from "./pages/ViewTeamGrades/ReviewTable";
-import ErrorPage from "./router/ErrorPage";
-import NotFound from "./router/NotFound";
-import ProtectedRoute from "./router/ProtectedRoute";
-import { ROLE } from "./utils/interfaces";
+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 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 ResponseMappings from "./pages/ResponseMappings/ResponseMappings";
 function App() {
   const router = createBrowserRouter([
     {
@@ -51,7 +51,7 @@ function App() {
         { index: true, element: <ProtectedRoute element={<Home />} /> },
         { path: "login", element: <Login /> },
         { path: "logout", element: <ProtectedRoute element={<Logout />} /> },
-
+        // Add the ViewTeamGrades route
         {
           path: "view-team-grades",
           element: <ProtectedRoute element={<ReviewTable />} />,
@@ -60,7 +60,6 @@ function App() {
           path: "edit-questionnaire",
           element: <ProtectedRoute element={<Questionnaire />} />,
         },
-
         {
           path: "assignments/edit/:id",
           element: <AssignmentEditor mode="update" />,
@@ -71,13 +70,17 @@ function App() {
           element: <CreateTeams />,
           loader: loadAssignment,
         },
-
-        // Assign Reviewer: no route loader (component handles localStorage/URL id)
+                // Assign Reviewer: no route loader (component handles localStorage/URL id) 
         {
           path: "assignments/edit/:id/responsemappings",
           element: <ResponseMappings />,
         },
 
+        {
+          path: "assignments/edit/:id/assignreviewer",
+          element: <AssignReviewer />,
+          loader: loadAssignment,
+        },
         {
           path: "assignments/edit/:id/viewsubmissions",
           element: <ViewSubmissions />,
@@ -98,19 +101,22 @@ function App() {
           element: <ViewDelayedJobs />,
           loader: loadAssignment,
         },
-
+        {
+          path: "assignments/new",
+          element: <AssignmentEditor mode="create" />,
+          loader: loadAssignment,
+        },
         {
           path: "assignments",
           element: <ProtectedRoute element={<Assignment />} leastPrivilegeRole={ROLE.TA} />,
-          children: [
-            {
-              path: "new",
-              element: <AssignmentEditor mode="create" />,
-              loader: loadAssignment,
-            },
-          ],
+          // children: [
+          //   {
+          //     path: "new",
+          //     element: <AssignmentEditor mode="create" />,
+          //     loader: loadAssignment,
+          //   },
+          // ],
         },
-
         {
           path: "users",
           element: <ProtectedRoute element={<Users />} leastPrivilegeRole={ROLE.TA} />,
@@ -127,7 +133,6 @@ function App() {
             },
           ],
         },
-
         {
           path: "student_tasks/participants",
           element: <Participants type="student_tasks" id={1} />,
@@ -144,12 +149,10 @@ function App() {
             },
           ],
         },
-
         {
           path: "profile",
           element: <ProtectedRoute element={<EditProfile />} />,
         },
-
         {
           path: "assignments/edit/:assignmentId/participants",
           element: <Participants type="student_tasks" id={1} />,
@@ -166,7 +169,6 @@ function App() {
             },
           ],
         },
-
         {
           path: "student_tasks/edit/:assignmentId/participants",
           element: <Participants type="student_tasks" id={1} />,
@@ -183,7 +185,6 @@ function App() {
             },
           ],
         },
-
         {
           path: "courses/participants",
           element: <Participants type="courses" id={1} />,
@@ -204,14 +205,6 @@ function App() {
           path: "reviews",
           element: <Reviews />,
         },
-        {
-          path: "demo/participants",
-          element: <ParticipantsDemo />,
-        },
-        {
-          path: "participants",
-          element: <ProtectedRoute element={<ParticipantsAPI />} />,
-        },
         {
           path: "email_the_author",
           element: <Email_the_author />,
@@ -244,7 +237,6 @@ function App() {
             },
           ],
         },
-
         {
           path: "administrator",
           element: (
@@ -257,7 +249,10 @@ function App() {
               element: <Roles />,
               loader: loadRoles,
               children: [
-                { path: "new", element: <RoleEditor mode="create" /> },
+                {
+                  path: "new",
+                  element: <RoleEditor mode="create" />,
+                },
                 {
                   id: "edit-role",
                   path: "edit/:id",
@@ -271,7 +266,10 @@ function App() {
               element: <Institutions />,
               loader: loadInstitutions,
               children: [
-                { path: "new", element: <InstitutionEditor mode="create" /> },
+                {
+                  path: "new",
+                  element: <InstitutionEditor mode="create" />,
+                },
                 {
                   path: "edit/:id",
                   element: <InstitutionEditor mode="update" />,
@@ -284,21 +282,30 @@ function App() {
               element: <ManageUserTypes />,
               loader: loadUsers,
               children: [
-                { path: "new", element: <Navigate to="/users/new" /> },
-                { path: "edit/:id", element: <Navigate to="/users/edit/:id" /> },
+                {
+                  path: "new",
+                  element: <Navigate to="/users/new" />,
+                },
+
+                {
+                  path: "edit/:id",
+                  element: <Navigate to="/users/edit/:id" />,
+                },
               ],
             },
-            { path: "questionnaire", element: <Questionnaire /> },
+            {
+              path: "questionnaire",
+              element: <Questionnaire />,
+            },
           ],
         },
-
         { path: "*", element: <NotFound /> },
-        { path: "questionnaire", element: <Questionnaire /> },
+        { path: "questionnaire", element: <Questionnaire /> }, // Added the Questionnaire route
       ],
     },
   ]);
 
   return <RouterProvider router={router} />;
 }
 
-export default App;
+export default App;

src/custom.scss

@@ -85,5 +85,23 @@ $theme-colors: (
           margin-bottom: 10px; // Space between stacked buttons
         }
       }
+
+// Custom styles for assignment tabs
+#assignment-tabs {
+  .nav-link {
+    color: #333; // Default tab text color
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: #fff; // Hover text color (you can change this to any color)
+    }
+
+    &.active {
+      color: #333; // Active tab text color (you can change this to any color)
+      font-weight: 600; // Optional: make active tab bold
+    }
+  }
+}
+
 // import bootstrap styles at the bottom!
-@import 'bootstrap/scss/bootstrap.scss';
+@import 'bootstrap/scss/bootstrap.scss';