From 505ebf7ccd9287e28ae24511c40fcdccee6bcc7d Mon Sep 17 00:00:00 2001
From: shalitha99 <shalithabandara99@gmail.com>
Date: Wed, 19 Aug 2026 23:41:06 +1000
Subject: [PATCH] Completed CPD-Q03 - Add accessible due-date warning states to
 dashboard tasks

---
 .../unit-task-editor.component.html           | 265 ++++++++++++------
 .../unit-task-editor.component.ts             | 248 ++++++++--------
 2 files changed, 307 insertions(+), 206 deletions(-)

diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.html b/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.html
index 82562925c1..5e5f6e22cc 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.html
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.html
@@ -1,10 +1,10 @@
-<div class="flex-grow flex flex-col gap-8 gap-y-0">
-  <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+<div class="flex flex-grow flex-col gap-5 gap-y-0">
+  <div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
     <div>
       <h3>Task List</h3>
       <p>Plan the list of tasks for students to complete.</p>
     </div>
-    <div class="flex flex-wrap items-center gap-5 md:justify-end">
+    <div class="flex flex-wrap items-center gap-3 md:justify-end">
       <div class="flex items-center">
         <label>Definitions CSV</label>
         <div class="flex items-center">
@@ -29,118 +29,120 @@ <h3>Task List</h3>
       </div>
     </div>
   </div>
-  <div class="my-3 flex justify-end items-center gap-3 w-full">
+  <div class="my-2 flex w-full items-center justify-end gap-2">
     @if (unit.allowFlexibleDates) {
       <button mat-raised-button (click)="manageDueDates = !manageDueDates">Manage Due Dates</button>
     }
-    <button mat-raised-button color="primary" (click)="createTaskDefinition()">Add Task</button>
+    <button color="primary" mat-raised-button (click)="createTaskDefinition()">Add Task</button>
   </div>
 
   @if (unit.allowFlexibleDates) {
     @if (manageDueDates) {
       <br />
-      <mat-divider class="my-5"></mat-divider>
+      <mat-divider class="my-3"></mat-divider>
       <br />
       <div>
         <h3>Manage Target Dates</h3>
         <p>Modify or add target dates for each target grade</p>
       </div>
-      <div class="mt-6">
-        <table mat-table [dataSource]="taskDefinitionSource" class="mat-elevation-z0 w-full">
+      <div class="mt-3.5">
+        <table class="mat-elevation-z0 w-full" mat-table [dataSource]="taskDefinitionSource">
           <ng-container matColumnDef="taskDefinition">
-            <th mat-header-cell *matHeaderCellDef>Task</th>
-            <td mat-cell *matCellDef="let td" class="w-fit whitespace-nowrap">
+            <th *matHeaderCellDef mat-header-cell>Task</th>
+            <td *matCellDef="let td" class="w-fit whitespace-nowrap" mat-cell>
               {{ td.abbreviation }} {{ td.name }}
             </td>
           </ng-container>
 
-          <ng-container *ngFor="let g of gradeColumns" [matColumnDef]="g">
-            <th mat-header-cell *matHeaderCellDef class="text-center w-[160px]">
-              <div class="w-full flex justify-center">
-                <f-grade-icon [grade]="gradeColumns.indexOf(g)"></f-grade-icon>
-              </div>
-            </th>
-            <td mat-cell *matCellDef="let td">
-              <div class="flex flex-col gap-2">
-                <mat-form-field
-                  appearance="outline"
-                  class="w-[250px] flex justify-center items-center pt-[22px]"
-                  [ngClass]="{
-                    'date-error': isStartAfterTarget(td, g)
-                  }"
-                >
-                  <mat-label> Start Date </mat-label>
-                  <input
-                    matInput
-                    [matDatepicker]="dpStart"
-                    [ngModel]="getGradeStartDate(td, g)"
-                    (ngModelChange)="setGradeStartDate(td, g, $event)"
+          @for (grade of gradeColumns; track grade.value) {
+            <ng-container [matColumnDef]="gradeColumnId(grade)">
+              <th *matHeaderCellDef class="w-[160px] text-center" mat-header-cell>
+                <div class="flex w-full justify-center">
+                  <f-grade-icon [grade]="grade.value" [unit]="unit"></f-grade-icon>
+                </div>
+              </th>
+              <td *matCellDef="let td" mat-cell>
+                <div class="flex flex-col gap-1">
+                  <mat-form-field
+                    appearance="outline"
+                    class="flex w-[250px] items-center justify-center pt-[22px]"
                     [ngClass]="{
-                      'fallback-date': isFallbackStartDate(td, g)
+                      'date-error': isStartAfterTarget(td, grade),
                     }"
-                    placeholder="Select date"
-                  />
-
-                  <mat-datepicker-toggle matSuffix [for]="dpStart"></mat-datepicker-toggle>
-                  <mat-datepicker #dpStart></mat-datepicker>
-                </mat-form-field>
-                <mat-form-field
-                  appearance="outline"
-                  class="w-[250px] flex justify-center items-center"
-                  [ngClass]="{
-                    'date-error': isStartAfterTarget(td, g)
-                  }"
-                >
-                  <mat-label> Target Date </mat-label>
-                  <input
-                    matInput
-                    [matDatepicker]="dpTarget"
-                    [ngModel]="getGradeDueDate(td, g)"
-                    (ngModelChange)="setGradeDueDate(td, g, $event)"
+                  >
+                    <mat-label> Start Date </mat-label>
+                    <input
+                      matInput
+                      placeholder="Select date"
+                      [matDatepicker]="dpStart"
+                      [ngClass]="{
+                        'fallback-date': isFallbackStartDate(td, grade),
+                      }"
+                      [ngModel]="getGradeStartDate(td, grade)"
+                      (ngModelChange)="setGradeStartDate(td, grade, $event)"
+                    />
+                    <mat-datepicker-toggle matSuffix [for]="dpStart"></mat-datepicker-toggle>
+                    <mat-datepicker #dpStart></mat-datepicker>
+                  </mat-form-field>
+                  <mat-form-field
+                    appearance="outline"
+                    class="flex w-[250px] items-center justify-center"
                     [ngClass]="{
