show overdue assignments today

backend/app/Http/Controllers/ScheduleController.php

@@ -249,6 +249,8 @@ class ScheduleController extends Controller
 
         return [
             'id' => $assignment->getId(),
+            'scheduledDate' => $assignment->getScheduledDate()
+                ->format('Y-m-d'),
             'schedule' => [
                 'id' => $assignmentForDate->getScheduleId(),
                 'set' => [

backend/app/Schedule/EloquentScheduleRepository.php

@@ -63,7 +63,7 @@ class EloquentScheduleRepository implements ScheduleRepository
         return $schedules;
     }
 
-    public function findAssignmentsForUserOnDate(
+    public function findIncompleteAssignmentsForUserDueOnOrBefore(
         User $user,
         DateTimeImmutable $date,
     ): array {
@@ -76,11 +76,14 @@ class EloquentScheduleRepository implements ScheduleRepository
                 'schedule_assignments.schedule_id',
             )
             ->where('schedules.user_id', $user->getId())
-            ->where('schedule_assignments.scheduled_date', $date->format(
+            ->where(
-                'Y-m-d',
+                'schedule_assignments.scheduled_date',
-            ))
+                '<=',
+                $date->format('Y-m-d'),
+            )
             ->whereNull('schedule_assignments.completed_at')
             ->with('schedule')
+            ->orderBy('schedule_assignments.scheduled_date')
             ->orderByDesc('schedules.id')
             ->orderBy('schedule_assignments.position')
             ->orderBy('schedule_assignments.id')

backend/app/Schedule/ScheduleRepository.php

@@ -19,7 +19,7 @@ interface ScheduleRepository
     /**
      * @return list<AssignmentForDate>
      */
-    public function findAssignmentsForUserOnDate(
+    public function findIncompleteAssignmentsForUserDueOnOrBefore(
         User $user,
         DateTimeImmutable $date,
     ): array;

backend/app/Schedule/UseCases/ListAssignmentsForDate/ListAssignmentsForDate.php

@@ -22,7 +22,8 @@ class ListAssignmentsForDate
     {
         $date = $this->parseDate($request->date);
 
-        return $this->scheduleRepository->findAssignmentsForUserOnDate(
+        return $this->scheduleRepository
+            ->findIncompleteAssignmentsForUserDueOnOrBefore(
                 $request->user,
                 $date,
             );

backend/tests/Fakes/FakeScheduleRepository.php

@@ -78,7 +78,7 @@ class FakeScheduleRepository implements ScheduleRepository
         }, array_values($schedules));
     }
 
-    public function findAssignmentsForUserOnDate(
+    public function findIncompleteAssignmentsForUserDueOnOrBefore(
         User $user,
         DateTimeImmutable $date,
     ): array {
@@ -86,8 +86,7 @@ class FakeScheduleRepository implements ScheduleRepository
 
         foreach ($this->findAllForUser($user) as $schedule) {
             foreach ($schedule->getAssignments() as $assignment) {
-                if ($assignment->getScheduledDate()->format('Y-m-d')
+                if ($assignment->getScheduledDate() > $date
-                    !== $date->format('Y-m-d')
                     || $assignment->getCompletedAt() !== null
                 ) {
                     continue;
@@ -101,6 +100,37 @@ class FakeScheduleRepository implements ScheduleRepository
             }
         }
 
+        usort(
+            $assignments,
+            function (
+                AssignmentForDate $first,
+                AssignmentForDate $second,
+            ): int {
+                $firstAssignment = $first->getAssignment();
+                $secondAssignment = $second->getAssignment();
+                $dateComparison = $firstAssignment->getScheduledDate()
+                    <=> $secondAssignment->getScheduledDate();
+                if ($dateComparison !== 0) {
+                    return $dateComparison;
+                }
+
+                $scheduleComparison = $second->getScheduleId()
+                    <=> $first->getScheduleId();
+                if ($scheduleComparison !== 0) {
+                    return $scheduleComparison;
+                }
+
+                $positionComparison = $firstAssignment->getPosition()
+                    <=> $secondAssignment->getPosition();
+                if ($positionComparison !== 0) {
+                    return $positionComparison;
+                }
+
+                return $firstAssignment->getId()
+                    <=> $secondAssignment->getId();
+            },
+        );
+
         return $assignments;
     }
 

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;