Skip to content

Amaresh taking over for Linh – Fix Educator Task Submissions UI + Late Submission Detection Improvements #4486

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
linh2020 wants to merge 8 commits into
base: development
Choose a base branch
from
Open

Amaresh taking over for Linh – Fix Educator Task Submissions UI + Late Submission Detection Improvements #4486

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ebbb846
Confirm educator task submissions UI with late submission tagging
linh2020 Dec 3, 2025
9e30c0e
fix(education-portal): fix lag, sub-task toast spam, and mobile respo…
linh2020 Apr 22, 2026
dd84803
Merge origin/development into linh_educator_taskSubmissions_frontend_…
linh2020 Apr 25, 2026
16971d4
fix(merge): resolve conflicts with development branch
Jun 12, 2026
568e361
fix(lint): remove extra blank line in StudentDashboard
Jun 12, 2026
8deb534
fix(dark-mode): add dark mode styles for educator task submissions page
Jun 12, 2026
37be3ee
fix(sonarcloud): handle unused catch binding and remove unused Assign…
Jun 12, 2026
a6005f2
fix(sonarcloud): use Set for status arrays, fix catch bindings, extra…
Jun 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions src/actions/intermediateTasks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,13 @@ export const fetchIntermediateTasks = taskId => {
try {
const response = await httpService.get(ENDPOINTS.INTERMEDIATE_TASKS_BY_PARENT(taskId));
return response.data;
} catch {
return [];
} catch (error) {
// 404 means the parent task doesn't exist in the education system (e.g. mock/demo tasks) - not an error
if (error.response?.status === 404) {
return [];
}
toast.error('Failed to fetch sub-tasks');
throw error;
}
};
};
Expand Down
1 change: 0 additions & 1 deletion src/components/EductionPortal/Educators/TaskSubmissions/SubmissionCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ const SubmissionCard = ({ submission }) => {
const { studentName, taskType, status, submittedAt, dueAt, grade } = submission;

const statusDetails = useMemo(() => {
// const isLate = submittedAt && dueAt && new Date(submittedAt) > new Date(dueAt);
const isLate =
submittedAt &&
dueAt &&
Expand Down
70 changes: 70 additions & 0 deletions src/components/EductionPortal/Educators/TaskSubmissions/SubmissionCard.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* stylelint-disable */
.card {
background: white;
border: 2px solid #E5E7EB;
Expand Down Expand Up @@ -341,3 +342,72 @@
display: none;
}
}

/* Dark Mode */
:global(.dark-mode) .card {
background: #1e1e2e;
border-color: #3d3d3d;
}

:global(.dark-mode) .card:hover {
border-color: #555;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

:global(.dark-mode) .lateCard {
background: linear-gradient(to bottom, #1e1e2e 0%, #2d1515 100%);
border-color: #EF4444;
}

:global(.dark-mode) .lateCard:hover {
border-color: #DC2626;
}

:global(.dark-mode) .gradedCard {
background: linear-gradient(to bottom, #1e1e2e 0%, #0f2d1a 100%);
border-color: #166534;
}

:global(.dark-mode) .studentName {
color: #e0e0e0;
}

:global(.dark-mode) .taskType {
color: #9ca3af;
}

:global(.dark-mode) .tooltipContent {
background: #2d2d2d;
color: #e0e0e0;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

:global(.dark-mode) .tooltipText {
color: #d1d5db;
}

:global(.dark-mode) .tooltipArrow {
border-bottom-color: #2d2d2d;
}

:global(.dark-mode) .gradeSection {
background: linear-gradient(135deg, #0f2d1a 0%, #14532d 100%);
border-color: #166534;
}

:global(.dark-mode) .gradeLabel {
color: #6ee7b7;
}

:global(.dark-mode) .gradeValue {
color: #34d399;
}

:global(.dark-mode) .lateSection {
background: linear-gradient(135deg, #2d1515 0%, #3d1a1a 100%);
border-color: #7f1d1d;
}

:global(.dark-mode) .lateDate {
color: #fca5a5;
}
14 changes: 0 additions & 14 deletions src/components/EductionPortal/Educators/TaskSubmissions/TaskSubmissionsPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ const TaskSubmissionsPage = () => {
if (!sub.lessonPlanId || !sub.taskName) return;

const classId = sub.lessonPlanId;
// const className = sub.lessonPlanTitle || `Class ${classId.slice(-6)}`;
const className = sub.lessonPlanTitle || `Class ${String(classId).slice(-6)}`;

if (!data[classId]) {
Expand All @@ -73,12 +72,6 @@ const TaskSubmissionsPage = () => {
const filteredTasks = useMemo(() => {
const filtered = {};
Object.entries(activeClassTasks).forEach(([taskName, subs]) => {
// const filteredSubs = subs.filter(sub => {
// if (filterStatus === 'all') return true;
// if (filterStatus === 'pending_review' && sub.status === 'Pending Review') return true;
// if (filterStatus === 'graded' && sub.status === 'Graded') return true;
// return false;
// });
const filteredSubs = subs.filter(sub => {
const status = sub.status?.toLowerCase();
if (filterStatus === 'all') return true;
Expand Down Expand Up @@ -241,13 +234,6 @@ const TaskSubmissionsPage = () => {
</div>
{expandedTasks[taskName] && (
<div className={styles.cardsGrid}>
{/* {subs.map(submission => (
//<SubmissionCard key={submission._id} submission={submission} />
<SubmissionCard
key={submission._id || `${submission.studentEmail}-${submission.taskName}`}
submission={submission}
/>
))} */}
{subs.map(submission => (
<SubmissionCard
key={
Expand Down
124 changes: 124 additions & 0 deletions src/components/EductionPortal/Educators/TaskSubmissions/TaskSubmissionsPage.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* stylelint-disable */
.container {
min-height: 100vh;
background-color: #F8F9FA;
Expand Down Expand Up @@ -429,3 +430,126 @@
height: 8px;
}
}

/* Dark Mode */
:global(.dark-mode) .container {
background-color: #1a1a2e;
}

:global(.dark-mode) .header {
background-color: #16213e;
border-bottom-color: #2d2d2d;
}

:global(.dark-mode) .title {
color: #e0e0e0;
}

:global(.dark-mode) .filterSelect {
background-color: #2d2d2d;
border-color: #444;
color: #e0e0e0;
}

:global(.dark-mode) .filterSelect:hover {
border-color: #666;
}

:global(.dark-mode) .filterSelect:focus {
border-color: #3b82f6;
}

:global(.dark-mode) .filterIcon {
color: #9ca3af;
}

:global(.dark-mode) .tabsContainer {
background-color: #1e1e2e;
border-bottom-color: #2d2d2d;
}

:global(.dark-mode) .tabs {
background-color: #1e1e2e;
scrollbar-color: #444 #1e1e2e;
}

:global(.dark-mode) .tabs::-webkit-scrollbar-track {
background: #1e1e2e;
}

:global(.dark-mode) .tabs::-webkit-scrollbar-thumb {
background: #444;
}

:global(.dark-mode) .tab {
background-color: #2d2d2d;
border-color: #3d3d3d;
color: #9ca3af;
}

:global(.dark-mode) .tab:hover:not(.activeTab) {
background-color: #363636;
border-color: #555;
color: #d1d5db;
}

:global(.dark-mode) .scrollButton {
background-color: #1e1e2e;
border-color: #2d2d2d;
color: #9ca3af;
}

:global(.dark-mode) .scrollButton:hover {
background-color: #2d2d2d;
color: #e0e0e0;
}

:global(.dark-mode) .taskSection {
background-color: #16213e;
border-color: #2d2d2d;
}

:global(.dark-mode) .sectionHeader {
background-color: #1e1e2e;
border-bottom-color: #2d2d2d;
}

:global(.dark-mode) .sectionHeader:hover {
background-color: #252540;
}

:global(.dark-mode) .sectionHeader h3 {
color: #e0e0e0;
}

:global(.dark-mode) .dueDate {
color: #9ca3af;
}

:global(.dark-mode) .submissionCount {
color: #9ca3af;
}

:global(.dark-mode) .expandIcon {
color: #9ca3af;
}

:global(.dark-mode) .loadingState {
background-color: #16213e;
color: #9ca3af;
}

:global(.dark-mode) .loadingState p {
color: #9ca3af;
}

:global(.dark-mode) .spinner {
border-color: #2d2d2d;
border-top-color: #3b82f6;
}

:global(.dark-mode) .noData {
background-color: #16213e;
border-color: #2d2d2d;
color: #9ca3af;
}
Loading
Loading