-                      'fallback-date': isFallbackTargetDate(td, g)
+                      'date-error': isStartAfterTarget(td, grade),
                     }"
-                    placeholder="Select date"
-                  />
-                  @if (isStartAfterTarget(td, g)) {
-                    <mat-hint class="text-red-500"> Target date must be after start date </mat-hint>
-                  }
-
-                  <mat-datepicker-toggle matSuffix [for]="dpTarget"></mat-datepicker-toggle>
-                  <mat-datepicker #dpTarget></mat-datepicker>
-                </mat-form-field>
-              </div>
-            </td>
-          </ng-container>
+                  >
+                    <mat-label> Target Date </mat-label>
+                    <input
+                      matInput
+                      placeholder="Select date"
+                      [matDatepicker]="dpTarget"
+                      [ngClass]="{
+                        'fallback-date': isFallbackTargetDate(td, grade),
+                      }"
+                      [ngModel]="getGradeDueDate(td, grade)"
+                      (ngModelChange)="setGradeDueDate(td, grade, $event)"
+                    />
+                    @if (isStartAfterTarget(td, grade)) {
+                      <mat-hint class="text-red-500">
+                        Target date must be after start date
+                      </mat-hint>
+                    }
+                    <mat-datepicker-toggle matSuffix [for]="dpTarget"></mat-datepicker-toggle>
+                    <mat-datepicker #dpTarget></mat-datepicker>
+                  </mat-form-field>
+                </div>
+              </td>
+            </ng-container>
+          }
 
-          <tr mat-header-row *matHeaderRowDef="dueDateColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: dueDateColumns"></tr>
+          <tr *matHeaderRowDef="dueDateColumns" mat-header-row></tr>
+          <tr *matRowDef="let row; columns: dueDateColumns" mat-row></tr>
         </table>
       </div>
     }
   }
 
-  <div class="flex flex-col items-start gap-4 md:flex-row">
+  <div class="flex flex-col items-start gap-2.5 md:flex-row">
     <aside
-      class="self-start md:sticky md:top-4 md:shrink-0"
+      class="self-start md:sticky md:top-2.5 md:shrink-0"
       [ngClass]="{
         'w-full md:w-[420px]': !isTaskListCollapsed,
-        'w-full md:w-[92px]': isTaskListCollapsed
+        'w-full md:w-[92px]': isTaskListCollapsed,
       }"
     >
       <div class="overflow-hidden rounded-2xl bg-white md:flex md:h-[calc(100vh-2rem)] md:flex-col">
         <div
           class="text-left text-[15px]"
           [ngClass]="{
