Merge branch 'fix/overdue-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,10 +22,11 @@ class ListAssignmentsForDate
     {
         $date = $this->parseDate($request->date);
 
-        return $this->scheduleRepository->findAssignmentsForUserOnDate(
+        return $this->scheduleRepository
-            $request->user,
+            ->findIncompleteAssignmentsForUserDueOnOrBefore(
-            $date,
+                $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;
     }
 

backend/tests/Feature/Schedule/ScheduleEndpointTest.php

@@ -225,7 +225,7 @@ class ScheduleEndpointTest extends TestCase
             ]);
     }
 
-    public function test_it_lists_the_users_assignments_for_a_date(): void
+    public function test_it_lists_the_users_assignments_due_through_a_date(): void
     {
         $user = $this->createUser('reader@example.com');
         $otherUser = $this->createUser('other@example.com');
@@ -255,8 +255,8 @@ class ScheduleEndpointTest extends TestCase
         $this->credentialedPost('/api/schedules', [
             'setId' => $olderSet->getId(),
             'levelId' => $olderLevel->getId(),
-            'startDate' => '2026-08-15',
+            'startDate' => '2026-08-14',
-            'targetDate' => '2026-08-15',
+            'targetDate' => '2026-08-14',
         ])->assertCreated();
         $this->credentialedPost('/api/schedules', [
             'setId' => $newerSet->getId(),
@@ -286,22 +286,9 @@ class ScheduleEndpointTest extends TestCase
             ->assertExactJson([
                 'date' => '2026-08-15',
                 'assignments' => [
-                    [
-                        'id' => 3,
-                        'schedule' => [
-                            'id' => 2,
-                            'set' => [
-                                'name' => 'Newer course',
-                            ],
-                        ],
-                        'element' => [
-                            'name' => 'Only chapter',
-                            'kind' => 'chapter',
-                            'path' => ['Only chapter'],
-                        ],
-                    ],
                     [
                         'id' => 1,
+                        'scheduledDate' => '2026-08-14',
                         'schedule' => [
                             'id' => 1,
                             'set' => [
@@ -316,6 +303,7 @@ class ScheduleEndpointTest extends TestCase
                     ],
                     [
                         'id' => 2,
+                        'scheduledDate' => '2026-08-14',
                         'schedule' => [
                             'id' => 1,
                             'set' => [
@@ -328,6 +316,21 @@ class ScheduleEndpointTest extends TestCase
                             'path' => ['Second lesson'],
                         ],
                     ],
+                    [
+                        'id' => 3,
+                        'scheduledDate' => '2026-08-15',
+                        'schedule' => [
+                            'id' => 2,
+                            'set' => [
+                                'name' => 'Newer course',
+                            ],
+                        ],
+                        'element' => [
+                            'name' => 'Only chapter',
+                            'kind' => 'chapter',
+                            'path' => ['Only chapter'],
+                        ],
+                    ],
                 ],
             ]);
     }

backend/tests/Unit/Schedule/UseCases/ListAssignmentsForDateTest.php

@@ -17,7 +17,7 @@ use Tests\Fakes\FakeScheduleRepository;
 
 class ListAssignmentsForDateTest extends TestCase
 {
-    public function test_it_lists_the_users_assignments_for_the_date(): void
+    public function test_it_lists_the_users_assignments_due_through_the_date(): void
     {
         $user = $this->user(1, 'reader@example.com');
         $otherUser = $this->user(2, 'other@example.com');
@@ -25,7 +25,7 @@ class ListAssignmentsForDateTest extends TestCase
         $olderSchedule = $repository->create($this->schedule(
             user: $user,
             setName: 'Older plan',
-            date: '2026-08-15',
+            date: '2026-08-14',
             assignmentNames: ['First', 'Second'],
         ));
         $repository->create($this->schedule(
@@ -37,7 +37,7 @@ class ListAssignmentsForDateTest extends TestCase
         $repository->create($this->schedule(
             user: $otherUser,
             setName: 'Private plan',
-            date: '2026-08-15',
+            date: '2026-08-13',
             assignmentNames: ['Hidden'],
         ));
         $repository->create($this->schedule(
@@ -61,18 +61,18 @@ class ListAssignmentsForDateTest extends TestCase
         );
 
         $this->assertSame(
-            ['Newer plan', 'Older plan'],
+            ['Older plan', 'Newer plan'],
             array_map(function ($assignment): string {
                 return $assignment->getSetName();
             }, $assignments),
         );
         $this->assertSame(
-            ['Third', 'Second'],
+            ['Second', 'Third'],
             array_map(function ($assignment): string {
                 return $assignment->getAssignment()->getName();
             }, $assignments),
         );
-        $this->assertSame(2, $assignments[0]->getScheduleId());
+        $this->assertSame(1, $assignments[0]->getScheduleId());
     }
 
     public function test_it_rejects_a_missing_date(): void

frontend/website/cypress/e2e/set-scheduling.cy.ts

@@ -121,6 +121,55 @@ const completedScheduleDetail = {
   },
 }
 
+const splitScheduleDetail = {
+  schedule: {
+    ...scheduleDetail.schedule,
+    targetDate: '2026-08-13',
+    assignmentCount: 4,
+    days: [
+      scheduleDetail.schedule.days[0],
+      scheduleDetail.schedule.days[1],
+      {
+        date: '2026-08-12',
+        assignments: [
+          {
+            id: 2,
+            completedAt: '2026-08-11T08:30:00+00:00',
+            element: {
+              name: 'Chapter 1',
+              kind: 'Chapter_sections-v2',
+              path: ['Exodus', 'Shemot', 'Chapter 1'],
+            },
+          },
+          {
+            id: 3,
+            completedAt: null,
+            element: {
+              name: 'Chapter 1',
+              kind: 'Chapter_sections-v2',
+              path: ['Leviticus', 'Vayikra', 'Chapter 1'],
+            },
+          },
+        ],
+      },
+      {
+        date: '2026-08-13',
+        assignments: [
+          {
+            id: 4,
+            completedAt: '2026-08-11T09:45:00+00:00',
+            element: {
+              name: 'Chapter 1',
+              kind: 'Chapter_sections-v2',
+              path: ['Numbers', 'Bamidbar', 'Chapter 1'],
+            },
+          },
+        ],
+      },
+    ],
+  },
+}
+
 function interceptAuthenticatedUser(): void {
   cy.intercept('GET', '**/api/me', {
     statusCode: 200,
@@ -159,9 +208,12 @@ describe('set scheduling', () => {
     cy.location('pathname').should('equal', '/sets/41/schedules/new')
     cy.get('h1').should('have.text', 'Schedule Bible')
     cy.get('#schedule-level option').then(($options) => {
-      expect([...$options].map((option) => option.textContent?.trim())).to.deep.equal(
+      expect([...$options].map((option) => option.textContent?.trim())).to.deep.equal([
-        ['Choose a level', 'book (2)', 'portion (2)', 'Chapter_sections-v2 (2)'],
+        'Choose a level',
-      )
+        'book (2)',
+        'portion (2)',
+        'Chapter_sections-v2 (2)',
+      ])
     })
     cy.get('#schedule-level').select('3')
     cy.get('#schedule-start-date').type('2026-08-10')
@@ -184,6 +236,12 @@ describe('set scheduling', () => {
       'contain.text',
       'Exodus / Shemot / Chapter 1',
     )
+    cy.get('[data-assignment-section="completed"]').should('not.have.attr', 'open')
+    cy.get('[data-assignment-section="completed"] summary').click()
+    cy.get('[data-assignment-section="completed"]').should(
+      'contain.text',
+      'No assignments completed yet.',
+    )
   })
 
   it('validates the schedule form before submitting', () => {
@@ -248,6 +306,72 @@ describe('set scheduling', () => {
     cy.get('h1').should('have.text', 'Schedule not found')
   })
 
+  it('splits assignments by progress while preserving the schedule timeline', () => {
+    cy.clock(new Date(2026, 7, 11, 12).getTime(), ['Date'])
+    cy.intercept('GET', '**/api/schedules/73', {
+      statusCode: 200,
+      body: splitScheduleDetail,
+    }).as('schedule')
+
+    cy.visit('/schedules/73')
+    cy.wait('@me')
+    cy.wait('@schedule')
+
+    cy.get('[data-assignment-section="remaining"]')
+      .should('have.attr', 'data-assignment-count', '2')
+      .within(() => {
+        cy.get('h2').should('have.text', 'Remaining')
+        cy.get('[data-schedule-day]').then(($days) => {
+          expect([...$days].map((day) => day.getAttribute('data-schedule-date'))).to.deep.equal([
+            '2026-08-10',
+            '2026-08-11',
+            '2026-08-12',
+          ])
+        })
+        cy.get('[data-schedule-date="2026-08-10"]')
+          .should('contain.text', 'Overdue')
+          .and('contain.text', 'Genesis / Creation / Chapter 1')
+        cy.get('[data-schedule-date="2026-08-11"]')
+          .should('contain.text', 'Rest day')
+          .and('not.contain.text', 'Overdue')
+        cy.get('[data-schedule-date="2026-08-12"]')
+          .should('contain.text', 'Leviticus / Vayikra / Chapter 1')
+          .and('not.contain.text', 'Exodus / Shemot / Chapter 1')
+        cy.get('[data-schedule-date="2026-08-13"]').should('not.exist')
+      })
+
+    cy.get('[data-assignment-section="completed"]').should(
+      'have.attr',
+      'data-assignment-count',
+      '2',
+    )
+    cy.get('[data-assignment-section="completed"]').should('not.have.attr', 'open')
+    cy.get('[data-assignment-section="completed"]').within(() => {
+      cy.get('summary').should('contain.text', 'Completed').click()
+      cy.get('[data-schedule-day]').then(($days) => {
+        expect([...$days].map((day) => day.getAttribute('data-schedule-date'))).to.deep.equal([
+          '2026-08-12',
+          '2026-08-13',
+        ])
+      })
+      cy.get('[data-schedule-date="2026-08-12"]')
+        .should('contain.text', 'Exodus / Shemot / Chapter 1')
+        .and('not.contain.text', 'Leviticus / Vayikra / Chapter 1')
+      cy.get('[data-schedule-date="2026-08-13"]').should(
+        'contain.text',
+        'Numbers / Bamidbar / Chapter 1',
+      )
+      cy.contains('Rest day').should('not.exist')
+    })
+
+    cy.viewport(375, 667)
+    cy.document().then((document) => {
+      expect(document.documentElement.scrollWidth).to.be.at.most(
+        document.documentElement.clientWidth,
+      )
+    })
+  })
+
   it('completes and reopens assignments from the schedule', () => {
     const completedAt = '2026-08-15T12:30:00+00:00'
     cy.intercept('GET', '**/api/schedules/73', {
@@ -278,33 +402,79 @@ describe('set scheduling', () => {
     cy.wait('@me')
     cy.wait('@schedule')
 
-    cy.get('[data-schedule-assignment="2"]').within(() => {
+    cy.get('[data-assignment-section="completed"] summary').click()
+    cy.get('[data-assignment-section="completed"] [data-schedule-assignment="2"]').within(() => {
       cy.contains('Completed').should('be.visible')
       cy.get('time')
         .should('have.attr', 'datetime', '2026-08-15T09:30:00+00:00')
         .and('have.text', formatCompletionTime('2026-08-15T09:30:00+00:00'))
+    })
+
+    cy.get('[data-assignment-section="remaining"] [data-schedule-assignment="1"]').within(() => {
+      cy.contains('button', 'Mark complete').click()
+      cy.contains('button', 'Saving...').should('be.disabled')
+    })
+    cy.wait('@completeAssignment')
+    cy.get('[data-assignment-section="remaining"]')
+      .should('have.attr', 'data-assignment-count', '0')
+      .and('contain.text', 'All assignments are complete.')
+      .and('contain.text', 'Rest day')
+    cy.get('[data-assignment-section="completed"]')
+      .should('have.attr', 'data-assignment-count', '2')
+      .within(() => {
+        cy.get('[data-schedule-assignment="1"]').within(() => {
+          cy.contains('Completed').should('be.visible')
+          cy.get('time')
+            .should('have.attr', 'datetime', completedAt)
+            .and('have.text', formatCompletionTime(completedAt))
+          cy.contains('button', 'Reopen').should('be.enabled')
+        })
+      })
+    cy.get('[data-completion-announcement]').should('have.text', 'Assignment moved to Completed.')
+
+    cy.get('[data-assignment-section="completed"] [data-schedule-assignment="2"]').within(() => {
       cy.contains('button', 'Reopen').click()
     })
     cy.wait('@reopenAssignment')
-    cy.get('[data-schedule-assignment="2"]')
+    cy.get('[data-assignment-section="remaining"]')
+      .should('have.attr', 'data-assignment-count', '1')
+      .find('[data-schedule-assignment="2"]')
       .should('contain.text', 'Not completed')
       .and('not.contain.text', 'Completed')
       .within(() => {
         cy.contains('button', 'Mark complete').should('be.enabled')
       })
+    cy.get('[data-assignment-section="completed"]')
+      .should('have.attr', 'data-assignment-count', '1')
+      .find('[data-schedule-assignment="2"]')
+      .should('not.exist')
+    cy.get('[data-completion-announcement]').should('have.text', 'Assignment moved to Remaining.')
+  })
 
-    cy.get('[data-schedule-assignment="1"]').within(() => {
+  it('keeps an assignment in place when a completion request fails', () => {
-      cy.contains('button', 'Mark complete').click()
+    cy.intercept('GET', '**/api/schedules/73', {
-      cy.contains('button', 'Saving...').should('be.disabled')
+      statusCode: 200,
-    })
+      body: scheduleDetail,
+    }).as('schedule')
+    cy.intercept('PATCH', '**/api/assignments/1', {
+      statusCode: 500,
+    }).as('completeAssignment')
+
+    cy.visit('/schedules/73')
+    cy.wait('@me')
+    cy.wait('@schedule')
+
+    cy.get('[data-assignment-section="remaining"] [data-schedule-assignment="1"]')
+      .contains('button', 'Mark complete')
+      .click()
     cy.wait('@completeAssignment')
-    cy.get('[data-schedule-assignment="1"]').within(() => {
+
-      cy.contains('Completed').should('be.visible')
+    cy.get('[data-assignment-section="remaining"] [data-schedule-assignment="1"]')
-      cy.get('time')
+      .should('be.visible')
-        .should('have.attr', 'datetime', completedAt)
+      .and('contain.text', "We couldn't update this assignment.")
-        .and('have.text', formatCompletionTime(completedAt))
+    cy.get('[data-assignment-section="completed"]')
-      cy.contains('button', 'Reopen').should('be.enabled')
+      .find('[data-schedule-assignment="1"]')
-    })
+      .should('not.exist')
   })
 
   it('lists the users schedules on the dashboard', () => {

frontend/website/cypress/e2e/today-assignments.cy.ts

@@ -36,6 +36,7 @@ describe("today's assignments", () => {
           assignments: [
             {
               id: 12,
+              scheduledDate: '2026-08-13',
               schedule: {
                 id: 73,
                 set: { name: 'Bible' },
@@ -48,6 +49,7 @@ describe("today's assignments", () => {
             },
             {
               id: 13,
+              scheduledDate: browserToday,
               schedule: {
                 id: 81,
                 set: { name: 'Course' },
@@ -77,6 +79,16 @@ describe("today's assignments", () => {
       'have.length',
       2,
     )
+    cy.get('[data-today-assignment]')
+      .first()
+      .should('have.attr', 'data-today-assignment', '12')
+    cy.get('[data-today-assignment="12"] .today-assignment__overdue').should(
+      'have.text',
+      'Overdue · Due Aug 13, 2026',
+    )
+    cy.get('[data-today-assignment="13"] .today-assignment__overdue').should(
+      'not.exist',
+    )
     cy.contains('a', 'Genesis / Creation / Chapter 1')
       .should('contain.text', 'Bible')
       .and('have.attr', 'href', '/schedules/73')
@@ -109,7 +121,7 @@ describe("today's assignments", () => {
 
     cy.get('.today-assignments [role="status"]').should(
       'contain.text',
-      'Nothing is assigned for today.',
+      'Nothing is due today.',
     )
   })
 
@@ -121,6 +133,7 @@ describe("today's assignments", () => {
         assignments: [
           {
             id: 12,
+            scheduledDate: browserToday,
             schedule: {
               id: 73,
               set: { name: 'Bible' },
@@ -177,7 +190,7 @@ describe("today's assignments", () => {
     cy.get('[data-today-assignment="12"]').should('not.exist')
     cy.get('.today-assignments [role="status"]').should(
       'contain.text',
-      'Nothing is assigned for today.',
+      'Nothing is due today.',
     )
   })
 
@@ -219,7 +232,7 @@ describe("today's assignments", () => {
 
     cy.get('.today-assignments [role="status"]').should(
       'contain.text',
-      'Nothing is assigned for today.',
+      'Nothing is due today.',
     )
   })
 })

frontend/website/src/components/ScheduleAssignmentTimeline.vue

@@ -0,0 +1,335 @@
+<script setup lang="ts">
+import type { ScheduleDetail } from '@/stores/schedules'
+
+type ScheduleDay = ScheduleDetail['days'][number]
+
+const props = defineProps<{
+  completionErrors: Record<number, string>
+  days: ScheduleDay[]
+  mode: 'remaining' | 'completed'
+  pendingAssignmentIds: number[]
+  today: string
+}>()
+
+const emit = defineEmits<{
+  setCompleted: [assignmentId: number, completed: boolean]
+}>()
+
+function formatDate(value: string): string {
+  return new Intl.DateTimeFormat('en', {
+    dateStyle: 'medium',
+    timeZone: 'UTC',
+  }).format(new Date(`${value}T00:00:00Z`))
+}
+
+function formatCompletionTime(value: string): string {
+  return new Intl.DateTimeFormat('en', {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(new Date(value))
+}
+
+function dayAssignmentSummary(day: ScheduleDay): string {
+  if (day.assignments.length === 0) {
+    return '0 assigned'
+  }
+
+  const assignmentLabel = props.mode === 'remaining' ? 'remaining' : 'completed'
+
+  return `${day.assignments.length} ${assignmentLabel}`
+}
+
+function isOverdue(day: ScheduleDay): boolean {
+  return props.mode === 'remaining' && day.assignments.length > 0 && day.date < props.today
+}
+
+function isPending(assignmentId: number): boolean {
+  return props.pendingAssignmentIds.includes(assignmentId)
+}
+</script>
+
+<template>
+  <ol
+    class="schedule-days"
+    :class="{ 'schedule-days--completed': mode === 'completed' }"
+    :aria-label="
+      mode === 'remaining'
+        ? 'Remaining assignments by scheduled date'
+        : 'Completed assignments by scheduled date'
+    "
+  >
+    <li
+      v-for="day in days"
+      :key="day.date"
+      class="schedule-day"
+      data-schedule-day
+      :data-schedule-date="day.date"
+    >
+      <header class="schedule-day__header">
+        <time :datetime="day.date">{{ formatDate(day.date) }}</time>
+        <span class="schedule-day__summary">
+          <span v-if="isOverdue(day)" class="overdue-label">Overdue</span>
+          <span>{{ dayAssignmentSummary(day) }}</span>
+        </span>
+      </header>
+
+      <p v-if="day.assignments.length === 0" class="rest-day">Rest day</p>
+
+      <ul v-else class="assignment-list">
+        <li
+          v-for="assignment in day.assignments"
+          :key="assignment.id"
+          :class="{ 'is-completed': assignment.completedAt !== null }"
+          :data-schedule-assignment="assignment.id"
+        >
+          <div class="assignment-description">
+            <span class="assignment-path">
+              {{ assignment.element.path.join(' / ') }}
+            </span>
+            <span class="assignment-kind">{{ assignment.element.kind }}</span>
+          </div>
+          <div class="assignment-completion">
+            <p v-if="assignment.completedAt !== null" class="assignment-completion__status">
+              Completed
+              <time :datetime="assignment.completedAt">
+                {{ formatCompletionTime(assignment.completedAt) }}
+              </time>
+            </p>
+            <p v-else class="assignment-completion__status">Not completed</p>
+            <button
+              type="button"
+              class="assignment-completion-button"
+              :aria-label="
+                assignment.completedAt === null
+                  ? `Mark ${assignment.element.path.join(' / ')} complete`
+                  : `Reopen ${assignment.element.path.join(' / ')}`
+              "
+              :disabled="isPending(assignment.id)"
+              @click="emit('setCompleted', assignment.id, assignment.completedAt === null)"
+            >
+              {{
+                isPending(assignment.id)
+                  ? 'Saving...'
+                  : assignment.completedAt === null
+                    ? 'Mark complete'
+                    : 'Reopen'
+              }}
+            </button>
+            <p
+              v-if="completionErrors[assignment.id] !== undefined"
+              class="assignment-completion__error"
+              role="alert"
+            >
+              {{ completionErrors[assignment.id] }}
+            </p>
+          </div>
+        </li>
+      </ul>
+    </li>
+  </ol>
+</template>
+
+<style scoped>
+.schedule-days {
+  display: grid;
+  gap: 1rem;
+  margin: 1.4rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.schedule-day {
+  overflow: hidden;
+  border: 1px solid rgb(24 48 41 / 12%);
+  border-radius: 1rem;
+  background: rgb(255 253 247 / 82%);
+  box-shadow: 0 0.75rem 2rem rgb(40 62 52 / 6%);
+}
+
+.schedule-days--completed .schedule-day {
+  background: rgb(248 248 241 / 78%);
+  box-shadow: none;
+}
+
+.schedule-day__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.85rem 1rem;
+  border-bottom: 1px solid rgb(24 48 41 / 10%);
+  color: #5e7067;
+  background: rgb(239 228 212 / 42%);
+  font-size: 0.75rem;
+  font-weight: 800;
+}
+
+.schedule-days--completed .schedule-day__header {
+  background: rgb(220 235 224 / 34%);
+}
+
+.schedule-day__summary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.55rem;
+}
+
+.overdue-label {
+  padding: 0.25rem 0.45rem;
+  border-radius: 999px;
+  color: #8f382d;
+  background: #f4dcd5;
+  font-size: 0.62rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.rest-day {
+  margin: 0;
+  padding: 1.2rem 1rem;
+  color: #79877f;
+  font-style: italic;
+}
+
+.assignment-list {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.assignment-list li {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.assignment-list li.is-completed {
+  background: rgb(220 235 224 / 24%);
+}
+
+.assignment-list li + li {
+  border-top: 1px solid rgb(24 48 41 / 10%);
+}
+
+.assignment-path {
+  min-width: 0;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 1.05rem;
+  overflow-wrap: anywhere;
+}
+
+.assignment-description {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  min-width: 0;
+}
+
+.assignment-kind {
+  flex: 0 0 auto;
+  padding: 0.35rem 0.55rem;
+  border-radius: 999px;
+  color: #81533a;
+  background: #efe4d4;
+  font-size: 0.62rem;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: none;
+}
+
+.assignment-completion {
+  display: grid;
+  justify-items: end;
+  gap: 0.55rem;
+  min-width: 12rem;
+}
+
+.assignment-completion__status,
+.assignment-completion__error {
+  margin: 0;
+  font-size: 0.74rem;
+  font-weight: 700;
+  text-align: right;
+}
+
+.assignment-completion__status {
+  color: #5e7067;
+}
+
+.assignment-completion__status time {
+  display: block;
+  margin-top: 0.2rem;
+  color: #344e45;
+}
+
+.assignment-completion__error {
+  max-width: 14rem;
+  color: #9b3f32;
+}
+
+.assignment-completion-button {
+  min-height: 2.4rem;
+  padding: 0.55rem 0.8rem;
+  border: 1px solid rgb(24 58 49 / 28%);
+  border-radius: 0.65rem;
+  color: #183a31;
+  background: #fffdf7;
+  font-size: 0.75rem;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.is-completed .assignment-completion-button {
+  color: #5e7067;
+  background: transparent;
+}
+
+.assignment-completion-button:hover:not(:disabled) {
+  border-color: #285c4e;
+  background: #f9f5e9;
+}
+
+.assignment-completion-button:focus-visible {
+  outline: 3px solid rgb(86 127 112 / 34%);
+  outline-offset: 0.25rem;
+}
+
+.assignment-completion-button:disabled {
+  cursor: wait;
+  opacity: 0.65;
+}
+
+@media (max-width: 37.5rem) {
+  .schedule-day__header {
+    align-items: flex-start;
+  }
+
+  .schedule-day__summary {
+    flex-wrap: wrap;
+  }
+
+  .assignment-list li {
+    grid-template-columns: 1fr;
+  }
+
+  .assignment-description {
+    align-items: flex-start;
+  }
+
+  .assignment-completion {
+    justify-items: start;
+    min-width: 0;
+  }
+
+  .assignment-completion__status,
+  .assignment-completion__error {
+    text-align: left;
+  }
+}
+</style>

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;

frontend/website/src/views/ScheduleDetailView.vue

@@ -1,15 +1,55 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
 import AuthenticatedHeader from '@/components/AuthenticatedHeader.vue'
-import { useSchedulesStore } from '@/stores/schedules'
+import ScheduleAssignmentTimeline from '@/components/ScheduleAssignmentTimeline.vue'
+import { useSchedulesStore, type ScheduleDetail } from '@/stores/schedules'
+
+type ScheduleDay = ScheduleDetail['days'][number]
 
 const route = useRoute()
 const schedulesStore = useSchedulesStore()
-const { activeSchedule, detailLoading, detailError, detailNotFound } = storeToRefs(schedulesStore)
+const {
+  activeSchedule,
+  assignmentCompletionErrors,
+  assignmentCompletionPendingIds,
+  detailLoading,
+  detailError,
+  detailNotFound,
+} = storeToRefs(schedulesStore)
 const currentScheduleId = ref<number | null>(null)
+const completionAnnouncement = ref('')
+const todayDate = browserDate(new Date())
+
+const remainingDays = computed<ScheduleDay[]>(() => {
+  if (activeSchedule.value === null) {
+    return []
+  }
+
+  return activeSchedule.value.days.flatMap((day) => {
+    const assignments = day.assignments.filter((assignment) => assignment.completedAt === null)
+    const isRestDay = day.assignments.length === 0
+
+    return assignments.length > 0 || isRestDay ? [{ date: day.date, assignments }] : []
+  })
+})
+
+const completedDays = computed<ScheduleDay[]>(() => {
+  if (activeSchedule.value === null) {
+    return []
+  }
+
+  return activeSchedule.value.days.flatMap((day) => {
+    const assignments = day.assignments.filter((assignment) => assignment.completedAt !== null)
+
+    return assignments.length > 0 ? [{ date: day.date, assignments }] : []
+  })
+})
+
+const remainingAssignmentCount = computed(() => assignmentCount(remainingDays.value))
+const completedAssignmentCount = computed(() => assignmentCount(completedDays.value))
 
 watch(
   () => route.params.scheduleId,
@@ -40,15 +80,27 @@ function formatDate(value: string): string {
   }).format(new Date(`${value}T00:00:00Z`))
 }
 
-function formatCompletionTime(value: string): string {
+function browserDate(date: Date): string {
-  return new Intl.DateTimeFormat('en', {
+  const year = String(date.getFullYear()).padStart(4, '0')
-    dateStyle: 'medium',
+  const month = String(date.getMonth() + 1).padStart(2, '0')
-    timeStyle: 'short',
+  const day = String(date.getDate()).padStart(2, '0')
-  }).format(new Date(value))
+
+  return `${year}-${month}-${day}`
+}
+
+function assignmentCount(days: ScheduleDay[]): number {
+  return days.reduce((count, day) => count + day.assignments.length, 0)
 }
 
 async function setAssignmentCompleted(assignmentId: number, completed: boolean): Promise<void> {
-  await schedulesStore.setAssignmentCompleted(assignmentId, completed)
+  completionAnnouncement.value = ''
+  const updated = await schedulesStore.setAssignmentCompleted(assignmentId, completed)
+
+  if (updated) {
+    completionAnnouncement.value = completed
+      ? 'Assignment moved to Completed.'
+      : 'Assignment moved to Remaining.'
+  }
 }
 </script>
 
@@ -93,73 +145,82 @@ async function setAssignmentCompleted(assignmentId: number, completed: boolean):
           </p>
         </header>
 
-        <ol class="schedule-days" aria-label="Scheduled days">
+        <p
-          <li
+          class="completion-announcement"
-            v-for="day in activeSchedule.days"
+          role="status"
-            :key="day.date"
+          aria-live="polite"
-            class="schedule-day"
+          data-completion-announcement
-            data-schedule-day
+        >
-            :data-schedule-date="day.date"
+          {{ completionAnnouncement }}
-          >
+        </p>
-            <header class="schedule-day__header">
-              <time :datetime="day.date">{{ formatDate(day.date) }}</time>
-              <span>{{ day.assignments.length }} assigned</span>
-            </header>
 
-            <p v-if="day.assignments.length === 0" class="rest-day">Rest day</p>
+        <section
+          class="assignment-section assignment-section--remaining"
+          aria-labelledby="remaining-assignments-heading"
+          data-assignment-section="remaining"
+          :data-assignment-count="remainingAssignmentCount"
+        >
+          <header class="assignment-section__header">
+            <div>
+              <p class="assignment-section__eyebrow">Your plan</p>
+              <h2 id="remaining-assignments-heading">Remaining</h2>
+              <p>Everything still ahead, kept in scheduled order.</p>
+            </div>
+            <span class="assignment-section__count">
+              {{ remainingAssignmentCount }}
+              {{ remainingAssignmentCount === 1 ? 'assignment' : 'assignments' }}
+            </span>
+          </header>
 
-            <ul v-else class="assignment-list">
+          <p v-if="remainingAssignmentCount === 0" class="section-state" role="status">
-              <li
+            All assignments are complete.
-                v-for="assignment in day.assignments"
+          </p>
-                :key="assignment.id"
+
-                :class="{ 'is-completed': assignment.completedAt !== null }"
+          <ScheduleAssignmentTimeline
-                :data-schedule-assignment="assignment.id"
+            v-if="remainingDays.length > 0"
-              >
+            :completion-errors="assignmentCompletionErrors"
-                <div class="assignment-description">
+            :days="remainingDays"
-                  <span class="assignment-path">
+            mode="remaining"
-                    {{ assignment.element.path.join(' / ') }}
+            :pending-assignment-ids="assignmentCompletionPendingIds"
-                  </span>
+            :today="todayDate"
-                  <span class="assignment-kind">{{ assignment.element.kind }}</span>
+            @set-completed="setAssignmentCompleted"
-                </div>
+          />
-                <div class="assignment-completion">
+        </section>
-                  <p v-if="assignment.completedAt !== null" class="assignment-completion__status">
+
-                    Completed
+        <details
-                    <time :datetime="assignment.completedAt">
+          class="assignment-section completed-section"
-                      {{ formatCompletionTime(assignment.completedAt) }}
+          data-assignment-section="completed"
-                    </time>
+          :data-assignment-count="completedAssignmentCount"
-                  </p>
+        >
-                  <p v-else class="assignment-completion__status">Not completed</p>
+          <summary class="completed-section__summary">
-                  <button
+            <span class="completed-section__introduction">
-                    type="button"
+              <span class="completed-section__heading">Completed</span>
-                    class="assignment-completion-button"
+              <span>Finished work, grouped by its original schedule date.</span>
-                    :aria-label="
+            </span>
-                      assignment.completedAt === null
+            <span class="completed-section__controls">
-                        ? `Mark ${assignment.element.path.join(' / ')} complete`
+              <span class="assignment-section__count">
-                        : `Reopen ${assignment.element.path.join(' / ')}`
+                {{ completedAssignmentCount }}
-                    "
+                {{ completedAssignmentCount === 1 ? 'assignment' : 'assignments' }}
-                    :disabled="schedulesStore.isAssignmentCompletionPending(assignment.id)"
+              </span>
-                    @click="setAssignmentCompleted(assignment.id, assignment.completedAt === null)"
+              <span class="completed-section__chevron" aria-hidden="true">⌄</span>
-                  >
+            </span>
-                    {{
+          </summary>
-                      schedulesStore.isAssignmentCompletionPending(assignment.id)
+
-                        ? 'Saving...'
+          <div class="completed-section__content">
-                        : assignment.completedAt === null
+            <p v-if="completedAssignmentCount === 0" class="section-state" role="status">
-                          ? 'Mark complete'
+              No assignments completed yet.
-                          : 'Reopen'
+            </p>
-                    }}
+            <ScheduleAssignmentTimeline
-                  </button>
+              v-else
-                  <p
+              :completion-errors="assignmentCompletionErrors"
-                    v-if="schedulesStore.assignmentCompletionError(assignment.id) !== null"
+              :days="completedDays"
-                    class="assignment-completion__error"
+              mode="completed"
-                    role="alert"
+              :pending-assignment-ids="assignmentCompletionPendingIds"
-                  >
+              :today="todayDate"
-                    {{ schedulesStore.assignmentCompletionError(assignment.id) }}
+              @set-completed="setAssignmentCompleted"
-                  </p>
+            />
-                </div>
+          </div>
-              </li>
+        </details>
-            </ul>
-          </li>
-        </ol>
       </template>
     </section>
   </main>
@@ -233,153 +294,142 @@ h1 {
   color: #68776f;
 }
 
-.schedule-days {
+.completion-announcement {
-  display: grid;
+  position: absolute;
-  gap: 1rem;
+  width: 1px;
-  margin: 3rem 0 0;
+  height: 1px;
   padding: 0;
-  list-style: none;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
-.schedule-day {
+.assignment-section {
+  margin-top: 3rem;
+}
+
+.assignment-section__header {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 2rem;
+}
+
+.assignment-section__eyebrow {
+  margin: 0 0 0.45rem;
+  color: #926044;
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.assignment-section__header h2,
+.completed-section__heading {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-weight: 500;
+  letter-spacing: -0.035em;
+}
+
+.assignment-section__header h2 {
+  margin: 0;
+  font-size: clamp(2rem, 5vw, 3rem);
+  line-height: 1;
+}
+
+.assignment-section__header p:last-child {
+  margin: 0.65rem 0 0;
+  color: #68776f;
+  line-height: 1.55;
+}
+
+.assignment-section__count {
+  flex: 0 0 auto;
+  padding: 0.45rem 0.7rem;
+  border-radius: 999px;
+  color: #4f665d;
+  background: rgb(224 233 223 / 72%);
+  font-size: 0.72rem;
+  font-weight: 800;
+}
+
+.section-state {
+  display: grid;
+  min-height: 6rem;
+  place-items: center;
+  margin: 1.4rem 0 0;
+  padding: 1.25rem;
+  border: 1px dashed rgb(24 48 41 / 18%);
+  border-radius: 1rem;
+  color: #5e7067;
+  background: rgb(255 253 247 / 52%);
+  text-align: center;
+}
+
+.completed-section {
   overflow: hidden;
   border: 1px solid rgb(24 48 41 / 12%);
   border-radius: 1rem;
-  background: rgb(255 253 247 / 82%);
+  background: rgb(246 245 237 / 78%);
-  box-shadow: 0 0.75rem 2rem rgb(40 62 52 / 6%);
 }
 
-.schedule-day__header {
+.completed-section__summary {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
+  gap: 1.5rem;
-  padding: 0.85rem 1rem;
+  padding: 1.15rem 1.25rem;
-  border-bottom: 1px solid rgb(24 48 41 / 10%);
+  cursor: pointer;
-  color: #5e7067;
-  background: rgb(239 228 212 / 42%);
-  font-size: 0.75rem;
-  font-weight: 800;
-}
-
-.rest-day {
-  margin: 0;
-  padding: 1.2rem 1rem;
-  color: #79877f;
-  font-style: italic;
-}
-
-.assignment-list {
-  display: grid;
-  gap: 0;
-  margin: 0;
-  padding: 0;
   list-style: none;
 }
 
-.assignment-list li {
+.completed-section__summary::-webkit-details-marker {
-  display: grid;
+  display: none;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: start;
-  gap: 1rem;
-  padding: 1rem;
 }
 
-.assignment-list li.is-completed {
+.completed-section__summary:focus-visible {
-  background: rgb(220 235 224 / 34%);
-}
-
-.assignment-list li + li {
-  border-top: 1px solid rgb(24 48 41 / 10%);
-}
-
-.assignment-path {
-  min-width: 0;
-  font-family: Georgia, 'Times New Roman', serif;
-  font-size: 1.05rem;
-  overflow-wrap: anywhere;
-}
-
-.assignment-description {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  min-width: 0;
-}
-
-.assignment-kind {
-  flex: 0 0 auto;
-  padding: 0.35rem 0.55rem;
-  border-radius: 999px;
-  color: #81533a;
-  background: #efe4d4;
-  font-size: 0.62rem;
-  font-weight: 800;
-  letter-spacing: 0.1em;
-  text-transform: none;
-}
-
-.assignment-completion {
-  display: grid;
-  justify-items: end;
-  gap: 0.55rem;
-  min-width: 12rem;
-}
-
-.assignment-completion__status,
-.assignment-completion__error {
-  margin: 0;
-  font-size: 0.74rem;
-  font-weight: 700;
-  text-align: right;
-}
-
-.assignment-completion__status {
-  color: #5e7067;
-}
-
-.assignment-completion__status time {
-  display: block;
-  margin-top: 0.2rem;
-  color: #344e45;
-}
-
-.assignment-completion__error {
-  max-width: 14rem;
-  color: #9b3f32;
-}
-
-.assignment-completion-button {
-  min-height: 2.4rem;
-  padding: 0.55rem 0.8rem;
-  border: 1px solid rgb(24 58 49 / 28%);
-  border-radius: 0.65rem;
-  color: #183a31;
-  background: #fffdf7;
-  font-size: 0.75rem;
-  font-weight: 800;
-  cursor: pointer;
-}
-
-.is-completed .assignment-completion-button {
-  color: #5e7067;
-  background: transparent;
-}
-
-.assignment-completion-button:hover:not(:disabled) {
-  border-color: #285c4e;
-  background: #f9f5e9;
-}
-
-.assignment-completion-button:focus-visible {
   outline: 3px solid rgb(86 127 112 / 34%);
-  outline-offset: 0.25rem;
+  outline-offset: -0.25rem;
 }
 
-.assignment-completion-button:disabled {
+.completed-section__introduction {
-  cursor: wait;
+  display: grid;
-  opacity: 0.65;
+  gap: 0.25rem;
+}
+
+.completed-section__heading {
+  color: #344e45;
+  font-size: 1.35rem;
+}
+
+.completed-section__introduction > span:last-child {
+  color: #79877f;
+  font-size: 0.78rem;
+  line-height: 1.45;
+}
+
+.completed-section__controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.completed-section__chevron {
+  color: #68776f;
+  font-size: 1.35rem;
+  line-height: 1;
+  transition: transform 160ms ease;
+}
+
+.completed-section[open] .completed-section__chevron {
+  transform: rotate(180deg);
+}
+
+.completed-section__content {
+  padding: 0 1rem 1rem;
+  border-top: 1px solid rgb(24 48 41 / 10%);
 }
 
 .page-state {
@@ -430,22 +480,26 @@ h1 {
     margin-top: 3rem;
   }
 
-  .assignment-list li {
+  .assignment-section__header {
-    grid-template-columns: 1fr;
-  }
-
-  .assignment-description {
     align-items: flex-start;
+    flex-direction: column;
+    gap: 1rem;
   }
 
-  .assignment-completion {
+  .completed-section__summary {
-    justify-items: start;
+    align-items: flex-start;
-    min-width: 0;
+    gap: 1rem;
+    padding: 1rem;
   }
 
-  .assignment-completion__status,
+  .completed-section__controls {
-  .assignment-completion__error {
+    flex-direction: column;
-    text-align: left;
+    align-items: flex-end;
+    gap: 0.35rem;
+  }
+
+  .completed-section__content {
+    padding: 0 0.75rem 0.75rem;
   }
 }
 </style>