Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2025 - E2539 Reimplement Student Task View (Frontend + Backend)

2025-04-22T05:20:54Z

Cnayak: /* Student Task Detail Screen */

== About Expertiza ==
Expertiza is a robust, open-source web platform designed to empower educational environments that emphasize project-based learning. It streamlines collaborative activities—such as peer reviews, surveys, and team assignments—into an engaging, interactive experience that supports both teaching and learning.

'''For Instructors/mentors:'''
Expertiza offers a comprehensive suite of tools to manage assignments, provide timely and constructive feedback, and track performance metrics. This enables educators to monitor student progress effectively and ensure optimal learning outcomes.

'''For Students:'''
The platform is designed with learner engagement at its core. It allows students to actively participate in tasks, collaborate seamlessly with peers, and evaluate each other’s work. This approach not only promotes academic growth but also enhances critical thinking, problem-solving, and teamwork skills.

Expertiza’s flexible architecture makes it ideal for a wide range of educational scenarios—from individual assignments to complex group projects and dynamic peer-review processes—ensuring an enriched, adaptive learning environment for all users.

== Introduction ==
The E2539: Reimplement Student Task View project is focused on improving the Student Task View in the Expertiza application. The current interface is static, lacks responsiveness, and uses mocked data, limiting its effectiveness for real-world use.

The project’s primary goal is to redesign this view using React.js and TypeScript on the frontend and Ruby on Rails on the backend. This new version will provide a modern, interactive experience where students can efficiently manage assignments, track progress, and access feedback in real-time.

==== Tech Stack:====

* Frontend: React.js, TypeScript
* Backend: Ruby on Rails (API)
* Database: MySQL

==== Key Improvements: ====

* Replace mocked data with live backend integration
* Create a responsive and accessible task list view
* Design and implement a detailed Student Task Details page
* Add a visual timeline for deadlines
* Improve usability through tooltips and modular components

==✅ Final UI Displays ==
=== Login Account ===
* Username: niki
* Password: password
=== Student Tasks Screen ===
 
[[File:StudentTasks View Edited.jpg |1000px|center]]

This screen presents a table view of all tasks assigned to the current student. Each row summarizes an individual task, including assignment name, current stage, and due dates. It provides a quick overview of progress across multiple assignments, with clickable links that navigate to the detailed task view (StudentTaskDetail). The layout is clean and responsive, allowing students to easily track their workload at a glance.

=== Student Task Detail Screen ===
 
[[File:FinalUI1.PNG |1000px|center]]

 
This screen provides an in-depth view of a specific task selected from the task table. It includes detailed metadata such as assignment name, team, topic, and due dates, displayed in a responsive grid. A visual timeline tracks the student’s progress across stages like submission and review, using intuitive status indicators. This view helps students clearly understand their responsibilities and upcoming deadlines for each assignment.

== Problem Statement ==

The previous Student Task View within the Expertiza application provides essential assignment details, deadlines, and progress tracking but falls short in delivering a responsive, user-friendly experience. The previous interface's limitations hinder students from efficiently managing their tasks, submitting assignments, and accessing feedback.

This project aims to reimplement the Student Task View using React.js and TypeScript for the frontend. The goal is to transform the current view into a modern, interactive, and accessible platform that offers real-time updates and streamlined task management.

 Key challenges to address include: 

*'''Backend Integration:''' Rebuild and connect the backend to support newly introduced functionalities, ensuring smooth data flow, accurate task state synchronization, and real-time responsiveness across the interface.

*'''Consisstent UI with Tooltips:''' Enhance the StudentTasks table by incorporating a reusable Tooltip component on key columns (e.g., Review Grade), providing contextual guidance without overwhelming the interface.

*'''Detailed Task View:''' Design and implement a dedicated Task Details screen that clearly displays essential information such as assignment name, due date, current stage, review status, and earned badges.

*'''Interactive Task Management:''' Introduce interactive elements—including submission actions, revision request buttons, and feedback viewers—to make task progression intuitive and user-friendly.

*'''Dynamic Timeline Visualization:''' Create a visual timeline that outlines all relevant deadlines, highlights the current date and time, and gives students an at-a-glance understanding of their progress and upcoming tasks.

By implementing these improvements, the project aims to significantly elevate the student experience, promote greater engagement, and enable a more efficient, intuitive workflow for managing academic assignments within Expertiza.

== User Stories ==
=== Tasks Table and Navigation ===

 As a student,

I want to view a list of all my assigned tasks and navigate to detailed information by clicking on a task,

So that I can quickly find and manage tasks that need attention.

 Acceptance Criteria:

* The Student Task screen displays a table listing all assigned tasks.
* Each row includes key summary info like assignment name, topic, and status.
* Clicking on the assignment name cell navigates to the task’s detail view.

=== Task Details Display===

As a student,

I want to see detailed information about a specific task (e.g., assignment name, due date, current stage, review status, and badges),

So that I can easily understand the progress and requirements for each task.

Acceptance Criteria:

* The task view displays the assignment name, due date, current stage, review status, and any associated badges.
* Information is presented in a clear and easily readable format.
* All task details update dynamically when changes occur.

=== Task Interaction===

As a student,

I want to interact with my tasks by submitting assignments, requesting revisions, and viewing feedback,

So that I can efficiently manage my assignments and improve my work.

Acceptance Criteria:

* Buttons for managing team, submitting assignments, requesting revisions, and viewing feedback are visible and functional.
* Each button triggers the appropriate action (e.g., submission confirmation, revision request, viewing feedback).
* After submitting or requesting a revision, the task view updates accordingly.

=== View Timeline ===

As a student,

I want to see a visual representation of all task due dates in a timeline view,

So that I can easily track important deadlines and manage my time effectively.

Acceptance Criteria:
* A visual timeline shows the due dates of all tasks.
* The timeline includes a dynamic indicator showing the present day and time.
* Tasks are visually represented in the timeline according to their respective due dates.

=== Task Stage Navigation ===

As a student,

I want to view the different stages of a task,

So that I can track my progress and see what steps are still pending.

Acceptance Criteria:
* The task view shows a visual representation of the different stages of the task (e.g., submission, review, feedback).
* Each stage is clearly labeled and the current stage is highlighted.
* The stages are navigable, allowing students to see what is coming next or what actions are needed.

== Design ==
=== Student Task Overview Design Diagram ===
 

[[File:StudentTask OverviewDiagram.jpg |1000px|center]]

 

This design diagram outlines the key components involved in the reimplementation of the Student Task View within the Expertiza application. The focus is on creating a responsive, modern, and interactive experience for students to manage their assignments effectively. Below is an overview of the system architecture:

==== Full Stack Overview: ====
1. Frontend Development

The Student Task View serves as the central interface for students to interact with their tasks. It provides:
* Displays task details, including assignment name, due date, current stage, review status, and badges.
* Includes interactive elements for submitting assignments, requesting revisions, and viewing feedback.
* Features a visual timeline for task due dates with a dynamic indicator for the current date and time.
* Provides task stage navigation to track progress.

2. Backend Development

* Manages the task data, user interactions, and real-time updates.
* Provides RESTful APIs that handle task-related queries and updates.
* Handles user authentication and ensures the task data is accessible and up-to-date.

3. MySQL Database System

* Stores task details, user data, and timelines.
* Ensures data persistence and efficient querying for task-related information.

==== Component Integration Flow: ====
* Navigation Initiation:
** User clicks the “Assignments” tab in the navigation bar.
** 2. React Router updates the URL to /student_tasks.
** 3. StudentTasks component loads and displays the list of assignments.
** 4. User clicks on a specific assignment name from the table.
** 5. Router updates the URL to /student_tasks/:id, triggering navigation to the StudentTaskDetails view.

* Data Loading & Component Communication
<pre>
sequenceDiagram
participant StudentTasks
participant API
participant Database
participant DOM

StudentTasks->>API: GET /tasks
API->>Database: Query task list
Database-->>API: Return task data
API-->>StudentTasks: JSON response
StudentTasks->>DOM: Render timeline & metadata
</pre>

=== UML Diagram for Student Task Classes ===
 

[[File:STD ClassDiagram.jpg |800px|center]]

 
This Classes Relationship is a summary of the previous team setup. It involves several models that manage the relationships between students, assignments, and teams. Each Institution has many Users, where users can be students or instructors. A User (student) can have multiple Participants, which represent the student’s involvement in various Assignments. Each Assignment belongs to a Course and can have many Participants assigned to it. A Team is composed of multiple TeamsUser records, with each TeamsUser linking a User (student) to a specific team for an assignment. The Participant model ties the student to a Team for an assignment, indicating that the student is part of that team. There is no dedicated StudentTask table; instead, the Assignment, Participant, and Team models handle the relationships between students, their tasks, and the teams they are part of.

=== Student Task UI Design Diagram ===
 

[[File:StduentTaskView v2.jpg |800px|center]]

 

The Student Task UI diagram visualizes how students interact with and manage their assignments within the Expertiza application. The diagram emphasizes the layout and functionalities available to students, focusing on clarity and usability. Here’s an explanation of each component:

1. Task Details Section:
* Displays essential information about a task, such as:
* Assignment Name: Clearly presented as the title of the task.
* Due Date: Shows when the task is due, helping students track deadlines.
* Current Stage: Displays the student’s current position in the task workflow (e.g., Submission, Review, Feedback).
* Review Status: Indicates whether the task has been reviewed or is pending.
* Badges: Any relevant achievement or status badges that show progress, completion, or special recognition.
2. Task Interaction Buttons:
* Submit Assignment: A button that allows students to submit their work.
* Request Revision: Students can request revisions for assignments that are pending review or feedback.
* View Feedback: A button to view feedback from reviewers, which helps students improve their work.
3. Timeline Section:
* Visual representation of all the task deadlines.
* Includes a dynamic indicator showing the present day and time, helping students track their current position relative to upcoming tasks.
* Each task’s due date is visually represented in a timeline, making it easier to manage multiple tasks.
4. Task Stage Navigation:
* A step-by-step visual representation of the task stages (e.g., Submission, Review, Feedback).
* Each stage is clearly labeled, with the current stage highlighted.
* Students can navigate between stages to see their progress and identify which actions are needed next.

