order tasks by due date first then prio

Author: chpy04

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/v2/TaskCard.tsx

@@ -77,6 +77,7 @@ export const TaskCard = ({
   };
 
   const priorityColor = task.priority === 'HIGH' ? '#ef4345' : task.priority === 'LOW' ? '#00ab41' : '#FFA500';
+  const isOverdue = task.deadline != null && new Date(task.deadline) < new Date() && task.status !== 'DONE';
 
   return (
     <>
@@ -107,7 +108,8 @@ export const TaskCard = ({
                 sx={{
                   opacity: snapshot.isDragging ? 0.9 : 1,
                   transform: snapshot.isDragging ? 'rotate(-2deg)' : '',
-                  borderRadius: '5px'
+                  borderRadius: '5px',
+                  ...(isOverdue && { border: '2px solid #ef4345' })
                 }}
                 elevation={snapshot.isDragging ? 3 : 1}
               >
@@ -152,8 +154,11 @@ export const TaskCard = ({
                         )}
                         {task.deadline && (
                           <Box alignItems={'center'} justifyContent={'right'} display={'flex'}>
-                            <Schedule sx={{ fontSize: 16, mr: 0.5 }} />
-                            <Typography variant="body2" sx={{ fontSize: '0.875rem' }}>
+                            <Schedule sx={{ fontSize: 16, mr: 0.5, ...(isOverdue && { color: '#ef4345' }) }} />
+                            <Typography
+                              variant="body2"
+                              sx={{ fontSize: '0.875rem', ...(isOverdue && { color: '#ef4345', fontWeight: 'bold' }) }}
+                            >
                               Due: {datePipe(task.deadline)}
                             </Typography>
                           </Box>

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/v2/statuses.ts

@@ -16,8 +16,11 @@ const rankTaskPriority = (priority: TaskPriority) => {
   return 0;
 };
 
-const compareTaskPriorities = (priorityA: TaskPriority, priorityB: TaskPriority) => {
-  return rankTaskPriority(priorityA) - rankTaskPriority(priorityB);
+const compareTasks = (taskA: Task, taskB: Task) => {
+  const deadlineA = taskA.deadline ? new Date(taskA.deadline).getTime() : Infinity;
+  const deadlineB = taskB.deadline ? new Date(taskB.deadline).getTime() : Infinity;
+  if (deadlineA !== deadlineB) return deadlineA - deadlineB;
+  return rankTaskPriority(taskB.priority) - rankTaskPriority(taskA.priority);
 };
 
 export const getTasksByStatus = (unorderedTasks: Task[]) => {
@@ -28,11 +31,9 @@ export const getTasksByStatus = (unorderedTasks: Task[]) => {
     },
     statuses.reduce((obj, status) => ({ ...obj, [status]: [] }), {} as TasksByStatus)
   );
-  // order each column by priority
+  // order each column by due date, then priority as tiebreaker
   statuses.forEach((status) => {
-    postsByStatus[status] = postsByStatus[status].sort((recordA: Task, recordB: Task) =>
-      compareTaskPriorities(recordA.priority, recordB.priority)
-    );
+    postsByStatus[status] = postsByStatus[status].sort(compareTasks);
   });
   return postsByStatus;
 };