@reqquest/ui 1.17.0 → 1.18.0

package/app/src/routes/dashboards/applicant/+page.ts

@@ -0,0 +1,95 @@
+import { api, APP_REQUEST_STATUS_CONFIG, getPastStatuses } from '$internal'
+import type { DashboardAppRequest } from '$internal'
+import type { AppRequestStatus } from '@reqquest/ui'
+import { error } from '@sveltejs/kit'
+import { extractMergedFilters } from '@txstate-mws/carbon-svelte'
+import { sortby, unique } from 'txstate-utils'
+import { uiRegistry } from '$local'
+import type { PageLoad } from './$types'
+import { excludeApplicantRequirementIneligibleApps } from '$internal'
+
+function statusLabelsToEnums (labels: string[]): AppRequestStatus[] {
+  const keys = Object.keys(APP_REQUEST_STATUS_CONFIG) as AppRequestStatus[]
+  return keys.filter(k => labels.includes(APP_REQUEST_STATUS_CONFIG[k].tags[0].label))
+}
+
+export const load: PageLoad = async ({ url, depends, parent }) => {
+  const { access } = await parent()
+  // access is missing only when the layout failed; it renders layoutError in place of the page, so don't mask it
+  if (!access) return {} as never
+  if (!access.viewApplicantDashboard) throw error(403)
+
+  depends('api:getApplicantRequests')
+  depends('api:getOpenPeriods')
+  depends('api:getAccess')
+
+  const filters = extractMergedFilters(url)
+  const currentTab = filters.t ?? 'recent_applications'
+  const recentDays = uiRegistry.config.applicantDashboardRecentDays ?? 30
+  const cutoff = new Date()
+  cutoff.setDate(cutoff.getDate() - recentDays)
+  const recentCutoffIso = cutoff.toISOString()
+
+  const pastStatuses = new Set(getPastStatuses())
+  // an app is "past" only if it's both older than the cutoff AND finished - in a terminal status
+  // or closed (closing leaves the status where it was, e.g. APPROVAL); other apps with active
+  // statuses always stay on the recent tab regardless of age
+  function isPastApp (r: DashboardAppRequest) {
+    return r.updatedAt < recentCutoffIso && (r.closedAt != null || pastStatuses.has(r.status))
+  }
+
+
+  // fetch for all own apps, then split
+  const [allRequests, openPeriods, announcement] = await Promise.all([
+    api.getApplicantRequests({ own: true }),
+    api.getOpenPeriods(),
+    api.getAnnouncement(true)
+  ])
+
+  const allRequestsSansIneligibleApps = excludeApplicantRequirementIneligibleApps(allRequests)
+  if (currentTab === 'past_applications') {
+    const allPastRequests = allRequestsSansIneligibleApps.filter(isPastApp)
+
+    const hasActiveFilters = filters.periodIds?.length > 0 || filters.status?.length > 0 || !!filters.search
+
+    let displayRequests: typeof allPastRequests
+    if (hasActiveFilters) {
+      // "past" is terminal status OR closed, which the API filter cannot express, so narrow on
+      // the server by the user's filters and apply isPastApp here
+      displayRequests = (await api.getApplicantRequests({
+        own: true,
+        updatedBefore: recentCutoffIso,
+        ...(filters.status?.length > 0 && { status: statusLabelsToEnums(filters.status) }),
+        ...(filters.search && { search: filters.search }),
+        ...(filters.periodIds?.length > 0 && { periodIds: filters.periodIds })
+      })).filter(isPastApp)
+    } else {
+      displayRequests = allPastRequests
+    }
+
+    // get the period options available for filtering from the unfiltered past set
+    const periods = allPastRequests.filter(r => r.period.id).map(r => ({ id: r.period.id, name: r.period.name }))
+    const availablePeriods = sortby(unique(periods, 'id'), 'name')
+
+    // get status options available for filtering
+    const statusesInData = new Set(allPastRequests.map(r => r.status))
+    const configKeys = Object.keys(APP_REQUEST_STATUS_CONFIG) as AppRequestStatus[]
+    const availableStatuses = unique(
+      configKeys.filter(k => statusesInData.has(k)).map(k => APP_REQUEST_STATUS_CONFIG[k].tags[0].label)
+    )
+
+    return {
+      appRequests: hasActiveFilters ? displayRequests : allPastRequests,
+      availablePeriods, availableStatuses, openPeriods, access, recentCutoffIso, recentDays,
+      announcement
+    }
+  } else {
+    return {
+      appRequests: allRequestsSansIneligibleApps.filter(r => !isPastApp(r)),
+      openPeriods, access, recentCutoffIso, recentDays,
+      availablePeriods: [] as { id: string, name: string }[],
+      availableStatuses: [] as string[],
+      announcement
+    }
+  }
+}