== Improved Implementation of Backend ==
In the most recent version of the backend, the StudentTask Controller was created by another team. Our role was to design an improvement plan for this controller, focusing on enhancing functionality, permissions, task retrieval, and testing processes. The controller follows RESTful principles and integrates seamlessly with the React frontend.

=== Action Permissions ===
The action_allowed? method will ensure that only authorized users, such as students and specific roles, can interact with student tasks. It will authenticate the user, verify their role, and ensure they have the necessary permissions to access or modify student task data. Unauthorized access will be blocked with an appropriate error message.

1. Purpose: Ensure secure access to task data through role-based authorization.

2. Key features:
* Blocks non-student users from write operations
* Verifies task ownership before showing details
* Complies with FERPA data privacy requirements
<pre>
class Api::V1::StudentTasksController < ApplicationController
before_action :authenticate_user!
before_action :authorize_student!, except: [:list]

private

def authorize_student!
return if current_user.student? && owns_task?
render json: { error: "Access denied" }, status: :forbidden
end

def owns_task?
@student_task.participant.user == current_user
end
end
</pre>

=== Task Retrieval ===

List Action: This action will return all tasks assigned to the currently logged-in student, organized in a structured JSON format. It ensures students can view their tasks clearly and efficiently.
* Method: GET [Populate task list view]
<pre>/api/v1/student_tasks/list</pre>

=== Comprehensive Testing with RSwag ===

{| class="wikitable"
! Test Case
! Description / Input
! Expected Outcome
|-
| Student accesses their own task
| Authenticated student requests their assigned task
| 200 OK with task details
|-
| Student not participating in any assignment
| Authenticated student with no assignment attempts to access a task
| 404 Not Found
|}

Tests will be created for each API endpoint, covering:

* Successful Task Retrieval: Verifying that valid requests return the expected task data.

* Error Scenarios: Ensuring that tasks are not retrieved if the task ID is invalid, if the user is unauthorized, or if the task does not exist.

* Edge Cases: Handling scenarios like empty task lists, non-existent participant IDs, or invalid authentication tokens.

These tests will be incorporated into the Continuous Integration pipeline to maintain robust error handling and prevent regressions.

=== Enhancement: Relevant File Details ===
==== Student_Task.rb: ====
* Added multiple new attributes via attr_accessor (course, review_grade, stage_deadline.) to enrich task data.
<pre>
attr_accessor :assignment, :course, :current_stage, :participant, :stage_deadline, :topic, :permission_granted, :deadlines, :review_grade
</pre>
* create_from_participant: Builds a StudentTask with relevant metadata extracted from the Participant.
<pre>
# create a new StudentTask instance from a Participant object.
def self.create_from_participant(participant)
new(
assignment: participant.assignment.name, # Name of the assignment associated with the student task
course: participant.assignment.course.name,
topic: participant.topic, # Current stage of the assignment process
current_stage: participant.current_stage, # Participant object
stage_deadline: parse_stage_deadline(participant.stage_deadline), # Deadline for the current stage of the assignment
permission_granted: participant.permission_granted, # Topic of the assignment
deadlines: sample_deadlines,
review_grade: generate_review_grade(participant),
participant: participant # Boolean indicating if Publishing Rights is enabled
)
end
</pre>
* sample_deadlines: Provides mock deadline data for testing or placeholder UI use.
<pre>
# Generates a sample list of assignment deadlines relative to today's date.
# This is likely used for testing or placeholder UI data.
def self.sample_deadlines
today = Date.today
[
{ id: 1, date: (today - 15).to_s, description: "Submission deadline" },
{ id: 2, date: (today - 3).to_s, description: "Round 1 peer review" },
{ id: 2, date: (today - 3).to_s, description: "Round 2 peer review" },
{ id: 2, date: (today + 7).to_s, description: "Review deadline" },
]
end
</pre>
* generate_review_grade: Generates a simulated review score with randomized logic, used for demonstration or test purposes.
<pre>
# Generates a simulated review grade for a participant.
# This is likely placeholder logic for demonstration or testing purposes.
def self.generate_review_grade(participant)
# Randomly decide whether the participant has reviews or not
if [true, false].sample
reviews = rand(1..6)
base_score_per_review = 10
penalty_percent = [0, 10, 25, 50].sample
raw_score = reviews * base_score_per_review
final_score = (raw_score * (1 - penalty_percent / 100.0)).round

"Score: #{final_score}/100 \n" \
"Comment: #{reviews} reviews x #{base_score_per_review} pts/review x #{100 - penalty_percent}% = #{final_score} points \n" \
"Explanation penalty (-#{penalty_percent}%)"
else
"N/A"
end
end
</pre>

==== Routes.rb: ====
* Reused routes for student_tasks, including custom actions list and view to support UI rendering of task listings and detail views.
<pre>
resources :student_tasks do
collection do
get :list, action: :list
get :view
end
end
</pre>

==== Seeds.rb: ====
* Set up a sample student user (niki) for testing.
<pre>
# Create first student with specific name "niki"
student_user_ids << User.create!(
name: "niki",
email: "niki@example.com",
password: "password",
full_name: "Niki Jones",
institution_id: 1,
role_id: 5
).id
</pre>
* Created a predefined list of assignment names.
<pre>
# Generate Specific Assignments names
puts "Creating assignments with specific names"
assignment_names = [
"Program 1",
"Program 3",
"Program 4",
"Program 5",
"OSS Program 1",
"OSS Program 2",
"Program 6",
"Program 7"
]
</pre>
* Generated participants across all assignments for all students, with randomized stage data (current_stage, stage_deadline, topic) and team assignments to simulate realistic scenarios.

<pre>
puts "assigning participants to all students for all assignments"
participant_ids = []
# Array of possible stages
stages = ["Not started", "In progress", "Submitted", "Reviewed", "Finished"]
puts "Today is: #{Date.today + rand(1..10).days}"
student_user_ids.each do |student_id|
assignment_ids.each do |assignment_id|
team_id = team_ids.sample # randomly assign a team for the assignment
participant = Participant.create(
user_id: student_id,
stage_deadline: Date.today + rand(1..10).days,
topic: "Topic #{rand(1..5)}",
permission_granted: true,
current_stage: stages.sample,
assignment_id:,
team_id:
)
if participant.persisted?
participant_ids << participant.id
else
puts "Failed to create Participant: #{participant.errors.full_messages.join(', ')}"
end
end
end
</pre>

== Reimplementation of Frontend ==
The new UI redesign replicates the functionality of the original page, now leveraging TypeScript for type safety and React for dynamic rendering. This approach enhances the user experience by providing a more responsive and accessible interface, while adhering to modern design principles.

=== Data Fetching===
The frontend communicates with the backend in real time, retrieving assignment details, deadlines, and review statuses dynamically to provide up-to-date task information.

=== React Component Design ===
The new design breaks down the UI into reusable React components, such as Header, Task Timeline, and TaskItem, to handle specific parts of the interface. This modular approach enhances code readability, maintainability, and reusability, promoting best practices in React development.

=== Relevant File Details ===
==== StudentTaskDetail.tsx: ====
1. Purpose: Displays comprehensive task details with interactive progress visualization.

2. Key Features:

a. Fetches task-specific data using URL params (useParams)

b. Visual timeline with status indicators (completed/current/pending)

c. Responsive grid layout for metadata display

3. Code Snippet:
<pre>
...
import { useParams, Link, useLocation } from "react-router-dom";
const StudentTaskDetail: React.FC = () => {
const { id } = useParams<{ id: string }>();
// Get StudentDetails from Parent Component: StudentTasks.
const StudentDetailsData = location.state;

const taskDetails = MockedStudentTaskDetails;

return (
<div className={styles.container}>
{/* Add Heading */}
...
<div>
{/* Add Interative Clickable Links List */}
...
</div>
<div>
{/* Add Timeline + TimeStage */}
...
</div>
<div> Footer </div>
<Link to="/student_tasks" className="back-link">
...
</Link>
</div>
);
};

export default StudentTaskDetail;

</pre>

==== StudentTaskDetail.module.css ====
1. Purpose: Provides scoped styling for detail view components.

2. Code Snippet:
<pre>
/* StudentTaskDetail.module.css */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
display: grid;
gap: 25px;
}

.header {
text-align: left;
padding: 20px 0;
font-size: x-large;
/* border-bottom: 2px solid #eee; */
}

...
</pre>

==== StudentTasks.tsx: ====
1. Purpose: Main view for assignment list with navigation links.

2. Key Features:

a. Iterates through task data and renders individual cards for each task

b. Allows navigation to detailed task view via clickable links

c. Dynamically reflects current status or completion state

d. Supports responsive design for different screen sizes

3. Code Snippet:
* Fetches task data from the backend (/student_tasks/list)
<pre>
...
// State to hold tasks
const [tasks, setTasks] = useState<Task[]>([]);

// Fetch student tasks from the backend when the component mounts
useEffect(() => {
const fetchStudentTasks = async () => {
try {
const response = await axiosClient.get(`/student_tasks/list`);
setStudentTasksData(response.data);
} catch (error) {
console.error("Error fetching student tasks:", error);
}
};

fetchStudentTasks();
}, []);

// Parse and update tasks whenever studentTasksData changes
useEffect(() => {
setTasks(parseStudentTasks(studentTasksData));
}, [studentTasksData]);
...
</pre>

* Parses and structures raw task data into usable format
<pre>
/**
* Converts a raw list of student task data into a structured array of Task objects
*/
function parseStudentTasks(rawList: any[]): Task[] {
return rawList.map((item) => {
const participant = item.participant || {};
const course = item.course || {};
return {
id: participant.id,
assignment: item.assignment ?? "N/A",
course: course ?? "CSC 517", // Not present in data, defaulting
topic: participant.topic ?? "N/A",
currentStage: item.current_stage ?? participant.current_stage ?? "N/A",
reviewGrade: item.review_grade ?? "N/A",
badges: item.badges ?? false, // Adjust if you have badges logic elsewhere
stageDeadline: item.stage_deadline ?? participant.stage_deadline ?? "",
publishingRights: participant.permission_granted ?? false,
deadlines: item.deadlines, // Additional fields for StudentTaskDetails
};
});
}
</pre>

