fix(Vite): publicUrl helper, missing participant modules, react-icons for permissions

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: vishalreddy2323

.gitignore

@@ -11,6 +11,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

src/components/Modals/ExportModal.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState, memo, useCallback } from "react";
 import { Modal, Button, Form, Row, Col, OverlayTrigger, Tooltip } from "react-bootstrap";
 import useAPI from "../../hooks/useAPI";
 import { HttpMethod } from "../../utils/httpMethods";
+import { publicUrl } from "../../utils/publicUrl";
 
 /* =============================================================================
    Shared visual style — same as CreateTeams.tsx
@@ -26,19 +27,7 @@ const TABLE_TEXT: React.CSSProperties = {
    Icon utilities — same pattern as Import modal
 ============================================================================= */
 
-const getBaseUrl = (): string => {
-  if (typeof document !== 'undefined') {
-    const base = document.querySelector('base[href]') as HTMLBaseElement | null;
-    if (base?.href) return base.href.replace(/\/$/, '');
-  }
-  const fromGlobal = (globalThis as any)?.__BASE_URL__;
-  if (typeof fromGlobal === 'string' && fromGlobal) return fromGlobal.replace(/\/$/, '');
-  const fromProcess =
-    (typeof process !== 'undefined' && (process as any)?.env?.PUBLIC_URL) || '';
-  return String(fromProcess).replace(/\/$/, '');
-};
-
-const assetUrl = (rel: string) => `${getBaseUrl()}/${rel.replace(/^\//, '')}`;
+const assetUrl = (rel: string) => publicUrl(rel.replace(/^\//, ''));
 
 
 

src/components/Modals/ImportModal.tsx

@@ -17,6 +17,7 @@ import useAPI from "../../hooks/useAPI";
 import { HttpMethod } from "../../utils/httpMethods";
 import PreviewTable from "../Table/Table";
 import { ColumnDef } from "@tanstack/react-table";
+import { publicUrl } from "../../utils/publicUrl";
 
 /* ----------------------------------------
  *  Shared text styles for consistency
@@ -39,24 +40,7 @@ const TABLE_TEXT: React.CSSProperties = {
  *  Icon utilities — used for tooltip icons
  * ---------------------------------------- */
 
-/** Helper to resolve asset URLs correctly even under nested routes */
-const getBaseUrl = (): string => {
-  if (typeof document !== "undefined") {
-    const base = document.querySelector("base[href]") as HTMLBaseElement | null;
-    if (base?.href) return base.href.replace(/\/$/, "");
-  }
-
-  const fromGlobal = (globalThis as any)?.__BASE_URL__;
-  if (typeof fromGlobal === "string") return fromGlobal.replace(/\/$/, "");
-
-  const fromProcess =
-    (typeof process !== "undefined" && (process as any)?.env?.PUBLIC_URL) || "";
-
-  return String(fromProcess).replace(/\/$/, "");
-};
-
-/** Helper for converting relative asset paths to usable URLs */
-const assetUrl = (rel: string) => `${getBaseUrl()}/${rel.replace(/^\//, "")}`;
+const assetUrl = (rel: string) => publicUrl(rel.replace(/^\//, ""));
 
 /** Asset map */
 const ICONS = {

src/pages/AssignmentParticipants/AssignmentParticipants.tsx

@@ -15,6 +15,7 @@ import useAPI from 'hooks/useAPI';
 import { useParams } from 'react-router-dom';
 import { IAssignmentResponse } from 'utils/interfaces';
 import { HttpMethod } from 'utils/httpMethods';
+import { FaCheck, FaInfoCircle, FaTimes } from 'react-icons/fa';
 import { Form, Button } from 'react-bootstrap';
 
 const UI_ROLE_TO_API_ROLE_NAME: Record<string, string> = {
@@ -274,13 +275,11 @@ function AssignmentParticipants() {
                 onChange={() => setSelectedRole(role as ParticipantRole)}
               />
               {role}
-              <img
-                src="/assets/icons/info.png"
-                alt="Info"
+              <FaInfoCircle
+                className="ms-2 text-secondary"
+                size={16}
+                aria-label={participantRoleInfo(role)}
                 title={participantRoleInfo(role)}
-                width="16"
-                height="16"
-                className="ms-2"
               />
             </label>
           ))}
@@ -343,15 +342,11 @@ function AssignmentParticipants() {
 
 /** Returns the enabled/disabled permission icon for a permission cell. */
 export function permissionIcon(permission: IsEnabled) {
-  return permission === IsEnabled.Yes ? <img
-    src="/assets/icons/Check-icon.png"
-    width="20"
-    height="20"
-  /> : <img
-    src="/assets/icons/Uncheck-icon.png"
-    width="20"
-    height="20"
-  />;
+  return permission === IsEnabled.Yes ? (
+    <FaCheck size={20} className="text-success" aria-label="Yes" />
+  ) : (
+    <FaTimes size={20} className="text-secondary" aria-label="No" />
+  );
 }
 
 export default AssignmentParticipants;

src/pages/AssignmentParticipants/AssignmentParticipantsTypes.ts

@@ -0,0 +1,42 @@
+export enum IsEnabled {
+  Yes = 'yes',
+  No = 'no',
+}
+
+export enum Role {
+  Student = "Student",
+  Instructor = "Instructor",
+  Admin = "Admin",
+  //TeachingAssistant = "Teaching Assistant", //to be added after merging the teaching assistant feature
+}
+
+export enum ParticipantRole {
+  Participant = "participant",
+  Reader = "reader",
+  Reviewer = "reviewer",
+  Submitter = "submitter",
+  Mentor = "mentor",
+}
+
+export interface ParticipantPermissions {
+  review: IsEnabled;
+  submit: IsEnabled;
+  takeQuiz: IsEnabled;
+  mentor: IsEnabled;
+}
+
+export interface Participant {
+  id: number;
+  user_id: number;
+  name: string;
+  email: string;
+  role: Role;
+  parent: string;
+  permissions: ParticipantPermissions;
+  participantRole: ParticipantRole;
+}
+
+export interface AssignmentProperties {
+  hasQuiz: boolean;
+  hasMentor: boolean;
+}

src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx

@@ -0,0 +1,29 @@
+import Modal from 'react-bootstrap/Modal';
+import Button from 'react-bootstrap/Button';
+
+interface ConfirmRemoveModalProps {
+  show: boolean;
+  onHide: () => void;
+  onConfirm: () => void;
+}
+
+{/* Changed the buttons for Cancel and Confirm according to the design standards */}
+function ConfirmRemoveModal({ show, onHide, onConfirm }: ConfirmRemoveModalProps) {
+  return (
+    <Modal show={show} onHide={onHide} centered>
+      <Modal.Header closeButton>
+        <Modal.Title>Confirm Removal</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        Are you sure you want to remove this participant?
+      </Modal.Body>
+      <Modal.Footer>
+        <Button className= "btn btn-md" variant="danger" onClick={onConfirm}>
+          Confirm
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+export default ConfirmRemoveModal;

src/pages/AssignmentParticipants/EditParticipantModal.css

@@ -0,0 +1,28 @@
+.permissions-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-top: 2rem;
+    justify-content: space-between;
+}
+
+.permission-switch {
+    min-width: 120px;
+}
+
+.modal-body .form-group {
+    margin-bottom: 1rem;
+}
+
+.form-label {
+    font-weight: bold;
+}
+
+.form-control {
+    height: 2.5rem;
+}
+
+.modal-footer button {
+    font-size: 1rem;
+    padding: 0.5rem 1rem;
+}