+ {
+ setSaveError(null);
+ setModalShow({ ...modalShow, edit: false });
+ }}
+ onSave={handleSave}
+ errorMessage={saveError}
+ />
+ )}
+ {
+ setRemoveError(null);
+ setModalShow({ ...modalShow, remove: false });
+ }}
+ onConfirm={handleRemove}
+ />
+
+ );
+}
+
+/**
+ * Renders an accessible icon for a permission cell.
+ * @param permission Whether the permission is granted.
+ * @param permissionLabel Short column label for screen readers, e.g. "Review permission".
+ */
+export function permissionIcon(permission: IsEnabled, permissionLabel?: string) {
+ const yes = permission === IsEnabled.Yes;
+ const ariaLabel = permissionLabel
+ ? `${permissionLabel}: ${yes ? "Yes" : "No"}`
+ : yes
+ ? "Permission enabled"
+ : "Permission disabled";
+ return yes ? (
+ Assignment Participants: {assignmentName}
+ + {error &&{error}
}
+
+
+
+
+
+ setNewUserName(e.target.value)}
+ aria-label="Username, name, or email"
+ />
+
+
+
+
+ {Object.values(ParticipantRole)
+ .filter((role) => role !== ParticipantRole.Unknown)
+ .map((role) => (
+
+ ))}
+
+
+ setSearchTerm(e.target.value)}
+ aria-label="Search participants"
+ />
+ setSelectedFilterRole(e.target.value as Role | 'All')}
+ aria-label="Filter participants by role"
+ >
+
+ {Object.values(Role).map((role) => (
+
+ ))}
+
+
+
+ Are you sure you want to remove this participant?
+ {errorMessage ? ( +
+ {errorMessage}
+
+ ) : null}
+
+ {errorMessage}
+
+ )}
+
+
+
+ wrapper */
+.permission-column {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+
+ .permission-column > img {
+ display: block;
+ margin: 0;
+ }
+
+.assignment-participants-table tr:nth-child(even) {
+ background-color: #f9fafb;
+}
+
+.assignment-participants-table tr:hover {
+ background-color: #f3f4f6;
+}
+
+/* Status-based colors */
+.status-yes {
+ color: #10b981;
+ font-weight: bold;
+}
+
+.status-no {
+ color: #ef4444;
+ font-weight: bold;
+}
+
+.no-results-message {
+ text-align: center;
+ font-style: italic;
+ color: #999;
+ padding: 1rem;
+}
+
+
+/* Role-based colors */
+.role-student {
+ color: #2563eb;
+ font-weight: 500;
+}
+
+.role-instructor {
+ color: #10b981;
+ font-weight: 500;
+}
+
+.role-admin {
+ color: #f59e0b;
+ font-weight: 500;
+}
+
+.role-unknown {
+ color: #6b7280;
+ font-weight: 500;
+}
+
+.remove-user-button {
+ color: #ef4444;
+ font-weight: 600;
+ cursor: pointer;
+ background-color: transparent;
+ border: 1px solid transparent;
+ /* padding: 0.4em 0.8em; */
+ border-radius: 4px;
+ transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.remove-user-button:hover {
+ color: #dc2626;
+ /* Darker shade for hover effect */
+ background-color: rgba(239, 68, 68, 0.1);
+ border-color: #ef4444;
+ text-decoration: none;
+}
+
+.remove-user-button:focus {
+ outline: none;
+ box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.5);
+}
+
+
+.edit-user-button {
+ color: #1d4ed8;
+ font-weight: 600;
+ cursor: pointer;
+ background-color: transparent;
+ border: 1px solid transparent;
+ /* padding: 0.4em 0.8em; */
+ border-radius: 4px;
+ transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.edit-user-button:hover {
+ color: #1e40af;
+ /* Darker shade for hover effect */
+ background-color: rgba(29, 78, 216, 0.1);
+ border-color: #1d4ed8;
+ text-decoration: none;
+}
+
+.edit-user-button:focus {
+ outline: none;
+ /* Focus ring for accessibility */
+ box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.5);
+}
+
+
+/* Checkbox Styling */
+.assignment-participants-table input[type="checkbox"] {
+ width: 1.2rem;
+ height: 1.2rem;
+ cursor: pointer;
+ accent-color: #2563eb;
+ transition: transform 0.2s ease;
+}
+
+.assignment-participants-table input[type="checkbox"]:hover {
+ transform: scale(1.1);
+}
+
+.actions-column {
+ display: flex;
+ justify-content: space-around;
+}
+
+
+@media (max-width: 768px) {
+ .assignment-participants-header {
+ font-size: 1.25rem;
+ }
+
+ .add-user-button {
+ width: 100%;
+ }
+
+ .assignment-participants-table th::before {
+ content: attr(data-label);
+ float: left;
+ font-weight: bold;
+ }
+}
diff --git a/src/pages/AssignmentParticipants/ParticipantsTable.tsx b/src/pages/AssignmentParticipants/ParticipantsTable.tsx
new file mode 100644
index 00000000..dea0adda
--- /dev/null
+++ b/src/pages/AssignmentParticipants/ParticipantsTable.tsx
@@ -0,0 +1,136 @@
+import { permissionIcon } from "./AssignmentParticipants";
+import { AssignmentProperties, Participant } from "./AssignmentParticipantsTypes";
+import { classForRole, classForStatus } from "./AssignmentParticipantsUtil";
+import "./ParticipantsTable.css";
+import { OverlayTrigger, Tooltip, Button } from "react-bootstrap";
+import Table from "components/Table/Table";
+import { publicUrl } from "utils/publicUrl";
+
+interface ParticipantTableProps {
+ participants: Participant[];
+ assignmentProps: AssignmentProperties;
+ openEditModal: (participant: Participant) => void;
+ openRemoveModal: (participant: Participant) => void;
+}
+
+/** Renders the assignment participants table with permission and action columns. */
+function ParticipantTable({
+ participants,
+ assignmentProps,
+ openEditModal,
+ openRemoveModal,
+}: ParticipantTableProps) {
+ const columns = [
+ { accessorKey: "id", header: "ID", enableSorting: true },
+ { accessorKey: "name", header: "Name", enableSorting: true },
+ { accessorKey: "email", header: "Email address", enableSorting: true },
+ {
+ accessorKey: "role",
+ header: "Role",
+ enableSorting: true,
+ cell: ({ row }: { row: any }) => (
+
+ {row.original.role}
+
+ ),
+ },
+ { accessorKey: "parent", header: "Parent", enableSorting: true },
+ {
+ accessorKey: "permissions.review",
+ id: "perm_review",
+ header: "Review",
+ enableSorting: true,
+ cell: ({ row }: { row: any }) => (
+
+ {permissionIcon(row.original.permissions.review, "Review permission")}
+
+ ),
+ },
+ {
+ accessorKey: "permissions.submit",
+ id: "perm_submit",
+ header: "Submit",
+ enableSorting: true,
+ cell: ({ row }: { row: any }) => (
+
+ {permissionIcon(row.original.permissions.submit, "Submit permission")}
+
+ ),
+ },
+ assignmentProps.hasQuiz && {
+ accessorKey: "permissions.takeQuiz",
+ id: "perm_quiz",
+ header: "Take quiz",
+ enableSorting: true,
+ cell: ({ row }: { row: any }) => (
+
+ {permissionIcon(row.original.permissions.takeQuiz)}
+
+ ),
+ },
+ assignmentProps.hasMentor && {
+ accessorKey: "permissions.mentor",
+ id: "perm_mentor",
+ header: "Mentor",
+ enableSorting: true,
+ cell: ({ row }: { row: any }) => (
+
+ {permissionIcon(row.original.permissions.mentor, "Mentor permission")}
+
+ ),
+ },
+ {
+ id: "actions",
+ header: "Actions",
+ enableSorting: false,
+ enableColumnFilter: false,
+ cell: ({ row }: { row: any }) => (
+
+ Edit participant} placement="top">
+
+
+
+ Delete participant} placement="top">
+
+
+
+ ),
+ },
+ ].filter(Boolean) as any;
+
+ return (
+
+
+
+ = 10}
+ />
+
+
+
+ );
+}
+
+export default ParticipantTable;
diff --git a/src/pages/Assignments/CreateTeams.tsx b/src/pages/Assignments/CreateTeams.tsx
index eee84265..95ed1479 100644
--- a/src/pages/Assignments/CreateTeams.tsx
+++ b/src/pages/Assignments/CreateTeams.tsx
@@ -957,6 +957,7 @@ import { useLoaderData, useNavigate } from 'react-router-dom';
import ImportModal from "../../components/Modals/ImportModal";
import ExportModal from "../../components/Modals/ExportModal";
+import { publicUrl } from "../../utils/publicUrl";
/* =============================================================================
Types
@@ -989,25 +990,7 @@ interface LoaderPayload {
Assets (icons used only where required)
============================================================================= */
-// Safe base URL (no import.meta)
-const getBaseUrl = (): string => {
- // 1)