-            'px-1': !isTaskListCollapsed,
-            'px-0': isTaskListCollapsed
+            'px-0.5': !isTaskListCollapsed,
+            'px-0': isTaskListCollapsed,
           }"
         >
           <div class="flex items-center" [ngClass]="{'justify-center': isTaskListCollapsed}">
             <button
+              class="flex flex-none items-center"
               mat-icon-button
               [attr.aria-label]="isTaskListCollapsed ? 'Expand task list' : 'Collapse task list'"
-              class="flex-none flex items-center"
               (click)="toggleTaskListCollapsed()"
             >
               <mat-icon class="flex items-center">
@@ -149,20 +151,20 @@ <h3>Manage Target Dates</h3>
             </button>
             @if (!isTaskListCollapsed) {
               <button
-                mat-icon-button
                 aria-label="Search Icon"
+                class="flex flex-none items-center"
                 disabled
-                class="flex-none flex items-center"
+                mat-icon-button
               >
                 <mat-icon class="flex items-center">search</mat-icon>
               </button>
-              <div class="grow pr-2">
+              <div class="grow pr-1">
                 <input
-                  class="w-full border-0 bg-transparent outline-none"
                   autocomplete="off"
+                  class="w-full border-0 bg-transparent outline-none"
+                  placeholder="Search Tasks"
                   spellcheck="false"
                   type="text"
-                  placeholder="Search Tasks"
                   [(ngModel)]="filter"
                   (ngModelChange)="applyFilter($event)"
                 />
@@ -174,23 +176,23 @@ <h3>Manage Target Dates</h3>
         <div class="h-[560px] overflow-auto md:h-auto md:flex-1">
           <mat-selection-list [multiple]="false">
             @if ((taskDefinitionSource?.filteredData ?? []).length === 0) {
-              <div class="text-center text-muted p-3">No task definitions to display</div>
+              <div class="text-muted p-2 text-center">No task definitions to display</div>
             }
             @for (
               taskDefinition of taskDefinitionSource?.filteredData ?? [];
               track taskDefinition
             ) {
-              <mat-list-item class="clearfix p-0 h-[60px]" [disableRipple]="true">
+              <!-- <mat-list-item class="clearfix h-[60px] p-0" [disableRipple]="true">
                 <div
                   class="flex h-[60px] w-full cursor-pointer items-center rounded-[6px] hover:bg-gray-50"
-                  (click)="selectTaskDefinition(taskDefinition)"
-                  [matTooltip]="taskDefinition.name"
                   matTooltipPosition="above"
+                  [matTooltip]="taskDefinition.name"
                   [matTooltipDisabled]="!isTaskListCollapsed"
                   [matTooltipShowDelay]="250"
                   [ngClass]="{
-                    'bg-[#e7e7ff]': isSelectedTaskDefinition(taskDefinition)
+                    'bg-[#e7e7ff]': isSelectedTaskDefinition(taskDefinition),
                   }"
+                  (click)="selectTaskDefinition(taskDefinition)"
                 >
                   <div class="flex w-full items-center px-[6px]">
                     <div
@@ -198,13 +200,13 @@ <h3>Manage Target Dates</h3>
                       [ngClass]="{'justify-center': isTaskListCollapsed}"
                     >
                       <f-task-badge
-                        [taskDef]="taskDefinition"
                         [highlight]="isSelectedTaskDefinition(taskDefinition)"
+                        [taskDef]="taskDefinition"
                       ></f-task-badge>
 
                       @if (!isTaskListCollapsed) {
-                        <div class="flex-col ml-4 min-w-0 flex-1">
-                          <h4 class="line-clamp-1 mt-[8px] mb-[-2px] text-[15px]">
+                        <div class="ml-2.5 min-w-0 flex-1 flex-col">
+                          <h4 class="mt-[8px] mb-[-2px] line-clamp-1 text-[15px]">
                             {{ taskDefinition.name }}
                           </h4>
                           <div class="mb-0 text-[12px]">
@@ -213,23 +215,110 @@ <h4 class="line-clamp-1 mt-[8px] mb-[-2px] text-[15px]">
                         </div>
 
                         <div
-                          class="flex items-center gap-1 pr-1"
+                          class="flex items-center gap-0.5 pr-0.5"
                           (click)="$event.stopPropagation()"
                         >
                           @if (taskDefinitionHasChanges(taskDefinition)) {
                             <button
-                              mat-icon-button
                               aria-label="save task definition"
                               color="primary"
+                              mat-icon-button
                               (click)="saveTaskDefinition(taskDefinition)"
                             >
                               <mat-icon>save</mat-icon>
                             </button>
                           }
                           <button
+                            aria-label="delete task definition"
+                            color="warn"
                             mat-icon-button
+                            (click)="deleteTaskDefinition(taskDefinition)"
+                          >
+                            <mat-icon>delete</mat-icon>
+                          </button>
+                        </div>
+                      }
+                    </div>
+                  </div>
+                </div>
+              </mat-list-item> -->
+
+              <mat-list-item class="clearfix h-[60px] p-0" [disableRipple]="true">
+                <div
+                  class="flex h-[60px] w-full cursor-pointer items-center rounded-[6px] hover:bg-gray-50"
+                  matTooltipPosition="above"
+                  [matTooltip]="taskDefinition.name"
+                  [matTooltipDisabled]="!isTaskListCollapsed"
+                  [matTooltipShowDelay]="250"
+                  [ngClass]="{
+                    'bg-[#e7e7ff]': isSelectedTaskDefinition(taskDefinition),
+                  }"
+                  (click)="selectTaskDefinition(taskDefinition)"
+                >
+                  <div class="flex w-full items-center px-[6px]">
+                    <div
+                      class="flex w-full items-center"
+                      [ngClass]="{'justify-center': isTaskListCollapsed}"
+                    >
+                      <!-- Existing task status badge - DO NOT CHANGE -->
+                      <f-task-badge
+                        [highlight]="isSelectedTaskDefinition(taskDefinition)"
+                        [taskDef]="taskDefinition"
+                      ></f-task-badge>
+
+                      @if (!isTaskListCollapsed) {
+                        <div class="ml-2.5 min-w-0 flex-1 flex-col">
+                          <div class="flex min-w-0 items-center gap-2">
+                            <h4 class="mt-[8px] mb-[-2px] line-clamp-1 text-[15px]">
+                              {{ taskDefinition.name }}
+                            </h4>
+
+                            <!-- Due-date warning -->
+                            @if (getDueDateWarning(taskDefinition); as warning) {
+                              <span
+                                class="inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium"
+                                [attr.aria-label]="warning.label"
+                                [ngClass]="{
+                                  'bg-red-100 text-red-800': warning.state === 'overdue',
+                                  'bg-orange-100 text-orange-800':
+                                    warning.state === 'within24Hours',
+                                  'bg-yellow-100 text-yellow-900': warning.state === 'within3Days',
+                                  'bg-blue-100 text-blue-800': warning.state === 'within7Days',
+                                }"
+                              >
+                                <mat-icon aria-hidden="true" class="!h-3.5 !w-3.5 !text-[14px]">
+                                  {{ warning.icon }}
+                                </mat-icon>
+
+                                <span>{{ warning.label }}</span>
+                              </span>
+                            }
+                          </div>
+
+                          <div class="mb-0 text-[12px]">
+                            {{ gradeNames[taskDefinition.targetGrade] }} Task
+                          </div>
+                        </div>
+
+                        <div
+                          class="flex items-center gap-0.5 pr-0.5"
+                          (click)="$event.stopPropagation()"
+                        >
+                          @if (taskDefinitionHasChanges(taskDefinition)) {
+                            <button
+                              aria-label="save task definition"
+                              color="primary"
+                              mat-icon-button
+                              (click)="saveTaskDefinition(taskDefinition)"
+                            >
+                              <mat-icon>save</mat-icon>
+                            </button>
+                          }
+
+                          <button
                             aria-label="delete task definition"
                             color="warn"
