show overdue assignments today

frontend/website/src/stores/schedules.ts

@@ -31,6 +31,7 @@ const scheduleAssignmentSchema = assignmentIdentitySchema.extend({
 })
 
 export const assignmentForDateSchema = assignmentIdentitySchema.extend({
+  scheduledDate: isoDateSchema,
   schedule: z.object({
     id: z.number().int().positive(),
     set: z.object({

frontend/website/src/views/DashboardView.vue

@@ -36,6 +36,14 @@ function formatDate(value: string): string {
   }).format(new Date(`${value}T00:00:00Z`))
 }
 
+function isOverdue(scheduledDate: string): boolean {
+  return scheduledDate < todayDate.value
+}
+
+function overdueLabel(scheduledDate: string): string {
+  return `Overdue · Due ${formatDate(scheduledDate)}`
+}
+
 async function completeAssignment(assignmentId: number): Promise<void> {
   await schedulesStore.setAssignmentCompleted(assignmentId, true)
 }
@@ -76,7 +84,7 @@ async function completeAssignment(assignmentId: number): Promise<void> {
       </div>
 
       <p v-else-if="assignmentsForDate.length === 0" class="today-state" role="status">
-        Nothing is assigned for today.
+        Nothing is due today.
       </p>
 
       <ul v-else class="today-assignment-list" aria-label="Today's assignments">
@@ -97,6 +105,12 @@ async function completeAssignment(assignmentId: number): Promise<void> {
                 <p>{{ assignment.schedule.set.name }}</p>
                 <span class="today-assignment__kind">{{ assignment.element.kind }}</span>
               </div>
+              <time
+                v-if="isOverdue(assignment.scheduledDate)"
+                class="today-assignment__overdue"
+                :datetime="assignment.scheduledDate"
+                v-text="overdueLabel(assignment.scheduledDate)"
+              ></time>
               <p class="today-assignment__path">
                 {{ assignment.element.path.join(' / ') }}
               </p>
@@ -390,6 +404,19 @@ async function completeAssignment(assignmentId: number): Promise<void> {
   text-transform: none;
 }
 
+.today-assignment__overdue {
+  display: inline-flex;
+  width: fit-content;
+  margin-top: 0.85rem;
+  padding: 0.3rem 0.55rem;
+  border-radius: 999px;
+  color: #923f31;
+  background: #f7e5dc;
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.025em;
+}
+
 .today-assignment__path {
   margin: 1.75rem 0 0;
   color: #183029;