* Renders each task as a row with a clickable link
* Supports responsive UI and navigation with react-router
<pre>
{
accessorKey: "assignment",
header: "Assignment",
cell: (info: CellContext<Task, string>) => {
const id = info.row.original.id;
const matchedTask = tasks.find((task) => task.id === id);
return (
<Link to={`/student_task_detail/${id}`} state={{ task: matchedTask }}>
{info.getValue()}
</Link>
);
},
},
</pre>

==== App.tsx ====
1. Purpose: Manages navigation hierarchy and accessibility.

2. Key relative feature: Provides skip links and landmark regions between StudentTasks and StudentTaskDetail components.

3. Code Snippet:
<pre>
<Route path="/student_tasks" element={<StudentTasks />}>
<Route path=":id" element={<StudentTaskDetail />} />
</Route>
</pre>

== Additional Work ==
=== ToolTip.tsx ===

As part of the UI refinement, we introduced a common Tooltip component to provide consistent, contextual information across the application. This component was specifically integrated into the StudentTasks table, replacing hardcoded or inline tooltips.

By using this reusable Tooltip, we ensure:
* Consistent styling and behavior throughout the UI.
* Improved maintainability, allowing future updates in one place.
* Enhanced usability, giving students clear guidance on table headings and columns like review grade.

StudentTasks.tsx
<pre>
...
import ToolTip from "components/ToolTip";
...
cell: (info: CellContext<Task, Task["reviewGrade"]>) =>
info.getValue() === "N/A" ? (
"NA"
) : (
<ToolTip id="info.row.original" info={info.row.original.reviewGrade || ""} />
),
...
</pre>

Table.tsx
<pre>
...
import ToolTip from "components/ToolTip";
...
{comment && <ToolTip id="" info={comment} />}
...
</pre>

== Design Principles ==
In designing the Student Task View reimplementation, we adhere to key software design principles to ensure maintainability, scalability, and readability. The codebase follows the Single Responsibility Principle (SRP) by ensuring that each component and function has a well-defined purpose, reducing the likelihood of unintended changes. Separation of Concerns is maintained by structuring logic into modular components, making the system easier to debug and extend.

==== Single Responsibility Principle (SRP) ====
Each function and component in the frontend will focus on a specific aspect of task management, such as rendering assignment details, managing deadlines, or handling submission interactions.

The backend will separate concerns by structuring controllers and services to isolate business logic from request handling.

==== Don't Repeat Yourself (DRY) Principle ====
Common functionalities, such as fetching assignment details, checking deadlines, and managing user interactions, will be abstracted into reusable utility functions to reduce redundancy.

Shared logic between different views (e.g., task details and submission interactions) will be extracted into reusable React components and backend services.

==== Encapsulation & Modularity ====
In the frontend, state management will be handled efficiently using React hooks and context, preventing unnecessary re-renders and ensuring data consistency.

In the backend, controllers will delegate logic to service classes, limiting the exposure of business logic and maintaining a clear separation between data access and processing.

==== Responsive & Accessible Design ====
The UI will follow responsive design principles, ensuring that the Student Task View adapts to different screen sizes and devices.

== Test Plan ==
{| class="wikitable"
|+ Test Plan for Student Task View Reimplementation
! Test ID
! Test Case
! Description
! Test Steps
! Expected Results
! Priority
! Status
|-
| TC1
| Verify Task Details Display
| Verify that task details (assignment name, due date, current stage, review status, and badges) are displayed correctly.
| 1. Open task view. 2. Check if the assignment name, due date, current stage, review status, and badges are displayed.
| The task view should display the assignment name, due date, current stage, review status, and associated badges in a clear, readable format.
| High
| Passed
|-
| TC2
| Verify Dynamic Updates for Task Details
| Verify that task details update dynamically when changes occur.
| 1. Change task details in the backend. 2. Refresh task view.
| Task details should update automatically without manual refresh and display the latest data.
| High
| Passed
|-
| TC3
| Verify Task Interaction Buttons
| Verify that buttons for task actions (submit, revise, view feedback) are visible and functional.
| 1. Open task view. 2. Check visibility of buttons (submit, revise, feedback). 3. Click each button and observe the action.
| Buttons are visible, clickable, and trigger the correct action (e.g., submitting, requesting revision, viewing feedback).
| High
| Passed
|-
| TC4
| Verify Task View Updates After Task Interaction
| Verify that the task view updates after submitting or requesting a revision.
| 1. Submit a task. 2. Check if the task view updates to reflect the submission status.
| After interaction, task view updates appropriately (e.g., shows "submitted" status after submission).
| Medium
| Passed
|-
| TC5
| Verify Timeline Shows Task Due Dates
| Verify that the timeline displays task due dates correctly.
| 1. Open task timeline view. 2. Check that all task due dates are visually displayed on the timeline.
| The timeline should show the correct due dates for all tasks.
| High
| Passed
|-
| TC6
| Verify Dynamic Present Day Indicator on Timeline
| Verify that the timeline includes a dynamic indicator showing the present day and time.
| 1. Open task timeline view. 2. Check for a dynamic indicator showing the present day and time.
| A dynamic indicator should reflect the current day and time on the timeline.
| Medium
| Passed
|-
| TC7
| Verify Tasks Are Represented on the Timeline
| Verify that tasks are visually represented on the timeline according to their due dates.
| 1. Open task timeline view. 2. Check that tasks are placed according to their respective due dates on the timeline.
| Tasks are visually represented and placed on the timeline based on their respective due dates.
| High
| Passed
|-
| TC8
| Verify Task Stages Display Correctly
| Verify that the task stages (e.g., submission, review, feedback) are displayed correctly.
| 1. Open task view. 2. Check if the task stages (submission, review, feedback) are displayed.
| Task stages should be clearly displayed with appropriate labels (e.g., "Submission", "Review", "Feedback").
| High
| Passed
|-
| TC9
| Verify Current Stage Is Highlighted
| Verify that the current stage is visually highlighted.
| 1. Open task view. 2. Check if the current stage is visually highlighted.
| The current stage should be visually highlighted (e.g., different color or bold text).
| High
| Passed
|-
| TC10
| Verify Task Stages Are Navigable
| Verify that the task stages are navigable, allowing students to track progress.
| 1. Open task view. 2. Click on different stages to navigate through them.
| Students can navigate through stages and see details for each stage.
| Medium
| Passed
|}

== Relevant Links ==

===Pull Requests===

* Backend

* Frontend

===Repos===