package/app/src/routes/dashboards/reviewer/+page.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+  import { ColumnList, FieldCheckbox, FieldDate, FieldMultiselect, FilterUI, Pagination, IntroPanel } from '@txstate-mws/carbon-svelte'
+  import { Tile } from 'carbon-components-svelte'
+  import DocExport from 'carbon-icons-svelte/lib/DocumentExport.svelte'
+  import View from 'carbon-icons-svelte/lib/View.svelte'
+  import { DateTime, Duration } from 'luxon'
+  import { tick } from 'svelte'
+  import { pluralize, toQuery } from 'txstate-utils'
+  import { goto } from '$app/navigation'
+  import { resolve } from '$app/paths'
+  import { api, FieldNestedMultiselect, getProgramStatusFilterItems, getReviewerStatusTags, ProgramStatusCell, twoLineDateHtml } from '$internal'
+  import type { PageData } from './$types'
+  import { uiRegistry } from '$local'
+  import { _inReviewStatuses, _reviewCompleteStatuses, _reviewPendingStatuses } from './+page.js'
+
+  export let data: PageData
+  $: ({ appRequests, totalItems, appRequestIndexes, filters, tabCounts, applicantCounts, avgDecisionSeconds, viewMetrics, programs, periods } = data)
+
+  // tab labels carry the count of open requests in that stage
+  $: tabs = [
+    { label: `Review Pending (${tabCounts.pending})`, value: { status: _reviewPendingStatuses }, title: 'Review pending', subtitle: 'These are applications waiting to be started by the review team.' },
+    { label: `In Review (${tabCounts.inReview})`, value: { status: _inReviewStatuses }, title: 'In review', subtitle: 'These are applications currently being reviewed.' },
+    { label: `Review Complete (${tabCounts.complete})`, value: { status: _reviewCompleteStatuses }, title: 'Review complete', subtitle: 'These applications have finished review, including results already released to the applicant.' }
+  ]
+  // the active tab is whichever one's statuses the current filter carries; default to the first
+  $: activeTab = tabs.find(t => t.value.status.some(s => filters.status?.includes(s))) ?? tabs[0]
+
+  function formatDuration (seconds: number) {
+    const d = Duration.fromObject({ seconds: Math.round(seconds) }).shiftTo('days', 'hours', 'minutes').toObject()
+    const parts = (['days', 'hours', 'minutes'] as const).filter(unit => (d[unit] ?? 0) >= 1).map(unit => pluralize(unit.slice(0, -1), Math.floor(d[unit]!), true))
+    return parts.length ? parts.join(', ') : 'under a minute'
+  }
+
+  // export only those requests selected, otherwise export whatever the current filters show.
+  async function downloadCSV (ids?: string[]) {
+    const ticket = await api.getDownloadTicket()
+    const query = '?' + toQuery({ f: ids?.length ? { ids } : filters } as unknown as Parameters<typeof toQuery>[0])
+    location.href = `${api.baseUrl}/csv/${ticket}/requests/reviewerdashboard${DateTime.now().toFormat('yyyyLLddHHmmss')}.csv${query}`
+  }
+
+</script>
+
+<div class='intro-wide [ px-8 ]'>
+  <div class="review-header [ flex justify-between items-start flex-wrap-reverse gap-4 mb-4 ]">
+    <div class="review-tabs">
+      <FilterUI tabs={tabs.map(t => ({ label: t.label, value: t.value }))} tabsAriaLabel="Review stage" />
+    </div>
+    <div class="[ flex gap-2 flex-wrap ]">
+      <Tile class="stat-tile [ flex flex-col gap-4 ]">
+        <span class='[ text-lg ]'>First time application</span>
+        <span>{pluralize('application', applicantCounts.firstTime, true)}</span>
+      </Tile>
+      <Tile class="stat-tile [ flex flex-col gap-4 ]">
+        <span class='[ text-lg ]'>Returning application</span>
+        <span>{pluralize('application', applicantCounts.returning, true)}</span>
+      </Tile>
+      {#if viewMetrics}
+        <Tile class="stat-tile [ flex flex-col gap-4 ]">
+          <span class='[ text-lg ]'>Avg. time to finish review</span>
+          <span>{avgDecisionSeconds != null ? formatDuration(avgDecisionSeconds) : '--:--'}</span>
+        </Tile>
+      {/if}
+    </div>
+  </div>
+
+  <IntroPanel title={activeTab.title} subtitle={activeTab.subtitle} />
+
+  <ColumnList
+    autoHideColumns
+    searchable
+    showExpandAll
+    filterTitle="Request Filters"
+    listActions={[
+      { label: 'Export', icon: DocExport, onClick: () => downloadCSV() }
+    ]}
+    selectedActions={rows => [
+      { label: 'Download selected', icon: DocExport, onClick: () => downloadCSV(rows.map(r => r.id)) }
+    ]}
+    columns={[
+      { id: 'request', label: 'Request #', fixed: '90px', minWidth: 90, tags: row => [{ label: String(row.id) }] },
+      { id: 'period', label: uiRegistry.getWord('period'), render: r => r.period.name },
+      { id: 'login', label: uiRegistry.getWord('login'), minWidth: 100, tags: r => [{ label: r.applicant.login, type: 'green' }] },
+      { id: 'name', label: 'Name', get: 'applicant.fullname' },
+      { id: 'dateSubmitted', label: 'Date Submitted', minWidth: 120, render: r => twoLineDateHtml(r.createdAt) },
+      { id: 'program', label: 'Program', minWidth: 220, component: ProgramStatusCell },
+      { id: 'status', label: 'Application status', minWidth: 150, tags: r => getReviewerStatusTags(r.status, r.phase, r.closedAt) },
+      { id: 'lastUpdated', label: 'Last Updated', minWidth: 120, render: r => twoLineDateHtml(r.updatedAt) },
+      ...appRequestIndexes.map(index => ({
+        id: 'cat_' + index.category,
+        label: index.categoryLabel,
+        render: r => {
+          const matchingIndex = r.indexes?.find(i => i.category === index.category)
+          return (matchingIndex?.values.map(v => ({ label: v.label })) ?? []).join(', ')
+        }
+      }))
+    ]}
+    rows={appRequests}
+    title={uiRegistry.getPlural('appRequest')}
+    actions={r => [
+      {
+        label: 'View',
+        icon: View,
+        // Heisenbug :) Resolved after console dumps slowed it down and worked.
+        // defer navigation one tick past the click's synchronous handling. goto() inside the handler
+        // raced with the action button's click and got dropped on the first uncached click after a fresh page load, required second click to navigate.
+        onClick: async () => {
+          await tick()
+          await goto(resolve(`/requests/${r.id}/approve`))
+        }
+      }
+    ]}
+  >
+    <svelte:fragment slot="filters">
+      <FieldNestedMultiselect path="applicationStatuses" labelText="Program status" items={getProgramStatusFilterItems()} />
+      <FieldMultiselect path="programKeys" labelText="Program" label="Choose one or more" items={programs.map(p => ({ value: p.key, label: p.title }))} />
+      <FieldMultiselect path="periodIds" labelText={uiRegistry.getPlural('period')} label="Choose one or more" items={periods.map(p => ({ value: p.id, label: p.name }))} filterable />
+      <FieldDate path="submittedAfter" labelText="Submitted After" placeholder="Select a date" beginningOfDay />
+      <FieldDate path="submittedBefore" labelText="Submitted Before" placeholder="Select a date" endOfDay />
+      <!-- the dashboard lists open requests; closed ones appear only when asked for here -->
+      <FieldCheckbox path="closed" labelText="Closed or Cancelled only" />
+    </svelte:fragment>
+    <svelte:fragment let:row>
+      <div class="[ mb-2 ]"><strong>Programs</strong></div>
+      <ProgramStatusCell {row} rollup={false} />
+    </svelte:fragment>
+  </ColumnList>
+
+  <Pagination
+    {totalItems}
+    pageSize={25}
+    chooseSize
+  />
+</div>
+
+<style>
+  .intro-wide :global(.intro-panel .content-start) {
+    max-width: none;
+  }
+  /* the header row owns the spacing below the tabs; FilterUI's own bottom margin would double it */
+  .review-tabs :global(.filter-ui-container) {
+    margin-bottom: 0;
+  }
+</style>

package/app/src/routes/dashboards/reviewer/+page.ts

@@ -0,0 +1,43 @@
+import { error, redirect } from '@sveltejs/kit'
+import { extractMergedFilters, extractPaginationParams } from '@txstate-mws/carbon-svelte'
+import { toQuery } from 'txstate-utils'
+import { api, splitStatusFilter } from '$internal'
+import { enumAppRequestStatus, type AppRequestFilter } from '@reqquest/ui'
+import type { PageLoad } from './$types'
+
+export const _reviewPendingStatuses = [enumAppRequestStatus.PREAPPROVAL, enumAppRequestStatus.APPROVAL]
+export const _inReviewStatuses = [enumAppRequestStatus.REVIEW_IN_PROGRESS]
+export const _reviewCompleteStatuses = [enumAppRequestStatus.REVIEW_COMPLETE, enumAppRequestStatus.ACCEPTANCE, enumAppRequestStatus.READY_TO_ACCEPT, enumAppRequestStatus.ACCEPTED, enumAppRequestStatus.NOT_ACCEPTED, enumAppRequestStatus.APPROVED, enumAppRequestStatus.NOT_APPROVED]
+/** Everything the dashboard can show: the union of the three tabs. */
+export const _reviewerDashboardStatuses = [..._reviewPendingStatuses, ..._inReviewStatuses, ..._reviewCompleteStatuses]
+export const _defaultReviewerDashboardFilters = { t: { status: _reviewPendingStatuses } }
+
+export const load: PageLoad = async ({ url, parent }) => {
+  const { access } = await parent()
+  // access is missing only when the layout failed; it renders layoutError in place of the page, so don't mask it
+  if (!access) return {} as never
+  if (!access.viewReviewerInterface) throw error(403)
+  if (!url.search) redirect(302, '?' + toQuery(_defaultReviewerDashboardFilters))
+  const { page, pagesize } = extractPaginationParams(url)
+  const { status, closed: closedOnly, ...rest } = extractMergedFilters(url)
+  // open requests by default; closed ones only when the Filter pop-out's "Closed or Cancelled only" is checked
+  const closed = closedOnly === true
+  const merged: AppRequestFilter = { ...rest, status: splitStatusFilter(status).status, closed }
+
+  const [{ appRequests, pageInfo, appRequestIndexes }, pending, inReview, complete, applicantCounts, avgDecisionSeconds, programs, periods] = await Promise.all([
+    api.getReviewerDashboardRequests(merged, {
+      page,
+      perPage: pagesize ?? 25
+    }),
+    // counts and tiles follow the same open/closed choice as the list, so they describe what it can show
+    api.getApplicationCount({ closed, status: _reviewPendingStatuses }),
+    api.getApplicationCount({ closed, status: _inReviewStatuses }),
+    api.getApplicationCount({ closed, status: _reviewCompleteStatuses }),
+    api.getAppRequestApplicantCounts({ closed, status: _reviewerDashboardStatuses }),
+    access.viewMetrics ? api.getReviewDecisionTiming() : Promise.resolve(null),
+    api.getPrograms(),
+    api.getPeriodList()
+  ])
+
+  return { appRequests, totalItems: pageInfo.appRequests!.totalItems ?? appRequests.length, filters: merged, appRequestIndexes, tabCounts: { pending, inReview, complete }, applicantCounts, avgDecisionSeconds, viewMetrics: !!access?.viewMetrics, programs, periods }
+}

package/app/src/routes/periods/+page.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import { ColumnList, FieldDateTime, FieldSelect, FieldTextInput, Panel, PanelFormDialog } from '@txstate-mws/carbon-svelte'
+  import { InlineNotification, Modal } from 'carbon-components-svelte'
+  import Edit from 'carbon-icons-svelte/lib/Edit.svelte'
+  import SettingsEdit from 'carbon-icons-svelte/lib/SettingsEdit.svelte'
+  import Add from 'carbon-icons-svelte/lib/Add.svelte'
+  import TrashCan from 'carbon-icons-svelte/lib/TrashCan.svelte'
+  import { DateTime } from 'luxon'
+  import { isBlank } from 'txstate-utils'
+  import { invalidate } from '$app/navigation'
+  import { base } from '$app/paths'
+  import { api } from '$internal'
+  import { uiRegistry } from '$local'
+  import type { PeriodUpdate } from '@reqquest/ui'
+  import type { PageData } from './$types'
+
+  type Period = PageData['periods'][number] & { copyPeriodId?: string }
+
+  export let data: PageData
+  $: ({ periods, access } = data)
+
+  function renderDate (prop: 'openDate' | 'closeDate' | 'archiveDate') {
+    return (period: Period) => {
+      const date = period[prop]
+      if (isBlank(date)) return ''
+      return new Date(date).toLocaleDateString()
+    }
+  }
+
+  let creatingPeriod = false
+  let editingPeriod: Period | undefined
+  let deleteDialog = false
+  let deletingPeriod: Period | undefined
+
+  async function validate (period: Period) {
+    const response = editingPeriod ? await api.updatePeriod(editingPeriod.id, periodToPeriodUpdate(period), true) : await api.createPeriod(periodToPeriodUpdate(period), true)
+    return response.messages
+  }
+
+  async function submit (period: Period) {
+    const response = editingPeriod ? await api.updatePeriod(editingPeriod.id, periodToPeriodUpdate(period), false) : await api.createPeriod(periodToPeriodUpdate(period), false, period.copyPeriodId)
+    return {
+      ...response,
+      data: period
+    }
+  }
+
+  function periodToPeriodUpdate (period: Period): PeriodUpdate {
+    return { name: period.name, code: period.code, openDate: period.openDate, closeDate: period.closeDate, archiveDate: period.archiveDate }
+  }
+
+  function closeDialog () {
+    creatingPeriod = false
+    editingPeriod = undefined
+  }
+
+  function displayPhase (period: Period) {
+    let { openDate: oDate, closeDate: cDate, archiveDate: aDate } = period
+    const now = Date.now()
+    const openDate = DateTime.now().toMillis()
+
+    if (now < openDate) {
+      return [{ label: 'Start pending' }]
+    } else if (cDate) {
+      const closeDate = DateTime.fromISO(cDate).toMillis()
+      if (now < closeDate) return [{ label: 'OPEN' }]
+      else if (now > closeDate) return [{ label: 'CLOSED' }]
+      else if (aDate && now > DateTime.fromISO(aDate).toMillis()) return [{ label: 'ARCHIVED' }]
+    }
+
+    return []
+  }
+
+  async function onSaved () {
+    closeDialog()
+    await invalidate('api:getPeriodList')
+  }
+
+  function closePeriodDeleteDialog () {
+    deleteDialog = false
+    deletingPeriod = undefined
+  }
+  function openPeriodDeleteDialog (period: Period) {
+    deleteDialog = true
+    deletingPeriod = period
+  }
+  async function executePeriodDelete () {
+    if (!deletingPeriod) return
+    const success = await api.deletePeriod(deletingPeriod.id)
+    if (success) {
+      closePeriodDeleteDialog()
+      invalidate('api:getPeriodList').catch(console.error)
+    }
+  }
+</script>
+
+<Panel
+  title={uiRegistry.getWord('period')}
+  actions={[
+    {
+      label: `Add ${uiRegistry.getWord('period')}`,
+      disabled: !access.createPeriod,
+      icon: Add,
+      onClick: () => { creatingPeriod = true; editingPeriod = undefined }
+    }
+]}>
+  <ColumnList
+  title={uiRegistry.getPlural('period')}
+  columns={[
+    { id: 'period', label: uiRegistry.getWord('period'), get: 'name' },
+    { id: 'code', label: 'Code', tags: (row) => row.code ? [{ label: row.code, type: 'green' }] : [] },
+    { id: 'phase', label: 'Phase', tags: displayPhase },
+    { id: 'openDate', label: 'Start Date', render: renderDate('openDate') },
+    { id: 'closeDate', label: 'Close Date', render: renderDate('closeDate') },
+    { id: 'archiveDate', label: 'Archive Date', render: renderDate('archiveDate') },
+  ]}
+  rows={periods}
+  actions={p => [
+    { label: 'Configure', icon: SettingsEdit, href: `${base}/periods/${p.id}/configure`, disabled: !p.actions.update },
+    { label: 'Edit', icon: Edit, onClick: () => { creatingPeriod = false; editingPeriod = p }, disabled: !p.actions.update },
+    { label: 'Delete', icon: TrashCan, disabled: !p.actions.delete, onClick: () => openPeriodDeleteDialog(p) }
+  ]}
+  actionsMaxButtons={1}
+/>
+</Panel>
+
+<PanelFormDialog open={creatingPeriod || !!editingPeriod} title={editingPeriod ? `Edit ${uiRegistry.getWord('period')}` : `Create ${uiRegistry.getWord('period')}`}
+  preload={editingPeriod} {validate} {submit} on:saved={onSaved} on:cancel={closeDialog}>
+  <InlineNotification
+    kind='info'
+    title="Configuration Updated"
+    subtitle="You can update configurations once the new period is added."
+    lowContrast
+  />
+  <FieldSelect
+    labelText={`${uiRegistry.getWord('period')} configurations copied from`}
+    helpText='Help Text'
+    items={periods.map(p => ({ value: p.id, label: p.name }))}
+    path='copyPeriod'
+  />
+  <FieldTextInput path="name" labelText={`${uiRegistry.getWord('period')} Name`} required notNull />
+  <FieldTextInput path="code" labelText="Code" />
+  <FieldDateTime path="openDate" labelText="Open Date" required defaultValue={new Date().toISOString()} />
+  <FieldDateTime path="closeDate" labelText="Close Date" />
+  <FieldDateTime path="archiveDate" labelText="Archive Date" />
+</PanelFormDialog>
+<Modal
+  bind:open={deleteDialog}
+  modalHeading={`Delete ${uiRegistry.getWord('period')}`}
+  primaryButtonText="Delete"
+  secondaryButtonText="Cancel"
+  size="sm"
+  on:click:button--secondary={closePeriodDeleteDialog}
+  on:submit={executePeriodDelete}
+>
+  <p>Are you sure you want to delete the {uiRegistry.getWord('period').toLowerCase()} {deletingPeriod?.name}?</p>
+  <p>This action cannot be undone.</p>
+</Modal>

package/app/src/routes/periods/+page.ts

@@ -0,0 +1,13 @@
+import { api } from '$internal'
+import { error } from '@sveltejs/kit'
+import type { PageLoad } from './$types'
+
+export const load: PageLoad = async ({ depends, parent }) => {
+  const { access } = await parent()
+  // access is missing only when the layout failed; it renders layoutError in place of the page, so don't mask it
+  if (!access) return {} as never
+  if (!access.viewPeriodManagement) throw error(403)
+  const periods = await api.getPeriodList()
+  depends('api:getPeriodList')
+  return { periods }
+}

package/app/src/routes/periods/[id]/configure/+page.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+  import { FieldTextInput, PanelFormDialog } from '@txstate-mws/carbon-svelte'
+  import { InlineNotification, Modal, NotificationActionButton, Tab, TabContent, Tabs } from 'carbon-components-svelte'
+  import { keyby } from 'txstate-utils'
+  import { invalidate } from '$app/navigation'
+  import { page } from '$app/stores'
+  import { api, MissingDefinitionNotification, PeriodPanel } from '$internal'
+  import type { PageData } from './$types'
+  import { uiRegistry } from '$local'
+
+  export let data: PageData
+  $: ({ programs, period } = data)
+
+  $: programsByKey = keyby(programs, 'key')
+  $: programTitles = Object.fromEntries(programs.map(p => [p.key, p.title])) as Record<string, string>
+  $: sharedProgramRequirements = programs.reduce<Record<string, string[] | undefined>>((acc, curr) => {
+    curr.requirements.forEach(r => {
+      acc[r.key] ??= []
+      acc[r.key]!.push(curr.key)
+    })
+    return acc
+  }, {})
+
+  // Modal State
+  let sharedModal: { open: boolean, requirementKey: string | null } = { open: false, requirementKey: null }
+
+  type Program = PageData['programs'][number]
+  type Requirement = PageData['programs'][number]['requirements'][number]
+  type Prompt = PageData['programs'][number]['requirements'][number]['prompts'][number]
+
+  let editingConfiguration = false
+  let editingConfigurationType: 'prompt' | 'requirement' | 'program' | undefined = undefined
+  let editingConfigurationDef: Requirement | Prompt | Program | undefined
+  let editingConfigurationFetched: any
+
+  function closeConfigurationDialog () {
+    editingConfiguration = false
+    editingConfigurationType = undefined
+    editingConfigurationDef = undefined
+    editingConfigurationFetched = undefined
+  }
+
+  function onClick (type: 'prompt' | 'requirement' | 'program', def: Requirement | Prompt | Program) {
+    return async () => {
+      editingConfigurationFetched = type === 'program' ? {} : await api.getConfigurationFetched(period.id, def.key)
+      editingConfiguration = true
+      editingConfigurationType = type
+      editingConfigurationDef = def
+    }
+  }
+
+  async function onSubmit (data: any) {
+    const { success, messages } = await api.updateConfiguration($page.params.id!, editingConfigurationDef!.key, data, false)
+    return {
+      success,
+      messages,
+      data
+    }
+  }
+
+  async function onValidate (data: any) {
+    const { messages } = await api.updateConfiguration($page.params.id!, editingConfigurationDef!.key, data, true)
+    return messages
+  }
+
+  async function onSaved () {
+    await invalidate('api:getPeriodConfigurations')
+    closeConfigurationDialog()
+  }
+
+  const openModal = (key: string) => () => {
+    sharedModal = { open: true, requirementKey: key }
+  }
+
+  async function confirmReview () {
+    await api.markPeriodReviewed(period.id, false)
+    await invalidate('api:getPeriodConfigurations')
+  }
+
+  $:enabledPrograms = programs.filter(p => p.enabled)
+  $:disabledPrograms = programs.filter(p => !p.enabled)
+
+</script>
+
+<!-- Configuring Period: {period.name}{#if period.code} ({period.code}){/if} -->
+
+{#if !period.reviewed}
+  <InlineNotification kind='warning' lowContrast title={`${period.name} period configurations:`} subtitle={`Please confirm when ${period.name} configuration updates are complete`} >
+    <svelte:fragment slot="actions">
+      <NotificationActionButton on:click={confirmReview}>Confirm Review</NotificationActionButton>
+    </svelte:fragment>
+  </InlineNotification>
+{/if}
+
+<Tabs autoWidth>
+  <Tab label={`Enabled Programs (${enabledPrograms.length})`} />
+  <Tab label={`Disabled Programs (${disabledPrograms.length})`} />
+  <svelte:fragment slot='content'>
+    <TabContent>
+      {#each enabledPrograms as program (program.key)}
+        <PeriodPanel {program} {sharedProgramRequirements} {programTitles} {openModal} {onClick} {uiRegistry} />
+      {/each}
+    </TabContent>
+    <TabContent>
+      {#each disabledPrograms as program (program.key)}
+        <PeriodPanel {program} {sharedProgramRequirements} {programTitles} {openModal} {onClick} {uiRegistry} />
+      {/each}
+    </TabContent>
+  </svelte:fragment>
+</Tabs>
+
+{#if editingConfiguration && editingConfigurationDef != null}
+  {#if editingConfigurationType === 'program'}
+    <PanelFormDialog open submit={onSubmit} validate={onValidate} title="Rename Program" on:cancel={closeConfigurationDialog} on:saved={onSaved} preload={editingConfigurationDef.configuration.data}>
+      <p class="mb-4">These names apply to this period only. Leave a field blank to use the program's default name.</p>
+      <FieldTextInput path="title" labelText="Title" placeholder={editingConfigurationDef.title} maxlength={255} />
+      <FieldTextInput path="navTitle" labelText="Navigation title" helperText="Shorter name shown in navigation. Defaults to the title above when blank." placeholder={'navTitle' in editingConfigurationDef ? editingConfigurationDef.navTitle : undefined} maxlength={255} />
+    </PanelFormDialog>
+  {:else if editingConfigurationType === 'prompt'}
+    {@const def = uiRegistry.getPrompt(editingConfigurationDef.key)}
+    <PanelFormDialog open submit={onSubmit} validate={onValidate} title="Edit Configuration" on:cancel={closeConfigurationDialog} on:saved={onSaved} preload={editingConfigurationDef.configuration.data} fetched={editingConfigurationFetched} let:data>
+      {#if def?.configureComponent == null}
+        <MissingDefinitionNotification kind="prompt" definitionKey={editingConfigurationDef.key} />
+      {:else}
+        <svelte:component this={def.configureComponent} {data} fetched={editingConfigurationFetched} />
+      {/if}
+    </PanelFormDialog>
+  {:else}
+    {@const def = uiRegistry.getRequirement(editingConfigurationDef.key)}
+    <PanelFormDialog open submit={onSubmit} validate={onValidate} title="Edit Configuration" on:cancel={closeConfigurationDialog} on:saved={onSaved} preload={editingConfigurationDef.configuration.data} fetched={editingConfigurationFetched} let:data>
+      {#if def?.configureComponent == null}
+        <MissingDefinitionNotification kind="requirement" definitionKey={editingConfigurationDef.key} />
+      {:else}
+        <svelte:component this={def.configureComponent} {data} fetched={editingConfigurationFetched}/>
+      {/if}
+    </PanelFormDialog>
+  {/if}
+{/if}
+
+<Modal
+  passiveModal
+  bind:open={sharedModal.open}
+  modalHeading="Shared Requirements"
+  >
+    {@const sharedPrograms = sharedProgramRequirements[sharedModal.requirementKey!]?.map(key => programsByKey[key]) ?? []}
+    {#each sharedPrograms as p (p.key)}
+      <p>{p.title}</p>
+      <hr/>
+    {/each}
+</Modal>

package/app/src/routes/periods/[id]/configure/+page.ts

@@ -0,0 +1,10 @@
+import { api } from '$internal'
+import { error } from '@sveltejs/kit'
+import type { PageLoad } from './$types'
+
+export const load: PageLoad = async ({ params, depends }) => {
+  const { programs, period } = await api.getPeriodConfigurations(params.id)
+  depends('api:getPeriodConfigurations')
+  if (!period) throw error(404, 'Period not found')
+  return { programs, period }
+}