+                            mat-icon-button
                             (click)="deleteTaskDefinition(taskDefinition)"
                           >
                             <mat-icon>delete</mat-icon>
@@ -253,7 +342,7 @@ <h4 class="line-clamp-1 mt-[8px] mb-[-2px] text-[15px]">
           [unit]="unit"
         ></f-task-definition-editor>
       } @else {
-        <div class="border border-dashed border-gray-300 rounded-xl bg-gray-50 p-8 text-gray-600">
+        <div class="rounded-xl border border-dashed border-gray-300 bg-gray-50 p-5 text-gray-600">
           <h4>Select a task definition</h4>
           <p>Pick a task from the left list to edit its details.</p>
         </div>
diff --git a/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.ts b/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.ts
index f40f563a7c..aceca8f9b1 100644
--- a/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.ts
+++ b/src/app/units/states/edit/directives/unit-tasks-editor/unit-task-editor.component.ts
@@ -1,137 +1,145 @@
-import {AfterViewInit, Component, Inject, Input} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
-import {addWeeks} from 'date-fns';
-import {Subscription} from 'rxjs';
+import { addWeeks } from 'date-fns';
+import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { Subscription } from 'rxjs';
+import { TaskDefinition } from 'src/app/api/models/task-definition';
+import { GradeDefinition, Unit } from 'src/app/api/models/unit';
+import { FeedbackTemplateService } from 'src/app/api/services/feedback-template.service';
+import { TaskDefinitionService } from 'src/app/api/services/task-definition.service';
+import { ConfirmationModalService } from 'src/app/common/modals/confirmation-modal/confirmation-modal.service';
 import {
-  confirmationModal,
-  csvResultModalService,
-  csvUploadModalService,
-} from 'src/app/ajs-upgraded-providers';
-import {Grade} from 'src/app/api/models/grade';
-import {TaskDefinition} from 'src/app/api/models/task-definition';
-import {Unit} from 'src/app/api/models/unit';
-import {FeedbackTemplateService} from 'src/app/api/services/feedback-template.service';
-import {TaskDefinitionService} from 'src/app/api/services/task-definition.service';
-import {AlertService} from 'src/app/common/services/alert.service';
-
-type GradeCol = 'p' | 'c' | 'd' | 'hd';
+  CsvResult,
+  CsvResultModalService,
+} from 'src/app/common/modals/csv-result-modal/csv-result-modal.service';
+import { CsvUploadModalService } from 'src/app/common/modals/csv-upload-modal/csv-upload-modal.service';
+import { AlertService } from 'src/app/common/services/alert.service';
 
 @Component({
   selector: 'f-unit-task-editor',
   templateUrl: 'unit-task-editor.component.html',
   styleUrls: ['unit-task-editor.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  standalone: false,
 })
-export class UnitTaskEditorComponent implements AfterViewInit {
+export class UnitTaskEditorComponent implements OnInit, OnDestroy {
   @Input() unit: Unit;
 
-  public taskDefinitionSource: MatTableDataSource<TaskDefinition>;
-  public filter: string;
+  public taskDefinitionSource: MatTableDataSource<TaskDefinition> = new MatTableDataSource([]);
+  public filter: string = '';
   public selectedTaskDefinition: TaskDefinition;
   public isTaskListCollapsed: boolean = false;
 
-  public gradeColumns: string[] = ['p', 'c', 'd', 'hd'];
-  public dueDateColumns: string[] = ['taskDefinition', 'p', 'c', 'd', 'hd'];
-  public dueDateSource: MatTableDataSource<TaskDefinition>;
+  public dueDateSource: MatTableDataSource<TaskDefinition> = new MatTableDataSource([]);
 
-  public manageDueDates: boolean;
+  public manageDueDates: boolean = false;
 
-  protected gradeNames: string[] = Grade.GRADES;
+  protected get gradeNames(): Record<number, string> {
+    return Object.fromEntries(
+      this.unit.gradeDefinitions.map((definition) => [definition.value, definition.label]),
+    );
+  }
 
-  isStartAfterTarget(td: TaskDefinition, g: GradeCol): boolean {
-    const start = this.getGradeStartDate(td, g);
-    const target = this.getGradeDueDate(td, g);
-    if (!start || !target) return false;
-    return new Date(start).getTime() > new Date(target).getTime();
+  public get gradeColumns(): GradeDefinition[] {
+    return this.unit.gradeDefinitions.filter((definition) => definition.value >= 0);
   }
 
-  getGradeStartDate(td: TaskDefinition, g: GradeCol): Date | null {
-    switch (g) {
-      case 'p':
-        return td.startDate ?? td.startDate; // fallback to existing startDate
-      case 'c':
-        return td.cStartDate ?? td.startDate;
-      case 'd':
-        return td.dStartDate ?? td.startDate;
-      case 'hd':
-        return td.hdStartDate ?? td.startDate;
-    }
+  public get dueDateColumns(): string[] {
+    return [
+      'taskDefinition',
+      ...this.gradeColumns.map((definition) => this.gradeColumnId(definition)),
+    ];
   }
 
-  isFallbackStartDate(td: TaskDefinition, g: GradeCol): boolean {
-    switch (g) {
-      case 'p':
-        return false; // P is always real
-      case 'c':
-        return !td.cStartDate;
-      case 'd':
-        return !td.dStartDate;
-      case 'hd':
-        return !td.hdStartDate;
-    }
+  public gradeColumnId(grade: GradeDefinition): string {
+    return `grade-${grade.value}`;
   }
 
-  setGradeStartDate(td: TaskDefinition, g: GradeCol, value: Date | null): void {
-    switch (g) {
-      case 'p':
-        td.startDate = value;
-        break;
-      case 'c':
-        td.cStartDate = value;
-        break;
-      case 'd':
-        td.dStartDate = value;
-        break;
-      case 'hd':
-        td.hdStartDate = value;
-        break;
+  isStartAfterTarget(td: TaskDefinition, grade: GradeDefinition): boolean {
+    const start = this.getGradeStartDate(td, grade);
+    const target = this.getGradeDueDate(td, grade);
+    if (!start || !target) {
+      return false;
     }
+    return new Date(start).getTime() > new Date(target).getTime();
+  }
 
+  getGradeStartDate(td: TaskDefinition, grade: GradeDefinition): Date | null {
+    return grade.value === 0 ? td.startDate : (td.gradeStartDate(grade.value) ?? td.startDate);
+  }
+
+  isFallbackStartDate(td: TaskDefinition, grade: GradeDefinition): boolean {
+    return grade.value !== 0 && !td.gradeStartDate(grade.value);
+  }
+
+  setGradeStartDate(td: TaskDefinition, grade: GradeDefinition, value: Date | null): void {
+    td.setGradeStartDate(grade.value, value);
     this.saveTaskDefinition(td);
   }
 
-  getGradeDueDate(td: TaskDefinition, g: GradeCol): Date | null {
-    switch (g) {
-      case 'p':
-        // return td.pTargetDate ?? td.dueDate ?? null; // fallback to existing dueDate
-        return td.targetDate ?? td.targetDate; // fallback to existing targetDate
-      case 'c':
-        return td.cTargetDate ?? td.targetDate;
-      case 'd':
-        return td.dTargetDate ?? td.targetDate;
-      case 'hd':
-        return td.hdTargetDate ?? td.targetDate;
-    }
+  getGradeDueDate(td: TaskDefinition, grade: GradeDefinition): Date | null {
+    return grade.value === 0 ? td.targetDate : (td.gradeTargetDate(grade.value) ?? td.targetDate);
   }
 
-  isFallbackTargetDate(td: TaskDefinition, g: GradeCol): boolean {
-    switch (g) {
-      case 'p':
-        return false; // P is always real
-      case 'c':
-        return !td.cTargetDate;
-      case 'd':
-        return !td.dTargetDate;
-      case 'hd':
-        return !td.hdTargetDate;
-    }
+  isFallbackTargetDate(td: TaskDefinition, grade: GradeDefinition): boolean {
+    return grade.value !== 0 && !td.gradeTargetDate(grade.value);
   }
 
-  setGradeDueDate(td: TaskDefinition, g: GradeCol, value: Date | null): void {
-    switch (g) {
-      case 'p':
-        td.targetDate = value;
-        break;
-      case 'c':
-        td.cTargetDate = value;
-        break;
-      case 'd':
-        td.dTargetDate = value;
-        break;
-      case 'hd':
-        td.hdTargetDate = value;
-        break;
+  getDueDateWarning(taskDefinition: TaskDefinition): {
+    state: 'overdue' | 'within24Hours' | 'within3Days' | 'within7Days';
+    label: string;
+    icon: string;
+  } | null {
+    const dueDate = taskDefinition.targetDate;
+
+    if (!dueDate || Number.isNaN(new Date(dueDate).getTime())) {
+      return null;
+    }
+
+    const now = new Date();
+    const due = new Date(dueDate);
+    const difference = due.getTime() - now.getTime();
+
+    const hours24 = 24 * 60 * 60 * 1000;
+    const days3 = 3 * 24 * 60 * 60 * 1000;
+    const days7 = 7 * 24 * 60 * 60 * 1000;
+
+    if (difference < 0) {
+      return {
+        state: 'overdue',
+        label: 'Overdue',
+        icon: 'error',
+      };
+    }
+
+    if (difference <= hours24) {
+      return {
+        state: 'within24Hours',
+        label: 'Due within 24 hours',
+        icon: 'schedule',
+      };
+    }
+
+    if (difference <= days3) {
+      return {
+        state: 'within3Days',
+        label: 'Due within 3 days',
+        icon: 'warning',
+      };
     }
 
+    if (difference <= days7) {
+      return {
+        state: 'within7Days',
+        label: 'Due within 7 days',
+        icon: 'event',
+      };
+    }
+
+    return null;
+  }
+
+  setGradeDueDate(td: TaskDefinition, grade: GradeDefinition, value: Date | null): void {
+    td.setGradeTargetDate(grade.value, value);
     this.saveTaskDefinition(td);
   }
 
@@ -139,17 +147,18 @@ export class UnitTaskEditorComponent implements AfterViewInit {
     private taskDefinitionService: TaskDefinitionService,
     private feedbackTemplateService: FeedbackTemplateService,
     private alerts: AlertService,
-    @Inject(csvResultModalService) private csvResultModalService: any,
-    @Inject(csvUploadModalService) private csvUploadModal: any,
-    @Inject(confirmationModal) private confirmationModal: any,
-  ) {}
+    private csvResultModalService: CsvResultModalService,
+    private csvUploadModal: CsvUploadModalService,
+    private confirmationModal: ConfirmationModalService,
+  ) {
+    this.taskDefinitionSource.filterPredicate = (data: TaskDefinition, filter: string) =>
+      data.matches(filter);
+  }
 
-  ngAfterViewInit(): void {
+  ngOnInit(): void {
     this.subscriptions.push(
       this.unit.taskDefinitionCache.values.subscribe((taskDefinitions) => {
-        this.taskDefinitionSource = new MatTableDataSource<TaskDefinition>(taskDefinitions);
-        this.taskDefinitionSource.filterPredicate = (data: any, filter: string) =>
-          data.matches(filter);
+        this.taskDefinitionSource.data = taskDefinitions;
       }),
     );
   }
@@ -184,7 +193,7 @@ export class UnitTaskEditorComponent implements AfterViewInit {
     }
 
     this.feedbackTemplateService
-      .query({contextType: 'task_definitions', contextId: this.selectedTaskDefinition.id}, {})
+      .query({ contextType: 'task_definitions', contextId: this.selectedTaskDefinition.id }, {})
       .subscribe({
         error: () => this.alerts.error('Error loading task feedback templates.'),
       });
@@ -199,7 +208,9 @@ export class UnitTaskEditorComponent implements AfterViewInit {
   }
 
   applyFilter(filterValue: string) {
-    if (!this.taskDefinitionSource) return;
+    if (!this.taskDefinitionSource) {
+      return;
+    }
 
     this.taskDefinitionSource.filter = filterValue.trim().toLowerCase();
 
@@ -239,10 +250,10 @@ export class UnitTaskEditorComponent implements AfterViewInit {
   public uploadTaskDefinitionsCsv() {
     this.csvUploadModal.show(
       'Upload Task Definitions as CSV',
-      'Test message',
-      {file: {name: 'Task Definition CSV Data', type: 'csv'}},
+      'Upload a CSV of task definitions.',
+      { file: { name: 'Task Definition CSV Data', type: 'csv' } },
       this.unit.getTaskDefinitionBatchUploadUrl(),
-      (response: any) => {
+      (response: CsvResult) => {
         // at least one student?
         this.csvResultModalService.show('Task Definition Import Results', response);
         if (response.success.length > 0) {
@@ -255,10 +266,10 @@ export class UnitTaskEditorComponent implements AfterViewInit {
   public uploadTaskResourcesZip() {
     this.csvUploadModal.show(
       'Upload Task Sheets and Resources as Zip',
-      'Test message',
-      {file: {name: 'Task Sheets and Resources', type: 'zip'}},
+      'Upload a ZIP of task sheets and resources.',
+      { file: { name: 'Task Sheets and Resources', type: 'zip' } },
       this.unit.taskUploadUrl,
-      (response: any) => {
+      (response: CsvResult) => {
         // at least one student?
         this.csvResultModalService.show('Task Sheet and Resources Import Results', response);
         if (response.success.length > 0) {
@@ -288,4 +299,5 @@ export class UnitTaskEditorComponent implements AfterViewInit {
 
     this.selectedTaskDefinition = task;
   }
+
 }