@reqquest/ui 1.17.0 → 1.19.0

package/app/src/routes/requests/[id]/apply/+layout.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+  import { ErrorPage, ProgressNav, type RootStepItem, type StepItem } from '@txstate-mws/carbon-svelte'
+  import { setContext } from 'svelte'
+  import { writable } from 'svelte/store'
+  import { resolve } from '$app/paths'
+  import { page } from '$app/stores'
+  import { applicantVisiblePromptVisibilities, submissionRequirementTypes } from '$internal'
+  import { enumRequirementType } from '@reqquest/ui'
+  import type { LayoutData } from './$types'
+
+  export let data: LayoutData
+  $: ({ appRequestForExport, prequalPrompts, postqualPrompts, applicationsForNav } = data)
+
+  function getNavItems (..._: any[]) {
+    const navItems: RootStepItem[] = []
+    let nextHref: string | undefined
+    let prevHref: string | undefined
+    let foundCurrent = false
+    let lastprompt: string | undefined
+    for (const prompt of prequalPrompts) {
+      if (foundCurrent) {
+        nextHref = resolve(`/requests/${appRequestForExport.id}/apply/${prompt.id}`)
+        foundCurrent = false
+      } else if ($page.params.promptId === prompt.id) {
+        foundCurrent = true
+        if (lastprompt) prevHref = resolve(`/requests/${appRequestForExport.id}/apply/${lastprompt}`)
+      }
+      lastprompt = prompt.id
+      navItems.push({
+        id: `prompt${prompt.id}`,
+        label: prompt.navTitle,
+        href: resolve(`/requests/${appRequestForExport.id}/apply/${prompt.id}`),
+        type: $page.params.promptId === prompt.id
+          ? 'current'          
+          : prompt.answered && !prompt.invalidated
+            ? 'complete' 
+            : prompt.answered && prompt.invalidated
+              ? 'warning'
+              : 'available',
+        substeps: []
+      })
+    }
+    const outstandingPrequal = prequalPrompts.find(p =>
+      (!p.answered || p.invalidated) && applicantVisiblePromptVisibilities.has(p.visibility) && !p.moot)
+    if (outstandingPrequal) {
+      nextHref = resolve(`/requests/${appRequestForExport.id}/apply/${outstandingPrequal.id}`)
+    } else {
+      if (foundCurrent) nextHref = resolve(`/requests/${appRequestForExport.id}/apply/programs`)
+      foundCurrent = false
+      if ($page.route.id === '/requests/[id]/apply/programs') {
+        const promptsUnderPrograms = applicationsForNav
+          .flatMap(app => app.requirements.filter(r => r.type === enumRequirementType.QUALIFICATION))
+          .flatMap(r => r.prompts)
+          .filter(r => !r.optOut)
+        const qualFinished = promptsUnderPrograms.every(p => p.answered && !p.invalidated)
+        const postFinished = postqualPrompts.every(p => p.answered && !p.invalidated)
+        if (!qualFinished) {
+          const prompt = promptsUnderPrograms.find(p => !p.answered || p.invalidated)
+          nextHref = resolve(`/requests/${appRequestForExport.id}/apply/${prompt!.id}`)
+        } else if (!postFinished) {
+          const prompt = postqualPrompts.find(p => !p.answered || p.invalidated)
+          nextHref = resolve(`/requests/${appRequestForExport.id}/apply/${prompt!.id}`)
+        } else {
+          nextHref = resolve(`/requests/${appRequestForExport.id}/apply/review`)
+        }
+        if (lastprompt) {
+          prevHref = resolve(`/requests/${appRequestForExport.id}/apply/${lastprompt}`)
+        }
+      }
+      const programReview: RootStepItem = {
+        id: 'programs',
+        label: 'Program review',
+        href: resolve(`/requests/${appRequestForExport.id}/apply/programs`),
+        type: $page.route.id === '/requests/[id]/apply/programs' ? 'current' : 'available',
+        substeps: []
+      }
+      navItems.push(programReview)
+      let pastProgramReview = false
+      for (const application of applicationsForNav) {
+        const substeps: StepItem[] = []
+        lastprompt = undefined
+        for (const requirement of application.requirements) {
+          if (!submissionRequirementTypes.has(requirement.type)) continue
+          for (const prompt of requirement.prompts) {
+            if (prompt.optOut) continue
+            if (foundCurrent) {
+              nextHref = resolve(`/requests/${appRequestForExport.id}/apply/${prompt.id}`)
+              foundCurrent = false
+            }
+            if ($page.params.promptId === prompt.id) {
+              pastProgramReview = true
+              foundCurrent = true
+              if (lastprompt) prevHref = resolve(`/requests/${appRequestForExport.id}/apply/${lastprompt}`)
+              else prevHref = resolve(`/requests/${appRequestForExport.id}/apply/programs`)
+            }
+            lastprompt = prompt.id
+            substeps.push({
+              id: `prompt${prompt.id}`,
+              label: prompt.navTitle,
+              href: resolve(`/requests/${appRequestForExport.id}/apply/${prompt.id}`),
+              type: $page.params.promptId === prompt.id
+                ? 'current'          
+                : prompt.answered && !prompt.invalidated
+                  ? 'complete' 
+                  : prompt.answered && prompt.invalidated
+                    ? 'warning'
+                    : 'available'
+            })
+          }
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- it can definitely be both true and false, typescript is doing something crazy
+        if (foundCurrent) {
+          nextHref = resolve(`/requests/${appRequestForExport.id}/apply/programs`)
+          foundCurrent = false
+        }
+       if (substeps.length > 0) {
+          navItems.push({
+            id: `application${application.id}`,
+            label: application.navTitle,
+            href: substeps[0].href,
+            type: substeps.some(s => s.type === 'warning')
+              ? 'warning'
+              : substeps.some(s => s.type === 'current')
+                ? 'current'
+                : substeps.every(s => s.type === 'complete')
+                  ? 'complete'
+                  : 'available',
+            substeps
+          })
+        }
+      }
+      lastprompt = undefined
+      for (const prompt of postqualPrompts) {
+        if (foundCurrent) {
+          nextHref = resolve(`/requests/${appRequestForExport.id}/apply/${prompt.id}`)
+          foundCurrent = false
+        }
+        if ($page.params.promptId === prompt.id) {
+          pastProgramReview = true
+          foundCurrent = true
+          if (lastprompt) prevHref = resolve(`/requests/${appRequestForExport.id}/apply/${lastprompt}`)
+          else prevHref = resolve(`/requests/${appRequestForExport.id}/apply/programs`)
+        }
+        lastprompt = prompt.id
+        navItems.push({
+          id: `prompt${prompt.id}`,
+          label: prompt.navTitle,
+          href: resolve(`/requests/${appRequestForExport.id}/apply/${prompt.id}`),
+          type: $page.params.promptId === prompt.id
+            ? 'current'
+            : prompt.answered && !prompt.invalidated ? 'complete' : 'available',
+          substeps: []
+        })
+      }
+      if ($page.route.id === '/requests/[id]/apply/review') pastProgramReview = true
+      navItems.push({
+        id: 'review',
+        label: 'Review submission',
+        href: resolve(`/requests/${appRequestForExport.id}/apply/review`),
+        type: $page.route.id === '/requests/[id]/apply/review' ? 'current' : 'available',
+        substeps: []
+      })
+      if (pastProgramReview) programReview.type = 'complete'
+    }
+    nextHref ??= resolve(`/requests/${appRequestForExport.id}/apply/review`)
+    return { navItems, nextHref, prevHref }
+  }
+  $: ({ navItems, nextHref, prevHref } = getNavItems(appRequestForExport, prequalPrompts, $page))
+  $: notInNavigation = !navItems.some(item => item.type === 'current' || item.substeps.some(s => s.type === 'current'))
+  const nextHrefStore = writable({ nextHref, prevHref })
+  $: nextHrefStore.set({ nextHref, prevHref })
+  setContext('nextHref', nextHrefStore)
+</script>
+
+<ProgressNav steps={navItems}>
+  {#if notInNavigation}
+    <ErrorPage error={{ status: 404, message: 'Not Found' }} />
+  {:else}
+    <slot />
+  {/if}
+</ProgressNav>

package/app/src/routes/requests/[id]/apply/+layout.ts

@@ -0,0 +1,12 @@
+import { api } from '$internal'
+import { error } from '@sveltejs/kit'
+import type { LayoutLoad } from './$types'
+
+export const load: LayoutLoad = async ({ params, depends }) => {
+  const { appRequest, ...applicationInfo } = await api.getAppRequestForExport(params.id)
+  depends('request:apply')
+  // separate depend key so the nav/answered state can be refreshed without re-running the prompt page load, which was remounting the current prompt and could flash a skeleton.
+  depends('request:apply:nav')
+  if (!appRequest.actions.viewApplyUI) throw error(404, 'This application cannot be edited at this time.')
+  return { ...applicationInfo, appRequestForExport: { ...appRequest, applications: undefined } }
+}

package/app/src/routes/requests/[id]/apply/+page.ts

@@ -0,0 +1,14 @@
+import { redirect } from '@sveltejs/kit'
+import { resolve } from '$app/paths'
+import { applicantVisiblePromptVisibilities } from '$internal'
+import type { PageLoad } from './$types'
+
+export const load: PageLoad = async ({ params, parent }) => {
+  const { prequalPrompts } = await parent()
+  for (const prompt of prequalPrompts) {
+    if ((!prompt.answered || prompt.invalidated) && applicantVisiblePromptVisibilities.has(prompt.visibility) && !prompt.moot) {
+      throw redirect(303, resolve(`/requests/${params.id}/apply/${prompt.id}`))
+    }
+  }
+  throw redirect(303, resolve(`/requests/${params.id}/apply/programs`))
+}

package/app/src/routes/requests/[id]/apply/ProgressNavContainer.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  export let title: string | undefined = undefined
+  export let subtitle: string | undefined = undefined
+</script>
+<div class="progress-nav-outer">
+  <div class="progress-nav-inner">
+    {#if title}<h2>{title}</h2>{/if}
+    {#if subtitle}<div class="progress-nav-subtitle">{subtitle}</div>{/if}
+    <slot />
+  </div>
+</div>
+
+<style>
+  .progress-nav-outer {
+    container-type: inline-size;
+  }
+
+  .progress-nav-inner {
+    width: min(90%, 800px);
+    margin: 0 auto;
+  }
+  @media (max-width: 600px) {
+    .progress-nav-inner {
+      width: 100%;
+    }
+  }
+
+  h2, .progress-nav-subtitle {
+    text-align: center;
+  }
+
+  h2 {
+    font-weight: bold;
+    font-size: 1.5rem;
+    margin-bottom: 1.2rem;
+  }
+
+  .progress-nav-subtitle {
+    font-size: 0.9rem;
+    margin-bottom: 1.2rem;
+  }
+</style>

package/app/src/routes/requests/[id]/apply/[promptId]/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { ApplicantPromptPage } from '$internal'
+  import DelayedSkeleton from '$internal/components/DelayedSkeleton.svelte';
+  import { uiRegistry } from '$local';
+  import type { PageData } from './$types'
+
+  export let data: PageData
+  $: loader = uiRegistry.getPrompt(data.basicPromptData.key)?.loader
+
+
+</script>
+
+{#await data.applicantPromptPromise}
+  <div class="prompt-intro flow max-w-screen-md mx-auto pt-10 px-6">
+    <!-- svelte-ignore a11y_autofocus -->
+    <h2 id="prompt-title" tabindex="-1" autofocus class="font-bold text-2xl leading-normal text-center">{data.basicPromptData.title}</h2>
+  </div>
+  {#if loader}
+    <DelayedSkeleton {loader} />
+  {/if}
+{:then { prompt, appRequest }}
+  <ApplicantPromptPage data={{ prompt, appRequest, dataVersion: appRequest.dataVersion }} statusReasons={data.basicPromptData?.statusReasons ?? []} />
+{/await}

package/app/src/routes/requests/[id]/apply/[promptId]/+page.ts

@@ -0,0 +1,11 @@
+import { api } from '$internal'
+import { error } from '@sveltejs/kit'
+import type { PageLoad } from './$types'
+
+export const load: PageLoad = async ({ url, params, depends, parent }) => {
+  const { promptsById } = await parent()
+  depends('request:apply')
+  const basicPromptData = promptsById[params.promptId]
+  const applicantPromptPromise =  api.getApplicantPrompt(params.id, params.promptId)
+  return { applicantPromptPromise, basicPromptData }
+}

package/app/src/routes/requests/[id]/apply/programs/+page.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { Button } from 'carbon-components-svelte'
+  import { Panel } from '@txstate-mws/carbon-svelte'
+  import { getContext } from 'svelte'
+  import type { Writable } from 'svelte/store'
+  import { afterNavigate } from '$app/navigation'
+  import type { PageData } from './$types'
+  import ProgressNavContainer from '../ProgressNavContainer.svelte'
+  import { ApplicantProgramList, DEFAULT_APPLICANT_NO_PROGRAMS_MESSAGE, isHiddenFromApplicant, isIneligibleByApplicantRequirement } from '$internal'
+  import { uiRegistry } from '$local'
+  import { enumApplicationStatus } from '@reqquest/ui'
+
+  export let data: PageData
+  $: ({ applicationsForNav, appRequestForExport } = data)
+  $: eligibleApplicationsForNav = applicationsForNav.filter(a => a.ineligiblePhase == null)
+  $: ineligibleApplicationsForNav = applicationsForNav.filter(a => isIneligibleByApplicantRequirement(a) && !isHiddenFromApplicant(a))
+  $: noProgramsToList = !eligibleApplicationsForNav.length && !ineligibleApplicationsForNav.length && applicationsForNav.some(isHiddenFromApplicant)
+
+  let prevHref: string | undefined
+  let nextHref: string | undefined
+  const getNextHref = getContext<Writable<{ nextHref: string | undefined, prevHref: string | undefined }>>('nextHref')
+  $: ({ prevHref, nextHref } = $getNextHref)
+
+  afterNavigate(() => {
+    const h2 = document.querySelector('h2')
+    if (h2) {
+      h2.tabIndex = -1
+      h2.focus()
+    }
+  })
+</script>
+
+<ProgressNavContainer title="Your potential benefits" subtitle={noProgramsToList ? (uiRegistry.config.applicantNoProgramsMessage ?? DEFAULT_APPLICANT_NO_PROGRAMS_MESSAGE) : 'Based on your responses so far, you may be eligible for the benefits listed below.  If you believe you qualify for additional benefits, you may need to review your answers, complete additional questions, or provide supporting documentation before eligibility can be confirmed.'}>
+  <div class="max-w-screen-md mx-auto">    
+    {#if eligibleApplicationsForNav.length > 0} 
+      <ApplicantProgramList applications={eligibleApplicationsForNav} appRequest={appRequestForExport} />
+    {/if}
+    {#if eligibleApplicationsForNav.some(a => a.status === enumApplicationStatus.INELIGIBLE)}
+      <div class="program-helptext">
+        If you believe you should be eligible, read the tooltips above and review your answers. If you believe there is an error, please contact us.
+      </div>
+    {/if}
+  </div>
+  {#if ineligibleApplicationsForNav.length > 0}  
+    <div class="max-w-screen-md mx-auto">    
+      <Panel title="Ineligible benefits" expandable={true} expanded={true}>
+        <ApplicantProgramList applications={ineligibleApplicationsForNav} appRequest={appRequestForExport} />
+      </Panel>
+    </div>
+  {/if}
+  <div class='form-submit flex gap-12 justify-center mt-16'>
+    {#if prevHref}
+      <Button kind="ghost" href={prevHref}>Back</Button>
+    {/if}
+    <Button type="submit" href={nextHref}>
+      {#if nextHref?.endsWith('/review')}
+        Review {uiRegistry.getWord('appRequest')}
+      {:else}
+        Continue
+      {/if}
+    </Button>
+  </div>
+
+</ProgressNavContainer>
+
+<style>
+  .program-helptext {
+    text-align: center;
+    font-size: 0.9rem;
+  }
+</style>

package/app/src/routes/requests/[id]/apply/review/+page.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { toasts } from '@txstate-mws/svelte-components'
+  import { Button, Loading } from 'carbon-components-svelte'
+  import Touch_1 from 'carbon-icons-svelte/lib/Touch_1.svelte'
+  import { getContext } from 'svelte'
+  import type { Writable } from 'svelte/store'
+  import { afterNavigate, goto } from '$app/navigation'
+  import { resolve } from '$app/paths'
+  import type { ResolvedPathname } from '$app/types'
+  import { api, ApplicationDetailsView } from '$internal'
+  import { enumAppRequestStatus } from '@reqquest/ui'
+  import type { PageData } from './$types'
+  import { uiRegistry } from '$local'
+  import { enumIneligiblePhases } from '@reqquest/ui'
+
+  /**
+   * This page will allow applicants to review all the information they've
+   * entered so far, and to navigate to any prompts that need correction, then
+   * allows them to submit the app request.
+   */
+  export let data: PageData
+  $: ({ appRequestForExport, prequalPrompts, postqualPrompts, applicationsForNav } = data)
+
+  const nextHref = getContext<Writable<{ nextHref?: ResolvedPathname, prevHref?: ResolvedPathname }>>('nextHref')
+  $: previousHref = nextHref ? $nextHref.prevHref : undefined
+
+  $: loading = false
+
+  async function handleBack () {
+    if (previousHref) {
+      // eslint-disable-next-line svelte/no-navigation-without-resolve -- already resolved
+      await goto(previousHref)
+    }
+  }
+
+  async function onSubmit () {
+    loading = true
+    const resp = await api.appRequestPhaseChange(appRequestForExport.id, 'submitAppRequest')
+    loading = false
+    if (resp.success) {
+      toasts.add({ type: 'success', title: 'Submission Succeeded', message: 'Successfully submitted application for review' })
+      await goto(resolve('/dashboards/applicant'))
+    } else {
+      toasts.add({ type: 'error', title: 'Submission Failed', message: resp.messages.map(m => m.message).join('\n') || 'There was an error submitting your application. Please try again later.' })
+    }
+  }
+
+  afterNavigate(({ from }) => {
+    if (from?.url?.pathname) previousHref = from.url.pathname + from.url.search
+    const h2 = document.querySelector('h2')
+    if (h2) {
+      h2.tabIndex = -1
+      h2.focus()
+    }
+  })
+</script>
+{#if loading}
+  <Loading />
+{/if}
+<div class:max-w-screen-md={uiRegistry.config.applicantReviewMaxWidth !== false} class:mx-auto={uiRegistry.config.applicantReviewMaxWidth !== false}>
+  <ApplicationDetailsView
+    appRequest={appRequestForExport}
+    applications={applicationsForNav}
+    appData={appRequestForExport.data}
+    {prequalPrompts}
+    {postqualPrompts}
+    {uiRegistry}
+    title={uiRegistry.config.applicantReview?.title ?? "Review your application"}
+    subtitle={uiRegistry.config.applicantReview?.subTitle ?? "Confirm the benefits shown are the ones you are requesting and that your responses are correct, or make changes before submitting."}
+    expandable={false}
+    showWarningsInline={true}
+    showAppRequestStatus={false}
+    statusDisplay="icons"
+  >
+    <svelte:fragment slot="footer">
+      <footer class="[ mt-6 ] flow">
+        {#if uiRegistry.config.supportUrl}
+          <p class="text-center">If you think this was a mistake please review your answers or reach out through the support page.</p>
+        {/if}
+        <div class="footer-actions">
+          {#if previousHref}
+              <Button kind="ghost" on:click={handleBack}>Back</Button>
+          {/if}
+          {#if uiRegistry.config.supportUrl}
+              <Button kind="ghost" href={uiRegistry.config.supportUrl}>Support</Button>
+          {/if}
+          {#if appRequestForExport.status === enumAppRequestStatus.READY_TO_SUBMIT}
+            <Button icon={Touch_1} on:click={onSubmit}>Submit application</Button>
+          {/if}
+        </div>
+      </footer>
+    </svelte:fragment>
+  </ApplicationDetailsView>
+</div>
+<style>
+  .footer-actions {
+    display: flex;
+    gap: 3rem;
+    justify-content: center;
+    margin-top: 2rem;
+  }
+</style>

package/app/src/routes/requests/[id]/approve/+layout.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import { resolve } from '$app/paths'
+  import { page } from '$app/stores'
+  import type { LayoutData } from './$types.js'
+  import { IntroPanel, TabLinks, applicantStatuses, getReviewerStatusTags, longNumericTime } from '$internal'
+  import { uiRegistry } from '$local'
+  import { enumAppRequestPhase } from '@reqquest/ui'
+  import { isIneligibleByApplicantRequirement } from '$internal'
+
+  export let data: LayoutData
+  $: ({ basicRequestData, requestId } = data)
+  $: eligibleApplications = basicRequestData.applications.filter(a => !isIneligibleByApplicantRequirement(a))
+  $: ineligibleApplications = basicRequestData.applications.filter(a => isIneligibleByApplicantRequirement(a))
+  $: activeIneligible = ineligibleApplications.find(a => resolve(`/requests/${requestId}/approve/${a.programKey}`) === $page.url.pathname)
+  $: navTabs = [
+    ...(eligibleApplications.map(a => ({
+      label: a.navTitle,
+      href: resolve(`/requests/${requestId}/approve/${a.programKey}`)
+    }))),
+    {
+      label: 'Activity log',
+      href: resolve(`/requests/${requestId}/approve/activity`)
+    }
+  ]
+  $: ineligibleTab = {
+    label: activeIneligible?.navTitle ?? 'Ineligible programs',
+    disabled: !ineligibleApplications.length,
+    selected: activeIneligible != null
+  }
+  $: loading = false
+
+</script>
+
+<IntroPanel
+  title={basicRequestData.period.name + (basicRequestData.period.code ? ` (${basicRequestData.period.code})` : '')}
+  subtitle={`Review and complete the ${uiRegistry.getWord('appRequest').toLowerCase()} below or advance it in the workflow.`}
+  tags={getReviewerStatusTags(basicRequestData.status, basicRequestData.phase, basicRequestData.closedAt)}
+>
+  <div class="block-end flex items-center" slot="block-end">
+    <section class="text-base text-center flex-col gap-2 mr-[12px]">
+      <dl class="flex gap-4  text-sm">
+        <div class="flex flex-col bg-[var(--cds-ui-03,#d9d9d9)] py-4 px-4  justify-center">
+          <dt class="font-bold">
+            {#if basicRequestData.closedAt}
+              Closed
+            {:else if applicantStatuses.has(basicRequestData.status)}
+              Submit By
+            {:else if basicRequestData.phase !== enumAppRequestPhase.COMPLETE}
+              Review By
+            {:else}
+              Auto-Closes
+            {/if}:
+          </dt>
+          <dd>
+            {#if basicRequestData.closedAt}
+              <time datetime={basicRequestData.closedAt}>{longNumericTime(basicRequestData.closedAt)}</time>
+            {:else if applicantStatuses.has(basicRequestData.status)}
+              {#if basicRequestData.period.closeDate}
+                <time datetime={basicRequestData.period.closeDate}>{longNumericTime(basicRequestData.period.closeDate)}</time>
+              {:else}
+                No deadline
+              {/if}
+            {:else if basicRequestData.phase !== enumAppRequestPhase.COMPLETE}
+              {#if basicRequestData.period.archiveDate}
+                <time datetime={basicRequestData.period.archiveDate}>{longNumericTime(basicRequestData.period.archiveDate)}</time>
+              {:else}
+                No deadline
+              {/if}
+            {:else}
+              {#if basicRequestData.period.archiveDate}
+                <time datetime={basicRequestData.period.archiveDate}>{longNumericTime(basicRequestData.period.archiveDate)}</time>
+              {:else}
+                Never
+              {/if}
+            {/if}
+          </dd>
+        </div>
+      </dl>
+    </section>
+  </div>
+</IntroPanel>
+{#snippet ineligibleProgramList()}
+  <ul class="ineligible-programs">
+    {#each ineligibleApplications as a}
+      <li>
+        <a href={resolve(`/requests/${requestId}/approve/${a.programKey}`)}>{a.navTitle}</a>
+      </li>
+    {/each}
+  </ul>
+{/snippet}
+<TabLinks tabs={[...navTabs, { ...ineligibleTab, panel: ineligibleProgramList }]} />
+<slot />
+<style>
+  .block-end :global(.bx--label) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translateY(-100%);
+  }
+  .ineligible-programs {
+    padding: 0.25rem 0;
+    margin: 0;
+    list-style: none;
+  }
+  .ineligible-programs a {
+    display: block;
+    padding: 0.5rem 1rem;
+    color: var(--cds-text-01, #161616);
+    text-decoration: none;
+  }
+  .ineligible-programs a:hover {
+    background-color: var(--cds-hover-ui, #e5e5e5);
+  }
+</style>

package/app/src/routes/requests/[id]/approve/+page.ts

@@ -0,0 +1,14 @@
+import { redirect } from '@sveltejs/kit'
+import { base } from '$app/paths'
+import type { PageLoad } from './$types'
+import { excludeApplicantRequirementIneligibleApps } from '$internal'
+
+export const load: PageLoad = async ({ params, parent }) => {
+  const { basicRequestData } = await parent()
+  // exclude previously ineligible applications from default landing
+  const eligibleApps = excludeApplicantRequirementIneligibleApps([basicRequestData])
+  const key = eligibleApps[0]?.applications[0]?.programKey ?? basicRequestData.applications[0]?.programKey // if no eligibile get first ineligible
+  // every program can be hidden from reviewers by showIneligiblePreSubmit: false, leaving only the activity log
+  if (!key) throw redirect(303, `${base}/requests/${params.id}/approve/activity`)
+  throw redirect(303, `${base}/requests/${params.id}/approve/${key}`)
+}