add set scheduling ui

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

@@ -120,12 +120,9 @@ 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)).to.deep.equal([
+      expect([...$options].map((option) => option.textContent?.trim())).to.deep.equal(
-        'Choose a level',
+        ['Choose a level', 'Book (2)', 'Portion (1)', 'Chapter (2)'],
-        'Book (2)',
+      )
-        'Portion (1)',
-        'Chapter (2)',
-      ])
     })
     cy.get('#schedule-level').select('chapter')
     cy.get('#schedule-start-date').type('2026-08-10')

frontend/website/src/router/index.ts

@@ -71,6 +71,22 @@ const router = createRouter({
         requiresAuth: true,
       },
     },
+    {
+      path: '/sets/:setId(\\d+)/schedules/new',
+      name: 'schedule-create',
+      component: () => import('@/views/CreateScheduleView.vue'),
+      meta: {
+        requiresAuth: true,
+      },
+    },
+    {
+      path: '/schedules/:scheduleId(\\d+)',
+      name: 'schedule-detail',
+      component: () => import('@/views/ScheduleDetailView.vue'),
+      meta: {
+        requiresAuth: true,
+      },
+    },
   ],
 })
 

frontend/website/src/stores/schedules.ts

@@ -0,0 +1,220 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import { z } from 'zod'
+
+import { API_BASE } from '@/utils/apiBase'
+
+const isoDateSchema = z.string().regex(/^\d{4}-\d{2}-\d{2}$/)
+
+export const scheduleSummarySchema = z.object({
+  id: z.number().int().positive(),
+  set: z.object({
+    id: z.number().int().positive(),
+    name: z.string().min(1),
+  }),
+  elementKind: z.string().min(1),
+  startDate: isoDateSchema,
+  targetDate: isoDateSchema,
+  assignmentCount: z.number().int().nonnegative(),
+})
+
+const scheduleAssignmentSchema = z.object({
+  element: z.object({
+    id: z.number().int().positive(),
+    name: z.string().min(1),
+    kind: z.string().min(1),
+    path: z.array(z.string().min(1)).min(1),
+  }),
+})
+
+export const scheduleDetailSchema = scheduleSummarySchema.extend({
+  days: z.array(
+    z.object({
+      date: isoDateSchema,
+      assignments: z.array(scheduleAssignmentSchema),
+    }),
+  ),
+})
+
+const schedulesResponseSchema = z.object({
+  schedules: z.array(scheduleSummarySchema),
+})
+
+const scheduleResponseSchema = z.object({
+  schedule: scheduleDetailSchema,
+})
+
+const errorResponseSchema = z.object({
+  error: z.string().min(1),
+})
+
+export type ScheduleSummary = z.infer<typeof scheduleSummarySchema>
+export type ScheduleDetail = z.infer<typeof scheduleDetailSchema>
+export type CreateScheduleInput = {
+  setId: number
+  elementKind: string
+  startDate: string
+  targetDate: string
+}
+
+const LIST_ERROR = "We couldn't load your schedules."
+const DETAIL_ERROR = "We couldn't load this schedule."
+const CREATE_ERROR = "We couldn't create this schedule."
+
+export const useSchedulesStore = defineStore('schedules', () => {
+  const schedules = ref<ScheduleSummary[]>([])
+  const listLoading = ref(false)
+  const listError = ref<string | null>(null)
+  const activeSchedule = ref<ScheduleDetail | null>(null)
+  const detailLoading = ref(false)
+  const detailError = ref<string | null>(null)
+  const detailNotFound = ref(false)
+  const creating = ref(false)
+  const createError = ref<string | null>(null)
+  let activeDetailRequestId = 0
+
+  async function fetchSchedules(): Promise<boolean> {
+    listLoading.value = true
+    listError.value = null
+
+    try {
+      const response = await fetch(`${API_BASE}/api/schedules`, {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          Accept: 'application/json',
+        },
+      })
+
+      if (response.status !== 200) {
+        schedules.value = []
+        listError.value = LIST_ERROR
+
+        return false
+      }
+
+      const responseBody: unknown = await response.json()
+      schedules.value = schedulesResponseSchema.parse(responseBody).schedules
+
+      return true
+    } catch {
+      schedules.value = []
+      listError.value = LIST_ERROR
+
+      return false
+    } finally {
+      listLoading.value = false
+    }
+  }
+
+  async function fetchSchedule(scheduleId: number): Promise<boolean> {
+    const requestId = ++activeDetailRequestId
+    activeSchedule.value = null
+    detailLoading.value = true
+    detailError.value = null
+    detailNotFound.value = false
+
+    try {
+      const response = await fetch(`${API_BASE}/api/schedules/${scheduleId}`, {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          Accept: 'application/json',
+        },
+      })
+
+      if (requestId !== activeDetailRequestId) {
+        return false
+      }
+
+      if (response.status === 404) {
+        detailNotFound.value = true
+
+        return false
+      }
+
+      if (response.status !== 200) {
+        detailError.value = DETAIL_ERROR
+
+        return false
+      }
+
+      const responseBody: unknown = await response.json()
+      if (requestId !== activeDetailRequestId) {
+        return false
+      }
+
+      const parsedSchedule = scheduleResponseSchema.parse(responseBody).schedule
+      if (parsedSchedule.id !== scheduleId) {
+        throw new Error('schedule response did not match requested schedule')
+      }
+      activeSchedule.value = parsedSchedule
+
+      return true
+    } catch {
+      if (requestId === activeDetailRequestId) {
+        activeSchedule.value = null
+        detailError.value = DETAIL_ERROR
+      }
+
+      return false
+    } finally {
+      if (requestId === activeDetailRequestId) {
+        detailLoading.value = false
+      }
+    }
+  }
+
+  async function createSchedule(input: CreateScheduleInput): Promise<ScheduleDetail | null> {
+    creating.value = true
+    createError.value = null
+
+    try {
+      const response = await fetch(`${API_BASE}/api/schedules`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(input),
+      })
+      const responseBody: unknown = await response.json()
+
+      if (response.status !== 201) {
+        const parsedError = errorResponseSchema.safeParse(responseBody)
+        createError.value = parsedError.success ? parsedError.data.error : CREATE_ERROR
+
+        return null
+      }
+
+      const createdSchedule = scheduleResponseSchema.parse(responseBody).schedule
+      activeSchedule.value = createdSchedule
+      detailError.value = null
+      detailNotFound.value = false
+
+      return createdSchedule
+    } catch {
+      createError.value = CREATE_ERROR
+
+      return null
+    } finally {
+      creating.value = false
+    }
+  }
+
+  return {
+    schedules,
+    listLoading,
+    listError,
+    activeSchedule,
+    detailLoading,
+    detailError,
+    detailNotFound,
+    creating,
+    createError,
+    fetchSchedules,
+    fetchSchedule,
+    createSchedule,
+  }
+})

