Linh – Fix Educator Task Submissions UI + Late Submission Detection Improvements

src/actions/intermediateTasks.js

@@ -23,6 +23,10 @@ export const fetchIntermediateTasks = taskId => {
       const response = await httpService.get(ENDPOINTS.INTERMEDIATE_TASKS_BY_PARENT(taskId));
       return response.data;
     } 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;
     }

src/components/Announcements/Announcements.module.css

@@ -348,7 +348,7 @@ button.sendButton:hover {
   color: #ddd;
 }
 
-.tabGrid.twoRows > .navItem:nth-child(n + calc(var(--cols, 12) + 1)) {
+.tabGrid.twoRows > .navItem:nth-child(n + 14) {
   margin-top: -12px;
   transform: translateY(8px);
   z-index: 0;

src/components/EductionPortal/Educators/TaskSubmissions/SubmissionCard.jsx

@@ -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 &&

src/components/EductionPortal/Educators/TaskSubmissions/TaskSubmissionsPage.jsx

@@ -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]) {
@@ -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;
@@ -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={

src/components/EductionPortal/StudentDashboard/NavigationBar.jsx

@@ -3,11 +3,17 @@ import styles from './NavigationBar.module.css';
 
 const NavigationBar = ({ darkMode = false }) => {
   const [activeDropdown, setActiveDropdown] = useState(null);
+  const [menuOpen, setMenuOpen] = useState(false);
 
   const toggleDropdown = dropdown => {
     setActiveDropdown(activeDropdown === dropdown ? null : dropdown);
   };
 
+  const toggleMenu = () => {
+    setMenuOpen(prev => !prev);
+    setActiveDropdown(null);
+  };
+
   const navigationItems = [
     { name: 'Home', icon: 'home', hasDropdown: false },
     { name: 'Clock', icon: 'clock', hasDropdown: true },
@@ -88,42 +94,80 @@ const NavigationBar = ({ darkMode = false }) => {
   return (
     <nav className={styles.navigationBar}>
       <div className={styles.navContainer}>
-        {navigationItems.map((item, index) => (
-          <div key={index} className={styles.navItem}>
-            <button
-              className={styles.navButton}
-              onClick={() => item.hasDropdown && toggleDropdown(item.name)}
+        {/* Hamburger button — visible only on mobile */}
+        <button
+          className={styles.hamburger}
+          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
+          aria-expanded={menuOpen}
+          onClick={toggleMenu}
+        >
+          {menuOpen ? (
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
             >
-              {getIcon(item.icon)}
-              <span className={styles.navText}>{item.name}</span>
-              {item.hasDropdown && (
-                <svg
-                  width="12"
-                  height="12"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  className={`${styles.dropdownArrow} ${
-                    activeDropdown === item.name ? styles.rotated : ''
-                  }`}
-                >
-                  <polyline points="6,9 12,15 18,9" />
-                </svg>
-              )}
-            </button>
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          ) : (
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <line x1="3" y1="6" x2="21" y2="6" />
+              <line x1="3" y1="12" x2="21" y2="12" />
+              <line x1="3" y1="18" x2="21" y2="18" />
+            </svg>
+          )}
+        </button>
+
+        {/* Desktop nav items */}
+        <div className={`${styles.navItems} ${menuOpen ? styles.navItemsOpen : ''}`}>
+          {navigationItems.map((item, index) => (
+            <div key={index} className={styles.navItem}>
+              <button
+                className={styles.navButton}
+                onClick={() => item.hasDropdown && toggleDropdown(item.name)}
+              >
+                {getIcon(item.icon)}
+                <span className={styles.navText}>{item.name}</span>
+                {item.hasDropdown && (
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    className={`${styles.dropdownArrow} ${
+                      activeDropdown === item.name ? styles.rotated : ''
+                    }`}
+                  >
+                    <polyline points="6,9 12,15 18,9" />
+                  </svg>
+                )}
+              </button>
 
-            {item.hasDropdown && activeDropdown === item.name && (
-              <div className={styles.dropdown}>
-                <div className={styles.dropdownContent}>
-                  <button className={styles.dropdownItem}>Option 1</button>
-                  <button className={styles.dropdownItem}>Option 2</button>
-                  <button className={styles.dropdownItem}>Option 3</button>
+              {item.hasDropdown && activeDropdown === item.name && (
+                <div className={styles.dropdown}>
+                  <div className={styles.dropdownContent}>
+                    <button className={styles.dropdownItem}>Option 1</button>
+                    <button className={styles.dropdownItem}>Option 2</button>
+                    <button className={styles.dropdownItem}>Option 3</button>
+                  </div>
                 </div>
-              </div>
-            )}
-          </div>
-        ))}
+              )}
+            </div>
+          ))}
+        </div>
       </div>
     </nav>
   );

src/components/EductionPortal/StudentDashboard/NavigationBar.module.css

@@ -1,7 +1,8 @@
 .navigationBar {
   background-color: #3b82f6;
   padding: 0.75rem 0;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
+  position: relative;
 }
 
 .navContainer {
@@ -10,8 +11,16 @@
   padding: 0 1rem;
   display: flex;
   align-items: center;
-  gap: 2rem;
-  overflow-x: auto;
+  gap: 0.25rem;
+}
+
+/* Desktop nav items wrapper */
+.navItems {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-wrap: nowrap;
+  flex: 1;
 }
 
 .navItem {
@@ -25,7 +34,7 @@
   gap: 0.5rem;
   background: transparent;
   border: none;
-  color: #ffffff;
+  color: #fff;
   font-size: 0.875rem;
   font-weight: 500;
   padding: 0.5rem 0.75rem;
@@ -36,7 +45,7 @@
 }
 
 .navButton:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgb(255 255 255 / 10%);
 }
 
 .navText {
@@ -61,9 +70,9 @@
 }
 
 .dropdownContent {
-  background-color: #ffffff;
+  background-color: #fff;
   border-radius: 8px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%);
   padding: 0.5rem 0;
   min-width: 200px;
   border: 1px solid #e5e7eb;
@@ -88,19 +97,73 @@
   color: #1f2937;
 }
 
+/* Hamburger button — hidden on desktop */
+.hamburger {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: #fff;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color 0.2s ease;
+}
+
+.hamburger:hover {
+  background-color: rgb(255 255 255 / 10%);
+}
+
 /* Responsive Design */
-@media (max-width: 768px) {
+@media (width <= 768px) {
+  .hamburger {
+    display: flex;
+  }
+
   .navContainer {
-    gap: 1rem;
-    padding: 0 0.5rem;
+    flex-wrap: wrap;
+    gap: 0;
+    padding: 0 0.75rem;
+  }
+
+  /* Hide desktop nav items on mobile; show only when open */
+  .navItems {
+    display: none;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    padding: 0.5rem 0;
+    gap: 0;
+  }
+
+  .navItems.navItemsOpen {
+    display: flex;
+  }
+
+  .navItem {
+    width: 100%;
   }
 
   .navButton {
-    padding: 0.5rem;
+    width: 100%;
+    justify-content: flex-start;
+    padding: 0.6rem 0.5rem;
+    border-radius: 4px;
   }
 
-  .navText {
-    display: none;
+  .dropdown {
+    position: static;
+    margin-top: 0;
+  }
+
+  .dropdownContent {
+    border-radius: 4px;
+    margin-left: 1.5rem;
+    min-width: auto;
+    width: calc(100% - 1.5rem);
   }
 }
 
@@ -120,5 +183,5 @@
 
 :global(.dark-mode) .dropdownItem:hover {
   background-color: #363636;
-  color: #ffffff;
+  color: #fff;
 }