*[https://github.com/Jing27540/reimplementation-back-end Backend Repo]

*[https://github.com/Jing27540/reimplementation-front-end Frontend Repo]

== Developer Guidance ==

=== Backend ===

==== Setup & Run (via Docker)====
Run the following commands from your project root to start the backend environment using Docker:
<pre>
docker-compose down # Stops and removes containers, networks, and volumes
docker-compose build --no-cache # Rebuilds images from scratch without cache
docker-compose up # Starts the app with fresh containers</pre>

==== Within the container ====
After starting the containers, access the Rails backend container and run the necessary setup commands:
<pre>
docker-compose exec web bash # Open a terminal session inside the backend container
</pre>
Once inside the container, run:
<pre>
bundle install # Installs necessary gems
rake db:migrate:reset # Drops, creates, and runs migrations from scratch
rake db:seed # Seeds initial test/development data
</pre>

=== Frontend ===

==== Frontend Setup & Run====
For setting up and running the frontend, use the following commands:
<pre>
npm install # Installs necessary Node.js packages
npm start # Starts the frontend application on your local server
</pre>

== Future Scope ==

With the Student Task(Details) View now redesigned—integrating backend models like Assignment, Participant, and Team into a responsive React UI—there are several impactful directions to further enhance Expertiza:

==== Dedicated StudentTask Abstraction ====

Although a StudentTask model exists in the codebase, it currently lacks a backing database table. Creating a dedicated StudentTask table would centralize key data—such as status, deadlines, progress, and feedback—for each student-task instance. This enhancement would:
* Simplify frontend API consumption
* Improve task-level granularity
* Enable easier audit logging and analytics tracking per student-task instance

==== AI-Driven Smart Feedback Integration ====

Leverage NLP models to provide students with automated writing feedback, peer review summaries, or rubric suggestions. This would be especially useful after assignment submission, augmenting instructor or peer feedback.

==== Customizable Task Workflow Engine ====

Convert the current static stage indicators into a flexible workflow engine. Instructors could define custom task flows like “Draft → Peer Review → Instructor Review → Publish.” Key benefits include:
* Greater flexibility across disciplines
* Reusability for assignments with unique workflows
* Dynamic visual rendering of new workflows in the timeline view

== Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==
* Chinmay Nayak <cnayak@ncsu.edu>
* Joannes Koomson <jokoomso@ncsu.edu>
* Jing Huang <jhuang42@ncsu.edu>

File:FinalUI1.PNG

2025-04-22T05:20:24Z

Cnayak: final ui of final project.

== Summary ==
final ui of final project.

File:Capture.PNG

2025-04-22T05:18:36Z

Cnayak: Cnayak uploaded a new version of File:Capture.PNG

CSC/ECE 517 Spring 2025 - E2539 Reimplement Student Task View (Frontend + Backend)

2025-04-22T00:24:11Z

Cnayak: /* Additional Wrok */

== About Expertiza ==
Expertiza is a robust, open-source web platform designed to empower educational environments that emphasize project-based learning. It streamlines collaborative activities—such as peer reviews, surveys, and team assignments—into an engaging, interactive experience that supports both teaching and learning.

'''For Instructors/mentors:'''
Expertiza offers a comprehensive suite of tools to manage assignments, provide timely and constructive feedback, and track performance metrics. This enables educators to monitor student progress effectively and ensure optimal learning outcomes.

'''For Students:'''
The platform is designed with learner engagement at its core. It allows students to actively participate in tasks, collaborate seamlessly with peers, and evaluate each other’s work. This approach not only promotes academic growth but also enhances critical thinking, problem-solving, and teamwork skills.

Expertiza’s flexible architecture makes it ideal for a wide range of educational scenarios—from individual assignments to complex group projects and dynamic peer-review processes—ensuring an enriched, adaptive learning environment for all users.

== Introduction ==
The E2539: Reimplement Student Task View project is focused on improving the Student Task View in the Expertiza application. The current interface is static, lacks responsiveness, and uses mocked data, limiting its effectiveness for real-world use.

The project’s primary goal is to redesign this view using React.js and TypeScript on the frontend and Ruby on Rails on the backend. This new version will provide a modern, interactive experience where students can efficiently manage assignments, track progress, and access feedback in real-time.

==== Tech Stack:====

* Frontend: React.js, TypeScript
* Backend: Ruby on Rails (API)
* Database: MySQL

==== Key Improvements: ====

* Replace mocked data with live backend integration
* Create a responsive and accessible task list view
* Design and implement a detailed Student Task Details page
* Add a visual timeline for deadlines
* Improve usability through tooltips and modular components

==✅ Final UI Displays ==
=== Login Account ===
* Username: niki
* Password: password
=== Student Tasks Screen ===
 
[[File:StudentTasks View Edited.jpg |1000px|center]]

This screen presents a table view of all tasks assigned to the current student. Each row summarizes an individual task, including assignment name, current stage, and due dates. It provides a quick overview of progress across multiple assignments, with clickable links that navigate to the detailed task view (StudentTaskDetail). The layout is clean and responsive, allowing students to easily track their workload at a glance.

=== Student Task Detail Screen ===
 
[[File:Final STD UI.jpg |1000px|center]]

 
This screen provides an in-depth view of a specific task selected from the task table. It includes detailed metadata such as assignment name, team, topic, and due dates, displayed in a responsive grid. A visual timeline tracks the student’s progress across stages like submission and review, using intuitive status indicators. This view helps students clearly understand their responsibilities and upcoming deadlines for each assignment.

== Problem Statement ==

The previous Student Task View within the Expertiza application provides essential assignment details, deadlines, and progress tracking but falls short in delivering a responsive, user-friendly experience. The previous interface's limitations hinder students from efficiently managing their tasks, submitting assignments, and accessing feedback.

This project aims to reimplement the Student Task View using React.js and TypeScript for the frontend. The goal is to transform the current view into a modern, interactive, and accessible platform that offers real-time updates and streamlined task management.

 Key challenges to address include: 

*'''Backend Integration:''' Rebuild and connect the backend to support newly introduced functionalities, ensuring smooth data flow, accurate task state synchronization, and real-time responsiveness across the interface.

*'''Consisstent UI with Tooltips:''' Enhance the StudentTasks table by incorporating a reusable Tooltip component on key columns (e.g., Review Grade), providing contextual guidance without overwhelming the interface.

*'''Detailed Task View:''' Design and implement a dedicated Task Details screen that clearly displays essential information such as assignment name, due date, current stage, review status, and earned badges.

*'''Interactive Task Management:''' Introduce interactive elements—including submission actions, revision request buttons, and feedback viewers—to make task progression intuitive and user-friendly.

*'''Dynamic Timeline Visualization:''' Create a visual timeline that outlines all relevant deadlines, highlights the current date and time, and gives students an at-a-glance understanding of their progress and upcoming tasks.

By implementing these improvements, the project aims to significantly elevate the student experience, promote greater engagement, and enable a more efficient, intuitive workflow for managing academic assignments within Expertiza.

== User Stories ==
=== Tasks Table and Navigation ===

 As a student,

I want to view a list of all my assigned tasks and navigate to detailed information by clicking on a task,

So that I can quickly find and manage tasks that need attention.

 Acceptance Criteria:

* The Student Task screen displays a table listing all assigned tasks.
* Each row includes key summary info like assignment name, topic, and status.
* Clicking on the assignment name cell navigates to the task’s detail view.

=== Task Details Display===

As a student,

I want to see detailed information about a specific task (e.g., assignment name, due date, current stage, review status, and badges),

So that I can easily understand the progress and requirements for each task.

Acceptance Criteria:

* The task view displays the assignment name, due date, current stage, review status, and any associated badges.
* Information is presented in a clear and easily readable format.
* All task details update dynamically when changes occur.

=== Task Interaction===

As a student,

I want to interact with my tasks by submitting assignments, requesting revisions, and viewing feedback,

So that I can efficiently manage my assignments and improve my work.

Acceptance Criteria:

* Buttons for managing team, submitting assignments, requesting revisions, and viewing feedback are visible and functional.
* Each button triggers the appropriate action (e.g., submission confirmation, revision request, viewing feedback).
* After submitting or requesting a revision, the task view updates accordingly.

=== View Timeline ===

As a student,

I want to see a visual representation of all task due dates in a timeline view,

So that I can easily track important deadlines and manage my time effectively.

Acceptance Criteria:
* A visual timeline shows the due dates of all tasks.
* The timeline includes a dynamic indicator showing the present day and time.
* Tasks are visually represented in the timeline according to their respective due dates.

=== Task Stage Navigation ===

As a student,

I want to view the different stages of a task,

So that I can track my progress and see what steps are still pending.

Acceptance Criteria:
* The task view shows a visual representation of the different stages of the task (e.g., submission, review, feedback).
* Each stage is clearly labeled and the current stage is highlighted.
* The stages are navigable, allowing students to see what is coming next or what actions are needed.

== Design ==
=== Student Task Overview Design Diagram ===
 

[[File:ST Design Overview.jpg |1000px|center]]

 

This design diagram outlines the key components involved in the reimplementation of the Student Task View within the Expertiza application. The focus is on creating a responsive, modern, and interactive experience for students to manage their assignments effectively. Below is an overview of the system architecture:

==== Full Stack Overview: ====
1. Frontend Development

The Student Task View serves as the central interface for students to interact with their tasks. It provides:
* Displays task details, including assignment name, due date, current stage, review status, and badges.
* Includes interactive elements for submitting assignments, requesting revisions, and viewing feedback.
* Features a visual timeline for task due dates with a dynamic indicator for the current date and time.
* Provides task stage navigation to track progress.

2. Backend Development

* Manages the task data, user interactions, and real-time updates.
* Provides RESTful APIs that handle task-related queries and updates.
* Handles user authentication and ensures the task data is accessible and up-to-date.

3. MySQL Database System

* Stores task details, user data, and timelines.
* Ensures data persistence and efficient querying for task-related information.

==== Component Integration Flow: ====
* Navigation Initiation:
** User clicks the “Assignments” tab in the navigation bar.
** 2. React Router updates the URL to /student_tasks.
** 3. StudentTasks component loads and displays the list of assignments.
** 4. User clicks on a specific assignment name from the table.
** 5. Router updates the URL to /student_tasks/:id, triggering navigation to the StudentTaskDetails view.

* Data Loading & Component Communication
<pre>
sequenceDiagram
participant StudentTasks
participant API
participant Database
participant DOM

StudentTasks->>API: GET /tasks
API->>Database: Query task list
Database-->>API: Return task data
API-->>StudentTasks: JSON response
StudentTasks->>DOM: Render timeline & metadata
</pre>

=== UML Diagram for Student Task Classes ===
 

[[File:STD ClassDiagram.jpg |800px|center]]

 
This Classes Relationship is a summary of the previous team setup. It involves several models that manage the relationships between students, assignments, and teams. Each Institution has many Users, where users can be students or instructors. A User (student) can have multiple Participants, which represent the student’s involvement in various Assignments. Each Assignment belongs to a Course and can have many Participants assigned to it. A Team is composed of multiple TeamsUser records, with each TeamsUser linking a User (student) to a specific team for an assignment. The Participant model ties the student to a Team for an assignment, indicating that the student is part of that team. There is no dedicated StudentTask table; instead, the Assignment, Participant, and Team models handle the relationships between students, their tasks, and the teams they are part of.

=== Student Task UI Design Diagram ===
 

[[File:StduentTaskView v2.jpg |800px|center]]

 

The Student Task UI diagram visualizes how students interact with and manage their assignments within the Expertiza application. The diagram emphasizes the layout and functionalities available to students, focusing on clarity and usability. Here’s an explanation of each component:

1. Task Details Section:
* Displays essential information about a task, such as:
* Assignment Name: Clearly presented as the title of the task.
* Due Date: Shows when the task is due, helping students track deadlines.
* Current Stage: Displays the student’s current position in the task workflow (e.g., Submission, Review, Feedback).
* Review Status: Indicates whether the task has been reviewed or is pending.
* Badges: Any relevant achievement or status badges that show progress, completion, or special recognition.
2. Task Interaction Buttons:
* Submit Assignment: A button that allows students to submit their work.
* Request Revision: Students can request revisions for assignments that are pending review or feedback.
* View Feedback: A button to view feedback from reviewers, which helps students improve their work.
3. Timeline Section:
* Visual representation of all the task deadlines.
* Includes a dynamic indicator showing the present day and time, helping students track their current position relative to upcoming tasks.
* Each task’s due date is visually represented in a timeline, making it easier to manage multiple tasks.
4. Task Stage Navigation:
* A step-by-step visual representation of the task stages (e.g., Submission, Review, Feedback).
* Each stage is clearly labeled, with the current stage highlighted.
* Students can navigate between stages to see their progress and identify which actions are needed next.

== Improved Implementation of Backend ==
In the most recent version of the backend, the StudentTask Controller was created by another team. Our role was to design an improvement plan for this controller, focusing on enhancing functionality, permissions, task retrieval, and testing processes. The controller follows RESTful principles and integrates seamlessly with the React frontend.

=== Action Permissions ===
The action_allowed? method will ensure that only authorized users, such as students and specific roles, can interact with student tasks. It will authenticate the user, verify their role, and ensure they have the necessary permissions to access or modify student task data. Unauthorized access will be blocked with an appropriate error message.

1. Purpose: Ensure secure access to task data through role-based authorization.

2. Key features:
* Blocks non-student users from write operations
* Verifies task ownership before showing details
* Complies with FERPA data privacy requirements
<pre>
class Api::V1::StudentTasksController < ApplicationController
before_action :authenticate_user!
before_action :authorize_student!, except: [:list]

private

def authorize_student!
return if current_user.student? && owns_task?
render json: { error: "Access denied" }, status: :forbidden
end

def owns_task?
@student_task.participant.user == current_user
end
end
</pre>

=== Task Retrieval ===

List Action: This action will return all tasks assigned to the currently logged-in student, organized in a structured JSON format. It ensures students can view their tasks clearly and efficiently.
* Method: GET [Populate task list view]
<pre>/api/v1/student_tasks/list</pre>

=== Comprehensive Testing with RSwag ===

{| class="wikitable"
! Test Case
! Description / Input
! Expected Outcome
|-
| Student accesses their own task
| Authenticated student requests their assigned task
| 200 OK with task details
|-
| Student not participating in any assignment
| Authenticated student with no assignment attempts to access a task
| 404 Not Found
|}

Tests will be created for each API endpoint, covering:

* Successful Task Retrieval: Verifying that valid requests return the expected task data.

* Error Scenarios: Ensuring that tasks are not retrieved if the task ID is invalid, if the user is unauthorized, or if the task does not exist.

* Edge Cases: Handling scenarios like empty task lists, non-existent participant IDs, or invalid authentication tokens.

These tests will be incorporated into the Continuous Integration pipeline to maintain robust error handling and prevent regressions.

=== Enhancement: Relevant File Details ===
==== Student_Task.rb: ====
* Added multiple new attributes via attr_accessor (course, review_grade, stage_deadline.) to enrich task data.
<pre>
attr_accessor :assignment, :course, :current_stage, :participant, :stage_deadline, :topic, :permission_granted, :deadlines, :review_grade
</pre>
* create_from_participant: Builds a StudentTask with relevant metadata extracted from the Participant.
<pre>
# create a new StudentTask instance from a Participant object.
def self.create_from_participant(participant)
new(
assignment: participant.assignment.name, # Name of the assignment associated with the student task
course: participant.assignment.course.name,
topic: participant.topic, # Current stage of the assignment process
current_stage: participant.current_stage, # Participant object
stage_deadline: parse_stage_deadline(participant.stage_deadline), # Deadline for the current stage of the assignment
permission_granted: participant.permission_granted, # Topic of the assignment
deadlines: sample_deadlines,
review_grade: generate_review_grade(participant),
participant: participant # Boolean indicating if Publishing Rights is enabled
)
end
</pre>
* sample_deadlines: Provides mock deadline data for testing or placeholder UI use.
<pre>
# Generates a sample list of assignment deadlines relative to today's date.
# This is likely used for testing or placeholder UI data.
def self.sample_deadlines
today = Date.today
[
{ id: 1, date: (today - 15).to_s, description: "Submission deadline" },
{ id: 2, date: (today - 3).to_s, description: "Round 1 peer review" },
{ id: 2, date: (today - 3).to_s, description: "Round 2 peer review" },
{ id: 2, date: (today + 7).to_s, description: "Review deadline" },
]
end
</pre>
* generate_review_grade: Generates a simulated review score with randomized logic, used for demonstration or test purposes.
<pre>
# Generates a simulated review grade for a participant.
# This is likely placeholder logic for demonstration or testing purposes.
def self.generate_review_grade(participant)
# Randomly decide whether the participant has reviews or not
if [true, false].sample
reviews = rand(1..6)
base_score_per_review = 10
penalty_percent = [0, 10, 25, 50].sample
raw_score = reviews * base_score_per_review
final_score = (raw_score * (1 - penalty_percent / 100.0)).round

"Score: #{final_score}/100 \n" \
"Comment: #{reviews} reviews x #{base_score_per_review} pts/review x #{100 - penalty_percent}% = #{final_score} points \n" \
"Explanation penalty (-#{penalty_percent}%)"
else
"N/A"
end
end
</pre>

==== Routes.rb: ====
* Reused routes for student_tasks, including custom actions list and view to support UI rendering of task listings and detail views.
<pre>
resources :student_tasks do
collection do
get :list, action: :list
get :view
end
end
</pre>

==== Seeds.rb: ====
* Set up a sample student user (niki) for testing.
<pre>
# Create first student with specific name "niki"
student_user_ids << User.create!(
name: "niki",
email: "niki@example.com",
password: "password",
full_name: "Niki Jones",
institution_id: 1,
role_id: 5
).id
</pre>
* Created a predefined list of assignment names.
<pre>
# Generate Specific Assignments names
puts "Creating assignments with specific names"
assignment_names = [
"Program 1",
"Program 3",
"Program 4",
"Program 5",
"OSS Program 1",
"OSS Program 2",
"Program 6",
"Program 7"
]
</pre>
* Generated participants across all assignments for all students, with randomized stage data (current_stage, stage_deadline, topic) and team assignments to simulate realistic scenarios.

<pre>
puts "assigning participants to all students for all assignments"
participant_ids = []
# Array of possible stages
stages = ["Not started", "In progress", "Submitted", "Reviewed", "Finished"]
puts "Today is: #{Date.today + rand(1..10).days}"
student_user_ids.each do |student_id|
assignment_ids.each do |assignment_id|
team_id = team_ids.sample # randomly assign a team for the assignment
participant = Participant.create(
user_id: student_id,
stage_deadline: Date.today + rand(1..10).days,
topic: "Topic #{rand(1..5)}",
permission_granted: true,
current_stage: stages.sample,
assignment_id:,
team_id:
)
if participant.persisted?
participant_ids << participant.id
else
puts "Failed to create Participant: #{participant.errors.full_messages.join(', ')}"
end
end
end
</pre>

== Reimplementation of Frontend ==
The new UI redesign replicates the functionality of the original page, now leveraging TypeScript for type safety and React for dynamic rendering. This approach enhances the user experience by providing a more responsive and accessible interface, while adhering to modern design principles.

=== Data Fetching===
The frontend communicates with the backend in real time, retrieving assignment details, deadlines, and review statuses dynamically to provide up-to-date task information.

=== React Component Design ===
The new design breaks down the UI into reusable React components, such as Header, Task Timeline, and TaskItem, to handle specific parts of the interface. This modular approach enhances code readability, maintainability, and reusability, promoting best practices in React development.

=== Relevant File Details ===
==== StudentTaskDetail.tsx: ====
1. Purpose: Displays comprehensive task details with interactive progress visualization.

2. Key Features:

a. Fetches task-specific data using URL params (useParams)

b. Visual timeline with status indicators (completed/current/pending)

c. Responsive grid layout for metadata display

3. Code Snippet:
<pre>
...
import { useParams, Link, useLocation } from "react-router-dom";
const StudentTaskDetail: React.FC = () => {
const { id } = useParams<{ id: string }>();
// Get StudentDetails from Parent Component: StudentTasks.
const StudentDetailsData = location.state;

const taskDetails = MockedStudentTaskDetails;

return (
<div className={styles.container}>
{/* Add Heading */}
...
<div>
{/* Add Interative Clickable Links List */}
...
</div>
<div>
{/* Add Timeline + TimeStage */}
...
</div>
<div> Footer </div>
<Link to="/student_tasks" className="back-link">
...
</Link>
</div>
);
};

export default StudentTaskDetail;

</pre>

==== StudentTaskDetail.module.css ====
1. Purpose: Provides scoped styling for detail view components.

2. Code Snippet:
<pre>
/* StudentTaskDetail.module.css */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
display: grid;
gap: 25px;
}

.header {
text-align: left;
padding: 20px 0;
font-size: x-large;
/* border-bottom: 2px solid #eee; */
}

...
</pre>

==== StudentTasks.tsx: ====
1. Purpose: Main view for assignment list with navigation links.

2. Key Features:

a. Iterates through task data and renders individual cards for each task

b. Allows navigation to detailed task view via clickable links

c. Dynamically reflects current status or completion state

d. Supports responsive design for different screen sizes

3. Code Snippet:
* Fetches task data from the backend (/student_tasks/list)
<pre>
...
// State to hold tasks
const [tasks, setTasks] = useState<Task[]>([]);

// Fetch student tasks from the backend when the component mounts
useEffect(() => {
const fetchStudentTasks = async () => {
try {
const response = await axiosClient.get(`/student_tasks/list`);
setStudentTasksData(response.data);
} catch (error) {
console.error("Error fetching student tasks:", error);
}
};

fetchStudentTasks();
}, []);

// Parse and update tasks whenever studentTasksData changes
useEffect(() => {
setTasks(parseStudentTasks(studentTasksData));
}, [studentTasksData]);
...
</pre>

* Parses and structures raw task data into usable format
<pre>
/**
* Converts a raw list of student task data into a structured array of Task objects
*/
function parseStudentTasks(rawList: any[]): Task[] {
return rawList.map((item) => {
const participant = item.participant || {};
const course = item.course || {};
return {
id: participant.id,
assignment: item.assignment ?? "N/A",
course: course ?? "CSC 517", // Not present in data, defaulting
topic: participant.topic ?? "N/A",
currentStage: item.current_stage ?? participant.current_stage ?? "N/A",
reviewGrade: item.review_grade ?? "N/A",
badges: item.badges ?? false, // Adjust if you have badges logic elsewhere
stageDeadline: item.stage_deadline ?? participant.stage_deadline ?? "",
publishingRights: participant.permission_granted ?? false,
deadlines: item.deadlines, // Additional fields for StudentTaskDetails
};
});
}
</pre>

* Renders each task as a row with a clickable link
* Supports responsive UI and navigation with react-router
<pre>
{
accessorKey: "assignment",
header: "Assignment",
cell: (info: CellContext<Task, string>) => {
const id = info.row.original.id;
const matchedTask = tasks.find((task) => task.id === id);
return (
<Link to={`/student_task_detail/${id}`} state={{ task: matchedTask }}>
{info.getValue()}
</Link>
);
},
},
</pre>

==== App.tsx ====
1. Purpose: Manages navigation hierarchy and accessibility.

2. Key relative feature: Provides skip links and landmark regions between StudentTasks and StudentTaskDetail components.

3. Code Snippet:
<pre>
<Route path="/student_tasks" element={<StudentTasks />}>
<Route path=":id" element={<StudentTaskDetail />} />
</Route>
</pre>

== Additional Work ==
=== ToolTip.tsx ===

As part of the UI refinement, we introduced a common Tooltip component to provide consistent, contextual information across the application. This component was specifically integrated into the StudentTasks table, replacing hardcoded or inline tooltips.

By using this reusable Tooltip, we ensure:
* Consistent styling and behavior throughout the UI.
* Improved maintainability, allowing future updates in one place.
* Enhanced usability, giving students clear guidance on table headings and columns like review grade.

StudentTasks.tsx
<pre>
...
import ToolTip from "components/ToolTip";
...
cell: (info: CellContext<Task, Task["reviewGrade"]>) =>
info.getValue() === "N/A" ? (
"NA"
) : (
<ToolTip id="info.row.original" info={info.row.original.reviewGrade || ""} />
),
...
</pre>

Table.tsx
<pre>
...
import ToolTip from "components/ToolTip";
...
{comment && <ToolTip id="" info={comment} />}
...
</pre>

== Design Principles ==
In designing the Student Task View reimplementation, we adhere to key software design principles to ensure maintainability, scalability, and readability. The codebase follows the Single Responsibility Principle (SRP) by ensuring that each component and function has a well-defined purpose, reducing the likelihood of unintended changes. Separation of Concerns is maintained by structuring logic into modular components, making the system easier to debug and extend.

==== Single Responsibility Principle (SRP) ====
Each function and component in the frontend will focus on a specific aspect of task management, such as rendering assignment details, managing deadlines, or handling submission interactions.

The backend will separate concerns by structuring controllers and services to isolate business logic from request handling.

==== Don't Repeat Yourself (DRY) Principle ====
Common functionalities, such as fetching assignment details, checking deadlines, and managing user interactions, will be abstracted into reusable utility functions to reduce redundancy.

Shared logic between different views (e.g., task details and submission interactions) will be extracted into reusable React components and backend services.

==== Encapsulation & Modularity ====
In the frontend, state management will be handled efficiently using React hooks and context, preventing unnecessary re-renders and ensuring data consistency.

In the backend, controllers will delegate logic to service classes, limiting the exposure of business logic and maintaining a clear separation between data access and processing.

==== Responsive & Accessible Design ====
The UI will follow responsive design principles, ensuring that the Student Task View adapts to different screen sizes and devices.

== Test Plan ==
{| class="wikitable"
|+ Test Plan for Student Task View Reimplementation
! Test ID
! Test Case
! Description
! Test Steps
! Expected Results
! Priority
! Status
|-
| TC1
| Verify Task Details Display
| Verify that task details (assignment name, due date, current stage, review status, and badges) are displayed correctly.
| 1. Open task view. 2. Check if the assignment name, due date, current stage, review status, and badges are displayed.
| The task view should display the assignment name, due date, current stage, review status, and associated badges in a clear, readable format.
| High
| Passed
|-
| TC2
| Verify Dynamic Updates for Task Details
| Verify that task details update dynamically when changes occur.
| 1. Change task details in the backend. 2. Refresh task view.
| Task details should update automatically without manual refresh and display the latest data.
| High
| Passed
|-
| TC3
| Verify Task Interaction Buttons
| Verify that buttons for task actions (submit, revise, view feedback) are visible and functional.
| 1. Open task view. 2. Check visibility of buttons (submit, revise, feedback). 3. Click each button and observe the action.
| Buttons are visible, clickable, and trigger the correct action (e.g., submitting, requesting revision, viewing feedback).
| High
| Passed
|-
| TC4
| Verify Task View Updates After Task Interaction
| Verify that the task view updates after submitting or requesting a revision.
| 1. Submit a task. 2. Check if the task view updates to reflect the submission status.
| After interaction, task view updates appropriately (e.g., shows "submitted" status after submission).
| Medium
| Passed
|-
| TC5
| Verify Timeline Shows Task Due Dates
| Verify that the timeline displays task due dates correctly.
| 1. Open task timeline view. 2. Check that all task due dates are visually displayed on the timeline.
| The timeline should show the correct due dates for all tasks.
| High
| Passed
|-
| TC6
| Verify Dynamic Present Day Indicator on Timeline
| Verify that the timeline includes a dynamic indicator showing the present day and time.
| 1. Open task timeline view. 2. Check for a dynamic indicator showing the present day and time.
| A dynamic indicator should reflect the current day and time on the timeline.
| Medium
| Passed
|-
| TC7
| Verify Tasks Are Represented on the Timeline
| Verify that tasks are visually represented on the timeline according to their due dates.
| 1. Open task timeline view. 2. Check that tasks are placed according to their respective due dates on the timeline.
| Tasks are visually represented and placed on the timeline based on their respective due dates.
| High
| Passed
|-
| TC8
| Verify Task Stages Display Correctly
| Verify that the task stages (e.g., submission, review, feedback) are displayed correctly.
| 1. Open task view. 2. Check if the task stages (submission, review, feedback) are displayed.
| Task stages should be clearly displayed with appropriate labels (e.g., "Submission", "Review", "Feedback").
| High
| Passed
|-
| TC9
| Verify Current Stage Is Highlighted
| Verify that the current stage is visually highlighted.
| 1. Open task view. 2. Check if the current stage is visually highlighted.
| The current stage should be visually highlighted (e.g., different color or bold text).
| High
| Passed
|-
| TC10
| Verify Task Stages Are Navigable
| Verify that the task stages are navigable, allowing students to track progress.
| 1. Open task view. 2. Click on different stages to navigate through them.
| Students can navigate through stages and see details for each stage.
| Medium
| Passed
|}

== Relevant Links ==

===Pull Requests===

* Backend

* Frontend

===Repos===

*[https://github.com/Jing27540/reimplementation-back-end Backend Repo]

*[https://github.com/Jing27540/reimplementation-front-end Frontend Repo]

== Developer Guidance ==

=== Backend ===

==== Setup & Run (via Docker)====
Run the following commands from your project root to start the backend environment using Docker:
<pre>
docker-compose down # Stops and removes containers, networks, and volumes
docker-compose build --no-cache # Rebuilds images from scratch without cache
docker-compose up # Starts the app with fresh containers</pre>

==== Within the container ====
After starting the containers, access the Rails backend container and run the necessary setup commands:
<pre>
docker-compose exec web bash # Open a terminal session inside the backend container
</pre>
Once inside the container, run:
<pre>
bundle install # Installs necessary gems
rake db:migrate:reset # Drops, creates, and runs migrations from scratch
rake db:seed # Seeds initial test/development data
</pre>

=== Frontend ===

==== Frontend Setup & Run====
For setting up and running the frontend, use the following commands:
<pre>
npm install # Installs necessary Node.js packages
npm start # Starts the frontend application on your local server
</pre>

== Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Members ==
* Chinmay Nayak <cnayak@ncsu.edu>
* Joannes Koomson <jokoomso@ncsu.edu>
* Jing Huang <jhuang42@ncsu.edu>

File:Image-studenttask.png

2025-04-20T01:03:17Z

Cnayak:

CSC/ECE 517 Spring 2025 - E2539 Reimplement Student Task View (Frontend + Backend)

2025-04-03T23:37:36Z

Cnayak:

CSC/ECE 517 Spring 2025 - E2539 Reimplement Student Task View (Frontend + Backend)

2025-04-03T23:34:50Z

Cnayak:

CSC/ECE 517 Spring 2025 - E2539 Reimplement Student Task View (Frontend + Backend)

2025-04-03T23:32:06Z

Cnayak: /* Design Principles */

CSC/ECE 517 Spring 2025 - E2539 Reimplement Student Task View (Frontend + Backend)

2025-04-03T23:12:16Z

Cnayak: /* Introduction */

CSC/ECE 517 Spring 2025 - E2522. Enhancing UI Consistency in Expertiza 1

2025-03-23T05:07:38Z

Cnayak: Adding Future Scope

== Introduction ==

The Expertiza platform is an open-source tool used for managing peer reviews, team collaborations, and project-based learning. In this project, our goal was to enhance the UI consistency and usability by refining key tables and UI components to meet modern design standards. The primary focus was on the Student Task Table and Course Assignment Table, aligning them with best practices in usability and design.

== Expertiza Platform Overview and Prior Work ==

=== Expertiza Overview ===

Expertiza is a widely used platform for conducting peer reviews and managing course assignments. It supports various task types, including surveys, evaluations, and team collaborations, helping instructors and students achieve better learning outcomes.

=== Previous PR Highlights ===

Our work builds upon prior UI improvements made in the following pull request

 E2446: Implement Front End for Student Task List #52]

* Introduced an initial UI for managing and displaying student tasks.

* Reference [https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2024_-_E2446_Implement_Front_End_for_Student_Task_List E2446: Implement Front End for Student Task List]

 

[[File:E2522 StudentTask(PR52).jpeg |700px|center]]

 

 [https://github.com/expertiza/reimplementation-front-end/pull/76 E2491. View Assignments in Courses View #76]

* Focused on refining the UI for course assignments.

* Reference: E2491: View Assignments in Courses View

 

[[File:E2522 CourseAssignment(PR76).jpeg |700px|center]]

 

== Problem Statement ==

Prior UI implementations for the Student Task Table and Course Assignment Table lacked consistency and usability, making it difficult to navigate and use effectively. The goal of this project is to:

Key Objetives

* Standardizing table components for improved reusability.

* Enhancing text formatting, pagination, and search functionality.

* Streamlining the UI by removing unnecessary elements and improving clarity.

== Technologies ==

a. Frontend: React, TypeScript

b. Student Task Component Structure:

* Main Table Component: XXXX
* Task Row Component: XXX
* Action Buttons: Each action button will trigger a specific function for managing student tasks.

c. Course Assignment Component Structure:

* Main Table Component: XXXX
* Task Row Component: XXXX
* Action Buttons: Each action button will trigger a specific function for managing student tasks.

d. State Management: React’s useState for managing mocked JSON data

e. Styling: CSS (for responsive and accessible design)

== Design Principles ==

*The UI refinements adhere to the following design principles:

*Consistency: Maintain uniform typography, formatting, and spacing across all tables.

*Readability: Use a structured layout with clear distinctions between elements.

*Simplicity: Remove unnecessary elements to reduce visual clutter.

*Reusability Standardize table components to avoid redundancy.

== UI Components and Updates ==

=== Student Task Table ===

a. Originally Planned View:

The Student Task table was initially intended to present tasks associated with each student, featuring columns for Assignment, Course, Topic, Current Stage, Review Grade, Stage Deadline and Publishing rights. However, due to UI inconsistencies, this layout was revised to adhere to better formatting and design principles.

b. Updated View:

* Improved Formatting: Enhanced text formatting and alignment to ensure consistency.
* Uniform Styling: Applied uniform styling to table rows for better readability.
* Enhanced Clarity: Improved date formatting and clearer row spacing.

 

[[File:E2522 CourseAssignment.jpg |700px|center]]

 

=== Course Assignment Table ===

a. Originally Planned View:

The Course Assignment table was designed to showcase assignments within a course, with columns for assignment Name, Creation Date, Updated Date and Actions. Similar to the Student Task table, it was adjusted to improve clarity and remove unnecessary elements.

b. Updated View:

* Refined Structure: Removed redundant columns and ensured concise information display.
* Improved Date Formatting: Dates are now displayed in a standardized format for better understanding.
* Simplified Actions: Actions like editing and deleting assignments are now more clearly defined.

 

[[File:E2522 StudentTask.jpg |700px|center]]

 

== Implementation Details ==

This pull request focuses on reimplementing and addressing several UI improvements and bug fixes across two key areas: PR-76 (Course Assignment Table) and PR-52 (Student Task Table). The changes aim to enhance the UI by following design guidelines, improving table functionality, and ensuring consistency across the application. Key adjustments include proper formatting, the removal of unnecessary elements, and layout fixes after merging.

=== PR-52: Student Task Table ===

*Standardized Table Component: Replaced the custom table compnent with a common one for consistency across pages.
 
[[File:E2522 StudentTask CommonTable.jpg |500px|center]]
 
*Text Formatting: Table headers and content now adhere to consistent design guidelines.
 
[[File:E2522 StudentTask TextFormat.jpg |600px|center]]
 
*Tooltip Integration: Added info icons with tooltips for additional context where necessary.
 
[[File:E2522 StudentTask InfoIcon.jpg |400px|center]]
 
*Date Formatting: Improved readability of dates with clear formatting.
 
[[File:E2522 StudentTask DateFormat.jpg |200px|center]]
 

=== PR-76: Course Assignment Table ===

*Global Search Bar: Disabled to simplify UI.
 

[[File:E2522 CourseAssignment DisableSearchBar.jpg |400px|center]]

 
*Date Formatting: Standardized date formatting across the table.
 

[[File:E2522 StudentAssignment DateFormat.jpg |300px|center]]

 

*Pagination Updates: Enhanced pagination for better navigation when listing multiple assignments.
 

[[File:E2522 CourseAssignment Pagination.jpg |700px|center]]

 
*Column Removals: Removed unnecessary columns that were causing clutter.
 

[[File:E2522 StudentAssignment Cols.jpg |600px|center]]

 

== Code Snippets ==

=== Key Component Implementations ===

Student Task Page: 'pages/StudentTasks/StudentTasks.tsx'

* Import Common Table Component and Formatters

<syntaxhighlight>
import Table from "components/Table/Table";
import { formatDate, capitalizeFirstWord } from "utils/dataFormatter";
</syntaxhighlight>

* Render Common Table Componnet

<syntaxhighlight>
<div className={styles.mainContent}>
<div className={styles.tableWrapper}>
<Table
data={filteredAssignments}
columns={filteredColumns}
showGlobalFilter={false}
showColumnFilter={false}
showPagination={false}
tableSize={{ span: 12, offset: 0 }}
headingComments={{
"Stage deadline": "You can change 'Preferred Time Zone' in 'Profile' in the banner.",
"Publishing rights": "Grant publishing rights",
}}
/>
</div>
</div>
</syntaxhighlight>

Course Assignment Table: 'pages/Courses/CourseAssignments.tsx'

Common Table Component: 'components/Table.tsx'

=== Utility Components and Functions ===

Data Formatter Functions('src/utils/dataFormatter.ts'):

* capitalizeFirstWord()

<syntaxhighlight>
export const capitalizeFirstWord = (str: string) => {
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
};
</syntaxhighlight>

* formatDate()

<syntaxhighlight>
export const formatDate = (dateString: string): string => {
const date = new Date(dateString);
const options: Intl.DateTimeFormatOptions = {
month: "short",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
hour12: true,
};
return date.toLocaleString("en-US", options);
};
</syntaxhighlight>

== List of Files Added/Updated ==

=== Frontend Component Files===
* Implements the main UI for view student task: `src/pages/StudentTasks/StudentTasks.tsx`

* Updates the CSS styles for view student task: `src/pages/StudentTasks/StudentTasks.css`:

* Implements the main UI for view course assignment: `src/pages/Courses/CourseAssignments.tsx`:

* Updates the common Table component: `src/components/Table/Table.tsx`:

=== Core Functionalities===
Data Formatter Functions within `src/utils/dataFormatter.ts`:
* `capitalizeFirstWord `
* `formatDate`

Table Structure:
* Course Assignment Table: [Name, Creation date, Updated date, Actions]
* Student Task Table: [Assignment Course, Topic, Current state, Review grade, Publishing rights]

=== 3. UI Enhancements ===
* Improved pagination functionality.
* Integrated Common Table Component.
* Updated table styling and standardized text formatting.

== Test Plan ==

== Demo Video ==

== Pull Request ==

Track our [https://github.com/expertiza/reimplementation-front-end/pull/88 PR] history here.

== Conclusion ==

This project successfully enhances the UI consistency and usability of the Expertiza system by refining the Student Task Table (PR-52) and the Course Assignment Table (PR-76). By aligning the components with standardized design guidelines, we have improved text formatting, table structure, pagination, and overall user experience. The removal of unnecessary elements and the implementation of proper formatting ensure a cleaner and more intuitive interface. These improvements contribute to a more seamless and accessible system for users, making navigation and interaction more efficient.

== Future Scope ==

* Dynamic Table Customization: Allow users to customize table views by enabling or disabling specific columns based on their preferences.

* Advanced Filtering & Sorting: Implement more robust filtering options and multi-column sorting to improve data organization.

* Real-time Data Updates: Integrate WebSocket or polling mechanisms to update table data in real-time without requiring page refreshes.

* Mobile Responsiveness: Improve the UI layout to provide a better experience on mobile and tablet devices.

== Project Mentor ==

* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Team Members ==

* Chinmay Nayak <cnayak@ncsu.edu>
* Joannes Koomson <jokoomso@ncsu.edu>
* Jing Huang <jhuang42@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2522. Enhancing UI Consistency in Expertiza 1

2025-03-23T05:03:24Z

Cnayak: Adding Team Members

CSC/ECE 517 Spring 2025 - E2522. Enhancing UI Consistency in Expertiza 1

2025-03-23T04:59:56Z

Cnayak:

CSC/ECE 517 Spring 2025 - E2522. Enhancing UI Consistency in Expertiza 1

2025-03-23T04:54:25Z

Cnayak: Added Conclusion

== Introduction ==

The Expertiza platform is an open-source tool used for managing peer reviews, team collaborations, and project-based learning. In this project, our goal was to enhance the UI consistency and usability by refining key tables and UI components to meet modern design standards. The primary focus was on the Student Task Table and Course Assignment Table, aligning them with best practices in usability and design.

== Expertiza Platform Overview and Prior Work ==

=== Expertiza Overview ===

Expertiza is a widely used platform for conducting peer reviews and managing course assignments. It supports various task types, including surveys, evaluations, and team collaborations, helping instructors and students achieve better learning outcomes.

=== Previous PR Highlights ===

Our work builds upon prior UI improvements made in the following pull request

 E2446: Implement Front End for Student Task List #52]

* Introduced an initial UI for managing and displaying student tasks.

* Reference [https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2024_-_E2446_Implement_Front_End_for_Student_Task_List E2446: Implement Front End for Student Task List]

 

[[File:E2522 StudentTask(PR52).jpeg |700px|center]]

 

 [https://github.com/expertiza/reimplementation-front-end/pull/76 E2491. View Assignments in Courses View #76]

* Focused on refining the UI for course assignments.

* Reference: E2491: View Assignments in Courses View

 

[[File:E2522 CourseAssignment(PR76).jpeg |700px|center]]

 

== Problem Statement ==

Prior UI implementations for the Student Task Table and Course Assignment Table lacked consistency and usability, making it difficult to navigate and use effectively. The goal of this project is to:

Key Objetives

* Standardizing table components for improved reusability.

* Enhancing text formatting, pagination, and search functionality.

* Streamlining the UI by removing unnecessary elements and improving clarity.

== Technologies ==

a. Frontend: React, TypeScript

b. Student Task Component Structure:

* Main Table Component: XXXX
* Task Row Component: XXX
* Action Buttons: Each action button will trigger a specific function for managing student tasks.

c. Course Assignment Component Structure:

* Main Table Component: XXXX
* Task Row Component: XXXX
* Action Buttons: Each action button will trigger a specific function for managing student tasks.

d. State Management: React’s useState for managing mocked JSON data

e. Styling: CSS (for responsive and accessible design)

== Design Principles ==

*The UI refinements adhere to the following design principles:

*Consistency: Maintain uniform typography, formatting, and spacing across all tables.

*Readability: Use a structured layout with clear distinctions between elements.

*Simplicity: Remove unnecessary elements to reduce visual clutter.

*Reusability Standardize table components to avoid redundancy.

== UI Components and Updates ==

=== Student Task Table ===

a. Originally Planned View:

The Student Task table was initially intended to present tasks associated with each student, featuring columns for Assignment, Course, Topic, Current Stage, Review Grade, Stage Deadline and Publishing rights. However, due to UI inconsistencies, this layout was revised to adhere to better formatting and design principles.

b. Updated View:

* Improved Formatting: Enhanced text formatting and alignment to ensure consistency.
* Uniform Styling: Applied uniform styling to table rows for better readability.
* Enhanced Clarity: Improved date formatting and clearer row spacing.

 

[[File:E2522 CourseAssignment.jpg |700px|center]]

 

=== Course Assignment Table ===

a. Originally Planned View:

The Course Assignment table was designed to showcase assignments within a course, with columns for assignment Name, Creation Date, Updated Date and Actions. Similar to the Student Task table, it was adjusted to improve clarity and remove unnecessary elements.

b. Updated View:

* Refined Structure: Removed redundant columns and ensured concise information display.
* Improved Date Formatting: Dates are now displayed in a standardized format for better understanding.
* Simplified Actions: Actions like editing and deleting assignments are now more clearly defined.

 

[[File:E2522 StudentTask.jpg |700px|center]]

 

== Implementation Details ==

This pull request focuses on reimplementing and addressing several UI improvements and bug fixes across two key areas: PR-76 (Course Assignment Table) and PR-52 (Student Task Table). The changes aim to enhance the UI by following design guidelines, improving table functionality, and ensuring consistency across the application. Key adjustments include proper formatting, the removal of unnecessary elements, and layout fixes after merging.

=== PR-52: Student Task Table ===

*Standardized Table Component: Replaced the custom table compnent with a common one for consistency across pages.
 
[[File:E2522 StudentTask CommonTable.jpg |500px|center]]
 
*Text Formatting: Table headers and content now adhere to consistent design guidelines.
 
[[File:E2522 StudentTask TextFormat.jpg |600px|center]]
 
*Tooltip Integration: Added info icons with tooltips for additional context where necessary.
 
[[File:E2522 StudentTask InfoIcon.jpg |400px|center]]
 
*Date Formatting: Improved readability of dates with clear formatting.
 
[[File:E2522 StudentTask DateFormat.jpg |200px|center]]
 

=== PR-76: Course Assignment Table ===

*Global Search Bar: Disabled to simplify UI.
 

[[File:E2522 CourseAssignment DisableSearchBar.jpg |400px|center]]

 
*Date Formatting: Standardized date formatting across the table.
 

[[File:E2522 StudentAssignment DateFormat.jpg |300px|center]]

 

*Pagination Updates: Enhanced pagination for better navigation when listing multiple assignments.
 

[[File:E2522 CourseAssignment Pagination.jpg |700px|center]]

 
*Column Removals: Removed unnecessary columns that were causing clutter.
 

[[File:E2522 StudentAssignment Cols.jpg |600px|center]]

 

== Code Snippets ==

=== Key Component Implementations ===

Student Task Page: 'pages/StudentTasks/StudentTasks.tsx'

Course Assignment Table: 'pages/Courses/CourseAssignments.tsx'

Common Table Component: 'components/Table.tsx'

=== Utility Components and Functions ===

Data Formatter Functions('src/utils/dataFormatter.ts'):

* capitalizeFirstWord()

* formatDate()

== List of Files Added/Updated ==

=== Frontend Component Files===
* `src/pages/StudentTasks/StudentTasks.tsx`: Implements the main UI for view student task.
<syntaxhighlight>
import React, { useState, useEffect, useCallback } from "react";
import { useSelector, useDispatch } from "react-redux";
import { useNavigate, Link } from "react-router-dom";
import { RootState } from "../../store/store";
import useAPI from "hooks/useAPI";
import styles from "./StudentTasks.module.css";
import StudentTasksBox from "./StudentTasksBox";
import testData from "./testData.json";
import { CellContext } from "@tanstack/react-table"; // or the correct import for your table library
import Table from "components/Table/Table";
import { formatDate, capitalizeFirstWord } from "utils/dataFormatter";

// Define the types for a single task and the associated course
type Task = {
id: number;
assignment: string;
course: string;
topic: string;
currentStage: string;
reviewGrade: string | { comment: string };
badges: string | boolean;
stageDeadline: string;
publishingRights: boolean;
};

// Empty props for FC as no props are needed currently
type Props = {};

// Main functional component for Student Tasks
const StudentTasks: React.FC = () => {
// State and hooks initialization
const participantTasks = testData.participantTasks;
const currentUserId = testData.current_user_id;
const auth = useSelector((state: RootState) => state.authentication);
const dispatch = useDispatch();
const navigate = useNavigate();

// State to hold tasks
const [tasks, setTasks] = useState<Task[]>([]);
const exampleDuties = testData.dueTasks;
const taskRevisions = testData.revisions;
const studentsTeamedWith = testData.studentsTeamedWith;

useEffect(() => {
if (participantTasks) {
const filteredParticipantTasks = participantTasks.filter(
(task) => task.participant_id === currentUserId
);

const mergedTasks = filteredParticipantTasks.map((task) => {
return {
id: task.id,
assignment: task.assignment,
course: task.course,
topic: task.topic || "-",
currentStage: task.current_stage || "Pending",
reviewGrade: task.review_grade || "N/A",
badges: task.badges || "",
stageDeadline: task.stage_deadline ? formatDate(task.stage_deadline) : "No deadline",
publishingRights: task.publishing_rights || false,
};
});
setTasks(mergedTasks);
}
}, [participantTasks]);

// Callback to toggle publishing rights
const togglePublishingRights = useCallback((id: number) => {
setTasks((prevTasks) =>
prevTasks.map((task) =>
task.id === id ? { ...task, publishingRights: !task.publishingRights } : task
)
);
}, []);

type RowData = {
assignment: string;
course: string;
topic: string;
currentStage: string;
reviewGrade: { comment?: string } | "N/A";
badges?: string;
stageDeadline: string;
publishingRights: boolean;
id: string;
};
const showBadges = tasks.some((task) => task.badges);
const filteredColumns = [
{
accessorKey: "assignment",
header: "Assignment",
cell: (info: CellContext<RowData, string>) => (
<Link to={`/student_task_detail/${info.row.original.id}`}>{info.getValue()}</Link>
),
},
{ accessorKey: "course", header: "Course" },
{ accessorKey: "topic", header: "Topic" },
{ accessorKey: "currentStage", header: "Current Stage" },
{
accessorKey: "reviewGrade",
header: "Review Grade",
cell: (info: CellContext<RowData, RowData["reviewGrade"]>) =>
info.getValue() === "N/A" ? (
"NA"
) : (
<img
src="assets/icons/info.png"
alt="Review Grade"
title={
typeof info.row.original.reviewGrade === "object"
? info.row.original.reviewGrade.comment || ""
: ""
}
/>
),
},
...(showBadges ? [{ accessorKey: "badges", header: "Badges" }] : []),
{
accessorKey: "stageDeadline",
header: "Stage Deadline",
// comment: "You can change 'Preferred Time Zone' in 'Profile' in the banner.",
},
{
accessorKey: "publishingRights",
header: "Publishing Rights",
cell: (info: CellContext<RowData, boolean>) => (
<input
type="checkbox"
checked={info.getValue()}
onChange={() => togglePublishingRights(Number(info.row.original.id))}
/>
),
// comment: "Grant publishing rights",
},
].map(({ header, ...rest }) => ({
...rest,
header: capitalizeFirstWord(header as string),
})); // TODO: Format header data, this should be handled by the common Table.

const filteredAssignments = tasks.map((task) => ({
id: task.id,
assignment: task.assignment,
course: task.course,
topic: capitalizeFirstWord(task.topic) || "-", // TODO: capitalizeFirstWord should be handle wihtin the common Table
currentStage: task.currentStage || "Pending",
reviewGrade: task.reviewGrade || "N/A",
badges: task.badges || "",
stageDeadline: task.stageDeadline || "No deadline",
publishingRights: task.publishingRights || false,
}));

// Component render method
return (
<div className="assignments-page">
<h1 className="assignments-title">Assignments</h1>
<div className={styles.pageLayout}>
<aside className={styles.sidebar}>
<StudentTasksBox
dueTasks={exampleDuties}
revisions={taskRevisions}
studentsTeamedWith={studentsTeamedWith}
/>
</aside>

{/* Table section */}
<div className={styles.mainContent}>
<div className={styles.tableWrapper}>
<Table
data={filteredAssignments}
columns={filteredColumns}
showGlobalFilter={false}
showColumnFilter={false}
showPagination={false}
tableSize={{ span: 12, offset: 0 }}
headingComments={{
"Stage deadline": "You can change 'Preferred Time Zone' in 'Profile' in the banner.",
"Publishing rights": "Grant publishing rights",
}}
/>
</div>
</div>
</div>

{/* Footer section */}
<div className={styles.footer}>
<Link
to="https://wiki.expertiza.ncsu.edu/index.php/Expertiza_documentation"
className={styles.footerLink}
>
Help
</Link>
<Link to="https://research.csc.ncsu.edu/efg/expertiza/papers" className={styles.footerLink}>
Papers on Expertiza
</Link>
</div>
</div>
);
};

// Export the component for use in other parts of the application
export default StudentTasks;
</syntaxhighlight>

* `src/pages/StudentTasks/StudentTasks.css`: Updates the CSS styles for view student task.
<syntaxhighlight>

</syntaxhighlight>

* `src/pages/Courses/CourseAssignments.tsx`: Implements the main UI for view course assignment.
<syntaxhighlight>

</syntaxhighlight>

* `src/components/Table/Table.tsx`: Updates the common Table component.
<syntaxhighlight>

</syntaxhighlight>

=== Core Functionalities===
Data Formatter Functions within `src/utils/dataFormatter.ts`:
* `capitalizeFirstWord `

<syntaxhighlight>
export const capitalizeFirstWord = (str: string) => {
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
};
</syntaxhighlight>

* `formatDate`
<syntaxhighlight>
export const formatDate = (dateString: string): string => {
const date = new Date(dateString);
const options: Intl.DateTimeFormatOptions = {
month: "short",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
hour12: true,
};
return date.toLocaleString("en-US", options);
};
</syntaxhighlight>

Table Structure:
* Course Assignment Table: [Name, Creation date, Updated date, Actions]
* Student Task Table: [Assignment Course, Topic, Current state, Review grade, Publishing rights]

=== 3. UI Enhancements ===
* Improved pagination functionality.
* Integrated Common Table Component.
* Updated table styling and standardized text formatting.

== Test Plan ==

== Demo Video ==

== Pull Request ==

Track our [https://github.com/expertiza/reimplementation-front-end/pull/88 PR] history here.

== Conclusion ==

This project successfully enhances the UI consistency and usability of the Expertiza system by refining the Student Task Table (PR-52) and the Course Assignment Table (PR-76). By aligning the components with standardized design guidelines, we have improved text formatting, table structure, pagination, and overall user experience. The removal of unnecessary elements and the implementation of proper formatting ensure a cleaner and more intuitive interface. These improvements contribute to a more seamless and accessible system for users, making navigation and interaction more efficient.

== Future Scope ==

== Project Mentor ==

== Team Members ==

CSC/ECE 517 Spring 2025 - E2522. Enhancing UI Consistency in Expertiza 1

2025-03-23T04:47:52Z

Cnayak: Adding link to the PR history