frontend/website/src/styles/main.css

@@ -31,7 +31,8 @@ body {
 }
 
 button,
-input {
+input,
+select {
   font: inherit;
 }
 

frontend/website/src/views/CreateScheduleView.vue

@@ -0,0 +1,405 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { computed, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { z } from 'zod'
+
+import AuthenticatedHeader from '@/components/AuthenticatedHeader.vue'
+import { useSchedulesStore } from '@/stores/schedules'
+import { useSetLayoutStore, type SetElementNode } from '@/stores/setLayout'
+
+type ScheduleField = 'elementKind' | 'startDate' | 'targetDate'
+type ScheduleFieldErrors = Partial<Record<ScheduleField, string>>
+
+const route = useRoute()
+const router = useRouter()
+const setLayoutStore = useSetLayoutStore()
+const schedulesStore = useSchedulesStore()
+const { layout, loading, error, notFound } = storeToRefs(setLayoutStore)
+const { creating, createError } = storeToRefs(schedulesStore)
+const currentSetId = ref<number | null>(null)
+const form = reactive({
+  elementKind: '',
+  startDate: '',
+  targetDate: '',
+})
+const fieldErrors = ref<ScheduleFieldErrors>({})
+
+const levels = computed(() => {
+  const counts = new Map<string, number>()
+
+  function countNodes(nodes: SetElementNode[]): void {
+    for (const node of nodes) {
+      counts.set(node.kind, (counts.get(node.kind) ?? 0) + 1)
+      countNodes(node.children)
+    }
+  }
+
+  countNodes(layout.value?.elements ?? [])
+
+  return [...counts.entries()].map(([kind, count]) => ({
+    kind,
+    count,
+    label: humanizeKind(kind),
+  }))
+})
+
+const scheduleFormSchema = z
+  .object({
+    elementKind: z.string().min(1, 'Choose a level to schedule.'),
+    startDate: z.string().min(1, 'Choose a start date.'),
+    targetDate: z.string().min(1, 'Choose a target date.'),
+  })
+  .superRefine((value, context) => {
+    if (value.startDate !== '' && value.targetDate !== '' && value.targetDate < value.startDate) {
+      context.addIssue({
+        code: 'custom',
+        path: ['targetDate'],
+        message: 'Target date cannot be before the start date.',
+      })
+    }
+  })
+
+watch(
+  () => route.params.setId,
+  async (setIdParameter) => {
+    const rawSetId = Array.isArray(setIdParameter) ? setIdParameter[0] : setIdParameter
+    const setId = Number(rawSetId)
+    currentSetId.value = setId
+
+    if (layout.value?.set.id !== setId) {
+      await setLayoutStore.fetchSetLayout(setId)
+    }
+  },
+  { immediate: true },
+)
+
+async function submit(): Promise<void> {
+  fieldErrors.value = {}
+  const result = scheduleFormSchema.safeParse(form)
+  if (!result.success) {
+    const errors: ScheduleFieldErrors = {}
+    for (const issue of result.error.issues) {
+      const field = issue.path[0]
+      if (
+        (field === 'elementKind' || field === 'startDate' || field === 'targetDate') &&
+        errors[field] === undefined
+      ) {
+        errors[field] = issue.message
+      }
+    }
+    fieldErrors.value = errors
+
+    return
+  }
+
+  if (
+    currentSetId.value === null ||
+    !levels.value.some((level) => level.kind === result.data.elementKind)
+  ) {
+    fieldErrors.value = {
+      elementKind: 'Choose an available level to schedule.',
+    }
+
+    return
+  }
+
+  const schedule = await schedulesStore.createSchedule({
+    setId: currentSetId.value,
+    ...result.data,
+  })
+  if (schedule !== null) {
+    await router.push({
+      name: 'schedule-detail',
+      params: { scheduleId: schedule.id },
+    })
+  }
+}
+
+async function retry(): Promise<void> {
+  if (currentSetId.value !== null) {
+    await setLayoutStore.fetchSetLayout(currentSetId.value)
+  }
+}
+
+function humanizeKind(kind: string): string {
+  const words = kind.replaceAll(/[_-]+/g, ' ')
+
+  return words.charAt(0).toUpperCase() + words.slice(1)
+}
+</script>
+
+<template>
+  <main class="schedule-form-page">
+    <AuthenticatedHeader />
+
+    <section class="schedule-form-shell">
+      <RouterLink
+        class="back-link"
+        :to="{ name: 'set-layout', params: { setId: currentSetId ?? undefined } }"
+      >
+        <span aria-hidden="true">←</span>
+        Back to set
+      </RouterLink>
+
+      <p v-if="loading" class="page-state" role="status">Loading scheduling options...</p>
+
+      <div v-else-if="notFound" class="page-state page-state--error" role="alert">
+        <h1>Set not found</h1>
+        <p>The set you want to schedule is not available.</p>
+      </div>
+
+      <div v-else-if="error !== null" class="page-state page-state--error" role="alert">
+        <p>{{ error }}</p>
+        <button type="button" class="secondary-button" @click="retry">Try again</button>
+      </div>
+
+      <template v-else-if="layout !== null">
+        <header class="schedule-form__introduction">
+          <p class="eyebrow">Create schedule</p>
+          <h1>Schedule {{ layout.set.name }}</h1>
+          <p>Choose one level of the set and a date range. Every matching item will be included.</p>
+        </header>
+
+        <form class="schedule-form" novalidate @submit.prevent="submit">
+          <div class="form-field">
+            <label for="schedule-level">Level</label>
+            <select
+              id="schedule-level"
+              v-model="form.elementKind"
+              :aria-invalid="fieldErrors.elementKind !== undefined"
+              :aria-describedby="fieldErrors.elementKind ? 'schedule-level-error' : undefined"
+              :disabled="creating"
+            >
+              <option value="">Choose a level</option>
+              <option v-for="level in levels" :key="level.kind" :value="level.kind">
+                {{ level.label }} ({{ level.count }})
+              </option>
+            </select>
+            <p v-if="fieldErrors.elementKind" id="schedule-level-error" class="field-error">
+              {{ fieldErrors.elementKind }}
+            </p>
+          </div>
+
+          <div class="date-fields">
+            <div class="form-field">
+              <label for="schedule-start-date">Start date</label>
+              <input
+                id="schedule-start-date"
+                v-model="form.startDate"
+                type="date"
+                :aria-invalid="fieldErrors.startDate !== undefined"
+                :aria-describedby="fieldErrors.startDate ? 'schedule-start-date-error' : undefined"
+                :disabled="creating"
+              />
+              <p v-if="fieldErrors.startDate" id="schedule-start-date-error" class="field-error">
+                {{ fieldErrors.startDate }}
+              </p>
+            </div>
+
+            <div class="form-field">
+              <label for="schedule-target-date">Target date</label>
+              <input
+                id="schedule-target-date"
+                v-model="form.targetDate"
+                type="date"
+                :aria-invalid="fieldErrors.targetDate !== undefined"
+                :aria-describedby="
+                  fieldErrors.targetDate ? 'schedule-target-date-error' : undefined
+                "
+                :disabled="creating"
+              />
+              <p v-if="fieldErrors.targetDate" id="schedule-target-date-error" class="field-error">
+                {{ fieldErrors.targetDate }}
+              </p>
+            </div>
+          </div>
+
+          <p v-if="createError !== null" class="form-error" role="alert">{{ createError }}</p>
+
+          <button type="submit" class="primary-button" :disabled="creating">
+            {{ creating ? 'Creating schedule...' : 'Create schedule' }}
+          </button>
+        </form>
+      </template>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.schedule-form-page {
+  min-height: 100vh;
+  min-height: 100svh;
+  padding: 2rem clamp(1.5rem, 6vw, 5rem) 5rem;
+  color: #183029;
+  background: #f4f1e7;
+}
+
+.schedule-form-shell {
+  width: min(100%, 46rem);
+  margin: clamp(3.5rem, 8vh, 5.5rem) auto 0;
+}
+
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  border-radius: 0.35rem;
+  color: #5e7067;
+  font-size: 0.84rem;
+  font-weight: 750;
+  text-decoration: none;
+}
+
+.back-link:focus-visible,
+.primary-button:focus-visible,
+.secondary-button:focus-visible,
+select:focus-visible,
+input:focus-visible {
+  outline: 3px solid rgb(86 127 112 / 34%);
+  outline-offset: 0.25rem;
+}
+
+.schedule-form__introduction {
+  margin-top: 2.75rem;
+}
+
+.eyebrow {
+  margin: 0 0 1rem;
+  color: #926044;
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+h1 {
+  margin: 0;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: clamp(2.75rem, 7vw, 4.8rem);
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: -0.05em;
+}
+
+.schedule-form__introduction > p:last-child {
+  max-width: 38rem;
+  margin: 1.4rem 0 0;
+  color: #68776f;
+  line-height: 1.7;
+}
+
+.schedule-form {
+  display: grid;
+  gap: 1.5rem;
+  margin-top: 2.75rem;
+  padding: clamp(1.3rem, 4vw, 2rem);
+  border: 1px solid rgb(24 48 41 / 12%);
+  border-radius: 1rem;
+  background: rgb(255 253 247 / 82%);
+  box-shadow: 0 1rem 2.5rem rgb(40 62 52 / 8%);
+}
+
+.form-field {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.date-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+label {
+  font-size: 0.78rem;
+  font-weight: 800;
+}
+
+select,
+input {
+  width: 100%;
+  min-height: 3rem;
+  padding: 0.7rem 0.8rem;
+  border: 1px solid rgb(24 58 49 / 22%);
+  border-radius: 0.7rem;
+  color: #183029;
+  background: #fffdf7;
+}
+
+select[aria-invalid='true'],
+input[aria-invalid='true'] {
+  border-color: #a64b3c;
+}
+
+.field-error,
+.form-error {
+  margin: 0;
+  color: #934033;
+  font-size: 0.76rem;
+  line-height: 1.4;
+}
+
+.primary-button,
+.secondary-button {
+  min-height: 2.8rem;
+  padding: 0.7rem 1.1rem;
+  border-radius: 0.7rem;
+  font-weight: 750;
+  cursor: pointer;
+}
+
+.primary-button {
+  justify-self: start;
+  border: 0;
+  color: #fffdf7;
+  background: #183a31;
+}
+
+.primary-button:disabled {
+  cursor: wait;
+  opacity: 0.65;
+}
+
+.secondary-button {
+  border: 1px solid rgb(24 58 49 / 28%);
+  color: #183a31;
+  background: #fffdf7;
+}
+
+.page-state {
+  display: grid;
+  min-height: 10rem;
+  place-items: center;
+  margin-top: 2.75rem;
+  padding: 2rem;
+  border: 1px solid rgb(24 48 41 / 12%);
+  border-radius: 1rem;
+  color: #68776f;
+  background: rgb(255 253 247 / 72%);
+  text-align: center;
+}
+
+.page-state--error {
+  align-content: center;
+  gap: 1rem;
+}
+
+.page-state--error p {
+  margin: 0;
+}
+
+@media (max-width: 37.5rem) {
+  .schedule-form-page {
+    padding: 1.4rem 1.1rem 3rem;
+  }
+
+  .schedule-form-shell {
+    margin-top: 3rem;
+  }
+
+  .date-fields {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

frontend/website/src/views/DashboardView.vue

@@ -3,20 +3,89 @@ import { storeToRefs } from 'pinia'
 import { onMounted } from 'vue'
 
 import AuthenticatedHeader from '@/components/AuthenticatedHeader.vue'
+import { useSchedulesStore } from '@/stores/schedules'
 import { useSetsStore } from '@/stores/sets'
 
 const setsStore = useSetsStore()
+const schedulesStore = useSchedulesStore()
 const { sets, loading, error } = storeToRefs(setsStore)
+const { schedules, listLoading, listError } = storeToRefs(schedulesStore)
 
 onMounted(async () => {
-  await setsStore.fetchSets()
+  await Promise.all([setsStore.fetchSets(), schedulesStore.fetchSchedules()])
 })
+
+function humanizeKind(kind: string): string {
+  const words = kind.replaceAll(/[_-]+/g, ' ')
+
+  return words.charAt(0).toUpperCase() + words.slice(1)
+}
+
+function formatDate(value: string): string {
+  return new Intl.DateTimeFormat('en', {
+    dateStyle: 'medium',
+    timeZone: 'UTC',
+  }).format(new Date(`${value}T00:00:00Z`))
+}
 </script>
 
 <template>
   <main class="dashboard-page">
     <AuthenticatedHeader />
 
+    <section class="schedules-catalog" aria-labelledby="schedules-heading">
+      <div class="schedules-catalog__heading">
+        <div>
+          <p class="sets-catalog__eyebrow">Your plans</p>
+          <h2 id="schedules-heading">Your schedules</h2>
+        </div>
+        <p>Return to a plan and see what is assigned for each day.</p>
+      </div>
+
+      <p v-if="listLoading" class="catalog-state catalog-state--compact" role="status">
+        Loading schedules...
+      </p>
+
+      <div
+        v-else-if="listError !== null"
+        class="catalog-state catalog-state--compact catalog-state--error"
+        role="alert"
+      >
+        <p>{{ listError }}</p>
+        <button type="button" class="retry-button" @click="schedulesStore.fetchSchedules">
+          Try again
+        </button>
+      </div>
+
+      <p
+        v-else-if="schedules.length === 0"
+        class="catalog-state catalog-state--compact"
+        role="status"
+      >
+        You have not created a schedule yet.
+      </p>
+
+      <ul v-else class="schedule-grid" aria-label="Your schedules">
+        <li v-for="schedule in schedules" :key="schedule.id">
+          <RouterLink
+            class="schedule-card-link"
+            :to="{ name: 'schedule-detail', params: { scheduleId: schedule.id } }"
+          >
+            <article class="schedule-card">
+              <div class="schedule-card__heading">
+                <p>{{ humanizeKind(schedule.elementKind) }}</p>
+                <span>{{ schedule.assignmentCount }} assignments</span>
+              </div>
+              <h3>{{ schedule.set.name }}</h3>
+              <span class="schedule-card__dates">
+                {{ formatDate(schedule.startDate) }} to {{ formatDate(schedule.targetDate) }}
+              </span>
+            </article>
+          </RouterLink>
+        </li>
+      </ul>
+    </section>
+
     <section class="sets-catalog" aria-labelledby="sets-heading">
       <div class="sets-catalog__introduction">
         <p class="sets-catalog__eyebrow">Your library</p>
@@ -72,6 +141,34 @@ onMounted(async () => {
   margin: clamp(4.5rem, 10vh, 7rem) auto 0;
 }
 
+.schedules-catalog {
+  width: min(100%, 72rem);
+  margin: clamp(4.5rem, 10vh, 7rem) auto 0;
+}
+
+.schedules-catalog__heading {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 2rem;
+}
+
+.schedules-catalog__heading h2 {
+  margin: 0;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: clamp(2.25rem, 5vw, 3.5rem);
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: -0.045em;
+}
+
+.schedules-catalog__heading > p {
+  max-width: 24rem;
+  margin: 0;
+  color: #68776f;
+  line-height: 1.6;
+}
+
 .sets-catalog__introduction {
   max-width: 44rem;
 }
@@ -120,6 +217,11 @@ h1 {
   gap: 1rem;
 }
 
+.catalog-state--compact {
+  min-height: 7rem;
+  margin-top: 2rem;
+}
+
 .catalog-state--error p {
   margin: 0;
 }
@@ -155,6 +257,74 @@ h1 {
   list-style: none;
 }
 
+.schedule-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+  gap: 1rem;
+  margin: 2rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.schedule-card-link {
+  display: block;
+  height: 100%;
+  border-radius: 1rem;
+  text-decoration: none;
+}
+
+.schedule-card {
+  height: 100%;
+  padding: 1.4rem;
+  border: 1px solid rgb(24 48 41 / 12%);
+  border-radius: 1rem;
+  background: rgb(255 253 247 / 88%);
+  box-shadow: 0 0.75rem 2rem rgb(40 62 52 / 7%);
+  transition:
+    border-color 160ms ease,
+    transform 160ms ease;
+}
+
+.schedule-card-link:hover .schedule-card {
+  border-color: rgb(40 92 78 / 35%);
+  transform: translateY(-2px);
+}
+
+.schedule-card-link:focus-visible {
+  outline: 3px solid rgb(86 127 112 / 38%);
+  outline-offset: 0.25rem;
+}
+
+.schedule-card__heading {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  color: #926044;
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.schedule-card__heading p {
+  margin: 0;
+}
+
+.schedule-card h3 {
+  margin: 2rem 0 0;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 1.8rem;
+  font-weight: 500;
+  line-height: 1.1;
+}
+
+.schedule-card__dates {
+  display: block;
+  margin-top: 1rem;
+  color: #68776f;
+  font-size: 0.78rem;
+}
+
 .set-card {
   height: 100%;
   min-height: 11rem;
@@ -225,6 +395,15 @@ h1 {
     margin-top: 3.75rem;
   }
 
+  .schedules-catalog {
+    margin-top: 3.75rem;
+  }
+
+  .schedules-catalog__heading {
+    display: grid;
+    gap: 1rem;
+  }
+
   .set-grid {
     margin-top: 2.25rem;
   }

frontend/website/src/views/ScheduleDetailView.vue

@@ -0,0 +1,323 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+import AuthenticatedHeader from '@/components/AuthenticatedHeader.vue'
+import { useSchedulesStore } from '@/stores/schedules'
+
+const route = useRoute()
+const schedulesStore = useSchedulesStore()
+const { activeSchedule, detailLoading, detailError, detailNotFound } = storeToRefs(schedulesStore)
+const currentScheduleId = ref<number | null>(null)
+
+watch(
+  () => route.params.scheduleId,
+  async (scheduleIdParameter) => {
+    const rawScheduleId = Array.isArray(scheduleIdParameter)
+      ? scheduleIdParameter[0]
+      : scheduleIdParameter
+    const scheduleId = Number(rawScheduleId)
+    currentScheduleId.value = scheduleId
+
+    if (activeSchedule.value?.id !== scheduleId) {
+      await schedulesStore.fetchSchedule(scheduleId)
+    }
+  },
+  { immediate: true },
+)
+
+async function retry(): Promise<void> {
+  if (currentScheduleId.value !== null) {
+    await schedulesStore.fetchSchedule(currentScheduleId.value)
+  }
+}
+
+function formatDate(value: string): string {
+  return new Intl.DateTimeFormat('en', {
+    dateStyle: 'medium',
+    timeZone: 'UTC',
+  }).format(new Date(`${value}T00:00:00Z`))
+}
+
+function humanizeKind(kind: string): string {
+  const words = kind.replaceAll(/[_-]+/g, ' ')
+
+  return words.charAt(0).toUpperCase() + words.slice(1)
+}
+
+function pluralKind(kind: string, count: number): string {
+  if (count === 1) {
+    return kind
+  }
+
+  if (kind.endsWith('y')) {
+    return `${kind.slice(0, -1)}ies`
+  }
+
+  if (kind.endsWith('s')) {
+    return kind
+  }
+
+  return `${kind}s`
+}
+</script>
+
+<template>
+  <main class="schedule-page">
+    <AuthenticatedHeader />
+
+    <section class="schedule-shell">
+      <RouterLink class="back-link" :to="{ name: 'dashboard' }">
+        <span aria-hidden="true">←</span>
+        Back to dashboard
+      </RouterLink>
+
+      <p v-if="detailLoading" class="page-state" role="status">Loading schedule...</p>
+
+      <div v-else-if="detailNotFound" class="page-state page-state--error" role="alert">
+        <h1>Schedule not found</h1>
+        <p>This schedule is not available.</p>
+      </div>
+
+      <div v-else-if="detailError !== null" class="page-state page-state--error" role="alert">
+        <p>{{ detailError }}</p>
+        <button type="button" class="retry-button" @click="retry">Try again</button>
+      </div>
+
+      <template v-else-if="activeSchedule !== null">
+        <header class="schedule-introduction">
+          <p class="eyebrow">{{ humanizeKind(activeSchedule.elementKind) }} plan</p>
+          <h1>{{ activeSchedule.set.name }} schedule</h1>
+          <p class="schedule-summary">
+            {{ activeSchedule.assignmentCount }}
+            {{ pluralKind(activeSchedule.elementKind, activeSchedule.assignmentCount) }} across
+            {{ activeSchedule.days.length }}
+            {{ activeSchedule.days.length === 1 ? 'day' : 'days' }}
+          </p>
+          <p class="schedule-range">
+            {{ formatDate(activeSchedule.startDate) }} to
+            {{ formatDate(activeSchedule.targetDate) }}
+          </p>
+        </header>
+
+        <ol class="schedule-days" aria-label="Scheduled days">
+          <li
+            v-for="day in activeSchedule.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>{{ day.assignments.length }} assigned</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.element.id">
+                <span class="assignment-path">{{ assignment.element.path.join(' / ') }}</span>
+                <span class="assignment-kind">{{ humanizeKind(assignment.element.kind) }}</span>
+              </li>
+            </ul>
+          </li>
+        </ol>
+      </template>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.schedule-page {
+  min-height: 100vh;
+  min-height: 100svh;
+  padding: 2rem clamp(1.5rem, 6vw, 5rem) 5rem;
+  color: #183029;
+  background: #f4f1e7;
+}
+
+.schedule-shell {
+  width: min(100%, 56rem);
+  margin: clamp(3.5rem, 8vh, 5.5rem) auto 0;
+}
+
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  border-radius: 0.35rem;
+  color: #5e7067;
+  font-size: 0.84rem;
+  font-weight: 750;
+  text-decoration: none;
+}
+
+.back-link:focus-visible,
+.retry-button:focus-visible {
+  outline: 3px solid rgb(86 127 112 / 34%);
+  outline-offset: 0.25rem;
+}
+
+.schedule-introduction {
+  margin-top: 2.75rem;
+}
+
+.eyebrow {
+  margin: 0 0 1rem;
+  color: #926044;
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+h1 {
+  margin: 0;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: clamp(3rem, 7vw, 5.25rem);
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: -0.055em;
+}
+
+.schedule-summary {
+  margin: 1.35rem 0 0;
+  color: #344e45;
+  font-weight: 750;
+}
+
+.schedule-range {
+  margin: 0.5rem 0 0;
+  color: #68776f;
+}
+
+.schedule-days {
+  display: grid;
+  gap: 1rem;
+  margin: 3rem 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-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;
+}
+
+.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: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.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-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: uppercase;
+}
+
+.page-state {
+  display: grid;
+  min-height: 10rem;
+  place-items: center;
+  margin-top: 2.75rem;
+  padding: 2rem;
+  border: 1px solid rgb(24 48 41 / 12%);
+  border-radius: 1rem;
+  color: #68776f;
+  background: rgb(255 253 247 / 72%);
+  text-align: center;
+}
+
+.page-state--error {
+  align-content: center;
+  gap: 1rem;
+}
+
+.page-state--error h1,
+.page-state--error p {
+  margin: 0;
+}
+
+.page-state--error h1 {
+  font-size: clamp(2.25rem, 5vw, 3.6rem);
+}
+
+.retry-button {
+  min-height: 2.65rem;
+  padding: 0.65rem 1rem;
+  border: 1px solid rgb(24 58 49 / 28%);
+  border-radius: 0.7rem;
+  color: #183a31;
+  background: #fffdf7;
+  font-size: 0.82rem;
+  font-weight: 750;
+  cursor: pointer;
+}
+
+@media (max-width: 37.5rem) {
+  .schedule-page {
+    padding: 1.4rem 1.1rem 3rem;
+  }
+
+  .schedule-shell {
+    margin-top: 3rem;
+  }
+
+  .assignment-list li {
+    align-items: flex-start;
+  }
+}
+</style>

frontend/website/src/views/SetLayoutView.vue

@@ -63,6 +63,14 @@ async function retry(): Promise<void> {
           <p class="set-layout__description">
             Explore every element in this set and see how each level fits into the whole.
           </p>
+          <RouterLink
+            v-if="layout.elements.length > 0"
+            class="schedule-link"
+            :to="{ name: 'schedule-create', params: { setId: layout.set.id } }"
+          >
+            Schedule this set
+            <span aria-hidden="true">→</span>
+          </RouterLink>
         </header>
 
         <p
@@ -145,6 +153,31 @@ h1 {
   line-height: 1.7;
 }
 
+.schedule-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-height: 2.8rem;
+  margin-top: 1.5rem;
+  padding: 0.7rem 1rem;
+  border-radius: 0.7rem;
+  color: #fffdf7;
+  background: #183a31;
+  box-shadow: 0 0.55rem 1.2rem rgb(24 58 49 / 14%);
+  font-size: 0.82rem;
+  font-weight: 750;
+  text-decoration: none;
+}
+
+.schedule-link:hover {
+  background: #285c4e;
+}
+
+.schedule-link:focus-visible {
+  outline: 3px solid rgb(86 127 112 / 34%);
+  outline-offset: 0.25rem;
+}
+
 .layout-outline {
   margin-top: 3rem;
 }